:root {
  color-scheme: dark;
  --master-white: #ffffff;
  --master-black: #000000;
  --master-positive: #39ff88;
  --master-negative: #ff3b4e;
  --master-cosmetic-red: #ff2d3f;
  --master-cosmetic-slime: #8cff00;
  --master-cosmetic-ice: #a8eaff;
  --master-surface: #050607;
  --master-surface-hover: #07090b;
  --master-graphite: #0a0c0f;
  --master-surface-raised: #0c0e11;
  --master-surface-control: #0a0d10;
  --master-surface-mid: #090b0d;
  --master-surface-soft: #080a0c;
  --master-bg-glow: #0b0e11;
  --master-bg-deep: #030405;
  --master-neutral-high: #2a2d31;
  --master-neutral-mid: #17191c;
  --master-video-a: #08090b;
  --master-video-b: #0b0d10;
  --master-video-c: #040506;
  --master-video-black: #020406;
  --master-surface-popover: #080a0d;
  --master-panel: #050709;
  --master-overlay-deep: #020507;
  --master-overlay-mid: #030507;
  --master-panel-high: #0f1114;
  --master-panel-mid: #060709;
  --master-panel-raised: #101215;
  --master-panel-soft: #07080a;
  --master-marker-surface: #05080d;
  --ice: var(--master-white);
  --white: var(--master-white);
  --paper: var(--master-white);
  --paper-soft: var(--master-white);
  --muted: var(--master-white);
  --night: var(--master-surface);
  --graphite: var(--master-graphite);
  --accent-positive: var(--master-positive);
  --status-listening: var(--master-positive);
  --status-offline: var(--master-negative);
  --status-success: var(--master-positive);
  --status-error: var(--master-negative);
  --ui-progress-accent: var(--master-positive);
  --chat-reply-accent: var(--master-positive);
  --cosmetic-red: var(--master-cosmetic-red);
  --cosmetic-slime: var(--master-cosmetic-slime);
  --cosmetic-ice: var(--master-cosmetic-ice);
  --line: color-mix(in srgb, var(--master-white) 18%, transparent);
  --line-soft: color-mix(in srgb, var(--master-white) 9%, transparent);
  --line-strong: color-mix(in srgb, var(--master-white) 25%, transparent);
  --ui-border: var(--line);
  --ui-border-soft: var(--line-soft);
  --ui-border-hover: color-mix(in srgb, var(--master-white) 42%, transparent);
  --ui-hover-glow: color-mix(in srgb, var(--master-white) 10%, transparent);
  --ui-panel-bg: color-mix(in srgb, var(--master-panel) 98.5%, transparent);
  --ui-panel-shadow: 0 24px 70px color-mix(in srgb, var(--master-black) 56%, transparent), inset 0 1px color-mix(in srgb, var(--master-white) 5%, transparent);
  --ui-head-bg: linear-gradient(180deg, color-mix(in srgb, var(--master-white) 2.6%, transparent), transparent);
  --ui-card-bg: color-mix(in srgb, var(--master-white) 1.4%, transparent);
  --ui-card-bg-hover: color-mix(in srgb, var(--master-white) 3.2%, transparent);
  --ui-subpage-bg: var(--master-surface);
  --ui-button-bg: linear-gradient(145deg, color-mix(in srgb, var(--master-white) 4.5%, transparent), color-mix(in srgb, var(--master-white) 1.8%, transparent));
  --ui-button-bg-hover: linear-gradient(145deg, color-mix(in srgb, var(--master-white) 7.5%, transparent), color-mix(in srgb, var(--master-white) 2.5%, transparent));
  --ui-radius-panel: 14px;
  --ui-radius-card: 10px;
  --sp-surface: var(--master-surface);
  --sp-surface-hover: var(--master-surface-hover);
  --sp-panel: var(--master-surface);
  --sp-border: color-mix(in srgb, var(--master-white) 20%, var(--line-soft));
  --sp-border-hover: color-mix(in srgb, var(--master-white) 46%, var(--line));
  --sp-shadow: 0 8px 22px color-mix(in srgb, var(--master-black) 18%, transparent), inset 0 1px color-mix(in srgb, var(--master-white) 5.5%, transparent);
  --sp-family-bg: var(--master-surface);
  --sp-family-bg-hover: var(--master-surface-hover);
  --sp-family-border: 1px solid var(--line);
  --sp-family-border-ice: color-mix(in srgb, var(--master-white) 64%, transparent);
  --sp-family-shadow: 0 8px 22px color-mix(in srgb, var(--master-black) 20%, transparent), inset 0 1px color-mix(in srgb, var(--master-white) 5.5%, transparent);
  --sp-family-shadow-hover: 0 0 0 1px color-mix(in srgb, var(--master-white) 20%, transparent), 0 0 20px color-mix(in srgb, var(--master-white) 12%, transparent), 0 10px 24px color-mix(in srgb, var(--master-black) 24%, transparent), inset 0 1px color-mix(in srgb, var(--master-white) 12%, transparent);
  --sp-family-radius: 9px;
  --sp-primary: var(--master-white);
  --sp-secondary: color-mix(in srgb, var(--master-white) 72%, transparent);
  --sp-tertiary: color-mix(in srgb, var(--master-white) 56%, transparent);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--night);
  color: var(--white);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

html.is-booting body { pointer-events: none !important; user-select: none !important; }
html.is-booting body * { cursor: default !important; }

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; min-width: 320px; min-height: 0; margin: 0; overflow: hidden; background: radial-gradient(circle at 50% 28%, var(--master-bg-glow) 0%, var(--graphite) 42%, var(--master-bg-deep) 100%); }
button { font: inherit; }
.ui-icon { display: block; flex: 0 0 auto; color: currentColor; }
.profile-section-label { min-width: 0; display: inline-flex !important; align-items: center; gap: 6px; }
.profile-section-label em { min-width: 0; color: inherit; font: inherit; font-style: normal; letter-spacing: inherit; white-space: nowrap; }
.profile-section-icon { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.page-shell { position: relative; z-index: 1; width: min(100% - 40px, 960px); height: 100svh; margin: 0 auto; padding: 8px 0 18px; display: grid; grid-template-rows: minmax(165px, 32svh) auto minmax(150px, 1fr) minmax(64px, auto); gap: 10px; overflow: hidden; }
.brand-stage { position: relative; min-height: 0; height: 100%; display: grid; place-items: center; isolation: isolate; }
.globe-glow { position: absolute; z-index: -1; width: min(55vw, 560px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ice) 16%, transparent), color-mix(in srgb, var(--ice) 7%, transparent) 42%, transparent 70%); filter: blur(13px); }
.globe { width: min(100%, 630px); height: 100%; position: relative; }
.globe canvas { width: 100%; height: 100%; display: block; }
.globe-fallback { position: absolute; inset: 50% auto auto 50%; width: min(55vw, 270px); aspect-ratio: 1; transform: translate(-50%, -50%) scale(var(--bass-scale, 1)); border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--ice), color-mix(in srgb, var(--ice) 34%, var(--master-neutral-high)) 37%, var(--master-neutral-mid) 69%, var(--night) 100%); box-shadow: 0 0 70px color-mix(in srgb, var(--ice) 19%, transparent); }

.control-dock { position: relative; z-index: 5; width: 100%; min-height: 48px; margin-top: 28px; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.dock-button { position: relative; z-index: 1; width: 124px; flex: 0 0 124px; min-width: 0; min-height: 38px; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin: 0; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--paper); background: linear-gradient(145deg, color-mix(in srgb, var(--master-white) 4.7%, transparent), color-mix(in srgb, var(--master-white) 1.8%, transparent) 45%, color-mix(in srgb, var(--master-black) 8%, transparent)); box-shadow: 0 8px 22px color-mix(in srgb, var(--master-black) 20%, transparent), inset 0 1px color-mix(in srgb, var(--master-white) 5.5%, transparent); font-size: 9px; font-weight: 700; letter-spacing: .1em; white-space: nowrap; pointer-events: auto; touch-action: manipulation; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dock-button::after { content: ""; position: absolute; z-index: 0; inset: -35% auto -35% -48%; width: 42%; transform: skewX(-18deg) translateX(-220%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ice) 16%, transparent), transparent); opacity: 0; pointer-events: none; transition: transform .48s cubic-bezier(.22,.7,.2,1), opacity .18s ease; }
.dock-button > * { position: relative; z-index: 1; }
.dock-button { cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .16s ease; }
.dock-button:focus-visible { border-color: color-mix(in srgb, var(--ice) 64%, transparent); color: var(--ice); background: linear-gradient(145deg, color-mix(in srgb, var(--ice) 7%, var(--master-surface-raised)), color-mix(in srgb, var(--master-white) 1.8%, transparent)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ice) 20%, transparent), 0 0 20px color-mix(in srgb, var(--ice) 12%, transparent), 0 9px 22px color-mix(in srgb, var(--master-black) 22%, transparent), inset 0 1px color-mix(in srgb, var(--ice) 12%, transparent); }
.dock-button:focus-visible::after { transform: skewX(-18deg) translateX(390%); opacity: .9; }
@media (hover: hover) and (pointer: fine) {
  .dock-button:hover { border-color: color-mix(in srgb, var(--ice) 64%, transparent); color: var(--ice); background: linear-gradient(145deg, color-mix(in srgb, var(--ice) 7%, var(--master-surface-raised)), color-mix(in srgb, var(--master-white) 1.8%, transparent)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ice) 20%, transparent), 0 0 20px color-mix(in srgb, var(--ice) 12%, transparent), 0 10px 24px color-mix(in srgb, var(--master-black) 24%, transparent), inset 0 1px color-mix(in srgb, var(--ice) 12%, transparent); transform: translateY(-1px); }
  .dock-button:hover::after { transform: skewX(-18deg) translateX(390%); opacity: .9; }
}
.dock-button:active { color: var(--ice); border-color: color-mix(in srgb, var(--ice) 56%, transparent); transform: translateY(0) scale(.985); }
.dock-button:active::after { transform: skewX(-18deg) translateX(390%); opacity: .75; }
.dock-button b { color: inherit; font-size: 11px; }
.dock-icon { position: relative; display: inline-block; flex: 0 0 auto; width: 17px; height: 17px; color: currentColor; }
.account-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.listener-headphones { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-icon { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.market-icon { fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.sound-icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.broadcast { width: min(100%, 740px); min-height: 0; justify-self: center; }
.broadcast-frame { width: 100%; height: 100%; min-height: 0; padding: 6px; display: flex; flex-direction: column; border: 1px solid var(--line-strong); border-radius: 12px; background: linear-gradient(145deg, color-mix(in srgb, var(--master-panel-high) 94%, transparent), color-mix(in srgb, var(--master-panel-mid) 97%, transparent)); box-shadow: 0 20px 50px color-mix(in srgb, var(--master-black) 34%, transparent), inset 0 1px color-mix(in srgb, var(--master-white) 6%, transparent), inset 0 -1px color-mix(in srgb, var(--master-black) 38%, transparent); }
.video-stage { position: relative; min-height: 0; flex: 1; overflow: hidden; display: flex; align-items: center; border: 1px solid var(--line-soft); border-radius: 8px; background: radial-gradient(ellipse at 72% 45%, color-mix(in srgb, var(--master-white) 5.5%, transparent), transparent 35%), linear-gradient(115deg, var(--master-video-a), var(--master-video-b) 50%, var(--master-video-c)); }
.radio-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: contain; background: var(--master-video-black); opacity: 0; pointer-events: none; transition: opacity .12s linear; }
.radio-video.is-active { z-index: 1; opacity: 1; }
.video-grid { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(color-mix(in srgb, var(--master-white) 5.5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--master-white) 5.5%, transparent) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg, transparent, var(--master-black) 34%, var(--master-black) 80%, transparent); pointer-events: none; }
.video-utility-layer { position: absolute; z-index: 4; top: 11px; left: 13px; right: 13px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: color-mix(in srgb, var(--master-white) 88%, transparent); pointer-events: none; filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--master-black) 72%, transparent)); }
.video-listeners, .video-volume, .volume-toggle { color: inherit; }
.video-listeners { min-width: 0; min-height: 28px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; border: 0; background: transparent; font: inherit; cursor: pointer; pointer-events: auto; touch-action: manipulation; transition: color .16s ease, opacity .16s ease, transform .16s ease; }
.video-listeners b { min-width: 1ch; color: currentColor; font-size: 9px; font-weight: 780; line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.video-control-icon { width: 17px; height: 17px; flex: 0 0 auto; }
.video-volume { --volume-accent: color-mix(in srgb, var(--master-white) 90%, transparent); height: 28px; display: inline-flex; align-items: center; gap: 7px; pointer-events: auto; transition: color .16s ease; }
.volume-toggle { width: 22px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: manipulation; transition: color .16s ease, transform .16s ease; }
.volume-toggle:focus-visible, .video-listeners:focus-visible { outline: 1px solid var(--ice); outline-offset: 2px; border-radius: 4px; color: var(--ice); }
.volume-slider:focus-visible { outline: 0; }
.volume-slash { display: none; }
.volume-toggle.is-muted .volume-waves { display: none; }
.volume-toggle.is-muted .volume-slash { display: block; }
.volume-slider::-moz-range-progress { height: 2px; border-radius: 3px; background: var(--volume-accent); }
@media (hover: hover) and (pointer: fine) { .video-listeners:hover, .volume-toggle:hover, .video-volume:has(.volume-slider:hover) { color: var(--ice); --volume-accent: var(--ice); } .video-listeners:hover, .volume-toggle:hover { transform: translateY(-1px); } }
.video-listeners:active, .volume-toggle:active { transform: scale(.94); color: var(--ice); }
.eyebrow { display: block; color: var(--paper-soft); font-size: 9px; font-weight: 600; letter-spacing: .24em; }
.live-progress { position: absolute; z-index: 2; inset: auto 0 0; height: 32px; display: flex; align-items: center; gap: 12px; padding: 0 14px; color: var(--white); background: linear-gradient(transparent, color-mix(in srgb, var(--master-black) 72%, transparent)); pointer-events: none; }
.timeline { flex: 1; min-width: 30px; height: 2px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--master-white) 18%, transparent); }
.timeline i { display: block; width: 0; height: 100%; background: var(--white); box-shadow: 0 0 8px color-mix(in srgb, var(--master-white) 32%, transparent); transition: width .18s linear; }
.control-time { font-size: 8px; letter-spacing: .08em; }

.track-card { width: min(100%, 740px); min-width: 0; min-height: 68px; justify-self: center; padding: 9px 15px; display: flex; align-items: center; gap: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: linear-gradient(118deg, color-mix(in srgb, var(--master-panel-raised) 94%, transparent), color-mix(in srgb, var(--master-panel-soft) 92%, transparent)); box-shadow: 0 14px 34px color-mix(in srgb, var(--master-black) 23%, transparent), inset 0 1px color-mix(in srgb, var(--master-white) 3.5%, transparent); }
.track-main, .track-next { min-width: 0; }
.track-main { position: relative; flex: 1; }
.track-main h2, .track-next h2 { margin: 4px 0 2px; overflow: hidden; letter-spacing: .025em; text-overflow: ellipsis; white-space: nowrap; }
.track-main h2 { font-size: 14px; font-weight: 720; letter-spacing: .018em; }
.track-main p { margin: 1px 0 0; color: var(--paper-soft); font-size: 9px; font-weight: 500; letter-spacing: .055em; }
.track-next { min-width: 190px; max-width: 34%; margin-left: auto; padding-left: 17px; border-left: 1px solid var(--line-soft); }
.track-next h2 { color: var(--paper); font-size: 11px; font-weight: 650; opacity: .9; }
.track-next .eyebrow { opacity: .82; }
.track-card .eyebrow { color: var(--status-listening); text-shadow: 0 0 10px color-mix(in srgb, var(--status-listening) 18%, transparent); }


@media (min-width: 761px) {
  .globe, .globe-glow { transform: translateY(-26px); }
}

@media (max-width: 760px) {
  .page-shell { width: min(100% - 24px, 600px); grid-template-rows: minmax(150px, 30svh) auto minmax(145px, 1fr) minmax(62px, auto); gap: 6px; padding: max(18px, calc(env(safe-area-inset-top) + 9px)) 0 max(14px, env(safe-area-inset-bottom)); }
  .brand-stage { padding-top: 8px; }
  .globe, .globe-glow { transform: translateY(-8px); }
  .globe { width: min(100%, 550px); }
  .control-dock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 24px; padding: 0; }
  .dock-button { width: 100%; flex: initial; min-height: 34px; padding: 0 5px; gap: 5px; border-radius: 8px; font-size: 8px; letter-spacing: .07em; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .dock-icon { width: 16px; height: 16px; }
  .video-utility-layer { top: 8px; left: 9px; right: 9px; gap: 10px; }
  .video-control-icon { width: 15px; height: 15px; }
  .video-listeners { min-height: 26px; }
  .video-listeners b { font-size: 8px; }
  .video-volume { height: 26px; gap: 5px; }
  .volume-toggle { width: 19px; height: 26px; }
  .volume-slider { width: clamp(48px, 15vw, 58px); height: 22px; }
  .broadcast-frame { padding: 5px; }
    .live-progress { height: 28px; gap: 8px; padding-inline: 10px; }
  .track-card { min-height: 64px; padding: 8px 10px; gap: 8px; }
  .track-main h2 { font-size: 11px; }
  .track-next h2 { font-size: 9px; }
  .track-main p { font-size: 8px; }
  .track-next { min-width: 0; max-width: 38%; padding-left: 10px; }
  .eyebrow { font-size: 7px; letter-spacing: .16em; }
}

