:root {
  color-scheme: dark;
}

[data-theme="light"] {
  color-scheme: light;
  --nav-bg: rgba(255, 255, 255, 0.94);
  --nav-border: rgba(17, 19, 24, 0.12);
  --nav-active: #2563eb;
}

[data-theme="dark"] body {
  background: #0f1115;
  color: #f5f7fa;
}

[data-theme="light"] body {
  /* Soft sky-blue ambiance across the app */
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(99, 179, 237, 0.10) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(900px 700px at 110% 0%, rgba(59, 130, 246, 0.10) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(180deg, #f7fbff 0%, #f7f9fc 60%, #f7f8fa 100%);
  color: #111318;
}

[data-theme="light"] .mobile-app-body {
  background:
    radial-gradient(1000px 700px at 10% -10%, rgba(99, 179, 237, 0.10) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(800px 600px at 110% 0%, rgba(59, 130, 246, 0.10) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(180deg, #f7fbff 0%, #f5f7fb 60%, #f5f7fb 100%);
  color: #111318;
}

[data-theme="light"] .mobile-topbar,
[data-theme="light"] .app-topbar,
[data-theme="light"] .bottom-nav {
  /* Tinted translucent bars to extend the light theme feel */
  background:
    linear-gradient(135deg, rgba(99, 179, 237, 0.10), rgba(59, 130, 246, 0.10)),
    rgba(255,255,255,0.94) !important;
  border-color: rgba(17,19,24,0.12) !important;
  color: #111318 !important;
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
}

/* Bright theme: crisp white surfaces + soft shadows */
[data-theme="bright"] {
  color-scheme: light;
}
[data-theme="bright"] body { background: #ffffff; color: #111318; }
[data-theme="bright"] .mobile-app-body { background: #fafafa; color: #111318; }

/* Top bars / header / bottom nav */
[data-theme="bright"] .app-topbar,
[data-theme="bright"] .mobile-topbar,
[data-theme="bright"] .bottom-nav {
  background: rgba(255,255,255,0.96) !important;
  border-color: rgba(17, 24, 39, 0.08) !important;
  color: #111318 !important;
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.06);
}
[data-theme="bright"] .topbar-lang,
[data-theme="bright"] .mobile-topbar .mobile-lang,
[data-theme="bright"] .mobile-topbar .hamburger,
[data-theme="bright"] .mobile-topbar .login-btn {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #111318;
}
[data-theme="bright"] .mobile-topbar .mobile-lang-wrap::after { color: rgba(17,24,39,0.55); }
[data-theme="bright"] .mobile-topbar .mobile-user-dropdown {
  background: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 12px 28px rgba(17,24,39,0.10);
}
[data-theme="bright"] .mobile-topbar .mobile-user-dropdown a { color: #111318; }
[data-theme="bright"] .mobile-topbar .mobile-user-dropdown a:hover { background: rgba(17,24,39,0.06); }

/* Panels / lists / cards surfaces */
[data-theme="bright"] .conversation-list,
[data-theme="bright"] .conversations-list,
[data-theme="bright"] .container,
[data-theme="bright"] .memory-panel,
[data-theme="bright"] .settings-subsection,
[data-theme="bright"] .friends-list-full {
  background: #ffffff !important;
  color: #111318 !important;
  border-color: #e5e7eb !important;
  box-shadow: var(--br-shadow-3);
}

/* Inputs */
[data-theme="bright"] input,
[data-theme="bright"] textarea,
[data-theme="bright"] select {
  background: #ffffff !important;
  color: #111318 !important;
  border-color: #e5e7eb !important;
}

/* Buttons / controls */
[data-theme="bright"] .control-button,
[data-theme="bright"] .voice-button,
[data-theme="bright"] .btn {
  background: #f3f4f6;
  color: #111318;
  border-color: #e5e7eb;
  box-shadow: 0 1px 2px rgba(17,24,39,0.04);
}
[data-theme="bright"] .control-button:hover,
[data-theme="bright"] .voice-button:hover,
[data-theme="bright"] .btn:hover { background: #eef2f7; }

/* Links */
[data-theme="bright"] a { color: #0d47a1; }
[data-theme="bright"] a:hover { color: #1d4ed8; }

/* Posts tabs */
[data-theme="bright"] .posts-tabs .posts-tab {
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  color: #111318 !important;
}
[data-theme="bright"] .posts-tabs .posts-tab.active {
  background: #2563eb !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}
[data-theme="bright"] .posts-tabs .posts-tab:hover { background: rgba(37,99,235,0.10) !important; }

/* Friend list & group list text contrast */
[data-theme="bright"] #friendsList .friend-name,
[data-theme="bright"] .friends-chat-header .friend-name,
[data-theme="bright"] #groupsChatName { color: #111318 !important; }
[data-theme="bright"] #friendsList .friend-avatar { border-color: #e5e7eb !important; }
[data-theme="bright"] .group-item-name { color: #111318 !important; }
[data-theme="bright"] .group-item-meta { color: #475569 !important; opacity: 1; }
[data-theme="bright"] .conversation-item.group-list-item.selected .group-item-row { background: #f3f4f6; }
[data-theme="bright"] .group-list-options { color: #334155 !important; }

/* Posts tabs sticky bar on Bright: light surface instead of dark */
[data-theme="bright"] .posts-tabs.sticky {
  background: rgba(255,255,255,0.86) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 8px 24px rgba(17,24,39,0.08);
}

/* Desktop sticky header: sky-blue gradient in Bright */
[data-theme="bright"] #desktopStickyHeader {
  background: linear-gradient(135deg, #ffe6c7 0%, #ffd6e5 100%) !important;
  border-bottom: 1px solid #ffd9e5 !important;
  color: #0f172a !important;
  box-shadow: 0 10px 28px rgba(17,24,39,0.10) !important;
}
[data-theme="bright"] #desktopStickyHeader .site-title-text,
[data-theme="bright"] #desktopStickyHeader .site-description,
[data-theme="bright"] #desktopStickyHeader .notify-bell,
[data-theme="bright"] #desktopStickyHeader .lac-balance,
[data-theme="bright"] #desktopStickyHeader .user-info,
[data-theme="bright"] #desktopStickyHeader .user-dropdown a {
  color: #0f172a !important;
}

/* Desktop tabs bar (below header) */
[data-theme="bright"] .tabs {
  background: rgba(255,255,255,0.86);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 6px 8px;
  box-shadow: 0 8px 24px rgba(17,24,39,0.08);
}
[data-theme="bright"] .tabs .tab-button {
  background: #f3f6fb;
  border: 1px solid #dbe6f6;
  color: #0f172a;
}
[data-theme="bright"] .tabs .tab-button.active {
  background: linear-gradient(135deg, #ffb86b, #f472b6);
  border-color: #f472b6;
  color: #ffffff;
}
[data-theme="bright"] .tabs .tab-button:hover { background: #eaf2fd; }

/* Keep Friends/Groups enhancement cards dark for legibility under bright */
[data-theme="bright"] .dm-enh-grid .enhancement-card,
[data-theme="bright"] #dmMessages .enhancement-card,
[data-theme="bright"] #groupMessages .enhancement-card {
  background: rgba(15, 23, 42, 0.94) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.38) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.32) !important;
}

/* Keep Friends/Groups enhancement cards dark for legibility under light */
[data-theme="light"] .dm-enh-grid .enhancement-card,
[data-theme="light"] #dmMessages .enhancement-card,
[data-theme="light"] #groupMessages .enhancement-card {
  background: rgba(15, 23, 42, 0.94) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.38) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.32) !important;
}

/* Keep Friends/Groups enhancement cards dark for legibility under vivid */
[data-theme="vivid"] .dm-enh-grid .enhancement-card,
[data-theme="vivid"] #dmMessages .enhancement-card,
[data-theme="vivid"] #groupMessages .enhancement-card {
  background: rgba(15, 23, 42, 0.94) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.38) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.32) !important;
}

/* Keep Friends/Groups enhancement cards dark for legibility under legacy */
[data-theme="legacy"] .dm-enh-grid .enhancement-card,
[data-theme="legacy"] #dmMessages .enhancement-card,
[data-theme="legacy"] #groupMessages .enhancement-card {
  background: rgba(15, 23, 42, 0.94) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.38) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.32) !important;
}

/* ===== Bright: elevated surfaces and boundaries ===== */
[data-theme="bright"] body {
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(37, 99, 235, 0.035) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(800px 600px at 100% 0%, rgba(16, 185, 129, 0.030) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, #fbfcff 0%, #f8fafc 60%, #f7f8fb 100%);
  /* Paper-like micro texture */
  background-image:
    radial-gradient(rgba(17,24,39,0.02) 1px, transparent 1px),
    radial-gradient(rgba(17,24,39,0.015) 1px, transparent 1px),
    radial-gradient(1200px 800px at 10% -10%, rgba(37, 99, 235, 0.035) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(800px 600px at 100% 0%, rgba(16, 185, 129, 0.030) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, #fbfcff 0%, #f8fafc 60%, #f7f8fb 100%);
  background-size:
    14px 14px,
    24px 24px,
    auto,
    auto,
    auto;
  background-position:
    0 0,
    8px 8px,
    0 0,
    0 0,
    0 0;
}

/* Elevation tokens */
[data-theme="bright"] {
  --br-shadow-1: 0 1px 2px rgba(17,24,39,0.06), 0 1px 1px rgba(17,24,39,0.04);
  --br-shadow-2: 0 6px 16px rgba(17,24,39,0.08), 0 1px 2px rgba(17,24,39,0.06);
  --br-shadow-3: 0 12px 28px rgba(17,24,39,0.12), 0 2px 6px rgba(17,24,39,0.08);
  --br-shadow-4: 0 16px 36px rgba(17,24,39,0.14), 0 3px 8px rgba(17,24,39,0.10);
}

/* Generic containers/cards */
[data-theme="bright"] .container,
[data-theme="bright"] .conversation-list,
[data-theme="bright"] .conversations-list,
[data-theme="bright"] .memory-panel,
[data-theme="bright"] .settings-subsection,
[data-theme="bright"] .admin-text {
  border-radius: 14px !important;
  border: 1px solid #e6e8ef !important;
  box-shadow: var(--br-shadow-4), 0 0 0 1px #e2e8f0 !important;
}

/* Post cards */
[data-theme="bright"] .post-card {
  background: #ffffff;
  border: 1px solid #e6e8ef;
  border-radius: 14px;
  box-shadow: var(--br-shadow-4), 0 0 0 1px #e2e8f0;
  background-image: radial-gradient(rgba(17,24,39,0.012) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* Bright: add card-like boundary to each settings block */
[data-theme="bright"] .setting-group {
  background: #ffffff !important;
  color: #111318 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: var(--br-shadow-3) !important;
  padding: 10px !important;
}
[data-theme="bright"] .post-actions .btn,
[data-theme="bright"] .post-actions .control-button {
  background: linear-gradient(180deg, #ffffff, #f3f4f6);
  border: 1px solid #e5e7eb;
  box-shadow: var(--br-shadow-1), inset 0 1px 0 #ffffff;
}

/* Friends list rows */
[data-theme="bright"] #friendsList .conversation-item,
[data-theme="bright"] #friendRequestsIncoming .conversation-item,
[data-theme="bright"] #friendRequestsOutgoing .conversation-item {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: var(--br-shadow-2), 0 0 0 1px #e6e8ef;
}
[data-theme="bright"] #friendsList .conversation-item:hover,
[data-theme="bright"] #friendRequestsIncoming .conversation-item:hover,
[data-theme="bright"] #friendRequestsOutgoing .conversation-item:hover {
  box-shadow: var(--br-shadow-2);
}

/* Selection highlight — desktop Friends/Groups (light/bright/vivid/legacy/default) */
/* Light */
[data-theme="light"] #friendsList .conversation-item.selected,
[data-theme="light"] #friendRequestsIncoming .conversation-item.selected,
[data-theme="light"] #friendRequestsOutgoing .conversation-item.selected {
  background: linear-gradient(135deg, rgba(37,99,235,0.14), rgba(37,99,235,0.08)) !important;
  border-color: rgba(37,99,235,0.35) !important;
}
[data-theme="light"] #groupsList .conversation-item.selected,
[data-theme="light"] .conversation-item.group-list-item.selected .group-item-row {
  background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(16,185,129,0.08)) !important;
  border-color: rgba(37,99,235,0.30) !important;
}

/* Bright (Radiant Dawn) */
[data-theme="bright"] #friendsList .conversation-item.selected,
[data-theme="bright"] #friendRequestsIncoming .conversation-item.selected,
[data-theme="bright"] #friendRequestsOutgoing .conversation-item.selected {
  background: linear-gradient(135deg, rgba(37,99,235,0.18), rgba(16,185,129,0.10)) !important;
  border-color: rgba(37,99,235,0.40) !important;
}
[data-theme="bright"] #groupsList .conversation-item.selected,
[data-theme="bright"] .conversation-item.group-list-item.selected .group-item-row {
  background: linear-gradient(135deg, rgba(37,99,235,0.16), rgba(244,114,182,0.10)) !important;
  border-color: rgba(37,99,235,0.36) !important;
}

/* Vivid */
[data-theme="vivid"] #friendsList .conversation-item.selected,
[data-theme="vivid"] #friendRequestsIncoming .conversation-item.selected,
[data-theme="vivid"] #friendRequestsOutgoing .conversation-item.selected {
  background: linear-gradient(135deg, rgba(16,185,129,0.22), rgba(59,130,246,0.14)) !important;
  border-color: rgba(16,185,129,0.36) !important;
}
[data-theme="vivid"] #groupsList .conversation-item.selected,
[data-theme="vivid"] .conversation-item.group-list-item.selected .group-item-row {
  background: linear-gradient(135deg, rgba(16,185,129,0.20), rgba(59,130,246,0.12)) !important;
  border-color: rgba(16,185,129,0.32) !important;
}

/* Dark */
[data-theme="dark"] #friendsList .conversation-item.selected,
[data-theme="dark"] #friendRequestsIncoming .conversation-item.selected,
[data-theme="dark"] #friendRequestsOutgoing .conversation-item.selected {
  background: linear-gradient(135deg, rgba(59,130,246,0.20), rgba(14,165,233,0.16)) !important;
  border-color: rgba(59,130,246,0.38) !important;
}
[data-theme="dark"] #groupsList .conversation-item.selected,
[data-theme="dark"] .conversation-item.group-list-item.selected .group-item-row {
  background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(16,185,129,0.14)) !important;
  border-color: rgba(59,130,246,0.34) !important;
}

/* Aurora */
[data-theme="aurora"] #friendsList .conversation-item.selected,
[data-theme="aurora"] #friendRequestsIncoming .conversation-item.selected,
[data-theme="aurora"] #friendRequestsOutgoing .conversation-item.selected {
  background: linear-gradient(135deg, rgba(99,102,241,0.22), rgba(59,130,246,0.16)) !important;
  border-color: rgba(99,102,241,0.40) !important;
}
[data-theme="aurora"] #groupsList .conversation-item.selected,
[data-theme="aurora"] .conversation-item.group-list-item.selected .group-item-row {
  background: linear-gradient(135deg, rgba(99,102,241,0.20), rgba(59,130,246,0.14)) !important;
  border-color: rgba(99,102,241,0.36) !important;
}

/* Legacy */
[data-theme="legacy"] #friendsList .conversation-item.selected,
[data-theme="legacy"] #friendRequestsIncoming .conversation-item.selected,
[data-theme="legacy"] #friendRequestsOutgoing .conversation-item.selected {
  background: linear-gradient(135deg, rgba(103,123,230,0.28), rgba(121,127,219,0.24)) !important;
  border-color: rgba(121,127,219,0.50) !important;
}
[data-theme="legacy"] #groupsList .conversation-item.selected,
[data-theme="legacy"] .conversation-item.group-list-item.selected .group-item-row {
  background: linear-gradient(135deg, rgba(103,123,230,0.26), rgba(121,127,219,0.20)) !important;
  border-color: rgba(121,127,219,0.46) !important;
}

