/* Shared Seen appearance themes. Default preserves Seen's original navy look. */
:root {
  --seen-bg: #020617;
  --seen-surface: rgba(15, 23, 42, 0.92);
  --seen-surface-elevated: rgba(30, 41, 59, 0.82);
  --seen-surface-hover: rgba(30, 64, 175, 0.6);
  --seen-text-primary: #e5e7eb;
  --seen-text-secondary: #9ca3af;
  --seen-border: rgba(148, 163, 184, 0.28);
  --seen-divider: rgba(148, 163, 184, 0.22);
  --seen-blue: #2563eb;
  --seen-purple: #8b5cf6;
  --seen-green: #22c55e;
  --seen-gold: #f59e0b;
  --seen-silver: #c7c7cc;
  --seen-danger: #ef4444;
  --seen-blue-soft: rgba(37, 99, 235, 0.16);
  --seen-purple-soft: rgba(139, 92, 246, 0.16);
  --seen-green-soft: rgba(34, 197, 94, 0.14);
  --seen-gold-soft: rgba(245, 158, 11, 0.14);
  --seen-silver-soft: rgba(199, 199, 204, 0.12);
  --seen-map-material: rgba(15, 23, 42, 0.88);
  --seen-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);

  /* Backwards-compatible aliases used by older page styles. */
  --seen-page-bg: var(--seen-bg);
  --seen-page-text: var(--seen-text-primary);
  --seen-surface-soft: rgba(15, 23, 42, 0.74);
  --seen-surface-muted: var(--seen-surface-elevated);
  --seen-muted: var(--seen-text-secondary);
  --seen-accent: var(--seen-blue);
  --seen-accent-soft: var(--seen-blue-soft);
}

html[data-seen-theme-resolved="default"] {
  color-scheme: dark;
}

html[data-seen-theme-resolved="black"] {
  color-scheme: dark;
  --seen-bg: #050505;
  --seen-surface: #171719;
  --seen-surface-elevated: #1c1c1e;
  --seen-surface-hover: #2a2a2e;
  --seen-text-primary: #f5f5f7;
  --seen-text-secondary: #98989f;
  --seen-border: rgba(255, 255, 255, 0.10);
  --seen-divider: rgba(255, 255, 255, 0.10);
  --seen-blue: #4a9eff;
  --seen-purple: #8b7cff;
  --seen-green: #30d158;
  --seen-gold: #ffb340;
  --seen-blue-soft: rgba(74, 158, 255, 0.14);
  --seen-purple-soft: rgba(139, 124, 255, 0.14);
  --seen-green-soft: rgba(48, 209, 88, 0.14);
  --seen-gold-soft: rgba(255, 179, 64, 0.14);
  --seen-surface-soft: rgba(23, 23, 25, 0.88);
  --seen-map-material: rgba(23, 23, 25, 0.88);
  --seen-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  --bg: var(--seen-bg);
  --bg-top: var(--seen-bg);
  --bg-ink: var(--seen-bg);
  --panel: var(--seen-surface);
  --panel2: var(--seen-surface-elevated);
  --panel-bg: rgba(23, 23, 25, 0.88);
  --panel-soft: rgba(23, 23, 25, 0.88);
  --panel-strong: var(--seen-surface-elevated);
  --brand-panel: rgba(23, 23, 25, 0.88);
  --chip-bg: var(--seen-surface-elevated);
  --chipBg: var(--seen-surface-elevated);
  --text: var(--seen-text-primary);
  --text-main: var(--seen-text-primary);
  --text-sub: var(--seen-text-secondary);
  --muted: var(--seen-text-secondary);
  --border: var(--seen-border);
  --line: var(--seen-border);
  --panel-border: var(--seen-border);
  --chip-border: var(--seen-border);
  --accent: var(--seen-blue);
  --accent-strong: var(--seen-blue);
  --accentHover: var(--seen-blue);
  --action: var(--seen-blue);
  --action-hover: var(--seen-blue);
  --good: var(--seen-green);
  --green: var(--seen-green);
  --ok: var(--seen-green);
  --success: var(--seen-green);
  --warn: var(--seen-gold);
  --warning: var(--seen-gold);
  --yellow: var(--seen-gold);
  --danger: var(--seen-danger);
  --nav-bg: rgba(5, 5, 5, 0.94);
  --nav-border: var(--seen-border);
  --nav-link-hover: var(--seen-surface-hover);
  --nav-primary-bg: var(--seen-blue-soft);
  --nav-primary-border: rgba(74, 158, 255, 0.5);
  --nav-gear-bg: rgba(23, 23, 25, 0.98);
  --nav-gear-border: var(--seen-border);
  --nav-gear-shadow: var(--seen-shadow);
  --nav-text: var(--seen-text-primary);
}

html[data-seen-theme-resolved="light"] {
  color-scheme: light;
  --seen-page-bg: #f5f5f7;
  --seen-page-text: #1d1d1f;
  --seen-surface: rgba(255, 255, 255, 0.94);
  --seen-surface-soft: rgba(255, 255, 255, 0.82);
  --seen-surface-muted: rgba(242, 242, 247, 0.9);
  --seen-border: rgba(15, 23, 42, 0.11);
  --seen-muted: #6e6e73;
  --seen-accent: #5b36d6;
  --seen-accent-soft: rgba(91, 54, 214, 0.1);
  --seen-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);

  --text: var(--seen-page-text);
  --muted: var(--seen-muted);
  --panel: var(--seen-surface);
  --panel-soft: var(--seen-surface-soft);
  --border: var(--seen-border);
  --accent: var(--seen-accent);

  --nav-bg: rgba(255, 255, 255, 0.9);
  --nav-border: rgba(15, 23, 42, 0.1);
  --nav-link-hover: rgba(91, 54, 214, 0.08);
  --nav-primary-bg: rgba(91, 54, 214, 0.1);
  --nav-primary-border: rgba(91, 54, 214, 0.18);
  --nav-gear-bg: rgba(255, 255, 255, 0.98);
  --nav-gear-border: rgba(15, 23, 42, 0.12);
  --nav-gear-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
  --nav-text: #1d1d1f;
}

html[data-seen-theme-resolved="light"] body {
  background: var(--seen-page-bg);
  color: var(--seen-page-text);
}