@media (max-width: 380px) {
  .dock-button { font-size: 7px; gap: 4px; }
  .track-card { gap: 6px; padding-inline: 7px; }
  .track-main h2 { font-size: 10px; }
  .track-next h2 { font-size: 8px; }
  .track-next { padding-left: 7px; }
}

@media (max-height: 650px) {
  .page-shell { grid-template-rows: minmax(138px, 29svh) auto minmax(138px, 1fr) minmax(60px, auto); gap: 6px; padding: max(7px, env(safe-area-inset-top)) 0 max(10px, env(safe-area-inset-bottom)); }
  .brand-stage { padding-top: 6px; }
  .globe, .globe-glow { transform: translateY(-8px); }
  .control-dock { min-height: 44px; }
  .track-card { min-height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

.broadcast-frame, .track-card { --surface-accent: var(--paper); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.broadcast-frame .eyebrow, .broadcast-frame .live-progress, .track-card h2 { color: var(--surface-accent); transition: color .2s ease, text-shadow .2s ease; }
.track-card .eyebrow { transition: color .2s ease, text-shadow .2s ease; }
.track-card p { transition: color .2s ease, text-shadow .2s ease; }
.broadcast-frame .timeline i { background: var(--surface-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--surface-accent) 28%, transparent); transition: width .18s linear, background .2s ease, box-shadow .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .broadcast-frame:hover, .track-card:hover { --surface-accent: var(--ice); border-color: color-mix(in srgb, var(--ice) 55%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--ice) 9%, transparent), 0 16px 38px color-mix(in srgb, var(--master-black) 28%, transparent), inset 0 1px color-mix(in srgb, var(--ice) 8%, transparent); transform: translateY(-1px); }
  .broadcast-frame:hover .eyebrow, .broadcast-frame:hover .live-progress, .track-card:hover h2 { text-shadow: 0 0 13px color-mix(in srgb, var(--ice) 30%, transparent); }.track-card:hover .eyebrow { text-shadow: 0 0 13px color-mix(in srgb, var(--status-listening) 34%, transparent); }
  .track-card:hover p { color: color-mix(in srgb, var(--ice) 78%, var(--paper)); text-shadow: 0 0 10px color-mix(in srgb, var(--ice) 18%, transparent); }
}
@media (hover: none), (pointer: coarse) {
  .dock-button:active { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ice) 18%, transparent), 0 0 16px color-mix(in srgb, var(--ice) 10%, transparent), inset 0 1px color-mix(in srgb, var(--ice) 10%, transparent); }
}


[hidden] { display: none !important; }

.account-button.is-signed-in { max-width: 190px; }
.account-button.is-signed-in .account-icon { display: none !important; }
.account-button.is-signed-in #account-button-label { max-width: 128px; overflow: hidden; text-overflow: ellipsis; }
.account-button-avatar { width: 20px; height: 20px; flex: 0 0 20px; }

@media (pointer: coarse) {
  .dock-button { backdrop-filter: none; -webkit-backdrop-filter: none; }
}


.account-dialog { width: min(92vw, 560px); max-width: 560px; max-height: min(86svh, 760px); margin: auto; padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ice) 28%, var(--line)); border-radius: 16px; color: var(--paper); background: color-mix(in srgb, var(--master-panel) 97%, transparent); box-shadow: 0 30px 90px color-mix(in srgb, var(--master-black) 62%, transparent), 0 0 42px color-mix(in srgb, var(--ice) 7%, transparent), inset 0 1px color-mix(in srgb, var(--master-white) 6%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.account-dialog.is-fallback-open { position: fixed; z-index: 50; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: block; }
.account-sheet { position: relative; max-height: min(86svh, 760px); overflow-y: auto; overscroll-behavior: contain; padding: 24px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--master-white) 30%, transparent) transparent; }
.account-close { position: absolute; z-index: 3; top: 10px; right: 10px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 9px; color: var(--paper); background: color-mix(in srgb, var(--master-white) 2.5%, transparent); cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .16s ease; }
.account-close svg { width: 10.5px; height: 10.5px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.account-close:active { transform: scale(.94); }
.account-close:focus-visible { outline: 1px solid var(--ice); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .account-close:hover { color: var(--ice); border-color: color-mix(in srgb, var(--ice) 58%, transparent); background: color-mix(in srgb, var(--ice) 6%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--ice) 10%, transparent); } }
.account-header { padding-right: 34px; margin-bottom: 14px; }
.account-kicker { display: block; color: var(--ice); font-size: 9px; font-weight: 700; letter-spacing: .22em; text-shadow: 0 0 10px color-mix(in srgb, var(--ice) 16%, transparent); }
.account-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; margin-bottom: 14px; border: 1px solid var(--line-soft); border-radius: 11px; background: color-mix(in srgb, var(--master-white) 2%, transparent); }
.account-tab { min-height: 38px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; color: var(--paper-soft); background: transparent; font-size: 9px; font-weight: 750; letter-spacing: .12em; cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.account-tab.is-active { color: var(--ice); border-color: color-mix(in srgb, var(--ice) 34%, transparent); background: color-mix(in srgb, var(--ice) 6%, transparent); box-shadow: inset 0 1px color-mix(in srgb, var(--ice) 7%, transparent); }
.account-tab:focus-visible { outline: 1px solid var(--ice); outline-offset: 2px; }
.account-form { display: grid; gap: 11px; }
.account-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.account-form label { min-width: 0; display: grid; gap: 6px; color: var(--paper-soft); font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.account-form input { width: 100%; min-width: 0; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; outline: 0; color: var(--paper); background: color-mix(in srgb, var(--master-white) 2.8%, transparent); font: inherit; font-size: 13px; letter-spacing: .01em; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.account-form input::placeholder { color: color-mix(in srgb, var(--master-white) 32%, transparent); }
.account-form input:focus { border-color: color-mix(in srgb, var(--ice) 62%, transparent); background: color-mix(in srgb, var(--ice) 4%, color-mix(in srgb, var(--master-white) 2.5%, transparent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ice) 7%, transparent); }
.account-primary, .account-secondary { min-height: 42px; padding: 0 14px; border-radius: 9px; font-size: 9px; font-weight: 800; letter-spacing: .13em; cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .16s ease; }
.account-primary { border: 1px solid color-mix(in srgb, var(--ice) 52%, transparent); color: var(--ice); background: linear-gradient(145deg, color-mix(in srgb, var(--ice) 8%, var(--master-surface-control)), color-mix(in srgb, var(--master-white) 2%, transparent)); box-shadow: inset 0 1px color-mix(in srgb, var(--ice) 8%, transparent), 0 8px 20px color-mix(in srgb, var(--master-black) 22%, transparent); }
.account-secondary { width: 100%; margin-top: 10px; border: 1px solid var(--line); color: var(--paper); background: color-mix(in srgb, var(--master-white) 2%, transparent); }
.account-primary:focus-visible, .account-secondary:focus-visible, .avatar-choice:focus-visible { outline: 1px solid var(--ice); outline-offset: 3px; }
.account-primary:disabled, .account-secondary:disabled, .account-form input:disabled { cursor: default; opacity: .55; }
@media (hover: hover) and (pointer: fine) {
  .account-primary:hover { border-color: var(--ice); box-shadow: 0 0 18px color-mix(in srgb, var(--ice) 11%, transparent), 0 9px 22px color-mix(in srgb, var(--master-black) 24%, transparent); transform: translateY(-1px); }
  .account-secondary:hover { color: var(--ice); border-color: color-mix(in srgb, var(--ice) 56%, transparent); background: color-mix(in srgb, var(--ice) 5%, transparent); }
}
.account-message { margin: 12px 0 0; padding: 9px 10px; border: 1px solid var(--line-soft); border-radius: 8px; color: var(--paper-soft); background: color-mix(in srgb, var(--master-white) 2%, transparent); font-size: 10px; line-height: 1.45; }
.account-member { display: grid; gap: 14px; }
.account-identity { position: relative; display: flex; align-items: center; gap: 13px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 12px; background: color-mix(in srgb, var(--master-white) 1.8%, transparent); }
.account-identity > div { min-width: 0; display: grid; gap: 2px; }
.profile-name-row { min-width: 0; display: flex; align-items: center; gap: 8px; }
.profile-name-row > strong { min-width: 0; flex: 1 1 auto; }
.account-identity strong { overflow: hidden; color: var(--paper); font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.account-identity span:not(.profile-avatar) { color: var(--ice); font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.account-identity small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.account-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.account-stat { min-width: 0; display: grid; gap: 5px; padding: 11px 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: color-mix(in srgb, var(--master-white) 1.8%, transparent); }
.account-stat > .profile-section-label { color: var(--ice); font-size: 7px; font-weight: 800; letter-spacing: .13em; white-space: nowrap; }
.account-stat strong { min-width: 0; color: var(--paper); font-size: clamp(14px, 3vw, 18px); font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1.1; white-space: nowrap; }
.account-info-trigger { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; min-height: 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: color-mix(in srgb, var(--master-white) 82%, transparent); background: transparent; cursor: pointer; transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .16s ease; }
.account-info-trigger:active { transform: scale(.9); }
.account-info-trigger:focus-visible { outline: 1px solid color-mix(in srgb, var(--ice) 70%, transparent); outline-offset: 2px; color: var(--ice); }
@media (hover: hover) and (pointer: fine) { .account-info-trigger:hover { color: var(--ice); background: color-mix(in srgb, var(--ice) 8%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--ice) 12%, transparent); transform: rotate(18deg); } }
.account-info-editor { padding: 12px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--ui-subpage-bg); box-shadow: inset 0 1px color-mix(in srgb, var(--master-white) 1.8%, transparent); }
.account-info-close { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 8px; color: var(--paper); background: color-mix(in srgb, var(--master-white) 2%, transparent); cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .16s ease; }
.account-info-close svg { width: 10.5px; height: 10.5px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.account-info-close:active { transform: scale(.94); }
.account-info-close:focus-visible { outline: 1px solid var(--ice); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .account-info-close:hover { color: var(--ice); border-color: color-mix(in srgb, var(--ice) 56%, transparent); background: color-mix(in srgb, var(--ice) 5%, transparent); } }
.profile-avatar { position: relative; width: 48px; height: 48px; flex: 0 0 48px; overflow: hidden; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--ice) 40%, var(--line)); border-radius: 50%; color: var(--ice); background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--master-white) 9%, transparent), color-mix(in srgb, var(--master-white) 3.5%, transparent) 48%, color-mix(in srgb, var(--master-black) 30%, transparent)); box-shadow: inset 0 0 18px color-mix(in srgb, var(--master-white) 3.5%, transparent); }
.profile-avatar img { width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--master-white) 18%, transparent)); }
.profile-avatar.is-photo-avatar img { width: 100%; height: 100%; object-fit: cover; filter: none; transform: scale(1.015); }
.profile-avatar > span { font-size: 18px; font-weight: 800; }
.profile-avatar[data-avatar="diamond"]::before { content: ""; width: 19px; height: 19px; border: 1.5px solid currentColor; transform: rotate(45deg); box-shadow: 0 0 9px color-mix(in srgb, var(--master-white) 16%, transparent), inset 0 0 8px color-mix(in srgb, var(--master-white) 6%, transparent); }
.profile-avatar[data-avatar="diamond"]::after { content: ""; position: absolute; width: 6px; height: 6px; border: 1px solid currentColor; transform: rotate(45deg); }
.profile-avatar[data-avatar="web"] { background-image: repeating-conic-gradient(from 0deg, transparent 0 14deg, color-mix(in srgb, var(--master-white) 42%, transparent) 14deg 15deg, transparent 15deg 30deg), repeating-radial-gradient(circle at center, transparent 0 6px, color-mix(in srgb, var(--master-white) 22%, transparent) 7px 8px, transparent 9px 13px); }
.profile-avatar.is-compact { width: 20px; height: 20px; flex-basis: 20px; border-width: 1px; }
.profile-avatar.is-compact > span { font-size: 9px; }
.profile-avatar.is-compact[data-avatar="diamond"]::before { width: 8px; height: 8px; }
.profile-avatar.is-compact[data-avatar="diamond"]::after { width: 2px; height: 2px; }
.account-avatar-trigger { appearance: none; padding: 0; font: inherit; cursor: pointer; isolation: isolate; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.profile-avatar.account-avatar-trigger::after { content: "CHANGE"; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 18px; display: grid; place-items: center; border: 0; border-radius: 0; color: var(--master-white); background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--master-overlay-deep) 54%, transparent) 38%, color-mix(in srgb, var(--master-overlay-deep) 94%, transparent) 100%); font-size: 5.4px; font-weight: 850; letter-spacing: .09em; line-height: 1; text-shadow: 0 1px 3px color-mix(in srgb, var(--master-black) 90%, transparent); opacity: 0; transform: translateY(3px); transition: opacity .16s ease, transform .16s ease, color .16s ease, text-shadow .16s ease; pointer-events: none; }
.account-avatar-trigger:focus-visible { outline: 1px solid var(--ice); outline-offset: 3px; }
.account-avatar-trigger.is-picker-open { border-color: color-mix(in srgb, var(--ice) 72%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--ice) 16%, transparent); }
.profile-avatar.account-avatar-trigger.is-picker-open::after { opacity: 1; transform: none; color: var(--ice); text-shadow: 0 0 7px color-mix(in srgb, var(--ice) 40%, transparent), 0 1px 3px color-mix(in srgb, var(--master-black) 95%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .account-avatar-trigger:hover { border-color: color-mix(in srgb, var(--ice) 72%, transparent); box-shadow: 0 0 17px color-mix(in srgb, var(--ice) 13%, transparent); transform: translateY(-1px); }
  .profile-avatar.account-avatar-trigger:hover::after { opacity: 1; transform: none; color: var(--ice); text-shadow: 0 0 7px color-mix(in srgb, var(--ice) 38%, transparent), 0 1px 3px color-mix(in srgb, var(--master-black) 95%, transparent); }
}
@media (hover: none), (pointer: coarse) { .profile-avatar.account-avatar-trigger::after { opacity: .9; transform: none; } }
.avatar-fieldset { min-width: 0; margin: -2px 0 1px; padding: 11px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--ui-subpage-bg); box-shadow: inset 0 1px color-mix(in srgb, var(--master-white) 1.8%, transparent); }
.avatar-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.avatar-choice { position: relative; min-width: 0; min-height: 86px; padding: 7px 4px 6px; display: grid; place-items: center; align-content: center; gap: 6px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 10px; color: var(--paper-soft); background: color-mix(in srgb, var(--master-white) 1.6%, transparent); cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .16s ease; }
.avatar-choice::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 25%, color-mix(in srgb, var(--master-white) 4.5%, transparent) 47%, transparent 68%); opacity: 0; transform: translateX(-42%); transition: opacity .18s ease, transform .28s ease; }
.avatar-choice .profile-avatar { width: 51px; height: 51px; flex-basis: 51px; pointer-events: none; border-color: color-mix(in srgb, var(--master-white) 16%, transparent); box-shadow: 0 5px 14px color-mix(in srgb, var(--master-black) 20%, transparent); }
.avatar-choice b { overflow: hidden; max-width: 100%; color: inherit; font-size: 6.25px; font-weight: 760; letter-spacing: .045em; text-overflow: ellipsis; white-space: nowrap; }
.avatar-choice.is-selected { color: var(--ice); border-color: color-mix(in srgb, var(--ice) 62%, transparent); background: color-mix(in srgb, var(--ice) 6%, color-mix(in srgb, var(--master-white) 1%, transparent)); box-shadow: 0 0 15px color-mix(in srgb, var(--ice) 9%, transparent), inset 0 0 12px color-mix(in srgb, var(--ice) 4%, transparent); }
.avatar-choice.is-selected .profile-avatar { border-color: color-mix(in srgb, var(--ice) 70%, transparent); box-shadow: 0 0 13px color-mix(in srgb, var(--ice) 13%, transparent), 0 5px 14px color-mix(in srgb, var(--master-black) 20%, transparent); }
.avatar-choice-check { position: absolute; z-index: 2; top: 5px; right: 5px; width: 14px; height: 14px; padding: 2px; border: 1px solid color-mix(in srgb, var(--ice) 60%, transparent); border-radius: 50%; color: var(--ice); background: color-mix(in srgb, var(--master-overlay-deep) 82%, transparent); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.78); transition: opacity .16s ease, transform .16s ease; pointer-events: none; }
.avatar-choice.is-selected .avatar-choice-check { opacity: 1; transform: scale(1); }
.avatar-save-button { width: 100%; margin-top: 10px; }
@media (hover: hover) and (pointer: fine) {
  .avatar-choice:hover { color: var(--ice); border-color: color-mix(in srgb, var(--ice) 42%, transparent); background: color-mix(in srgb, var(--ice) 3%, color-mix(in srgb, var(--master-white) 1.5%, transparent)); transform: translateY(-2px); }
  .avatar-choice:hover::before { opacity: 1; transform: translateX(40%); }
}

