/* Shared visual theme; page styles retain responsive layout and video geometry. */
:root {
  color-scheme: dark;
  /* Canonical tokens for every page (see docs/frontend.md "Design tokens").
     Fixed brand colours: owned app themes (decorations.css) never change these. */
  --brand-accent: #3169d8;
  --brand-accent-soft: #a5c3ff;
  --brand-line: #344255;
  --brand-on-accent: #fff;
  /* Themeable: scene worlds remap everything below (decorations.css). */
  --bg: #111720;
  --panel: #1b2430;
  --surface: #1b2430;
  --surface-2: #253142;
  --surface-3: #303f53;
  --line: var(--brand-line);
  --muted: #b5c0ce;
  --text: #f4f7fc;
  --accent: var(--brand-accent);
  --accent-soft: var(--brand-accent-soft);
  /* Semantic roles. Components consume these; scene worlds (decorations.css)
     only remap them, so a new component needs no decorations.css rule.
     Groups: text on fills, controls, overlays, states. See docs/frontend.md. */
  --on-accent: var(--brand-on-accent);
  --accent-hover: #3975e8;
  --text-soft: #d9e1ec;
  --danger-ink: #ffb1b8;
  --control-bg: #1d2939;
  --control-quiet-bg: transparent;
  --control-edge: var(--field-line);
  --control-quiet-edge: #40516a;
  --control-ink: #d8e4f7;
  --control-hover: #243b58;
  --control-hover-edge: #7395c6;
  --control-icon: var(--brand-accent-soft);
  --control-shadow: none;
  --control-raised: #233247;
  --icon: #8e9eb3;
  --text-faint: #9eafc4;
  --danger-bg: #f04d5529;
  --danger-edge: #f04d554d;
  --divider: #34445a;
  --line-faint: #ffffff12;
  --field-bg: #141e2a;
  --dialog-bg: #19222e;
  --dialog-edge: #3a4656;
  --popover-bg: #1b2636;
  --popover-edge: #455975;
  --item-ink: #e6e3e1;
  --item-icon: #afa9a3;
  --accent-wash: #598fe62e;
  --hover-bg: #ffffff09;
  --selected-bg: #263d5c;
  --selected-ink: #dceaff;
  /* Text over live video never follows a scene. */
  --on-media: #f4f7fc;
  /* Accessibility: form-field edges keep >=3:1 against bg/surface/surface-2,
     and every page shares one keyboard focus ring. */
  --field-line: #6b7d96;
  --focus-ring: var(--accent-soft);
  /* Four corner radii for every page; 2–3px hairline details, 25px+ hero
     shapes and pills (999px / 50%) stay literal. */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
}
/* Loading placeholder: navigation.js removes data-skeleton once a page script
   writes the element. Avatars keep their own circle and only get the shimmer. */
[data-skeleton] {
  color: transparent !important;
  background-image: linear-gradient(90deg, #ffffff0d 25%, #ffffff26 50%, #ffffff0d 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
[data-skeleton]:not([class*="avatar"]) {
  display: inline-block;
  min-width: 2.6em;
  border-radius: var(--radius-xs);
  line-height: 1.15;
}
@keyframes skeleton-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-skeleton] { animation: none; }
}
/* One keyboard focus ring for every page (all pages load theme.css). Component
   rules may change offset/radius, but keep the colour var(--focus-ring). */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
body {
  background: var(--bg);
  color: var(--text);
}
/* Browsers give form controls their own font; pages without styles.css
   otherwise render injected buttons (e.g. "App installieren") in a serif. */