html[data-seen-theme-resolved="light"] :is(
  .card,
  .panel,
  .surface,
  .account-hero,
  .quick-nav,
  .feed-card,
  .post-card,
  .profile-card,
  .grid-card,
  .chat-panel,
  .thread-list,
  .message-composer,
  .modal-card,
  .sheet-card,
  .details-panel,
  .fact,
  .mini-group,
  .plan-card,
  .list-preview,
  .account-feedback
) {
  border-color: var(--seen-border);
  background: var(--seen-surface);
  color: var(--seen-page-text);
  box-shadow: var(--seen-shadow);
}

html[data-seen-theme-resolved="light"] :is(
  h1, h2, h3, h4, h5, h6,
  .title,
  .section-heading h2,
  .fact-value,
  .mini-heading,
  .details-panel summary
) {
  color: var(--seen-page-text);
}

html[data-seen-theme-resolved="light"] :is(
  p,
  .muted,
  .section-copy,
  .account-lead,
  .details-summary-copy,
  .plan-meta,
  .plan-note,
  .fact-label
) {
  color: var(--seen-muted);
}

html[data-seen-theme-resolved="light"] :is(input, textarea, select) {
  border-color: var(--seen-border);
  background: #fff;
  color: var(--seen-page-text);
}

html[data-seen-theme-resolved="light"] :is(.btn.secondary, button.secondary, .quick-link, .pill) {
  border-color: rgba(91, 54, 214, 0.16);
  background-color: var(--seen-accent-soft);
  color: #4824ba;
}

html[data-seen-theme-resolved="light"] .top-nav {
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  backdrop-filter: blur(20px) saturate(1.25);
}

html[data-seen-theme-resolved="light"] :is(.nav-gear-btn, .nav-gear-item) {
  color: #1d1d1f;
}

html[data-seen-theme-resolved="light"] .nav-gear-item:hover {
  background: rgba(91, 54, 214, 0.08);
}

html[data-seen-theme-resolved="light"] .bottom-nav {
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 -12px 36px rgba(15, 23, 42, 0.1);
}

html[data-seen-theme-resolved="light"] .bottom-nav .bn-link {
  border-color: rgba(15, 23, 42, 0.11);
  background: rgba(255, 255, 255, 0.76);
  color: #34343a;
}

html[data-seen-theme-resolved="light"] .bottom-nav .bn-link.active,
html[data-seen-theme-resolved="light"] .bottom-nav .bn-link[aria-current="page"] {
  border-color: rgba(91, 54, 214, 0.25);
  background: #5b36d6;
  color: #fff;
}

/* Cohesive neutral material for the fixed Black appearance. */
html[data-seen-theme-resolved="black"] body {
  background: var(--seen-bg);
  color: var(--seen-page-text);
}

html[data-seen-theme-resolved="black"] body::before,
html[data-seen-theme-resolved="black"] body::after {
  opacity: 0;
}

html[data-seen-theme-resolved="black"] :is(
  .card,
  .panel,
  .surface,
  .account-hero,
  .quick-nav,
  .account-feedback,
  .feed-hero,
  .feed-tabs,
  .feed-now,
  .story-card,
  .post-card,
  .grid-hero,
  .grid-summary-card,
  .grid-discovery-bar,
  .toolbar,
  .profile-hero,
  .profile-view-intro,
  .profile-section,
  .privacy-card,
  .seen-tabs,
  .seen-card,
  .chat-panel,
  .thread-list,
  .thread-item,
  .messages,
  .message-composer,
  .composer,
  .hero-shell,
  .auth-panel,
  .startup-card,
  .install-prompt-card,
  .hero-card,
  .detail-card,
  .unsupported-card,
  .debug-card,
  .modal-card,
  .sheet-card,
  .details-panel,
  .fact,
  .mini-group,
  .plan-card,
  .list-preview
) {
  border-color: var(--seen-border);
  background: var(--seen-surface);
  color: var(--seen-page-text);
  box-shadow: var(--seen-shadow);
}

html[data-seen-theme-resolved="black"] :is(
  .hero-stat,
  .feed-status,
  .tab,
  .events-filters,
  .events-pill,
  .grid-discovery-actions,
  .grid-looking-toggle,
  .grid-filter-chip,
  .toolbar .pill,
  .control,
  #profileView .grid-2 > div,
  #profileView .profile-action-row,
  .profile-bio,
  .profile-upload-queue-item,
  .privacy-callout,
  .msg.them,
  .debug-item,
  .debug-log
) {
  border-color: var(--seen-border);
  background: var(--seen-surface-muted);
  color: var(--seen-page-text);
}

html[data-seen-theme-resolved="black"] .top-nav {
  background: var(--nav-bg);
  border-color: var(--nav-border);
}

html[data-seen-theme-resolved="black"] .bottom-nav {
  border-color: var(--seen-border);
  background: rgba(5, 5, 5, 0.94);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28);
}

html[data-seen-theme-resolved="black"] .bottom-nav .bn-link {
  border-color: transparent;
  background: transparent;
  color: var(--seen-text-secondary);
}

html[data-seen-theme-resolved="black"] .bottom-nav .bn-link:is(.active, [aria-current="page"]) {
  border-color: rgba(74, 158, 255, 0.5);
  background: var(--seen-blue-soft);
  color: var(--seen-blue);
}