@media (max-width: 760px) {
  .account-button.is-signed-in #account-button-label { max-width: 74px; }
  .account-dialog { width: min(calc(100vw - 20px), 520px); max-height: min(90svh, 720px); border-radius: 14px; }
  .account-sheet { max-height: min(90svh, 720px); padding: 20px 16px 18px; }
  .account-header { padding-right: 40px; margin-bottom: 12px; }
  .account-form input { min-height: 44px; font-size: 16px; }
  .account-primary, .account-secondary, .account-tab { min-height: 44px; }
  .account-info-trigger { width: 28px; height: 28px; min-height: 0; padding: 0; }
  .account-info-editor { padding: 11px; }
  .account-stat { padding: 10px; }
  .account-stat strong { font-size: 15px; }
  .avatar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .avatar-choice { min-height: 82px; }
  .avatar-choice .profile-avatar { width: 48px; height: 48px; flex-basis: 48px; }
}

@media (max-width: 430px) {
  .account-form-grid { grid-template-columns: 1fr; }
  .avatar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .avatar-choice { min-height: 78px; }
  .avatar-choice .profile-avatar { width: 46px; height: 46px; flex-basis: 46px; }
}

@media (max-width: 350px) {
  .account-sheet { padding-inline: 12px; }
  .avatar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-tabs { gap: 4px; }
  .account-tab { padding-inline: 5px; font-size: 8px; letter-spacing: .08em; }
  .account-stat { padding-inline: 8px; }
  .account-stat span { font-size: 6.5px; letter-spacing: .09em; }
  .account-stat strong { font-size: 13px; }
  .account-button.is-signed-in #account-button-label { max-width: 56px; }
}




.presence-dot { width: 7px; height: 7px; flex: 0 0 7px; display: inline-block; border-radius: 50%; background: var(--master-white); box-shadow: 0 0 8px color-mix(in srgb, var(--master-white) 34%, transparent); }
.presence-dot.is-online { background: var(--master-white); box-shadow: 0 0 8px color-mix(in srgb, var(--master-white) 42%, transparent); }
.profile-presence { width: max-content; margin-top: 0; flex: 0 0 auto; display: inline-flex !important; align-items: center; gap: 6px; color: var(--master-white) !important; font-size: 7px !important; font-weight: 800 !important; letter-spacing: .13em !important; line-height: 1; }
.profile-presence i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--master-white); box-shadow: 0 0 8px color-mix(in srgb, var(--master-white) 34%, transparent); }
.profile-presence b { font: inherit; }
.profile-presence.is-online { color: var(--master-white) !important; }
.profile-presence.is-online i { background: var(--master-white); box-shadow: 0 0 8px color-mix(in srgb, var(--master-white) 42%, transparent); }

.listeners-panel { position: fixed; z-index: 45; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: min(360px, calc(100vw - 32px)); max-height: min(62svh, 520px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--ice) 24%, var(--line)); border-radius: 14px; color: var(--paper); background: color-mix(in srgb, var(--master-panel) 96.5%, transparent); box-shadow: 0 24px 70px color-mix(in srgb, var(--master-black) 54%, transparent), 0 0 28px color-mix(in srgb, var(--ice) 5%, transparent), inset 0 1px color-mix(in srgb, var(--master-white) 5%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; transform: translateY(8px) scale(.985); transform-origin: right bottom; transition: opacity .18s ease, transform .18s ease; }
.listeners-panel.is-open { opacity: 1; transform: translateY(0) scale(1); }
.listeners-panel-head { min-height: 50px; padding: 11px 11px 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line-soft); background: linear-gradient(180deg, color-mix(in srgb, var(--master-white) 2.5%, transparent), transparent); }
.listeners-panel-title { min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--paper); font-size: 10px; font-weight: 780; letter-spacing: .12em; }
.listeners-panel-title b { color: var(--paper); font: inherit; font-variant-numeric: tabular-nums; }
.panel-close { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 9px; color: var(--paper); background: color-mix(in srgb, var(--master-white) 2.5%, transparent); cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .16s ease; }
.panel-close svg { width: 10.5px; height: 10.5px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.panel-close:active { transform: scale(.94); }
.panel-close:focus-visible { outline: 1px solid var(--ice); outline-offset: 3px; }
.listeners-list { max-height: calc(min(62svh, 520px) - 50px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--master-white) 28%, transparent) transparent; }
.listener-row { min-height: 52px; padding: 8px 9px; display: flex; align-items: center; gap: 9px; border: 1px solid transparent; border-radius: 10px; background: transparent; }
.listener-row + .listener-row { margin-top: 2px; }
.listener-row.is-account { background: color-mix(in srgb, var(--master-white) 1.8%, transparent); border-color: var(--line-soft); }
.listener-avatar { width: 32px !important; height: 32px !important; flex-basis: 32px !important; }
.listener-avatar > span { font-size: 12px !important; }
.listener-avatar[data-avatar="diamond"]::before { width: 12px !important; height: 12px !important; }
.listener-avatar[data-avatar="diamond"]::after { width: 4px !important; height: 4px !important; }
.listener-guest-avatar { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--paper-soft); background: color-mix(in srgb, var(--master-white) 1.8%, transparent); }
.listener-guest-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.listener-row-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
.listener-row-copy strong { overflow: hidden; color: var(--paper); font-size: 10px; font-weight: 720; letter-spacing: .035em; text-overflow: ellipsis; white-space: nowrap; }
.listener-row-copy span { overflow: hidden; color: var(--paper-soft); font-size: 7px; font-weight: 600; letter-spacing: .075em; text-overflow: ellipsis; white-space: nowrap; }
.listener-row-status { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; color: var(--master-white); font-size: 6.5px; font-weight: 800; letter-spacing: .1em; }
.listener-row-status b { font: inherit; }
.listeners-empty { margin: 0; padding: 26px 14px; color: var(--paper-soft); font-size: 8px; font-weight: 700; letter-spacing: .12em; text-align: center; }
@media (hover: hover) and (pointer: fine) {
  .panel-close:hover { color: var(--ice); border-color: color-mix(in srgb, var(--ice) 58%, transparent); background: color-mix(in srgb, var(--ice) 6%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--ice) 10%, transparent); }
  .listener-row.is-account:hover { border-color: color-mix(in srgb, var(--ice) 20%, var(--line-soft)); background: color-mix(in srgb, var(--ice) 3%, color-mix(in srgb, var(--master-white) 1.8%, transparent)); }
}
@media (max-width: 760px) {
  .listeners-panel { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); width: min(420px, calc(100vw - 20px)); max-height: min(60svh, 470px); border-radius: 13px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .listeners-list { max-height: calc(min(60svh, 470px) - 50px); }
  .listener-row { min-height: 54px; }
}


.listener-row { cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .16s ease; }
.listener-row:focus-visible { outline: 1px solid var(--ice); outline-offset: 2px; }
.listener-row:active { transform: scale(.992); }
@media (hover: hover) and (pointer: fine) {
  .listener-row:hover { border-color: color-mix(in srgb, var(--ice) 24%, var(--line-soft)); background: color-mix(in srgb, var(--ice) 3.5%, color-mix(in srgb, var(--master-white) 1.8%, transparent)); box-shadow: inset 0 1px color-mix(in srgb, var(--master-white) 2.5%, transparent); }
}

.profile-avatar.is-guest-avatar { color: var(--paper-soft); border-color: var(--line); background: color-mix(in srgb, var(--master-white) 1.8%, transparent); }
.profile-avatar.is-guest-avatar img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.account-public .account-identity { margin-bottom: 12px; }