button, input, select, textarea { font-family: inherit; }
.topbar {
  background: #161e2a;
  border-bottom-color: var(--brand-line);
  box-shadow: none;
}
.brand {
  color: #f4f7fc;
}
/* Crop the original artwork in layout only; never recreate the wordmark as text. */
.brand-art {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 168px;
  aspect-ratio: 1210 / 250;
  overflow: hidden;
  mix-blend-mode: lighten;
}
.brand-art img {
  position: absolute;
  width: 119.669422%;
  max-width: none;
  height: auto;
  left: -9.834711%;
  top: -164%;
}
.brand-page {
  display: inline-flex;
  margin-bottom: 18px;
}
body:has(.cb-wrap, .confirm-wrap) > .brand-page {
  position: absolute;
  top: 22px;
  left: 24px;
}
@media (max-width: 480px) {
  .brand-art { width: 144px; }
  body:has(.cb-wrap, .confirm-wrap) > .brand-page { top: 16px; left: 16px; }
}
.avatar-initial,
.menu-avatar,
.account-avatar,
.profile-photo,
.social-row .account-avatar {
  background: #2e4363;
  color: #e8f0ff;
  border-color: #587398;
}
.glass-card,
.account-card,
.precall-card,
.metric,
.report,
.user-row,
.deleted-row,
.audit-row,
.detail-card,
.legal-main,
.waiting-app > main {
  background: #1b2430;
  border-color: var(--brand-line);
  box-shadow: none;
}
.dialog-card {
  background: var(--dialog-bg);
  color: var(--overlay-ink, currentColor);
  border-color: var(--line);
  box-shadow: var(--overlay-shadow, none);
}
.glass-card {
  border-radius: var(--radius-lg);
  backdrop-filter: none;
}
.account-card {
  border-radius: var(--radius-md);
}
.auth-card,
.ps-card {
  border-top: 1px solid var(--line);
}
.auth-title {
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 20px;
}
.personal-card,
.social-layout > .account-card:first-child {
  background: var(--surface);
  border-color: var(--line);
}
.device-shortcut,
.profile-preview {
  background: transparent;
  border-color: var(--line);
}
.device-shortcut {
  background: var(--control-quiet-bg);
  box-shadow: var(--control-shadow);
}
.shortcut-icon,
.precall-icon {
  background: transparent;
  color: var(--accent-soft);
}
.account-heading h1,
.social-head-body h1 {
  color: var(--text);
  font-weight: 600;
}
.card-heading h2 i {
  color: var(--brand-accent-soft);
}
.settings-group h4 i {
  color: var(--heading-icon, var(--brand-accent-soft));
}
.interest-list span {
  background: #ffffff05;
  border-color: var(--line);
  color: var(--muted);
}
.interest-options button {
  background: #222e3f;
  border-color: #44546a;
  color: #d4deec;
}
.interest-options button[aria-pressed="true"] {
  background: #2c4772;
  border-color: #779fe8;
  color: #edf4ff;
}
.account-nav a,
.main-navigation a,
.main-navigation button {
  color: var(--nav-ink, #c8d3e1);
}
.account-nav a i,
.main-navigation i,
.menu-group > button i {
  color: var(--nav-icon, #99b3d8);
}
.account-nav a[aria-current] i {
  color: var(--nav-current-icon, #99b3d8);
}
.account-nav a[aria-current],
.main-navigation .active {
  background: #263c60;
  color: #eaf2ff;
  border-color: #587db7;
  box-shadow: inset 3px 0 #81aaff;
}
.account-nav a:hover,
.main-navigation a:hover,
.main-navigation button:hover {
  background: var(--nav-hover-bg, #28384e);
}
.tabs {
  background: #121a26;
  border: 1px solid var(--brand-line);
}
.tabs button.active {
  background: #354964;
  color: #fff;
  box-shadow: none;
}
.count-badge {
  background: #304869;
  color: #dceaff;
}
.social-stat { background: transparent; border-color: var(--stat-edge, transparent); color: var(--stat-ink, currentColor); }
.social-stat[aria-pressed="true"] { background: #ffffff06; border-color: var(--stat-edge, var(--accent-soft)); }
.social-stat b {
  color: #eaf1ff;
}
.social-stat span {
  color: #bbc9dc;
}
.social-row {
  border-bottom-color: var(--brand-line);
}
.social-row:hover {
  background: #ffffff04;
}
.menu-panel,
body #connectly-language-dialog {
  background: var(--popover-bg);
  border-color: var(--popover-edge);
}
/* The country picker keeps the default palette in dark worlds (scoped surface). */
.country-picker {
  --surface: var(--popover-bg);
  --line: var(--popover-edge);
  background: var(--surface);
  border-color: var(--line);
}
.menu-country {
  background: transparent;
  border-color: var(--line);
  border-radius: var(--radius-sm);
}
.control-dock {
  background: #1b2738;
  border-top-color: #4a6385;
}
.country-trigger {
  background: #2a3b52;
  border-color: var(--field-line);
}
.match-status {
  background: #202e40;
  border-color: #405570;
  color: #cbd9eb;
}
.control-button:not(.off):not(.control-stop):not(.control-next) {
  color: var(--control-ink);
}
/* An open chat marks its dock button; scenes may tint it via --chat-open-*. */
.camera-app .view-cluster .chat-trigger[aria-expanded="true"] { background: var(--chat-open-bg, var(--selected-bg)); color: var(--chat-open-ink, var(--control-ink)); }
.mobile-controls .control-button:not(.off) {
  background: #2a3a50;
}
.mobile-controls .control-button:not(.off):hover {
  background: #354d6c;
}
.mobile-controls .layout-control.active {
  background: #355583;
  box-shadow: inset 0 0 0 1px #81aaff;
}
.precall-lobby {
  background: #11172026;
}
.precall-card {
  background: #192536f5;
  border-color: #5a7395;
  backdrop-filter: none;
}
.precall-flip {
  background: #27384e;
  border-color: #516a8c;
}
.call-chat {
  background: #172333f5;
  border-color: #536c8e;
}
.call-chat-message {
  background: #2a384b;
}
.call-chat-message.own {
  background: #284e83;
}
.panel input[type="email"],
.panel input[type="text"],
.panel input[type="password"],
.ps-card input[type="text"],
.ps-card input[type="date"],
.ps-card select,
.profile-editor textarea,
.custom-interest-field input,
.social-search input {
  background: var(--field-bg);
  border-color: var(--field-line);
  /* Stays light: auth/setup fields keep their dark fill in every world. */
  color: #f4f7fc;
}
.oauth-btn {
  background: transparent;
  border-color: #465b77;
}
#connectly-language-dialog .language-list button[aria-pressed="true"] {
  background: var(--lang-selected-bg, #293e61);
  border-color: var(--lang-selected-edge, #5b80bb);
  color: var(--lang-selected-ink, #e3edff);
}
#connectly-language-dialog .language-check {
  color: var(--lang-check, var(--brand-accent-soft));
}
/* i18n injects language.css after page load; scope overrides intentionally. */
body #connectly-language-dialog h2 { font-weight: 600; }
body #connectly-language-dialog .language-search { background: var(--field-bg); border-color: var(--control-quiet-edge); }
body #connectly-language-dialog .language-search:focus-within { border-color: var(--accent-soft); }
body #connectly-language-dialog button:focus-visible,
.connectly-language-picker #connectly-language-trigger:focus-visible { outline-color: var(--focus-ring); }
/* Solid blue actions with readable white labels; no decorative halo. */
.primary-button,
.install-app-button,
.next-button,
.precall-start,
.precall-start:hover:not(:disabled),
.control-next i,
.control-next:hover:not(:disabled) i,
.social-btn.primary,
.stream-shield button.primary,
.call-friend-request-actions .accept,
.split-order button[aria-pressed="true"],
.video-stage > .chat-trigger,
.video-stage > .chat-trigger[aria-expanded="true"],
.call-chat-form button,
.waiting-app #check-access,
.cb-actions a,
.confirm-mark {
  background: var(--brand-accent);
  color: var(--brand-on-accent);
  box-shadow: none;
  border-color: #648fe2;
}
.primary-button:hover:not(:disabled),
.install-app-button:hover,
.precall-start:hover:not(:disabled),
.control-next:hover:not(:disabled) i,
.social-btn.primary:hover:not(:disabled) {
  background: #285abf;
  color: var(--brand-on-accent);
  filter: none;
}
.camera-zoom-presets button[aria-pressed="true"] {
  background: var(--brand-accent);
  color: var(--brand-on-accent);
}
.level-fill {
  background: #719de9;
}
.cosmetic-option.active {
  background: #293e61;
  border-color: #719de9;
}
body[data-cosmetic-color="standard"] {
  --cosmetic-accent: #719de9;
}
.account-bar > a,
.eyebrow,
.link-button,
.account-kicker,
.profile-preview > small {
  color: var(--brand-accent-soft);
}

.quiet-button,
.social-btn:not(.primary):not(.danger) {
  background: var(--button-bg, #ffffff05);
  border-color: var(--button-edge, #40516a);
  color: var(--button-ink, #e3edfa);
}
.icon-button,
.social-mini:not(.danger):not(.primary) {
  background: #ffffff05;
  border-color: #40516a;
  color: #e3edfa;
}
/* One clear main action per contact row (add friend, accept, invite). */
.social-mini.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.social-mini.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
/* Weight 800 falls back to a mismatched face on some systems; 700 renders cleanly. */
.install-app-button { font-weight: 700; }
.quiet-button:hover:not(:disabled),
.icon-button:hover:not(:disabled) {
  background: #344b6b;
  border-color: #7196cf;
}

/* Shared hierarchy: one surface per section; rows inside it stay lightweight. */
.auth-title, .ps-card h1, .confirm-card h1, .cb-card h1,
.waiting-app h1, .commerce h1, .legal-main h1, .admin h1 {
  font-weight: 600;
  letter-spacing: -.7px;
  line-height: 1.2;
}
.card-heading h2, .commerce h2, .legal-main h2, .admin h2,
.inbox-dialog h2, .dialog-card h2 { font-weight: 600; }
.primary-button, .oauth-btn, .tabs button { font-weight: 600; }
.primary-button:hover { transform: none; }
.auth-card label, .ps-card label { font-weight: 500; }
.panel input, .ps-card input, .ps-card select { font-weight: 400; }
.auth-card, .ps-card { box-shadow: 0 12px 40px #00000018; }
.with-global-header .auth-wrap, .with-global-header .ps-wrap,
.with-global-header .cb-wrap, .with-global-header .confirm-wrap {
  min-height: calc(100svh - max(80px, calc(64px + env(safe-area-inset-top))));
  padding-top: 24px;
}
.cb-actions a { font-weight: 600; }
.confirm-mark { border-radius: 50%; background: #a5c3ff10; color: var(--accent-soft); }
.confirm-card:has(.confirm-error) .confirm-mark { color: #ffb1b8; background: #ffb1b80a; }

/* Device controls use the same neutral rows as the pre-call check. */
.settings-group select, .password-form input, .block-search input,
.profile-app .compact-field select, .obs-connection-grid input,
.obs-scene-grid select, .stream-hotkey-grid input {
  background-color: var(--field-bg);
  border-color: var(--field-line);
  color: var(--text);
  font-weight: 400;
}
.settings-choice, .profile-app .settings-choice {
  min-height: 60px;
  margin-top: 4px;
  border-color: var(--row-edge, transparent);
  background: var(--row-bg, transparent);
  border-radius: var(--radius-sm);
}
.settings-choice:has(input:checked) {
  background: var(--choice-bg, #a5c3ff0b);
  border-color: var(--choice-edge, #607da3);
}
.settings-choice:has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.profile-app .settings-visibility { padding: 0; border: 0; background: transparent; }
.profile-app .settings-visibility legend { padding: 0; margin-bottom: 8px; color: var(--muted); font-weight: 500; }
.settings-group h4 { font-weight: 600; }
.settings-row-link { background: var(--row-bg, transparent); border-color: var(--row-edge, transparent); border-bottom-color: var(--row-edge, var(--line)); border-radius: 0; }
.settings-row-link:hover { background: var(--hover-bg); }
.settings-stack { gap: 10px; }
.settings-stack .device-shortcut { padding: 18px 22px; min-height: 62px; gap: 10px; }
.settings-stack .shortcut-icon { width: 22px; height: 24px; font-size: 20px; }
.status-badge, .status-badge.active, #streaming-live-state.active, #obs-status.active {
  border-color: var(--badge-edge, transparent);
  background: transparent;
  padding: 4px 0;
  font-size: 11px;
}
.streaming-provider, .streaming-provider.is-linked, .session-row {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 0;
  background: transparent;
}
.streaming-provider.is-linked .provider-account { color: #93f0c9; }
.profile-preview { border-style: solid; border-width: 1px 0 0; border-radius: 0; padding: 20px 0 0; }

/* Numbers form one readable strip, instead of a stack of miniature cards. */
.level-emblem { border: 0; background: transparent; border-radius: 0; flex-basis: 88px; min-height: 110px; }
.level-emblem strong { font-weight: 600; }
.progress-hero .level-track { height: 7px; border: 0; }
.progress-summary { gap: 0; padding-top: 18px; border-top: 1px solid var(--line); }
.progress-summary > div { background: transparent; border-radius: 0; padding: 0 16px; }
.progress-summary > div:first-child { padding-left: 0; }
.progress-summary > div + div { border-left: 1px solid var(--line); }
.progress-summary strong { font-weight: 600; }
.task-grid { gap: 0 22px; }
.task-grid .milestone-row { padding: 18px 0; border-width: 0 0 1px; border-radius: 0; background: transparent; }
.task-grid .milestone-body strong { font-weight: 550; }
.task-filters { margin-top: 18px; }
.task-filters button, .social-tab {
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  box-shadow: none;
}
.task-filters button[aria-pressed="true"], .social-tab[aria-selected="true"] {
  background: transparent;
  color: var(--text);
  border-color: var(--accent-soft);
  box-shadow: none;
}
.social-tab { background: var(--button-bg, transparent); border-color: var(--button-edge, transparent); }
.social-tab[aria-selected="true"] { background: var(--button-bg, transparent); border-color: var(--button-edge, var(--accent-soft)); }
.count-badge { background: #ffffff0b; color: var(--muted); }
.social-tabs { gap: 2px 6px; margin-top: 14px; border-bottom: 1px solid var(--line); }
.social-layout #hub-view > .account-card + .account-card,
.social-layout #profile-view > .account-card + .account-card { margin-top: 20px; }
.social-search { margin-top: 14px; }
.social-row-name { font-weight: 550; }
.social-stats { gap: 0; border-block: 1px solid var(--line); padding: 8px 0; }
.social-stat { flex-basis: 0; padding: 10px; border-radius: 0; }
.social-stat + .social-stat { border-left-color: var(--line); }
.social-stat:hover { background: #ffffff08; border-color: var(--stat-edge, var(--accent-soft)); }
.social-rel-pill.friends { background: transparent; border-color: transparent; padding-left: 0; }

/* Bring the remaining standalone surfaces into the shared navy palette. */
.commerce .card, .commerce .creator-confirm,
.admin-section, .user-details-head, #user-details-dialog,
#password-reset-dialog, #username-dialog, #owner-ban-dialog {
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--radius-md);
}
.inbox-dialog { background: var(--dialog-bg); color: var(--text); border-color: var(--line); border-radius: var(--radius-md); box-shadow: var(--overlay-shadow, none); }
.commerce h1 { font-size: clamp(28px, 4vw, 36px); }
.commerce h2 { font-size: 21px; margin: 0 0 18px; }
.commerce .price { font-size: 32px; font-weight: 600; margin: 18px 0; }
.commerce .support { padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); }
.commerce button:not(.primary):not(.action-success):not(.action-danger):not(.action-warning) { background: transparent; border-color: #40516a; }
.inbox-dialog button { background: transparent; border-color: var(--control-quiet-edge); }
.commerce button, .inbox-dialog button { min-height: 44px; }
.commerce .primary { background: var(--accent); border-color: var(--accent); }
.commerce input { background: #141e2a; border-color: var(--field-line); }
.commerce .status:empty, .inbox-dialog > p:empty { display: none; }
.inbox-dialog header { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.inbox-dialog h2 { font-size: 22px; }
.inbox-entry a { font-size: 14px; font-weight: 550; text-decoration: none; }
.inbox-entry a:hover { text-decoration: underline; }
.inbox-entry p { font-size: 13px; }
.inbox-entry .inbox-delete { border-color: transparent; color: #ffb1b8; }
.inbox-entry .inbox-delete:hover { background: #ffb1b80a; border-color: #713946; }
.admin-section > summary::after { border-color: var(--muted); }
.admin .metric { border-radius: var(--radius-md); }
.admin .metric strong { font-weight: 600; }
.admin .user-filters, .admin .ai-detail { background: #141e2a; border-color: var(--line); border-radius: var(--radius-sm); }
.admin .user-row, .admin .deleted-row, .admin .audit-row { border-width: 0 0 1px; border-radius: 0; background: transparent; }
.admin .action { min-height: 36px; background: transparent; }
.admin .action.active { background: #a5c3ff12; border-color: var(--accent-soft); }
.admin .action.delete { background: #ff627712; }
.legal-main { background: transparent; border: 0; box-shadow: none; padding-top: 20px; }
.legal-note { background: transparent; border-left-color: var(--accent-soft); border-radius: 0; }
.legal-date { color: var(--muted); }
.legal-header .legal-brand { display: none; }
.legal-header { justify-content: flex-end; padding-block: 18px 0; }
.waiting-app > main { border-radius: var(--radius-lg); }
.waiting-app.with-global-header > main > .brand,
.with-global-header main:has(#ban-duration) > .brand { display: none; }
.with-global-header main:has(#ban-duration) h1 { margin-top: 0; }
.waiting-app #waiting-status:empty, #ban-status:empty, #ban-pay-status:empty { display: none; }
.with-global-header main:has(#ban-duration) { border-radius: var(--radius-lg); }
.with-global-header main:has(#ban-duration) h1 { font-weight: 600; }
.with-global-header main:has(#ban-duration) .details { padding: 16px 0; border-width: 1px 0; border-radius: 0; }

@media (max-width: 650px) {
  .progress-summary > div { padding: 0 10px; }
  .progress-summary strong { font-size: 20px; }
  .progress-summary span { font-size: 12px; }
  .social-stats { flex-direction: row; }
  .social-stat { padding: 10px 6px; }
  .inbox-dialog { padding: 18px; }
  .inbox-dialog h2 { font-size: 20px; }
}

/* Blue identity with distinct surface levels, quiet controls and clear headings. */
.topbar, .topbar.global-topbar { background: #141b25; border-bottom: 1px solid #2d394b; }
.brand-art { isolation: isolate; }
.account-heading h1, .auth-title, .ps-card h1, .confirm-card h1, .cb-card h1,
.commerce > h1, .legal-main h1, .waiting-app h1 {
  font-family: inherit; font-weight: 650; letter-spacing: -.03em;
  font-size: clamp(30px,3.4vw,42px); line-height: 1.12; text-wrap: balance;
}
.account-heading { padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.account-nav a, .profile-app .account-nav a[aria-current="page"] { border-radius: var(--radius-xs); }
.profile-app .account-nav a[aria-current="page"] { background: var(--nav-current-bg, #223753); color: var(--nav-current-ink, #e9f1ff); border-color: transparent; box-shadow: inset 2px 0 #6ca3ff; }
.account-card { border-radius: var(--radius-md); }
.profile-app .personal-card { border-radius: var(--radius-md); border: 1px solid #40536c; background: #202c3c; }
.profile-app .personal-summary h3 { font-weight: 550; letter-spacing: -.6px; }
.profile-app .profile-photo, .social-app .profile-photo { border-radius: 24%; border-color: #6b86a8; }
.profile-app #profile-photo[data-photo="missing"] { position: relative; cursor: pointer; border-style: dashed; }
.profile-app #profile-photo[data-photo="missing"]::after {
  content: "\e10e"; font-family: "Phosphor"; position: absolute; inset: auto 0 0; padding: 3px 0 4px;
  font-size: 15px; text-align: center; color: var(--on-accent); background: var(--accent); opacity: .9;
}
.profile-app #profile-photo[data-photo="missing"]:hover::after { background: var(--brand-accent); opacity: 1; }
.profile-app .personal-summary p, .social-bio { color: #c7d2e0; }
.profile-share { border-top-color: #40536c; }
.interest-list span { border-radius: var(--radius-sm); }
.personal-card .profile-share input, #account-names input, #names-fields input { background: var(--field-bg); border-color: var(--field-line); }
.account-card .card-heading h2 { font-size: 18px; letter-spacing: -.3px; }
.auth-card, .ps-card { border-radius: var(--radius-md); border-top: 3px solid #5284d8; }
.auth-card .auth-title { margin-bottom: 12px; }
.auth-card .tabs { padding: 3px; border-radius: var(--radius-sm); }
.auth-card .tabs button { border-radius: var(--radius-xs); }
.primary-button, .social-btn.primary, .commerce .primary { color: var(--on-accent); background: var(--accent); border-color: var(--accent); border-radius: var(--radius-sm); text-decoration: none; }
.primary-button:hover:not(:disabled), .social-btn.primary:hover:not(:disabled), .commerce .primary:hover:not(:disabled) { color: var(--on-accent); background: var(--accent-hover); border-color: var(--accent-hover); filter: var(--hover-filter, none); }
body .connectly-language-picker #connectly-language-trigger { background: var(--control-quiet-bg); border-color: var(--control-quiet-edge); color: var(--control-quiet-ink, #ede0dc); }
body .inbox-open { background: transparent; }
.camera-app .precall-lobby { background: #10172250; }
.camera-app .precall-card { background: #1c293bf5; border-color: #506583; border-radius: var(--radius-md); box-shadow: 0 16px 48px #0004; }
.camera-app .precall-card h2 { font-family: inherit; font-weight: 650; font-size: 28px; color: var(--text); letter-spacing: -.6px; }
.camera-app .precall-eyebrow { color: var(--precall-note, #aabbcf); }
.camera-app .precall-card .precall-check { border-color: var(--divider); }
.camera-app .precall-check > i { color: var(--precall-icon, var(--control-icon)); }
.camera-app .precall-check strong { color: var(--precall-strong, #e9f0fa); }
.camera-app .precall-check:not(.is-off) small { color: var(--precall-note, #b5c3d4); }
.camera-app .precall-device-control { background-color: var(--field-bg); color: var(--precall-ink, #d8e1ef); border-color: var(--control-quiet-edge); }
.camera-app .precall-device-control:hover { border-color: var(--control-hover-edge); }
.camera-app .precall-device-control:focus-visible, .camera-app .precall-start:focus-visible { outline-color: var(--focus-ring); }
.camera-app .precall-flip { color: var(--precall-ink, #d8e1ef); border-color: var(--control-quiet-edge); background: var(--control-quiet-bg); }
.camera-app .precall-start { background: var(--accent); color: var(--on-accent); }
.camera-app .precall-start:hover:not(:disabled) { background: var(--accent-hover); color: var(--on-accent); filter: var(--hover-filter, none); }
.camera-app .precall-meter { background: repeating-linear-gradient(to right,#405370 0 4px,transparent 4px 7px); }
.control-dock { box-shadow: none; }
.country-trigger { background: transparent; border-color: var(--field-line); }
.match-status { background: transparent; border-color: transparent; color: #c4d0df; }
.call-chat-form input { background: #141d29; border-color: var(--field-line); }
#progress-panel .journey-level { background: #1d4071; border: 1px solid #3a6093; border-radius: var(--radius-md); }
.journey-level .level-emblem strong { font-family: inherit; font-weight: 700; }
.journey-level .progress-summary { border-color: #ffffff24; }
.conversation-goals .card-heading h2 { font-size: clamp(23px,3vw,29px); font-weight: 550; }
.conversation-goals .task-filters { background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 0 0 6px; border-radius: 0; gap: 4px; }
.conversation-goals .task-filters button { border-radius: var(--radius-xs); color: #b5c0ce; }
.conversation-goals .task-filters button[aria-pressed="true"] { background: #243e60; color: #e9f1ff; }
.goals-action .primary-button { border-radius: var(--radius-sm); }
.social-tabs { margin-bottom: 24px; }
.social-search { background: transparent; }
.public-profile-card { border-top: 3px solid #6b8db7; }
.commerce #creator-offer { border-top: 3px solid #5284d8; }
.commerce #creator-offer .price { font-family: inherit; font-weight: 700; font-size: 44px; color: #e6efff; }
.commerce #creator-offer .price small { font-family: inherit; font-size: 16px; color: #b5c0ce; }
.legal-main { max-width: 820px; }
.legal-main p, .legal-main li { line-height: 1.85; }
@media (max-width: 650px) {
  .account-heading { margin-bottom: 20px; padding-bottom: 18px; }
  .account-heading h1 { font-size: 32px; }
  #progress-panel .journey-level { border-radius: var(--radius-md); }
  .camera-app .precall-card h2 { font-size: 26px; }
  .conversation-goals .task-filters { gap: 2px; }
}
@media (max-height: 500px) and (orientation: landscape) { .camera-app .precall-card h2 { font-size: 22px; } }
.global-header-actions .avatar-initial, .global-menu-dialog .menu-avatar { background: var(--avatar-bg, #30445f); color: var(--avatar-ink, #e9f1ff); box-shadow: var(--avatar-ring, none); }
.global-menu-dialog, .global-menu-dialog .menu-panel { background: #202c3c; color: var(--text); border-color: #40536c; }
.global-menu-dialog .menu-identity small, .global-header-actions .global-menu-trigger > i { color: var(--muted); }
.global-menu-dialog .dialog-close { background: #303e51; }
.global-menu-dialog .main-navigation a, .global-menu-dialog .main-navigation button, .global-menu-dialog .menu-login { color: #d1dceb; border-radius: var(--radius-xs); }
.global-menu-dialog .main-navigation i, .global-menu-dialog .menu-login i { color: var(--login-icon, #aabbcf); }
.global-menu-dialog .main-navigation a:hover, .global-menu-dialog .main-navigation button:hover, .global-menu-dialog .menu-login:hover { background: #2c405c; }
.global-menu-dialog .main-navigation .active { background: #243e60; color: #e9f1ff; box-shadow: inset 2px 0 #6ca3ff; }
.global-menu-dialog :focus-visible, .global-menu-trigger:focus-visible { outline-color: var(--focus-ring); }
.inbox-badge { background: var(--brand-accent); color: var(--brand-on-accent); }
.inbox-entry { border-color: var(--line); }
.inbox-entry a { color: var(--brand-accent-soft); }
body.creator-body { background: var(--bg); color: var(--text); }

/* Camera workspace: a quiet meeting surface and a purposeful control bar. */
.camera-app .video-stage { background: #111923; }
.camera-app .video-stage.layout-split:not(.has-remote) .remote-card { background: #141e2b; }
.camera-app .video-stage:not(.has-remote) .remote-state {
  background: transparent; color: #e4edf9; pointer-events: none;
}
.camera-app .remote-state h2 { font-size: 19px; line-height: 1.35; font-weight: 550; letter-spacing: -.4px; margin: 24px 0 9px; }
.camera-app .remote-state p { max-width: 310px; font-size: 13px; line-height: 1.65; color: #a5b5ca; text-wrap: balance; }
.camera-app .remote-state .retry-camera { pointer-events: auto; }
.camera-app .search-scene { display: flex; flex-direction: column; gap: 13px; width: 220px; max-width: 65%; }
.camera-app .search-scene span { display: flex; justify-content: center; gap: 10px; height: 2px; }
.camera-app .search-scene span::before, .camera-app .search-scene span::after { content: ""; width: 78px; height: 2px; border-radius: 2px; background: #4d6c94; opacity: .55; transform: translateX(-15px); }
.camera-app .search-scene span::after { transform: translateX(15px); background: #7399ca; }
.camera-app .search-scene span:nth-child(2), .camera-app .search-scene span:nth-child(5) { width: 75%; align-self: center; }
.camera-app .search-scene span:nth-child(3), .camera-app .search-scene span:nth-child(4) { width: 50%; align-self: center; }
.camera-app[data-chat-state="searching"] .search-scene span::before { animation: connection-lines-left 4.8s ease-in-out infinite; }
.camera-app[data-chat-state="searching"] .search-scene span::after { animation: connection-lines-right 4.8s ease-in-out infinite; }
.camera-app .search-scene span:nth-child(2)::before, .camera-app .search-scene span:nth-child(2)::after { animation-delay: -.4s; }
.camera-app .search-scene span:nth-child(3)::before, .camera-app .search-scene span:nth-child(3)::after { animation-delay: -.8s; }
.camera-app .search-scene span:nth-child(4)::before, .camera-app .search-scene span:nth-child(4)::after { animation-delay: -1.2s; }
.camera-app .search-scene span:nth-child(5)::before, .camera-app .search-scene span:nth-child(5)::after { animation-delay: -1.6s; }
.camera-app .search-scene span:nth-child(6)::before, .camera-app .search-scene span:nth-child(6)::after { animation-delay: -2s; }
@keyframes connection-lines-left { 0%,100% { transform: translateX(-24px); opacity: .3; } 45%,60% { transform: translateX(4px); opacity: .85; } }
@keyframes connection-lines-right { 0%,100% { transform: translateX(24px); opacity: .3; } 45%,60% { transform: translateX(-4px); opacity: .85; } }
.camera-app[data-chat-state="error"] .search-scene { display: none; }
.camera-app .video-stage:has(.precall-lobby:not([hidden])) .remote-state { visibility: hidden; }
.camera-app .video-stage.layout-split.camera-ready:not(.has-remote) .remote-state,
.camera-app[data-chat-state="searching"] .video-stage.camera-ready:not(.has-remote) .remote-state { display: flex; justify-content: center; padding: 24px; }
.camera-app[data-chat-state="searching"] .video-stage:not(.has-remote) .remote-state {
  background-color: #141e2b;
  background-image: repeating-linear-gradient(90deg,transparent 0 79px,#9ebee805 79px 80px);
}
/* Keep a small self-preview while looking for a peer in a non-split layout. */
.camera-app[data-chat-state="searching"] .video-stage:not(.has-remote):not(.layout-split) .local-card {
  z-index: 4; inset: auto 18px 18px auto; width: clamp(120px,20vw,260px); height: auto; aspect-ratio: 16 / 10;
  border: 1px solid #536983; border-radius: var(--radius-md); box-shadow: none;
}
.camera-app[data-chat-state="searching"] .video-stage.layout-self-hidden:not(.has-remote) .local-card { display: none; }
.camera-app .video-stage.has-remote .search-scene { display: none; }

.camera-app:not([data-chat-state="searching"]) .video-stage.camera-ready:not(.has-remote):not(.layout-split) .search-scene { display: none; }
.camera-app .control-dock { background: #141c28; border-top: 1px solid #34445a; }
.camera-app .country-trigger { border-radius: var(--radius-sm); background: var(--control-bg); border-color: var(--control-edge); font-weight: 500; }
.camera-app .status-spinner { width: 7px; height: 7px; flex-basis: 7px; border: 0; background: #71839a; box-shadow: none; animation: none; }
.camera-app[data-chat-state="searching"] .status-spinner { background: #8ab8ff; animation: search-status 2s ease-in-out infinite; }
.camera-app[data-chat-state="connected"] .status-spinner { background: var(--green); box-shadow: none; }
@keyframes search-status { 50% { opacity: .4; } }
.camera-app .match-status { gap: 8px; color: #aebdd0; }
@media (min-width: 851px) {
  .camera-app .control-dock { padding: 10px 18px; gap: 16px; }
  .camera-app .match-strip { grid-template-columns: minmax(0,1fr); gap: 5px; max-width: 220px; }
  .camera-app .match-status { height: auto; min-height: 16px; padding: 0 2px; font-size: 12px; }
  .camera-app .country-trigger { height: 38px; }
  .camera-app .call-cluster { gap: 8px; }
  .camera-app .control-button { justify-content: center; width: 48px; height: 52px; padding: 0; gap: 5px; border-radius: var(--radius-sm); }
  .camera-app .control-button i { width: 32px; height: 30px; border-radius: var(--radius-sm); font-size: 21px; }
  .camera-app .control-button span { font-size: 12px; letter-spacing: 0; }
  .camera-app .control-button:hover:not(:disabled) { background: var(--control-raised); }
  .camera-app .control-button:hover:not(:disabled) i { background: transparent; transform: none; box-shadow: none; }
  .camera-app .control-button.off { background: var(--danger-bg); }
  .camera-app .control-button.off i { background: transparent; }
  .camera-app .call-cluster .control-stop, .camera-app .call-cluster .control-next { flex-direction: row; width: 94px; height: 44px; gap: 7px; padding: 0 12px; border: 1px solid #476184; }
  .camera-app .call-cluster .control-stop { margin-left: 8px; background: var(--stop-bg, var(--control-bg)); color: var(--stop-ink, #d7e1ef); border-color: var(--stop-edge, #476184); }
  .camera-app .call-cluster .control-next { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .camera-app .call-cluster .control-next:hover:not(:disabled) { background: var(--accent-hover); filter: var(--hover-filter, none); }
  .camera-app .call-cluster .control-stop:hover:not(:disabled) { background: var(--stop-hover-bg, #382a35); border-color: var(--stop-hover-edge, #b57786); }
  .camera-app .control-stop i, .camera-app .control-next i, .camera-app .control-stop:hover:not(:disabled) i, .camera-app .control-next:hover:not(:disabled) i { width: 20px; height: 22px; color: inherit; font-size: 19px; background: transparent; box-shadow: none; transform: none; }
  .camera-app .control-stop span, .camera-app .control-next span { font-size: 12px; font-weight: 600; }
  .camera-app .control-button:disabled { opacity: var(--disabled-opacity, .38); }
  .camera-app .view-cluster { gap: 2px; padding-left: 12px; border-left: 1px solid var(--divider); }
  .camera-app .view-cluster .chat-trigger { border-radius: var(--radius-sm); }
}
@media (min-width: 851px) and (max-width: 1100px) {
  .camera-app .control-dock { gap: 10px; padding-inline: 12px; }
  .camera-app .call-cluster { gap: 4px; }
  .camera-app .call-cluster .control-stop, .camera-app .call-cluster .control-next { width: 82px; padding-inline: 8px; }
  .camera-app .view-cluster { padding-left: 6px; gap: 0; }
  .camera-app .view-cluster .control-button { width: 44px; }
}
@media (max-width: 850px) {
  .camera-app .mobile-controls .control-button:not(.off) { background: var(--control-raised); border: 1px solid var(--dock-edge, #3a4d68); border-radius: var(--radius-sm); }
  .camera-app .video-stage > .chat-trigger { background: var(--chat-trigger-bg, var(--control-raised)); color: var(--chat-trigger-ink, #e6efff); border-color: var(--chat-trigger-edge, #597291); border-radius: var(--radius-sm); box-shadow: var(--raised-shadow, none); }
  .camera-app .remote-state h2 { font-size: 16px; margin-top: 18px; }
  .camera-app .remote-state p { font-size: 12px; }
  .camera-app .search-scene { width: 170px; gap: 9px; }
  .camera-app[data-chat-state="searching"] .video-stage:not(.has-remote):not(.layout-split) .local-card { bottom: 72px; right: 12px; }
}
@media (max-height: 500px) {
  .camera-app .search-scene { gap: 6px; width: 140px; }
  .camera-app .remote-state h2 { margin-top: 12px; font-size: 15px; }
  .camera-app .remote-state p { font-size: 12px; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
  .camera-app .search-scene span::before, .camera-app .search-scene span::after, .camera-app .status-spinner { animation: none; }
}

/* Conversation chat: neutral received messages, blue sent messages, one composer. */
.camera-app .call-chat { --surface: #151d28; --surface-2: #293340; --line: #374352; --field-bg: #202b39; --field-line: #3a4759; --accent: var(--brand-accent); --accent-soft: #bfd4fa; --accent-hover: #3e79eb; --on-accent: var(--brand-on-accent); --muted: #a4b1c1; background: var(--surface); border-color: var(--line); border-radius: var(--radius-md); box-shadow: var(--popover-shadow, 0 12px 36px #0005); }
.camera-app .call-chat > header { padding: 8px 8px 8px 14px; background: var(--chat-head-bg, #1b2532); border-color: var(--chat-head-edge, #ffffff0d); }
.camera-app .call-chat > header strong { font-size: 14px; font-weight: 650; }
.camera-app .call-chat > header small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.camera-app .call-chat > header button { flex: 0 0 44px; color: var(--chat-head-ink, #b5c1d0); }
.camera-app .call-chat > header button:hover { color: var(--text); background: var(--hover-bg); }
.camera-app .call-chat-messages { padding: 12px; gap: 8px; scrollbar-color: #47576b transparent; }
.camera-app .call-chat-message { max-width: 88%; padding: 9px 12px; border-radius: var(--radius-md); line-height: 1.5; background: var(--surface-2); color: var(--text); }
.camera-app .call-chat-message.remote { border-bottom-left-radius: 4px; }
.camera-app .call-chat-message.own { border-bottom-right-radius: 4px; background: var(--chat-own-bg, #254f88); color: var(--chat-own-ink, #fff); }
.camera-app .call-chat-empty { margin: auto 0; padding: 12px 2px; background: var(--chat-empty-bg, transparent); color: var(--chat-empty-ink, #aebdcd); font-size: 13px; line-height: 1.6; }
.camera-app .call-chat-form { margin: 0 10px 10px; padding: 3px; gap: 2px; background: var(--field-bg); border: 1px solid var(--field-line); border-radius: var(--radius-md); }
.camera-app .call-chat-form:focus-within { border-color: var(--focus-edge, #79a8ed); box-shadow: 0 0 0 2px var(--focus-glow, #3169d824); }
.camera-app .call-chat-form input { background: var(--chat-input-bg, transparent); border: 0; border-radius: var(--radius-sm); padding: 9px 8px; color: var(--text); box-shadow: none; }
.camera-app .call-chat-form input::placeholder { color: var(--text-faint); }
.camera-app .call-chat-form button { border: 0; border-radius: var(--radius-sm); color: var(--on-accent); background: var(--accent); }
.camera-app .call-chat-form button:not(:disabled):hover { background: var(--accent-hover); filter: var(--hover-filter, none); }
.camera-app .chat-trigger.has-unread { color: #b9d4ff; }
.camera-app .chat-trigger.has-unread > i { color: #8fbaff; }
.camera-app .chat-unread { border: 2px solid #151d28; background: #3975e4; color: var(--brand-on-accent); }

/* Shared menus sit near their trigger, with navigation and account separated. */
body .global-menu-dialog { inset: 66px 12px auto auto; margin: 0; width: min(354px, calc(100vw - 24px)); height: auto; max-height: calc(100dvh - 78px); border: 1px solid var(--dialog-edge); border-radius: var(--radius-lg); background: var(--dialog-bg); box-shadow: var(--overlay-shadow, 0 18px 60px #0006); }
body .global-menu-dialog::backdrop { background: #080d1680; backdrop-filter: blur(2px); }
body .global-menu-dialog .menu-panel { padding: 16px; min-height: 0; border: 0; background: transparent; box-shadow: none; }
body .global-menu-dialog .menu-panel > header { gap: 12px; margin: 0 0 14px; padding: 0 0 16px; border-bottom: 1px solid #ffffff12; }
body .global-menu-dialog .menu-avatar { width: 44px; height: 44px; flex-basis: 44px; border: 1px solid #587297; border-radius: var(--radius-md); background: var(--avatar-bg, #293c57); font-size: 18px; }
body .global-menu-dialog .menu-identity strong { font-size: 16px; font-weight: 650; }
body .global-menu-dialog .menu-identity small { font-size: 12px; color: var(--text-faint); }
body .global-menu-dialog .dialog-close { width: 44px; height: 44px; flex-basis: 44px; background: var(--control-quiet-bg); color: #aab9cc; }
body .global-menu-dialog .dialog-close:hover { background: var(--hover-bg); color: var(--text); }
body .global-menu-dialog .main-navigation { gap: 2px; }
body .global-menu-dialog .menu-section-label { margin: 12px 10px 5px; padding: 0; color: var(--menu-label, #8595aa); font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: none; }
body .global-menu-dialog .main-navigation > .menu-section-label:first-child { margin-top: 0; }
body .global-menu-dialog .main-navigation a, body .global-menu-dialog .main-navigation button, body .global-menu-dialog .menu-group > button { min-height: 44px; padding: 10px; gap: 12px; border-radius: var(--radius-sm); font-size: 14px; color: var(--text-soft); }
body .global-menu-dialog .main-navigation i, body .global-menu-dialog .menu-group > button i { width: 22px; font-size: 20px; color: var(--icon); }
body .global-menu-dialog .menu-group > button i { color: #8e9eb3; }
body .global-menu-dialog .main-navigation a:hover, body .global-menu-dialog .main-navigation button:hover, body .global-menu-dialog .menu-group > button:not(:disabled):hover { background: var(--hover-bg); color: var(--text); }
body .global-menu-dialog .main-navigation .active { background: var(--selected-bg); color: var(--selected-ink); box-shadow: var(--selected-mark, none); }
body .global-menu-dialog .main-navigation .active > i { color: var(--selected-icon, #90baff); }
body .global-menu-dialog .menu-group { margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--line-faint); }
body .global-menu-dialog .menu-hint { margin: 12px 10px; color: #93a4b9; font-size: 12px; line-height: 1.5; }
body .global-menu-dialog .menu-country { margin: 0 10px; padding: 12px 0 8px; border-top: 1px solid #ffffff12; }
body .global-menu-dialog .menu-country small { color: #93a4b9; font-size: 12px; }
body .global-menu-dialog .home-country-value { margin-top: 6px; font-size: 12px; }
body .global-menu-dialog .menu-connection { padding: 0 10px 10px; color: #93a4b9; font-size: 12px; }
body .global-menu-dialog .logout-button { margin-top: 12px; border-top: 1px solid var(--line-faint); border-radius: 0; min-height: 44px; padding: 14px 10px 2px; color: var(--logout-ink, #d7a9b0); font-size: 13px; }
body .global-menu-dialog .logout-button > i { color: inherit; }
.camera-app .layout-palette { border-color: var(--dialog-edge); background: var(--dialog-bg); border-radius: var(--radius-lg); backdrop-filter: none; }
.camera-app .layout-options > button { border-color: var(--row-edge, transparent); border-radius: var(--radius-sm); background: transparent; }
.camera-app .layout-options > button:hover { background: var(--hover-bg); border-color: var(--row-hover-edge, transparent); }
.camera-app .layout-options > button[aria-pressed="true"] { background: var(--selected-bg); border-color: var(--selected-edge, #4f78ad); }
.camera-app .layout-options > button > i:first-child { color: var(--layout-icon, #94a7bf); }
.camera-app .layout-options > button[aria-pressed="true"] > i { color: #a5c9ff; }
@media (max-width: 850px) {
  body .global-menu-dialog { inset: calc(56px + env(safe-area-inset-top)) 8px auto auto; width: min(354px, calc(100vw - 16px)); max-height: calc(100dvh - 64px - env(safe-area-inset-top)); border-radius: var(--radius-md); }
  body .global-menu-dialog .menu-panel { padding: 12px; }
  .camera-app .call-chat > header { padding-top: 3px; padding-bottom: 3px; }
  .camera-app .call-chat > header small { font-size: 12px; }
  .camera-app .call-chat-messages { padding: 8px; gap: 6px; }
  .camera-app .call-chat-message { padding: 7px 10px; }
  .camera-app .call-chat-form { margin: 0 8px 8px; }
}
@media (max-height: 500px) {
  body .global-menu-dialog { inset: 8px 8px auto auto; max-height: calc(100dvh - 16px); }
  .camera-app .call-chat > header small { display: none; }
}

body .global-menu-dialog { scrollbar-width: thin; scrollbar-color: #4a596b transparent; }
body .global-menu-dialog .menu-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body .global-menu-dialog .menu-group > p { grid-column: 1 / -1; }
body .global-menu-dialog .menu-group > button { gap: 7px; font-size: 12px; }
body .global-menu-dialog .menu-details { margin: 0 10px; color: #9eafc4; font-size: 12px; }
body .global-menu-dialog .menu-details > summary { color: var(--details-summary, currentColor); min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
body .global-menu-dialog .menu-details > summary::after { content: "+"; margin-left: auto; font-size: 16px; }
body .global-menu-dialog .menu-details[open] > summary::after { content: "−"; }
body .global-menu-dialog .menu-details > summary::-webkit-details-marker { display: none; }
body .global-menu-dialog .menu-details .menu-country { margin: 0; padding-top: 8px; }
body .global-menu-dialog .menu-details .menu-connection { padding-left: 0; }

/* Shared gender symbol (Phosphor icon font, identical on every device) with
   translated accessible labels. One colour for both: no pink/blue coding. */
.gender-icon { display: inline-block; font-size: 20px; font-weight: 400; line-height: 1.2; vertical-align: middle; color: var(--accent-soft); }
.gender-icon[hidden] { display: none; }
/* The symbol alone is ambiguous: show the translated aria-label beside it. */
.section-footnote.gender-icon::after,
.social-row-sub.gender-icon::after {
  content: attr(aria-label); margin-left: 6px; vertical-align: 2px;
  font: 500 13px/1 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--muted);
}
.social-row-sub.gender-icon { font-size: 16px; }
.social-row-sub.gender-icon::after { font-size: 12px; vertical-align: 1px; }