/* Default (no explicit theme) — ensure visible on modern default */
html:not([data-theme]) #friendsList .conversation-item.selected,
html:not([data-theme]) #friendRequestsIncoming .conversation-item.selected,
html:not([data-theme]) #friendRequestsOutgoing .conversation-item.selected {
  background: linear-gradient(135deg, rgba(99,102,241,0.30), rgba(59,130,246,0.22)) !important;
  border-color: rgba(99,102,241,0.50) !important;
}
html:not([data-theme]) #groupsList .conversation-item.selected,
html:not([data-theme]) .conversation-item.group-list-item.selected .group-item-row {
  background: linear-gradient(135deg, rgba(99,102,241,0.28), rgba(59,130,246,0.18)) !important;
  border-color: rgba(99,102,241,0.46) !important;
}

/* Group list rows */
[data-theme="bright"] .conversation-item.group-list-item .group-item-row {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: var(--br-shadow-3), 0 0 0 1px #e6e8ef;
  background-image: radial-gradient(rgba(17,24,39,0.012) 1px, transparent 1px);
  background-size: 18px 18px;
}
[data-theme="bright"] .conversation-item.group-list-item.selected .group-item-row {
  background: #f3f4f6;
  box-shadow: var(--br-shadow-2);
}

/* Buttons: tactile look */
[data-theme="bright"] .control-button,
[data-theme="bright"] .btn,
[data-theme="bright"] .voice-button {
  background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: var(--br-shadow-1), inset 0 1px 0 rgba(255,255,255,0.9);
  transition: transform 0.06s ease, box-shadow 0.12s ease, background 0.12s ease;
}
[data-theme="bright"] .control-button:hover,
[data-theme="bright"] .btn:hover,
[data-theme="bright"] .voice-button:hover { box-shadow: var(--br-shadow-2), inset 0 1px 0 rgba(255,255,255,0.85); }
[data-theme="bright"] .control-button:active,
[data-theme="bright"] .btn:active,
[data-theme="bright"] .voice-button:active { transform: translateY(1px); box-shadow: var(--br-shadow-1), inset 0 2px 4px rgba(17,24,39,0.08); }
[data-theme="bright"] .control-button:focus-visible,
[data-theme="bright"] .btn:focus-visible,
[data-theme="bright"] .voice-button:focus-visible { outline: 2px solid rgba(37,99,235,0.55); outline-offset: 2px; }

/* Inputs: crisp fields with gentle depth */
[data-theme="bright"] input,
[data-theme="bright"] textarea,
[data-theme="bright"] select {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 1px rgba(17,24,39,0.03);
}
[data-theme="bright"] input:focus,
[data-theme="bright"] textarea:focus,
[data-theme="bright"] select:focus { outline: 2px solid rgba(37,99,235,0.35); outline-offset: 2px; }

