/* Component surface contract: page / panel / nested / controls / floating layer.
   Content artwork, status colours and keyboard focus are not theme accents.
   Important declarations in this named layer outrank legacy unlayered overrides.
   Keep selectors component-scoped: never theme arbitrary post descendants. */
@layer vmesta-component-contract {
:root {
 --theme-floating:color-mix(in srgb,var(--theme-surface-panel) 92%,transparent);
 --theme-scrim:rgb(8 12 18 / .48);
 --theme-floating-shadow:0 12px 40px rgb(0 0 0 / .22);
 --theme-danger-soft:color-mix(in srgb,var(--theme-danger) 14%,var(--theme-surface-panel));
 --theme-danger-ink:#b91c1c;
 --theme-control-raised:color-mix(in srgb,var(--theme-surface-control) 92%,var(--theme-text-primary));
}
html.dark {--theme-danger-ink:#ffb4ab;}
html:root body :is(.spaces-top-panel,.spaces-index-scope) {
 background:var(--theme-surface-panel)!important;border:0!important;border-radius:18px;padding:14px;box-sizing:border-box;
}
html:root body .spaces-index-scope {gap:8px;}
html:root body .spaces-index-scope > button:not(.is-active) {background:var(--theme-surface-nested)!important;}
html:root:is(.adaptive-theme,:not(.adaptive-theme)):is(.theme-monet-active,:not(.theme-monet-active)) body.messages-route #messages-root .messenger-message-stream {background:var(--theme-surface-nested)!important;}
html:root:is(.adaptive-theme,:not(.adaptive-theme)):is(.theme-monet-active,:not(.theme-monet-active)) body.messages-route #messages-root :is(.messenger-conversation-header,.messenger-composer) {background:var(--theme-surface-panel)!important;}
html:root body #messages-side-root .messenger-side-section {border-radius:18px!important;padding:16px!important;}
html:root body #messages-root .messenger-dialogs-panel {border-radius:20px!important;}

/* Nested settings and profile panels never fall back to literal white/slate. */
html:root body #privacy-blacklist-card .privacy-blacklist-groups,
html:root body :is(#profile-family-card,.cover-account-section,.cover-data-section,.cover-security-section,.sidebar-customizer-list) {
 background:var(--theme-surface-nested)!important;color:var(--theme-text-primary)!important;border:0!important;border-radius:16px;
}
html:root body #privacy-blacklist-card :is(.privacy-blacklist-group,.privacy-blacklist-group-toggle,.privacy-blacklist-user) {
 background:var(--theme-control-raised)!important;color:var(--theme-text-primary)!important;border:0!important;
}
html:root body #privacy-blacklist-card :is(strong,small,b) {color:inherit!important;}
html:root body #privacy-blacklist-card small {color:var(--theme-text-secondary)!important;}
html:root body #privacy-blacklist-card .privacy-blacklist-group-meta b {background:var(--theme-surface-panel)!important;color:var(--theme-text-primary)!important;}
html:root body #privacy-blacklist-card .privacy-blacklist-group-meta svg {color:var(--theme-text-secondary)!important;}
html:root body #profile-family-card .profile-family-member {background:var(--theme-control-raised)!important;border-radius:12px;}
html:root body #profile-gifts-grid .profile-gift-item {background:var(--theme-surface-nested)!important;color:var(--theme-text-primary)!important;border:0!important;}
html:root body #achievements-modal :is(.achievements-scope-tabs,.achievements-dialog-tabs) {background:var(--theme-surface-nested)!important;border-radius:14px;padding:6px!important;gap:6px!important;}
html:root body #achievements-modal :is(.achievements-scope-tabs,.achievements-dialog-tabs)>button:not(.is-active) {background:var(--theme-surface-control)!important;color:var(--theme-text-secondary)!important;}
html:root body :is(.friends-index-tabs,.friends-index-tab,.friends-side-link,.friends-section-button,.friends-tabs,.friends-tab) {border:0!important;box-shadow:none!important;}
html:root body #friends-sub-tabs,html:root body #side-friends button {border:0!important;box-shadow:none!important;}
html:root body :is(#profile-left-rail .nav-item,#profile-tabs .tab-btn) svg {color:inherit!important;}
html:root body :is([data-signal-grid="gifts"],.signal-gifts-panel) .gift-history-list {display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;}
html:root body :is([data-signal-grid="gifts"],.signal-gifts-panel) .gift-history-item {width:100%!important;min-width:0;}
@media(min-width:1024px) {
 html:root body #profile-sidebar-shell > :is(#profile-friends-preview,.profile-friends-preview,.profile-sidebar-nav,nav) {margin-top:10px!important;}
 html:root body #profile-left-rail .profile-sidebar-nav {padding:6px!important;}
}
html:root body :is(.sidebar-customizer-list,.theme-profile-blocks,.cover-account-sections) {gap:10px!important;padding:10px!important;}

/* Glass menus, not glass text: alpha belongs to the surface, never the container opacity. */
html:root body :is([id^="post-menu-"],.comment-dropdown,.friend-dropdown,.spaces-index-menu,
 .messenger-message-menu,.messenger-attach-menu,.messenger-room-manage-menu-content,
 .notifications-actions-menu,.notifications-settings-menu,.notification-actions-menu,
 .spaces-top-help-popover,.global-search-filter-menu,#vm-select-portal) {
 background:var(--theme-floating)!important;color:var(--theme-text-primary)!important;
 border:0!important;box-shadow:var(--theme-floating-shadow)!important;
 backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;
}
html:root body #settings-dropdown {background:var(--theme-floating)!important;box-shadow:0 12px 36px rgb(0 0 0 / .18)!important;}
html:root body [onclick="toggleSettingsMenu(event)"] {background:transparent!important;box-shadow:none!important;filter:none!important;border:0!important;}
html:root body [onclick="toggleSettingsMenu(event)"]::before,
html:root body [onclick="toggleSettingsMenu(event)"]::after {content:none!important;}
html:root body :is(.messenger-new-modal,.messenger-room-tags-dialog,.messenger-room-panel-layer) {
 background:var(--theme-scrim)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;
}
html:root body :is(.messenger-new-modal,.messenger-room-tags-dialog) > section {
 background:var(--theme-surface-panel)!important;color:var(--theme-text-primary)!important;box-shadow:var(--theme-floating-shadow)!important;border:0!important;
}
html:root body :is(.messenger-room-tags-list,.messenger-room-panel-content,.messenger-room-members-trigger) {background:var(--theme-surface-nested)!important;color:var(--theme-text-primary)!important;}
html:root body .messenger-room-panel {background:var(--theme-surface-panel)!important;box-shadow:var(--theme-floating-shadow)!important;border-radius:20px!important;}
html:root body .messenger-room-panel :is(.messenger-room-panel-profile,nav,section) {background:var(--theme-surface-panel)!important;}
html:root body .messenger-room-panel :is(.messenger-room-panel-meta > button,.messenger-room-panel-overview) {background:var(--theme-surface-nested)!important;}
html:root body .messenger-room-tag-editor [data-tag-save] {background:var(--theme-accent)!important;color:var(--theme-on-accent)!important;}
html:root body :is(.messenger-room-tag-editor,.messenger-room-tags-dialog) :is(input,select,.vm-select-trigger) {background:var(--theme-surface-control)!important;color:var(--theme-text-primary)!important;}
html:root body .emoji-picker .emoji-picker-bottom-modes {background:var(--theme-surface-control)!important;box-shadow:0 -6px 16px rgb(0 0 0 / .12)!important;}
html:root body .emoji-picker .emoji-picker-mode-button.is-active {background:var(--theme-surface-active)!important;color:var(--theme-on-active)!important;}

html:root body :is(#media-viewer,#messenger-photo-viewer,#messenger-shared-media,#shared-post-media-viewer).vmesta-unified-viewer {
 background:var(--theme-surface-page)!important;
}
html:root body :is(.vmesta-viewer-info,.vmesta-viewer-info-panel,.media-info-panel,#media-viewer-info) {background:var(--theme-floating)!important;color:var(--theme-text-primary)!important;}

/* Stable semantic colours — must not be sampled from wallpaper. */
html:root body #notifications-profile-count {background:#dc2626!important;color:#fff!important;}
html:root body #notifications-system-count {background:#2563eb!important;color:#fff!important;}
html:root body :is(.profile-sanction-actions,.galaxy-guard-dialog,.messenger-room-settings-modal) .is-danger,
html:root body .profile-sanction-duration.is-permanent,
html:root body button[data-profile-sanction-duration="permanent"] {
 background:var(--theme-danger-soft)!important;color:var(--theme-danger-ink)!important;border:0!important;
}
html:root body .my-report-type img {width:100%;height:100%;object-fit:cover;border-radius:inherit;}

/* Compact shared track layout; the cover image remains mounted for load/error handling. */
html:root body .vmesta-track-player .vmesta-track-cover-art {display:none!important;}
html:root body .vmesta-track-player .vmesta-track-body,
html:root body .post-track-grid .vmesta-track-player.is-compact-track .vmesta-track-body {
 display:grid!important;grid-template-columns:36px minmax(0,1fr) auto!important;align-items:center;gap:10px!important;
}
html:root body .vmesta-track-player .vmesta-track-play {grid-column:1!important;grid-row:1!important;width:36px!important;height:36px!important;}
html:root body .vmesta-track-player .vmesta-track-timeline {grid-column:2!important;grid-row:1!important;display:grid!important;gap:2px!important;min-width:0;}
html:root body .vmesta-track-player .vmesta-track-tools {grid-column:3!important;grid-row:1!important;display:flex!important;gap:4px!important;}
html:root body .vmesta-track-player .vmesta-track-tools :is(button,a) {width:30px!important;height:30px!important;}
html:root body .vmesta-track-player {display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;gap:4px!important;padding:8px 10px!important;min-height:0!important;border-radius:14px!important;}
html:root body .vmesta-track-player .vmesta-track-head {grid-column:1!important;grid-row:1!important;margin:0!important;}
html:root body .vmesta-track-player .vmesta-track-head strong {font-size:13px!important;line-height:18px!important;font-weight:600!important;}
html:root body .vmesta-track-player .vmesta-track-body {grid-column:1!important;grid-row:2!important;margin:0!important;min-height:0!important;}
html:root body .vmesta-track-player .vmesta-track-wave {display:block!important;height:18px!important;min-width:0;}
html:root body .vmesta-track-player:not(.is-track-active) .vmesta-track-wave svg {opacity:.75!important;visibility:visible!important;}
html:root body .vmesta-track-player .vmesta-track-wave-base {clip-path:inset(0 0 0 var(--track-progress-position,0%))!important;stroke:var(--track-muted)!important;stroke-width:2!important;}
html:root body .vmesta-track-player .vmesta-track-wave-progress {stroke:var(--track-accent)!important;stroke-width:2!important;}
html:root body .vmesta-track-player :is(.vmesta-track-wave-buffered,.vmesta-track-wave-motion) {display:none!important;}
html:root body .vmesta-track-player .vmesta-track-progress-thumb {opacity:1!important;fill:var(--track-accent)!important;transform:none!important;}
html:root body #global-music-panel .global-music-wave {position:relative;}
html:root body #global-music-panel .global-music-wave path:not(.is-progress) {clip-path:inset(0 0 0 var(--global-track-progress,0%))!important;stroke:var(--track-muted,var(--theme-text-muted))!important;}
html:root body #global-music-panel .global-music-wave path.is-progress {stroke:var(--track-accent,var(--theme-accent))!important;}
html:root body #global-music-panel .global-music-wave::after {content:"";position:absolute;left:clamp(3px,var(--global-track-progress,0%),calc(100% - 3px));top:50%;transform:translate(-50%,-50%);width:4px;height:16px;border-radius:2px;background:var(--track-accent,var(--theme-accent));pointer-events:none;}
@media(max-width:767px) {
 html:root body .post-track-grid .vmesta-track-player .vmesta-track-body,
 html:root body .post-track-grid .vmesta-track-player.is-compact-track .vmesta-track-body {grid-template-columns:34px minmax(0,1fr) auto!important;gap:7px!important;}
 html:root body .post-track-grid .vmesta-track-player .vmesta-track-cover-art {display:none!important;}
 html:root body .post-track-grid .vmesta-track-player .vmesta-track-play {grid-column:1!important;}
 html:root body .post-track-grid .vmesta-track-player .vmesta-track-timeline {grid-column:2!important;}
 html:root body .post-track-grid .vmesta-track-player .vmesta-track-tools {grid-column:3!important;}
}
@media(prefers-reduced-transparency:reduce) {
 :root {--theme-floating:var(--theme-surface-panel);}
}
/* Real component names and contexts, including nested messenger audio. */
html:root body .profile-layout-accordion-content {display:grid!important;gap:8px!important;padding:10px!important;background:var(--theme-surface-nested)!important;border-radius:14px!important;}
html:root body .profile-layout-accordion-content > button {background:var(--theme-surface-panel)!important;border:0!important;border-radius:10px!important;}
html:root body .profile-music-library {padding:20px!important;border-radius:20px!important;background:var(--theme-surface-panel)!important;color:var(--theme-text-primary)!important;}
html:root body .profile-music-tracks {display:grid!important;gap:12px!important;}
html:root body .profile-music-empty {display:grid!important;justify-items:center;gap:10px;padding:40px 16px;text-align:center;background:var(--theme-surface-nested);border-radius:16px;}
html:root body .profile-music-empty > svg {width:52px;height:52px;stroke:var(--theme-icon);fill:none;stroke-width:1.5;}
html:root body .profile-music-empty > p {color:var(--theme-text-secondary);}
html:root body .messenger-voice-wave {position:relative!important;}
html:root body .messenger-voice-wave-base {clip-path:inset(0 0 0 var(--voice-progress,0%))!important;}
html:root body .messenger-voice-wave-progress {clip-path:inset(0 calc(100% - var(--voice-progress,0%)) 0 0)!important;}
html:root body .messenger-voice-wave::after {content:"";position:absolute;left:clamp(2px,var(--voice-progress,0%),calc(100% - 2px));top:50%;transform:translate(-50%,-50%);width:3px;height:14px;border-radius:2px;background:var(--msg-accent,var(--theme-accent));pointer-events:none;}
html:root body .vmesta-track-player.is-cover-ready {
 background-color:#20242a!important;
 background-image:linear-gradient(90deg,rgb(8 12 18 / .76),rgb(8 12 18 / .62)),var(--vmesta-track-cover,none)!important;
 background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;
}
html:root body #settings-dropdown {backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;}
html:root body #notification-settings-menu {background:var(--theme-floating)!important;backdrop-filter:blur(14px)!important;box-shadow:var(--theme-floating-shadow)!important;}
html:root body #profile-admin-sanction-modal .profile-admin-duration-grid > .is-danger {
 background:var(--theme-danger-soft)!important;color:var(--theme-danger-ink)!important;
}
html:root body :is(.messenger-room-delete,.messenger-delete-actions .is-danger,#notification-settings-menu .is-danger,#settings-dropdown button[onclick="logout()"]) {
 background:var(--theme-danger-soft)!important;color:var(--theme-danger-ink)!important;
}
html:root body :is(.messenger-room-delete,.messenger-delete-actions .is-danger,#notification-settings-menu .is-danger,#settings-dropdown button[onclick="logout()"]) :is(span,strong,small,svg) {color:var(--theme-danger-ink)!important;}
html:root body #profile-admin-sanction-modal :is(.profile-admin-reason-expand,.profile-admin-reason-emoji) {
 background:var(--theme-surface-control)!important;color:var(--theme-text-primary)!important;
}
html:root body #theme-card-light {background:#f4f6f8!important;color:#343b44!important;opacity:1!important;}
html:root body #theme-card-dark {background:#343b44!important;color:#f4f6f8!important;opacity:1!important;}
html:root body #theme-card-light > div {background:#a9b2bf!important;}
html:root body #theme-card-light > div:first-child {background:#343b44!important;}
html:root body #theme-card-dark > div {background:#9ca5b2!important;}
html:root body #theme-card-dark > div:first-child {background:#f4f6f8!important;}
html:root body #cover-animation-panel :is(.cover-account-card,.cover-theme-section) {background:var(--theme-surface-nested)!important;}
html:root body #cover-animation-panel :is(.cover-account-setting-row,.cover-avatar-gallery-card) {border-radius:12px!important;}
html:root body #cover-animation-panel .cover-account-list {display:grid!important;gap:12px!important;}
html:root body #cover-animation-panel .cover-account-setting-row {padding:10px!important;background:var(--theme-surface-panel)!important;}
html:root body .emoji-picker.emoji-picker-expanded[data-allow-stickers] .emoji-picker-bottom-modes {
 background:var(--theme-surface-control)!important;box-shadow:0 4px 14px rgb(0 0 0 / .2)!important;
}
html:root body .emoji-picker.emoji-picker-expanded[data-allow-stickers] .emoji-picker-mode-button.is-active {
 background:var(--theme-surface-active)!important;color:var(--theme-on-active)!important;
}
html:root body.messages-route #messages-root .messenger-message-menu-stack.has-reaction-picker .messenger-reaction-picker {
 animation:vmesta-reaction-enter-v321 120ms ease-out!important;
}
@keyframes vmesta-reaction-enter-v321 {from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce) {
 html:root body.messages-route #messages-root .messenger-message-menu-stack.has-reaction-picker .messenger-reaction-picker {animation:none!important;}
}
@media(min-width:1024px) {
 html:root body #profile-left-rail .profile-sidebar-navigation-frame {margin-top:10px!important;}
 html:root body #profile-left-rail .profile-sidebar-navigation {margin-top:0!important;}
}

/* v322: semantic notices and legible, consistent component typography. */
:root {--vmesta-ui-font:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;}
html:root body :is(.vmesta-track-player,.vmesta-viewer-header,.vmesta-viewer-info,#profile-family-card,.settings-profile-rank-btn,.vmesta-notice-toast) {font-family:var(--vmesta-ui-font)!important;text-shadow:none!important;}
html:root body .vmesta-track-player :is(.vmesta-track-time,.vmesta-track-time *) {font-size:11px!important;line-height:14px!important;font-weight:500!important;}
html:root body .vmesta-viewer-header {background:var(--theme-surface-panel)!important;color:var(--theme-text-primary)!important;}
html:root body .vmesta-viewer-header :is(strong,button,svg) {color:var(--theme-text-primary)!important;}
html:root body .vmesta-viewer-header > strong {font-size:14px!important;font-weight:600!important;}
html:root body .vmesta-viewer-info {background:var(--theme-surface-panel)!important;}
html:root body .vmesta-viewer-info :is(h2,dd,button,svg,summary) {color:var(--theme-text-primary)!important;}
html:root body .vmesta-viewer-info h2 {font-size:18px!important;font-weight:600!important;}
html:root body .vmesta-viewer-info dt {font-size:12px!important;font-weight:500!important;color:var(--theme-text-secondary)!important;letter-spacing:.02em!important;}
html:root body .vmesta-viewer-info dd {font-size:14px!important;font-weight:400!important;line-height:1.5!important;}
html:root body .settings-profile-rank-btn {background:transparent!important;color:var(--theme-text-primary)!important;box-shadow:none!important;}
html:root body .settings-profile-rank-btn:hover {background:var(--theme-surface-nested)!important;}
html:root body .settings-profile-rank-btn strong {color:var(--theme-text-primary)!important;font-weight:600!important;font-size:13px!important;}
html:root body .settings-profile-rank-btn small {color:var(--theme-text-secondary)!important;font-weight:400!important;font-size:12px!important;}
html:root body .settings-profile-action-icon {background:var(--theme-surface-control)!important;color:var(--theme-icon)!important;}
html:root body .settings-profile-action-icon svg {color:inherit!important;}
html:root body #profile-family-card {padding:16px!important;}
html:root body #profile-family-card .profile-family-person {line-height:1.4!important;}
html:root body #profile-family-card :is(.profile-family-person strong,.profile-family-head strong) {font-size:14px!important;font-weight:600!important;color:var(--theme-text-primary)!important;}
html:root body #profile-family-card :is(.profile-family-person small,.profile-family-person em,.profile-family-head span,.profile-family-group > span) {font-size:11px!important;font-weight:500!important;color:var(--theme-text-secondary)!important;}
html:root body #profile-family-card .profile-family-member {padding:8px!important;}
html:root body .comment-node,
html:root body .comment-node:hover {background:transparent!important;box-shadow:none!important;border-color:transparent!important;}
html:root body .comment-node.highlight-comment::before,
html:root body .comment-node.highlight-comment::after {content:none!important;animation:none!important;}
html:root body .comment-node.highlight-comment-like .comment-like-btn {filter:none!important;animation:none!important;}
html:root body .vmesta-notice-toast {background:#2563eb!important;color:white!important;border:0!important;}
html:root body .vmesta-notice-toast[data-notice-type="error"] {background:#dc2626!important;}
html:root body .vmesta-notice-toast :is(div,span,strong,small,svg) {color:white!important;}
html:root body .vmesta-notice-toast .vmesta-notice-system-avatar {background:rgb(255 255 255 / .18)!important;}
html:root body .notif-item[data-service-tone] {background:#eff6ff!important;color:#1e3a8a!important;}
html:root body .notif-item[data-service-tone="error"] {background:#fef2f2!important;color:#991b1b!important;}
html:root.dark body .notif-item[data-service-tone] {background:#172b49!important;color:#bfdbfe!important;}
html:root.dark body .notif-item[data-service-tone="error"] {background:#3f1d25!important;color:#fecaca!important;}
html:root body .notif-item[data-service-tone] :is(div,span,strong,small,button,svg) {color:inherit!important;}
html:root body .notif-item[data-service-tone] .system-notification-avatar {background:transparent!important;}
html:root body :is(#bell-badge,#notif-badge) {background:#dc2626!important;color:#fff!important;}
html:root body :is(#bell-badge,#notif-badge).is-system-only {background:#2563eb!important;}
html:root body :is(#bell-badge,#notif-badge).is-mixed {background:linear-gradient(135deg,#dc2626 0 50%,#2563eb 50% 100%)!important;}
@media(min-width:1024px) {
 html:root body #profile-left-rail #profile-sidebar-shell {gap:0!important;}
 html:root body #profile-sidebar-shell > #friends-list-container {margin:8px 0!important;}
 html:root body #profile-left-rail .profile-sidebar-navigation-frame {margin-top:0!important;}
 html:root body #profile-sidebar-shell > #profile-avatar-card {margin-bottom:0!important;background:var(--theme-surface-panel)!important;border-radius:18px 18px 0 0!important;}
 html:root body #profile-sidebar-shell > .profile-sidebar-summary {margin-top:0!important;padding:8px!important;background:var(--theme-surface-panel)!important;border-radius:0 0 18px 18px!important;box-sizing:border-box!important;}
 html:root body #profile-sidebar-shell > #space-left-actions {margin:0!important;padding:8px!important;background:var(--theme-surface-panel)!important;border-radius:0 0 18px 18px!important;box-sizing:border-box!important;}
}
}