html[data-seen-theme-resolved="black"] :is(
  .map-loading-card,
  .map-view-toggle,
  .map-layer-toggle,
  .map-checkin-filter-bar,
  .map-search-area-btn,
  .map-legend-btn,
  .map-nearby-context,
  .map-nearby-card,
  .map-action-menu,
  .map-rail-btn,
  .map-action-hint,
  .map-filters-modal-card,
  #gpsBtn
) {
  border-color: var(--seen-border);
  background: var(--seen-map-material);
  color: var(--seen-text-primary);
  box-shadow: var(--seen-shadow);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

html[data-seen-theme-resolved="black"] .map-action-hint::after {
  border-color: var(--seen-border);
  background: var(--seen-surface);
}

html[data-seen-theme-resolved="black"] .map-action-hint-copy {
  color: var(--seen-text-secondary);
}

html[data-seen-theme-resolved="black"] :is(
  .map-view-toggle,
  .map-layer-toggle
) button {
  color: var(--seen-text-secondary);
}

html[data-seen-theme-resolved="black"] :is(
  .map-view-toggle,
  .map-layer-toggle
) button.is-active {
  background: var(--seen-blue-soft);
  color: var(--seen-blue);
  box-shadow: inset 0 0 0 1px rgba(74, 158, 255, 0.28);
}

html[data-seen-theme-resolved="black"] .map-checkin-filter-bar button {
  color: var(--seen-text-secondary);
}

html[data-seen-theme-resolved="black"] .map-checkin-filter-bar button.is-active {
  background: var(--seen-blue-soft);
  color: var(--seen-blue);
  box-shadow: inset 0 0 0 1px rgba(74, 158, 255, 0.5);
}

html[data-seen-theme-resolved="black"] .map-category-icon {
  background: var(--seen-surface-elevated);
  color: var(--seen-text-primary);
}

html[data-seen-theme-resolved="black"] .map-checkin-filter-bar button.is-active .map-category-icon {
  background: rgba(74, 158, 255, 0.12);
  color: var(--seen-blue);
}

html[data-seen-theme-resolved="black"] :is(
  .map-action-item,
  .map-action-item.is-invite,
  .map-action-item.is-invite.is-live,
  .map-action-item.is-invite.is-locked,
  .map-sheet-filter-button,
  .map-filter-chip
) {
  border-color: var(--seen-border);
  background: var(--seen-surface-elevated);
  color: var(--seen-text-primary);
}

html[data-seen-theme-resolved="black"] :is(
  .map-sheet-toggle-label,
  .map-action-item-label,
  .map-nearby-name,
  .map-nearby-meta
) {
  color: var(--seen-text-primary);
}

html[data-seen-theme-resolved="black"] :is(
  .map-sheet-toggle-meta,
  .map-action-item-value,
  .map-sheet-filter-summary,
  .map-nearby-distance,
  .map-nearby-subline
) {
  color: var(--seen-text-secondary);
}

html[data-seen-theme-resolved="black"] :is(
  .map-rail-tooltip,
  .profile-pop,
  .profile-pop-menu,
  .location-picker-card,
  .onboarding-card,
  .radar-announcement-card,
  .seen-invite-modal-card
) {
  border-color: var(--seen-border);
  background: var(--seen-surface-elevated);
  color: var(--seen-text-primary);
  box-shadow: var(--seen-shadow);
}

/* Shared dark controls and legacy component families. Keep color semantic. */
html[data-seen-theme-resolved="black"] :is(
  .auth-card,
  .admin-workspace-shell,
  .sidebar-card,
  .guard-card,
  .geo-card,
  .health-detail-card,
  .admin-console-board,
  .admin-console-status-panel,
  .admin-console-metrics-panel,
  .admin-console-metric-card,
  .chat-header,
  .chat-find-drawer,
  .feed-modal-card,
  .grid-error-surface,
  .profile-basics-card,
  .profile-upload-queue-card,
  .profile-hero-status,
  .post-comment-thread,
  .post-comment-item,
  .link-card,
  .seen-recap-stat,
  .seen-recap-surface,
  .nav-report-card,
  .nav-safety-card,
  .nav-block-card,
  .nav-switch-card,
  .group-chat-modal,
  .seen-install-help-dialog,
  .modal,
  .how-card,
  .profile-pop,
  .profile-pop-menu
) {
  border-color: var(--seen-border);
  background: var(--seen-surface);
  color: var(--seen-text-primary);
  box-shadow: var(--seen-shadow);
}

html[data-seen-theme-resolved="black"] :is(
  .admin-workspace-tab,
  .admin-quick-btn,
  .admin-command-btn,
  .nav-report-options,
  .nav-block-item,
  .nav-switch-choice,
  .group-chat-modal-section,
  .group-chat-choice-pill,
  .flow-pill,
  .brand-pill,
  .signal-row,
  .code-help-row,
  .seen-invite-lock-card,
  .seen-invite-summary-card,
  .seen-invite-section,
  .seen-invite-request-card,
  .seen-invite-member-card,
  .seen-invite-meta-item,
  .map-checkin-choice,
  .map-checkin-result,
  .map-checkin-privacy
) {
  border-color: var(--seen-border);
  background: var(--seen-surface-elevated);
  color: var(--seen-text-primary);
}

html[data-seen-theme-resolved="black"] :is(
  .auth-block,
  .chat-find-backdrop,
  [class$="-backdrop"]
) {
  background: rgba(5, 5, 5, 0.88);
}

html[data-seen-theme-resolved="black"] :is(
  p,
  label,
  .muted,
  .section-copy,
  .account-lead,
  .details-summary-copy,
  .plan-meta,
  .plan-note,
  .fact-label,
  .feed-kicker,
  .feed-tabs-label,
  .feed-status-label,
  .post-meta,
  .story-time,
  .grid-sub,
  .grid-summary-meta,
  .grid-discovery-note,
  .toolbar-filter-note,
  .toolbar-availability-note,
  .profile-subtitle,
  .profile-tagline,
  .profile-section-copy,
  .profile-upload-queue-copy,
  .profile-upload-queue-meta,
  .nav-report-hint,
  .nav-switch-sub,
  .nav-switch-hint,
  .group-chat-modal-copy,
  .panel-copy,
  .modal-hint
) {
  color: var(--seen-text-secondary);
}

html[data-seen-theme-resolved="black"] :is(input, textarea, select) {
  border-color: var(--seen-border);
  background: var(--seen-surface-elevated);
  color: var(--seen-text-primary);
}

html[data-seen-theme-resolved="black"] :is(input, textarea, select)::placeholder {
  color: var(--seen-text-secondary);
  opacity: 1;
}

html[data-seen-theme-resolved="black"] :is(input, textarea, select):focus {
  border-color: var(--seen-blue);
  outline-color: var(--seen-blue);
}

html[data-seen-theme-resolved="black"] :is(
  .btn.secondary,
  .btn:not(.primary):not(.btn-primary):not(.danger):not(.is-danger):not(.success):not(.is-success):not(.warning),
  button.secondary,
  .quick-link,
  .pill,
  .profile-back-btn,
  .how-back-btn,
  .back-btn,
  .ghost-btn,
  .control-btn,
  .chat-thread-status-btn,
  .chat-find-tab,
  .chat-find-search-clear,
  .thread-toolbar-mini:not(.danger),
  .nav-report-btn.secondary,
  .nav-safety-btn.secondary,
  .nav-switch-btn.secondary,
  .group-chat-choice-btn:not(.primary),
  .group-chat-modal-btn:not(.primary),
  .map-sheet-filter-button,
  .map-filter-chip,
  .map-checkin-action:not(.primary):not(.danger),
  .seen-invite-btn.secondary,
  .seen-invite-pop-btn:not(.is-primary),
  .modal-close,
  .modal-link-btn
) {
  border: 1px solid var(--seen-border);
  background: var(--seen-surface-elevated);
  color: var(--seen-text-primary);
  box-shadow: none;
}

html[data-seen-theme-resolved="black"] :is(
  .btn.primary,
  .btn-primary,
  .primary-btn,
  .cta-btn,
  .modal-btn,
  .nav-report-btn.primary,
  .nav-safety-btn.primary,
  .nav-switch-btn.primary,
  .group-chat-choice-btn.primary,
  .group-chat-modal-btn.primary
) {
  border-color: var(--seen-blue);
  background: var(--seen-blue);
  color: var(--seen-bg);
  box-shadow: none;
}

html[data-seen-theme-resolved="black"] :is(
  .panel-links a,
  .privacy a,
  .modal-link-btn
) {
  color: var(--seen-blue);
}

html[data-seen-theme-resolved="black"] .thread-item.is-support-thread {
  border-color: rgba(199, 199, 204, 0.38);
  background: linear-gradient(135deg, var(--seen-silver-soft), rgba(23, 23, 25, 0.98));
  box-shadow: inset 0 0 0 1px rgba(199, 199, 204, 0.06);
}

html[data-seen-theme-resolved="black"] .thread-item.is-support-thread:hover {
  border-color: rgba(199, 199, 204, 0.58);
  background: linear-gradient(135deg, rgba(199, 199, 204, 0.17), var(--seen-surface-elevated));
}

html[data-seen-theme-resolved="black"] .thread-label-text.is-support-thread-label {
  color: var(--seen-silver);
}

html[data-seen-theme-resolved="black"] .thread-avatar.is-support.is-active {
  border-color: var(--seen-green);
  background: var(--seen-surface-elevated);
  box-shadow:
    0 0 0 3px var(--seen-green-soft),
    0 0 12px rgba(48, 209, 88, 0.42);
}

html[data-seen-theme-resolved="black"] .thread-toolbar .thread-toolbar-row .thread-toolbar-pill[data-thread-toolbar-action] {
  border-color: rgba(74, 158, 255, 0.5);
  background: var(--seen-blue-soft);
  color: var(--seen-blue);
  box-shadow: inset 0 0 0 1px rgba(74, 158, 255, 0.08);
}

html[data-seen-theme-resolved="black"] .thread-toolbar .thread-toolbar-row .thread-toolbar-pill[data-thread-toolbar-action]:hover,
html[data-seen-theme-resolved="black"] .thread-toolbar .thread-toolbar-row .thread-toolbar-pill[data-thread-toolbar-action][aria-pressed="true"] {
  border-color: rgba(74, 158, 255, 0.72);
  background: rgba(74, 158, 255, 0.2);
  color: var(--seen-blue);
}

html[data-seen-theme-resolved="black"] .thread-toolbar .thread-toolbar-row .thread-toolbar-pill[data-thread-toolbar-action="bulk-delete"][aria-pressed="true"] {
  border-color: rgba(239, 68, 68, 0.58);
  background: rgba(239, 68, 68, 0.14);
  color: #ff8a8a;
}

html[data-seen-theme-resolved="black"] :is(
  .btn.secondary,
  .btn:not(.primary):not(.btn-primary):not(.danger):not(.is-danger):not(.success):not(.is-success):not(.warning),
  button.secondary,
  .quick-link,
  .pill,
  .profile-back-btn,
  .how-back-btn,
  .back-btn,
  .ghost-btn,
  .control-btn,
  .thread-toolbar-mini:not(.danger),
  .map-sheet-filter-button,
  .map-filter-chip
):hover {
  background: var(--seen-surface-hover);
}

html[data-seen-theme-resolved="black"] :is(
  a,
  .is-active,
  .active,
  [aria-selected="true"],
  [aria-pressed="true"]
):focus-visible {
  outline-color: var(--seen-blue);
}

html[data-seen-theme-resolved="black"] :is(
  .tab.active,
  .events-pill.active,
  .admin-workspace-tab.is-active,
  .admin-nav-link.is-active,
  .grid-filter-chip.is-active,
  .seen-tab.is-active,
  .nav-switch-choice.is-checked,
  .map-filter-chip.is-active,
  .map-sheet-filter-button.is-active
) {
  border-color: rgba(74, 158, 255, 0.5);
  background: var(--seen-blue-soft);
  color: var(--seen-blue);
}

html[data-seen-theme-resolved="black"] :is(
  .map-action-item.is-invite,
  .map-rail-btn.is-invite,
  .seen-invite-btn.primary,
  .seen-invite-pop-btn.is-primary,
  .seen-invite-badge,
  .seen-invite-pop-chip,
  .seen-invite-request-status
) {
  border-color: rgba(139, 124, 255, 0.5);
  background: var(--seen-purple-soft);
  color: var(--seen-purple);
}

html[data-seen-theme-resolved="black"] :is(
  .map-checkin-choice.is-active,
  .map-checkin-action.primary,
  .map-action-leading-checkin,
  .map-checkin-rail-btn
) {
  border-color: rgba(255, 179, 64, 0.5);
  background: var(--seen-gold-soft);
  color: var(--seen-gold);
}

html[data-seen-theme-resolved="black"] :is(
  .online,
  .is-online,
  .is-live:not(.is-invite),
  .status-online,
  .presence-online
) {
  --good: var(--seen-green);
  --green: var(--seen-green);
}

html[data-seen-theme-resolved="black"] :is(
  .danger,
  .is-danger,
  [data-action*="delete"],
  [data-thread-toolbar-action="confirm-bulk-delete"]
) {
  --accent: var(--seen-danger);
}

html[data-seen-theme-resolved="black"] .appearance-option:hover {
  background: var(--seen-surface-hover);
}

html[data-seen-theme-resolved="black"] .appearance-option:is(.is-active, [aria-pressed="true"]) {
  border-color: rgba(74, 158, 255, 0.5);
  background: var(--seen-blue-soft);
  color: var(--seen-blue);
  box-shadow: none;
}

html[data-seen-theme-resolved="black"] .appearance-option:focus-visible {
  outline-color: var(--seen-blue);
}

html[data-seen-theme-resolved="black"]:has(link[href*="offline.css"]) body main {
  border-color: var(--seen-border);
  background: var(--seen-surface);
  color: var(--seen-text-primary);
  box-shadow: var(--seen-shadow);
}

html[data-seen-theme-resolved="black"]:has(link[href*="offline.css"]) body main a {
  border-color: var(--seen-blue);
  background: var(--seen-blue);
  color: var(--seen-bg);
}

/* Page-specific surfaces that predate the shared appearance tokens. */
html[data-seen-theme-resolved="light"] :is(.feed-hero, .feed-tabs, .feed-now, .story-card, .post-card, .feed-modal-card) {
  border-color: var(--seen-border);
  background: var(--seen-surface);
  color: var(--seen-page-text);
  box-shadow: var(--seen-shadow);
}

html[data-seen-theme-resolved="light"] :is(.feed-status, .tab, .events-filters, .events-pill, .post-comment-thread, .post-comment-item, .link-card) {
  border-color: var(--seen-border);
  background: var(--seen-surface-muted);
  color: var(--seen-page-text);
}

html[data-seen-theme-resolved="light"] :is(.tab.active, .events-pill.active) {
  border-color: rgba(91, 54, 214, 0.28);
  background: var(--seen-accent-soft);
  color: #4824ba;
}

html[data-seen-theme-resolved="light"] :is(
  .feed-kicker,
  .feed-tabs-label,
  .feed-status-label,
  .now-header,
  .post-meta,
  .story-time,
  .events-filter-note
) {
  color: var(--seen-muted);
}

html[data-seen-theme-resolved="light"] :is(
  .grid-hero,
  .grid-summary-card,
  .grid-discovery-bar,
  .toolbar,
  .grid-error-surface,
  .location-picker-card,
  .profile-basics-card
) {
  border-color: var(--seen-border);
  background: var(--seen-surface);
  color: var(--seen-page-text);
  box-shadow: var(--seen-shadow);
}

html[data-seen-theme-resolved="light"] :is(
  .grid-discovery-actions,
  .grid-looking-toggle,
  .grid-filter-chip,
  .toolbar .pill,
  .control,
  .location-picker-chip,
  .position-filter-option
) {
  border-color: var(--seen-border);
  background: var(--seen-surface-muted);
  color: var(--seen-page-text);
}

html[data-seen-theme-resolved="light"] :is(
  .grid-kicker,
  .grid-summary-label,
  .toolbar-filter-label
) {
  color: var(--seen-accent);
}

html[data-seen-theme-resolved="light"] :is(
  .grid-sub,
  .grid-summary-meta,
  .grid-discovery-note,
  .toolbar-filter-note,
  .toolbar-availability-note,
  .toolbar-availability-state,
  .pill-sub
) {
  color: var(--seen-muted);
}

html[data-seen-theme-resolved="light"] :is(
  .grid-title,
  .grid-summary-value,
  .grid-discovery-title,
  .toolbar .pill strong
) {
  color: var(--seen-page-text);
}

html[data-seen-theme-resolved="light"] .grid-discovery-btn:not(.is-active) {
  color: var(--seen-muted);
}

html[data-seen-theme-resolved="light"] .grid-filter-chip.is-active {
  border-color: rgba(91, 54, 214, 0.28);
  background: var(--seen-accent-soft);
  color: #4824ba;
}

html[data-seen-theme-resolved="light"] :is(
  .profile-hero,
  .profile-view-intro,
  .profile-section,
  .profile-bio,
  #profileView .grid-2 > div,
  #profileView .profile-action-row,
  .profile-upload-queue-card,
  .profile-upload-queue-item
) {
  border-color: var(--seen-border);
  background: var(--seen-surface);
  color: var(--seen-page-text);
  box-shadow: none;
}

html[data-seen-theme-resolved="light"] :is(
  .profile-hero-kicker,
  .profile-mode-eyebrow,
  .profile-view-kicker
) {
  border-color: rgba(91, 54, 214, 0.2);
  background: var(--seen-accent-soft);
  color: #4824ba;
}

html[data-seen-theme-resolved="light"] :is(
  .profile-hero-status,
  .profile-meta-row .profile-user-id,
  .profile-meta-row .profile-last-seen,
  .profile-action-row .btn:not(.btn-primary)
) {
  border-color: var(--seen-border);
  background: var(--seen-surface-muted);
  color: var(--seen-page-text);
}

html[data-seen-theme-resolved="light"] :is(
  .profile-subtitle,
  .profile-tagline,
  .profile-section-copy,
  .profile-mode-copy,
  .profile-upload-queue-copy,
  .profile-upload-queue-meta
) {
  color: var(--seen-muted);
}

html[data-seen-theme-resolved="light"] :is(
  .profile-mode-title,
  .profile-section .section-title,
  .profile-upload-queue-title,
  .profile-upload-queue-name
) {
  color: var(--seen-page-text);
}

html[data-seen-theme-resolved="light"] .grid .empty {
  border-color: var(--seen-border);
  background: var(--seen-surface);
  color: var(--seen-muted);
  box-shadow: var(--seen-shadow);
}

html[data-seen-theme-resolved="light"] .privacy-card {
  border-color: var(--seen-border);
  background: var(--seen-surface);
  color: var(--seen-page-text);
  box-shadow: var(--seen-shadow);
}

html[data-seen-theme-resolved="light"] .privacy :is(p, li) {
  color: #515158;
}

html[data-seen-theme-resolved="light"] .privacy :is(a, a:hover, a:focus-visible) {
  color: #4824ba;
  text-decoration-color: rgba(72, 36, 186, 0.5);
}

html[data-seen-theme-resolved="light"] .privacy-callout {
  border-color: var(--seen-border);
  background: var(--seen-surface-muted);
  color: var(--seen-muted);
}

html[data-seen-theme-resolved="light"] :is(.seen-tabs, .seen-card, .seen-recap-stat, .seen-recap-surface) {
  border-color: var(--seen-border);
  background: var(--seen-surface);
  color: var(--seen-page-text);
  box-shadow: var(--seen-shadow);
}

html[data-seen-theme-resolved="light"] .seen-header p {
  color: var(--seen-muted);
}

html[data-seen-theme-resolved="light"] .seen-tab {
  color: var(--seen-muted);
}

html[data-seen-theme-resolved="light"] .seen-tab.is-active {
  border-color: rgba(91, 54, 214, 0.28);
  background: var(--seen-accent-soft);
  color: #4824ba;
}

html[data-seen-theme-resolved="light"] .account-hero .hero-stat {
  border-color: var(--seen-border);
  background: var(--seen-surface-muted);
}

html[data-seen-theme-resolved="light"] .account-hero :is(.hero-stat-label, .account-kicker) {
  color: var(--seen-accent);
}

html[data-seen-theme-resolved="light"] .account-hero .hero-stat strong {
  color: var(--seen-page-text);
}

html[data-seen-theme-resolved="light"]:has(link[href*="offline.css"]) body main {
  border-color: var(--seen-border);
  background: var(--seen-surface);
  color: var(--seen-page-text);
  box-shadow: var(--seen-shadow);
}

html[data-seen-theme-resolved="light"]:has(link[href*="offline.css"]) body main p {
  color: var(--seen-muted);
}

html[data-seen-theme-resolved="light"] :is(
  .hero-card,
  .detail-card,
  .unsupported-card,
  .debug-card,
  .debug-item,
  .debug-log
) {
  border-color: var(--seen-border);
  background: var(--seen-surface);
  color: var(--seen-page-text);
  box-shadow: var(--seen-shadow);
}

html[data-seen-theme-resolved="light"] :is(.back-btn, .ghost-btn, .control-btn) {
  border-color: var(--seen-border);
  background: var(--seen-surface-muted);
  color: var(--seen-page-text);
}

html[data-seen-theme-resolved="light"] :is(.debug-label, .debug-note, .meta-row, .hero-subtitle, .detail-copy, .unsupported-copy) {
  color: var(--seen-muted);
}

html[data-seen-theme-resolved="light"] :is(.debug-value, .debug-log) {
  color: var(--seen-page-text);
}

.appearance-segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--seen-border);
  border-radius: 16px;
  background: var(--seen-surface-muted);
}