.progression-points { min-width: 0; min-height: 48px; padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: 10px; background: color-mix(in srgb, var(--master-white) 1.8%, transparent); }
.progression-points { display: grid; align-content: center; gap: 4px; }
.progression-points > .profile-section-label { color: var(--ice); font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.progression-points strong { color: var(--paper); font-size: 16px; font-weight: 760; font-variant-numeric: tabular-nums; }
.progression-mini-meta { min-width: 0; display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; }
@media (hover: hover) and (pointer: fine) {
    }

.profile-inline-head { min-height: 32px; margin-bottom: 9px; display: flex; align-items: center; gap: 10px; }
.profile-inline-head > div { min-width: 0; display: grid; gap: 2px; margin-right: auto; }
.profile-inline-head .profile-section-label { color: var(--ice); font-size: 7px; font-weight: 800; letter-spacing: .13em; }
.profile-inline-head small { color: var(--muted); font-size: 6.1px; font-weight: 700; letter-spacing: .08em; }
.profile-inline-head > strong { color: var(--paper); font-size: 7px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.daily-tasks-list { display: grid; gap: 7px; }
.daily-task { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: center; padding: 9px; border: 1px solid var(--line-soft); border-radius: 10px; background: color-mix(in srgb, var(--master-white) 1.4%, transparent); }
.daily-task.is-complete { border-color: color-mix(in srgb, var(--ui-progress-accent) 30%, var(--line-soft)); background: color-mix(in srgb, var(--ui-progress-accent) 2.5%, color-mix(in srgb, var(--master-white) 1.4%, transparent)); }
.daily-task.is-complete .daily-task-body { min-width: 0; display: grid; gap: 6px; }
.daily-task-body > div { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.daily-task-body strong { min-width: 0; overflow: hidden; color: var(--paper); font-size: 8px; font-weight: 780; letter-spacing: .055em; text-overflow: ellipsis; white-space: nowrap; }
.daily-task-body b { flex: 0 0 auto; color: var(--ice); font-size: 6.5px; font-weight: 800; letter-spacing: .08em; }
.daily-task-progress { height: 3px; overflow: hidden; display: block; border-radius: 999px; background: color-mix(in srgb, var(--master-white) 8%, transparent); }
.daily-task-progress span { height: 100%; display: block; border-radius: inherit; background: var(--ui-progress-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--ui-progress-accent) 34%, transparent); transition: width .5s ease; }

.daily-task-body small { color: var(--muted); font-size: 7px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.daily-tasks-bonus { min-height: 34px; margin-top: 8px; display: grid; place-items: center; border: 1px solid var(--line-soft); border-radius: 9px; color: var(--paper-soft); font-size: 7px; font-weight: 800; letter-spacing: .12em; background: color-mix(in srgb, var(--master-white) 1.2%, transparent); }
.daily-tasks-bonus.is-complete { color: var(--status-success); border-color: color-mix(in srgb, var(--status-success) 28%, var(--line-soft)); background: color-mix(in srgb, var(--status-success) 3%, transparent); }
.progression-empty { margin: 0; padding: 18px 10px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .09em; text-align: center; }

.profile-badges { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line-soft); border-radius: 11px; background: color-mix(in srgb, var(--master-white) 1.4%, transparent); }
.profile-badges-toggle { width: 100%; min-height: 26px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0; border: 0; color: var(--paper-soft); background: transparent; cursor: pointer; }
.profile-badges-toggle > .profile-section-label { color: var(--ice); font-size: 7px; font-weight: 800; letter-spacing: .13em; }
.profile-badges-toggle > .profile-section-label b { color: var(--paper); font: inherit; font-variant-numeric: tabular-nums; }
.profile-badges-toggle:focus-visible { outline: 1px solid var(--ice); outline-offset: 3px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) { }
.profile-badge-preview { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.profile-badges.is-expanded .profile-badge-preview { display: none; }
.profile-badges-expanded { min-width: 0; padding-top: 2px; }
.badges-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.badge-tile.is-compact { position: relative; aspect-ratio: 1; min-width: 0; overflow: hidden; overflow: clip; clip-path: inset(0 round 9px); contain: paint; isolation: isolate; transform: translateZ(0); display: grid; place-items: center; border: 1px solid var(--line-soft); border-radius: 9px; background: radial-gradient(circle at 45% 32%, color-mix(in srgb, var(--master-white) 4.5%, transparent), color-mix(in srgb, var(--master-white) 1%, transparent)); cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.badge-tile.is-compact.is-detail-open, .badge-tile.is-compact:focus-visible { border-color: color-mix(in srgb, var(--ice) 48%, var(--line-soft)); box-shadow: 0 0 14px color-mix(in srgb, var(--ice) 10%, transparent); }
.badge-tile.is-compact .badge-detail { padding: 6px; gap: 4px; align-content: end; }
.badge-tile.is-compact .badge-detail > b { font-size: 4.7px; letter-spacing: .08em; }
.badge-tile.is-compact .badge-detail > strong { font-size: 5.8px; line-height: 1.15; }
.badge-tile.is-compact .badge-detail > p { font-size: 4.7px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.badge-tile.is-compact .badge-detail-progress { gap: 3px; }
.badge-tile.is-compact .badge-detail-progress > i { height: 2px; }
.badge-tile.is-compact .badge-detail-progress > small { font-size: 4.4px; gap: 4px; }
.badge-tile.is-compact .badge-detail > p:last-child:not(:first-child) { display: none; }
.badge-tile.is-unlocked { border-color: color-mix(in srgb, var(--ice) 35%, var(--line-soft)); box-shadow: inset 0 0 12px color-mix(in srgb, var(--ice) 3%, transparent); }
.badge-tile:not(.is-compact) { position: relative; min-width: 0; overflow: hidden; overflow: clip; clip-path: inset(0 round 10px); contain: paint; isolation: isolate; transform: translateZ(0); display: grid; grid-template-rows: auto minmax(40px, auto); border: 1px solid var(--line-soft); border-radius: 10px; background: color-mix(in srgb, var(--master-white) 1.2%, transparent); }
.badge-tile:not(.is-compact) > .badge-art-placeholder { width: 100%; height: auto; min-height: 72px; border: 0; border-bottom: 1px solid var(--ui-border-soft); border-radius: 0; color: var(--sp-secondary); background: var(--ui-card-bg); font-size: 8px; white-space: normal; }
.badge-tile:not(.is-compact) > div { min-width: 0; display: grid; align-content: center; gap: 3px; padding: 7px; }
.badge-tile:not(.is-compact) strong { overflow: hidden; color: var(--paper); font-size: 6.7px; font-weight: 800; letter-spacing: .055em; text-overflow: ellipsis; white-space: nowrap; }
.badge-tile:not(.is-compact) span { overflow: hidden; color: var(--muted); font-size: 5.9px; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.badge-tile:not(.is-compact).is-locked strong { color: var(--muted); }
.badge-tile:not(.is-compact).is-unlocked { border-color: color-mix(in srgb, var(--ice) 30%, var(--line-soft)); }
.badge-tile:not(.is-compact):focus-visible { outline: 1px solid var(--ice); outline-offset: 2px; }
.badge-detail { position: absolute; z-index: 3; inset: 0; padding: 9px; overflow: hidden; display: grid; align-content: end; gap: 6px; border-radius: inherit; color: var(--paper); background: linear-gradient(180deg, color-mix(in srgb, var(--master-overlay-mid) 52%, transparent) 0%, color-mix(in srgb, var(--master-overlay-mid) 94%, transparent) 43%, color-mix(in srgb, var(--master-overlay-mid) 99%, transparent) 100%); opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity .16s ease, transform .16s ease, visibility .16s step-end; }
.badge-detail > b { color: var(--paper); font-size: 6.2px; font-weight: 850; letter-spacing: .12em; }
.badge-detail.is-unlocked > b { color: var(--status-success); }
.badge-detail > strong { color: var(--paper); font-size: 7.5px; font-weight: 820; letter-spacing: .05em; }
.badge-detail > p { margin: 0; color: var(--paper-soft); font-size: 6.1px; font-weight: 620; line-height: 1.4; letter-spacing: .02em; }
.badge-detail-progress { display: grid; gap: 5px; }
.badge-detail-progress > i { height: 3px; overflow: hidden; display: block; border-radius: 999px; background: color-mix(in srgb, var(--master-white) 10%, transparent); }
.badge-detail-progress > i > span { height: 100%; display: block; border-radius: inherit; background: var(--ui-progress-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--ui-progress-accent) 36%, transparent); }
.badge-detail-progress > small { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 5.9px; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: .035em; }
.badge-detail.is-secret > b, .badge-detail.is-secret > strong { color: var(--paper-soft); }
.badge-tile.is-detail-open .badge-detail,
.badge-tile:focus .badge-detail { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .16s ease, transform .16s ease, visibility 0s; }
@media (hover: hover) and (pointer: fine) {
  .badge-tile:hover .badge-detail { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .16s ease, transform .16s ease, visibility 0s; }
  .badge-tile.is-compact:hover { border-color: color-mix(in srgb, var(--master-white) 42%, var(--line-soft)); box-shadow: 0 0 14px color-mix(in srgb, var(--master-white) 8%, transparent); transform: translateY(-1px); }
}
.progression-toasts { position: fixed; z-index: 120; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); width: min(330px, calc(100vw - 28px)); pointer-events: none; }
.progression-toast { min-height: 66px; display: grid; grid-template-columns:minmax(0,1fr); gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--ice) 34%, var(--line)); border-radius: 12px; color: var(--paper); background: color-mix(in srgb, var(--master-panel) 98.5%, transparent); box-shadow: 0 20px 55px color-mix(in srgb, var(--master-black) 58%, transparent), 0 0 24px color-mix(in srgb, var(--ice) 10%, transparent); opacity: 0; transform: translateY(-8px) scale(.98); transition: opacity .2s ease, transform .2s ease; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.progression-toast.is-showing { opacity: 1; transform: translateY(0) scale(1); }
.progression-toast > div { min-width: 0; display: grid; gap: 3px; }
.progression-toast span { color: var(--ice); font-size: 6.5px; font-weight: 800; letter-spacing: .12em; }
.progression-toast strong { overflow: hidden; color: var(--paper); font-size: 8.5px; font-weight: 780; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 760px) {
  .profile-badge-preview { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .badges-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
}
@media (max-width: 430px) {
    .progression-points { min-height: 44px; padding-inline: 9px; }
  .profile-badge-preview { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .profile-badge-preview > :nth-child(5) { display: none; }
  .badges-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .badge-tile:not(.is-compact) { grid-template-rows: auto minmax(36px, auto); }
  .daily-task { padding: 8px; }
    .daily-task-body strong { font-size: 7.4px; }
}
@media (prefers-reduced-motion: reduce) {
  .progression-toast,
.daily-task-progress span,
.badge-detail { transition: none !important; }
}

@media (max-width: 420px) { .profile-section-label { gap: 5px; } .profile-section-icon { width: 10px; height: 10px; } .profile-name-row { gap: 6px; } .profile-presence { font-size: 6.4px !important; letter-spacing: .1em !important; } }

.chat-panel { position: fixed; z-index: 46; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: min(350px, calc(100vw - 32px)); height: min(58svh, 500px); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; border: 1px solid color-mix(in srgb, var(--ice) 26%, var(--line)); border-radius: 14px; color: var(--paper); background: color-mix(in srgb, var(--master-panel) 98.5%, transparent); box-shadow: 0 24px 70px color-mix(in srgb, var(--master-black) 56%, transparent), 0 0 30px color-mix(in srgb, var(--ice) 6%, transparent), inset 0 1px color-mix(in srgb, var(--master-white) 5%, transparent); opacity: 0; transform: translateY(8px) scale(.985); transform-origin: right bottom; transition: opacity .18s ease, transform .18s ease; }
.chat-panel.is-open { opacity: 1; transform: translateY(0) scale(1); }
.chat-panel-head { min-height: 50px; padding: 11px 11px 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line-soft); background: linear-gradient(180deg, color-mix(in srgb, var(--master-white) 2.5%, transparent), transparent); }
.chat-panel-title { min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--paper); font-size: 10px; font-weight: 780; letter-spacing: .12em; }
.chat-messages { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 8px; display: grid; align-content: start; gap: 5px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--master-white) 28%, transparent) transparent; }
.chat-empty { margin: auto; padding: 26px 12px; color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: .1em; text-align: center; }
.chat-message { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: start; padding: 7px; border: 1px solid transparent; border-radius: 10px; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.chat-message.is-account { border-color: var(--line-soft); background: color-mix(in srgb, var(--master-white) 1.5%, transparent); }
.chat-avatar { position: relative; width: 34px; height: 34px; display: block; padding: 0; overflow: visible; border: 1px solid var(--line); border-radius: 50%; background: var(--master-surface-hover); cursor: pointer; }
.chat-avatar img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.chat-avatar.is-brand-avatar img { width: 72%; height: 72%; margin: 14%; object-fit: contain; border-radius: 0; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--master-white) 16%, transparent)); }
.chat-avatar-presence { position: absolute; right: -1px; bottom: -1px; z-index: 2; width: 8px; height: 8px; border: 2px solid var(--master-surface-hover); box-sizing: content-box; }
.chat-avatar:focus-visible, .chat-message-name:focus-visible, .chat-reply-button:focus-visible, .chat-reply-link:focus-visible, .chat-mention:focus-visible { outline: 1px solid var(--chat-reply-accent); outline-offset: 2px; }
.chat-message-body { min-width: 0; }
.chat-message-head { min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.chat-message-name { min-width: 0; max-width: 60%; padding: 0; overflow: hidden; border: 0; color: var(--paper); background: transparent; font: inherit; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.chat-message-head > span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 6px; font-weight: 650; letter-spacing: .055em; text-overflow: ellipsis; white-space: nowrap; }
.chat-message p { margin: 4px 0 0; color: var(--paper-soft); font-size: 10px; font-weight: 560; line-height: 1.42; overflow-wrap: anywhere; }
.chat-message-actions { min-height: 12px; display: flex; justify-content: flex-end; }
.chat-reply-button, .chat-reply-link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; border: 0; color: var(--chat-reply-accent); background: transparent; font-size: 5.8px; font-weight: 820; letter-spacing: .09em; cursor: pointer !important; pointer-events: auto; }
.chat-reply-button .ui-icon, .chat-reply-link .ui-icon { width: 9px; height: 9px; color: var(--chat-reply-accent) !important; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; cursor: inherit !important; }
.chat-reply-link { max-width: 100%; margin-bottom: 2px; color: color-mix(in srgb, var(--chat-reply-accent) 72%, var(--muted)); }
.chat-reply-link span, .chat-reply-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; cursor: inherit !important; }
.chat-mention { display: inline; padding: 0; border: 0; color: var(--chat-reply-accent); background: transparent; font: inherit; font-weight: 820; cursor: pointer; }
.chat-reply-preview { position: relative; min-width: 0; min-height: 34px; margin: 0 8px 6px; padding: 7px 36px 7px 30px; overflow: hidden; display: flex; align-items: center; border-left: 2px solid var(--chat-reply-accent); border-radius: 0 8px 8px 0; color: var(--chat-reply-accent); background: color-mix(in srgb, var(--chat-reply-accent) 7%, transparent); font-size: 7px; font-weight: 720; line-height: 1.3; }
.chat-reply-preview > .ui-icon { position: absolute; left: 10px; width: 11px; height: 11px; color: var(--chat-reply-accent); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-reply-preview > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply-cancel { position: absolute; right: 5px; top: 50%; width: 25px; height: 25px; transform: translateY(-50%); display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--chat-reply-accent); background: transparent; cursor: pointer; }
.chat-reply-cancel .ui-icon { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.chat-form { position: relative; margin: 0 8px 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.chat-input { width: 100%; min-width: 0; min-height: 39px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; outline: 0; color: var(--paper); background: color-mix(in srgb, var(--master-white) 2.5%, transparent); font: inherit; font-size: 10px; }
.chat-input::placeholder { color: color-mix(in srgb, var(--master-white) 32%, transparent); }
.chat-input:focus { border-color: color-mix(in srgb, var(--ice) 58%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ice) 6%, transparent); }
.chat-send { min-width: 74px; min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--ice) 45%, transparent); border-radius: 9px; color: var(--ice); background: color-mix(in srgb, var(--ice) 6%, color-mix(in srgb, var(--master-white) 1.8%, transparent)); font-size: 7px; font-weight: 820; letter-spacing: .1em; cursor: pointer; }
.chat-send .ui-icon { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.chat-status { min-height: 16px; padding: 0 10px 7px; font-size: 6.5px; font-weight: 700; letter-spacing: .075em; }
.chat-mention-menu { position: absolute; z-index: 8; left: 0; right: 80px; bottom: calc(100% + 6px); max-height: 230px; overflow-y: auto; padding: 4px; border: 1px solid color-mix(in srgb, var(--chat-reply-accent) 22%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--master-panel) 99.5%, transparent); box-shadow: 0 16px 42px color-mix(in srgb, var(--master-black) 62%, transparent); }
.chat-mention-option { width: 100%; min-height: 42px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 7px; border: 0; border-radius: 8px; color: var(--paper); background: transparent; text-align: left; cursor: pointer; }
.chat-mention-option.is-active { background: color-mix(in srgb, var(--chat-reply-accent) 9%, transparent); }
.chat-mention-option > span { min-width: 0; display: grid; gap: 2px; }
.chat-mention-option strong { overflow: hidden; font-size: 8px; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.chat-mention-option small { overflow: hidden; color: var(--chat-reply-accent); font-size: 6px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.chat-mention-empty { padding: 10px 8px; color: var(--muted); font-size: 7px; font-weight: 750; letter-spacing: .08em; }
@media (hover: hover) and (pointer: fine) {
  .chat-message:not(.is-highlighted):hover { border-color: color-mix(in srgb, var(--ice) 19%, var(--line-soft)); background: color-mix(in srgb, var(--ice) 2.5%, color-mix(in srgb, var(--master-white) 1.5%, transparent)); }
  .chat-reply-button:hover, .chat-reply-link:hover, .chat-mention:hover { color: var(--chat-reply-accent); }
  .chat-reply-button:hover .ui-icon, .chat-reply-link:hover .ui-icon { color: var(--chat-reply-accent) !important; }
  .chat-send:hover { border-color: var(--ice); box-shadow: 0 0 16px color-mix(in srgb, var(--ice) 10%, transparent); }
  .chat-reply-cancel:hover, .chat-mention-option:hover { background: color-mix(in srgb, var(--chat-reply-accent) 9%, transparent); }
}
@media (max-width: 560px) {
  .chat-panel { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); width: min(350px, calc(100vw - 20px)); height: min(58svh, 500px); }
  .chat-send { min-width: 66px; }
  .chat-mention-menu { right: 72px; }
}

.account-dialog { background: color-mix(in srgb, var(--master-panel) 99.5%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; }
.account-dialog::backdrop { background: color-mix(in srgb, var(--master-black) 66%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; }
.account-sheet { -webkit-overflow-scrolling: touch; touch-action: pan-y; scroll-behavior: auto; scrollbar-gutter: stable; contain: layout paint; }
.account-sheet .badge-tile.is-compact, .account-sheet .badge-tile:not(.is-compact) { transform: none; clip-path: none; contain: layout paint; }

.market-preview-avatar{position:relative;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--master-surface-hover)}
.market-preview-avatar img{width:72%;height:72%;object-fit:contain;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--master-white) 16%,transparent))}



.market-panel{position:fixed;z-index:47;left:50%;top:50%;right:auto;bottom:auto;width:min(410px,calc(100vw - 32px));height:min(72svh,650px);overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;border:1px solid color-mix(in srgb,var(--ice) 28%,var(--line));border-radius:14px;color:var(--paper);background:color-mix(in srgb, var(--master-panel) 99%, transparent);box-shadow:0 24px 70px color-mix(in srgb, var(--master-black) 58%, transparent),0 0 32px color-mix(in srgb,var(--ice) 7%,transparent),inset 0 1px color-mix(in srgb, var(--master-white) 5%, transparent);opacity:0;transform:translate(-50%,-48%) scale(.985);transform-origin:center;transition:opacity .18s ease,transform .18s ease}
.market-panel.is-open{opacity:1;transform:translate(-50%,-50%) scale(1)}
.market-panel-head{min-height:52px;padding:10px 10px 10px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,color-mix(in srgb, var(--master-white) 2.7%, transparent),transparent)}
.market-panel-title{min-width:0;display:flex;align-items:center;gap:8px;color:var(--paper);font-size:9px;font-weight:820;letter-spacing:.12em}
.market-panel-title .ui-icon{width:15px;height:15px;fill:none;stroke:var(--ice);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.market-points{display:grid;justify-items:end;gap:2px}.market-points span{color:var(--muted);font-size:5.5px;font-weight:800;letter-spacing:.12em}.market-points b{color:var(--ice);font-size:9px;font-variant-numeric:tabular-nums}
.market-content{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px;display:grid;align-content:start;gap:13px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--master-white) 28%, transparent) transparent}
.market-category{display:grid;gap:7px}.market-category-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px}.market-category-head strong{color:var(--ice);font-size:6.7px;font-weight:850;letter-spacing:.14em}.market-category-head span{color:var(--muted);font-size:5.5px;font-weight:760;letter-spacing:.08em}
.market-grid{display:grid;gap:7px}.market-item{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:9px;padding:7px;border:1px solid var(--line-soft);border-radius:11px;background:color-mix(in srgb, var(--master-white) 1.4%, transparent)}.market-item.is-owned{border-color:color-mix(in srgb,var(--ice) 26%,var(--line-soft))}.market-item.is-equipped{background:linear-gradient(135deg,color-mix(in srgb,var(--ice) 7%,transparent),color-mix(in srgb, var(--master-white) 1.2%, transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ice) 9%,transparent)}
.market-item-preview{width:54px;height:54px;display:grid;place-items:center;overflow:hidden;border:1px solid color-mix(in srgb,var(--ice) 18%,var(--line-soft));border-radius:10px;background:radial-gradient(circle at 50% 38%,color-mix(in srgb, var(--master-white) 12%, transparent),color-mix(in srgb, var(--master-black) 74%, transparent) 72%)}.market-item-copy{min-width:0;display:grid;gap:4px}.market-item-copy strong{overflow:hidden;color:var(--paper);font-size:7.3px;font-weight:820;letter-spacing:.055em;text-overflow:ellipsis;white-space:nowrap}.market-item-copy span{color:var(--muted);font-size:5.9px;font-weight:620;line-height:1.35}
.market-item-action,.purchased-item-action,.market-login-card button,.badge-showcase-save{min-height:32px;padding:0 9px;border:1px solid color-mix(in srgb,var(--ice) 38%,var(--line));border-radius:8px;color:var(--ice);background:color-mix(in srgb,var(--ice) 6%,color-mix(in srgb, var(--master-white) 1.5%, transparent));font-size:6px;font-weight:830;letter-spacing:.08em;cursor:pointer}.market-item-action:disabled,.purchased-item-action:disabled,.badge-showcase-save:disabled{opacity:.48;cursor:default}.market-item.is-equipped .market-item-action,.purchased-item.is-equipped .purchased-item-action{border-color:color-mix(in srgb,var(--ice) 62%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--ice) 9%,transparent)}
.market-theme-preview{width:45px;height:38px;padding:7px;display:grid;gap:4px;border:1px solid var(--line);border-radius:7px;background:var(--master-surface-mid)}.market-theme-preview i{height:3px;border-radius:999px;background:color-mix(in srgb, var(--master-white) 14%, transparent)}
.market-item-preview.is-emoji{position:relative;display:block}.market-emoji-preview{position:absolute;left:50%;top:50%;width:38px;height:38px;display:grid;grid-template-columns:repeat(2,18px);grid-template-rows:repeat(2,18px);place-content:center;place-items:center;gap:2px;margin:0;overflow:visible;line-height:1;text-align:center;transform:translate(-50%,-50%)}.market-emoji-preview>span{width:18px;height:18px;display:grid;place-items:center;margin:0;padding:0;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:15px;line-height:1;text-align:center}
.market-status{min-height:27px;padding:6px 11px;border-top:1px solid var(--line-soft);font-size:5.9px;font-weight:760;letter-spacing:.055em}
.market-login-card{display:grid;justify-items:start;gap:9px;padding:14px;border:1px solid var(--line-soft);border-radius:11px;background:color-mix(in srgb, var(--master-white) 1.4%, transparent)}.market-login-card strong{color:var(--ice);font-size:8px;letter-spacing:.08em}.market-login-card span{color:var(--muted);font-size:6.4px;line-height:1.5}

.profile-purchased{display:grid;gap:8px;padding:10px;border:1px solid var(--line-soft);border-radius:11px;background:color-mix(in srgb, var(--master-white) 1.4%, transparent)}.profile-purchased-toggle{width:100%;min-height:26px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0;border:0;color:var(--paper-soft);background:transparent;cursor:pointer}.profile-purchased-toggle>.profile-section-label{color:var(--ice);font-size:7px;font-weight:800;letter-spacing:.13em}.profile-purchased-toggle>.profile-section-label b{color:var(--paper);font:inherit}.profile-purchased-section{display:grid;gap:8px}.purchased-items-list{display:grid;gap:6px}.purchased-item{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px;border:1px solid var(--line-soft);border-radius:9px;background:color-mix(in srgb, var(--master-black) 15%, transparent)}.purchased-item .market-item-preview{width:54px;height:54px}.purchased-item-copy{min-width:0;display:grid;gap:3px}.purchased-item-copy strong{overflow:hidden;color:var(--paper);font-size:6.8px;font-weight:820;text-overflow:ellipsis;white-space:nowrap}.purchased-item-copy span{color:var(--muted);font-size:5.5px;font-weight:700;letter-spacing:.06em}.purchased-empty{margin:0;padding:8px;color:var(--muted);font-size:6px;font-weight:700;letter-spacing:.07em;text-align:center}