/* Bottom nav active pill */
[data-theme="bright"] .bottom-nav .nav-item.active {
  background: #eef2ff;
  border: 1px solid #dbe2fe;
  border-radius: 10px;
  color: #1f2937;
}
/* Radiant (bright): non‑active nav items readable */
[data-theme="bright"] .bottom-nav .nav-item { color: #1f2937 !important; }

/* Desktop chat: boost panel shadows for separation */
[data-theme="bright"] #conversationsList,
[data-theme="bright"] #friendsList,
[data-theme="bright"] #friendRequestsIncoming,
[data-theme="bright"] #friendRequestsOutgoing,
[data-theme="bright"] .group-list-scroll,
[data-theme="bright"] .group-info-shell {
  background: #ffffff !important;
  border: 1px solid #e6e8ef !important;
  border-radius: 12px !important;
  box-shadow: var(--br-shadow-3) !important;
}

/* Subtle texture on major white surfaces to reduce glare */
[data-theme="bright"] .conversation-list,
[data-theme="bright"] .conversations-list,
[data-theme="bright"] .container,
[data-theme="bright"] .memory-panel,
[data-theme="bright"] .settings-subsection,
[data-theme="bright"] .friends-list-full {
  background-image: radial-gradient(rgba(17,24,39,0.012) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* Popover menus and dropdowns: ensure contrast */
[data-theme="bright"] .post-menu,
[data-theme="bright"] .user-dropdown {
  background: #ffffff !important;
  color: #111318 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: var(--br-shadow-3) !important;
}
[data-theme="bright"] .post-menu .menu-item,
[data-theme="bright"] .post-menu .menu-label,
[data-theme="bright"] .user-dropdown a { color: #111318 !important; }
[data-theme="bright"] .post-menu .menu-item:hover { background: #f3f4f6; }

/* Hard-stop: no white text on light backgrounds */
[data-theme="bright"] .friend-name,
[data-theme="bright"] .group-item-name,
[data-theme="bright"] .group-item-meta,
[data-theme="bright"] .friends-chat-header .friend-name,
[data-theme="bright"] .group-chat-name,
[data-theme="bright"] .site-title-text,
[data-theme="bright"] .site-description,
[data-theme="bright"] .post-username,
[data-theme="bright"] .post-time { color: #111318 !important; }

/* Bright: stronger panel effects for Settings & Management */
[data-theme="bright"] .settings-subsection,
[data-theme="bright"] .admin-text {
  border: 2px solid #cbd5e1 !important;
  border-radius: 12px !important;
  box-shadow: var(--br-shadow-4), 0 0 0 1px #cbd5e1 !important;
}
[data-theme="bright"] .admin-row,
[data-theme="bright"] .admin-tier-table .tier-row {
  border: 2px solid #cbd5e1 !important;
  border-radius: 12px !important;
  box-shadow: var(--br-shadow-4), 0 0 0 1px #cbd5e1 !important;
}
[data-theme="bright"] .admin-row .quotas .q {
  border: 2px solid #cbd5e1 !important;
  box-shadow: 0 6px 18px rgba(17,24,39,0.08) !important;
}

/* Bright: header username link pill readable on light header */
[data-theme="bright"] #headerUsernameLink {
  color: #0f172a !important;
  background: rgba(255,255,255,0.9) !important;
  border: 1px solid #e2e8f0 !important;
}
[data-theme="bright"] #headerUsernameLink:hover { background: #ffffff !important; }

/* Bright overrides: Settings & Admin (Management) — ensure dark text */
[data-theme="bright"] .admin-tab-btn {
  background: #f3f4f6 !important;
  border: 1px solid #d1d5db !important;
  color: #0f172a !important;
}

/* ===== Me (Profile) page: theme surfaces ===== */
/* Light */
[data-theme="light"] .me-card { background: #ffffff !important; color:#0f172a !important; border:1px solid #e2e8f0 !important; }
[data-theme="light"] .me-stat { background: #f3f4f6 !important; color:#0f172a !important; border:1px solid #e5e7eb !important; }
[data-theme="light"] .me-progress-bar { background: rgba(17,24,39,0.06) !important; border-color: rgba(17,24,39,0.14) !important; }
[data-theme="light"] .me-username, [data-theme="light"] .me-bio, [data-theme="light"] .me-stat-label { color:#0f172a !important; opacity: .85; }
[data-theme="light"] .me-gear { background:#ffffff !important; color:#0f172a !important; border:1px solid #e5e7eb !important; }

/* Bright */
[data-theme="bright"] .me-card { background: #ffffff !important; color:#111318 !important; border:1px solid #e5e7eb !important; box-shadow: var(--br-shadow-2); }
[data-theme="bright"] .me-stat { background: #f3f4f6 !important; color:#111318 !important; border:1px solid #e5e7eb !important; }
[data-theme="bright"] .me-progress-bar { background: #f3f4f6 !important; border-color: #e5e7eb !important; }
[data-theme="bright"] .me-username, [data-theme="bright"] .me-bio, [data-theme="bright"] .me-stat-label { color:#111318 !important; opacity: .9; }
[data-theme="bright"] .me-gear { background:#ffffff !important; color:#111318 !important; border:1px solid #e5e7eb !important; }

/* Vivid Prism */
[data-theme="vivid"] .me-card { background: #ffffff !important; color:#0f172a !important; border:1px solid #e2e8f0 !important; box-shadow: 0 8px 24px rgba(15,23,42,0.12); }
[data-theme="vivid"] .me-stat { background: #f3f4f6 !important; color:#0f172a !important; border:1px solid #e5e7eb !important; }
[data-theme="vivid"] .me-progress-bar { background: #f3f4f6 !important; border-color: #e2e8f0 !important; }
[data-theme="vivid"] .me-username, [data-theme="vivid"] .me-bio, [data-theme="vivid"] .me-stat-label { color:#0f172a !important; opacity: .9; }
[data-theme="vivid"] .me-gear { background:#ffffff !important; color:#0f172a !important; border:1px solid #e5e7eb !important; }

/* Legacy (Sea Blue gradient) */
[data-theme="legacy"] .me-card { background: rgba(255,255,255,0.86) !important; color:#0f172a !important; border:1px solid rgba(15,23,42,0.12) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
[data-theme="legacy"] .me-stat { background: rgba(255,255,255,0.82) !important; color:#0f172a !important; border:1px solid rgba(15,23,42,0.12) !important; }
[data-theme="legacy"] .me-progress-bar { background: rgba(15,23,42,0.06) !important; border-color: rgba(15,23,42,0.14) !important; }
[data-theme="legacy"] .me-username, [data-theme="legacy"] .me-bio, [data-theme="legacy"] .me-stat-label { color:#0f172a !important; }
[data-theme="legacy"] .me-gear { background: rgba(255,255,255,0.92) !important; color:#0f172a !important; border:1px solid rgba(15,23,42,0.12) !important; }

/* Standalone mobile profile page surfaces (respect theme) */
[data-theme="light"] body.mobile-profile-body .profile-hero,
[data-theme="bright"] body.mobile-profile-body .profile-hero,
[data-theme="vivid"] body.mobile-profile-body .profile-hero {
  background: #ffffff !important; color:#0f172a !important; border:1px solid #e2e8f0 !important;
}
[data-theme="legacy"] body.mobile-profile-body .profile-hero { background: rgba(255,255,255,0.88) !important; color:#0f172a !important; border:1px solid rgba(15,23,42,0.12) !important; }
[data-theme="light"] body.mobile-profile-body .profile-count,
[data-theme="bright"] body.mobile-profile-body .profile-count,
[data-theme="vivid"] body.mobile-profile-body .profile-count { background:#ffffff !important; border:1px solid #e5e7eb !important; color:#0f172a !important; }
[data-theme="legacy"] body.mobile-profile-body .profile-count { background: rgba(255,255,255,0.86) !important; border:1px solid rgba(15,23,42,0.12) !important; color:#0f172a !important; }
[data-theme="light"] body.mobile-profile-body .profile-section,
[data-theme="bright"] body.mobile-profile-body .profile-section,
[data-theme="vivid"] body.mobile-profile-body .profile-section { background:#ffffff !important; border:1px solid #e2e8f0 !important; color:#0f172a !important; }
[data-theme="light"] body.mobile-profile-body .profile-section,
[data-theme="bright"] body.mobile-profile-body .profile-section,
[data-theme="vivid"] body.mobile-profile-body .profile-section {
  background:
    linear-gradient(135deg, rgba(99, 179, 237, 0.05), rgba(59, 130, 246, 0.05)),
    #ffffff !important;
}
[data-theme="legacy"] body.mobile-profile-body .profile-section { background: rgba(255,255,255,0.88) !important; border:1px solid rgba(15,23,42,0.12) !important; color:#0f172a !important; }
[data-theme="light"] body.mobile-profile-body .profile-follow-card,
[data-theme="bright"] body.mobile-profile-body .profile-follow-card,
[data-theme="vivid"] body.mobile-profile-body .profile-follow-card { background:#ffffff !important; border:1px solid #e5e7eb !important; }
[data-theme="legacy"] body.mobile-profile-body .profile-follow-card { background: rgba(255,255,255,0.86) !important; border:1px solid rgba(15,23,42,0.12) !important; }

/* Standalone mobile profile text/readability overrides */
[data-theme="light"] body.mobile-profile-body .profile-bio,
[data-theme="light"] body.mobile-profile-body #profileUsername,
[data-theme="light"] body.mobile-profile-body .profile-handle,
[data-theme="light"] body.mobile-profile-body .profile-count-label,
[data-theme="light"] body.mobile-profile-body .profile-count-value,
[data-theme="light"] body.mobile-profile-body .profile-follow-card a { color: #0f172a !important; }
[data-theme="light"] body.mobile-profile-body .control-button.tiny { background: #f3f4f6 !important; color:#0f172a !important; border:1px solid #e5e7eb !important; }
[data-theme="light"] body.mobile-profile-body .control-button.tiny.active { background:#2563eb !important; color:#ffffff !important; border-color:#1d4ed8 !important; }

[data-theme="bright"] body.mobile-profile-body .profile-bio,
[data-theme="bright"] body.mobile-profile-body #profileUsername,
[data-theme="bright"] body.mobile-profile-body .profile-handle,
[data-theme="bright"] body.mobile-profile-body .profile-count-label,
[data-theme="bright"] body.mobile-profile-body .profile-count-value,
[data-theme="bright"] body.mobile-profile-body .profile-follow-card a { color: #111318 !important; }
[data-theme="bright"] body.mobile-profile-body .control-button.tiny { background:#f3f4f6 !important; color:#111318 !important; border:1px solid #e5e7eb !important; }
[data-theme="bright"] body.mobile-profile-body .control-button.tiny.active { background:#2563eb !important; color:#ffffff !important; border-color:#1d4ed8 !important; }

[data-theme="vivid"] body.mobile-profile-body .profile-bio,
[data-theme="vivid"] body.mobile-profile-body #profileUsername,
[data-theme="vivid"] body.mobile-profile-body .profile-handle,
[data-theme="vivid"] body.mobile-profile-body .profile-count-label,
[data-theme="vivid"] body.mobile-profile-body .profile-count-value,
[data-theme="vivid"] body.mobile-profile-body .profile-follow-card a { color: #0f172a !important; }
[data-theme="vivid"] body.mobile-profile-body .control-button.tiny { background:#f3f4f6 !important; color:#0f172a !important; border:1px solid #e5e7eb !important; }
[data-theme="vivid"] body.mobile-profile-body .control-button.tiny.active { background: linear-gradient(135deg, #6366f1, #ec4899) !important; color:#ffffff !important; border-color:#c084fc !important; }

[data-theme="legacy"] body.mobile-profile-body .profile-bio,
[data-theme="legacy"] body.mobile-profile-body #profileUsername,
[data-theme="legacy"] body.mobile-profile-body .profile-handle,
[data-theme="legacy"] body.mobile-profile-body .profile-count-label,
[data-theme="legacy"] body.mobile-profile-body .profile-count-value,
[data-theme="legacy"] body.mobile-profile-body .profile-follow-card a { color: #0f172a !important; }
[data-theme="legacy"] body.mobile-profile-body .control-button.tiny { background: rgba(255,255,255,0.86) !important; color:#0f172a !important; border:1px solid rgba(15,23,42,0.12) !important; }
[data-theme="legacy"] body.mobile-profile-body .control-button.tiny.active { background: linear-gradient(135deg, rgb(103,123,230), rgb(121,127,219)) !important; color:#ffffff !important; border-color: rgba(79,70,229,0.9) !important; }
[data-theme="bright"] .admin-tab-btn.active {
  background: linear-gradient(135deg, #69b8ff, #3aa0ff) !important;
  border-color: #3aa0ff !important;
  color: #ffffff !important;
}
[data-theme="bright"] .admin-select {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
[data-theme="bright"] .admin-row,
[data-theme="bright"] .admin-tier-table .tier-row,
[data-theme="bright"] .admin-row .quotas .q {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e5e7eb !important;
}
[data-theme="bright"] .admin-row .quotas .q input {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
[data-theme="bright"] .post-word-counter { color: #334155 !important; }

/* Mobile settings mini tabs */
[data-theme="bright"] .settings-mini-tabs .mini-tab {
  background: #f3f4f6 !important;
  color: #0f172a !important;
  border: 1px solid #d1d5db !important;
}
[data-theme="bright"] .settings-mini-tabs .mini-tab.active {
  background: #2563eb !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}



[data-theme="light"] .topbar-lang,
[data-theme="light"] .mobile-topbar .mobile-lang,
[data-theme="light"] .mobile-topbar .hamburger,
[data-theme="light"] .mobile-topbar .login-btn {
  background: rgba(17,19,24,0.06);
  border: 1px solid rgba(17,19,24,0.18);
  color: #111318;
}

[data-theme="light"] .mobile-topbar .mobile-lang-wrap::after {
  color: rgba(17,19,24,0.55);
}

[data-theme="light"] .mobile-topbar .mobile-user-dropdown {
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(17,19,24,0.16);
  box-shadow: 0 12px 28px rgba(15,19,24,0.12);
}

[data-theme="light"] .mobile-topbar .mobile-user-dropdown a {
  color: #111318;
}

[data-theme="light"] .mobile-topbar .mobile-user-dropdown a:hover {
  background: rgba(17,19,24,0.06);
}

/* Light: posts tabs buttons (override inline white styles) */
[data-theme="light"] .posts-tabs .posts-tab {
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  color: #111318 !important;
}
[data-theme="light"] .posts-tabs .posts-tab.active {
  background: linear-gradient(135deg, #69b8ff, #3aa0ff) !important;
  border-color: #3aa0ff !important;
  color: #ffffff !important;
}
[data-theme="light"] .posts-tabs .posts-tab:hover { background: rgba(244,114,182,0.1) !important; }

/* Light: desktop sticky header uses a warm orange→pink gradient */
[data-theme="light"] #desktopStickyHeader {
  background: linear-gradient(135deg, #e0f2ff 0%, #bfe3ff 100%) !important;
  border-bottom: 1px solid #cfe6ff !important;
  color: #0f172a !important;
  box-shadow: 0 10px 28px rgba(17,24,39,0.08) !important;
}
[data-theme="light"] #desktopStickyHeader .site-title-text,
[data-theme="light"] #desktopStickyHeader .site-description,
[data-theme="light"] #desktopStickyHeader .notify-bell,
[data-theme="light"] #desktopStickyHeader .lac-balance,
[data-theme="light"] #desktopStickyHeader .user-info,
[data-theme="light"] #desktopStickyHeader .user-dropdown a { color: #0f172a !important; }
[data-theme="light"] #headerUsernameLink {
  color: #0f172a !important;
  background: rgba(255,255,255,0.9) !important;
  border: 1px solid #e2e8f0 !important;
}
[data-theme="light"] #headerUsernameLink:hover { background: #ffffff !important; }
[data-theme="light"] #desktopStickyHeader .header-lang {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}
[data-theme="light"] #desktopStickyHeader .control-button {
  background: rgba(255,255,255,0.9) !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}

/* Light: top-level nav tabs under header */
[data-theme="light"] .tabs {
  background:
    linear-gradient(135deg, rgba(99, 179, 237, 0.08), rgba(59, 130, 246, 0.08)),
    rgba(255,255,255,0.86);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 6px 8px;
  box-shadow: 0 8px 24px rgba(17,24,39,0.08);
}

/* Mobile standalone profile topbar: ensure readable colors per theme */
[data-theme="light"] .app-topbar.profile-topbar,
[data-theme="bright"] .app-topbar.profile-topbar,
[data-theme="vivid"] .app-topbar.profile-topbar,
[data-theme="legacy"] .app-topbar.profile-topbar {
  color: #0f172a !important;
}
[data-theme="light"] .app-topbar.profile-topbar { background: rgba(255,255,255,0.94) !important; border-bottom: 1px solid #e2e8f0 !important; }
[data-theme="bright"] .app-topbar.profile-topbar { background: rgba(255,255,255,0.96) !important; border-bottom: 1px solid rgba(17,24,39,0.08) !important; }
[data-theme="vivid"] .app-topbar.profile-topbar { background: rgba(255,255,255,0.86) !important; border-bottom: 1px solid rgba(15,23,42,0.10) !important; }
[data-theme="legacy"] .app-topbar.profile-topbar { background: rgba(255,255,255,0.88) !important; border-bottom: 1px solid rgba(15,23,42,0.12) !important; }
[data-theme="light"] .profile-topbar .topbar-title,
[data-theme="bright"] .profile-topbar .topbar-title,
[data-theme="vivid"] .profile-topbar .topbar-title,
[data-theme="legacy"] .profile-topbar .topbar-title { color: inherit !important; }
[data-theme="light"] .profile-topbar .profile-back-btn,
[data-theme="bright"] .profile-topbar .profile-back-btn,
[data-theme="vivid"] .profile-topbar .profile-back-btn,
[data-theme="legacy"] .profile-topbar .profile-back-btn { background: rgba(17,24,39,0.06) !important; color:#0f172a !important; border:1px solid rgba(17,24,39,0.12) !important; }
[data-theme="light"] .profile-topbar .topbar-lang,
[data-theme="bright"] .profile-topbar .topbar-lang,
[data-theme="vivid"] .profile-topbar .topbar-lang { background:#ffffff !important; color:#0f172a !important; border:1px solid #e5e7eb !important; }
[data-theme="light"] .profile-topbar .notify-bell,
[data-theme="bright"] .profile-topbar .notify-bell,
[data-theme="vivid"] .profile-topbar .notify-bell,
[data-theme="legacy"] .profile-topbar .notify-bell { color:#0f172a !important; }
[data-theme="light"] .tabs .tab-button {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #0f172a;
}
[data-theme="light"] .tabs .tab-button.active {
  background: linear-gradient(135deg, #69b8ff, #3aa0ff);
  border-color: #3aa0ff;
  color: #ffffff;
}
[data-theme="light"] .tabs .tab-button:hover { background: #eef2f7; }

/* Light: ensure popover menus are light with dark text */
[data-theme="light"] .post-menu,
[data-theme="light"] .user-dropdown {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 12px 28px rgba(17,24,39,0.12) !important;
}
[data-theme="light"] .post-menu .menu-item,
[data-theme="light"] .post-menu .menu-label,
[data-theme="light"] .user-dropdown a { color: #0f172a !important; }
[data-theme="light"] .post-menu .menu-item:hover { background: #f3f4f6; }

/* Light: no white text on light backgrounds (friends/groups/profile/posts meta) */
[data-theme="light"] .friend-name,
[data-theme="light"] .group-item-name,
[data-theme="light"] .group-item-meta,
[data-theme="light"] .friends-chat-header .friend-name,
[data-theme="light"] .group-chat-name,
[data-theme="light"] .site-title-text,
[data-theme="light"] .site-description,
[data-theme="light"] .post-username,
[data-theme="light"] .post-time { color: #0f172a !important; }
[data-theme="light"] .conversation-item.group-list-item .group-item-name { color: #0f172a !important; }

/* Light: panels/cards get clear boundaries + soft shadows */
[data-theme="light"] .conversation-list,
[data-theme="light"] .conversations-list,
[data-theme="light"] .container,
[data-theme="light"] .memory-panel,
[data-theme="light"] .settings-subsection,
[data-theme="light"] .admin-text {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 2px solid #e2e8f0 !important;
  box-shadow: 0 10px 28px rgba(17,24,39,0.10), 0 0 0 1px #e2e8f0 !important;
  border-radius: 12px !important;
}

/* Light: add card-like boundary to each settings block (tinted) */
[data-theme="light"] .setting-group {
  background:
    linear-gradient(135deg, rgba(99, 179, 237, 0.05), rgba(59, 130, 246, 0.05)),
    #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 18px rgba(17,24,39,0.08) !important;
  padding: 10px !important;
}

/* Light: explicit boundaries for desktop chat panels */
[data-theme="light"] #conversationsList,
[data-theme="light"] #friendsList,
[data-theme="light"] #friendRequestsIncoming,
[data-theme="light"] #friendRequestsOutgoing,
[data-theme="light"] .group-list-scroll,
[data-theme="light"] .group-info-shell {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(17,24,39,0.08) !important;
}

/* Light: friend/group row cards */
[data-theme="light"] #friendsList .conversation-item,
[data-theme="light"] #friendRequestsIncoming .conversation-item,
[data-theme="light"] #friendRequestsOutgoing .conversation-item {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 14px rgba(17,24,39,0.08) !important;
}
[data-theme="light"] .conversation-item.group-list-item .group-item-row {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(17,24,39,0.08);
}

/* Light: posts wrapper panel */
[data-theme="light"] #postsWrapper {
  background:
    linear-gradient(135deg, rgba(99, 179, 237, 0.05), rgba(59, 130, 246, 0.05)),
    #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(17,24,39,0.08) !important;
}

/* Light: Settings & Admin management controls use dark text on light surfaces */
[data-theme="light"] .admin-tab-btn {
  background: #f3f4f6 !important;
  border: 1px solid #d1d5db !important;
  color: #0f172a !important;
}
[data-theme="light"] .admin-tab-btn.active {
  background: linear-gradient(135deg, #ffb86b, #f472b6) !important;
  border-color: #f472b6 !important;
  color: #ffffff !important;
}
[data-theme="light"] .admin-select {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
[data-theme="light"] .admin-row,
[data-theme="light"] .admin-tier-table .tier-row,
[data-theme="light"] .admin-row .quotas .q {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 2px solid #e2e8f0 !important;
}
[data-theme="light"] .admin-row,
[data-theme="light"] .admin-tier-table .tier-row {
  box-shadow: 0 10px 28px rgba(17,24,39,0.10), 0 0 0 1px #e2e8f0 !important;
  border-radius: 12px !important;
}
[data-theme="light"] .admin-row .quotas .q input {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
[data-theme="light"] .post-word-counter { color: #334155 !important; }

/* Light: Mobile settings mini-tabs */
[data-theme="light"] .settings-mini-tabs .mini-tab {
  background: #f3f4f6 !important;
  color: #0f172a !important;
  border: 1px solid #d1d5db !important;
}
[data-theme="light"] .settings-mini-tabs .mini-tab.active {
  background: linear-gradient(135deg, #69b8ff, #3aa0ff) !important;
  border-color: #3aa0ff !important;
  color: #ffffff !important;
}

/* Light: posts tabs sticky light surface (desktop) */
[data-theme="light"] .posts-tabs.sticky {
  background:
    linear-gradient(135deg, rgba(99, 179, 237, 0.08), rgba(59, 130, 246, 0.08)),
    rgba(255,255,255,0.86) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 6px 16px rgba(17,24,39,0.06);
}

/* Cards and containers */
[data-theme="light"] .conversation-list,
[data-theme="light"] .container,
[data-theme="light"] .conversations-list,
[data-theme="light"] .memory-panel,
[data-theme="light"] .settings-subsection {
  background:
    linear-gradient(135deg, rgba(99, 179, 237, 0.05), rgba(59, 130, 246, 0.05)),
    #ffffff !important;
  color: #111318 !important;
  border-color: rgba(0,0,0,0.12) !important;
}

[data-theme="light"] .dm-quote-preview,
[data-theme="light"] .dm-quote-preview .q-close,
[data-theme="light"] .dm-quote-preview .quote-cancel {
  color: #111318 !important;
}

html:not([data-theme]) .dm-quote-preview,
[data-theme="light"] .dm-quote-preview,
[data-theme="bright"] .dm-quote-preview,
[data-theme="vivid"] .dm-quote-preview,
[data-theme="legacy"] .dm-quote-preview,
[data-theme="dawn"] .dm-quote-preview {
  background:
    linear-gradient(135deg, rgba(99, 179, 237, 0.05), rgba(59, 130, 246, 0.05)),
    #ffffff !important;
  color: #111318 !important;
  border-color: rgba(0,0,0,0.12) !important;
}

html:not([data-theme]) .dm-quote-preview .q-close,
[data-theme="light"] .dm-quote-preview .q-close,
[data-theme="bright"] .dm-quote-preview .q-close,
[data-theme="vivid"] .dm-quote-preview .q-close,
[data-theme="legacy"] .dm-quote-preview .q-close,
[data-theme="dawn"] .dm-quote-preview .q-close,
html:not([data-theme]) .dm-quote-preview .quote-cancel,
[data-theme="light"] .dm-quote-preview .quote-cancel,
[data-theme="bright"] .dm-quote-preview .quote-cancel,
[data-theme="vivid"] .dm-quote-preview .quote-cancel,
[data-theme="legacy"] .dm-quote-preview .quote-cancel,
[data-theme="dawn"] .dm-quote-preview .quote-cancel {
  color: #111318 !important;
  border-color: rgba(0,0,0,0.3) !important;
}

/* Headers and navs */
[data-theme="light"] .app-topbar,
[data-theme="light"] .bottom-nav {
  background:
    linear-gradient(135deg, rgba(99, 179, 237, 0.10), rgba(59, 130, 246, 0.10)),
    rgba(255,255,255,0.92) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: #111318 !important;
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
}

/* Mobile chat headers: subtle tint + readable back button */
[data-theme="light"] .friends-chat-header,
[data-theme="light"] .chat-conv-header {
  background:
    linear-gradient(135deg, rgba(99, 179, 237, 0.08), rgba(59, 130, 246, 0.08));
  border-bottom: 1px solid rgba(17,19,24,0.12) !important;
}
[data-theme="light"] .friends-chat-header .back-btn,
[data-theme="light"] .chat-conv-header .back-btn { color: #0f172a !important; }

/* ===================== Vivid Prism theme ===================== */
/* A lively gradient backdrop with readable white surfaces,
   subtle cool-gray edges, and tinted navs with blur. */
[data-theme="vivid"] {
  color-scheme: light;
}

/* Background gradients (desktop and mobile shell) */
[data-theme="vivid"] body {
  /* Layered gradients to create a prism-like effect with low visual noise */
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(99,102,241,0.12) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(900px 700px at 110% 0%, rgba(236,72,153,0.12) 0%, rgba(255,255,255,0) 52%),
    radial-gradient(1000px 700px at 0% 100%, rgba(34,197,94,0.08) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, #f8fbff 0%, #f9f7fb 50%, #f7faf9 100%);
  color: #0f172a;
}
[data-theme="vivid"] .mobile-app-body {
  background:
    radial-gradient(1000px 700px at 10% -10%, rgba(99,102,241,0.12) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(800px 600px at 110% 0%, rgba(236,72,153,0.12) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(180deg, #f8fbff 0%, #f9f7fb 60%, #f7faf9 100%);
  color: #0f172a;
}

/* Top bars / header / bottom nav: translucent on gradient with subtle blur */
[data-theme="vivid"] .app-topbar,
[data-theme="vivid"] .mobile-topbar,
[data-theme="vivid"] .bottom-nav {
  /* Subtle prism tint over a translucent white, with blur */
  background:
    linear-gradient(135deg, rgba(99,102,241,0.12), rgba(236,72,153,0.12)),
    rgba(255,255,255,0.78) !important;
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-color: rgba(15,23,42,0.10) !important;
  color: #0f172a !important;
  box-shadow: 0 10px 28px rgba(15,23,42,0.10);
}
[data-theme="vivid"] .topbar-lang,
[data-theme="vivid"] .mobile-topbar .mobile-lang,
[data-theme="vivid"] .mobile-topbar .hamburger,
[data-theme="vivid"] .mobile-topbar .login-btn {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(15,23,42,0.12);
  color: #0f172a;
}
[data-theme="vivid"] .mobile-topbar .mobile-user-dropdown {
  background: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 12px 28px rgba(15,23,42,0.12);
}
[data-theme="vivid"] .mobile-topbar .mobile-user-dropdown a { color: #0f172a; }
[data-theme="vivid"] .mobile-topbar .mobile-user-dropdown a:hover { background: rgba(15,23,42,0.06); }

/* Desktop sticky header gains a vivid pill bar below */
[data-theme="vivid"] #desktopStickyHeader {
  background: linear-gradient(135deg, rgba(99,102,241,0.22), rgba(236,72,153,0.22)) !important;
  border-bottom: 1px solid rgba(15,23,42,0.14) !important;
  color: #0f172a !important;
  box-shadow: 0 10px 28px rgba(15,23,42,0.12) !important;
}
[data-theme="vivid"] #desktopStickyHeader .site-title-text,
[data-theme="vivid"] #desktopStickyHeader .site-description,
[data-theme="vivid"] #desktopStickyHeader .notify-bell,
[data-theme="vivid"] #desktopStickyHeader .lac-balance,
[data-theme="vivid"] #desktopStickyHeader .user-info,
[data-theme="vivid"] #desktopStickyHeader .user-dropdown a {
  color: #0f172a !important;
}
[data-theme="vivid"] #headerUsernameLink { color: #0f172a !important; background: rgba(255,255,255,0.86) !important; border: 1px solid rgba(15,23,42,0.10) !important; }
[data-theme="vivid"] #headerUsernameLink:hover { background: #ffffff !important; }

/* Tabs bars (desktop) */
[data-theme="vivid"] .tabs {
  background:
    linear-gradient(135deg, rgba(99,102,241,0.10), rgba(236,72,153,0.10)),
    rgba(255,255,255,0.82);
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 12px;
  padding: 6px 8px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.12);
}
[data-theme="vivid"] .tabs .tab-button {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #0f172a;
}
[data-theme="vivid"] .tabs .tab-button.active {
  background: linear-gradient(135deg, #6366f1, #ec4899);
  border-color: #c084fc;
  color: #ffffff;
}
[data-theme="vivid"] .tabs .tab-button:hover { background: #eef2f7; }

/* Posts tabs (desktop/mobile) */
[data-theme="vivid"] .posts-tabs .posts-tab {
  background: rgba(255,255,255,0.86) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  color: #0f172a !important;
}
[data-theme="vivid"] .posts-tabs .posts-tab.active {
  background: linear-gradient(135deg, #6366f1, #ec4899) !important;
  border-color: #c084fc !important;
  color: #ffffff !important;
}
[data-theme="vivid"] .posts-tabs .posts-tab:hover { background: rgba(99,102,241,0.10) !important; }
[data-theme="vivid"] .posts-tabs.sticky {
  background:
    linear-gradient(135deg, rgba(99,102,241,0.10), rgba(236,72,153,0.10)),
    rgba(255,255,255,0.78) !important;
  border-bottom: 1px solid rgba(15,23,42,0.10) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,0.12);
}

/* Settings: ensure readable text on white surfaces */
[data-theme="vivid"] .setting-group {
  background:
    linear-gradient(135deg, rgba(99,102,241,0.06), rgba(236,72,153,0.06)),
    #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 18px rgba(15,23,42,0.10) !important;
  padding: 10px !important;
}
[data-theme="vivid"] .settings-subsection,
[data-theme="vivid"] .admin-text {
  background:
    linear-gradient(135deg, rgba(99,102,241,0.05), rgba(236,72,153,0.05)),
    #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(15,23,42,0.10) !important;
}
[data-theme="vivid"] #desktopStickyHeader .header-lang {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e5e7eb !important;
}
[data-theme="vivid"] .settings-mini-tabs .mini-tab {
  background: #f3f4f6 !important;
  color: #0f172a !important;
  border: 1px solid #d1d5db !important;
}
[data-theme="vivid"] .settings-mini-tabs .mini-tab.active {
  background: linear-gradient(135deg, #34d399, #10b981) !important;
  border-color: rgba(16,185,129,0.9) !important;
  color: #ffffff !important;
}

/* Default (Sea Blue): mini-tabs */
html:not([data-theme]) .settings-mini-tabs .mini-tab {
  background: #f3f6fb !important;
  border: 1px solid #e5e7eb !important;
  color: #0f172a !important;
}
html:not([data-theme]) .settings-mini-tabs .mini-tab.active {
  background: linear-gradient(135deg, #0ea5e9, #4f46e5) !important;
  border-color: rgba(79,70,229,0.9) !important;
  color: #ffffff !important;
}
[data-theme="vivid"] .post-word-counter { color: #334155 !important; }

/* Inputs: readable on light tinted panels */
[data-theme="vivid"] input,
[data-theme="vivid"] textarea,
[data-theme="vivid"] select {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e5e7eb !important;
}

/* Admin/Management: readable controls on light surfaces */
[data-theme="vivid"] .admin-tab-btn {
  background: #f3f4f6 !important;
  border: 1px solid #d1d5db !important;
  color: #0f172a !important;
}
[data-theme="vivid"] .admin-tab-btn.active {
  background: linear-gradient(135deg, #6366f1, #ec4899) !important;
  border-color: #c084fc !important;
  color: #ffffff !important;
}
[data-theme="vivid"] .admin-select {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
[data-theme="vivid"] .admin-row,
[data-theme="vivid"] .admin-tier-table .tier-row,
[data-theme="vivid"] .admin-row .quotas .q {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 2px solid #e2e8f0 !important;
}
[data-theme="vivid"] .admin-row,
[data-theme="vivid"] .admin-tier-table .tier-row {
  box-shadow: 0 10px 28px rgba(15,23,42,0.12), 0 0 0 1px #e2e8f0 !important;
  border-radius: 12px !important;
}
[data-theme="vivid"] .admin-row .quotas .q input {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

/* Common text elements to dark on light surfaces */
[data-theme="vivid"] .friend-name,
[data-theme="vivid"] .group-item-name,
[data-theme="vivid"] .group-item-meta,
[data-theme="vivid"] .friends-chat-header .friend-name,
[data-theme="vivid"] .group-chat-name,
[data-theme="vivid"] .site-title-text,
[data-theme="vivid"] .site-description,
[data-theme="vivid"] .post-username,
[data-theme="vivid"] .post-time {
  color: #0f172a !important;
}

/* Cards / lists: white surfaces with cool-gray edges for contrast */
[data-theme="vivid"] .conversation-list,
[data-theme="vivid"] .conversations-list,
[data-theme="vivid"] .container,
[data-theme="vivid"] .memory-panel,
[data-theme="vivid"] .settings-subsection,
[data-theme="vivid"] .friends-list-full,
[data-theme="vivid"] #postsWrapper {
  background:
    linear-gradient(135deg, rgba(99,102,241,0.06), rgba(236,72,153,0.06)),
    #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(15,23,42,0.12) !important;
}

/* Rows and buttons */
[data-theme="vivid"] #friendsList .conversation-item,
[data-theme="vivid"] #friendRequestsIncoming .conversation-item,
[data-theme="vivid"] #friendRequestsOutgoing .conversation-item {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 6px 16px rgba(15,23,42,0.10) !important;
}
[data-theme="vivid"] .conversation-item.group-list-item .group-item-row {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15,23,42,0.12);
}
[data-theme="vivid"] .control-button,
[data-theme="vivid"] .btn,
[data-theme="vivid"] .voice-button {
  background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
}
[data-theme="vivid"] .control-button:hover,
[data-theme="vivid"] .btn:hover,
[data-theme="vivid"] .voice-button:hover { background: #eef2f7; }

/* Popover menus and dropdowns */
[data-theme="vivid"] .post-menu,
[data-theme="vivid"] .user-dropdown {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 12px 28px rgba(15,23,42,0.16) !important;
}
[data-theme="vivid"] .post-menu .menu-item,
[data-theme="vivid"] .post-menu .menu-label,
[data-theme="vivid"] .user-dropdown a { color: #0f172a !important; }
[data-theme="vivid"] .post-menu .menu-item:hover { background: #f3f4f6; }
/* Mobile footer (bottom nav) — tinted backgrounds per theme */
[data-theme="vivid"] .bottom-nav .nav-inner {
  background:
    linear-gradient(135deg, rgba(99,102,241,0.12), rgba(236,72,153,0.12)),
    rgba(255,255,255,0.90) !important;
  border-top: 1px solid rgba(15,23,42,0.10) !important;
}
[data-theme="light"] .bottom-nav .nav-inner {
  background:
    linear-gradient(135deg, rgba(99, 179, 237, 0.10), rgba(59, 130, 246, 0.10)),
    rgba(255,255,255,0.92) !important;
  border-top: 1px solid rgba(0,0,0,0.12) !important;
}
[data-theme="bright"] .bottom-nav .nav-inner {
  background:
    linear-gradient(135deg, rgba(255,184,107,0.10), rgba(244,114,182,0.10)),
    rgba(255,255,255,0.96) !important;
  border-top: 1px solid rgba(17,24,39,0.08) !important;
}
/* Vivid: bottom nav item text visible on light surface */
[data-theme="vivid"] .bottom-nav .nav-item { color: #0f172a !important; }

/* Friends/Groups: options (three-dots) contrast on light/vivid */
[data-theme="light"] .group-list-options {
  color: #334155 !important;
}
[data-theme="light"] .group-list-options:hover,
[data-theme="light"] .group-list-options:focus { background: rgba(0,0,0,0.06); color: #0f172a !important; }
[data-theme="vivid"] .group-list-options { color: #0f172a !important; }
[data-theme="vivid"] .group-list-options:hover,
[data-theme="vivid"] .group-list-options:focus { background: rgba(15,23,42,0.06); color: #0f172a !important; }

/* Friends/Groups: refetch button contrast on light/vivid/bright */
[data-theme="light"] #dmMessages .dm-refetch-btn,
[data-theme="light"] #groupMessages .dm-refetch-btn,
[data-theme="vivid"] #dmMessages .dm-refetch-btn,
[data-theme="vivid"] #groupMessages .dm-refetch-btn,
[data-theme="bright"] #dmMessages .dm-refetch-btn,
[data-theme="bright"] #groupMessages .dm-refetch-btn {
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  color: #0f172a !important;
}
/* Friends/Groups: placeholder refetch button (control-button with data-refetch-lang) */
[data-theme="light"] #dmMessages .enhancement-content .control-button[data-refetch-lang],
[data-theme="light"] #groupMessages .enhancement-content .control-button[data-refetch-lang],
[data-theme="vivid"] #dmMessages .enhancement-content .control-button[data-refetch-lang],
[data-theme="vivid"] #groupMessages .enhancement-content .control-button[data-refetch-lang],
[data-theme="bright"] #dmMessages .enhancement-content .control-button[data-refetch-lang],
[data-theme="bright"] #groupMessages .enhancement-content .control-button[data-refetch-lang] {
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  color: #0f172a !important;
}
/* Default (no data-theme): refetch button readable on light surface */
html:not([data-theme]) #dmMessages .dm-refetch-btn,
html:not([data-theme]) #groupMessages .dm-refetch-btn {
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  color: #0f172a !important;
}
/* Default (no data-theme): placeholder refetch button contrast */
html:not([data-theme]) #dmMessages .enhancement-content .control-button[data-refetch-lang],
html:not([data-theme]) #groupMessages .enhancement-content .control-button[data-refetch-lang] {
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  color: #0f172a !important;
}
[data-theme="light"] #dmMessages .dm-refetch-btn:hover,
[data-theme="light"] #groupMessages .dm-refetch-btn:hover,
[data-theme="vivid"] #dmMessages .dm-refetch-btn:hover,
[data-theme="vivid"] #groupMessages .dm-refetch-btn:hover,
[data-theme="bright"] #dmMessages .dm-refetch-btn:hover,
[data-theme="bright"] #groupMessages .dm-refetch-btn:hover {
  background: #eef2f7 !important;
}
html:not([data-theme]) #dmMessages .dm-refetch-btn:hover,
html:not([data-theme]) #groupMessages .dm-refetch-btn:hover {
  background: #eef2f7 !important;
}
html:not([data-theme]) #dmMessages .enhancement-content .control-button[data-refetch-lang]:hover,
html:not([data-theme]) #groupMessages .enhancement-content .control-button[data-refetch-lang]:hover,
[data-theme="light"] #dmMessages .enhancement-content .control-button[data-refetch-lang]:hover,
[data-theme="light"] #groupMessages .enhancement-content .control-button[data-refetch-lang]:hover,
[data-theme="vivid"] #dmMessages .enhancement-content .control-button[data-refetch-lang]:hover,
[data-theme="vivid"] #groupMessages .enhancement-content .control-button[data-refetch-lang]:hover,
[data-theme="bright"] #dmMessages .enhancement-content .control-button[data-refetch-lang]:hover,
[data-theme="bright"] #groupMessages .enhancement-content .control-button[data-refetch-lang]:hover {
  background: #eef2f7 !important;
}

/* Friends/Groups: "more" (⋮) button contrast on light/default/bright/vivid */

/* Mobile Notifications: ensure readable contrast on light/default/bright/vivid/dawn */
html:not([data-theme]) #tab-notifications .notify-card,
[data-theme="light"] #tab-notifications .notify-card,
[data-theme="bright"] #tab-notifications .notify-card,
[data-theme="vivid"] #tab-notifications .notify-card,
[data-theme="dawn"] #tab-notifications .notify-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #0f172a !important;
}
html:not([data-theme]) #tab-notifications .notify-card.unread,
[data-theme="light"] #tab-notifications .notify-card.unread,
[data-theme="bright"] #tab-notifications .notify-card.unread,
[data-theme="vivid"] #tab-notifications .notify-card.unread,
[data-theme="dawn"] #tab-notifications .notify-card.unread {
  background: #eff6ff !important; /* light blue */
  border-color: #bfdbfe !important;
}
html:not([data-theme]) #tab-notifications .notify-card .notify-actor,
[data-theme="light"] #tab-notifications .notify-card .notify-actor,
[data-theme="bright"] #tab-notifications .notify-card .notify-actor,
[data-theme="vivid"] #tab-notifications .notify-card .notify-actor,
[data-theme="dawn"] #tab-notifications .notify-card .notify-actor {
  color: #0f172a !important; /* strong dark for actor/username */
}
html:not([data-theme]) #tab-notifications .notify-card .notify-context,
[data-theme="light"] #tab-notifications .notify-card .notify-context,
[data-theme="bright"] #tab-notifications .notify-card .notify-context,
[data-theme="vivid"] #tab-notifications .notify-card .notify-context,
[data-theme="dawn"] #tab-notifications .notify-card .notify-context {
  color: #475569 !important; /* slate-600 */
  opacity: 1 !important;
}
html:not([data-theme]) #tab-notifications .notify-card .notify-card-body,
[data-theme="light"] #tab-notifications .notify-card .notify-card-body,
[data-theme="bright"] #tab-notifications .notify-card .notify-card-body,
[data-theme="vivid"] #tab-notifications .notify-card .notify-card-body,
[data-theme="dawn"] #tab-notifications .notify-card .notify-card-body {
  color: #334155 !important; /* slate-700 text */
  opacity: 1 !important;
}
html:not([data-theme]) #tab-notifications .notify-card .notify-card-meta,
[data-theme="light"] #tab-notifications .notify-card .notify-card-meta,
[data-theme="bright"] #tab-notifications .notify-card .notify-card-meta,
[data-theme="vivid"] #tab-notifications .notify-card .notify-card-meta,
[data-theme="dawn"] #tab-notifications .notify-card .notify-card-meta {
  color: #64748b !important; /* slate-500 */
  opacity: 1 !important;
}
html:not([data-theme]) #tab-notifications .notify-card .notify-avatar,
[data-theme="light"] #tab-notifications .notify-card .notify-avatar,
[data-theme="bright"] #tab-notifications .notify-card .notify-avatar,
[data-theme="vivid"] #tab-notifications .notify-card .notify-avatar,
[data-theme="dawn"] #tab-notifications .notify-card .notify-avatar {
  background: #f1f5f9 !important; /* slate-100 */
}
html:not([data-theme]) .dm-actions-column .message-more-btn,
[data-theme="light"] .dm-actions-column .message-more-btn,
[data-theme="bright"] .dm-actions-column .message-more-btn,
[data-theme="vivid"] .dm-actions-column .message-more-btn {
  background: #f8fafc !important;
  border: 1px solid #e5e7eb !important;
  color: #0f172a !important;
}
html:not([data-theme]) .dm-actions-column .message-more-btn:hover,
[data-theme="light"] .dm-actions-column .message-more-btn:hover,
[data-theme="bright"] .dm-actions-column .message-more-btn:hover,
[data-theme="vivid"] .dm-actions-column .message-more-btn:hover {
  background: #eef2f7 !important;
}

/* Mobile headers: ensure back buttons are dark */
[data-theme="vivid"] .friends-chat-header .back-btn,
[data-theme="vivid"] .chat-conv-header .back-btn {
  color: #0f172a !important;
}
/* Also enforce dark back button text on light/bright headers */
[data-theme="light"] .friends-chat-header .back-btn,
[data-theme="light"] .chat-conv-header .back-btn,
[data-theme="bright"] .friends-chat-header .back-btn,
[data-theme="bright"] .chat-conv-header .back-btn {
  color: #0f172a !important;
}

/* Default (no data-theme): make mobile match desktop vivid feel */
html:not([data-theme]) .app-topbar,
html:not([data-theme]) .mobile-topbar,
html:not([data-theme]) .bottom-nav {
  background:
    linear-gradient(135deg, rgba(14,165,233,0.14), rgba(79,70,229,0.14)),
    rgba(255,255,255,0.82) !important;
  border-color: rgba(15,23,42,0.12) !important;
  color: #0f172a !important;
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
}
html:not([data-theme]) .bottom-nav .nav-inner {
  background:
    linear-gradient(135deg, rgba(14,165,233,0.14), rgba(79,70,229,0.14)),
    rgba(255,255,255,0.88) !important;
  border-top: 1px solid rgba(15,23,42,0.12) !important;
}
html:not([data-theme]) .bottom-nav .nav-item { color: #0f172a !important; }
html:not([data-theme]) .bottom-nav .nav-item.active { color: #2563eb !important; }
html:not([data-theme]) .topbar-lang,
html:not([data-theme]) .mobile-topbar .mobile-lang,
html:not([data-theme]) .mobile-topbar .hamburger,
html:not([data-theme]) .mobile-topbar .login-btn {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #0f172a;
}
html:not([data-theme]) .mobile-topbar .mobile-user-dropdown {
  background: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 12px 28px rgba(15,23,42,0.12);
}
html:not([data-theme]) .mobile-topbar .mobile-user-dropdown a { color: #0f172a; }
html:not([data-theme]) .mobile-topbar .mobile-user-dropdown a:hover { background: rgba(15,23,42,0.06); }

/* Default (no data-theme): extend blue–indigo feel to backgrounds and panels */
html:not([data-theme]) body {
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(14,165,233,0.12) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(900px 700px at 110% 0%, rgba(79,70,229,0.12) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(180deg, #f5f9ff 0%, #f6f7fc 60%, #f7f8fb 100%);
  color: #0f172a;
}
html:not([data-theme]) .mobile-app-body {
  background:
    radial-gradient(1000px 700px at 10% -10%, rgba(14,165,233,0.12) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(800px 600px at 110% 0%, rgba(79,70,229,0.12) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(180deg, #f5f9ff 0%, #f5f7fb 60%, #f5f7fb 100%);
  color: #0f172a;
}
html:not([data-theme]) .friends-chat-header,
html:not([data-theme]) .chat-conv-header {
  background:
    linear-gradient(135deg, rgba(14,165,233,0.10), rgba(79,70,229,0.10));
  border-bottom: 1px solid rgba(15,23,42,0.12) !important;
}
/* Default (no data-theme): chat overlay topbar */
html:not([data-theme]) .chat-conv-topbar {
  background:
    linear-gradient(135deg, rgba(14,165,233,0.12), rgba(79,70,229,0.12)),
    rgba(255,255,255,0.92) !important;
  border-bottom: 1px solid #e5e7eb !important;
  color: #0f172a !important;
}
html:not([data-theme]) .chat-conv-topbar .chat-nav-btn,
html:not([data-theme]) .chat-conv-topbar .chat-back-label,
html:not([data-theme]) .chat-conv-topbar .chat-back-icon,
html:not([data-theme]) .chat-conv-topbar .chat-back-emoji,
html:not([data-theme]) .chat-conv-topbar .chat-topbar-title {
  color: #0f172a !important;
}
html:not([data-theme]) .friends-chat-header .back-btn,
html:not([data-theme]) .chat-conv-header .back-btn { color: #0f172a !important; }

/* Default (no data-theme): ensure group/chat names are readable on light headers */
html:not([data-theme]) .group-chat-name,
html:not([data-theme]) #groupsChatName {
  color: #0f172a !important;
}
/* Welcome guide complete label: dark text on light/default themes */
html:not([data-theme]) .guide-complete-row,
[data-theme="light"] .guide-complete-row,
[data-theme="bright"] .guide-complete-row,
[data-theme="vivid"] .guide-complete-row {
  color: #0f172a !important;
}
/* Default (no data-theme): group list rows — ensure dark text on light surfaces */
html:not([data-theme]) .group-item-name,
html:not([data-theme]) .group-item-meta {
  color: #0f172a !important;
}

/* Default/Light/Bright/Vivid: Light modal styles (auth + generic) */
html:not([data-theme]) .modal-card,
[data-theme="light"] .modal-card,
[data-theme="bright"] .modal-card,
[data-theme="vivid"] .modal-card,
html:not([data-theme]) .modal-dialog,
[data-theme="light"] .modal-dialog,
[data-theme="bright"] .modal-dialog,
[data-theme="vivid"] .modal-dialog {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #0f172a !important;
  box-shadow: 0 18px 40px rgba(17,24,39,0.12), 0 0 0 1px #e5e7eb !important;
}
html:not([data-theme]) .modal-header,
[data-theme="light"] .modal-header,
[data-theme="bright"] .modal-header,
[data-theme="vivid"] .modal-header {
  border-bottom: 1px solid #e5e7eb !important;
}
html:not([data-theme]) .modal-footer,
[data-theme="light"] .modal-footer,
[data-theme="bright"] .modal-footer,
[data-theme="vivid"] .modal-footer {
  border-top: 1px solid #e5e7eb !important;
}
html:not([data-theme]) .modal-close,
[data-theme="light"] .modal-close,
[data-theme="bright"] .modal-close,
[data-theme="vivid"] .modal-close { color: #0f172a !important; }

/* -------- Groups: Pending Requests popup (desktop) on light/default/bright/vivid -------- */
/* Lighten the overlay slightly and render the card as a light surface */
html:not([data-theme]) .group-requests-modal,
[data-theme="light"] .group-requests-modal,
[data-theme="bright"] .group-requests-modal,
[data-theme="vivid"] .group-requests-modal {
  /* Slightly stronger backdrop so the dialog stands out */
  background: rgba(0,0,0,0.5) !important;
}
html:not([data-theme]) .group-requests-card,
[data-theme="light"] .group-requests-card,
[data-theme="bright"] .group-requests-card,
[data-theme="vivid"] .group-requests-card {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 18px 40px rgba(17,24,39,0.12), 0 0 0 1px #e5e7eb !important;
}
/* Explain dialog sections on light surfaces */
html:not([data-theme]) .ex-chip,
[data-theme="light"] .ex-chip,
[data-theme="bright"] .ex-chip,
[data-theme="vivid"] .ex-chip { background: rgba(59,130,246,0.12); border-color: rgba(17,24,39,0.08); color:#0f172a; }
html:not([data-theme]) .ex-section,
[data-theme="light"] .ex-section,
[data-theme="bright"] .ex-section,
[data-theme="vivid"] .ex-section { border-color:#e5e7eb; }
html:not([data-theme]) .ex-summary,
[data-theme="light"] .ex-summary,
[data-theme="bright"] .ex-summary,
[data-theme="vivid"] .ex-summary { background: linear-gradient(0deg, rgba(16,185,129,0.15), rgba(16,185,129,0.12)); }
html:not([data-theme]) .ex-vocab,
[data-theme="light"] .ex-vocab,
[data-theme="bright"] .ex-vocab,
[data-theme="vivid"] .ex-vocab { background: linear-gradient(0deg, rgba(59,130,246,0.15), rgba(59,130,246,0.12)); }
html:not([data-theme]) .ex-grammar,
[data-theme="light"] .ex-grammar,
[data-theme="bright"] .ex-grammar,
[data-theme="vivid"] .ex-grammar { background: linear-gradient(0deg, rgba(139,92,246,0.15), rgba(139,92,246,0.12)); }
html:not([data-theme]) .ex-usage,
[data-theme="light"] .ex-usage,
[data-theme="bright"] .ex-usage,
[data-theme="vivid"] .ex-usage { background: linear-gradient(0deg, rgba(245,158,11,0.15), rgba(245,158,11,0.12)); }
html:not([data-theme]) .ex-gloss,
[data-theme="light"] .ex-gloss,
[data-theme="bright"] .ex-gloss,
[data-theme="vivid"] .ex-gloss { background: linear-gradient(0deg, rgba(203,213,225,0.18), rgba(203,213,225,0.12)); }
/* Apply the same light-surface treatment to generic dialog used by Explain */
html:not([data-theme]) .group-requests-dialog,
[data-theme="light"] .group-requests-dialog,
[data-theme="bright"] .group-requests-dialog,
[data-theme="vivid"] .group-requests-dialog {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 18px 40px rgba(17,24,39,0.12), 0 0 0 1px #e5e7eb !important;
}
html:not([data-theme]) .group-requests-header,
[data-theme="light"] .group-requests-header,
[data-theme="bright"] .group-requests-header,
[data-theme="vivid"] .group-requests-header {
  border-bottom: 1px solid #e5e7eb !important;
}
html:not([data-theme]) .group-requests-close,
[data-theme="light"] .group-requests-close,
[data-theme="bright"] .group-requests-close,
[data-theme="vivid"] .group-requests-close {
  color: #0f172a !important;
}
/* Items inside the list on light surfaces */
html:not([data-theme]) .group-requests-list .pending-item,
[data-theme="light"] .group-requests-list .pending-item,
[data-theme="bright"] .group-requests-list .pending-item,
[data-theme="vivid"] .group-requests-list .pending-item {
  background: #f8fafc !important; /* slate-50 */
  border: 1px solid #e5e7eb !important;
  color: #0f172a !important;
}
html:not([data-theme]) .group-requests-list .pending-item .pending-timestamp,
[data-theme="light"] .group-requests-list .pending-item .pending-timestamp,
[data-theme="bright"] .group-requests-list .pending-item .pending-timestamp,
[data-theme="vivid"] .group-requests-list .pending-item .pending-timestamp {
  color: #475569 !important; /* slate-600 */
}
/* Empty and loading rows readable on light surfaces */
html:not([data-theme]) .pending-empty,
[data-theme="light"] .pending-empty,
[data-theme="bright"] .pending-empty,
[data-theme="vivid"] .pending-empty {
  background: #f1f5f9 !important; /* slate-100 */
  border: 1px solid #e5e7eb !important;
  color: #0f172a !important;
}

/* -------- Invite management (desktop) on light/default/bright/vivid -------- */
/* Invite list cards */
html:not([data-theme]) .invite-item,
[data-theme="light"] .invite-item,
[data-theme="bright"] .invite-item,
[data-theme="vivid"] .invite-item {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #0f172a !important;
}
html:not([data-theme]) .invite-item.invite-empty,
[data-theme="light"] .invite-item.invite-empty,
[data-theme="bright"] .invite-item.invite-empty,
[data-theme="vivid"] .invite-item.invite-empty {
  background: #f8fafc !important;
  border: 1px dashed #e5e7eb !important;
  color: #0f172a !important;
}
/* Chips and badges */
html:not([data-theme]) .code-chip,
[data-theme="light"] .code-chip,
[data-theme="bright"] .code-chip,
[data-theme="vivid"] .code-chip,
html:not([data-theme]) .invite-code-badge,
[data-theme="light"] .invite-code-badge,
[data-theme="bright"] .invite-code-badge,
[data-theme="vivid"] .invite-code-badge {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
html:not([data-theme]) .invite-lang-chip,
[data-theme="light"] .invite-lang-chip,
[data-theme="bright"] .invite-lang-chip,
[data-theme="vivid"] .invite-lang-chip,
html:not([data-theme]) .invite-usage-count,
[data-theme="light"] .invite-usage-count,
[data-theme="bright"] .invite-usage-count,
[data-theme="vivid"] .invite-usage-count,
html:not([data-theme]) .invite-remaining-chip,
[data-theme="light"] .invite-remaining-chip,
[data-theme="bright"] .invite-remaining-chip,
[data-theme="vivid"] .invite-remaining-chip {
  background: #eef2ff !important; /* indigo-50 */
  border: 1px solid #c7d2fe !important; /* indigo-200 */
  color: #0f172a !important;
}
/* Status pills on light surfaces */
html:not([data-theme]) .invite-pill-unused,
[data-theme="light"] .invite-pill-unused,
[data-theme="bright"] .invite-pill-unused,
[data-theme="vivid"] .invite-pill-unused { background:#dcfce7 !important; border-color:#86efac !important; color:#0f172a !important; }
html:not([data-theme]) .invite-pill-used,
[data-theme="light"] .invite-pill-used,
[data-theme="bright"] .invite-pill-used,
[data-theme="vivid"] .invite-pill-used { background:#dbeafe !important; border-color:#60a5fa !important; color:#0f172a !important; }
html:not([data-theme]) .invite-pill-inactive,
[data-theme="light"] .invite-pill-inactive,
[data-theme="bright"] .invite-pill-inactive,
[data-theme="vivid"] .invite-pill-inactive { background:#fee2e2 !important; border-color:#fca5a5 !important; color:#0f172a !important; }
html:not([data-theme]) .invite-pill-exhausted,
[data-theme="light"] .invite-pill-exhausted,
[data-theme="bright"] .invite-pill-exhausted,
[data-theme="vivid"] .invite-pill-exhausted { background:#ffedd5 !important; border-color:#fdba74 !important; color:#0f172a !important; }
html:not([data-theme]) .invite-pill-group,
[data-theme="light"] .invite-pill-group,
[data-theme="bright"] .invite-pill-group,
[data-theme="vivid"] .invite-pill-group { background:#e0e7ff !important; border-color:#a5b4fc !important; color:#0f172a !important; }
html:not([data-theme]) .invite-pill-warning,
[data-theme="light"] .invite-pill-warning,
[data-theme="bright"] .invite-pill-warning,
[data-theme="vivid"] .invite-pill-warning { background:#fef9c3 !important; border-color:#facc15 !important; color:#0f172a !important; }

/* Admin list row & filters */
html:not([data-theme]) .admin-invite-row,
[data-theme="light"] .admin-invite-row,
[data-theme="bright"] .admin-invite-row,
[data-theme="vivid"] .admin-invite-row {
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  color:#0f172a !important;
}
html:not([data-theme]) .admin-invite-create label,
[data-theme="light"] .admin-invite-create label,
[data-theme="bright"] .admin-invite-create label,
[data-theme="vivid"] .admin-invite-create label,
html:not([data-theme]) .admin-invite-filters label,
[data-theme="light"] .admin-invite-filters label,
[data-theme="bright"] .admin-invite-filters label,
[data-theme="vivid"] .admin-invite-filters label { color:#0f172a !important; }
html:not([data-theme]) .admin-invite-create input,
[data-theme="light"] .admin-invite-create input,
[data-theme="bright"] .admin-invite-create input,
[data-theme="vivid"] .admin-invite-create input,
html:not([data-theme]) .admin-invite-create select,
[data-theme="light"] .admin-invite-create select,
[data-theme="bright"] .admin-invite-create select,
[data-theme="vivid"] .admin-invite-create select,
html:not([data-theme]) .admin-invite-filters select,
[data-theme="light"] .admin-invite-filters select,
[data-theme="bright"] .admin-invite-filters select,
[data-theme="vivid"] .admin-invite-filters select {
  background:#ffffff !important;
  border:1px solid #cbd5e1 !important;
  color:#0f172a !important;
}
html:not([data-theme]) .admin-invite-row .invite-col code,
[data-theme="light"] .admin-invite-row .invite-col code,
[data-theme="bright"] .admin-invite-row .invite-col code,
[data-theme="vivid"] .admin-invite-row .invite-col code {
  background:#f1f5f9 !important;
  color:#0f172a !important;
}
html:not([data-theme]) .inv-summary,
[data-theme="light"] .inv-summary,
[data-theme="bright"] .inv-summary,
[data-theme="vivid"] .inv-summary { color:#0f172a !important; }

/* Modal tabs on light themes */
html:not([data-theme]) .modal-tab,
[data-theme="light"] .modal-tab,
[data-theme="bright"] .modal-tab,
[data-theme="vivid"] .modal-tab {
  background: #f3f6fb !important;
  border: 1px solid #e5e7eb !important;
  color: #0f172a !important;
}
html:not([data-theme]) .modal-tab.active,
[data-theme="light"] .modal-tab.active,
[data-theme="bright"] .modal-tab.active,
[data-theme="vivid"] .modal-tab.active {
  background: linear-gradient(135deg, #0ea5e9, #4f46e5) !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
}

/* Auth inputs inside modals on light themes */
html:not([data-theme]) .modal-card .auth-form input,
[data-theme="light"] .modal-card .auth-form input,
[data-theme="bright"] .modal-card .auth-form input,
[data-theme="vivid"] .modal-card .auth-form input,
html:not([data-theme]) .modal-dialog .auth-form input,
[data-theme="light"] .modal-dialog .auth-form input,
[data-theme="bright"] .modal-dialog .auth-form input,
[data-theme="vivid"] .modal-dialog .auth-form input {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
html:not([data-theme]) .modal-card .auth-form label,
[data-theme="light"] .modal-card .auth-form label,
[data-theme="bright"] .modal-card .auth-form label,
[data-theme="vivid"] .modal-card .auth-form label,
html:not([data-theme]) .modal-dialog .auth-form label,
[data-theme="light"] .modal-dialog .auth-form label,
[data-theme="bright"] .modal-dialog .auth-form label,
[data-theme="vivid"] .modal-dialog .auth-form label {
  color: #0f172a !important;
}
html:not([data-theme]) .modal-card .pw-toggle,
[data-theme="light"] .modal-card .pw-toggle,
[data-theme="bright"] .modal-card .pw-toggle,
[data-theme="vivid"] .modal-card .pw-toggle,
html:not([data-theme]) .modal-dialog .pw-toggle,
[data-theme="light"] .modal-dialog .pw-toggle,
[data-theme="bright"] .modal-dialog .pw-toggle,
[data-theme="vivid"] .modal-dialog .pw-toggle { color: #0f172a !important; }

/* Register avatar box in modal (light) */
html:not([data-theme]) .me-register-avatar,
[data-theme="light"] .me-register-avatar,
[data-theme="bright"] .me-register-avatar,
[data-theme="vivid"] .me-register-avatar {
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid #e5e7eb !important;
  color: #0f172a !important;
}
html:not([data-theme]) .me-register-avatar-trigger,
[data-theme="light"] .me-register-avatar-trigger,
[data-theme="bright"] .me-register-avatar-trigger,
[data-theme="vivid"] .me-register-avatar-trigger {
  border-color: #cbd5e1 !important;
  background: rgba(15,23,42,0.06) !important;
}
html:not([data-theme]) .me-register-avatar-trigger:hover,
[data-theme="light"] .me-register-avatar-trigger:hover,
[data-theme="bright"] .me-register-avatar-trigger:hover,
[data-theme="vivid"] .me-register-avatar-trigger:hover {
  border-color: rgba(59,130,246,0.85) !important;
  background: rgba(14,165,233,0.14) !important;
}
html:not([data-theme]) .me-register-avatar-trigger::after,
[data-theme="light"] .me-register-avatar-trigger::after,
[data-theme="bright"] .me-register-avatar-trigger::after,
[data-theme="vivid"] .me-register-avatar-trigger::after { background: #3b82f6 !important; color: #ffffff !important; }

/* Modal alert rows readable on light surfaces */
html:not([data-theme]) .modal-msg,
[data-theme="light"] .modal-msg,
[data-theme="bright"] .modal-msg,
[data-theme="vivid"] .modal-msg { color: #0f172a !important; }

/* -------- Voice settings: light theme readability -------- */
/* Containers */
html:not([data-theme]) .voice-selector,
[data-theme="light"] .voice-selector,
[data-theme="bright"] .voice-selector,
[data-theme="vivid"] .voice-selector {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(17,24,39,0.08) !important;
}
html:not([data-theme]) .voice-row,
[data-theme="light"] .voice-row,
[data-theme="bright"] .voice-row,
[data-theme="vivid"] .voice-row {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}
html:not([data-theme]) .voice-row-title,
[data-theme="light"] .voice-row-title,
[data-theme="bright"] .voice-row-title,
[data-theme="vivid"] .voice-row-title { color: #0f172a !important; }
html:not([data-theme]) .current-voice-tag,
[data-theme="light"] .current-voice-tag,
[data-theme="bright"] .current-voice-tag,
[data-theme="vivid"] .current-voice-tag {
  background: rgba(14,165,233,0.15) !important;
  color: #0f172a !important;
  border: 1px solid rgba(59,130,246,0.25) !important;
}

/* Hints / quotas */
html:not([data-theme]) .voice-custom-hint,
[data-theme="light"] .voice-custom-hint,
[data-theme="bright"] .voice-custom-hint,
[data-theme="vivid"] .voice-custom-hint,
html:not([data-theme]) .voice-quota,
[data-theme="light"] .voice-quota,
[data-theme="bright"] .voice-quota,
[data-theme="vivid"] .voice-quota { color: #475569 !important; }

/* Custom panel + toggle */
html:not([data-theme]) .voice-custom-panel,
[data-theme="light"] .voice-custom-panel,
[data-theme="bright"] .voice-custom-panel,
[data-theme="vivid"] .voice-custom-panel {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}
html:not([data-theme]) .voice-profiles-toggle,
[data-theme="light"] .voice-profiles-toggle,
[data-theme="bright"] .voice-profiles-toggle,
[data-theme="vivid"] .voice-profiles-toggle {
  background: #f3f6fb !important;
  border: 1px solid #e5e7eb !important;
  color: #0f172a !important;
}
html:not([data-theme]) .voice-profiles-toggle:hover,
[data-theme="light"] .voice-profiles-toggle:hover,
[data-theme="bright"] .voice-profiles-toggle:hover,
[data-theme="vivid"] .voice-profiles-toggle:hover,
html:not([data-theme]) .voice-profiles-toggle:focus,
[data-theme="light"] .voice-profiles-toggle:focus,
[data-theme="bright"] .voice-profiles-toggle:focus,
[data-theme="vivid"] .voice-profiles-toggle:focus {
  background: #eaf2fd !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* Default (no data-theme): friends/groups lists use light surfaces with subtle blue tint */
html:not([data-theme]) .friends-list-full,
html:not([data-theme]) #friendsListView .conversation-list,
html:not([data-theme]) #friendRequestsIncoming,
html:not([data-theme]) #friendRequestsOutgoing,
html:not([data-theme]) #friendsList {
  background:
    linear-gradient(135deg, rgba(14,165,233,0.04), rgba(79,70,229,0.04)),
    #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
}
html:not([data-theme]) #friendsList .conversation-item,
html:not([data-theme]) #friendRequestsIncoming .conversation-item,
html:not([data-theme]) #friendRequestsOutgoing .conversation-item {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
html:not([data-theme]) #friendsList .conversation-item:hover,
html:not([data-theme]) #friendRequestsIncoming .conversation-item:hover,
html:not([data-theme]) #friendRequestsOutgoing .conversation-item:hover {
  background: #f3f6fb !important;
}
html:not([data-theme]) #friendsList .friend-avatar { border-color: #e5e7eb !important; }

/* Default (no data-theme): group rows use light surface */
html:not([data-theme]) .conversation-item.group-list-item .group-item-row {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
}
html:not([data-theme]) .conversation-item.group-list-item.selected .group-item-row {
  background: #f3f6fb !important;
}
html:not([data-theme]) .group-list-options {
  color: #334155 !important;
}
html:not([data-theme]) .group-list-options:hover,
html:not([data-theme]) .group-list-options:focus {
  background: rgba(15,23,42,0.06) !important;
  color: #0f172a !important;
}

/* Default (no data-theme): keep DM/Group enhancement cards dark for legibility */
html:not([data-theme]) .dm-enh-grid .enhancement-card,
html:not([data-theme]) #dmMessages .enhancement-card,
html:not([data-theme]) #groupMessages .enhancement-card {
  background: rgba(15, 23, 42, 0.94) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.38) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.32) !important;
}

/* Default (no data-theme): lighten composer/footer for full white chat feel */
html:not([data-theme]) .friends-chat-composer,
html:not([data-theme]) .chat-conv-footer {
  background: rgba(255,255,255,0.92) !important;
  border-top: 1px solid #e5e7eb !important;
  color: #0f172a !important;
}
html:not([data-theme]) .friends-chat-composer textarea,
html:not([data-theme]) .chat-conv-footer textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e5e7eb !important;
}
html:not([data-theme]) .chat-topbar-title { color: #0f172a !important; }

/* Default (no data-theme): panels and settings blocks with subtle tint */
html:not([data-theme]) .conversation-list,
html:not([data-theme]) .conversations-list,
html:not([data-theme]) .container,
html:not([data-theme]) .memory-panel,
html:not([data-theme]) .settings-subsection,
html:not([data-theme]) #postsWrapper {
  background:
    linear-gradient(135deg, rgba(14,165,233,0.06), rgba(79,70,229,0.06)),
    #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(15,23,42,0.12) !important;
}
/* Default (no data-theme): override mobile transparent chat lists to light surfaces */
html:not([data-theme]) .friends-chat-body #dmMessages,
html:not([data-theme]) .friends-chat-body #groupMessages,
html:not([data-theme]) #dmMessages.conversation-list,
html:not([data-theme]) #groupMessages.conversation-list {
  background:
    linear-gradient(135deg, rgba(14,165,233,0.06), rgba(79,70,229,0.06)),
    #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
}
/* Default (no data-theme): Chat tab overlay list */
html:not([data-theme]) .mobile-app-body #chatConvView .conversation-list,
html:not([data-theme]) .mobile-app-body #conversationList.conversation-list {
  background:
    linear-gradient(135deg, rgba(14,165,233,0.06), rgba(79,70,229,0.06)),
    #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
}
/* Default (no data-theme): reinforce Groups chat list background */
html:not([data-theme]) #tab-groups #groupMessages,
html:not([data-theme]) #tab-groups #groupMessages.conversation-list {
  background:
    linear-gradient(135deg, rgba(14,165,233,0.06), rgba(79,70,229,0.06)),
    #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
}
/* Default (no data-theme): ensure Groups chat body wrapper is light too */
html:not([data-theme]) #groupsChatView .friends-chat-body {
  background:
    linear-gradient(135deg, rgba(14,165,233,0.04), rgba(79,70,229,0.04)),
    #ffffff !important;
}
html:not([data-theme]) .setting-group {
  background:
    linear-gradient(135deg, rgba(14,165,233,0.05), rgba(79,70,229,0.05)),
    #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 18px rgba(17,24,39,0.08) !important;
  padding: 10px !important;
}
html:not([data-theme]) input,
html:not([data-theme]) textarea,
html:not([data-theme]) select {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e5e7eb !important;
}

/* Mobile chat headers: apply subtle prism tint */
[data-theme="vivid"] .friends-chat-header,
[data-theme="vivid"] .chat-conv-header {
  background:
    linear-gradient(135deg, rgba(99,102,241,0.10), rgba(236,72,153,0.10));
  border-bottom: 1px solid rgba(15,23,42,0.10) !important;
}

/* ===================== Aurora Drift theme ===================== */
[data-theme="aurora"] #desktopStickyHeader {
  /* Deep space with aurora tint */
  background:
    linear-gradient(135deg, rgba(2,6,23,0.92), rgba(17,24,39,0.92)) ,
    radial-gradient(700px 200px at 20% 0%, rgba(125,211,252,0.22) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(700px 200px at 80% 0%, rgba(167,139,250,0.20) 0%, rgba(0,0,0,0) 60%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  color: #e5e7eb !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35) !important;
}
[data-theme="aurora"] #desktopStickyHeader .site-title-text,
[data-theme="aurora"] #desktopStickyHeader .site-description,
[data-theme="aurora"] #desktopStickyHeader .notify-bell,
[data-theme="aurora"] #desktopStickyHeader .lac-balance,
[data-theme="aurora"] #desktopStickyHeader .user-info,
[data-theme="aurora"] #desktopStickyHeader .user-dropdown a { color: #e5e7eb !important; }
[data-theme="aurora"] #desktopStickyHeader .header-lang {
  background: rgba(255,255,255,0.08) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}
[data-theme="aurora"] #headerUsernameLink {
  color: #e5e7eb !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}
[data-theme="aurora"] #headerUsernameLink:hover { background: rgba(255,255,255,0.12) !important; }

/* ===================== Dark theme header ===================== */
[data-theme="dark"] #desktopStickyHeader {
  background: linear-gradient(135deg, #0b1220, #111827) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  color: #e5e7eb !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
[data-theme="dark"] #desktopStickyHeader .site-title-text,
[data-theme="dark"] #desktopStickyHeader .site-description,
[data-theme="dark"] #desktopStickyHeader .notify-bell,
[data-theme="dark"] #desktopStickyHeader .lac-balance,
[data-theme="dark"] #desktopStickyHeader .user-info,
[data-theme="dark"] #desktopStickyHeader .user-dropdown a { color: #e5e7eb !important; }
[data-theme="dark"] #desktopStickyHeader .header-lang {
  background: rgba(17,24,39,0.6) !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}
[data-theme="dark"] #headerUsernameLink {
  color: #e5e7eb !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}
[data-theme="dark"] #headerUsernameLink:hover { background: rgba(255,255,255,0.12) !important; }

/* ===================== Dark theme: Friends/Groups chat surfaces (mobile + desktop) ===================== */
/* Mobile chat headers and in-conversation headers */
[data-theme="dark"] .friends-chat-header,
[data-theme="dark"] .chat-conv-header,
[data-theme="dark"] .chat-conv-topbar {
  background: linear-gradient(135deg, rgba(11,18,32,0.92), rgba(17,24,39,0.92));
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  color: #e5e7eb !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
[data-theme="dark"] .friends-chat-header .back-btn,
[data-theme="dark"] .chat-conv-header .back-btn,
[data-theme="dark"] .chat-conv-topbar .chat-nav-btn,
[data-theme="dark"] .chat-conv-topbar .chat-back-label,
[data-theme="dark"] .chat-conv-topbar .chat-back-icon,
[data-theme="dark"] .chat-conv-topbar .chat-back-emoji,
[data-theme="dark"] .chat-topbar-title { color: #e5e7eb !important; }

/* Message lists and panels */
[data-theme="dark"] .conversation-list,
[data-theme="dark"] #dmMessages.conversation-list,
[data-theme="dark"] #groupMessages.conversation-list,
[data-theme="dark"] #chatConvView .conversation-list,
[data-theme="dark"] #conversationList.conversation-list {
  background: linear-gradient(135deg, rgba(2,6,23,0.66), rgba(17,24,39,0.66)), #0b1220 !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 12px !important;
}
[data-theme="dark"] #tab-groups #groupMessages,
[data-theme="dark"] #tab-groups #groupMessages.conversation-list {
  background: linear-gradient(135deg, rgba(2,6,23,0.66), rgba(17,24,39,0.66)), #0b1220 !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 12px !important;
}
[data-theme="dark"] #groupsChatView .friends-chat-body {
  background: linear-gradient(135deg, rgba(2,6,23,0.35), rgba(17,24,39,0.35)), #0b1220 !important;
}

/* Composer / input area */
[data-theme="dark"] .friends-chat-composer,
[data-theme="dark"] .chat-conv-footer {
  background: rgba(2,6,23,0.86) !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
  color: #e5e7eb !important;
}
[data-theme="dark"] .friends-chat-composer textarea,
[data-theme="dark"] .chat-conv-footer textarea {
  background: rgba(17,24,39,0.75) !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}

/* Text readability on dark */
[data-theme="dark"] .friend-name,
[data-theme="dark"] .group-item-name,
[data-theme="dark"] .group-item-meta,
[data-theme="dark"] .friends-chat-header .friend-name,
[data-theme="dark"] .group-chat-name {
  color: #e5e7eb !important;
}
[data-theme="dark"] .group-list-options { color: #e5e7eb !important; }

/* ===================== Light theme: enforce mobile chat surfaces over mobile_app.css resets ===================== */
html[data-theme="light"] body.mobile-app-body #chatConvView .conversation-list,
html[data-theme="light"] body.mobile-app-body #conversationList.conversation-list,
html[data-theme="light"] body.mobile-app-body #dmMessages.conversation-list,
html[data-theme="light"] body.mobile-app-body #groupMessages.conversation-list {
  background:
    linear-gradient(135deg, rgba(99, 179, 237, 0.05), rgba(59, 130, 246, 0.05)),
    #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
}
[data-theme="light"] #groupsChatView .friends-chat-body,
html[data-theme="light"] body.mobile-app-body #tab-groups #groupMessages {
  background:
    linear-gradient(135deg, rgba(99, 179, 237, 0.04), rgba(59, 130, 246, 0.04)),
    #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
}
[data-theme="light"] .friends-chat-header,
[data-theme="light"] .chat-conv-header {
  background:
    linear-gradient(135deg, rgba(99, 179, 237, 0.08), rgba(59, 130, 246, 0.08)),
    rgba(255,255,255,0.92) !important;
  border-bottom: 1px solid rgba(17,19,24,0.12) !important;
  color: #0f172a !important;
}
html[data-theme="light"] body.mobile-app-body .friends-chat-composer,
html[data-theme="light"] body.mobile-app-body .chat-conv-footer {
  background: rgba(255,255,255,0.92) !important;
  border-top: 1px solid rgba(17,19,24,0.12) !important;
  color: #0f172a !important;
}
html[data-theme="light"] body.mobile-app-body .friends-chat-composer textarea,
html[data-theme="light"] body.mobile-app-body .chat-conv-footer textarea {
  background: rgba(17,19,24,0.05) !important;
  color: #0f172a !important;
  border: 1px solid rgba(17,19,24,0.18) !important;
}

/* ===================== Bright (Radiant Dawn) theme: mobile chat surfaces ===================== */
html[data-theme="bright"] body.mobile-app-body #chatConvView .conversation-list,
html[data-theme="bright"] body.mobile-app-body #conversationList.conversation-list,
html[data-theme="bright"] body.mobile-app-body #dmMessages.conversation-list,
html[data-theme="bright"] body.mobile-app-body #groupMessages.conversation-list {
  background: #ffffff !important;
  color: #111318 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
}
[data-theme="bright"] #groupsChatView .friends-chat-body,
html[data-theme="bright"] body.mobile-app-body #tab-groups #groupMessages {
  background: #ffffff !important;
  color: #111318 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
}
[data-theme="bright"] .friends-chat-header,
[data-theme="bright"] .chat-conv-header {
  background: rgba(255,255,255,0.96) !important;
  border-bottom: 1px solid rgba(17,24,39,0.08) !important;
  color: #111318 !important;
}
html[data-theme="bright"] body.mobile-app-body .friends-chat-composer,
html[data-theme="bright"] body.mobile-app-body .chat-conv-footer {
  background: rgba(255,255,255,0.96) !important;
  border-top: 1px solid #e5e7eb !important;
  color: #111318 !important;
}
html[data-theme="bright"] body.mobile-app-body .friends-chat-composer textarea,
html[data-theme="bright"] body.mobile-app-body .chat-conv-footer textarea {
  background: #ffffff !important;
  color: #111318 !important;
  border: 1px solid #e5e7eb !important;
}

/* ===================== Vivid Prism theme: mobile chat surfaces ===================== */
html[data-theme="vivid"] body.mobile-app-body #chatConvView .conversation-list,
html[data-theme="vivid"] body.mobile-app-body #conversationList.conversation-list,
html[data-theme="vivid"] body.mobile-app-body #dmMessages.conversation-list,
html[data-theme="vivid"] body.mobile-app-body #groupMessages.conversation-list {
  background:
    linear-gradient(135deg, rgba(99,102,241,0.06), rgba(236,72,153,0.06)),
    #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
}
[data-theme="vivid"] #groupsChatView .friends-chat-body,
html[data-theme="vivid"] body.mobile-app-body #tab-groups #groupMessages {
  background:
    linear-gradient(135deg, rgba(99,102,241,0.05), rgba(236,72,153,0.05)),
    #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
}
[data-theme="vivid"] .friends-chat-header,
[data-theme="vivid"] .chat-conv-header {
  background:
    linear-gradient(135deg, rgba(99,102,241,0.10), rgba(236,72,153,0.10)),
    rgba(255,255,255,0.86) !important;
  border-bottom: 1px solid rgba(15,23,42,0.10) !important;
  color: #0f172a !important;
}
html[data-theme="vivid"] body.mobile-app-body .friends-chat-composer,
html[data-theme="vivid"] body.mobile-app-body .chat-conv-footer {
  background: rgba(255,255,255,0.90) !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}
html[data-theme="vivid"] body.mobile-app-body .friends-chat-composer textarea,
html[data-theme="vivid"] body.mobile-app-body .chat-conv-footer textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e5e7eb !important;
}

/* ===================== Legacy (Sea Blue gradient) theme: mobile chat surfaces ===================== */
html[data-theme="legacy"] body.mobile-app-body #chatConvView .conversation-list,
html[data-theme="legacy"] body.mobile-app-body #conversationList.conversation-list,
html[data-theme="legacy"] body.mobile-app-body #dmMessages.conversation-list,
html[data-theme="legacy"] body.mobile-app-body #groupMessages.conversation-list {
  background:
    linear-gradient(135deg, rgba(14,165,233,0.08), rgba(79,70,229,0.08)),
    #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
}
[data-theme="legacy"] #groupsChatView .friends-chat-body,
html[data-theme="legacy"] body.mobile-app-body #tab-groups #groupMessages {
  background:
    linear-gradient(135deg, rgba(14,165,233,0.06), rgba(79,70,229,0.06)),
    #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
}
[data-theme="legacy"] .friends-chat-header,
[data-theme="legacy"] .chat-conv-header {
  background:
    linear-gradient(135deg, rgba(14,165,233,0.18), rgba(79,70,229,0.18)),
    rgba(255,255,255,0.88) !important;
  border-bottom: 1px solid rgba(15,23,42,0.12) !important;
  color: #0f172a !important;
}
html[data-theme="legacy"] body.mobile-app-body .friends-chat-composer,
html[data-theme="legacy"] body.mobile-app-body .chat-conv-footer {
  background:
    linear-gradient(135deg, rgba(14,165,233,0.10), rgba(79,70,229,0.10)),
    rgba(255,255,255,0.92) !important;
  border-top: 1px solid #e5e7eb !important;
  color: #0f172a !important;
}
html[data-theme="legacy"] body.mobile-app-body .friends-chat-composer textarea,
html[data-theme="legacy"] body.mobile-app-body .chat-conv-footer textarea {
  background: rgba(15,23,42,0.04) !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}

/* ===================== Default (Legacy) theme ===================== */
[data-theme="legacy"] {
  color-scheme: light;
}
[data-theme="legacy"] body {
  /* Deep legacy: solid blue→indigo gradient using provided swatches */
  background: linear-gradient(135deg, rgb(103,123,230) 0%, rgb(121,127,219) 100%);
  color: #0f172a;
}
[data-theme="legacy"] .mobile-app-body {
  background: linear-gradient(135deg, rgb(103,123,230) 0%, rgb(121,127,219) 100%);
  color: #0f172a;
}
[data-theme="legacy"] .app-topbar,
[data-theme="legacy"] .bottom-nav {
  background:
    linear-gradient(135deg, rgba(14,165,233,0.22), rgba(79,70,229,0.22)),
    rgba(255,255,255,0.86) !important;
  border-color: rgba(15,23,42,0.12) !important;
  color: #0f172a !important;
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
}
[data-theme="legacy"] .bottom-nav .nav-inner {
  background:
    linear-gradient(135deg, rgba(14,165,233,0.22), rgba(79,70,229,0.22)),
    rgba(255,255,255,0.88) !important;
  border-top: 1px solid rgba(15,23,42,0.12) !important;
}
[data-theme="legacy"] .bottom-nav .nav-item { color: #0f172a !important; }
[data-theme="legacy"] .bottom-nav .nav-item.active { color: #2563eb !important; }
[data-theme="legacy"] #desktopStickyHeader {
  background: linear-gradient(135deg, rgb(103,123,230), rgb(121,127,219)) !important;
  border-bottom: 1px solid rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(15,23,42,0.18) !important;
}
[data-theme="legacy"] .tabs {
  background:
    linear-gradient(135deg, rgba(14,165,233,0.10), rgba(79,70,229,0.10)),
    rgba(255,255,255,0.86);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 6px 8px;
  box-shadow: 0 8px 24px rgba(17,24,39,0.10);
}
[data-theme="legacy"] .tabs .tab-button {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #0f172a;
}
[data-theme="legacy"] .tabs .tab-button.active {
  background: linear-gradient(135deg, rgb(103,123,230), rgb(121,127,219));
  border-color: rgba(79,70,229,0.9);
  color: #ffffff;
}
[data-theme="legacy"] .posts-tabs .posts-tab {
  background: rgba(255,255,255,0.86) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  color: #0f172a !important;
}
[data-theme="legacy"] .posts-tabs .posts-tab.active {
  background: linear-gradient(135deg, rgb(103,123,230), rgb(121,127,219)) !important;
  border-color: rgba(79,70,229,0.9) !important;
  color: #ffffff !important;
}
[data-theme="legacy"] .posts-tabs.sticky {
  background: linear-gradient(90deg, rgba(103,123,230,0.40), rgba(121,127,219,0.40)) !important;
  border-bottom: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
[data-theme="legacy"] .conversation-list,
[data-theme="legacy"] .conversations-list,
[data-theme="legacy"] .container,
[data-theme="legacy"] .memory-panel,
[data-theme="legacy"] .settings-subsection,
[data-theme="legacy"] #postsWrapper {
  /* Glassy panel on deep blue background, tinted towards provided swatch */
  background:
    linear-gradient(135deg, rgba(121,125,218,0.22), rgba(103,122,227,0.20)),
    rgba(255,255,255,0.08) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.20) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
[data-theme="legacy"] .setting-group {
  background:
    linear-gradient(135deg, rgba(121,125,218,0.20), rgba(103,122,227,0.18)),
    rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.22) !important;
  padding: 12px !important;
  color: #f0f4ff !important;
}


[data-theme="light"] .bottom-nav .nav-item {
  color: rgba(17,19,24,0.75);
}

[data-theme="light"] .bottom-nav .nav-item.active {
  color: #2563eb;
}

/* Inputs */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: #ffffff !important;
  color: #111318 !important;
  border: 1px solid #e5e7eb !important;
}

/* Buttons */
[data-theme="light"] .control-button,
[data-theme="light"] .voice-button,
[data-theme="light"] .btn {
  background: rgba(0,0,0,0.05);
  color: #111318;
  border-color: rgba(0,0,0,0.12);
}

/* Links */
[data-theme="light"] a { color: #0d47a1; }

[data-theme="light"] .posts-tabs .posts-tab {
  background: rgba(17,19,24,0.06);
  border: 1px solid rgba(17,19,24,0.16);
  color: #111318;
}

[data-theme="light"] .posts-tabs .posts-tab.active {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #ffffff;
}

[data-theme="light"] .posts-tabs .posts-tab:hover {
  background: rgba(37,99,235,0.12);
}

/* Donate brand buttons */
.donate-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; /* place icon below text */
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none !important;
  line-height: 1.2;
  /* Allow long URLs/text to wrap inside the button */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
}
.donate-button:hover { transform: translateY(-1px); filter: brightness(1.05); }
.donate-button:active { transform: translateY(0); filter: brightness(0.98); }
.donate-button.paypal { background: linear-gradient(135deg, #003087, #009cde); }
.donate-button.stripe { background: linear-gradient(135deg, #635bff, #7a5cff); }

/* Custom amount row */
.donate-custom-row {
  margin: 18px 0 22px;
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  clear: both;
}
.donate-input {
  flex: 1 1 240px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-weight: 700;
  text-align: center;
  font-size: 22px; /* larger value text */
  box-sizing: border-box;
}
.donate-input-group {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.donate-input-group .donate-input {
  padding-left: 58px; /* space for currency label */
  padding-right: 58px; /* symmetric padding so centered text looks balanced with HK$ */
  text-align: center;
  width: 100%;
  max-width: none;
  border-radius: 12px;
  height: 48px;
  box-sizing: border-box;
}
.donate-currency {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  letter-spacing: 0.5px;
  opacity: 0.9;
  pointer-events: none;
  color: inherit;
}
.donate-custom-row .donate-button {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1;
  flex-shrink: 0;
}
.donate-button.luxury {
  flex: 0 0 auto; /* size to content on all screens by default */
  margin-left: 0;
  padding: 0 20px;
  font-size: 17px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6d28d9, #7c3aed, #8b5cf6);
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 16px 36px rgba(98, 0, 234, 0.35), inset 0 1px 0 rgba(255,255,255,0.15);
  /* Ensure text is perfectly centered; override base donate-button column layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 0;
  height: 48px;
}

/* Ensure QR grid always starts on a new line after the custom row */
.donate-grid { clear: both; }
[data-theme="light"] .donate-button.luxury { box-shadow: 0 16px 36px rgba(79,70,229,0.28), inset 0 1px 0 rgba(255,255,255,0.22); }
[data-theme="light"] .donate-input { border-color: rgba(0,0,0,0.12); background: rgba(0,0,0,0.04); color: #111318; }
[data-theme="light"] .donate-currency { color: #111318; opacity: 0.8; }

/* Remove extra pseudo spacing on luxury button */
.donate-button.luxury::after { content: none; }

@media (max-width: 520px) {
  .donate-button.luxury { padding: 0 18px; font-size: 16px; height: 46px; }
  .donate-input-group .donate-input { height: 46px; }
}

@media (min-width: 768px) {
  .donate-input-group { flex: 0 1 clamp(320px, 50%, 540px); }
}

@media (min-width: 1024px) {
  .donate-input-group { flex-basis: clamp(360px, 46%, 600px); }
  .donate-button.luxury { height: 52px; }
  .donate-input-group .donate-input { height: 52px; }
}
[data-theme="light"] .donate-input { border-color: rgba(0,0,0,0.12); background: rgba(0,0,0,0.04); color: #111318; }
[data-theme="light"] .donate-button.luxury { box-shadow: 0 16px 36px rgba(79,70,229,0.28), inset 0 1px 0 rgba(255,255,255,0.22); }

/* Move the heart emoji to the bottom of the button */
.donate-button::after { display: block; margin-top: 6px; font-size: 18px; line-height: 1; content: ''; }
.donate-button.paypal::before,
.donate-button.stripe::before { content: none; }
.donate-button.paypal::after { content: '💙'; }
.donate-button.stripe::after { content: '💜'; }

/* Light theme borders for donate cards */
[data-theme="light"] .donate-button {
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.12);
}

/* Admin donate panel layout */
.admin-section-title { font-weight: 700; margin-bottom: 8px; }
.admin-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.admin-field { display: flex; flex-direction: column; gap: 6px; }
.admin-field-label { opacity: .9; font-weight: 600; }
.admin-text { padding: 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #fff; }
.admin-actions-row { text-align: right; margin-top: 8px; }

[data-theme="light"] .admin-text { border-color: rgba(0,0,0,0.12); background: rgba(0,0,0,0.04); color: #111318; }

/* Fancy theme: Aurora Drift */
[data-theme="aurora"] body {
  /* Deep space gradient with soft aurora tint */
  background: radial-gradient(1200px 600px at 15% -10%, rgba(120, 119, 198, 0.25) 0%, rgba(15, 17, 21, 0.0) 45%),
              radial-gradient(900px 520px at 100% 0%, rgba(16, 185, 129, 0.18) 0%, rgba(15, 17, 21, 0.0) 50%),
              linear-gradient(180deg, #0b0f1a 0%, #0f1115 100%);
  color: #e6ecf3;
}

/* Panels and lists get translucent surfaces over the gradient */
[data-theme="aurora"] .conversation-list,
[data-theme="aurora"] .conversations-list,
[data-theme="aurora"] .container,
[data-theme="aurora"] .memory-panel,
[data-theme="aurora"] .settings-subsection {
  background: rgba(20, 24, 38, 0.72) !important;
  color: #e6ecf3 !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  backdrop-filter: saturate(120%) blur(6px);
}

/* Top headers / bottom nav */
[data-theme="aurora"] .app-topbar,
[data-theme="aurora"] .bottom-nav {
  background: rgba(24, 26, 44, 0.78) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: #e6ecf3 !important;
  backdrop-filter: saturate(120%) blur(6px);
}

/* Inputs */
[data-theme="aurora"] input,
[data-theme="aurora"] textarea,
[data-theme="aurora"] select {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #e6ecf3 !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

/* Buttons and controls */
[data-theme="aurora"] .control-button,
[data-theme="aurora"] .voice-button,
[data-theme="aurora"] .btn {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.18), rgba(59, 130, 246, 0.14));
  color: #e6ecf3;
  border-color: rgba(148, 163, 184, 0.25);
}
[data-theme="aurora"] .control-button:hover,
[data-theme="aurora"] .voice-button:hover,
[data-theme="aurora"] .btn:hover {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.28), rgba(59, 130, 246, 0.22));
}

/* Links */
[data-theme="aurora"] a { color: #7dd3fc; }
[data-theme="aurora"] a:hover { color: #93c5fd; }

/* Robust posts-tab active highlight across mobile/desktop (final override) */
html:not([data-theme]) .posts-tabs .posts-tab.active,
[data-theme="light"] .posts-tabs .posts-tab.active,
[data-theme="bright"] .posts-tabs .posts-tab.active,
[data-theme="vivid"] .posts-tabs .posts-tab.active,
[data-theme="legacy"] .posts-tabs .posts-tab.active {
  color: #ffffff !important;
}
html:not([data-theme]) .posts-tabs .posts-tab.active { background: linear-gradient(135deg, #0ea5e9, #4f46e5) !important; border-color: rgba(79,70,229,0.9) !important; }
[data-theme="light"] .posts-tabs .posts-tab.active { background: linear-gradient(135deg, #69b8ff, #3aa0ff) !important; border-color: #3aa0ff !important; }
[data-theme="bright"] .posts-tabs .posts-tab.active { background: #2563eb !important; border-color: #1d4ed8 !important; }
[data-theme="vivid"] .posts-tabs .posts-tab.active { background: linear-gradient(135deg, #34d399, #10b981) !important; border-color: rgba(16,185,129,0.9) !important; }
[data-theme="legacy"] .posts-tabs .posts-tab.active { background: linear-gradient(135deg, #677be6, #797fdb) !important; border-color: rgba(121,127,219,0.9) !important; }

/* When tabs are mobile-fixed, keep the same active visuals */
html:not([data-theme]) .posts-tabs.mobile-fixed .posts-tab.active,
[data-theme="light"] .posts-tabs.mobile-fixed .posts-tab.active,
[data-theme="bright"] .posts-tabs.mobile-fixed .posts-tab.active,
[data-theme="vivid"] .posts-tabs.mobile-fixed .posts-tab.active,
[data-theme="legacy"] .posts-tabs.mobile-fixed .posts-tab.active {
  filter: none !important;
}

/* Keep post cards using app-wide CSS variables; theme does not force post card colors.
   Enhancements also keep their own palette for legibility. */