.appearance-option {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.appearance-option:hover {
  background: var(--seen-accent-soft);
}

.appearance-option.is-active,
.appearance-option[aria-pressed="true"] {
  border-color: rgba(91, 54, 214, 0.22);
  background: var(--seen-surface);
  color: var(--seen-accent);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}

.appearance-option:focus-visible {
  outline: 3px solid rgba(91, 54, 214, 0.28);
  outline-offset: 2px;
}

/* Apple-inspired light Map skin. Dark keeps the established Seen Map styling. */
html[data-seen-theme-resolved="light"] {
  --map-material: rgba(255, 255, 255, .88);
      --map-material-strong: rgba(255, 255, 255, .97);
      --map-material-muted: rgba(246, 246, 249, .92);
      --map-material-border: rgba(15, 23, 42, .09);
      --map-material-separator: rgba(15, 23, 42, .08);
      --map-material-shadow: 0 12px 34px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .07);
      --map-ink: #17171c;
      --map-secondary: #6b6b73;
      --map-accent: #5b36d6;
      --map-accent-strong: #4824ba;
      --map-accent-soft: #eee9ff;
      --map-blue: #3478f6;
      --map-green: #22b573;
      --map-orange: #f29b1f;
      --map-offline: #707784;

  #map .maplibregl-canvas {
      filter: grayscale(.72) saturate(.45) contrast(.9) brightness(1.13);
  }

  #map::after {
      background: rgba(248, 250, 252, .12);
  }

  .map-loading-card,
  .map-view-toggle,
  .map-layer-toggle,
  .map-checkin-filter-bar,
  .map-search-area-btn,
  .map-legend-btn,
  .map-nearby-context,
  .map-nearby-card,
  .map-action-menu,
  .map-rail-btn,
  #gpsBtn {
      border: 1px solid var(--map-material-border);
      background: var(--map-material);
      color: var(--map-ink);
      box-shadow: var(--map-material-shadow);
      -webkit-backdrop-filter: blur(24px) saturate(1.35);
      backdrop-filter: blur(24px) saturate(1.35);
  }

  .map-view-toggle,
  .map-layer-toggle {
      padding: 0;
      border-radius: 16px;
  }

  .map-view-toggle button,
  .map-layer-toggle button {
      color: var(--map-secondary);
      font-weight: 600;
  }

  .map-view-toggle button.is-active,
  .map-layer-toggle button.is-active {
      color: var(--map-accent-strong);
      background: #fff;
      box-shadow: 0 3px 10px rgba(15, 23, 42, .1);
  }

  .map-checkin-filter-bar {
      scrollbar-color: rgba(91, 54, 214, .22) transparent;
  }

  .map-checkin-filter-bar button {
      color: var(--map-secondary);
      font-weight: 600;
  }

  .map-checkin-filter-bar button.is-active {
      color: var(--map-accent-strong);
      background: var(--map-accent-soft);
      box-shadow: inset 0 0 0 1px rgba(91, 54, 214, .08);
  }

  .map-category-icon {
      color: var(--map-ink);
      background: rgba(242, 242, 247, .96);
      box-shadow: none;
  }

  .map-checkin-filter-bar button.is-active .map-category-icon {
      color: var(--map-accent-strong);
      background: rgba(255, 255, 255, .92);
  }

  .map-search-area-btn {
      border-color: rgba(52, 120, 246, .18);
      color: #245db8;
      font-weight: 650;
  }

  .map-search-area-btn:hover,
  .map-nearby-context:hover,
  #gpsBtn:hover,
  .map-legend-btn:hover {
      background: var(--map-material-strong);
  }

  .map-legend-btn span {
      border-color: var(--map-ink);
      color: var(--map-ink);
      font-family: var(--seen-font);
      font-weight: 700;
  }

  #gpsBtn {
      color: var(--map-accent-strong);
  }

  .map-nearby-context {
      color: var(--map-ink);
      font-weight: 650;
  }

  .map-nearby-context.is-open {
      border-color: rgba(91, 54, 214, .2);
      background: var(--map-material-strong);
  }

  .map-nearby-status-dot {
      background: var(--map-green);
      box-shadow: 0 0 0 4px rgba(34, 181, 115, .13);
  }

  .map-nearby-card {
      background: var(--map-material-strong);
      color: var(--map-ink);
  }

  .map-nearby-name,
  .map-nearby-meta {
      color: var(--map-ink);
  }

  .map-nearby-distance,
  .map-nearby-subline {
      color: var(--map-secondary);
  }

  .map-action-menu {
      background: var(--map-material-strong);
  }

  .map-rail-btn,
  #gpsBtn.map-rail-btn,
  .map-legend-btn.map-rail-btn {
      border-color: var(--map-material-border);
      background: var(--map-material);
      color: var(--map-ink);
      box-shadow: var(--map-material-shadow);
  }

  .map-rail-btn:hover,
  .map-rail-btn.is-open,
  .map-rail-btn.is-active-mode {
      border-color: rgba(91, 54, 214, .18);
      background: var(--map-accent-soft);
      color: var(--map-accent-strong);
  }

  .map-rail-tooltip {
      border-color: var(--map-material-border);
      background: var(--map-material-strong);
      color: var(--map-ink);
      box-shadow: var(--map-material-shadow);
  }

  .map-action-hint,
  .map-action-hint::after {
      border-color: rgba(91, 54, 214, .18);
      background: var(--map-material-strong);
      color: var(--map-ink);
  }

  .map-action-hint-copy {
      color: var(--map-secondary);
  }

  .map-action-hint-grid b {
      background: var(--map-accent-soft);
      color: var(--map-accent-strong);
  }

  .map-action-hint-dismiss {
      border-color: rgba(91, 54, 214, .2);
      background: var(--map-accent);
      color: #fff;
  }

  .map-rail-tooltip small,
  .map-filters-modal-copy {
      color: var(--map-secondary);
  }

  .map-sheet-toggle {
      color: var(--map-ink);
      font-weight: 600;
  }

  .map-sheet-toggle:hover {
      background: rgba(118, 118, 128, .08);
  }

  .map-sheet-toggle-icon,
  .map-action-leading {
      border-color: transparent;
      color: var(--map-accent);
      background: var(--map-accent-soft);
  }

  .map-sheet-toggle-label,
  .map-action-item-label {
      color: var(--map-ink);
      font-weight: 650;
  }

  .map-sheet-toggle-meta,
  .map-action-item-value,
  .map-action-item.is-invite .map-action-item-value,
  .map-sheet-filter-summary {
      color: var(--map-secondary);
      font-weight: 500;
  }

  .map-sheet-toggle-action {
      color: var(--map-accent-strong);
      background: var(--map-accent-soft);
  }

  .map-sheet-body,
  .map-sheet-actions {
      border-color: var(--map-material-separator);
  }

  .map-sheet-filter-button {
      border-color: var(--map-material-border);
      background: rgba(242, 242, 247, .88);
      color: var(--map-ink);
  }

  .map-sheet-filter-button.is-open,
  .map-sheet-filter-button.is-active-mode {
      border-color: rgba(91, 54, 214, .16);
      background: var(--map-accent-soft);
      color: var(--map-accent-strong);
  }

  .map-action-item,
  .map-action-item.is-invite,
  .map-action-item.is-invite.is-live,
  .map-action-item.is-invite.is-locked {
      border-color: var(--map-material-border);
      background: rgba(242, 242, 247, .74);
      color: var(--map-ink);
  }

  .map-action-item:hover,
  .map-action-item.is-open,
  .map-action-item.is-active-mode {
      border-color: rgba(91, 54, 214, .16);
      background: var(--map-accent-soft);
  }

  .map-action-leading-checkin {
      color: #9b67d7;
      background: #f2eaff;
  }

  .map-action-leading-invite {
      color: var(--map-accent);
      background: var(--map-accent-soft);
  }

  .map-filter-chip {
      border-color: var(--map-material-border);
      background: rgba(242, 242, 247, .82);
      color: var(--map-secondary);
      font-weight: 600;
  }

  .map-filter-chip:hover,
  .map-filter-chip.is-active,
  .map-filter-chip[data-filter="invites"].is-active {
      border-color: rgba(91, 54, 214, .18);
      background: var(--map-accent-soft);
      color: var(--map-accent-strong);
      box-shadow: none;
  }

  .modal,
  .location-picker-modal,
  .onboarding-modal,
  .radar-announcement-modal {
      background: rgba(24, 24, 28, .38);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
  }

  .modal-card,
  .location-picker-card,
  .onboarding-card,
  .radar-announcement-card {
      border: 1px solid rgba(255, 255, 255, .66);
      border-radius: 28px;
      background: rgba(250, 250, 252, .98);
      color: var(--map-ink);
      box-shadow: 0 28px 74px rgba(15, 23, 42, .22);
  }

  .modal-title,
  .location-picker-title,
  .onboarding-title,
  .radar-announcement-title,
  .map-checkin-active-title,
  .seen-invite-lock-title {
      color: var(--map-ink);
      font-weight: 700;
  }

  .modal-close,
  .location-picker-close {
      border: 0;
      background: rgba(118, 118, 128, .1);
      color: var(--map-ink);
      min-width: 40px;
      min-height: 40px;
      border-radius: 50%;
  }

  .modal-close:hover,
  .location-picker-close:hover {
      background: rgba(118, 118, 128, .18);
  }

  .map-legend-row {
      color: var(--map-ink);
      font-weight: 600;
  }

  .map-legend-dot {
      background: #fff;
      border-color: var(--map-offline);
  }

  .map-legend-dot.online { border-color: var(--map-green); }
  .map-legend-dot.recent { border-color: var(--map-orange); }
  .map-legend-dot.invite { border-color: var(--map-blue); }
  .map-privacy-note { color: var(--map-secondary); }

  .location-picker-copy,
  .location-picker-status,
  .onboarding-copy,
  .onboarding-status,
  .radar-announcement-message,
  .radar-announcement-status,
  .seen-invite-modal-copy,
  .seen-invite-inline-note,
  .map-checkin-copy,
  .map-checkin-status,
  .map-checkin-active-meta {
      color: var(--map-secondary);
  }

  .location-picker-label,
  .map-checkin-kicker,
  .seen-invite-field-label,
  .radar-announcement-kicker {
      color: var(--map-accent);
  }

  .location-picker-input,
  .location-picker-chip,
  .position-filter-option,
  .map-checkin-field input,
  .map-checkin-field select,
  .seen-invite-input,
  .seen-invite-textarea {
      border-color: var(--map-material-border);
      background: #fff;
      color: var(--map-ink);
  }

  .location-picker-input:focus,
  .map-checkin-field input:focus,
  .map-checkin-field select:focus,
  .seen-invite-input:focus,
  .seen-invite-textarea:focus {
      border-color: rgba(91, 54, 214, .45);
      box-shadow: 0 0 0 4px rgba(91, 54, 214, .1);
  }

  .location-picker-chip:hover,
  .position-filter-option:hover,
  .position-filter-option.is-active,
  .map-checkin-choice:hover,
  .map-checkin-choice.is-active {
      border-color: rgba(91, 54, 214, .18);
      background: var(--map-accent-soft);
      color: var(--map-accent-strong);
  }

  .location-picker-btn,
  .onboarding-btn,
  .gallery-btn,
  .radar-announcement-dismiss-btn,
  .seen-invite-btn,
  .map-checkin-action {
      border-color: var(--map-material-border);
      background: rgba(242, 242, 247, .92);
      color: var(--map-ink);
  }

  .location-picker-btn.primary,
  .onboarding-btn.primary,
  .seen-invite-btn.primary,
  .map-checkin-action.primary {
      border-color: transparent;
      background: var(--map-accent);
      color: #fff;
  }

  .onboarding-check,
  .map-checkin-active,
  .map-checkin-choice,
  .map-checkin-privacy,
  .seen-invite-lock-card,
  .seen-invite-chip,
  .seen-invite-details-section {
      border-color: var(--map-material-border);
      background: rgba(242, 242, 247, .72);
      color: var(--map-ink);
  }

  .profile-pop {
      border: 1px solid rgba(255, 255, 255, .72);
      background: rgba(250, 250, 252, .98);
      color: var(--map-ink);
      box-shadow: 0 28px 72px rgba(15, 23, 42, .22);
  }

  .maplibregl-popup-close-button {
      border-color: rgba(15, 23, 42, .08);
      background: rgba(255, 255, 255, .97);
      color: var(--map-ink);
      box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
  }

  .maplibregl-popup-close-button:hover {
      background: #fff;
      color: var(--map-ink);
  }

  .profile-pop-name,
  .profile-pop-subline,
  .profile-pop-bio,
  .profile-pop-menu-title {
      color: var(--map-ink);
  }

  .profile-pop-age,
  .profile-pop-supportline {
      color: var(--map-secondary);
  }

  .profile-pop-bio,
  .profile-pop-menu {
      border-color: var(--map-material-border);
      background: rgba(242, 242, 247, .78);
  }

  .profile-pop-status,
  .profile-pop-chip {
      border-color: rgba(52, 120, 246, .18);
      background: rgba(52, 120, 246, .08);
      color: #245db8;
  }

  .profile-pop-status.is-active,
  .profile-pop-chip.is-activity {
      border-color: rgba(34, 181, 115, .22);
      background: rgba(34, 181, 115, .1);
      color: #13794d;
  }

  .profile-pop-status.is-recent,
  .profile-pop-chip.is-activity.is-recent {
      border-color: rgba(242, 155, 31, .24);
      background: rgba(242, 155, 31, .1);
      color: #9a5d00;
  }

  .profile-pop-status.is-offline,
  .profile-pop-chip.is-activity.is-offline {
      border-color: rgba(112, 119, 132, .2);
      background: rgba(112, 119, 132, .08);
      color: #59606c;
  }

  .profile-pop-btn,
  .profile-pop-gear,
  .profile-pop-menu-btn {
      border-color: rgba(91, 54, 214, .14);
      background: var(--map-accent-soft);
      color: var(--map-accent-strong);
      box-shadow: none;
  }

  .profile-pop-btn:hover,
  .profile-pop-gear:hover,
  .profile-pop-menu-btn:hover {
      border-color: rgba(91, 54, 214, .24);
      background: #e4dcff;
      color: var(--map-accent-strong);
      box-shadow: none;
  }

  .map-list-panel {
      background: #f2f2f7;
      color: var(--map-ink);
  }

  .map-list-heading { color: var(--map-ink); }
  .map-list-card {
      border-color: var(--map-material-border);
      background: #fff;
      color: var(--map-ink);
      box-shadow: 0 8px 24px rgba(15, 23, 42, .07);
  }
  .map-list-card-meta,
  .map-list-empty { color: var(--map-secondary); }
  .map-list-card-arrow { color: var(--map-accent); }

  .avatar-pin,
  .map-nearby-avatar,
  .map-list-card img,
  .map-list-card .map-nearby-avatar-fallback {
      border-radius: 50%;
  }

  .avatar-pin {
      box-shadow: 0 4px 14px rgba(15, 23, 42, .2);
  }

  .avatar-pin.is-selected {
      box-shadow: 0 0 0 4px rgba(91, 54, 214, .2), 0 8px 22px rgba(15, 23, 42, .24) !important;
  }

  .map-view-toggle button:focus-visible,
  .map-layer-toggle button:focus-visible,
  .map-checkin-filter-bar button:focus-visible,
  .map-search-area-btn:focus-visible,
  .map-legend-btn:focus-visible,
  .map-nearby-context:focus-visible,
  .map-nearby-card:focus-visible,
  .map-action-menu button:focus-visible,
  .map-rail-btn:focus-visible,
  #gpsBtn:focus-visible,
  .modal button:focus-visible,
  .location-picker-modal button:focus-visible {
      outline-color: var(--map-accent);
  }

  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
      .map-view-toggle,
      .map-layer-toggle,
      .map-checkin-filter-bar,
      .map-search-area-btn,
      .map-legend-btn,
      .map-nearby-context,
      .map-nearby-card,
      .map-action-menu,
      .map-rail-btn,
      #gpsBtn {
          background: #fff;
      }
  }
}