.badge-showcase-editor{display:grid;gap:8px;margin-bottom:10px;padding:8px;border:1px solid color-mix(in srgb,var(--ice) 18%,var(--line-soft));border-radius:9px;background:color-mix(in srgb, var(--master-white) 1.8%, transparent)}.badge-showcase-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.badge-showcase-head>div{display:grid;gap:2px}.badge-showcase-head strong{color:var(--ice);font-size:6.7px;font-weight:850;letter-spacing:.1em}.badge-showcase-head span{color:var(--muted);font-size:5.2px;font-weight:650}.badge-showcase-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.badge-showcase-slot{min-width:0;display:grid;gap:3px}.badge-showcase-slot>span{color:var(--muted);font-size:4.8px;font-weight:800;letter-spacing:.08em}.badge-showcase-slot select{min-width:0;width:100%;height:29px;padding:0 4px;border:1px solid var(--line-soft);border-radius:6px;outline:0;color:var(--paper);background:var(--master-surface-mid);font-size:5.3px;font-weight:700}.badge-showcase-slot select:focus{border-color:color-mix(in srgb,var(--ice) 55%,transparent)}.badge-showcase-message{margin:0;font-size:5.5px;font-weight:750}
.chat-form{grid-template-columns:auto minmax(0,1fr) auto}.chat-emoji-toggle{width:39px;height:39px;padding:0;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;color:var(--paper-soft);background:color-mix(in srgb, var(--master-white) 2.5%, transparent);cursor:pointer}.chat-emoji-toggle .ui-icon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.chat-emoji-toggle[aria-expanded="true"]{color:var(--ice);border-color:color-mix(in srgb,var(--ice) 50%,transparent)}.chat-emoji-menu{position:absolute;z-index:9;left:0;bottom:46px;width:min(250px,100%);padding:7px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;border:1px solid color-mix(in srgb,var(--ice) 24%,var(--line));border-radius:10px;background:color-mix(in srgb, var(--master-panel) 99%, transparent);box-shadow:0 12px 32px color-mix(in srgb, var(--master-black) 52%, transparent)}.chat-emoji-choice{aspect-ratio:1;padding:0;border:1px solid var(--line-soft);border-radius:7px;background:color-mix(in srgb, var(--master-white) 1.8%, transparent);font-size:18px;cursor:pointer}.chat-emoji-choice:hover,.chat-emoji-choice:focus-visible{border-color:color-mix(in srgb,var(--ice) 50%,transparent);outline:0;background:color-mix(in srgb, var(--master-white) 5%, transparent)}

@media(max-width:760px){.market-panel{left:50%;top:50%;right:auto;bottom:auto;width:min(390px,calc(100vw - 20px));height:min(70svh,610px)}.market-item,.purchased-item{grid-template-columns:48px minmax(0,1fr) auto;gap:7px}.market-item-preview,.purchased-item .market-item-preview{width:48px;height:48px}.market-item-action{padding-inline:7px}.badge-showcase-slots{gap:4px}.badge-showcase-slot select{font-size:5px}}
@media(max-width:430px){.profile-badge-preview{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.profile-badge-preview>:nth-child(5){display:grid}.badge-showcase-slots{grid-template-columns:1fr}.badge-showcase-slot{grid-template-columns:42px minmax(0,1fr);align-items:center}.market-item-copy span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.chat-send{min-width:58px}.chat-emoji-toggle{width:36px}}
@media(hover:hover) and (pointer:fine){.market-item-action:not(:disabled):hover,.purchased-item-action:not(:disabled):hover,.badge-showcase-save:not(:disabled):hover,.market-login-card button:hover{border-color:var(--ice);box-shadow:0 0 14px color-mix(in srgb,var(--ice) 10%,transparent)}}

.progression-toasts[popover]{position:fixed;z-index:120;inset:auto max(14px,env(safe-area-inset-right)) auto auto;top:max(14px,env(safe-area-inset-top));margin:0;padding:0;border:0;background:transparent;overflow:visible;pointer-events:none}
.window-close{width:26px!important;height:26px!important;flex:0 0 26px!important;display:grid!important;place-items:center!important;padding:0!important;border:1px solid var(--line)!important;border-radius:9px!important;color:var(--paper)!important;background:color-mix(in srgb, var(--master-white) 2.5%, transparent)!important;cursor:pointer!important;transition:color .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .16s ease!important}
.window-close .ui-icon{width:10.5px!important;height:10.5px!important;overflow:visible;fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;stroke-linecap:round!important;stroke-linejoin:round!important;vector-effect:non-scaling-stroke}
.window-close:active{transform:scale(.94)!important}
.window-close:focus-visible{outline:1px solid var(--ice)!important;outline-offset:3px!important}
.account-close.window-close{position:absolute;z-index:3;top:10px;right:10px}
@media(hover:hover) and (pointer:fine){.window-close:hover{color:var(--ice)!important;border-color:color-mix(in srgb,var(--ice) 58%,transparent)!important;background:color-mix(in srgb,var(--ice) 6%,transparent)!important;box-shadow:0 0 16px color-mix(in srgb,var(--ice) 10%,transparent)!important}}

.ui-icon{fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;stroke-linecap:round!important;stroke-linejoin:round!important;shape-rendering:geometricPrecision}
.ui-icon :where(path,circle,rect,line,polyline,polygon,ellipse){vector-effect:non-scaling-stroke}
.ui-icon .icon-dot{fill:currentColor!important;stroke:none!important}
.dock-icon,
.profile-section-icon,
.window-close .ui-icon,
.chat-reply-button .ui-icon,
.chat-reply-link .ui-icon,
.chat-reply-preview>.ui-icon,
.chat-reply-cancel .ui-icon,
.chat-send .ui-icon,
.chat-emoji-toggle .ui-icon,
.market-panel-title .ui-icon,
.avatar-choice-check {stroke-width:1.7!important}




.window-close{
  position:relative;
  overflow:visible!important;
  width:26px!important;
  height:26px!important;
  min-width:26px!important;
  min-height:26px!important;
  flex:0 0 26px!important;
  display:block!important;
  padding:0!important;
  border:1px solid var(--line)!important;
  border-radius:9px!important;
  color:var(--paper)!important;
  background:color-mix(in srgb, var(--master-white) 2.5%, transparent)!important;
}
.window-close .ui-icon{display:none!important}
.window-close::before,.window-close::after{
  content:"";
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:11px;
  height:1.5px;
  margin:0;
  border-radius:999px;
  background:currentColor;
  transform-origin:50% 50%;
  pointer-events:none;
}
.window-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.window-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.account-close.window-close{position:absolute!important;top:10px!important;right:10px!important}
.panel-close.window-close,.account-info-close.window-close{position:relative!important;top:auto!important;right:auto!important}


.account-dialog,.chat-panel,.listeners-panel,.market-panel{
  border-color:color-mix(in srgb,var(--ice) 28%,var(--line))!important;
  border-radius:14px!important;
  color:var(--paper);
  background:var(--sp-panel)!important;
  box-shadow:0 26px 76px color-mix(in srgb, var(--master-black) 58%, transparent),0 0 32px color-mix(in srgb,var(--ice) 7%,transparent),inset 0 1px color-mix(in srgb, var(--master-white) 5%, transparent)!important;
}
.chat-panel-head,.listeners-panel-head,.market-panel-head{
  min-height:50px;
  border-bottom:1px solid color-mix(in srgb,var(--ice) 13%,var(--line-soft))!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ice) 3.5%,color-mix(in srgb, var(--master-white) 2.6%, transparent)),transparent)!important;
}
.chat-panel-title,.listeners-panel-title,.market-panel-title{color:var(--ice)!important}
.listeners-panel-title b{color:inherit!important}
.account-kicker,.market-category-head strong{color:var(--ice)!important}.track-card .eyebrow{color:var(--status-listening)!important}


.account-member{--profile-card-accent:var(--ice)}
.account-member[data-profile-theme]{--profile-card-accent:var(--ice)}
.account-identity,
.account-stat,
.progression-points,
.profile-badges,
.profile-purchased,
.account-info-editor,
.avatar-fieldset,
.daily-task,
.daily-tasks-bonus,
.badge-showcase-editor,
.purchased-item,
.avatar-choice {
  border:1px solid color-mix(in srgb,var(--profile-card-accent) 20%,var(--line-soft))!important;
  background:var(--sp-surface)!important;
  box-shadow:var(--sp-shadow)!important;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .16s ease,color .18s ease!important;
}
.account-stat,
.progression-points {border-radius:10px!important}
.profile-badges,
.profile-purchased,
.account-info-editor,
.avatar-fieldset {border-radius:11px!important}


.account-stat>.profile-section-label,
.progression-points>.profile-section-label,
.profile-inline-head .profile-section-label,
.profile-badges-toggle>.profile-section-label,
.profile-purchased-toggle>.profile-section-label,
.badge-showcase-head strong {
  color:var(--profile-card-accent)!important;
}
.account-stat>.profile-section-label em,
.progression-points>.profile-section-label em,
.profile-inline-head .profile-section-label em,
.profile-badges-toggle>.profile-section-label em,
.profile-purchased-toggle>.profile-section-label em {color:inherit!important}
.account-stat strong,
.progression-points strong {color:var(--paper)!important}
.profile-badges-toggle>.profile-section-label b,.profile-purchased-toggle>.profile-section-label b{color:color-mix(in srgb,var(--paper) 86%,var(--profile-card-accent))!important}


.purchased-item,.daily-task,.daily-tasks-bonus,.badge-showcase-editor,.avatar-choice{
  border-color:color-mix(in srgb,var(--profile-card-accent) 16%,var(--line-soft))!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--profile-card-accent) 3%,color-mix(in srgb, var(--master-white) 2.6%, transparent)),color-mix(in srgb, var(--master-white) 1.2%, transparent))!important;
  box-shadow:inset 0 1px color-mix(in srgb, var(--master-white) 3.5%, transparent)!important;
}
.badge-showcase-slot select,.account-form input,.chat-input{
  border:1px solid color-mix(in srgb,var(--ice) 18%,var(--line))!important;
  color:var(--paper)!important;
  background:linear-gradient(145deg,color-mix(in srgb, var(--master-white) 3.5%, transparent),color-mix(in srgb, var(--master-white) 1.4%, transparent))!important;
}
.badge-showcase-slot select:focus,.account-form input:focus,.chat-input:focus{
  border-color:color-mix(in srgb,var(--ice) 58%,transparent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ice) 6%,transparent)!important;
}


.market-item,.market-login-card,.listener-row.is-account,.chat-message{
  border:1px solid color-mix(in srgb,var(--ice) 13%,var(--line-soft))!important;
  border-radius:10px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--ice) 2.5%,color-mix(in srgb, var(--master-white) 1.8%, transparent)),color-mix(in srgb, var(--master-white) 0.9%, transparent))!important;
  box-shadow:inset 0 1px color-mix(in srgb, var(--master-white) 2.5%, transparent);
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .16s ease!important;
}
.market-item{border-radius:11px}
.chat-emoji-toggle,.chat-send,.market-item-action,.purchased-item-action,.badge-showcase-save,.market-login-card button,.account-primary,.account-secondary{
  border-color:color-mix(in srgb,var(--ice) 30%,var(--line))!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--ice) 5%,var(--master-surface-control)),color-mix(in srgb, var(--master-white) 1.8%, transparent))!important;
}
.chat-emoji-menu,.chat-mention-menu{
  border-color:color-mix(in srgb,var(--ice) 24%,var(--line))!important;
  background:var(--sp-panel)!important;
}


@media(hover:hover) and (pointer:fine){
  .account-identity:hover,
.account-stat:hover,
.progression-points:hover,
.profile-badges:hover,
.profile-purchased:hover,
.account-info-editor:hover,
.avatar-fieldset:hover {
    border-color:color-mix(in srgb,var(--profile-card-accent) 46%,var(--line))!important;
    background:linear-gradient(145deg,color-mix(in srgb,var(--profile-card-accent) 7%,var(--master-surface-raised)),color-mix(in srgb, var(--master-white) 1.8%, transparent))!important;
    box-shadow:0 0 0 1px color-mix(in srgb,var(--profile-card-accent) 8%,transparent),0 0 18px color-mix(in srgb,var(--profile-card-accent) 8%,transparent),0 9px 22px color-mix(in srgb, var(--master-black) 19%, transparent),inset 0 1px color-mix(in srgb,var(--profile-card-accent) 9%,transparent)!important;
  }
  .daily-task:hover,.daily-tasks-bonus:hover,.badge-showcase-editor:hover,.purchased-item:hover,.avatar-choice:hover{
    border-color:color-mix(in srgb,var(--profile-card-accent) 34%,var(--line))!important;
    background:linear-gradient(145deg,color-mix(in srgb,var(--profile-card-accent) 5%,var(--master-surface-raised)),color-mix(in srgb, var(--master-white) 1.4%, transparent))!important;
    box-shadow:0 0 14px color-mix(in srgb,var(--profile-card-accent) 6%,transparent),inset 0 1px color-mix(in srgb,var(--profile-card-accent) 7%,transparent)!important;
  }
  .market-item:hover,.listener-row.is-account:hover,.chat-message:not(.is-highlighted):hover,.market-login-card:hover{
    border-color:var(--sp-border-hover)!important;
    background:var(--sp-surface-hover)!important;
    box-shadow:0 0 14px color-mix(in srgb,var(--ice) 6%,transparent),inset 0 1px color-mix(in srgb,var(--ice) 7%,transparent)!important;
  }
  .chat-emoji-toggle:hover,.chat-send:hover,.market-item-action:not(:disabled):hover,.purchased-item-action:not(:disabled):hover,.badge-showcase-save:not(:disabled):hover,.market-login-card button:hover,.account-primary:hover,.account-secondary:hover{
    color:var(--ice)!important;
    border-color:color-mix(in srgb,var(--ice) 58%,transparent)!important;
    background:var(--sp-surface-hover)!important;
    box-shadow:0 0 16px color-mix(in srgb,var(--ice) 10%,transparent)!important;
  }
}


.ui-icon,
.dock-icon,
.profile-section-icon,
.chat-reply-button .ui-icon,
.chat-reply-link .ui-icon,
.chat-reply-preview>.ui-icon,
.chat-reply-cancel .ui-icon,
.chat-send .ui-icon,
.chat-emoji-toggle .ui-icon,
.market-panel-title .ui-icon,
.avatar-choice-check {
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.7!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  shape-rendering:geometricPrecision;
}
.profile-section-icon{width:12px!important;height:12px!important}

@media(max-width:560px){
  .window-close{width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important}
  .window-close::before,.window-close::after{width:10.5px;height:1.5px}
}


.account-member .profile-section-label,
.account-member .profile-section-label em,
.account-member .profile-inline-head .profile-section-label,
.account-member .profile-inline-head .profile-section-label em,
.account-member .profile-badges-toggle > .profile-section-label,
.account-member .profile-purchased-toggle > .profile-section-label,
.account-member .badge-showcase-head strong {
  color: var(--ice) !important;
}

.account-identity,
.account-stat,
.progression-points,
.profile-badges,
.profile-purchased,
.account-info-editor,
.avatar-fieldset,
.daily-task,
.daily-tasks-bonus,
.badge-showcase-editor,
.purchased-item,
.avatar-choice {
  position: relative;
  isolation: isolate;
}

.account-info-editor::after,
.avatar-fieldset::after,
.daily-task::after,
.daily-tasks-bonus::after,
.badge-showcase-editor::after,
.purchased-item::after,
.avatar-choice::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(108deg, transparent 0 34%, color-mix(in srgb, var(--ice) 18%, transparent) 48%, transparent 62%) no-repeat;
  background-size: 46% 100%;
  background-position: -90% 0;
  opacity: 0;
  transition: background-position .52s cubic-bezier(.22,.7,.2,1), opacity .18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .account-identity:hover,
.account-stat:hover,
.progression-points:hover,
.profile-badges:hover,
.profile-purchased:hover,
.account-info-editor:hover,
.avatar-fieldset:hover {
    border-color: color-mix(in srgb, var(--ice) 64%, transparent) !important;
    background: var(--sp-surface) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ice) 20%, transparent), 0 0 20px color-mix(in srgb, var(--ice) 12%, transparent), 0 10px 24px color-mix(in srgb, var(--master-black) 24%, transparent), inset 0 1px color-mix(in srgb, var(--ice) 12%, transparent) !important;
    transform: none !important;
  }

  .daily-task:hover,
  .daily-tasks-bonus:hover,
  .badge-showcase-editor:hover,
  .purchased-item:hover,
  .avatar-choice:hover {
    border-color: color-mix(in srgb, var(--ice) 54%, transparent) !important;
    background: linear-gradient(145deg, color-mix(in srgb, var(--ice) 3%, color-mix(in srgb, var(--master-white) 2.6%, transparent)), color-mix(in srgb, var(--master-white) 1.2%, transparent)) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ice) 13%, transparent), 0 0 16px color-mix(in srgb, var(--ice) 9%, transparent), inset 0 1px color-mix(in srgb, var(--ice) 9%, transparent) !important;
    transform: none !important;
  }

  .daily-task.is-complete:hover {
    background: color-mix(in srgb, var(--ice) 2.5%, color-mix(in srgb, var(--master-white) 1.4%, transparent)) !important;
  }

  .account-info-editor:hover::after,
.avatar-fieldset:hover::after,
.daily-task:hover::after,
.daily-tasks-bonus:hover::after,
.badge-showcase-editor:hover::after,
.purchased-item:hover::after,
.avatar-choice:hover::after {
    background-position: 190% 0;
    opacity: .95;
  }

  }


@media (hover: hover) and (pointer: fine) {
  .account-info-editor:hover::after,
.avatar-fieldset:hover::after {
    opacity: 0;
    background-position: -90% 0;
  }

  
  .badge-tile.is-compact:hover,
  .account-member .account-avatar-trigger:hover {
    transform: none !important;
  }
}


.ui-icon,
.dock-icon,
.listener-headphones,
.sound-icon,
.profile-section-icon,
.account-info-trigger,
.chat-emoji-toggle,
.chat-send,
.window-close,
.video-listeners,
.video-volume {
  color: var(--ice) !important;
}


.account-info-editor::after,
.avatar-fieldset::after,
.daily-task::after,
.daily-tasks-bonus::after,
.badge-showcase-editor::after,
.purchased-item::after,
.avatar-choice::after {
  content: none !important;
  display: none !important;
}


.profile-badges-toggle,
.profile-purchased-toggle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 8px;
}
.profile-badges-toggle > *,
.profile-purchased-toggle > * { position: relative; z-index: 1; }

@media (hover:hover) and (pointer:fine) {
  .profile-badges:hover,
.profile-purchased:hover,
.account-info-editor:hover,
.avatar-fieldset:hover,
.daily-task:hover,
.daily-tasks-bonus:hover,
.badge-showcase-editor:hover,
.purchased-item:hover,
.avatar-choice:hover {
    transform: none !important;
  }
  }


.chat-message.is-highlighted {
  position: relative;
  border-color: var(--chat-reply-accent) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--chat-reply-accent) 13%, color-mix(in srgb, var(--master-white) 2.6%, transparent)), color-mix(in srgb, var(--chat-reply-accent) 5%, color-mix(in srgb, var(--master-white) 1%, transparent))) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--chat-reply-accent) 42%, transparent), 0 0 30px color-mix(in srgb, var(--chat-reply-accent) 24%, transparent), inset 0 0 22px color-mix(in srgb, var(--chat-reply-accent) 8%, transparent) !important;
  animation: chat-reply-target-flash 1.8s cubic-bezier(.2,.75,.2,1) both;
}
@keyframes chat-reply-target-flash {
  0% { filter: brightness(1.34); transform: scale(.992); }
  18% { filter: brightness(1.16); transform: scale(1); }
  48% { filter: brightness(1.08); }
  100% { filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-message.is-highlighted { animation: none !important; }
}



.profile-daily {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--profile-card-accent) 20%, var(--line-soft));
  border-radius: 11px;
  background: var(--sp-surface);
  box-shadow: var(--sp-shadow);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}
.profile-daily-toggle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--paper-soft);
  background: transparent;
  cursor: pointer;
}
.profile-daily-toggle > * { position: relative; z-index: 1; }
.profile-daily-toggle > .profile-section-label {
  color: var(--ice) !important;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .13em;
}
.profile-daily-toggle .progression-mini-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.profile-daily-toggle .progression-mini-meta b {
  color: color-mix(in srgb, var(--paper) 86%, var(--ice));
  font-size: 8px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.profile-daily-expanded {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding-top: 2px;
}
.profile-daily-expanded[hidden] { display: none !important; }
.profile-daily-toggle:focus-visible {
  outline: 1px solid var(--ice);
  outline-offset: 3px;
}




@media (hover:hover) and (pointer:fine) {
  .profile-daily:hover,
  .profile-badges:hover,
  .profile-purchased:hover {
    border-color: color-mix(in srgb, var(--ice) 64%, transparent) !important;
    background: var(--sp-surface) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ice) 20%, transparent), 0 0 20px color-mix(in srgb, var(--ice) 12%, transparent), 0 10px 24px color-mix(in srgb, var(--master-black) 24%, transparent), inset 0 1px color-mix(in srgb, var(--ice) 12%, transparent) !important;
    transform: none !important;
  }
    .profile-daily-toggle:hover .progression-mini-meta b { color: var(--ice) !important; }
}


.account-info-trigger svg {
  width: 16px !important;
  height: 16px !important;
  display: block;
  overflow: hidden !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}
@media (hover:hover) and (pointer:fine) {
  .account-info-trigger:hover { transform: none !important; }
}



@media(max-width:560px) {
  .profile-daily { padding: 9px; }
  .profile-daily-toggle { min-height: 25px; }
}
.profile-daily-meta {
  margin: 1px 0 0;
  padding: 0 1px 2px;
}
.profile-daily-meta small {
  color: var(--muted);
  font-size: 6.2px;
  font-weight: 700;
  letter-spacing: .09em;
}
.profile-daily-meta strong {
  color: var(--ice);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .1em;
}






.broadcast-frame,
.track-card {
  --surface-accent: var(--paper);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--line) !important;
  background: var(--sp-surface) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--master-black) 20%, transparent), inset 0 1px color-mix(in srgb, var(--master-white) 5.5%, transparent) !important;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}

.broadcast-frame { border-radius: 9px !important; }
.track-card { border-radius: 9px !important; }

.broadcast-frame::after,
.track-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -35% auto -35% -34%;
  width: 30%;
  transform: skewX(-18deg) translateX(-240%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ice) 14%, transparent), transparent);
  opacity: 0;
  pointer-events: none;
  transition: transform 1.12s cubic-bezier(.22,.7,.2,1), opacity .18s ease;
}

.broadcast-frame > *,
.track-card > * {
  position: relative;
  z-index: 1;
}


.broadcast-frame .video-stage {
  z-index: 1;
  border-color: color-mix(in srgb, var(--ice) 12%, var(--line-soft));
  border-radius: 7px;
}

.track-next {
  border-left-color: color-mix(in srgb, var(--ice) 16%, var(--line-soft));
}

@media (hover:hover) and (pointer:fine) {
  .broadcast-frame:hover,
  .track-card:hover {
    --surface-accent: var(--ice);
    border-color: color-mix(in srgb, var(--ice) 64%, transparent) !important;
    background: var(--sp-surface-hover) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ice) 20%, transparent), 0 0 20px color-mix(in srgb, var(--ice) 12%, transparent), 0 10px 24px color-mix(in srgb, var(--master-black) 24%, transparent), inset 0 1px color-mix(in srgb, var(--ice) 12%, transparent) !important;
    transform: none !important;
  }
  .broadcast-frame:hover::after,
  .track-card:hover::after {
    transform: skewX(-18deg) translateX(520%);
    opacity: .82;
  }
}




.account-dialog,
.chat-panel,
.listeners-panel,
.market-panel,
.progression-toast,
.broadcast-frame,
.track-card,
.account-identity,
.account-stat,
.progression-points,
.profile-daily,
.profile-badges,
.profile-purchased,
.account-info-editor,
.avatar-fieldset,
.market-item,
.market-login-card,
.chat-message,
.listener-row.is-account,
.chat-emoji-menu,
.chat-mention-menu {
  border: var(--sp-family-border) !important;
  border-color: color-mix(in srgb, var(--ice) 22%, var(--line)) !important;
  color: var(--paper);
  background: var(--sp-family-bg) !important;
  box-shadow: var(--sp-family-shadow) !important;
}

.broadcast-frame,
.track-card,
.progression-toast,
.account-stat,
.progression-points,
.profile-daily,
.profile-badges,
.profile-purchased,
.account-info-editor,
.avatar-fieldset,
.market-item,
.market-login-card,
.chat-message,
.listener-row.is-account,
.chat-emoji-menu,
.chat-mention-menu { border-radius: var(--sp-family-radius) !important; }

.chat-panel-head,
.listeners-panel-head,
.market-panel-head {
  border-bottom-color: color-mix(in srgb, var(--ice) 13%, var(--line-soft)) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ice) 3.5%, color-mix(in srgb, var(--master-white) 2.6%, transparent)), transparent) !important;
}


.daily-task,
.daily-tasks-bonus,
.badge-showcase-editor,
.purchased-item,
.avatar-choice,
.badge-tile {
  border-color: color-mix(in srgb, var(--ice) 15%, var(--line-soft)) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--ice) 2.5%, color-mix(in srgb, var(--master-white) 2.2%, transparent)), color-mix(in srgb, var(--master-white) 1%, transparent)) !important;
  box-shadow: inset 0 1px color-mix(in srgb, var(--master-white) 3%, transparent) !important;
}


.profile-badges-toggle .progression-mini-meta,
.profile-purchased-toggle .progression-mini-meta,
.profile-daily-toggle .progression-mini-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex: 0 0 auto;
}
.profile-badges-toggle .progression-mini-meta b,
.profile-purchased-toggle .progression-mini-meta b,
.profile-daily-toggle .progression-mini-meta b {
  color: var(--paper) !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}


.avatar-picker-close.window-close {
  position: relative !important;
  top: auto !important;
  right: auto !important;
}






.ui-icon,
.dock-icon,
.profile-section-icon,
.window-close,
.chat-emoji-toggle,
.chat-send,
.market-panel-title,
.account-info-trigger {
  color: var(--ice) !important;
}

@media (hover:hover) and (pointer:fine) {
  .broadcast-frame:hover,
  .track-card:hover,
  .account-identity:hover,
  .account-stat:hover,
  .progression-points:hover,
  .profile-daily:hover,
  .profile-badges:hover,
  .profile-purchased:hover,
  .account-info-editor:hover,
  .avatar-fieldset:hover,
  .market-item:hover,
  .market-login-card:hover,
  .chat-message:not(.is-highlighted):hover,
  .listener-row.is-account:hover {
    border-color: var(--sp-family-border-ice) !important;
    background: var(--sp-family-bg-hover) !important;
    box-shadow: var(--sp-family-shadow-hover) !important;
    transform: none !important;
  }
  
  }




.dock-button,
.broadcast-frame,
.track-card,
.account-dialog,
.chat-panel,
.listeners-panel,
.market-panel,
.progression-toast,
.account-identity,
.account-stat,
.progression-points,
.profile-daily,
.profile-badges,
.profile-purchased,
.account-info-editor,
.avatar-fieldset,
.market-item,
.market-login-card,
.chat-message,
.listener-row.is-account,
.chat-emoji-menu,
.chat-mention-menu,
.daily-task,
.daily-tasks-bonus,
.badge-showcase-editor,
.purchased-item,
.avatar-choice,
.badge-tile,
.window-close,
.chat-emoji-toggle,
.chat-send,
.market-item-action,
.purchased-item-action,
.badge-showcase-save,
.market-login-card button,
.account-primary,
.account-secondary,
.badge-showcase-slot select,
.account-form input,
.chat-input {
  background: var(--sp-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}



.ui-icon,
.dock-icon,
.listener-headphones,
.sound-icon,
.profile-section-icon,
.account-info-trigger,
.chat-emoji-toggle,
.chat-send,
.window-close,
.video-listeners,
.video-volume,
.market-panel-title,
.avatar-choice-check {
  color: var(--sp-primary) !important;
}

.chat-panel-title,
.listeners-panel-title,
.market-panel-title,
.account-kicker,
.market-category-head strong,
.market-login-card strong,
.market-item-copy strong,
.purchased-item-copy strong,
.account-member .profile-section-label,
.account-member .profile-section-label em,
.account-member .profile-inline-head .profile-section-label,
.account-member .profile-inline-head .profile-section-label em,
.account-member .profile-badges-toggle > .profile-section-label,
.account-member .profile-purchased-toggle > .profile-section-label,
.profile-daily-toggle > .profile-section-label,
.account-member .badge-showcase-head strong,
.profile-daily-meta strong,
.daily-task-body strong,
.badge-detail > strong,
.progression-toast span,
.progression-toast strong,
.track-card h2,
.track-main h2,
.track-next h2,
.market-points b {
  color: var(--sp-primary) !important;
}


.eyebrow,
.track-card p,
.market-category-head span,
.market-item-copy span,
.purchased-item-copy span,
.market-login-card span,
.market-status,
.daily-task-body small,
.profile-daily-meta small,
.badge-detail > p,
.badge-detail-progress > small,
.chat-message-head > span,
.chat-message p,
.listener-row-status,
.progression-empty,
.purchased-empty {
  color: var(--sp-secondary) !important;
}

.market-points span,
.chat-empty {
  color: var(--sp-tertiary) !important;
}


.market-item-action,
.purchased-item-action,
.badge-showcase-save,
.market-login-card button,
.account-primary,
.account-secondary,
.chat-send,
.chat-emoji-toggle {
  color: var(--sp-primary) !important;
  border-color: var(--line) !important;
}


.account-member[data-profile-theme] .profile-section-label,
.account-member[data-profile-theme] .profile-badges-toggle > .profile-section-label,
.account-member[data-profile-theme] .profile-purchased-toggle > .profile-section-label,
.account-member[data-profile-theme] .profile-daily-toggle > .profile-section-label {
  color: var(--sp-primary) !important;
}




@media (hover:hover) and (pointer:fine) {
  
  .dock-button:hover,
  .broadcast-frame:hover,
  .track-card:hover,
  .account-identity:hover,
  .account-stat:hover,
  .progression-points:hover,
  .profile-daily:hover,
  .profile-badges:hover,
  .profile-purchased:hover,
  .account-info-editor:hover,
  .avatar-fieldset:hover,
  .market-item:hover,
  .market-login-card:hover,
  .chat-message:not(.is-highlighted):hover,
  .listener-row.is-account:hover,
  .daily-task:hover,
  .daily-tasks-bonus:hover,
  .badge-showcase-editor:hover,
  .purchased-item:hover,
  .avatar-choice:hover {
    background: var(--sp-surface-hover) !important;
  }

  .dock-button:hover .dock-icon,
.dock-button:hover b,
.video-listeners:hover,
.video-listeners:hover .ui-icon,
.volume-toggle:hover,
.volume-toggle:hover .ui-icon,
.account-stat:hover > .profile-section-label,
.progression-points:hover > .profile-section-label,
.profile-daily-toggle:hover > .profile-section-label,
.profile-badges-toggle:hover > .profile-section-label,
.profile-purchased-toggle:hover > .profile-section-label,
.account-info-trigger:hover,
.window-close:hover,
.market-item:hover .market-item-copy strong,
.purchased-item:hover .purchased-item-copy strong,
.market-item-action:not(:disabled):hover,
.purchased-item-action:not(:disabled):hover,
.badge-showcase-save:not(:disabled):hover,
.market-login-card button:hover,
.account-primary:hover,
.account-secondary:hover,
.chat-send:hover,
.chat-emoji-toggle:hover,
.track-card:hover h2 {
    color: var(--ice) !important;
  }

  
  .track-card:hover p,
  .market-item:hover .market-item-copy span,
  .purchased-item:hover .purchased-item-copy span,
  .daily-task:hover .daily-task-body small,
  .chat-message:not(.is-highlighted):hover p,
  .listener-row.is-account:hover .listener-row-status {
    color: var(--sp-secondary) !important;
  }

  }


.profile-daily-toggle .progression-mini-meta b,
.profile-badges-toggle .progression-mini-meta b,
.profile-purchased-toggle .progression-mini-meta b,
.daily-task-body b {
  color: var(--sp-primary) !important;
}
@media (hover:hover) and (pointer:fine) {
  .profile-daily-toggle:hover .progression-mini-meta b,
  .profile-badges-toggle:hover .progression-mini-meta b,
  .profile-purchased-toggle:hover .progression-mini-meta b {
    color: var(--sp-primary) !important;
  }
}


.account-tabs,
.account-message,
.chat-reply-preview,
.chat-emoji-choice,
.listener-row {
  background: var(--sp-surface) !important;
}

.account-tab {
  color: var(--sp-primary) !important;
}
.account-tab.is-active {
  color: var(--sp-primary) !important;
  background: var(--sp-surface-hover) !important;
  border-color: color-mix(in srgb, var(--ice) 40%, transparent) !important;
}
.chat-emoji-toggle[aria-expanded="true"] {
  color: var(--sp-primary) !important;
}


.chat-reply-preview {
  color: var(--chat-reply-accent) !important;
  border: 1px solid color-mix(in srgb, var(--chat-reply-accent) 42%, var(--ui-border)) !important;
  border-left-width: 1px !important;
  border-radius: var(--sp-family-radius) !important;
  background: color-mix(in srgb, var(--chat-reply-accent) 5%, var(--sp-surface)) !important;
}

@media (hover:hover) and (pointer:fine) {
  .account-tab:hover,
.chat-emoji-choice:hover {
    color: var(--ice) !important;
  }
  .profile-daily-toggle:hover .progression-mini-meta b,
.profile-badges-toggle:hover .progression-mini-meta b,
.profile-purchased-toggle:hover .progression-mini-meta b {
    color: var(--sp-primary) !important;
  }
  .listener-row:hover {
    background: var(--sp-surface-hover) !important;
  }
}



@media (prefers-reduced-motion: reduce) {
  }


@media (hover:hover) and (pointer:fine) {
  button:not(.chat-reply-button):not(.chat-reply-link):hover .ui-icon,
  [role="button"]:hover .ui-icon,
  .account-stat:hover .profile-section-icon,
  .progression-points:hover .profile-section-icon,
  .video-listeners:hover .ui-icon,
  .video-volume:hover .ui-icon {
    color: var(--ice) !important;
  }

  .account-stat:hover > .profile-section-label,
.account-stat:hover > .profile-section-label em,
.progression-points:hover > .profile-section-label,
.progression-points:hover > .profile-section-label em,
.profile-daily-toggle:hover > .profile-section-label,
.profile-daily-toggle:hover > .profile-section-label em,
.profile-badges-toggle:hover > .profile-section-label,
.profile-badges-toggle:hover > .profile-section-label em,
.profile-purchased-toggle:hover > .profile-section-label,
.profile-purchased-toggle:hover > .profile-section-label em,
.chat-send:hover,
.chat-send:hover span,
.chat-emoji-toggle:hover,
.account-info-trigger:hover,
.window-close:hover {
    color: var(--ice) !important;
  }

  
  .account-stat:hover > strong,
  .progression-points:hover > strong,
  .profile-daily-toggle:hover .progression-mini-meta b,
  .profile-badges-toggle:hover .progression-mini-meta b,
  .profile-purchased-toggle:hover .progression-mini-meta b {
    color: var(--sp-primary) !important;
  }
}


.video-volume {
  position: relative !important;
  width: 24px !important;
  height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  gap: 0 !important;
  overflow: visible !important;
}
.volume-slider {
  position: absolute !important;
  z-index: 4;
  left: 50% !important;
  top: calc(100% + 38px) !important;
  width: 74px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) rotate(-90deg) scale(.97) !important;
  transform-origin: center !important;
  transition: none !important;
}
.video-volume:hover .volume-slider,
.video-volume:focus-within .volume-slider {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, -50%) rotate(-90deg) scale(1) !important;
  transition: opacity .1s ease, transform .1s ease, visibility 0s !important;
}
.volume-slider::-moz-range-track,
.volume-slider::-moz-range-progress {
  height: 2px !important;
  border-radius: 999px !important;
}
.volume-slider::-webkit-slider-thumb {
  width: 9px !important;
  height: 9px !important;
  margin-top: -3.5px !important;
}
@media (hover:none), (pointer:coarse) {
  .volume-slider { display: none !important; }
}



@media (prefers-reduced-motion: reduce) {
  }


.presence-dot.is-online,
.profile-presence.is-online i {
  background: var(--status-listening) !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--status-listening) 42%, transparent) !important;
}
.profile-presence.is-online,
.listener-row-status,
.listeners-panel-title {
  color: var(--status-listening) !important;
}
.profile-presence,
.listener-row-status,
.listeners-panel-title {
  align-items: center !important;
}
.profile-presence i,
.listener-row-status .presence-dot,
.listeners-panel-title .presence-dot {
  align-self: center !important;
  margin: 0 !important;
  transform: none !important;
}
.profile-presence b,
.listener-row-status b,
.listeners-panel-title span,
.listeners-panel-title b {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.profile-presence.is-online b,
.listener-row-status b,
.listeners-panel-title span,
.listeners-panel-title b {
  color: inherit !important;
}
.profile-presence.is-offline { color: var(--status-offline) !important; }


.listener-row,
.listener-row.is-account {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
@media (hover:hover) and (pointer:fine) {
  .listener-row:hover,
  .listener-row.is-account:hover {
    border-color: color-mix(in srgb, var(--ice) 24%, var(--line-soft)) !important;
    background: var(--sp-surface-hover) !important;
    box-shadow: inset 0 1px color-mix(in srgb, var(--master-white) 2.5%, transparent) !important;
  }
  .listener-row:hover .listener-row-status,
  .listener-row.is-account:hover .listener-row-status {
    color: var(--status-listening) !important;
  }
}


.volume-popover {
  position: absolute !important;
  z-index: 6 !important;
  top: calc(100% - 1px) !important;
  left: 50% !important;
  width: 28px !important;
  height: 88px !important;
  padding: 5px 0 3px !important;
  display: grid !important;
  place-items: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-50%) !important;
  transition: none !important;
}
.volume-slider::-webkit-slider-runnable-track {
  width: 2px !important;
  height: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(to top,
    var(--volume-accent) 0 var(--volume-fill, 0%),
    color-mix(in srgb, var(--master-white) 24%, transparent) var(--volume-fill, 0%) 100%) !important;
}
.volume-slider::-moz-range-track {
  width: 2px !important;
  height: 100% !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--master-white) 24%, transparent) !important;
}
.volume-slider::-moz-range-progress {
  width: 2px !important;
  border-radius: 999px !important;
  background: var(--volume-accent) !important;
}
@media (hover:hover) and (pointer:fine) {
  .video-volume:hover { --volume-accent: var(--ice); color: var(--ice) !important; }
}
@media (hover:none), (pointer:coarse) {
  .volume-popover { display: none !important; }
}


.track-card,
.track-card * {
  cursor: default !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}




.profile-daily > *,
.profile-badges > *,
.profile-purchased > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion:reduce) {
  }

.volume-popover::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(to top,
    var(--volume-accent) 0 var(--volume-fill),
    color-mix(in srgb, var(--master-white) 24%, transparent) var(--volume-fill) 100%);
  box-shadow: 0 0 7px color-mix(in srgb, var(--volume-accent) 10%, transparent);
  pointer-events: none;
}
.volume-popover::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(8px + var(--volume-position));
  width: 8px;
  height: 8px;
  transform: translate(-50%, 50%);
  border: 1px solid var(--volume-accent);
  border-radius: 50%;
  background: var(--master-surface);
  box-shadow: 0 0 8px color-mix(in srgb, var(--volume-accent) 24%, transparent);
  pointer-events: none;
}
.video-volume:hover .volume-popover {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity .1s ease, visibility 0s !important;
}
.volume-slider::-webkit-slider-runnable-track {
  width: 100% !important;
  height: 30px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.volume-slider::-webkit-slider-thumb {
  width: 12px !important;
  height: 30px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.volume-slider::-moz-range-track,
.volume-slider::-moz-range-progress {
  height: 30px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.volume-slider::-moz-range-thumb {
  width: 12px !important;
  height: 30px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
@media (hover:hover) and (pointer:fine) {
  .video-volume:hover {
    --volume-accent: var(--ice);
    color: var(--ice) !important;
  }
}
@media (hover:none), (pointer:coarse) {
  .volume-popover { display: none !important; }
}


html, body, body * {
  cursor: default;
}
:is(
  button:not(:disabled),
  a[href],
  [role="button"]:not([aria-disabled="true"]),
  [role="link"],
  summary,
  select:not(:disabled),
  label[for],
  input[type="button"]:not(:disabled),
  input[type="submit"]:not(:disabled),
  input[type="reset"]:not(:disabled),
  input[type="checkbox"]:not(:disabled),
  input[type="radio"]:not(:disabled),
  input[type="range"]:not(:disabled)
),
:is(
  button:not(:disabled),
  a[href],
  [role="button"]:not([aria-disabled="true"]),
  [role="link"],
  summary,
  select:not(:disabled),
  label[for]
) * {
  cursor: pointer !important;
}


.profile-daily,
.profile-badges,
.profile-purchased {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}
.video-volume {
  --volume-accent: color-mix(in srgb, var(--master-white) 92%, transparent);
  position: relative !important;
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}
.volume-toggle {
  position: relative !important;
  z-index: 5 !important;
  width: 24px !important;
  height: 28px !important;
}
.volume-popover {
  --volume-fill: 0%;
  --volume-position: 0px;
  position: absolute !important;
  z-index: 7 !important;
  top: calc(100% - 1px) !important;
  left: 50% !important;
  width: 24px !important;
  height: 94px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-50%) !important;
  transition: none !important;
}
.volume-popover::before,
.volume-popover::after {
  content: none !important;
  display: none !important;
}
.volume-rail {
  position: absolute !important;
  z-index: 1 !important;
  left: 50% !important;
  top: 9px !important;
  bottom: 9px !important;
  width: 2px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: linear-gradient(to top,
    var(--volume-accent) 0 var(--volume-fill),
    color-mix(in srgb, var(--master-white) 23%, transparent) var(--volume-fill) 100%) !important;
  pointer-events: none !important;
}
.volume-knob {
  position: absolute !important;
  z-index: 2 !important;
  left: 50% !important;
  bottom: calc(9px + var(--volume-position)) !important;
  width: 8px !important;
  height: 8px !important;
  transform: translate(-50%, 50%) !important;
  border: 1px solid var(--volume-accent) !important;
  border-radius: 50% !important;
  background: var(--master-surface) !important;
  box-shadow: 0 0 6px color-mix(in srgb, var(--volume-accent) 20%, transparent) !important;
  pointer-events: none !important;
}
.video-volume:hover .volume-popover {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.volume-slider {
  position: absolute !important;
  z-index: 3 !important;
  left: 50% !important;
  top: 50% !important;
  width: 76px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%,-50%) rotate(-90deg) !important;
  transform-origin: center !important;
  writing-mode: horizontal-tb !important;
  direction: ltr !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  touch-action: none !important;
}
.volume-slider::-webkit-slider-runnable-track,
.volume-slider::-moz-range-track,
.volume-slider::-moz-range-progress,
.volume-slider::-webkit-slider-thumb,
.volume-slider::-moz-range-thumb {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
@media (hover:hover) and (pointer:fine) {
  .video-volume:hover {
    --volume-accent: var(--ice);
    color: var(--ice) !important;
  }
}
@media (hover:none), (pointer:coarse) {
  .volume-popover { display: none !important; }
}


.profile-presence {
  gap: 3px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  white-space: nowrap !important;
}
.profile-presence > i,
.profile-presence > b {
  align-self: center !important;
  margin: 0 !important;
  transform: none !important;
}
.profile-presence > b {
  display: inline-block !important;
  line-height: 7px !important;
}

#listeners-panel-count { margin-left: .35em !important; }
.chat-input { cursor: text !important; }

.account-dialog,
.chat-panel,
.listeners-panel,
.market-panel {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-panel) !important;
  background: var(--ui-panel-bg) !important;
  box-shadow: var(--ui-panel-shadow) !important;
}
.chat-panel-head,
.listeners-panel-head,
.market-panel-head {
  border-bottom: 1px solid var(--ui-border-soft) !important;
  background: var(--ui-head-bg) !important;
}
.window-close,
.profile-subpage-back,
.market-item-action,
.purchased-item-action,
.market-login-card button,
.badge-showcase-save {
  border-color: var(--ui-border) !important;
  color: var(--master-white) !important;
  background: var(--ui-button-bg) !important;
  box-shadow: inset 0 1px color-mix(in srgb, var(--master-white) 5%, transparent) !important;
}
@media (hover:hover) and (pointer:fine) {
  .window-close:hover,
  .profile-subpage-back:hover,
  .market-item-action:not(:disabled):hover,
  .purchased-item-action:not(:disabled):hover,
  .market-login-card button:hover,
  .badge-showcase-save:not(:disabled):hover {
    border-color: var(--ui-border-hover) !important;
    color: var(--master-white) !important;
    background: var(--ui-button-bg-hover) !important;
    box-shadow: 0 0 14px var(--ui-hover-glow), inset 0 1px color-mix(in srgb, var(--master-white) 8%, transparent) !important;
  }
}

.video-listeners,
.video-listeners b,
.video-listeners .ui-icon,
.listeners-panel-title,
.listeners-panel-title span,
.listeners-panel-title b,
.listener-row-status,
.listener-row-status b,
.profile-presence.is-online,
.profile-presence.is-online b { color: var(--status-listening) !important; }
.presence-dot.is-online,
.profile-presence.is-online i,
.listeners-panel-title .presence-dot,
.listener-row-status .presence-dot {
  background: var(--status-listening) !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--status-listening) 52%, transparent), 0 0 15px color-mix(in srgb, var(--status-listening) 20%, transparent) !important;
}
.profile-presence.is-offline,
.profile-presence.is-offline b { color: var(--status-offline) !important; }
.profile-presence.is-offline i,
.presence-dot.is-offline {
  background: var(--status-offline) !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--status-offline) 52%, transparent), 0 0 15px color-mix(in srgb, var(--status-offline) 18%, transparent) !important;
}
@media (hover:hover) and (pointer:fine) {
  .video-listeners:hover,
  .video-listeners:hover b,
  .video-listeners:hover .ui-icon,
  .listener-row:hover .listener-row-status,
  .listener-row:hover .listener-row-status b {
    color: var(--status-listening) !important;
    text-shadow: 0 0 8px color-mix(in srgb, var(--status-listening) 72%, transparent), 0 0 18px color-mix(in srgb, var(--status-listening) 34%, transparent) !important;
  }
  .video-listeners:hover .ui-icon { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--status-listening) 72%, transparent)) !important; }
}

.account-message[data-kind="success"],
.account-message[data-kind="info"] {
  color: var(--status-success) !important;
  border-color: color-mix(in srgb, var(--status-success) 42%, transparent) !important;
  background: color-mix(in srgb, var(--status-success) 6%, var(--master-surface-soft)) !important;
}
.account-message[data-kind="error"] {
  color: var(--status-error) !important;
  border-color: color-mix(in srgb, var(--status-error) 45%, transparent) !important;
  background: color-mix(in srgb, var(--status-error) 6%, var(--master-surface-soft)) !important;
}
.market-status:not(.is-error),
.badge-showcase-message:not(.is-error),
.chat-status:not(.is-error) { color: var(--status-success) !important; }
.market-status.is-error,
.badge-showcase-message.is-error,
.chat-status.is-error { color: var(--status-error) !important; }

.profile-avatar[data-frame-id="frame-web-red"],
.market-preview-avatar[data-frame-id="frame-web-red"],
.chat-avatar[data-frame-id="frame-web-red"],
.chat-mention-avatar[data-frame-id="frame-web-red"] {
  border-color: var(--cosmetic-red) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cosmetic-red) 45%, transparent), 0 0 16px color-mix(in srgb, var(--cosmetic-red) 34%, transparent) !important;
}
.profile-avatar[data-frame-id="frame-slime"],
.market-preview-avatar[data-frame-id="frame-slime"],
.chat-avatar[data-frame-id="frame-slime"],
.chat-mention-avatar[data-frame-id="frame-slime"] {
  border-color: var(--cosmetic-slime) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cosmetic-slime) 45%, transparent), 0 0 16px color-mix(in srgb, var(--cosmetic-slime) 34%, transparent) !important;
}
.profile-avatar[data-frame-id="frame-ice"],
.market-preview-avatar[data-frame-id="frame-ice"],
.chat-avatar[data-frame-id="frame-ice"],
.chat-mention-avatar[data-frame-id="frame-ice"] {
  border-color: var(--cosmetic-ice) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cosmetic-ice) 48%, transparent), 0 0 17px color-mix(in srgb, var(--cosmetic-ice) 38%, transparent) !important;
}
.account-button-avatar[data-frame-id="frame-web-red"] { box-shadow: 0 0 0 1px color-mix(in srgb, var(--cosmetic-red) 52%, transparent), 0 0 11px color-mix(in srgb, var(--cosmetic-red) 30%, transparent) !important; }
.account-button-avatar[data-frame-id="frame-slime"] { box-shadow: 0 0 0 1px color-mix(in srgb, var(--cosmetic-slime) 52%, transparent), 0 0 11px color-mix(in srgb, var(--cosmetic-slime) 30%, transparent) !important; }
.account-button-avatar[data-frame-id="frame-ice"] { box-shadow: 0 0 0 1px color-mix(in srgb, var(--cosmetic-ice) 54%, transparent), 0 0 12px color-mix(in srgb, var(--cosmetic-ice) 32%, transparent) !important; }

.market-theme-preview[data-profile-theme="theme-red"] { border-color: color-mix(in srgb, var(--cosmetic-red) 58%, var(--ui-border)) !important; box-shadow: inset 0 0 14px color-mix(in srgb, var(--cosmetic-red) 14%, transparent) !important; }
.market-theme-preview[data-profile-theme="theme-red"] i { background: var(--cosmetic-red) !important; }
.market-theme-preview[data-profile-theme="theme-slatt"] { border-color: color-mix(in srgb, var(--cosmetic-slime) 58%, var(--ui-border)) !important; box-shadow: inset 0 0 14px color-mix(in srgb, var(--cosmetic-slime) 14%, transparent) !important; }
.market-theme-preview[data-profile-theme="theme-slatt"] i { background: var(--cosmetic-slime) !important; }
.market-theme-preview[data-profile-theme="theme-ice"] { border-color: color-mix(in srgb, var(--cosmetic-ice) 60%, var(--ui-border)) !important; box-shadow: inset 0 0 14px color-mix(in srgb, var(--cosmetic-ice) 15%, transparent) !important; }
.market-theme-preview[data-profile-theme="theme-ice"] i { background: var(--cosmetic-ice) !important; }

.market-item,
.market-item.is-owned,
.market-item.is-equipped,
.purchased-item,
.daily-task,
.daily-tasks-bonus,
.badge-showcase-editor,
.avatar-choice {
  border: 1px solid var(--ui-border-soft) !important;
  background: var(--ui-card-bg) !important;
  box-shadow: none !important;
}
.market-item-copy strong,
.purchased-item-copy strong { color: var(--master-white) !important; text-shadow: none !important; }
.market-item-action,
.purchased-item-action { text-shadow: none !important; }
.market-item.is-owned .market-item-action { opacity: .58 !important; }
@media (hover:hover) and (pointer:fine) {
  .market-item:hover,
  .purchased-item:hover,
  .daily-task:hover,
  .avatar-choice:hover {
    border-color: var(--ui-border-hover) !important;
    background: var(--ui-card-bg-hover) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--master-white) 4.5%, transparent), 0 0 16px var(--ui-hover-glow), inset 0 1px color-mix(in srgb, var(--master-white) 4%, transparent) !important;
  }
}

#account-dialog,
#account-dialog[data-profile-theme] {
  border-color: var(--ui-border) !important;
  background: var(--ui-panel-bg) !important;
}
#account-dialog[data-profile-theme] .account-sheet {
  background:
    radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--profile-theme-accent) 18%, transparent), transparent 40%),
    radial-gradient(circle at 84% 82%, color-mix(in srgb, var(--profile-theme-accent) 10%, transparent), transparent 44%),
    linear-gradient(145deg, color-mix(in srgb, var(--profile-theme-accent) 7%, var(--master-surface-popover)), color-mix(in srgb, var(--master-panel) 98.8%, transparent) 68%);
}
#account-member-view,
#account-public-view {
  --profile-theme-accent: var(--master-white);
  --profile-sweep-accent: var(--profile-theme-accent);
}
.account-member { gap: 10px !important; }
.account-identity {
  position: relative !important;
  z-index: 30;
  overflow: visible !important;
  border: 1px solid var(--ui-border-soft) !important;
  border-radius: var(--ui-radius-card) !important;
  background: var(--ui-card-bg) !important;
  box-shadow: none !important;
}
.account-own-identity { padding-right: 48px !important; }
@media (hover:hover) and (pointer:fine) {
  .account-identity:hover {
    border-color: var(--ui-border-hover) !important;
    background: var(--ui-card-bg-hover) !important;
    box-shadow: 0 0 16px var(--ui-hover-glow), inset 0 1px color-mix(in srgb, var(--master-white) 4.5%, transparent) !important;
  }
}
.account-own-identity > #account-info-trigger {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
  z-index: 6 !important;
}
.profile-name-row { gap: 5px !important; justify-content: flex-start !important; }
.profile-name-row > strong { flex: 0 1 auto !important; max-width: min(62%, 260px); }
.profile-name-row .profile-presence { flex: 0 0 auto !important; margin: 0 !important; }
.profile-presence { gap: 3px !important; white-space: nowrap !important; }
.profile-presence > i,
.profile-presence > b { margin: 0 !important; transform: none !important; }

.profile-subpage-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--ui-border-soft);
}
.profile-subpage-head > strong { color: var(--master-white) !important; font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.profile-subpage-copy { margin: -2px 0 10px; color: color-mix(in srgb, var(--master-white) 66%, transparent) !important; font-size: 6.5px; font-weight: 760; letter-spacing: .11em; }
.profile-subpage-back {
  min-width: 0 !important;
  min-height: 30px !important;
  height: 30px !important;
  width: auto !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 9px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
.profile-subpage-back .ui-icon { width: 12px !important; height: 12px !important; flex: 0 0 12px !important; margin: 0 !important; transform: none !important; }
.profile-subpage-back span { display: inline-block !important; margin: 0 !important; color: inherit !important; font-size: 6.5px; font-weight: 820; letter-spacing: .11em; line-height: 1 !important; white-space: nowrap !important; }

#account-member-view[data-profile-page="daily"] > :not(.account-identity):not(.profile-daily),
#account-member-view[data-profile-page="badges"] > :not(.account-identity):not(.profile-badges),
#account-member-view[data-profile-page="purchased"] > :not(.account-identity):not(.profile-purchased),
#account-member-view[data-profile-page="settings"] > :not(.account-identity):not(.account-info-editor),
#account-member-view[data-profile-page="avatar"] > :not(.account-identity):not(.profile-form) { display: none !important; }
#account-member-view[data-profile-page="daily"] > .profile-daily,
#account-member-view[data-profile-page="badges"] > .profile-badges,
#account-member-view[data-profile-page="purchased"] > .profile-purchased,
#account-member-view[data-profile-page="settings"] > .account-info-editor,
#account-member-view[data-profile-page="avatar"] > .profile-form { display: grid !important; overflow: visible !important; }
#account-member-view[data-profile-page="daily"] .profile-daily-toggle,
#account-member-view[data-profile-page="badges"] .profile-badges-toggle,
#account-member-view[data-profile-page="badges"] .profile-badge-preview,
#account-member-view[data-profile-page="purchased"] .profile-purchased-toggle { display: none !important; }
#account-member-view[data-profile-page="daily"] #account-daily-section,
#account-member-view[data-profile-page="badges"] #account-badges-section,
#account-member-view[data-profile-page="purchased"] #account-purchased-section,
#account-member-view[data-profile-page="settings"] #account-info-editor,
#account-member-view[data-profile-page="avatar"] #account-avatar-picker { display: grid !important; }
#account-member-view[data-profile-page="daily"] .profile-subpage-head,
#account-member-view[data-profile-page="badges"] .profile-subpage-head,
#account-member-view[data-profile-page="purchased"] .profile-subpage-head,
#account-member-view[data-profile-page="settings"] .profile-subpage-head,
#account-member-view[data-profile-page="avatar"] .profile-subpage-head { display: flex !important; }
#account-member-view[data-profile-page="avatar"] .profile-form { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
#account-member-view[data-profile-page="avatar"] .avatar-fieldset { margin: 0 !important; }
#account-public-view[data-profile-page="badges"] > :not(.account-identity):not(.profile-badges) { display: none !important; }
#account-public-view[data-profile-page="badges"] > .profile-badges { display: grid !important; overflow: visible !important; }
#account-public-view[data-profile-page="badges"] .profile-badges-toggle,
#account-public-view[data-profile-page="badges"] .profile-badge-preview { display: none !important; }
#account-public-view[data-profile-page="badges"] #account-public-badges-section { display: grid !important; gap: 10px; padding-top: 0 !important; }
#account-public-view[data-profile-page="badges"] .profile-subpage-head { display: flex !important; }

#account-member-view[data-profile-page="home"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px !important;
}
#account-member-view[data-profile-page="home"] > .account-identity,
#account-member-view[data-profile-page="home"] > .profile-metrics,
#account-member-view[data-profile-page="home"] > .account-message,
#account-member-view[data-profile-page="home"] > #account-logout { grid-column: 1 / -1; }
.profile-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px !important;
}
.profile-metrics .account-stat,
.profile-metrics .progression-points,
#account-member-view[data-profile-page="home"] > .profile-badges,
#account-member-view[data-profile-page="home"] > .profile-daily,
#account-member-view[data-profile-page="home"] > .profile-purchased {
  min-width: 0;
  min-height: 66px !important;
  height: 66px !important;
  padding: 7px 6px !important;
  border: 1px solid var(--ui-border-soft) !important;
  border-radius: var(--ui-radius-card) !important;
  background: var(--ui-card-bg) !important;
  box-shadow: none !important;
}
.profile-metrics .account-stat,
.profile-metrics .progression-points {
  display: grid !important;
  grid-template-rows: auto auto;
  place-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  gap: 4px !important;
  text-align: center !important;
}
.profile-metrics .profile-section-label { width: 100%; justify-content: center !important; gap: 4px !important; font-size: 5.7px !important; letter-spacing: .07em !important; text-align: center !important; white-space: nowrap !important; }
.profile-metrics .profile-section-icon { width: 11px !important; height: 11px !important; }
.profile-metrics .account-stat strong,
.profile-metrics .progression-points strong { width: 100%; color: var(--master-white) !important; font-size: 11px !important; line-height: 1 !important; text-align: center !important; }
#account-member-view[data-profile-page="home"] .profile-badges-toggle,
#account-member-view[data-profile-page="home"] .profile-daily-toggle,
#account-member-view[data-profile-page="home"] .profile-purchased-toggle {
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  padding: 3px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  text-align: center;
}
#account-member-view[data-profile-page="home"] :is(.profile-badges-toggle,.profile-daily-toggle,.profile-purchased-toggle) > .profile-section-label {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: var(--master-white) !important;
  font-size: 5.8px !important;
  font-weight: 820 !important;
  letter-spacing: .075em !important;
  line-height: 1.1;
  white-space: normal !important;
}
#account-member-view[data-profile-page="home"] :is(.profile-badges-toggle,.profile-daily-toggle,.profile-purchased-toggle) .profile-section-icon { width: 22px !important; height: 22px !important; stroke-width: 1.45; }
#account-member-view[data-profile-page="home"] :is(.profile-badges-toggle,.profile-daily-toggle,.profile-purchased-toggle) .progression-mini-meta { display: flex !important; align-items: center; justify-content: center; line-height: 1; }
#account-member-view[data-profile-page="home"] :is(.profile-badges-toggle,.profile-daily-toggle,.profile-purchased-toggle) .progression-mini-meta b { color: color-mix(in srgb, var(--master-white) 68%, transparent) !important; font-size: 5.7px !important; font-weight: 760 !important; letter-spacing: .05em !important; }

#account-member-view[data-profile-page="home"] :is(.account-identity,.profile-metrics .account-stat,.profile-metrics .progression-points),
#account-member-view[data-profile-page="home"] > :is(.profile-badges,.profile-daily,.profile-purchased) {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .16s ease !important;
}
#account-member-view[data-profile-page="home"] :is(.account-identity,.profile-metrics .account-stat,.profile-metrics .progression-points)::before,
#account-member-view[data-profile-page="home"] > :is(.profile-badges,.profile-daily,.profile-purchased)::before {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: -36% auto -36% -48% !important;
  width: 42% !important;
  transform: skewX(-18deg) translateX(-220%) !important;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--profile-sweep-accent) 22%, transparent), transparent) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform .48s cubic-bezier(.22,.7,.2,1), opacity .18s ease !important;
}
#account-member-view[data-profile-page="home"] .account-identity > :not(.account-info-trigger),
#account-member-view[data-profile-page="home"] :is(.profile-metrics .account-stat,.profile-metrics .progression-points) > *,
#account-member-view[data-profile-page="home"] > :is(.profile-badges,.profile-daily,.profile-purchased) > * {
  position: relative !important;
  z-index: 2 !important;
}
#account-member-view[data-profile-page="home"] .account-own-identity > #account-info-trigger {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 4 !important;
}
@media (hover:hover) and (pointer:fine) {
  #account-member-view[data-profile-page="home"] :is(.account-identity,.profile-metrics .account-stat,.profile-metrics .progression-points):hover,
  #account-member-view[data-profile-page="home"] > :is(.profile-badges,.profile-daily,.profile-purchased):hover {
    border-color: var(--ui-border-hover) !important;
    background: var(--ui-card-bg-hover) !important;
    box-shadow: 0 0 16px var(--ui-hover-glow), inset 0 1px color-mix(in srgb, var(--master-white) 4.5%, transparent) !important;
  }
  #account-member-view[data-profile-page="home"] :is(.account-identity,.profile-metrics .account-stat,.profile-metrics .progression-points):hover::before,
  #account-member-view[data-profile-page="home"] > :is(.profile-badges,.profile-daily,.profile-purchased):hover::before {
    transform: skewX(-18deg) translateX(390%) !important;
    opacity: .92 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #account-member-view[data-profile-page="home"] :is(.account-identity,.profile-metrics .account-stat,.profile-metrics .progression-points)::before,
  #account-member-view[data-profile-page="home"] > :is(.profile-badges,.profile-daily,.profile-purchased)::before { display: none !important; }
}

.account-info-editor,
.avatar-fieldset,
.profile-daily,
.profile-badges,
.profile-purchased,
.badge-showcase-editor,
.daily-task,
.daily-tasks-bonus,
.purchased-item,
.avatar-choice { border-color: var(--ui-border-soft) !important; }
#account-member-view[data-profile-page="daily"] .profile-daily,
#account-member-view[data-profile-page="badges"] .profile-badges,
#account-member-view[data-profile-page="purchased"] .profile-purchased,
#account-member-view[data-profile-page="settings"] .account-info-editor,
#account-member-view[data-profile-page="avatar"] .avatar-fieldset {
  border-color: var(--ui-border-soft) !important;
  background: var(--ui-subpage-bg) !important;
  box-shadow: inset 0 1px color-mix(in srgb, var(--master-white) 2.5%, transparent) !important;
}
#account-member-view[data-profile-page="settings"] .account-form input,
#account-member-view[data-profile-page="avatar"] .avatar-choice { background: color-mix(in srgb, var(--master-white) 2.2%, transparent) !important; }
#account-member-view[data-profile-page="settings"] .account-form input:focus,
#account-member-view[data-profile-page="avatar"] .avatar-choice.is-selected {
  border-color: var(--ui-border-hover) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--master-white) 5.5%, transparent), 0 0 14px var(--ui-hover-glow) !important;
}

.account-identity > div:has(> .identity-badge-showcase) { flex: 1 1 auto; }
.account-identity .identity-badge-showcase {
  width: auto !important;
  max-width: 112px;
  min-height: 0;
  margin-top: 5px;
  display: flex !important;
  align-items: center;
  gap: 6px !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 5 !important;
}
.account-identity .identity-badge-showcase:empty { display: none !important; }
.account-identity .identity-badge-showcase .badge-tile.is-compact {
  position: relative;
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  contain: none !important;
  cursor: help;
}

.account-identity .identity-badge-showcase .badge-detail { display: none !important; }
.badge-showcase-slots { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

.badge-preview-popover {
  position: absolute;
  z-index: 10020;
  width: min(154px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  pointer-events: none;
}
.badge-preview-popover[hidden] { display: none !important; }
.badge-preview-popover-card {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--ui-border) !important;
  border-radius: 9px;
  color: var(--master-white);
  background: var(--ui-panel-bg) !important;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--master-black) 62%, transparent), inset 0 1px color-mix(in srgb, var(--master-white) 5%, transparent) !important;
}
.badge-preview-popover-card > b { color: var(--paper); font-size: 5px; font-weight: 850; letter-spacing: .1em; }
.badge-preview-popover-card.is-unlocked > b { color: var(--status-success); }
.badge-preview-popover-card > strong { color: var(--master-white); font-size: 7px; font-weight: 840; letter-spacing: .055em; line-height: 1.15; }
.badge-preview-popover-card > p { margin: 0; color: color-mix(in srgb, var(--master-white) 76%, transparent); font-size: 5.4px; font-weight: 620; line-height: 1.3; }
.badge-preview-popover-card > p:last-child { display: none; }
.badge-preview-popover-card .badge-detail-progress { display: grid; gap: 3px; }
.badge-preview-popover-card .badge-detail-progress > i { height: 2px; overflow: hidden; display: block; border-radius: 999px; background: color-mix(in srgb, var(--master-white) 10%, transparent); }
.badge-preview-popover-card .badge-detail-progress > i > span { height: 100%; display: block; border-radius: inherit; background: var(--ui-progress-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--ui-progress-accent) 35%, transparent); }
.badge-preview-popover-card .badge-detail-progress > small { display: flex; justify-content: space-between; gap: 6px; color: color-mix(in srgb, var(--master-white) 62%, transparent); font-size: 4.7px; font-weight: 720; font-variant-numeric: tabular-nums; }


@media (max-width:430px) {
  #account-member-view[data-profile-page="home"] { gap: 6px !important; }
  .profile-metrics { gap: 4px !important; }
  .profile-metrics .account-stat,
  .profile-metrics .progression-points,
  #account-member-view[data-profile-page="home"] > .profile-badges,
  #account-member-view[data-profile-page="home"] > .profile-daily,
  #account-member-view[data-profile-page="home"] > .profile-purchased { min-height: 62px !important; height: 62px !important; padding: 6px 4px !important; }
  .profile-metrics .profile-section-label { font-size: 5px !important; letter-spacing: .045em !important; }
  .profile-metrics .profile-section-icon { width: 9px !important; height: 9px !important; }
  .profile-metrics .account-stat strong,
  .profile-metrics .progression-points strong { font-size: 9.5px !important; }
  #account-member-view[data-profile-page="home"] :is(.profile-badges-toggle,.profile-daily-toggle,.profile-purchased-toggle) .profile-section-icon { width: 20px !important; height: 20px !important; }
  .account-identity .identity-badge-showcase .badge-tile.is-compact { width: 27px !important; height: 27px !important; flex-basis: 27px; }
  .badge-preview-popover { width: min(144px, calc(100vw - 16px)); }
}


.avatar-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: var(--master-white); font-size: .42em; font-weight: 900; letter-spacing: 0; line-height: 1; }
.profile-avatar.is-placeholder-avatar, .chat-avatar.is-placeholder-avatar { display: grid; place-items: center; }
.chat-mention-avatar { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; }
.market-badge-placeholder, .badge-art-placeholder { display: grid; place-items: center; color: var(--sp-secondary); font-weight: 850; letter-spacing: .08em; text-align: center; }
.market-badge-placeholder { width: 100%; height: 100%; font-size: 5.4px; }
.badge-art-placeholder { width: 42px; height: 42px; border: 1px solid var(--ui-border-soft); border-radius: 50%; font-size: 6px; background: var(--ui-card-bg); }
.badge-tile.is-compact .badge-art-placeholder { width: 30px; height: 30px; border: 0; background: transparent; }