@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Merriweather:wght@700&family=Lora:wght@700&family=Cinzel:wght@700&family=Abril+Fatface&family=Cormorant+Garamond:wght@700&family=Alfa+Slab+One&family=Poppins:wght@700&family=Montserrat:wght@800&family=Raleway:wght@800&family=Oswald:wght@700&family=Bebas+Neue&family=Anton&family=Lexend:wght@700&family=Quicksand:wght@700&family=Comfortaa:wght@700&family=Rubik:wght@700&family=Pacifico&family=Dancing+Script:wght@700&family=Caveat:wght@700&family=Satisfy&family=Great+Vibes&family=Kaushan+Script&family=Shadows+Into+Light&family=Indie+Flower&family=Permanent+Marker&family=Amatic+SC:wght@700&family=JetBrains+Mono:wght@700&family=Space+Mono:wght@700&family=Share+Tech+Mono&family=Orbitron:wght@700&family=Audiowide&family=Press+Start+2P&family=VT323&family=Black+Ops+One&family=Special+Elite&family=Bangers&family=Lobster&family=Fredoka:wght@700&family=Chewy&family=Righteous&family=Bungee&family=Monoton&family=Creepster&family=Mountains+of+Christmas:wght@700&family=Sacramento&family=Fontdiner+Swanky&family=UnifrakturCook:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@700&family=Crimson+Text:wght@700&family=EB+Garamond:wght@700&family=Libre+Baskerville:wght@700&family=Spectral:wght@700&family=Vollkorn:wght@700&family=Arvo:wght@700&family=Zilla+Slab:wght@700&family=Bree+Serif&family=Yeseva+One&family=Rozha+One&family=Domine:wght@700&family=Nunito:wght@800&family=Work+Sans:wght@700&family=Barlow+Condensed:wght@700&family=Archivo+Black&family=Teko:wght@700&family=Exo+2:wght@700&family=Josefin+Sans:wght@700&family=Kanit:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@700&family=Space+Grotesk:wght@700&family=Syne:wght@800&family=Dosis:wght@700&family=Fjalla+One&family=Titan+One&family=Russo+One&family=Allura&family=Parisienne&family=Courgette&family=Handlee&family=Gloria+Hallelujah&family=Rock+Salt&family=Yellowtail&family=Cookie&family=Marck+Script&family=Patrick+Hand&family=Luckiest+Guy&family=Boogaloo&family=Bowlby+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shrikhand&family=Staatliches&family=Pirata+One&family=Lilita+One&family=Rye&family=Metal+Mania&family=Frijole&family=Fira+Code:wght@700&family=IBM+Plex+Mono:wght@700&family=Silkscreen&family=Faster+One&family=Special+Elite&family=Black+Ops+One&family=Bungee+Shade&family=Fredericka+the+Great&family=Cinzel+Decorative:wght@700&family=Rubik+Glitch&family=Fascinate+Inline&family=Space+Mono:wght@700&family=Orbitron:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&family=Righteous&display=swap');

/* ==========================================================================
   SHARENET REIMAGINED — styles.css
   Sections:
     1.  Global Variables & Reset
     2.  Top Navigation Bar
     3.  Main Layout & Grid
     4.  Shared Cards, Inputs & Buttons
     5.  Auth Modal
     6.  Home Page (Updates, Sidebar)
     7.  Groups Page — Feed & Post Cards
     8.  Groups Page — Post Comments
     9.  Groups Page — Admin Panel (Pending Requests)
     10. Groups Page — Group Sidebar
     11. Composer Modal
     12. Emoji Picker
     13. HTML Embed & Group Request Modals
     14. Members Page
     15. Notifications Page
     16. Poll Widgets
     17. Footer
     18. Scrollbar
     19. Badges System
   ========================================================================== */

/* ==========================================================================
   1. GLOBAL VARIABLES & RESET
   ========================================================================== */
:root {
  --bg-body: #05080f;
  --bg-card: #111827;
  --bg-card-hover: #1e293b;
  --border-color: #2a3441;
  --text-main: #ffffff;
  --text-muted: #94a3b8;
  --text-secondary: #64748b;
  --text-primary: #ffffff;
  --accent-blue: #3b82f6;
  --accent-purple: #bb86fc;
  --accent-cyan: #38bdf8;
  --accent-green: #2ea043;
  --accent-danger: #f85149;
  --accent-success: #2ea043;
}

/* Light theme (ShareNet Pink & Sky Blue) */
html.theme-light {
  --bg-body: #fce4ec;
  --bg-card: #ffffff;
  --bg-card-hover: #f8bbd0;
  --border-color: #f48fb1;
  --text-main: #1a0a14;
  --text-muted: #7b3a55;
  --text-secondary: #ad6880;
  --accent-blue: #0288d1;
  --accent-purple: #e91e8c;
  --accent-cyan: #00b0ff;
  --accent-danger: #e53935;
  --accent-success: #2e7d32;
}

html.theme-light body {
  background-color: var(--bg-body);
  color: var(--text-main);
}

html.theme-light .navbar {
  background-color: var(--bg-card);
  border-bottom-color: var(--border-color);
  box-shadow: 0 4px 12px rgba(233, 30, 140, 0.1);
}

html.theme-light .logo {
  color: var(--accent-purple);
}

html.theme-light .nav-links a {
  color: var(--text-muted);
}
html.theme-light .nav-links a:hover,
html.theme-light .nav-links a.active {
  background: rgba(233, 30, 140, 0.1);
  color: var(--accent-purple);
}

html.theme-light .modal-box,
html.theme-light .composer-container,
html.theme-light .post-card,
html.theme-light .group-item,
html.theme-light .chatbot-panel,
html.theme-light .messenger-sidebar,
html.theme-light .chat-header,
html.theme-light .message-compose-bar {
  background: var(--bg-card);
  border-color: var(--border-color);
}

html.theme-light .chatbot-msg-assistant,
html.theme-light .msg-bubble-theirs {
  background: var(--bg-card-hover);
  border-color: var(--border-color);
  color: var(--text-main);
}

html.theme-light input,
html.theme-light textarea,
html.theme-light select {
  background: #fff0f5;
  border-color: var(--border-color);
  color: var(--text-main);
}

html.theme-light input::placeholder,
html.theme-light textarea::placeholder {
  color: var(--text-secondary);
}

html.theme-light .submit-btn,
html.theme-light .new-chat-btn,
html.theme-light .message-send-btn,
html.theme-light .chatbot-send-btn {
  background: var(--accent-purple);
}

html.theme-light .submit-btn:hover {
  background: #c2185b;
}

html.theme-light .chatbot-fab {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
  box-shadow: 0 6px 20px rgba(233, 30, 140, 0.4);
}

html.theme-light .conv-avatar,
html.theme-light .user-picker-avatar,
html.theme-light .chat-recipient-avatar,
html.theme-light .profile-pic-preview {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
}

html.theme-light .group-item:hover,
html.theme-light .group-item.active {
  background: rgba(233, 30, 140, 0.08);
  border-color: var(--accent-purple);
  color: var(--accent-purple);
}

html.theme-light .conversation-item.active {
  background: rgba(2, 136, 209, 0.08);
  border-right-color: var(--accent-blue);
}

html.theme-light footer {
  background: var(--bg-card);
  border-top-color: var(--border-color);
  color: var(--text-muted);
}

html.theme-light .post-comments-drawer-panel,
html.theme-light .feed-header-card,
html.theme-light .sidebar {
  background: var(--bg-card);
  border-color: var(--border-color);
}

html.theme-light .image-drop-zone {
  border-color: var(--border-color);
  background: #fff0f5;
}

html.theme-light .image-drop-zone:hover,
html.theme-light .image-drop-zone.drag-over {
  border-color: var(--accent-purple);
  background: rgba(233, 30, 140, 0.05);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

body {
  background-color: var(--bg-body);
  color: var(--text-main);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--accent-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #60a5fa;
}

.hidden {
  display: none !important;
}

/* ==========================================================================
         2. TOP NAVIGATION BAR
         ========================================================================== */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-card);
  padding: 14px 32px;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  gap: 16px;
}

.logo {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent-blue);
  letter-spacing: -0.5px;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2px;
  flex-wrap: wrap;
}

.nav-links li {
  display: flex;
}

.nav-links a {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 14px;
  padding: 7px 13px;
  border-radius: 8px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--text-main);
  background-color: rgba(255, 255, 255, 0.05);
}

.nav-links a.active {
  color: var(--accent-blue);
  background-color: rgba(59, 130, 246, 0.1);
  font-weight: 600;
}

/* Right side nav cluster */
.nav-right-container {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* Bell icon */
.bell-wrapper {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
  cursor: pointer;
  flex-shrink: 0;
}

.bell-wrapper:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.bell-icon {
  stroke: var(--text-muted);
  transition: stroke 0.2s;
}

.bell-wrapper:hover .bell-icon {
  stroke: var(--accent-blue);
}

/* Notification badge */
.badge {
  position: absolute;
  top: -3px;
  right: -5px;
  background-color: var(--accent-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 12px;
  border: 2px solid var(--bg-card);
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
  pointer-events: none;
}

/* Messenger nav link badge - same visual language as .badge above, but
   positioned against a plain text link instead of an icon, since the
   Messenger link has no icon to anchor to. */
.nav-link-with-badge {
  position: relative;
}

.nav-text-badge {
  position: absolute;
  top: -2px;
  right: -14px;
  background-color: var(--accent-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 12px;
  border: 2px solid var(--bg-card);
  min-width: 16px;
  text-align: center;
  line-height: 1.3;
  pointer-events: none;
}

html.theme-light .nav-text-badge {
  border-color: var(--bg-card);
}

/* Profile avatar bubble */
.nav-profile-avatar {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.2s, border-color 0.2s;
  user-select: none;
  flex-shrink: 0;
}

.nav-profile-avatar:hover {
  transform: scale(1.06);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Auth / Sign Out button */
.login-btn button,
#authNavBtn {
  background-color: var(--accent-blue);
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap;
}

.login-btn button:hover,
#authNavBtn:hover {
  background-color: #2563eb;
}

/* ==========================================================================
         3. MAIN LAYOUT & GRID
         ========================================================================== */
.container {
  max-width: 1200px;
  width: 100%;
  margin: 36px auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  flex: 1;
}

@media (max-width: 960px) {
  .container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .navbar {
    padding: 12px 16px;
    flex-wrap: wrap;
  }

  .container {
    padding: 0 12px;
    margin: 20px auto;
    gap: 20px;
  }
}

/* ==========================================================================
         4. SHARED CARDS, INPUTS & BUTTONS
         ========================================================================== */

/* Base card style */
.update-card,
.widget,
.feed-header-card,
.create-post-box,
.post-card,
.member-card,
.admin-panel-members {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Text inputs, password, email, url, textarea, select */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea,
select {
  width: 100%;
  background-color: var(--bg-body);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 11px 15px;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  display: block;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

select {
  appearance: none;
  cursor: pointer;
}

textarea {
  resize: vertical;
}

/* Input label group */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.input-group label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Primary action button */
.action-btn,
.btn-primary,
.submit-btn {
  background-color: var(--accent-blue);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.action-btn:hover,
.btn-primary:hover,
.submit-btn:hover {
  background-color: #2563eb;
}

/* Secondary / ghost button */
.secondary-btn-style,
.btn-secondary {
  background-color: transparent;
  color: var(--text-main);
  border: 1px solid var(--border-color);
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.secondary-btn-style:hover,
.btn-secondary:hover {
  background-color: var(--bg-card-hover);
}

/* Generic loading / empty state text */
.loading-text {
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
  padding: 28px 16px;
}

/* ==========================================================================
         5. AUTH MODAL
         ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.modal-box {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 32px;
  width: 100%;
  max-width: 440px;
  position: relative;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

.modal-box h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 22px;
}

/* × close button used on all modals */
.close-btn {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 26px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
  background: none;
  border: none;
}

.close-btn:hover {
  color: var(--text-main);
}

/* "Don't have an account?" toggle row */
.toggle-text {
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.toggle-text a {
  color: var(--accent-blue);
  font-weight: 600;
  margin-left: 4px;
}

/* ==========================================================================
         6. HOME PAGE (UPDATES & SIDEBAR)
         ========================================================================== */
.updates-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.updates-section h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 4px;
}

.update-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-main);
}

.update-card p {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* Sidebar column */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.widget {
  padding: 20px;
}

/* Member counter widget */
.member-counter h2 {
  font-size: 38px;
  font-weight: 800;
  color: var(--accent-blue);
  margin-bottom: 6px;
}

.member-counter p {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 2px;
}

.member-counter strong {
  color: var(--text-main);
}

/* Helpful links widget */
.helpful-links h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
}

.helpful-links ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.helpful-links a {
  font-size: 14px;
}

/* ==========================================================================
         7. GROUPS PAGE — FEED & POST CARDS
         ========================================================================== */
.feed-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* Feed header card */
.feed-header-card {
  padding: 22px 24px;
}

.feed-header-card h1 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 6px;
}

.feed-header-card p {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 14px;
}

.header-search-alignment-box {
  margin-top: 2px;
}

/* Create post prompt box */
.create-post-box {
  padding: 16px 20px;
}

.post-box-trigger {
  display: flex;
  align-items: center;
}

.post-box-trigger input,
#openComposerBtn {
  cursor: pointer;
  background-color: var(--bg-body);
  color: var(--text-muted);
  text-align: left;
}

.post-box-trigger input:hover,
#openComposerBtn:hover {
  border-color: var(--accent-blue);
  box-shadow: none;
}

/* Posts stream wrapper */
.posts-stream {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-x: hidden;
}

/* Empty feed state */
.empty-feed-placeholder {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 14px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
}

/* Individual post card */
.post-card {
  background-color: #1a2233;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.post-card:hover {
  border-color: rgba(59, 130, 246, 0.35);
}

/* Post card header row */
.post-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
}

.post-author-avatar {
  width: 40px;
  height: 40px;
  background-color: var(--accent-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
}

.post-meta-details {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.author-name {
  font-weight: 700;
  font-size: 14px;
  color: #e2e8f0;
}

.post-timestamp {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

.header-actions-wrap {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.delete-post-trigger-btn {
  background: none;
  border: none;
  color: var(--accent-danger);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 5px 9px;
  border-radius: 5px;
  transition: background-color 0.2s;
}

.delete-post-trigger-btn:hover {
  background-color: rgba(248, 81, 73, 0.12);
}

/* Post body */
.post-body-content {
  margin-bottom: 14px;
}

.post-render-title {
  margin: 0 0 8px 0;
  color: var(--accent-cyan);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.post-render-text {
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  margin: 0;
}

/* Media attachments */
.post-media-wrap {
  margin-top: 12px;
  border-radius: 8px;
  overflow: hidden;
}

.post-img-attachment {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.post-video-attachment {
  width: 100%;
  max-height: 420px;
  border-radius: 8px;
  display: block;
  background: #000;
}

.post-file-wrap {
  margin-top: 12px;
  padding: 11px 15px;
  background-color: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-file-wrap a {
  color: var(--accent-blue);
  font-weight: 500;
}

/* Embedded HTML sandbox block */
.post-custom-plugin-sandbox {
  margin-top: 12px;
  padding: 14px;
  background-color: var(--bg-body);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent-purple);
  border-radius: 8px;
  font-size: 13px;
  overflow: auto;
}

/* Engagement bar (comments / views) */
.post-engagement-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #2d3748;
  padding-top: 10px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-muted);
}

.toggle-comments-trigger-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-size: 13px;
  transition: color 0.2s;
}

.toggle-comments-trigger-btn:hover {
  color: var(--accent-blue);
}

/* ==========================================================================
         8. GROUPS PAGE — POST COMMENTS
         ========================================================================== */
.post-comments-drawer-panel {
  border-top: 1px solid var(--border-color);
  margin-top: 12px;
  padding-top: 12px;
  background: var(--bg-card);
}
html.theme-light .post-comments-drawer-panel {
  border-top-color: var(--border-color);
  background: var(--bg-card);
}
.loaded-comments-stream-list {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}
/* Individual comment row */
.comment-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: transparent;
  border: none;
  padding: 8px 4px;
  position: relative;
}

.comment-item:hover {
  background: transparent;
}

html.theme-light .comment-item {
  background: transparent;
}

html.theme-light .comment-item:hover {
  background: transparent;
}

.comment-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  color: white;
  overflow: hidden;
  border: 3px solid var(--bg-card);
  flex: 0 0 36px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.comment-avatar.image {
  background: var(--accent-blue);
}

.comment-avatar.placeholder {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
}

html.theme-light .comment-avatar {
  border-color: #ffffff;
}

.comment-content {
  flex: 1; border-left: 1px solid var(--border-color); padding-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Top row: name + badges on the left, reply/delete icons on the far right */
.comment-top-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding-right: 96px; /* reserve room so name/badges never run under the absolutely-positioned actions */
}

.comment-name-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  padding-top: 2px;
}

.comment-actions-row {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.comment-actions-row .reply-comment-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 13px;
  padding: 5px 12px;
}

.comment-actions-row .material-symbols-outlined {
  margin-left: 0 !important;
  font-size: 20px !important;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.comment-actions-row .material-symbols-outlined:hover {
  background: rgba(207, 102, 121, 0.12);
}

/* Bottom row: the comment body, full width */
.comment-body-row {
  width: 100%;
}

.show-replies-link {
  align-self: flex-start;
  margin-top: 0;
}

.show-more-comments-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--border-color);
  color: var(--accent-blue);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 4px 2px 4px;
  margin-top: 8px;
  cursor: pointer;
  text-align: left;
}
.show-more-comments-btn:hover {
  color: var(--accent-purple);
}

/* --- Site Stats page --- */
/* --- Site Stats page --- */
.stats-page-wrap {
  max-width: 1100px;
  margin: 36px auto;
  padding: 0 24px;
  width: 100%;
}
.stats-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.stats-back-link {
  text-decoration: none;
  white-space: nowrap;
}
.stats-range-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.stats-range-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.stats-range-btn:hover {
  background: var(--bg-card-hover);
}
.stats-range-btn.active {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: var(--bg-body);
}

.stats-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.stats-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stats-card-label {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}
.stats-card-value {
  color: var(--text-main);
  font-size: 30px;
  font-weight: 700;
}

.stats-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 18px;
}
.stats-chart-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 18px;
}
.stats-chart-box h4 {
  margin: 0 0 12px 0;
  color: var(--text-main);
  font-size: 14px;
}
.stats-chart-box canvas {
  max-height: 260px;
}

.comment-reply-form-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.comment-reply-form-row .comment-message-input-field {
  flex: 1;
}

.comment-header {
  display: flex; justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
}

.comment-author-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.comment-author-name .verified-badge {
  width: 18px;
  height: 18px;
  background: var(--accent-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: white;
  font-weight: 500;
}

.comment-author-name .follow-badge {
  background: var(--accent-purple);
  color: white;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 12px;
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-muted);
}

.comment-meta .separator {
  width: 1px;
  height: 12px;
  background: var(--border-color);
  margin: 0 4px;
}

.comment-body-text {
  font-size: 15px;
  color: var(--text-main);
  line-height: 1.4;
  white-space: pre-wrap;
  flex: 1;
  margin: 0;
  word-wrap: break-word;
}

.comment-body-text a {
  color: var(--accent-blue);
  text-decoration: underline;
}

.comment-body-text a:hover {
  text-decoration: none;
}

.comment-body-text img,
.comment-body-text video {
  max-width: 100%;
  border-radius: 8px;
  margin: 8px 0;
}

.comment-interaction {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.comment-action-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 10px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.comment-action-btn:hover {
  background: var(--bg-card-hover);
  color: var(--accent-blue);
  transform: translateY(-1px);
}

.comment-action-btn:active {
  transform: scale(0.95);
}

.comment-action-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.comment-action-btn.liked {
  color: var(--accent-danger);
  background: rgba(248, 81, 73, 0.1);
}

.comment-action-btn.liked:hover {
  background: rgba(248, 81, 73, 0.2);
}

.comment-action-btn.retweeted {
  color: var(--accent-green);
  background: rgba(34, 197, 94, 0.1);
}

.comment-action-btn.retweeted:hover {
  background: rgba(34, 197, 94, 0.2);
}

.html.theme-light .comment-action-btn {
  color: #64748b;
}

.html.theme-light .comment-action-btn:hover {
  background: #f1f5f9;
  color: #0288d1;
}

.reply-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg-card-hover);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-blue);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.html.theme-light .reply-indicator {
  background: #eff6ff;
  color: #0288d1;
  border-color: rgba(2, 136, 209, 0.2);
}

/* Reply comment styling */
.comment-item.reply {
  position: relative;
  margin-left: 0;
  padding-left: 0;
  border-left: none;
  background: transparent;
}

.comment-item.reply:hover {
  background: transparent;
}

html.theme-light .comment-item.reply {
  background: transparent;
}

html.theme-light .comment-item.reply:hover {
  background: transparent;
}

.comment-input-area {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

/* Subtle divider between sibling comments/replies, since they no longer
   have individual card backgrounds to visually separate them */
.comment-wrapper + .comment-wrapper {
  border-top: 1px solid var(--border-color);
  padding-top: 10px;
  margin-top: 4px;
}

.comment-input-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.comment-input-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: white;
}

.comment-input textarea {
  flex: 1;
  min-height: 48px;
  max-height: 120px;
  resize: vertical;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-body);
  color: var(--text-main);
  font-size: 15px;
  font-family: inherit;
  transition: all 0.2s ease;
}

.comment-input textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  background: var(--bg-body);
}

.comment-input textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

.html.theme-light .comment-input textarea {
  background: #ffffff;
  border-color: #e2e8f0;
}

.html.theme-light .comment-input textarea:focus {
  border-color: #0288d1;
  box-shadow: 0 0 0 3px rgba(2, 136, 209, 0.15);
}

.comment-submit-button {
  margin-top: 12px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.comment-submit-button button {
  background-color: var(--accent-blue);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
  letter-spacing: -0.5px;
  font-family: inherit;
}

.comment-submit-button button:hover {
  background-color: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.comment-submit-button button:active {
  transform: scale(0.98);
}

.comment-submit-button button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.html.theme-light .comment-submit-button button {
  background: #0288d1;
  color: #fff;
}

.html.theme-light .comment-submit-button button:hover {
  background: #01579b;
}

/* Responsive */
/* Responsive */
@media (max-width: 480px) {
  .comment-item {
    gap: 8px;
    padding: 10px;
  }
  .comment-avatar {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
  .comment-author-name {
    font-size: 13px;
  }
  .comment-body-text {
    font-size: 13px;
  }
  .comment-action-btn {
    font-size: 12px;
    padding: 3px 6px;
  }
  .comment-input-form-row {
    gap: 8px;
    margin-top: 8px;
  }
  .comment-message-input-field {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 13px;
  }
  .submit-comment-action-btn {
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* Dark mode preferences */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-body: #05080f;
    --bg-card: #111827;
    --bg-card-hover: #1e293b;
    --border-color: #2a3441;
    --text-main: #ffffff;
    --text-muted: #94a3b8;
    --text-secondary: #64748b;
    --text-primary: #ffffff;
    --accent-blue: #3b82f6;
    --accent-purple: #bb86fc;
    --accent-cyan: #38bdf8;
    --accent-green: #2ea043;
    --accent-danger: #f85149;
    --accent-success: #2ea043;
  }
}


/* ==========================================================================
        9. GROUPS PAGE — ADMIN PANEL (PENDING REQUESTS)
        ========================================================================== */
.admin-panel {
  background-color: var(--bg-card);
  border: 1px solid var(--accent-danger);
  border-radius: 12px;
  overflow: hidden;
}

.dropbtn {
  width: 100%;
  background-color: rgba(248, 81, 73, 0.08);
  color: var(--accent-danger);
  border: none;
  padding: 14px 20px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s;
}

.dropbtn:hover {
  background-color: rgba(248, 81, 73, 0.16);
}

.dropdown-content {
  padding: 12px;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.empty-msg {
  color: var(--text-muted);
  font-size: 14px;
  padding: 10px;
  text-align: center;
}

.request-item {
  background-color: var(--bg-body);
  border: 1px solid var(--border-color);
  padding: 14px 16px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.request-item > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.request-item strong {
  font-size: 14px;
  color: var(--text-main);
}

.request-item small {
  font-size: 12px;
  color: var(--text-muted);
  display: block;
}

.btn-group {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.accept-btn {
  background-color: var(--accent-success);
  color: #fff;
  border: none;
  padding: 7px 14px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.accept-btn:hover {
  opacity: 0.85;
}

.decline-btn {
  background-color: var(--accent-danger);
  color: #fff;
  border: none;
  padding: 7px 14px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.decline-btn:hover {
  opacity: 0.85;
}

/* ==========================================================================
         10. GROUPS PAGE — GROUP SIDEBAR
         ========================================================================== */

.dropbtn:hover {
  background-color: rgba(248, 81, 73, 0.16);
}

.dropdown-content {
  padding: 12px;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.empty-msg {
  color: var(--text-muted);
  font-size: 14px;
  padding: 10px;
  text-align: center;
}

.request-item {
  background-color: var(--bg-body);
  border: 1px solid var(--border-color);
  padding: 14px 16px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.request-item > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.request-item strong {
  font-size: 14px;
  color: var(--text-main);
}

.request-item small {
  font-size: 12px;
  color: var(--text-muted);
  display: block;
}

.btn-group {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.accept-btn {
  background-color: var(--accent-success);
  color: #fff;
  border: none;
  padding: 7px 14px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.accept-btn:hover {
  opacity: 0.85;
}

.decline-btn {
  background-color: var(--accent-danger);
  color: #fff;
  border: none;
  padding: 7px 14px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.decline-btn:hover {
  opacity: 0.85;
}

/* ==========================================================================
         10. GROUPS PAGE — GROUP SIDEBAR
         ========================================================================== */
.groups-list-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.sidebar-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 10px;
}

.sidebar-header-row h2 {
  font-size: 17px;
  font-weight: 700;
}

.create-group-btn {
  background: transparent;
  color: var(--accent-blue);
  border: 1px dashed var(--accent-blue);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.create-group-btn:hover {
  background-color: rgba(59, 130, 246, 0.1);
}

.groups-scroll-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 420px;
  overflow-y: auto;
}

.group-item {
  padding: 10px 14px;
  background-color: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  transition: all 0.2s;
  color: var(--text-main);
}

.group-item:hover,
.group-item.active {
  background-color: var(--bg-card-hover);
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

/* Material icon delete button inside group items */
.delete-group-icon {
  font-size: 18px !important;
  color: var(--accent-danger);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.delete-group-icon:hover {
  opacity: 1;
}

/* ==========================================================================
         11. COMPOSER MODAL
         ========================================================================== */
.composer-container {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  width: 100%;
  max-width: 640px;
  position: relative;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

/* Header row inside composer */
.composer-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-color);
}

.username-label {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-main);
  line-height: 1.2;
}

.destination-pill {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}

.destination-pill span {
  color: var(--accent-blue);
  font-weight: 600;
}

.close-composer-btn {
  margin-left: auto;
  font-size: 26px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
  flex-shrink: 0;
  background: none;
  border: none;
}

.close-composer-btn:hover {
  color: var(--text-main);
}

/* Body of composer */
.composer-body {
  padding: 20px 24px;
}

.composer-title-field {
  font-size: 18px !important;
  font-weight: 600 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  padding: 6px 0 10px !important;
  margin-bottom: 16px;
  color: var(--text-main) !important;
  box-shadow: none !important;
}

.composer-title-field:focus {
  border-bottom-color: var(--accent-blue) !important;
  box-shadow: none !important;
}

.composer-text-area {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 130px;
  color: var(--text-main) !important;
  font-size: 15px !important;
  box-shadow: none !important;
}

.composer-text-area:focus {
  box-shadow: none !important;
}

/* Attached HTML preview strip */
#attachedHtmlPreview {
  display: none;
  padding: 8px 12px;
  background: #1e293b;
  border-left: 4px solid var(--accent-purple);
  border-radius: 4px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Attachment image/video/file preview box */
.attachment-preview-box {
  margin-top: 14px;
  padding: 12px;
  background-color: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}

.attachment-loading {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-muted);
  z-index: 5;
}

.render-area img,
.render-area video {
  max-width: 100%;
  max-height: 200px;
  border-radius: 6px;
  object-fit: contain;
  display: block;
}

.clear-attach-btn {
  margin-top: 8px;
  background: transparent;
  border: 1px solid var(--accent-danger);
  color: var(--accent-danger);
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.clear-attach-btn:hover {
  background-color: var(--accent-danger);
  color: #fff;
}

/* Composer bottom toolbar */
.composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 24px;
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-body);
  position: relative;
  gap: 12px;
}

.toolbar-media-tools {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.toolbar-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Individual toolbar icon buttons */
.tool-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  width: 38px;
  height: 38px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.2s ease;
}

.tool-btn .material-symbols-outlined {
  font-size: 22px;
  transition: color 0.2s ease;
}

.tool-btn:hover {
  background-color: var(--bg-card-hover);
  border-color: var(--border-color);
  color: var(--accent-blue);
}

/* Plugin submenu that pops up from toolbar */
.plugin-submenu {
  position: absolute;
  bottom: 62px;
  left: 24px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  z-index: 10;
}

.submenu-item {
  width: 100%;
  background: transparent;
  color: var(--text-main);
  border: none;
  padding: 10px 16px;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
  transition: all 0.2s;
}

.submenu-item:hover {
  background-color: var(--bg-body);
  color: var(--accent-blue);
}

/* ==========================================================================
         12. EMOJI PICKER
         ========================================================================== */
.emoji-picker-container {
  position: absolute;
  bottom: 72px;
  left: 24px;
  width: 300px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 20;
  overflow: hidden;
}

.picker-search-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-body);
}

.picker-search-header input {
  flex: 1;
  padding: 7px 11px;
  font-size: 13px;
}

.clear-search-x {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
  transition: color 0.2s;
}

.clear-search-x:hover {
  color: var(--text-main);
}

.emoji-grid-cells,
#emojiGridScrollArea {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)) !important;
  gap: 4px;
  padding: 10px;
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
}

.picker-emoji-cell {
  font-size: 22px;
  text-align: center;
  cursor: pointer;
  padding: 5px;
  border-radius: 6px;
  transition: background-color 0.15s, transform 0.15s;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.picker-emoji-cell:hover {
  background-color: var(--bg-body);
  transform: scale(1.18);
}

/* ==========================================================================
         13. HTML EMBED MODAL & GROUP REQUEST MODAL
         ========================================================================== */
.HTML-box {
  max-width: 560px;
}

.HTML-box h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 14px;
}

#groupModal .modal-box {
  max-width: 500px;
}

#groupModal h2 {
  margin-bottom: 20px;
}

/* ==========================================================================
         14. MEMBERS PAGE
         ========================================================================== */
.members-section {
  grid-column: 1 / -1;
}

.members-section h2 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 6px;
}

.subtitle {
  color: var(--text-muted);
  font-size: 15px;
  margin-bottom: 28px;
  display: block;
}

/* Admin control panel on members page */
.admin-panel-members {
  border-left: 4px solid var(--accent-danger);
  padding: 20px 24px;
  margin-bottom: 28px;
  /* max-width and centering applied via inline style in HTML */
}

.admin-panel-members h3 {
  color: var(--accent-danger);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.admin-panel-members p {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 16px;
}

.admin-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Members grid */
.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 20px;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.member-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-blue);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}

.member-card-avatar {
  width: 68px;
  height: 68px;
  background-color: var(--bg-body);
  border: 2px solid var(--border-color);
  border-radius: 50%;
  font-size: 26px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  transition: border-color 0.2s;
  overflow: hidden;
}

.member-card:hover .member-card-avatar {
  border-color: var(--accent-blue);
}

.member-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

/* Display name shown below the @username when set */
.member-display-name {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Remove / delete account button on member card */
.delete-btn {
  width: 100%;
  background-color: transparent;
  color: var(--accent-danger);
  border: 1px solid var(--accent-danger);
  padding: 8px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 16px;
}

.delete-btn:hover {
  background-color: var(--accent-danger);
  color: #fff;
}

/* ==========================================================================
         15. NOTIFICATIONS PAGE
         ========================================================================== */
#notificationsContainer {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Notification cards are rendered with inline JS styles;
         .update-card base class provides the card shell. */

/* ==========================================================================
         16. POLL WIDGETS
         ========================================================================== */

/* Outer frame generated by buildPollMarkup() in groups.js */
.poll-widget-frame {
  margin-top: 12px;
  background: #131922;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid #2d3748;
}

/* Clickable poll option — list & image variants */
.poll-vote-action-btn {
  transition: border-color 0.2s, background-color 0.2s, transform 0.12s;
}

.poll-vote-action-btn:hover {
  border-color: var(--accent-blue) !important;
  transform: translateY(-1px);
}

/* ==========================================================================
         17. FOOTER
         ========================================================================== */
footer {
  text-align: center;
  padding: 22px 24px;
  background-color: var(--bg-card);
  border-top: 1px solid var(--border-color);
  margin-top: auto;
}

footer p {
  color: var(--text-muted);
  font-size: 13px;
}

/* ==========================================================================
         18. SCROLLBAR (webkit)
         ========================================================================== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-body);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}
/* ==========================================================================
       STYLES ADDITIONS — paste these into the bottom of styles.css
       ========================================================================== */

/* --- Toolbar Tool Buttons (SVG icon version) --- */
.tool-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  width: 38px;
  height: 38px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.tool-btn svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.tool-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-color);
  color: var(--accent-blue);
}

/* --- Composer Toolbar Row Layout --- */
.composer-toolbar {
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-body);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 0 0 16px 16px;
}

.toolbar-media-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* --- Attachment Preview Box --- */
.attachment-preview-box {
  position: relative;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 12px;
}

/* The render area where media/file info sits */
.render-area {
  padding: 12px;
  min-height: 56px;
}

/* Loading overlay — absolutely covers the render area during upload */
.attachment-loading {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 15, 0.75);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
  z-index: 10;
  border-radius: 10px;
}

/* Spinning loader icon animation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spin-icon {
  animation: spin 1s linear infinite;
  opacity: 0.7;
}

/* Remove button — bottom-left corner of preview box */
.clear-attach-btn {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: transparent;
  color: var(--accent-danger);
  border: 1px solid var(--accent-danger);
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  z-index: 5;
}

.clear-attach-btn:hover {
  background: var(--accent-danger);
  color: white;
}

/* --- Inline Media Preview Widgets (image / video) --- */
.media-preview-widget {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 40px; /* room for the Remove button */
}

.preview-media-img {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.preview-media-video {
  width: 100%;
  max-height: 240px;
  display: block;
  border-radius: 8px;
  background: #000;
}

/* --- File Attachment Info Card (no preview, files only) --- */
.file-attachment-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-muted);
  margin-bottom: 40px; /* room for the Remove button */
}

.file-attachment-tag svg {
  flex-shrink: 0;
  color: var(--accent-blue);
}

.file-name-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 500;
}

.file-size-label {
  color: var(--text-muted);
  font-size: 11px;
  flex-shrink: 0;
}

/* --- Upload error message (shown if Firebase Storage fails) --- */
.upload-error-msg {
  color: #f87171;
  font-size: 12px;
  text-align: center;
  margin: 6px 0 44px;
  padding: 0 12px;
}

/* --- Publish button disabled state --- */
#publishPostBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* ==========================================================================
       SHARENET — styles_additions.css
       Paste the contents of this file at the bottom of styles.css
       Sections:
         A.  Profile Settings Modal
         B.  AI Chatbot Widget (FAB + Panel)
         C.  Messenger — Full-Screen Layout
         D.  Messenger — Sidebar & Conversations List
         E.  Messenger — Chat View (Messages, Bubbles, Compose Bar)
         F.  Messenger — Modals (New Chat, User Picker)
       ========================================================================== */

/* ==========================================================================
       A.  PROFILE SETTINGS MODAL
       ========================================================================== */

.profile-modal-box {
  max-width: 420px;
  width: 100%;
}

.profile-pic-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.profile-pic-preview {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  color: #fff;
  font-size: 32px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 3px solid var(--border-color);
}

.change-pic-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--accent-blue);
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.change-pic-btn:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: var(--accent-blue);
}

.profile-pic-hint {
  font-size: 11px;
  color: var(--text-secondary);
}

/* ==========================================================================
         B.  AI CHATBOT WIDGET
         ========================================================================== */

/* Floating action button — bottom-right corner */
.chatbot-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
  z-index: 900;
  transition: transform 0.2s, box-shadow 0.2s;
}

.chatbot-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 28px rgba(59, 130, 246, 0.65);
}

/* Chat panel (pops up above the FAB) */
.chatbot-panel {
  position: fixed;
  bottom: 92px;
  right: 28px;
  width: 340px;
  max-height: 480px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  z-index: 901;
  overflow: hidden;
}

.chatbot-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg-card-hover);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.chatbot-avatar-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
}

.chatbot-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}

.chatbot-close-btn:hover {
  color: var(--text-main);
}

.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chatbot-msg {
  max-width: 86%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  word-break: break-word;
}

.chatbot-msg-user {
  background: var(--accent-blue);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.chatbot-msg-assistant {
  background: var(--bg-card-hover);
  color: var(--text-main);
  align-self: flex-start;
  border: 1px solid var(--border-color);
  border-bottom-left-radius: 4px;
}

.chatbot-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}

.chatbot-input {
  flex: 1;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 9px 13px;
  border-radius: 10px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.chatbot-input:focus {
  border-color: var(--accent-blue);
}

.chatbot-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-blue);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}

.chatbot-send-btn:hover {
  background: #2563eb;
}

@media (max-width: 480px) {
  .chatbot-panel {
    width: calc(100vw - 32px);
    right: 16px;
    bottom: 84px;
  }
  .chatbot-fab {
    right: 16px;
    bottom: 20px;
  }
}

/* ==========================================================================
         C.  MESSENGER — FULL-SCREEN LAYOUT
         ========================================================================== */

/* Auth wall (covers the page when not logged in) */
.messenger-auth-wall {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.messenger-auth-box {
  text-align: center;
  max-width: 360px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 48px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.messenger-auth-box h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
}

.messenger-auth-box p {
  font-size: 14px;
  color: var(--text-muted);
}

/* Main messenger two-column layout */
.messenger-layout {
  flex: 1;
  display: flex;
  min-height: 0; /* Crucial: Allows the child scrolling to function */
  overflow: hidden;
}
/* ==========================================================================
         D.  MESSENGER — SIDEBAR & CONVERSATIONS LIST
         ========================================================================== */

.messenger-sidebar {
  width: 300px;
  min-width: 240px;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  flex-shrink: 0;
}

.messenger-sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.messenger-sidebar-top h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
}

/* New message "+" button */
.new-chat-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent-blue);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}

.new-chat-btn:hover {
  background: #2563eb;
  transform: scale(1.05);
}

.messenger-search-wrap {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.messenger-search-input {
  width: 100%;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.messenger-search-input:focus {
  border-color: var(--accent-blue);
}

.conversations-list {
  flex: 1;
  overflow-y: auto;
}

/* Individual conversation row */
.conversation-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid rgba(42, 52, 65, 0.5);
  transition: background 0.15s;
  position: relative;
}

.conversation-item:hover {
  background: var(--bg-card-hover);
}

.conversation-item.active {
  background: rgba(59, 130, 246, 0.1);
  border-right: 3px solid var(--accent-blue);
}

.conv-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.conv-info {
  flex: 1;
  min-width: 0;
}

.conv-name-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
}

.conv-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conv-time {
  font-size: 11px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.conv-preview {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

/* Unread badge (red pill on conversation row) */
.conv-unread-badge {
  background: var(--accent-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.conversations-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.loading-text {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

@media (max-width: 680px) {
  .messenger-sidebar {
    width: 72px;
    min-width: 72px;
  }
  .messenger-sidebar-top h3,
  .messenger-search-wrap,
  .conv-info,
  .conv-unread-badge,
  .conv-time {
    display: none;
  }
  .conversation-item {
    justify-content: center;
    padding: 12px 8px;
  }
  .conv-avatar {
    width: 46px;
    height: 46px;
  }
}

/* ==========================================================================
         E.  MESSENGER — CHAT VIEW
         ========================================================================== */

.messenger-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-body);
}

/* Empty state (before a conversation is selected) */
.empty-chat-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--text-muted);
  font-size: 14px;
  padding: 40px;
  text-align: center;
}

/* Active chat wrapper */
.active-chat-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Chat header bar */
.chat-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.chat-recipient-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.chat-recipient-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

/* Scrollable messages area */
.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.messages-loading {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 24px;
}

/* Date separator line */
.msg-date-separator {
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
  margin: 14px 0 8px;
  position: relative;
}

.msg-date-separator::before,
.msg-date-separator::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: var(--border-color);
}

.msg-date-separator::before {
  right: 58%;
}
.msg-date-separator::after {
  left: 58%;
}

/* Message row (positions bubble left or right) */
.msg-row {
  display: flex;
  margin-bottom: 2px;
}

.msg-row-mine {
  justify-content: flex-end;
}
.msg-row-theirs {
  justify-content: flex-start;
}

/* Chat bubble */
.msg-bubble {
  max-width: 68%;
  padding: 10px 14px;
  border-radius: 18px;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
}

.msg-bubble-mine {
  background: var(--accent-blue);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.msg-bubble-theirs {
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-bottom-left-radius: 4px;
}

.msg-text {
  white-space: pre-wrap;
}

.msg-time {
  font-size: 10px;
  opacity: 0.65;
  margin-top: 4px;
  text-align: right;
}

/* Compose bar */
.message-compose-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-card);
  flex-shrink: 0;
}

.message-compose-input {
  flex: 1;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 11px 16px;
  border-radius: 24px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.message-compose-input:focus {
  border-color: var(--accent-blue);
}

.message-send-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s;
}

.message-send-btn:hover {
  background: #2563eb;
  transform: scale(1.06);
}

/* ==========================================================================
         F.  MESSENGER — USER PICKER LIST (New Chat Modal)
         ========================================================================== */

.user-picker-list {
  margin-top: 12px;
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}

.user-picker-item:hover {
  background: var(--bg-card-hover);
}

.user-picker-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.user-picker-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
}
@keyframes pulseDots {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}
.chatbot-msg-assistant:contains("● ● ●") {
  animation: pulseDots 1.4s infinite ease-in-out;
  letter-spacing: 2px;
}

/* ==========================================================================
       NEW ADDITIONS — Image drop zones, group icons, dark mode toggle,
       conversation delete button
       ========================================================================== */

/* ── Generic Image Drop Zone ──────────────────────────────────────────────── */
.image-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 14px;
  border: 2px dashed var(--border-color);
  border-radius: 12px;
  background: var(--bg-body);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  min-height: 100px;
  text-align: center;
}

.image-drop-zone:hover {
  border-color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.04);
}

.image-drop-zone.drag-over {
  border-color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.1);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.image-drop-zone.has-image {
  border-style: solid;
  border-color: var(--accent-blue);
  padding: 12px;
}

.drop-zone-icon {
  color: var(--text-secondary);
  flex-shrink: 0;
}

.drop-zone-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.drop-zone-sub {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Round variant for profile pictures */
.image-drop-zone-round {
  border-radius: 50% !important;
  border: 2px dashed var(--border-color);
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.image-drop-zone-round:hover {
  border-color: var(--accent-blue);
}

.image-drop-zone-round.drag-over {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

/* Composer drop zone overlay (highlights the entire body area) */
.composer-body.drag-over {
  outline: 2px dashed var(--accent-blue);
  outline-offset: -4px;
  background: rgba(59, 130, 246, 0.04);
  border-radius: 8px;
}

/* ── Group Sidebar Icons ──────────────────────────────────────────────────── */
.group-item-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-sidebar-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border-color);
}

.group-sidebar-icon-svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.6;
}

/* ── Dark Mode Toggle Switch ─────────────────────────────────────────────── */
.theme-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.theme-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.theme-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border-color);
  border-radius: 24px;
  transition: background 0.25s;
}

.theme-toggle-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.theme-toggle-switch input:checked + .theme-toggle-slider {
  background: var(--accent-blue);
}

.theme-toggle-switch input:checked + .theme-toggle-slider::before {
  transform: translateX(20px);
}

/* ── Conversation Delete Button ──────────────────────────────────────────── */
.conv-delete-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.conversation-item:hover .conv-delete-btn {
  opacity: 1;
}

.conv-delete-btn:hover {
  color: var(--accent-danger);
  background: rgba(248, 81, 73, 0.1);
}

/* ==========================================================================
       NOTIFICATION CARDS — CSS-variable-based (dark + light theme aware)
       ========================================================================== */

.notif-card {
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 10px;
  border-left: 3px solid var(--accent-purple);
  background: var(--bg-card-hover);
  transition: background 0.2s, border-color 0.2s;
}

.notif-card.notif-deletion {
  background: color-mix(in srgb, var(--accent-danger) 8%, var(--bg-card));
  border-left-color: var(--accent-danger);
}

.notif-card.notif-creation {
  background: color-mix(in srgb, var(--accent-success) 8%, var(--bg-card));
  border-left-color: var(--accent-cyan);
}

.notif-card.notif-default {
  background: var(--bg-card-hover);
  border-left-color: var(--accent-purple);
}

.notif-title {
  margin: 0 0 5px 0;
  color: var(--text-main);
  font-size: 15px;
  font-weight: 600;
}

.notif-message {
  margin: 0 0 8px 0;
  color: var(--text-muted);
  font-size: 14px;
}

.notif-time {
  color: var(--text-secondary);
  font-size: 11px;
}

/* ==========================================================================
       LIGHT MODE — fix remaining white-box issues
       ========================================================================== */

/* Input fields: remove the white bg that was added in previous pass */
html.theme-light input,
html.theme-light textarea,
html.theme-light select {
  background: #fff0f5;
  border-color: var(--border-color);
  color: var(--text-main);
}

/* Composer modal inner areas */
html.theme-light .composer-container {
  background: var(--bg-card);
  border-color: var(--border-color);
}

html.theme-light .composer-body,
html.theme-light .composer-toolbar {
  background: var(--bg-card);
}

html.theme-light .composer-title-field,
html.theme-light .composer-text-area {
  background: #fff0f5;
  color: var(--text-main);
  border-color: var(--border-color);
}

/* Post cards */
html.theme-light .post-card {
  background: var(--bg-card);
  border-color: var(--border-color);
}

html.theme-light .post-render-text,
html.theme-light .author-name,
html.theme-light .post-render-title {
  color: var(--text-main);
}

html.theme-light .post-timestamp {
  color: var(--text-secondary);
}

html.theme-light .post-engagement-bar {
  border-top-color: var(--border-color);
}

html.theme-light .toggle-comments-trigger-btn,
html.theme-light .view-counter-lbl {
  color: var(--text-muted);
}

html.theme-light .toggle-comments-trigger-btn:hover {
  color: var(--accent-purple);
}

/* Emoji picker */
html.theme-light .emoji-picker-container {
  background: var(--bg-card);
  border-color: var(--border-color);
}

/* Plugin submenu */
html.theme-light .plugin-submenu {
  background: var(--bg-card);
  border-color: var(--border-color);
}

html.theme-light .submenu-item {
  color: var(--text-main);
}

html.theme-light .submenu-item:hover {
  background: var(--bg-card-hover);
}

/* Poll widgets */
html.theme-light .poll-widget-frame {
  background: #fff0f5;
  border-color: var(--border-color);
}

/* Members page cards */
html.theme-light .member-card {
  background: var(--bg-card);
  border-color: var(--border-color);
}

html.theme-light .member-name {
  color: var(--text-main);
}

html.theme-light .member-display-name {
  color: var(--text-muted);
}

/* Update cards on home page */
html.theme-light .update-card {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-main);
}

/* Notification cards in light mode */
html.theme-light .notif-card {
  background: color-mix(in srgb, var(--accent-purple) 6%, var(--bg-card));
}

html.theme-light .notif-card.notif-deletion {
  background: color-mix(in srgb, var(--accent-danger) 8%, var(--bg-card));
}

html.theme-light .notif-card.notif-creation {
  background: color-mix(in srgb, var(--accent-success) 6%, var(--bg-card));
}

/* Messenger light mode extras */
html.theme-light .messages-container {
  background: #fce4ec;
}

html.theme-light .msg-bubble-mine {
  background: var(--accent-purple);
}

/* Chatbot panel light mode */
html.theme-light .chatbot-panel-header {
  background: var(--bg-card-hover);
}

/* Nav right container avatar */
html.theme-light .nav-profile-avatar {
  background: var(--accent-purple);
  color: #fff;
}

/* Scrollbar in light mode */
html.theme-light ::-webkit-scrollbar-track {
  background: #f8bbd0;
}

html.theme-light ::-webkit-scrollbar-thumb {
  background: var(--accent-purple);
}
/* ==========================================================================
     POST COMMENTS STYLING
     ========================================================================== */
.comment-item-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: #131922;
  padding: 8px;
  border-radius: 6px;
}
.comment-avatar-wrap {
  width: 26px;
  height: 26px;
  background: #475569;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  color: white;
  flex-shrink: 0;
  overflow: hidden;
}
.comment-content-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.comment-author-label {
  font-size: 12px;
  font-weight: bold;
  color: #cbd5e1;
}
.comment-text-content {
  font-size: 13px;
  color: #f1f5f9;
  margin-top: 2px;
  white-space: pre-wrap;
}

/* Light Mode Overrides for Comments (Sky Blue) */
html.theme-light .comment-item-row {
  background: #e0f2fe; /* Soft Sky blue */
}
html.theme-light .comment-author-label {
  color: #0369a1; /* Dark blue for readability */
}
html.theme-light .comment-text-content {
  color: #0f172a; /* Slate text */
}

/* ==========================================================================
   19. BADGES SYSTEM
   ========================================================================== */

/* ── Badge pill — the core reusable unit, shown on profile cards,
   post author names, and comment author names. Background/text colors
   are set inline per-badge via JS since they're fully user-defined. ── */
.user-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.user-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
}

.user-badge-icon .material-symbols-outlined {
  font-size: 13px;
  line-height: 1;
}

.user-badge-icon img {
  width: 13px;
  height: 13px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Wrapper placed next to a name (post author, comment author, member card) */
.user-badge-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
  vertical-align: middle;
}

/* "+N" overflow trigger button, shown when a user has more than one badge */
.badge-overflow-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
}

.badge-overflow-trigger:hover {
  background: var(--accent-purple);
  color: #fff;
  border-color: var(--accent-purple);
}

/* Badge row sitting under the member name on a profile card */
.member-card-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

/* ── Badge Manager modal (admin) — list of existing badges ── */
.badge-manager-box {
  max-width: 480px;
  width: 92%;
}

.badge-manager-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
}

.badge-manager-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card-hover);
}

.badge-manager-row-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.badge-manager-row-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.badge-manager-delete-btn {
  background: none;
  border: none;
  color: var(--accent-danger);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 6px;
  transition: background 0.15s;
}

.badge-manager-delete-btn:hover {
  background: rgba(248, 81, 73, 0.15);
}

/* ── Create Badge form ── */
.badge-icon-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.badge-icon-tab {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-card-hover);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.badge-icon-tab.active {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: #fff;
}

.badge-icon-panel {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px;
  background: var(--bg-card-hover);
}

.badge-icon-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
}

.badge-icon-option {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s;
}

.badge-icon-option .material-symbols-outlined {
  font-size: 20px;
}

.badge-icon-option:hover {
  border-color: var(--accent-purple);
}

.badge-icon-option.selected {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: #fff;
}

.badge-icon-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 12px;
  border: 2px dashed var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  color: var(--text-muted);
  transition: all 0.15s;
}

.badge-icon-dropzone:hover,
.badge-icon-dropzone.drag-over {
  border-color: var(--accent-purple);
  color: var(--accent-purple);
}

.badge-icon-dropzone p {
  margin: 0;
  font-size: 13px;
}

/* Color inputs — keep native swatch but match card sizing */
input[type="color"]#badgeTextColorInput,
input[type="color"]#badgeBgColorInput {
  width: 100%;
  height: 42px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-card-hover);
  cursor: pointer;
}

/* ── "+N more" overflow popup list ── */
.badge-overflow-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.badge-overflow-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card-hover);
}

/* Clickable variant used in the Award Badge picker */
.badge-overflow-item.badge-pickable {
  cursor: pointer;
  transition: all 0.15s;
}

.badge-overflow-item.badge-pickable:hover {
  border-color: var(--accent-purple);
  transform: translateY(-1px);
}

/* ── Light mode overrides ── */
html.theme-light .badge-manager-row,
html.theme-light .badge-icon-panel,
html.theme-light .badge-icon-option,
html.theme-light .badge-overflow-item {
  background: var(--bg-card);
  border-color: var(--border-color);
}

html.theme-light .badge-icon-tab {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-muted);
}

html.theme-light .badge-icon-tab.active {
  background: var(--accent-purple);
  color: #fff;
}

html.theme-light .badge-icon-dropzone {
  border-color: var(--border-color);
  color: var(--text-muted);
}

html.theme-light .badge-overflow-trigger {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-muted);
}

html.theme-light input[type="color"]#badgeTextColorInput,
html.theme-light input[type="color"]#badgeBgColorInput {
  background: var(--bg-card);
  border-color: var(--border-color);
}

/* ==========================================================================
   20. PROFILE PAGE
   ========================================================================== */

/* ── Page container — matches the site's 1200px standard ── */
.profile-page-container {
  max-width: 1200px;
  width: 100%;
  margin: 36px auto;
  padding: 0 24px 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}

.profile-loading,
.profile-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  gap: 12px;
  color: var(--text-muted);
}

/* ── Header card — full-width with a subtle gradient banner at the top ── */
.profile-header-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  overflow: hidden;
}

/* Purple gradient banner strip */
.profile-header-card::before {
  content: "";
  display: block;
  height: 120px;
  background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 40%, #a21caf 100%);
  border-radius: 0;
}

.profile-header-inner {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  padding: 0 36px 32px;
  margin-top: -52px; /* Pull avatar up into the banner */
  flex-wrap: wrap;
}

.profile-page-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--bg-body);
  border: 4px solid var(--bg-card);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 700;
  color: var(--accent-purple);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  position: relative;
  z-index: 1;
}

.profile-page-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.profile-header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 56px; /* Push text below the avatar overlap zone */
  min-width: 240px;
}

.profile-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.profile-display-name {
  font-size: 30px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.profile-role-pill {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.profile-role-admin {
  background: rgba(187, 134, 252, 0.15);
  color: var(--accent-purple);
  border: 1px solid var(--accent-purple);
}

.profile-role-member {
  background: rgba(148, 163, 184, 0.1);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.profile-username {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0;
}

.profile-badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.profile-follow-stats {
  display: flex;
  gap: 28px;
  margin-top: 6px;
}

.profile-stat-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 0;
  color: var(--text-main);
  transition: color 0.15s;
}

.profile-stat-btn:hover .profile-stat-num {
  color: var(--accent-purple);
}

.profile-stat-num {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
}

.profile-stat-label {
  font-size: 13px;
  color: var(--text-muted);
}

.profile-action-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}

.profile-follow-btn {
  padding: 9px 26px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  background: var(--accent-purple);
  color: #fff;
  transition: background 0.15s, transform 0.1s;
}

.profile-follow-btn:hover {
  background: #9333ea;
  transform: translateY(-1px);
}

.profile-follow-btn--following {
  background: var(--bg-card-hover);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.profile-follow-btn--following:hover {
  background: rgba(248, 81, 73, 0.1);
  color: var(--accent-danger);
  border-color: var(--accent-danger);
}

/* ── Join date strip — sits flush under the header card ── */
.profile-join-strip {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-join-date {
  color: var(--text-muted);
}

/* ── Body grid: About (wide) + Groups I Own (narrower sidebar) ── */
.profile-body-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}

.profile-about-section,
.profile-groups-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 26px 24px;
}

.profile-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.profile-section-header h3,
.profile-about-section h3,
.profile-groups-section h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 14px;
}

.profile-section-header h3 {
  margin: 0;
}

.profile-edit-inline-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}

.profile-edit-inline-btn:hover {
  color: var(--accent-purple);
  background: rgba(187, 134, 252, 0.1);
}

.profile-about-content {
  min-height: 60px;
}

.profile-about-text {
  font-size: 14px;
  color: var(--text-main);
  line-height: 1.7;
  margin: 0;
  white-space: pre-wrap;
}

.profile-about-empty {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  font-style: italic;
}

.profile-about-textarea {
  width: 100%;
  min-height: 120px;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-main);
  font-size: 14px;
  padding: 10px 12px;
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
}

.profile-about-textarea:focus {
  outline: none;
  border-color: var(--accent-purple);
}

.profile-groups-list {
  font-size: 13px;
  color: var(--text-main);
  line-height: 1.8;
  margin: 0;
}

/* ── Badges section — full width at the bottom ── */
.profile-badges-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 26px 24px;
}

.profile-badges-section h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 18px;
}

.profile-badges-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

.profile-badge-card {
  display: flex;
  align-items: center;
}

/* ── Follow list popup ── */
.follow-list-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.follow-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-card-hover);
  text-decoration: none;
  transition: border-color 0.15s;
  color: var(--text-main);
}

.follow-list-item:hover {
  border-color: var(--accent-purple);
}

.follow-list-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-purple);
  overflow: hidden;
  flex-shrink: 0;
}

.follow-list-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.follow-list-username {
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Member card avatar becomes a clickable link ── */
.member-card-avatar-link {
  display: block;
  cursor: pointer;
  border-radius: 50%;
  text-decoration: none;
}

/* ── Post/comment author names as clickable links ── */
.author-name-link,
.comment-author-name-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.author-name-link:hover,
.comment-author-name-link:hover {
  color: var(--accent-purple);
  text-decoration: underline;
}

/* ── Responsive: stack at tablet and below ── */
@media (max-width: 860px) {
  .profile-body-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .profile-page-container {
    padding: 0 12px 40px;
    margin: 20px auto;
  }
  .profile-header-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 20px 24px;
  }
  .profile-header-info {
    padding-top: 16px;
    align-items: center;
  }
  .profile-follow-stats,
  .profile-action-row,
  .profile-name-row,
  .profile-badge-row {
    justify-content: center;
  }
  .profile-header-card::before {
    height: 80px;
  }
  .profile-page-avatar {
    width: 90px;
    height: 90px;
    font-size: 36px;
    margin-top: -45px;
  }
  .profile-display-name {
    font-size: 24px;
  }
}

/* ── Light mode overrides ── */
html.theme-light .profile-header-card,
html.theme-light .profile-join-strip,
html.theme-light .profile-about-section,
html.theme-light .profile-groups-section,
html.theme-light .profile-badges-section {
  background: var(--bg-card);
  border-color: var(--border-color);
}

html.theme-light .profile-header-card::before {
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 40%, #c026d3 100%);
}

html.theme-light .profile-display-name,
html.theme-light .profile-stat-num,
html.theme-light .profile-about-text,
html.theme-light .profile-groups-list {
  color: var(--text-main);
}

html.theme-light .profile-about-textarea {
  background: #f8fafc;
  border-color: var(--border-color);
  color: var(--text-main);
}

html.theme-light .follow-list-item {
  background: var(--bg-card);
  border-color: var(--border-color);
}

html.theme-light .profile-role-admin {
  background: rgba(168, 85, 247, 0.1);
}

html.theme-light .profile-role-member {
  background: rgba(148, 163, 184, 0.08);
}

/* ==========================================================================
   21. FEEDBACK FEATURES — group meta, poll creator, notification updates
   ========================================================================== */

/* ── Group sidebar: member count + access icon ──
   (.group-item and .group-item-label are defined in section 10,
    updated there to support the new column layout) ── */
.group-item-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  padding-left: 2px;
}

.group-access-icon {
  font-size: 13px !important;
  color: var(--text-muted);
}

/* ── Poll creator modal option rows ── */
.poll-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.poll-option-input {
  flex: 1;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-main);
  font-size: 13px;
  padding: 8px 12px;
  font-family: inherit;
}

.poll-option-input:focus {
  outline: none;
  border-color: var(--accent-purple);
}

.poll-option-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 6px;
  transition: color 0.15s;
}

.poll-option-remove-btn:hover {
  color: var(--accent-danger);
}

/* ── Notification preview snippet ── */
.notif-preview {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  margin: 4px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Clickable notification card ── */
.notif-card-link {
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}

.notif-card-link:hover {
  border-color: var(--accent-purple) !important;
  transform: translateY(-1px);
}

/* ── Light mode overrides ── */
html.theme-light .poll-option-input {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-main);
}

html.theme-light .notif-preview {
  color: var(--text-muted);
}

/* ==========================================================================
   20. ROLES SYSTEM & MEMBER CARD ACTIONS MENU
   ========================================================================== */

/* ── "..." kebab button in the top-right corner of a member card ── */
.member-card-menu-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-card-hover);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s;
  z-index: 2;
}

.member-card-menu-btn .material-symbols-outlined {
  font-size: 18px;
}

.member-card-menu-btn:hover {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: #fff;
}

/* ── Generic role pill, used in the Role Manager list ── */
.role-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.role-manager-row {
  align-items: center;
}

/* ── Create/Edit Role modal ── */
.role-editor-box {
  max-width: 480px;
  width: 92%;
}

.role-permissions-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.role-permission-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card-hover);
  cursor: pointer;
  transition: border-color 0.15s;
}

.role-permission-check:hover {
  border-color: var(--accent-purple);
}

.role-permission-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 4px 0 2px;
}

.role-permission-section-label-restrict {
  margin-top: 14px;
  color: var(--accent-danger);
}

.role-permission-check-restriction {
  border-left: 3px solid var(--accent-danger);
}

/* Custom-drawn checkbox for role permission checks. Previously relied on
   accent-color to tint the browser's NATIVE checkbox rendering - but
   Versoly's platform-level CSS appears to reset/suppress native form
   control appearance site-wide (consistent with other Versoly quirks
   noted elsewhere in this file, like stripped onclick attributes and the
   Material Symbols font import needing a manual workaround). With native
   appearance suppressed, accent-color has nothing to tint, so the
   checkbox stayed fully clickable/functional but never visually showed
   checked vs. unchecked. Drawing the box and checkmark ourselves with
   appearance:none + a ::after pseudo-element sidesteps that entirely,
   regardless of what the platform does to native controls. */
.role-permission-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 2px;
  border: 2px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-body);
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s, border-color 0.15s;
}

.role-permission-check input[type="checkbox"]:hover {
  border-color: var(--accent-purple);
}

.role-permission-check input[type="checkbox"]:checked {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
}

.role-permission-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.role-permission-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

html.theme-light .role-permission-check input[type="checkbox"] {
  background: #fff0f5;
  border-color: var(--border-color);
}

html.theme-light .role-permission-check input[type="checkbox"]:checked {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
}

.role-permission-check-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.role-permission-check-text strong {
  font-size: 13px;
  color: var(--text-main);
  font-weight: 600;
}

.role-permission-check-text small {
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Member Actions popup (opened from the "..." button) ── */
.member-actions-box {
  max-width: 440px;
  width: 92%;
  max-height: 84vh;
  overflow-y: auto;
}

.member-actions-section {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
  background: var(--bg-card-hover);
}

.member-actions-section:last-child {
  margin-bottom: 0;
}

.member-actions-section h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-purple);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}

.member-actions-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.member-actions-row select {
  flex: 1;
}

.member-actions-empty {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

/* ── Light mode overrides ── */
html.theme-light .member-card-menu-btn {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-muted);
}

html.theme-light .role-permission-check {
  background: var(--bg-card);
  border-color: var(--border-color);
}

html.theme-light .member-actions-section {
  background: var(--bg-card);
  border-color: var(--border-color);
}

/* ==========================================================================
   21. POST EDITING, EDIT HISTORY, REACTIONS, DEEP-LINK HIGHLIGHT
   ========================================================================== */

.post-edited-indicator {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
  cursor: pointer;
  padding: 0;
  margin-top: 6px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.post-edited-indicator:hover {
  color: var(--accent-purple);
}

.post-history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.post-history-entry {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--bg-card-hover);
}

.post-history-entry-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.post-history-entry-title {
  font-size: 14px;
  color: var(--text-main);
  margin-bottom: 4px;
}

.post-history-entry-text {
  font-size: 13px;
  color: var(--text-main);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Reactions bar ── */
.post-reactions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-card-hover);
  color: var(--text-main);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.reaction-pill:hover {
  border-color: var(--accent-purple);
}

.reaction-pill-mine {
  border-color: var(--accent-purple);
  background: rgba(187, 134, 252, 0.15);
}

.reaction-pill-emoji {
  font-size: 15px;
}

.reaction-pill-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.reaction-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px dashed var(--border-color);
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.reaction-add-btn:hover {
  border-color: var(--accent-purple);
  color: var(--accent-purple);
}

/* ── Deep-link highlight — brief pulse to draw the eye to the linked post ── */
@keyframes postDeepLinkPulse {
  0% { box-shadow: 0 0 0 0 rgba(187, 134, 252, 0.55); }
  70% { box-shadow: 0 0 0 14px rgba(187, 134, 252, 0); }
  100% { box-shadow: 0 0 0 0 rgba(187, 134, 252, 0); }
}

.post-deep-link-highlight {
  animation: postDeepLinkPulse 1.3s ease-out 2;
  border-color: var(--accent-purple) !important;
}

/* ── Light mode overrides ── */
html.theme-light .post-history-entry {
  background: var(--bg-card);
  border-color: var(--border-color);
}

html.theme-light .reaction-pill {
  background: var(--bg-card);
  border-color: var(--border-color);
}

html.theme-light .reaction-pill-mine {
  background: rgba(139, 92, 246, 0.12);
}

/* ==========================================================================
   22. MESSENGER — GROUP CHATS, EMOJI PICKER, IMAGE MESSAGES
   ========================================================================== */

/* ── Multi-select user picker (New Chat modal) ── */
.user-picker-item {
  position: relative;
  border: 1px solid transparent;
}

.user-picker-check {
  margin-left: auto;
  font-size: 20px;
  color: var(--border-color);
  transition: color 0.15s;
}

.user-picker-item.selected {
  background: rgba(187, 134, 252, 0.1);
  border-color: var(--accent-purple);
}

.user-picker-item.selected .user-picker-check {
  color: var(--accent-purple);
  font-variation-settings: "FILL" 1;
}

/* ── Compose bar tool buttons (emoji / image) ── */
.message-tool-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.message-tool-btn:hover {
  background: var(--bg-card-hover);
  color: var(--accent-purple);
}

.message-compose-bar.compose-drag-over {
  outline: 2px dashed var(--accent-purple);
  outline-offset: -4px;
  background: rgba(187, 134, 252, 0.06);
}

/* ── Emoji picker panel above the compose bar ── */
.msg-emoji-picker-panel {
  border-top: 1px solid var(--border-color);
  background: var(--bg-card);
  padding: 10px 14px;
  flex-shrink: 0;
}

.msg-emoji-picker-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.msg-emoji-picker-header input {
  flex: 1;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 8px 12px;
  border-radius: 18px;
  font-size: 13px;
  outline: none;
}

/* ── Image messages in chat bubbles ── */
.msg-image {
  max-width: 220px;
  max-height: 260px;
  border-radius: 12px;
  display: block;
  margin-bottom: 4px;
  cursor: pointer;
  object-fit: cover;
}

/* ── Light mode overrides ── */
html.theme-light .user-picker-item.selected {
  background: rgba(139, 92, 246, 0.1);
}

html.theme-light .msg-emoji-picker-panel {
  background: var(--bg-card);
}

html.theme-light .msg-emoji-picker-header input {
  background: var(--bg-card);
}

/* --- Versoly single-page build additions --- */

/* Material Symbols icon font import is at the very top of this file (see
   font_import above) - it originally loaded via a link tag in each page's
   own head section, which got stripped out when converting to Versoly's
   body-only fields. Without it, .material-symbols-outlined elements show
   their raw icon name ("edit", "delete", "more_vert", etc.) as plain text
   instead of rendering as icons. */

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.sn-page { width: 100%; }
#page-messenger.sn-page { height: calc(100vh - 70px); overflow: hidden; display: flex; flex-direction: column; }

/* "Under development" placeholder pages (Events/Blog/Calendar) - restyled
   to match the site's real theme instead of the old hardcoded black/purple
   colors, since that inline style block also got stripped in conversion.
   Targets the dev-modal/close-home-btn classes already present in the
   original markup - no HTML changes needed. */
.sn-dev-page-unused {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.dev-modal {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 40px;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  max-width: 400px;
  width: 90%;
}
.dev-modal h2 {
  color: var(--accent-purple);
  margin: 0 0 10px 0;
  font-size: 24px;
}
.dev-modal p {
  color: var(--text-muted);
  margin: 0 0 25px 0;
  font-size: 16px;
}
.dev-modal .close-home-btn {
  background-color: var(--accent-purple);
  color: var(--bg-body);
  border: none;
  padding: 12px 30px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s, opacity 0.2s;
}
.dev-modal .close-home-btn:hover {
  opacity: 0.85;
}

/* Defensive fix: several file inputs rely on the [hidden] HTML attribute to
   stay invisible (they're only meant to be triggered programmatically by a
   button click). Versoly is known to strip some attributes from pasted
   markup (it already dropped onclick attributes entirely) - this forces
   them hidden via CSS regardless of whether the attribute survived. */
input[type="file"][hidden],
#msgImageFileInput,
#groupChatIconFileInput,
#badgeIconFileInput,
#editGroupIconFileInput,
#hiddenFileInput,
#hiddenImageInput,
#hiddenVideoInput {
  display: none !important;
}

/* .submit-comment-action-btn (the "Send" button under a post's comment box,
   and "Send Reply" under a reply box) only ever had mobile-breakpoint
   overrides (padding/font-size) in the original stylesheet - no base style
   was ever defined, so on desktop it fell back to a bare unstyled button.
   This was already true before the Versoly migration; not caused by it. */
.submit-comment-action-btn {
  background-color: var(--accent-blue);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap;
}
.submit-comment-action-btn:hover {
  background-color: #2563eb;
}

/* ==========================================================================
   23. FEEDBACK WIDGET — floating submit/view buttons + their modals
   ========================================================================== */

.feedback-fab {
  position: fixed;
  left: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 900;
  transition: transform 0.2s, box-shadow 0.2s;
}

.feedback-fab:hover {
  transform: scale(1.08);
}

/* Submit button - visible to any member with canSubmitFeedback */
.feedback-fab-submit {
  bottom: 28px;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}

/* Admin view button - stacked directly above the submit button, only
   visible to accounts with canViewFeedback */
.feedback-fab-view {
  bottom: 92px;
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
  box-shadow: 0 6px 20px rgba(187, 134, 252, 0.5);
}

.feedback-modal-box {
  max-width: 480px;
  width: 92%;
}

.feedback-tabs {
  margin-bottom: 4px;
}

.feedback-view-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
}

/* .feedback-entry-card builds on .update-card (background/border/radius/
   shadow, including its light-mode override already defined above) - this
   only adjusts spacing for a denser list item. */
.feedback-entry-card {
  padding: 14px 16px;
}

.feedback-entry-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.feedback-entry-meta strong {
  font-size: 13px;
  color: var(--text-main);
}

.feedback-entry-time {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.feedback-entry-text {
  font-size: 14px;
  color: var(--text-main);
  white-space: pre-wrap;
  line-height: 1.5;
  margin: 0;
}

/* ── Toolbar row (holds the Show/Hide Resolved toggle) ── */
.feedback-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.feedback-toggle-resolved-btn {
  padding: 6px 14px;
  font-size: 12px;
}

.feedback-toggle-resolved-btn.active {
  border-color: var(--accent-purple);
  color: var(--accent-purple);
}

/* ── Per-entry resolve/unresolve checkmark ── */
.feedback-entry-meta-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.feedback-resolve-btn {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s;
  flex-shrink: 0;
}

.feedback-resolve-btn .material-symbols-outlined {
  font-size: 16px;
}

.feedback-resolve-btn:hover {
  border-color: var(--accent-success);
  color: var(--accent-success);
}

.feedback-resolve-btn.resolved {
  background: var(--accent-success);
  border-color: var(--accent-success);
  color: #fff;
}

/* Resolved cards stay visible (when shown) but visually recede so the
   unresolved backlog is what draws the eye */
.feedback-entry-resolved {
  opacity: 0.55;
}

.feedback-entry-resolved .feedback-entry-text {
  text-decoration: line-through;
  text-decoration-color: var(--text-secondary);
}

@media (max-width: 480px) {
  .feedback-fab-submit {
    left: 16px;
    bottom: 20px;
  }
  .feedback-fab-view {
    left: 16px;
    bottom: 84px;
  }
}

/* ==========================================================================
   24. PROJECT CENTER
   Paste this block at the very end of the existing styles.css.
   No existing rules are modified - this is a pure append.
   ========================================================================== */

.projects-container {
  align-items: start;
}

/* ── Grid of project cards ── */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.project-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.project-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-blue);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.project-card-thumb-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--bg-body);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-card-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-card-thumb-placeholder {
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.project-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-card-creator {
  font-size: 12px;
  color: var(--accent-blue);
  text-decoration: none;
  width: fit-content;
}

.project-card-creator:hover {
  text-decoration: underline;
}

.project-card-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.project-card-locked-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--text-secondary);
}

.project-card-locked-badge .material-symbols-outlined {
  font-size: 13px;
}

/* ── Create/Edit Project modal ── */
.project-editor-box {
  max-width: 720px;
  width: 94%;
  max-height: 88vh;
  overflow-y: auto;
}

.project-code-panel {
  margin-top: 4px;
}

/* ── Live size/compression estimate bar (Create/Edit Project modal) ──
   Shows the estimated Firestore document size after code compression,
   plus roughly how much compression is saving. Shifts to warning/danger
   coloring as the project approaches or exceeds PROJECT_MAX_BYTES. */
.project-size-estimate {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 14px;
  border-radius: 8px;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 12px;
}

.project-size-estimate.warning {
  border-color: #f5a524;
  color: #f5a524;
}

.project-size-estimate.danger {
  border-color: var(--accent-danger);
  color: var(--accent-danger);
}

.project-code-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 10px;
  border: 2px dashed var(--border-color);
  border-radius: 10px;
  background: var(--bg-body);
  cursor: pointer;
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 8px;
  transition: border-color 0.2s, background 0.2s;
}

.project-code-dropzone:hover,
.project-code-dropzone.drag-over {
  border-color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.05);
}

.project-code-dropzone p {
  margin: 0;
  font-size: 12px;
}

.project-code-textarea {
  width: 100%;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12.5px;
  resize: vertical;
}

.project-code-textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.project-split-col {
  margin-bottom: 16px;
}

@media (min-width: 760px) {
  #projectSplitFilePanel {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
  }
  #projectSplitFilePanel .project-split-col {
    margin-bottom: 0;
  }
}

.project-allowlist-picked {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.project-allowlist-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--text-main);
}

.project-allowlist-chip button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 2px;
  border-radius: 50%;
}

.project-allowlist-chip button:hover {
  color: var(--accent-danger);
  background: rgba(248, 81, 73, 0.12);
}

.project-allowlist-search-results {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-top: 6px;
  max-height: 160px;
  overflow-y: auto;
  background: var(--bg-card-hover);
}

.project-allowlist-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-main);
}

.project-allowlist-search-row:hover {
  background: var(--bg-body);
}

/* ── Project detail modal ── */
.project-detail-box {
  max-width: 480px;
  /* Cap the modal to the viewport and lay it out as a column so a long
     description scrolls INSIDE the modal instead of stretching it past
     the screen and pushing the Play / Edit / Feedback buttons out of view. */
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The scrollable region: thumbnail, title, description, delete-data
   button and rating. min-height:0 is required for a flex child to be
   allowed to shrink below its content height and actually scroll. */
.project-detail-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px; /* keeps text off the scrollbar */
}

/* Action row (Play / Edit / Send or Show Feedback) - pinned below the
   scroll area so it is always visible regardless of description length. */
.project-detail-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
  align-items: center;
}

.project-detail-thumb-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-body);
  margin-bottom: 16px;
}

.project-detail-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-detail-group-tag {
  font-size: 12px;
  color: var(--accent-blue);
  font-weight: 600;
  margin: 4px 0 0;
}

.project-detail-description {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 10px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.project-play-btn {
  display: inline-flex;
  align-items: center;
}

/* "Delete My Save Data" button in the project detail modal - reuses the
   already theme-aware .delete-btn styling (red outline, fills to solid
   red on hover) defined in the Members Page section; this just tightens
   the spacing for its position under the description. */
.project-detail-delete-btn {
  margin-top: 6px;
  margin-bottom: 2px;
}

/* ── Project rating widget (1-10, shown under Delete My Save Data) ── */
.project-rating-section {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card-hover);
}

.project-rating-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.project-rating-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.project-rating-average {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.project-rating-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.project-rating-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.project-rating-btn:hover {
  border-color: var(--accent-purple);
  color: var(--accent-purple);
}

.project-rating-btn.active {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: #fff;
}

.project-rating-locked {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Fullscreen player ── */
.project-player-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #000;
  display: flex;
  flex-direction: column;
}

.project-player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #111827;
  border-bottom: 1px solid #2a3441;
  flex-shrink: 0;
}

.project-player-title {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.project-player-close-btn {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 6px;
  border-radius: 8px;
  transition: background 0.15s;
}

.project-player-close-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.project-player-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: #fff;
}

/* ── Light mode overrides ── */
html.theme-light .project-card,
html.theme-light .project-code-dropzone,
html.theme-light .project-code-textarea,
html.theme-light .project-allowlist-chip,
html.theme-light .project-allowlist-search-results {
  background: var(--bg-card);
  border-color: var(--border-color);
}

html.theme-light .project-code-dropzone,
html.theme-light .project-code-textarea {
  background: #fff0f5;
}

html.theme-light .project-size-estimate {
  background: var(--bg-card-hover);
  border-color: var(--border-color);
  color: var(--text-muted);
}

html.theme-light .project-size-estimate.warning {
  border-color: #b45309;
  color: #b45309;
}

html.theme-light .project-size-estimate.danger {
  border-color: var(--accent-danger);
  color: var(--accent-danger);
}

html.theme-light .project-card-thumb-wrap,
html.theme-light .project-detail-thumb-wrap {
  background: #fff0f5;
}

html.theme-light .project-card-title {
  color: var(--text-main);
}

html.theme-light .project-rating-section {
  background: var(--bg-card);
  border-color: var(--border-color);
}

html.theme-light .project-rating-btn {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-main);
}

html.theme-light .project-rating-btn.active {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: #fff;
}

html.theme-light .project-player-bar {
  background: var(--bg-card);
  border-bottom-color: var(--border-color);
}

html.theme-light .project-player-title {
  color: var(--text-main);
}

html.theme-light .project-player-close-btn {
  color: var(--text-main);
}

html.theme-light .project-player-close-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}
/* ── Light mode overrides ──
   .update-card, .badge-icon-tabs/.badge-icon-tab, .modal-box, and the CSS
   variables used above are already theme-aware from their own rules
   elsewhere in this file - only the FAB icon color needs no change since
   it's white on a colored gradient in both themes. .feedback-resolve-btn
   and .feedback-toggle-resolved-btn use the same CSS variables so no
   separate override is needed for them either. */

/* ==========================================================================
   25. PROJECT CENTER — PER-PROJECT DEVELOPER FEEDBACK
   Send Feedback (any member) / Show Feedback (owner + allowed editors).
   Reuses .feedback-view-list, .feedback-entry-card, .feedback-resolve-btn,
   .feedback-toolbar and .badge-icon-tabs from the site-wide feedback
   widget (section 23) so the two features look identical.
   ========================================================================== */

/* These modals open on top of the project detail modal (also z-index 2000,
   but later in the DOM so it stacks above). The bump makes that explicit
   and guarantees they sit above the detail modal on every layout. */
.project-feedback-overlay {
  z-index: 2100;
}

.project-feedback-box {
  max-width: 480px;
  width: 92%;
  max-height: 88vh;
  overflow-y: auto;
}

/* Type badge on each feedback card (Suggestion / Bug) */
.project-feedback-type-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 8px;
  vertical-align: middle;
}

.project-feedback-type-pill-idea {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent-blue);
  border: 1px solid var(--accent-blue);
}

.project-feedback-type-pill-bug {
  background: rgba(248, 81, 73, 0.12);
  color: var(--accent-danger);
  border: 1px solid var(--accent-danger);
}

/* Small count bubble on the Show Feedback button (unresolved items) */
.project-feedback-count-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--accent-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

/* ── Light mode overrides ── */
html.theme-light .project-feedback-box {
  background: var(--bg-card);
  border-color: var(--border-color);
}

html.theme-light .project-detail-actions {
  border-top-color: var(--border-color);
}

html.theme-light .project-feedback-type-pill-idea {
  background: rgba(2, 136, 209, 0.1);
  color: var(--accent-blue);
  border-color: var(--accent-blue);
}

html.theme-light .project-feedback-type-pill-bug {
  background: rgba(229, 57, 53, 0.1);
  color: var(--accent-danger);
  border-color: var(--accent-danger);
}

html.theme-light .project-feedback-count-bubble {
  background: var(--accent-danger);
  color: #fff;
}

/* ==========================================================================
   26. NAME STYLES (Store) - 100 styles
   Every style below only sets custom properties (--ns-*). The family rules
   turn them into an effect. Each style has a dark AND a light-theme version
   (light values are darkened so names stay readable on the pink/white theme).
   Applied automatically to any element carrying data-ns-uid / data-ns-style
   (see the Store module in the site JS).
   ========================================================================== */
.sn-ns { width: fit-content; max-width: 100%; }

/* ---- static families ---- */
html body .sn-ns.sn-nsf-solid { color: var(--ns-a); }
html body .sn-ns.sn-nsf-gradient { background-image: var(--ns-grad); -webkit-background-clip: text; background-clip: text; color: var(--ns-a); -webkit-text-fill-color: transparent; }
html body .sn-ns.sn-nsf-glow { color: var(--ns-a); text-shadow: 0 0 3px var(--ns-g), 0 0 9px var(--ns-g), 0 0 18px var(--ns-g2); }
html body .sn-ns.sn-nsf-outline { color: var(--ns-a); text-shadow: 1px 0 0 var(--ns-b), -1px 0 0 var(--ns-b), 0 1px 0 var(--ns-b), 0 -1px 0 var(--ns-b), 1px 1px 0 var(--ns-b), -1px -1px 0 var(--ns-b), 1px -1px 0 var(--ns-b), -1px 1px 0 var(--ns-b), 0 0 6px var(--ns-b); }
html body .sn-ns.sn-nsf-retro { color: var(--ns-a); text-shadow: 1px 1px 0 var(--ns-b), 2px 2px 0 var(--ns-b), 3px 3px 0 var(--ns-c); }

/* ---- animated families ---- */
html body .sn-ns.sn-nsf-shimmer { background-image: linear-gradient(110deg, var(--ns-a) 38%, var(--ns-b) 50%, var(--ns-a) 62%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: var(--ns-a); -webkit-text-fill-color: transparent; animation: sn-ns-shimmer 3.2s linear infinite; }
html body .sn-ns.sn-nsf-flow { background-image: var(--ns-grad); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: var(--ns-a); -webkit-text-fill-color: transparent; animation: sn-ns-flow var(--ns-t, 4s) linear infinite; }
html body .sn-ns.sn-nsf-pulse { color: var(--ns-a); animation: sn-ns-pulse 2.2s ease-in-out infinite; }
html body .sn-ns.sn-nsf-breathe { color: var(--ns-a); animation: sn-ns-breathe 3.6s ease-in-out infinite; }
html body .sn-ns.sn-nsf-flicker { color: var(--ns-a); animation: sn-ns-flicker var(--ns-t, 3.2s) linear infinite; }
html body .sn-ns.sn-nsf-glitch { color: var(--ns-a); animation: sn-ns-glitch 2.8s steps(1, end) infinite; }
html body .sn-ns.sn-nsf-fire { background-image: var(--ns-grad); background-size: 100% 300%; -webkit-background-clip: text; background-clip: text; color: var(--ns-a); -webkit-text-fill-color: transparent; animation: sn-ns-fire 2.4s linear infinite, sn-ns-fire-glow 1.2s ease-in-out infinite alternate; }
html body .sn-ns.sn-nsf-chroma { background-image: var(--ns-grad); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: var(--ns-a); -webkit-text-fill-color: transparent; animation: sn-ns-flow 5s linear infinite, sn-ns-hue 8s linear infinite; }
html body .sn-ns.sn-nsf-cycle { color: var(--ns-a); text-shadow: 0 0 var(--ns-gr, 8px) currentColor; animation: sn-ns-cycle 4.5s ease-in-out infinite; }
html body .sn-ns.sn-nsf-deco-after, html body .sn-ns.sn-nsf-deco-before { color: var(--ns-a); text-shadow: 0 0 8px var(--ns-g); }
html body .sn-ns.sn-nsf-deco-after::after, html body .sn-ns.sn-nsf-deco-before::before { content: var(--ns-sym); display: inline-block; font-size: 0.85em; color: var(--ns-b); -webkit-text-fill-color: var(--ns-b); text-shadow: 0 0 6px var(--ns-g); animation: sn-ns-twinkle 1.8s ease-in-out infinite; }
html body .sn-ns.sn-nsf-deco-after::after { margin-left: 0.25em; }
html body .sn-ns.sn-nsf-deco-before::before { margin-right: 0.25em; }

@keyframes sn-ns-flow { to { background-position: 150% 0; } }
@keyframes sn-ns-fire { to { background-position: 0 150%; } }
@keyframes sn-ns-shimmer { from { background-position: 150% 0; } to { background-position: 0% 0; } }
@keyframes sn-ns-hue { to { filter: hue-rotate(360deg); } }
@keyframes sn-ns-fire-glow { from { filter: drop-shadow(0 0 2px var(--ns-g)); } to { filter: drop-shadow(0 -2px 6px var(--ns-g)); } }
@keyframes sn-ns-pulse { 0%, 100% { text-shadow: 0 0 2px var(--ns-g), 0 0 6px var(--ns-g); } 50% { text-shadow: 0 0 5px var(--ns-g), 0 0 14px var(--ns-g), 0 0 28px var(--ns-g); } }
@keyframes sn-ns-breathe { 0%, 100% { opacity: 0.55; text-shadow: 0 0 2px var(--ns-g); } 50% { opacity: 1; text-shadow: 0 0 10px var(--ns-g); } }
@keyframes sn-ns-flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; text-shadow: 0 0 3px var(--ns-g), 0 0 9px var(--ns-g), 0 0 20px var(--ns-g); } 20%, 24%, 55% { opacity: 0.45; text-shadow: none; } }
@keyframes sn-ns-glitch { 0%, 34%, 68%, 92%, 100% { text-shadow: -1px 0 var(--ns-b), 1px 0 var(--ns-c); } 30%, 66%, 90% { text-shadow: -3px 0 var(--ns-b), 3px 0 var(--ns-c); } 32% { text-shadow: 3px 0 var(--ns-b), -3px 0 var(--ns-c); } }
@keyframes sn-ns-cycle { 0%, 100% { color: var(--ns-a); } 33% { color: var(--ns-b); } 66% { color: var(--ns-c); } }
@keyframes sn-ns-twinkle { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* Reduced motion: names keep their colours but stop moving. */
@media (prefers-reduced-motion: reduce) {
  html body .sn-ns, html body .sn-ns::before, html body .sn-ns::after { animation: none !important; }
}

/* ---- per-style values: dark theme (default) ---- */

.sn-ns-solid-crimson{--ns-a:#ef4444;}
.sn-ns-solid-tangerine{--ns-a:#fb923c;}
.sn-ns-solid-amber{--ns-a:#fbbf24;}
.sn-ns-solid-lime{--ns-a:#a3e635;}
.sn-ns-solid-emerald{--ns-a:#34d399;}
.sn-ns-solid-teal{--ns-a:#2dd4bf;}
.sn-ns-solid-sky{--ns-a:#38bdf8;}
.sn-ns-solid-cobalt{--ns-a:#60a5fa;}
.sn-ns-solid-indigo{--ns-a:#818cf8;}
.sn-ns-solid-violet{--ns-a:#a78bfa;}
.sn-ns-solid-orchid{--ns-a:#e879f9;}
.sn-ns-solid-rose{--ns-a:#fb7185;}
.sn-ns-solid-silver{--ns-a:#cbd5e1;}
.sn-ns-solid-gold{--ns-a:#facc15;}
.sn-ns-grad-sunset{--ns-a:#f97316;--ns-grad:linear-gradient(90deg,#f97316,#ec4899);}
.sn-ns-grad-ocean{--ns-a:#06b6d4;--ns-grad:linear-gradient(90deg,#06b6d4,#3b82f6);}
.sn-ns-grad-aurora{--ns-a:#34d399;--ns-grad:linear-gradient(90deg,#34d399,#818cf8);}
.sn-ns-grad-lavender{--ns-a:#c084fc;--ns-grad:linear-gradient(90deg,#c084fc,#f0abfc);}
.sn-ns-grad-peach{--ns-a:#fda4af;--ns-grad:linear-gradient(90deg,#fda4af,#fdba74);}
.sn-ns-grad-mint{--ns-a:#6ee7b7;--ns-grad:linear-gradient(90deg,#6ee7b7,#67e8f9);}
.sn-ns-grad-berry{--ns-a:#ec4899;--ns-grad:linear-gradient(90deg,#ec4899,#8b5cf6);}
.sn-ns-grad-swamp{--ns-a:#2dd4bf;--ns-grad:linear-gradient(90deg,#2dd4bf,#ca8a04);}
.sn-ns-grad-twilight{--ns-a:#6366f1;--ns-grad:linear-gradient(90deg,#6366f1,#ec4899,#f59e0b);}
.sn-ns-grad-citrus{--ns-a:#facc15;--ns-grad:linear-gradient(90deg,#facc15,#84cc16);}
.sn-ns-grad-bloodmoon{--ns-a:#f87171;--ns-grad:linear-gradient(90deg,#f87171,#a855f7);}
.sn-ns-grad-cotton{--ns-a:#f9a8d4;--ns-grad:linear-gradient(90deg,#f9a8d4,#93c5fd);}
.sn-ns-glow-pink{--ns-a:#ff4fd8;--ns-g:rgba(255,79,216,0.85);--ns-g2:rgba(255,79,216,0.5);}
.sn-ns-glow-blue{--ns-a:#4f8bff;--ns-g:rgba(79,139,255,0.85);--ns-g2:rgba(79,139,255,0.5);}
.sn-ns-glow-green{--ns-a:#39ff88;--ns-g:rgba(57,255,136,0.85);--ns-g2:rgba(57,255,136,0.5);}
.sn-ns-glow-purple{--ns-a:#b26bff;--ns-g:rgba(178,107,255,0.85);--ns-g2:rgba(178,107,255,0.5);}
.sn-ns-glow-orange{--ns-a:#ff9a3c;--ns-g:rgba(255,154,60,0.85);--ns-g2:rgba(255,154,60,0.5);}
.sn-ns-glow-cyan{--ns-a:#35f0ff;--ns-g:rgba(53,240,255,0.85);--ns-g2:rgba(53,240,255,0.5);}
.sn-ns-glow-red{--ns-a:#ff4d5e;--ns-g:rgba(255,77,94,0.85);--ns-g2:rgba(255,77,94,0.5);}
.sn-ns-glow-yellow{--ns-a:#fff04d;--ns-g:rgba(255,240,77,0.85);--ns-g2:rgba(255,240,77,0.5);}
.sn-ns-glow-ghost{--ns-a:#e2e8f0;--ns-g:rgba(226,232,240,0.85);--ns-g2:rgba(226,232,240,0.5);}
.sn-ns-glow-toxic{--ns-a:#b6ff3c;--ns-g:rgba(182,255,60,0.85);--ns-g2:rgba(182,255,60,0.5);}
.sn-ns-outline-cherry{--ns-a:#ffffff;--ns-b:#e11d48;}
.sn-ns-outline-midnight{--ns-a:#e0e7ff;--ns-b:#1e3a8a;}
.sn-ns-outline-grape{--ns-a:#ffffff;--ns-b:#7c3aed;}
.sn-ns-outline-lime{--ns-a:#ffffff;--ns-b:#16a34a;}
.sn-ns-outline-tangerine{--ns-a:#ffffff;--ns-b:#ea580c;}
.sn-ns-outline-bubblegum{--ns-a:#ffffff;--ns-b:#ec4899;}
.sn-ns-outline-ink{--ns-a:#ffffff;--ns-b:#0f172a;}
.sn-ns-outline-goldtrim{--ns-a:#fff7d6;--ns-b:#b45309;}
.sn-ns-retro-red{--ns-a:#f87171;--ns-b:#dc2626;--ns-c:#7f1d1d;}
.sn-ns-retro-blue{--ns-a:#60a5fa;--ns-b:#2563eb;--ns-c:#1e3a8a;}
.sn-ns-retro-green{--ns-a:#4ade80;--ns-b:#16a34a;--ns-c:#14532d;}
.sn-ns-retro-purple{--ns-a:#c084fc;--ns-b:#7c3aed;--ns-c:#4c1d95;}
.sn-ns-retro-gold{--ns-a:#fde047;--ns-b:#d97706;--ns-c:#78350f;}
.sn-ns-retro-pink{--ns-a:#f9a8d4;--ns-b:#db2777;--ns-c:#831843;}
.sn-ns-shimmer-silver{--ns-a:#cbd5e1;--ns-b:#ffffff;}
.sn-ns-shimmer-gold{--ns-a:#facc15;--ns-b:#fff7c2;}
.sn-ns-shimmer-rose{--ns-a:#fb7185;--ns-b:#ffe4e6;}
.sn-ns-shimmer-azure{--ns-a:#38bdf8;--ns-b:#e0f2fe;}
.sn-ns-shimmer-emerald{--ns-a:#34d399;--ns-b:#d1fae5;}
.sn-ns-shimmer-amethyst{--ns-a:#a78bfa;--ns-b:#ede9fe;}
.sn-ns-shimmer-ember{--ns-a:#fb923c;--ns-b:#fef3c7;}
.sn-ns-shimmer-frost{--ns-a:#67e8f9;--ns-b:#ffffff;}
.sn-ns-flow-rainbow{--ns-a:#ef4444;--ns-grad:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e,#3b82f6,#a855f7,#ef4444);--ns-t:5s;}
.sn-ns-flow-sunset{--ns-a:#f97316;--ns-grad:linear-gradient(90deg,#f97316,#ec4899,#f59e0b,#f97316);--ns-t:4s;}
.sn-ns-flow-ocean{--ns-a:#06b6d4;--ns-grad:linear-gradient(90deg,#06b6d4,#3b82f6,#6366f1,#06b6d4);--ns-t:4.5s;}
.sn-ns-flow-aurora{--ns-a:#34d399;--ns-grad:linear-gradient(90deg,#34d399,#22d3ee,#a78bfa,#34d399);--ns-t:5s;}
.sn-ns-flow-lava{--ns-a:#ef4444;--ns-grad:linear-gradient(90deg,#ef4444,#f97316,#facc15,#ef4444);--ns-t:3.6s;}
.sn-ns-flow-candy{--ns-a:#f472b6;--ns-grad:linear-gradient(90deg,#f472b6,#a78bfa,#60a5fa,#f472b6);--ns-t:4s;}
.sn-ns-flow-galaxy{--ns-a:#6366f1;--ns-grad:linear-gradient(90deg,#6366f1,#a855f7,#ec4899,#38bdf8,#6366f1);--ns-t:6s;}
.sn-ns-flow-toxic{--ns-a:#a3e635;--ns-grad:linear-gradient(90deg,#a3e635,#22c55e,#14b8a6,#a3e635);--ns-t:4s;}
.sn-ns-pulse-red{--ns-a:#ef4444;--ns-g:rgba(239,68,68,0.9);}
.sn-ns-pulse-blue{--ns-a:#3b82f6;--ns-g:rgba(59,130,246,0.9);}
.sn-ns-pulse-green{--ns-a:#22c55e;--ns-g:rgba(34,197,94,0.9);}
.sn-ns-pulse-purple{--ns-a:#a855f7;--ns-g:rgba(168,85,247,0.9);}
.sn-ns-pulse-gold{--ns-a:#facc15;--ns-g:rgba(250,204,21,0.9);}
.sn-ns-pulse-pink{--ns-a:#ec4899;--ns-g:rgba(236,72,153,0.9);}
.sn-ns-breathe-mint{--ns-a:#6ee7b7;--ns-g:rgba(110,231,183,0.9);}
.sn-ns-breathe-rose{--ns-a:#fda4af;--ns-g:rgba(253,164,175,0.9);}
.sn-ns-breathe-sky{--ns-a:#7dd3fc;--ns-g:rgba(125,211,252,0.9);}
.sn-ns-flicker-pink{--ns-a:#ff4fd8;--ns-g:rgba(255,79,216,0.9);--ns-t:3.2s;}
.sn-ns-flicker-cyan{--ns-a:#35f0ff;--ns-g:rgba(53,240,255,0.9);--ns-t:2.6s;}
.sn-ns-flicker-lime{--ns-a:#b6ff3c;--ns-g:rgba(182,255,60,0.9);--ns-t:3.8s;}
.sn-ns-flicker-orange{--ns-a:#ff9a3c;--ns-g:rgba(255,154,60,0.9);--ns-t:3s;}
.sn-ns-glitch-cyber{--ns-a:#ffffff;--ns-b:#22d3ee;--ns-c:#f43f5e;}
.sn-ns-glitch-toxic{--ns-a:#a3e635;--ns-b:#f43f5e;--ns-c:#3b82f6;}
.sn-ns-glitch-vapor{--ns-a:#c084fc;--ns-b:#22d3ee;--ns-c:#fbbf24;}
.sn-ns-glitch-arcade{--ns-a:#fb7185;--ns-b:#38bdf8;--ns-c:#facc15;}
.sn-ns-fire-inferno{--ns-a:#f97316;--ns-g:rgba(249,115,22,0.8);--ns-grad:linear-gradient(180deg,#facc15,#f97316,#dc2626,#facc15);}
.sn-ns-fire-blue{--ns-a:#38bdf8;--ns-g:rgba(56,189,248,0.8);--ns-grad:linear-gradient(180deg,#e0f2fe,#38bdf8,#1d4ed8,#e0f2fe);}
.sn-ns-fire-emerald{--ns-a:#22c55e;--ns-g:rgba(34,197,94,0.8);--ns-grad:linear-gradient(180deg,#d9f99d,#22c55e,#166534,#d9f99d);}
.sn-ns-chroma-prism{--ns-a:#f43f5e;--ns-grad:linear-gradient(90deg,#f43f5e,#f59e0b,#22c55e,#3b82f6,#a855f7,#f43f5e);}
.sn-ns-chroma-holo{--ns-a:#67e8f9;--ns-grad:linear-gradient(90deg,#67e8f9,#f0abfc,#fde68a,#86efac,#67e8f9);}
.sn-ns-cycle-chameleon{--ns-a:#22c55e;--ns-b:#3b82f6;--ns-c:#a855f7;--ns-gr:8px;}
.sn-ns-cycle-traffic{--ns-a:#ef4444;--ns-b:#facc15;--ns-c:#22c55e;--ns-gr:8px;}
.sn-ns-cycle-northern{--ns-a:#34d399;--ns-b:#22d3ee;--ns-c:#a78bfa;--ns-gr:8px;}
.sn-ns-deco-stardust{--ns-a:#fde68a;--ns-b:#facc15;--ns-g:rgba(250,204,21,0.7);--ns-sym:"\2726";}
.sn-ns-deco-heartbeat{--ns-a:#fda4af;--ns-b:#f43f5e;--ns-g:rgba(244,63,94,0.7);--ns-sym:"\2665";}
.sn-ns-deco-frostbite{--ns-a:#bae6fd;--ns-b:#38bdf8;--ns-g:rgba(56,189,248,0.7);--ns-sym:"\2744";}
.sn-ns-deco-moonlit{--ns-a:#e0e7ff;--ns-b:#a5b4fc;--ns-g:rgba(165,180,252,0.7);--ns-sym:"\263E";}
.sn-ns-deco-supernova{--ns-a:#fef08a;--ns-b:#f59e0b;--ns-g:rgba(245,158,11,0.7);--ns-sym:"\273A";}
.sn-ns-deco-bloom{--ns-a:#fbcfe8;--ns-b:#ec4899;--ns-g:rgba(236,72,153,0.7);--ns-sym:"\273F";}
.sn-ns-deco-royal{--ns-a:#fde68a;--ns-b:#f59e0b;--ns-g:rgba(245,158,11,0.7);--ns-sym:"\265B";}
.sn-ns-deco-gothic{--ns-a:#e2e8f0;--ns-b:#a78bfa;--ns-g:rgba(167,139,250,0.7);--ns-sym:"\2720";}
.sn-ns-deco-sparkler{--ns-a:#c4b5fd;--ns-b:#f0abfc;--ns-g:rgba(240,171,252,0.7);--ns-sym:"\2727";}

/* ---- per-style values: light theme (darkened for readability) ---- */
html.theme-light .sn-ns-solid-crimson{--ns-a:#bc1010;}
html.theme-light .sn-ns-solid-tangerine{--ns-a:#c85c04;}
html.theme-light .sn-ns-solid-amber{--ns-a:#c89104;}
html.theme-light .sn-ns-solid-lime{--ns-a:#79b616;}
html.theme-light .sn-ns-solid-emerald{--ns-a:#24a878;}
html.theme-light .sn-ns-solid-teal{--ns-a:#23a998;}
html.theme-light .sn-ns-solid-sky{--ns-a:#078bc5;}
html.theme-light .sn-ns-solid-cobalt{--ns-a:#065cc6;}
html.theme-light .sn-ns-solid-indigo{--ns-a:#0b1cc1;}
html.theme-light .sn-ns-solid-violet{--ns-a:#3808c4;}
html.theme-light .sn-ns-solid-orchid{--ns-a:#aa09c3;}
html.theme-light .sn-ns-solid-rose{--ns-a:#c60622;}
html.theme-light .sn-ns-solid-silver{--ns-a:#4b6481;}
html.theme-light .sn-ns-solid-gold{--ns-a:#c8a004;}
html.theme-light .sn-ns-grad-sunset{--ns-a:#db5d06;--ns-grad:linear-gradient(90deg,#db5d06,#cb156f);}
html.theme-light .sn-ns-grad-ocean{--ns-a:#06b6d4;--ns-grad:linear-gradient(90deg,#06b6d4,#0a58d7);}
html.theme-light .sn-ns-grad-aurora{--ns-a:#28b884;--ns-grad:linear-gradient(90deg,#28b884,#0c1ed5);}
html.theme-light .sn-ns-grad-lavender{--ns-a:#7005db;--ns-grad:linear-gradient(90deg,#7005db,#ba08d9);}
html.theme-light .sn-ns-grad-peach{--ns-a:#dc051f;--ns-grad:linear-gradient(90deg,#dc051f,#dd7303);}
html.theme-light .sn-ns-grad-mint{--ns-a:#20c181;--ns-grad:linear-gradient(90deg,#20c181,#09c0d8);}
html.theme-light .sn-ns-grad-berry{--ns-a:#cb156f;--ns-grad:linear-gradient(90deg,#cb156f,#490cd5);}
html.theme-light .sn-ns-grad-swamp{--ns-a:#26baa8;--ns-grad:linear-gradient(90deg,#26baa8,#ca8a04);}
html.theme-light .sn-ns-grad-twilight{--ns-a:#1216ce;--ns-grad:linear-gradient(90deg,#1216ce,#cb156f,#d88b09);}
html.theme-light .sn-ns-grad-citrus{--ns-a:#dcb105;--ns-grad:linear-gradient(90deg,#dcb105,#83cb16);}
html.theme-light .sn-ns-grad-bloodmoon{--ns-a:#d60b0b;--ns-grad:linear-gradient(90deg,#d60b0b,#730ad6);}
html.theme-light .sn-ns-grad-cotton{--ns-a:#d20e79;--ns-grad:linear-gradient(90deg,#d20e79,#046adc);}
html.theme-light .sn-ns-glow-pink{--ns-a:#cc009f;--ns-g:rgba(204,0,159,0.35);--ns-g2:rgba(204,0,159,0.18);}
html.theme-light .sn-ns-glow-blue{--ns-a:#0046cc;--ns-g:rgba(0,70,204,0.35);--ns-g2:rgba(0,70,204,0.18);}
html.theme-light .sn-ns-glow-green{--ns-a:#00cc51;--ns-g:rgba(0,204,81,0.35);--ns-g2:rgba(0,204,81,0.18);}
html.theme-light .sn-ns-glow-purple{--ns-a:#6200cc;--ns-g:rgba(98,0,204,0.35);--ns-g2:rgba(98,0,204,0.18);}
html.theme-light .sn-ns-glow-orange{--ns-a:#cc6200;--ns-g:rgba(204,98,0,0.35);--ns-g2:rgba(204,98,0,0.18);}
html.theme-light .sn-ns-glow-cyan{--ns-a:#00bdcc;--ns-g:rgba(0,189,204,0.35);--ns-g2:rgba(0,189,204,0.18);}
html.theme-light .sn-ns-glow-red{--ns-a:#cc0013;--ns-g:rgba(204,0,19,0.35);--ns-g2:rgba(204,0,19,0.18);}
html.theme-light .sn-ns-glow-yellow{--ns-a:#ccbb00;--ns-g:rgba(204,187,0,0.35);--ns-g2:rgba(204,187,0,0.18);}
html.theme-light .sn-ns-glow-ghost{--ns-a:#466186;--ns-g:rgba(70,97,134,0.35);--ns-g2:rgba(70,97,134,0.18);}
html.theme-light .sn-ns-glow-toxic{--ns-a:#80cc00;--ns-g:rgba(128,204,0,0.35);--ns-g2:rgba(128,204,0,0.18);}
html.theme-light .sn-ns-outline-cherry{--ns-a:#ffffff;--ns-b:#ac1637;}
html.theme-light .sn-ns-outline-midnight{--ns-a:#e0e7ff;--ns-b:#1e3a8a;}
html.theme-light .sn-ns-outline-grape{--ns-a:#ffffff;--ns-b:#4c10b2;}
html.theme-light .sn-ns-outline-lime{--ns-a:#ffffff;--ns-b:#16a34a;}
html.theme-light .sn-ns-outline-tangerine{--ns-a:#ffffff;--ns-b:#b84509;}
html.theme-light .sn-ns-outline-bubblegum{--ns-a:#ffffff;--ns-b:#b01260;}
html.theme-light .sn-ns-outline-ink{--ns-a:#ffffff;--ns-b:#0f172a;}
html.theme-light .sn-ns-outline-goldtrim{--ns-a:#fff7d6;--ns-b:#b45309;}
html.theme-light .sn-ns-retro-red{--ns-a:#e90c0c;--ns-b:#951818;--ns-c:#531313;}
html.theme-light .sn-ns-retro-blue{--ns-a:#076eed;--ns-b:#0f3c9f;--ns-c:#122354;}
html.theme-light .sn-ns-retro-green{--ns-a:#26cf64;--ns-b:#159945;--ns-c:#14522d;}
html.theme-light .sn-ns-retro-purple{--ns-a:#7a06ef;--ns-b:#440f9f;--ns-c:#2c1155;}
html.theme-light .sn-ns-retro-gold{--ns-a:#f2cc03;--ns-b:#a95d05;--ns-c:#5b280b;}
html.theme-light .sn-ns-retro-pink{--ns-a:#e51084;--ns-b:#951950;--ns-c:#56102c;}
html.theme-light .sn-ns-shimmer-silver{--ns-a:#475f7b;--ns-b:#9eb1c7;}
html.theme-light .sn-ns-shimmer-gold{--ns-a:#be9804;--ns-b:#fcde69;}
html.theme-light .sn-ns-shimmer-rose{--ns-a:#bc0520;--ns-b:#fb6a7f;}
html.theme-light .sn-ns-shimmer-azure{--ns-a:#0784bb;--ns-b:#6bcefa;}
html.theme-light .sn-ns-shimmer-emerald{--ns-a:#239f72;--ns-b:#81e4c0;}
html.theme-light .sn-ns-shimmer-amethyst{--ns-a:#3508ba;--ns-b:#906cf9;}
html.theme-light .sn-ns-shimmer-ember{--ns-a:#be5804;--ns-b:#fcab69;}
html.theme-light .sn-ns-shimmer-frost{--ns-a:#07a6ba;--ns-b:#6ce9f9;}
html.theme-light .sn-ns-flow-rainbow{--ns-a:#cf1212;--ns-grad:linear-gradient(90deg,#cf1212,#d88b09,#21bf5b,#0a58d7,#730ad6,#cf1212);--ns-t:5s;}
html.theme-light .sn-ns-flow-sunset{--ns-a:#db5d06;--ns-grad:linear-gradient(90deg,#db5d06,#cb156f,#d88b09,#db5d06);--ns-t:4s;}
html.theme-light .sn-ns-flow-ocean{--ns-a:#06b6d4;--ns-grad:linear-gradient(90deg,#06b6d4,#0a58d7,#1216ce,#06b6d4);--ns-t:4.5s;}
html.theme-light .sn-ns-flow-aurora{--ns-a:#28b884;--ns-grad:linear-gradient(90deg,#28b884,#10b7d0,#3d09d7,#28b884);--ns-t:5s;}
html.theme-light .sn-ns-flow-lava{--ns-a:#cf1212;--ns-grad:linear-gradient(90deg,#cf1212,#db5d06,#dcb105,#cf1212);--ns-t:3.6s;}
html.theme-light .sn-ns-flow-candy{--ns-a:#d01075;--ns-grad:linear-gradient(90deg,#d01075,#3d09d7,#0765da,#d01075);--ns-t:4s;}
html.theme-light .sn-ns-flow-galaxy{--ns-a:#1216ce;--ns-grad:linear-gradient(90deg,#1216ce,#730ad6,#cb156f,#0899d9,#1216ce);--ns-t:6s;}
html.theme-light .sn-ns-flow-toxic{--ns-a:#85c819;--ns-grad:linear-gradient(90deg,#85c819,#21bf5b,#14b8a6,#85c819);--ns-t:4s;}
html.theme-light .sn-ns-pulse-red{--ns-a:#c51111;--ns-g:rgba(197,17,17,0.4);}
html.theme-light .sn-ns-pulse-blue{--ns-a:#0954cd;--ns-g:rgba(9,84,205,0.4);}
html.theme-light .sn-ns-pulse-green{--ns-a:#20b757;--ns-g:rgba(32,183,87,0.4);}
html.theme-light .sn-ns-pulse-purple{--ns-a:#6e0acd;--ns-g:rgba(110,10,205,0.4);}
html.theme-light .sn-ns-pulse-gold{--ns-a:#d2a804;--ns-g:rgba(210,168,4,0.4);}
html.theme-light .sn-ns-pulse-pink{--ns-a:#c2146a;--ns-g:rgba(194,20,106,0.4);}
html.theme-light .sn-ns-breathe-mint{--ns-a:#1eb87b;--ns-g:rgba(30,184,123,0.4);}
html.theme-light .sn-ns-breathe-rose{--ns-a:#d2051e;--ns-g:rgba(210,5,30,0.4);}
html.theme-light .sn-ns-breathe-sky{--ns-a:#058fd1;--ns-g:rgba(5,143,209,0.4);}
html.theme-light .sn-ns-flicker-pink{--ns-a:#d600a7;--ns-g:rgba(214,0,167,0.4);--ns-t:3.2s;}
html.theme-light .sn-ns-flicker-cyan{--ns-a:#00c6d6;--ns-g:rgba(0,198,214,0.4);--ns-t:2.6s;}
html.theme-light .sn-ns-flicker-lime{--ns-a:#86d600;--ns-g:rgba(134,214,0,0.4);--ns-t:3.8s;}
html.theme-light .sn-ns-flicker-orange{--ns-a:#d66700;--ns-g:rgba(214,103,0,0.4);--ns-t:3s;}
html.theme-light .sn-ns-glitch-cyber{--ns-a:#4c4c4c;--ns-b:#10bbd5;--ns-c:#f10e35;}
html.theme-light .sn-ns-glitch-toxic{--ns-a:#5b8811;--ns-b:#d90c2f;--ns-c:#0b64f4;}
html.theme-light .sn-ns-glitch-vapor{--ns-a:#4c0495;--ns-b:#10bbd5;--ns-c:#fab605;}
html.theme-light .sn-ns-glitch-arcade{--ns-a:#950419;--ns-b:#089cde;--ns-c:#fac905;}
html.theme-light .sn-ns-fire-inferno{--ns-a:#db5d06;--ns-g:rgba(219,93,6,0.35);--ns-grad:linear-gradient(180deg,#dcb105,#db5d06,#c11f1f,#dcb105);}
html.theme-light .sn-ns-fire-blue{--ns-a:#0899d9;--ns-g:rgba(8,153,217,0.35);--ns-grad:linear-gradient(180deg,#0785d9,#0899d9,#1b47c6,#0785d9);}
html.theme-light .sn-ns-fire-emerald{--ns-a:#21bf5b;--ns-g:rgba(33,191,91,0.35);--ns-grad:linear-gradient(180deg,#8ed30d,#21bf5b,#166534,#8ed30d);}
html.theme-light .sn-ns-chroma-prism{--ns-a:#d40c2e;--ns-grad:linear-gradient(90deg,#d40c2e,#d88b09,#21bf5b,#0a58d7,#730ad6,#d40c2e);}
html.theme-light .sn-ns-chroma-holo{--ns-a:#09c0d8;--ns-grad:linear-gradient(90deg,#09c0d8,#ba08d9,#ddb104,#1ac658,#09c0d8);}
html.theme-light .sn-ns-cycle-chameleon{--ns-a:#20b757;--ns-b:#0954cd;--ns-c:#6e0acd;--ns-gr:2px;}
html.theme-light .sn-ns-cycle-traffic{--ns-a:#c51111;--ns-b:#d2a804;--ns-c:#20b757;--ns-gr:2px;}
html.theme-light .sn-ns-cycle-northern{--ns-a:#26b07e;--ns-b:#0fafc7;--ns-c:#3a09cd;--ns-gr:2px;}
html.theme-light .sn-ns-deco-stardust{--ns-a:#c9a103;--ns-b:#e1b505;--ns-g:rgba(225,181,5,0.3);--ns-sym:"\2726";}
html.theme-light .sn-ns-deco-heartbeat{--ns-a:#c8041d;--ns-b:#d90c2f;--ns-g:rgba(217,12,47,0.3);--ns-sym:"\2665";}
html.theme-light .sn-ns-deco-frostbite{--ns-a:#0684c6;--ns-b:#089cde;--ns-g:rgba(8,156,222,0.3);--ns-sym:"\2744";}
html.theme-light .sn-ns-deco-moonlit{--ns-a:#002ecc;--ns-b:#072cde;--ns-g:rgba(7,44,222,0.3);--ns-sym:"\263E";}
html.theme-light .sn-ns-deco-supernova{--ns-a:#cab202;--ns-b:#dc8e09;--ns-g:rgba(220,142,9,0.3);--ns-sym:"\273A";}
html.theme-light .sn-ns-deco-bloom{--ns-a:#bc1072;--ns-b:#d01672;--ns-g:rgba(208,22,114,0.3);--ns-sym:"\273F";}
html.theme-light .sn-ns-deco-royal{--ns-a:#c9a103;--ns-b:#dc8e09;--ns-g:rgba(220,142,9,0.3);--ns-sym:"\265B";}
html.theme-light .sn-ns-deco-gothic{--ns-a:#466186;--ns-b:#3f09dc;--ns-g:rgba(63,9,220,0.3);--ns-sym:"\2720";}
html.theme-light .sn-ns-deco-sparkler{--ns-a:#2e05c7;--ns-b:#be08de;--ns-g:rgba(190,8,222,0.3);--ns-sym:"\2727";}

/* ==========================================================================
   27. SHARECOINS (SC) — nav balance pill, earn toasts, and the Store page
   Dark values are the defaults; every surface has an html.theme-light version.
   ========================================================================== */

/* ── Nav balance pill ── */
.sc-balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.45);
  color: #facc15;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  transition: background 0.2s;
}
.sc-balance-pill:hover { background: rgba(250, 204, 21, 0.22); }
.sc-balance-pill .material-symbols-outlined { font-size: 18px; }
.sc-balance-unit { font-size: 11px; opacity: 0.8; }
.sc-balance-pill.sc-bump { animation: sc-bump 0.5s ease; }
@keyframes sc-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* ── "+N SC" toasts ── */
.sc-toast-stack {
  position: fixed;
  top: 76px;
  right: 24px;
  z-index: 2500;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
.sc-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid rgba(250, 204, 21, 0.5);
  color: var(--text-main);
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  animation: sc-toast-in 0.28s ease backwards;
  transition: opacity 0.3s, transform 0.3s;
}
.sc-toast .material-symbols-outlined { font-size: 18px; color: #facc15; }
.sc-toast-amount { font-weight: 800; color: #facc15; }
.sc-toast-label { color: var(--text-muted); }
.sc-toast-label-strong { color: var(--text-main); font-weight: 600; }
.sc-toast-out { opacity: 0; transform: translateY(-6px); }
@keyframes sc-toast-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 680px) {
  .sc-toast-stack { right: 12px; top: 68px; }
}

/* ── Store page: header + balance ── */
.store-container { align-items: start; }
.store-header-card { padding: 22px 24px; }
.store-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.store-header-card p { margin-bottom: 0; }
.store-balance-card {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(250, 204, 21, 0.1);
  border: 1px solid rgba(250, 204, 21, 0.4);
}
.store-balance-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
}
.store-balance-amount {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 28px;
  font-weight: 800;
  color: #facc15;
}
.store-balance-amount .material-symbols-outlined { font-size: 26px; }
.store-balance-unit { font-size: 14px; opacity: 0.8; }

.store-login-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px dashed var(--accent-blue);
  background: rgba(59, 130, 246, 0.06);
  color: var(--text-muted);
  font-size: 14px;
}

.store-btn { padding: 8px 16px; font-size: 13px; white-space: nowrap; }
.store-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.store-btn .material-symbols-outlined { font-size: 16px; vertical-align: middle; margin-right: 3px; }
.store-btn-equipped { color: var(--accent-success); border-color: var(--accent-success); }

/* ── Section heading + equipped card ── */
.store-section-head h2 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.store-section-head .subtitle { margin-bottom: 16px; font-size: 14px; }

.store-equipped-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}
.store-equipped-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.store-equipped-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.store-equipped-name { font-size: 24px; font-weight: 800; line-height: 1.2; }

/* ── Search / filter toolbar ── */
.store-toolbar {
  display: grid;
  grid-template-columns: 1fr 190px 190px;
  gap: 10px;
  margin-top: 16px;
}
@media (max-width: 680px) {
  .store-toolbar { grid-template-columns: 1fr; }
}
.store-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.store-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.store-chip {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.store-chip:hover { border-color: var(--accent-purple); }
.store-chip.active {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: var(--bg-body);
}
.store-result-count { font-size: 13px; color: var(--text-muted); }

/* ── Style cards ── */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}
.store-empty { grid-column: 1 / -1; }
.store-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.store-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-purple);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}
.store-card-equipped {
  border-color: var(--accent-success);
  box-shadow: 0 0 0 1px var(--accent-success);
}
.store-card-preview,
.store-confirm-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, #16203a 0%, #0b1220 75%);
  border-bottom: 1px solid var(--border-color);
  overflow: hidden;
  padding: 0 12px;
}
.store-card-preview { height: 88px; }
.store-card-name,
.store-equipped-name,
.store-confirm-preview-name {
  font-weight: 800;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.store-card-name { font-size: 22px; }
.store-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.store-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.store-card-title { font-size: 14px; font-weight: 700; color: var(--text-main); }
.store-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  white-space: nowrap;
}
.store-tag .material-symbols-outlined { font-size: 12px; }
.store-tag-animated { color: var(--accent-purple); border-color: var(--accent-purple); }
.store-card-cat { font-size: 12px; color: var(--text-muted); }
.store-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.store-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 800;
  color: #facc15;
}
.store-price .material-symbols-outlined { font-size: 16px; }
.store-card-action .store-btn { padding: 7px 14px; }

/* ── Earn ShareCoins sidebar widget ── */
.store-earn-widget h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.store-earn-intro { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin-bottom: 14px; }
.store-earn-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.store-earn-summary > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
}
.store-earn-summary-label { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.store-earn-summary-value { font-size: 16px; font-weight: 800; color: #facc15; }
.store-earn-list { display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow-y: auto; padding-right: 2px; }
.store-earn-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
}
.store-earn-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.store-earn-label { font-size: 13px; font-weight: 600; color: var(--text-main); }
.store-earn-reward { font-size: 12px; font-weight: 800; color: #facc15; white-space: nowrap; }
.store-earn-bar { height: 6px; border-radius: 999px; background: var(--border-color); overflow: hidden; }
.store-earn-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-blue));
  transition: width 0.3s ease;
}
.store-earn-progress { font-size: 11px; color: var(--text-muted); }
.store-earn-row-done { opacity: 0.7; }
.store-earn-row-done .store-earn-bar-fill { background: var(--accent-success); }
.store-earn-foot { font-size: 11px; color: var(--text-muted); margin-top: 12px; }

/* ── Buy confirmation modal ── */
.store-confirm-box { max-width: 420px; }
.store-confirm-preview {
  height: 100px;
  margin-bottom: 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}
.store-confirm-preview-name { font-size: 30px; }
.store-confirm-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.store-confirm-meta { font-size: 12px; color: var(--text-muted); }
.store-confirm-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.store-confirm-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  font-size: 14px;
  color: var(--text-muted);
}
.store-confirm-row strong { color: #facc15; }
.store-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* ── Light theme (ShareNet Pink & Sky Blue) ── */
html.theme-light .sc-balance-pill {
  background: rgba(180, 83, 9, 0.1);
  border-color: rgba(180, 83, 9, 0.5);
  color: #b45309;
}
html.theme-light .sc-balance-pill:hover { background: rgba(180, 83, 9, 0.18); }
html.theme-light .sc-toast {
  background: var(--bg-card);
  border-color: rgba(180, 83, 9, 0.5);
  box-shadow: 0 8px 24px rgba(233, 30, 140, 0.18);
}
html.theme-light .sc-toast .material-symbols-outlined,
html.theme-light .sc-toast-amount { color: #b45309; }
html.theme-light .store-balance-card {
  background: rgba(180, 83, 9, 0.08);
  border-color: rgba(180, 83, 9, 0.4);
}
html.theme-light .store-balance-amount,
html.theme-light .store-price,
html.theme-light .store-earn-reward,
html.theme-light .store-earn-summary-value,
html.theme-light .store-confirm-row strong { color: #b45309; }
html.theme-light .store-login-notice {
  background: rgba(2, 136, 209, 0.06);
  border-color: var(--accent-blue);
}
html.theme-light .store-equipped-card,
html.theme-light .store-card,
html.theme-light .store-chip {
  background: var(--bg-card);
  border-color: var(--border-color);
}
html.theme-light .store-card:hover {
  border-color: var(--accent-purple);
  box-shadow: 0 10px 24px rgba(233, 30, 140, 0.15);
}
html.theme-light .store-card-equipped {
  border-color: var(--accent-success);
  box-shadow: 0 0 0 1px var(--accent-success);
}
html.theme-light .store-card-preview,
html.theme-light .store-confirm-preview {
  background: radial-gradient(circle at 50% 40%, #ffffff 0%, #fff0f5 75%);
  border-color: var(--border-color);
}
html.theme-light .store-chip.active {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: #fff;
}
html.theme-light .store-tag { border-color: var(--border-color); color: var(--text-muted); }
html.theme-light .store-tag-animated { color: var(--accent-purple); border-color: var(--accent-purple); }
html.theme-light .store-earn-summary > div,
html.theme-light .store-earn-row,
html.theme-light .store-confirm-row {
  background: #fff0f5;
  border-color: var(--border-color);
}
html.theme-light .store-earn-bar { background: #f8bbd0; }
html.theme-light .store-earn-bar-fill {
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-blue));
}
html.theme-light .store-earn-row-done .store-earn-bar-fill { background: var(--accent-success); }
html.theme-light .store-btn-equipped { color: var(--accent-success); border-color: var(--accent-success); }

/* ==========================================================================
   28. VOICE CALLS (Messenger) — header call button, active call bar,
   incoming call card and call toast.
   The bar, card and toast are fixed to the viewport (not part of the
   Messenger page) so a ringing call is visible on any page of the site.
   Dark values are the defaults; every surface has an html.theme-light version.
   ========================================================================== */

/* ── Call button in the DM chat header ── */
.chat-call-btn {
  margin-left: auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-color);
  color: var(--accent-success);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.chat-call-btn .material-symbols-outlined { font-size: 20px; }
.chat-call-btn:hover {
  background: var(--accent-success);
  border-color: var(--accent-success);
  color: #fff;
  transform: scale(1.06);
}

/* ── Shared avatar used by the call bar + incoming card ── */
.call-avatar {
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.call-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.call-bar-avatar { width: 38px; height: 38px; font-size: 15px; }
.incoming-call-avatar { width: 52px; height: 52px; font-size: 20px; }

/* ── Round action buttons (mute / hang up / answer) ── */
.call-round-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: transform 0.15s, background 0.15s, opacity 0.15s;
}
.call-round-btn .material-symbols-outlined { font-size: 20px; }
.call-round-btn:hover { transform: scale(1.08); }
.call-accept-btn { background: var(--accent-success); }
.call-hangup-btn { background: var(--accent-danger); }
.call-accept-btn:hover { background: #3fb950; }
.call-hangup-btn:hover { background: #da3633; }

.call-mute-btn {
  background: var(--bg-card-hover);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}
.call-mute-btn:hover { background: var(--bg-body); border-color: var(--accent-purple); }
.call-mute-btn.is-muted {
  background: var(--accent-danger);
  border-color: var(--accent-danger);
  color: #fff;
}

/* ── Active call bar (top-center, sits under the navbar) ── */
.call-bar {
  position: fixed;
  top: 78px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2600;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  min-width: 300px;
  max-width: calc(100vw - 24px);
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--accent-success);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(46, 160, 67, 0.25);
  animation: call-pop-in 0.25s ease backwards;
}
.call-bar-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.call-bar-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.call-bar-status { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.call-bar-status.is-active { color: var(--accent-success); font-weight: 700; }

/* ── Incoming call card (top-right, below the SC toast area) ── */
.incoming-call-card {
  position: fixed;
  top: 78px;
  right: 24px;
  z-index: 2700;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  width: 340px;
  max-width: calc(100vw - 24px);
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--accent-purple);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  animation: call-card-in 0.25s ease backwards, call-ring-glow 1.6s ease-in-out infinite;
}
.incoming-call-info { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.incoming-call-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-purple);
}
.incoming-call-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.incoming-call-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* ── Call toast (call ended / declined / missed / errors) ── */
.call-toast {
  position: fixed;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2800;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  max-width: calc(100vw - 32px);
  text-align: center;
  animation: call-pop-in 0.25s ease backwards;
}

@keyframes call-pop-in {
  from { opacity: 0; transform: translate(-50%, -8px) scale(0.97); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
/* The incoming card is positioned by right/top (no -50% X shift), so it has its own entry keyframes. */
@keyframes call-card-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes call-ring-glow {
  0%, 100% { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 0 0 rgba(187, 134, 252, 0.45); }
  50% { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 0 8px rgba(187, 134, 252, 0); }
}

/* Reduced motion: keep everything, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .call-bar, .incoming-call-card, .call-toast { animation: none !important; }
}

@media (max-width: 680px) {
  .call-bar { top: 66px; min-width: 0; width: calc(100vw - 24px); }
  .incoming-call-card { top: 66px; right: 12px; left: 12px; width: auto; }
  .call-toast { bottom: 84px; }
}

/* ── Light theme (ShareNet Pink & Sky Blue) ── */
html.theme-light .chat-call-btn {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--accent-success);
}
html.theme-light .chat-call-btn:hover {
  background: var(--accent-success);
  border-color: var(--accent-success);
  color: #fff;
}
html.theme-light .call-avatar {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
}
html.theme-light .call-accept-btn:hover { background: #388e3c; }
html.theme-light .call-hangup-btn:hover { background: #c62828; }
html.theme-light .call-mute-btn {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-main);
}
html.theme-light .call-mute-btn:hover { background: #fff0f5; border-color: var(--accent-purple); }
html.theme-light .call-mute-btn.is-muted {
  background: var(--accent-danger);
  border-color: var(--accent-danger);
  color: #fff;
}
html.theme-light .call-bar {
  background: var(--bg-card);
  border-color: var(--accent-success);
  box-shadow: 0 10px 32px rgba(233, 30, 140, 0.22), 0 0 0 1px rgba(46, 125, 50, 0.25);
}
html.theme-light .call-bar-name { color: var(--text-main); }
html.theme-light .call-bar-status { color: var(--text-muted); }
html.theme-light .call-bar-status.is-active { color: var(--accent-success); }
html.theme-light .incoming-call-card {
  background: var(--bg-card);
  border-color: var(--accent-purple);
  box-shadow: 0 14px 40px rgba(233, 30, 140, 0.25);
}
html.theme-light .incoming-call-label { color: var(--accent-purple); }
html.theme-light .incoming-call-name { color: var(--text-main); }
html.theme-light .call-toast {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-main);
  box-shadow: 0 8px 24px rgba(233, 30, 140, 0.18);
}


/* ==========================================================================
   29. PROJECT FILTERS, PLAYER FULLSCREEN BUTTON, LEAVE GROUP
   ========================================================================== */
.projects-filter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.projects-filter-row select {
  flex: 1;
  min-width: 150px;
  width: auto;
}

.project-card-tags {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.project-category-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(187, 134, 252, 0.15);
  color: var(--accent-purple);
  border: 1px solid var(--accent-purple);
  white-space: nowrap;
}
.project-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 700;
  color: #facc15;
  white-space: nowrap;
}
.project-card-rating .material-symbols-outlined { font-size: 14px; }
.project-card-rating.unrated { color: var(--text-secondary); font-weight: 500; }

.project-player-bar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.leave-group-row { margin-top: 12px; }
.leave-group-row .delete-btn {
  width: auto;
  margin-top: 0;
  padding: 8px 16px;
}

html.theme-light .project-category-pill {
  background: rgba(233, 30, 140, 0.1);
  color: var(--accent-purple);
  border-color: var(--accent-purple);
}
html.theme-light .project-card-rating { color: #b45309; }
html.theme-light .project-card-rating.unrated { color: var(--text-secondary); }
html.theme-light .projects-filter-row select {
  background: #fff0f5;
  border-color: var(--border-color);
  color: var(--text-main);
}
html.theme-light .leave-group-row .delete-btn {
  color: var(--accent-danger);
  border-color: var(--accent-danger);
}
html.theme-light .leave-group-row .delete-btn:hover {
  background-color: var(--accent-danger);
  color: #fff;
}
/* ==========================================================================
   30. POLL SCROLLING (long polls)
   Caps the rendered poll options list and the poll-creator's options list
   so a poll with many options scrolls internally instead of stretching the
   post card / modal indefinitely.
   ========================================================================== */
.poll-widget-frame .poll-options-scroll {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 6px;
}

#pollOptionsContainer {
  max-height: 260px;
  overflow-y: auto;
  padding-right: 6px;
}

/* ==========================================================================
   31. THEME EDITOR — fully customizable themes
   A third "Custom" theme layered on top of the built-in Dark/Light toggle.
   html.theme-custom applies user-chosen values for every CSS variable in
   :root via inline style on <html> (set by JS), so this stylesheet only
   needs to make sure nothing else overrides those variables when active,
   plus style the editor UI itself (which is theme-aware in both directions).
   ========================================================================== */

.theme-editor-box {
  max-width: 560px;
  width: 94%;
  max-height: 88vh;
  overflow-y: auto;
}

.theme-editor-intro {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.6;
}

.theme-mode-row {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.theme-mode-chip {
  background: var(--bg-card-hover);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.theme-mode-chip:hover { border-color: var(--accent-purple); }
.theme-mode-chip.active {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: #fff;
}

.theme-var-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.theme-var-row {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card-hover);
}
.theme-var-row label {
  flex: 1 1 0;
  min-width: 60px;
  overflow-wrap: anywhere;
  font-size: 13px;
  color: var(--text-main);
  font-weight: 500;
}
.theme-var-row input[type="color"] {
  width: 44px;
  height: 32px;
  padding: 2px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  cursor: pointer;
  flex-shrink: 0;
}
/* Higher specificity than the global input[type="text"] rule (width:100%),
   which was stretching this field past the edge of its row. */
.theme-var-row input.theme-var-hex {
  width: 88px;
  flex: 0 0 88px;
  min-width: 0;
  font-size: 12px;
  font-family: "SFMono-Regular", Consolas, monospace;
  padding: 6px 8px !important;
}

.theme-preset-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.theme-preset-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.theme-preset-swatch:hover { transform: scale(1.08); border-color: var(--accent-purple); }

.theme-saved-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
  max-height: 160px;
  overflow-y: auto;
}
.theme-saved-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-card-hover);
  font-size: 13px;
  color: var(--text-main);
}
.theme-saved-row-swatches { display: flex; gap: 3px; flex-shrink: 0; }
.theme-saved-row-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.2); }
.theme-saved-row-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-saved-row button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
}
.theme-saved-row button:hover { color: var(--accent-purple); background: rgba(187,134,252,0.1); }
.theme-saved-row button.theme-saved-delete:hover { color: var(--accent-danger); background: rgba(248,81,73,0.12); }

.theme-editor-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}


/* ── Light mode overrides ── */
html.theme-light .theme-var-row,
html.theme-light .theme-saved-row {
  background: var(--bg-card);
  border-color: var(--border-color);
}
html.theme-light .theme-mode-chip {
  background: var(--bg-card);
  border-color: var(--border-color);
}
html.theme-light .theme-mode-chip.active {
  background: var(--accent-purple);
  color: #fff;
}

/* ==========================================================================
   32. ART STUDIO — layered drawing tool launched from the post composer
   Full-screen overlay (distinct from the small centered .modal-overlay
   pattern used elsewhere) with a top bar, left tool rail, center canvas
   stage, and a right-hand layers/adjustments panel. All colors route
   through the existing --bg-*--text---accent variables so darklight
   (and the custom Theme Editor) all apply automatically; the handful of
   spots below with an explicit html.theme-light override exist only where
   the dark-mode default (e.g. the checkerboard transparency backdrop)
   needs a distinct light-mode look.
   ========================================================================== */*/

.art-studio-overlay {
  position: fixed;
  inset: 0;
  z-index: 2500;
  background: var(--bg-body);
  display: flex;
  flex-direction: column;
}

.art-top-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.art-top-title {
  font-weight: 800;
  font-size: 15px;
  color: var(--accent-purple);
  margin-right: 6px;
  white-space: nowrap;
}

.art-top-btn {
  padding: 7px 12px;
  font-size: 12.5px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.art-top-btn .material-symbols-outlined { font-size: 17px; }
.art-top-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.art-size-estimate {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  padding: 0 8px;
}

.art-top-spacer { flex: 1; }

.art-studio-overlay .close-btn {
  font-size: 26px;
  color: var(--text-muted);
  margin-left: 4px;
}
.art-studio-overlay .close-btn:hover { color: var(--text-main); }

.art-main-row {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

/* ── Left tool rail ── */
.art-left-toolbar {
  width: 56px;
  flex-shrink: 0;
  background: var(--bg-card);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  overflow-y: auto;
}

.art-tool-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.art-tool-btn .material-symbols-outlined { font-size: 21px; }
.art-tool-btn:hover { background: var(--bg-card-hover); color: var(--text-main); }
.art-tool-btn.active {
  background: var(--accent-purple);
  color: #fff;
  border-color: var(--accent-purple);
}

/* ── Center column: tool options + canvas stage ── */
.art-center-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-body);
}

.art-tool-options-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
  flex-shrink: 0;
  min-height: 46px;
}

.art-options-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.art-opt-label {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.art-opt-toggle {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  cursor: pointer;
}

.art-opt-hint {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
}

.art-selection-hint {
  font-size: 12px;
  color: var(--accent-cyan);
  margin-left: auto;
}

.art-tool-options-bar input[type="range"] {
  width: 100px;
  accent-color: var(--accent-purple);
}

.art-tool-options-bar select,
.art-tool-options-bar input[type="number"] {
  width: auto;
  padding: 6px 8px;
  font-size: 12.5px;
}

.art-color-swatch {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 2px solid var(--border-color);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.art-color-picker-input {
  width: 0;
  height: 0;
  padding: 0;
  border: none;
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.art-swatch-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.art-swatch {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: transform 0.1s;
}
.art-swatch:hover { transform: scale(1.15); }

.art-toggle-chip {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-card-hover);
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.art-toggle-chip.active {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: #fff;
}

/* ── Canvas stage ── */
.art-stage-scroll {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background:
    linear-gradient(45deg, #2a2f3a 25%, transparent 25%) 0 0 / 24px 24px,
    linear-gradient(-45deg, #2a2f3a 25%, transparent 25%) 0 0 / 24px 24px,
    linear-gradient(45deg, transparent 75%, #2a2f3a 75%) 0 0 / 24px 24px,
    linear-gradient(-45deg, transparent 75%, #2a2f3a 75%) 0 0 / 24px 24px,
    #1a1f2b;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0px;
}

html.theme-light .art-stage-scroll {
  background:
    linear-gradient(45deg, #e9c9dd 25%, transparent 25%) 0 0 / 24px 24px,
    linear-gradient(-45deg, #e9c9dd 25%, transparent 25%) 0 0 / 24px 24px,
    linear-gradient(45deg, transparent 75%, #e9c9dd 75%) 0 0 / 24px 24px,
    linear-gradient(-45deg, transparent 75%, #e9c9dd 75%) 0 0 / 24px 24px,
    #fdf0f6;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0px;
}

.art-stage-wrap {
  position: relative;
  flex-shrink: 0;
  transform-origin: center center;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
html.theme-light .art-stage-wrap {
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
}

.art-stage-canvas,
.art-overlay-canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.art-overlay-canvas {
  cursor: crosshair;
  touch-action: none;
}

#artInlineTextEditor {
  font-family: inherit;
  padding: 2px 4px;
  border-radius: 4px;
}

/* ── Right panel: layers + adjustments ── */
.art-right-panel {
  width: 280px;
  flex-shrink: 0;
  background: var(--bg-card);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 14px;
  gap: 14px;
}

.art-layers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.art-layers-header h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}
.art-layers-header-btns {
  display: flex;
  gap: 2px;
}
.art-layers-header-btns button {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.art-layers-header-btns button:hover { background: var(--bg-card-hover); color: var(--accent-purple); }
.art-layers-header-btns .material-symbols-outlined { font-size: 18px; }

.art-layers-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 46vh;
  overflow-y: auto;
}

.art-layer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-card-hover);
  cursor: pointer;
  transition: border-color 0.15s;
}
.art-layer-row:hover { border-color: var(--accent-purple); }
.art-layer-row.active { border-color: var(--accent-purple); background: rgba(187, 134, 252, 0.12); }
html.theme-light .art-layer-row.active { background: rgba(233, 30, 140, 0.08); }

.art-layer-drag {
  font-size: 16px !important;
  color: var(--text-secondary);
  cursor: grab;
  flex-shrink: 0;
}

.art-layer-row button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 5px;
}
.art-layer-row button:hover { color: var(--accent-purple); background: rgba(187, 134, 252, 0.1); }
.art-layer-row button .material-symbols-outlined { font-size: 17px; }
.art-layer-row button.active { color: var(--accent-purple); }

.art-layer-type-icon {
  font-size: 15px !important;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.art-layer-name {
  flex: 1;
  font-size: 12.5px;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.art-layer-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 8px 30px;
}
.art-layer-meta-row select {
  flex: 1;
  padding: 5px 6px;
  font-size: 11.5px;
}
.art-layer-meta-row input[type="range"] {
  width: 70px;
  accent-color: var(--accent-purple);
}

.art-adjust-panel {
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.art-adjust-panel h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-purple);
  margin: 0 0 2px 0;
}
.art-adjust-panel label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.art-adjust-panel label.art-opt-toggle { justify-content: flex-start; }
.art-adjust-panel input[type="range"] {
  width: 120px;
  accent-color: var(--accent-purple);
}

/* ── Responsive: collapse side rails on narrow viewports ── */
@media (max-width: 900px) {
  .art-right-panel { width: 220px; }
  .art-left-toolbar { width: 48px; }
  .art-tool-btn { width: 34px; height: 34px; }
}
@media (max-width: 720px) {
  .art-main-row { flex-direction: column; }
  .art-left-toolbar {
    width: 100%;
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
  }
  .art-right-panel {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border-color);
    max-height: 240px;
  }
  .art-top-bar { padding: 8px 10px; }
  .art-top-title { display: none; }
}


/* ==========================================================================
   33. EVENTS, CALENDAR & BLOG
   Dark values are the defaults; every surface has an html.theme-light version.
   ========================================================================== */

/* ── Date / time inputs (global input rule only covers text-like types) ── */
input[type="date"],
input[type="time"] {
  width: 100%;
  background-color: var(--bg-body);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  display: block;
  color-scheme: dark;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input[type="date"]:focus,
input[type="time"]:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
html.theme-light input[type="date"],
html.theme-light input[type="time"] {
  background: #fff0f5;
  color-scheme: light;
}

#blogCoverFileInput, #eventCoverFileInput, #blogInlineImageInput {
  display: none !important;
}

.ev-widget-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; }

.cover-drop-preview {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
}

/* ── Filter chips ── */
.ev-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ev-chip {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ev-chip:hover { border-color: var(--accent-purple); }
.ev-chip.active {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: var(--bg-body);
}
html.theme-light .ev-chip { background: var(--bg-card); border-color: var(--border-color); }
html.theme-light .ev-chip.active { background: var(--accent-purple); border-color: var(--accent-purple); color: #fff; }

/* ── Events grid + cards ── */
.events-grid,
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
.events-grid > .loading-text,
.blog-grid > .loading-text { grid-column: 1 / -1; }

.event-card,
.blog-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.event-card:hover,
.blog-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-purple);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}
html.theme-light .event-card,
html.theme-light .blog-card { background: var(--bg-card); border-color: var(--border-color); }
html.theme-light .event-card:hover,
html.theme-light .blog-card:hover { box-shadow: 0 10px 24px rgba(233, 30, 140, 0.15); }
.event-card-past { opacity: 0.6; }

.event-card-cover,
.blog-card-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(187, 134, 252, 0.22));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
html.theme-light .event-card-cover,
html.theme-light .blog-card-cover { background: linear-gradient(135deg, rgba(2, 136, 209, 0.15), rgba(233, 30, 140, 0.15)); }
.event-card-cover img,
.blog-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-cover-placeholder { font-size: 44px; color: var(--text-secondary); }

.event-date-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  min-width: 46px;
  padding: 5px 8px;
  border-radius: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.event-date-badge-month { font-size: 11px; font-weight: 700; color: var(--accent-purple); }
.event-date-badge-day { font-size: 19px; font-weight: 800; color: var(--text-main); }

.event-card-body,
.blog-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.event-card-when {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-cyan);
}
.event-card-when .material-symbols-outlined { font-size: 15px; }
html.theme-light .event-card-when { color: var(--accent-blue); }
.event-card-title,
.blog-card-title { font-size: 16px; font-weight: 700; color: var(--text-main); line-height: 1.3; }
.event-card-desc,
.blog-card-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.event-card-author { font-size: 12px; color: var(--text-secondary); }
.blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ── Sidebar "Next up" ── */
.events-next-list { display: flex; flex-direction: column; gap: 8px; }
.events-next-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: border-color 0.15s;
}
.events-next-item:hover { border-color: var(--accent-purple); }
.events-next-date { font-size: 11px; font-weight: 700; color: var(--accent-purple); }
.events-next-title { font-size: 13px; font-weight: 600; color: var(--text-main); }
html.theme-light .events-next-item { background: #fff0f5; border-color: var(--border-color); }

/* ── Event detail + editor modals ── */
.event-detail-box,
.event-editor-box {
  max-width: 540px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.event-editor-box { overflow-y: auto; display: block; }
.event-detail-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 6px; }
.event-detail-cover-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-body);
  margin-bottom: 16px;
}
.event-detail-cover-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-detail-box h2 { margin-bottom: 8px; }
.event-detail-when { font-size: 14px; font-weight: 700; color: var(--accent-cyan); margin-bottom: 4px; }
html.theme-light .event-detail-when { color: var(--accent-blue); }
.event-detail-author { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.event-detail-author a { color: inherit; font-weight: 600; }
.event-detail-author a:hover { color: var(--accent-purple); }
.event-detail-description {
  font-size: 14px;
  color: var(--text-main);
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.event-detail-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
  align-items: center;
}
.event-detail-delete,
.blog-reader-delete { width: auto; margin-top: 0; padding: 10px 20px; }

/* ── Calendar ── */
.cal-page-wrap { max-width: 1200px; width: 100%; margin: 36px auto; padding: 0 24px; }
.cal-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.cal-top-bar h2 { font-size: 28px; font-weight: 700; }
.cal-nav { display: flex; gap: 8px; }
.cal-nav-btn { padding: 8px 14px; display: inline-flex; align-items: center; }
.cal-nav-btn .material-symbols-outlined { font-size: 20px; }
.cal-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.cal-legend-item input { accent-color: var(--accent-purple); width: auto; }
.cal-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.cal-legend-dot-event { background: var(--accent-purple); }
.cal-legend-dot-holiday { background: var(--accent-cyan); }

.cal-grid-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
}
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg-card-hover);
  border-bottom: 1px solid var(--border-color);
}
.cal-weekdays span {
  padding: 10px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell {
  min-height: 112px;
  padding: 6px;
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  transition: background 0.15s;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:hover { background: var(--bg-card-hover); }
.cal-cell-muted { opacity: 0.45; }
.cal-day-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.cal-cell-today .cal-day-num { background: var(--accent-purple); color: var(--bg-body); }
html.theme-light .cal-cell-today .cal-day-num { color: #fff; }
.cal-chips { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  min-width: 0;
}
.cal-chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.cal-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip-event { background: rgba(187, 134, 252, 0.18); color: var(--accent-purple); cursor: pointer; }
.cal-chip-event:hover { background: rgba(187, 134, 252, 0.3); }
.cal-chip-holiday { background: rgba(46, 160, 67, 0.16); color: #4ade80; }
.cal-chip-federal { background: rgba(56, 189, 248, 0.16); color: var(--accent-cyan); }
.cal-more { font-size: 11px; color: var(--text-muted); padding-left: 6px; }
html.theme-light .cal-chip-event { background: rgba(233, 30, 140, 0.12); color: var(--accent-purple); }
html.theme-light .cal-chip-event:hover { background: rgba(233, 30, 140, 0.22); }
html.theme-light .cal-chip-holiday { background: rgba(46, 125, 50, 0.12); color: #2e7d32; }
html.theme-light .cal-chip-federal { background: rgba(2, 136, 209, 0.12); color: #01579b; }
html.theme-light .cal-legend-dot-holiday { background: var(--accent-blue); }
html.theme-light .cal-grid-wrap { background: var(--bg-card); border-color: var(--border-color); }
html.theme-light .cal-weekdays { background: #fff0f5; }
html.theme-light .cal-cell:hover { background: #fff0f5; }

@media (max-width: 680px) {
  .cal-page-wrap { padding: 0 10px; margin: 20px auto; }
  .cal-cell { min-height: 64px; padding: 4px; }
  .cal-chip { padding: 0; background: transparent !important; }
  .cal-chip-text { display: none; }
  .cal-chips { flex-direction: row; flex-wrap: wrap; gap: 3px; }
  .cal-more { padding-left: 0; }
}

/* ── Calendar day modal ── */
.cal-day-box { max-width: 460px; max-height: 88vh; overflow-y: auto; }
.cal-day-section { margin-bottom: 16px; }
.cal-day-section h4 { font-size: 13px; font-weight: 700; color: var(--accent-purple); margin-bottom: 8px; }
.cal-day-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-card-hover);
  margin-bottom: 6px;
}
.cal-day-row-event { cursor: pointer; transition: border-color 0.15s; }
.cal-day-row-event:hover { border-color: var(--accent-purple); }
.cal-day-row-time { font-size: 12px; font-weight: 700; color: var(--accent-cyan); min-width: 64px; }
.cal-day-row-title { flex: 1; font-size: 14px; font-weight: 600; color: var(--text-main); }
html.theme-light .cal-day-row { background: var(--bg-card); border-color: var(--border-color); }
html.theme-light .cal-day-row-time { color: var(--accent-blue); }

/* ── Blog list + reader ── */
.blog-load-more {
  margin-top: 16px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card);
  text-align: center;
}
.blog-back-btn { margin-bottom: 16px; width: fit-content; }
.blog-reader-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 32px;
  overflow: hidden;
}
html.theme-light .blog-reader-card { background: var(--bg-card); border-color: var(--border-color); }
.blog-reader-cover {
  margin: -32px -32px 24px;
  aspect-ratio: 21 / 9;
  background: var(--bg-body);
  overflow: hidden;
}
.blog-reader-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-reader-title { font-size: 34px; font-weight: 800; line-height: 1.2; margin-bottom: 12px; overflow-wrap: anywhere; }
.blog-reader-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.blog-reader-meta a { color: var(--text-main); font-weight: 700; }
.blog-reader-meta a:hover { color: var(--accent-purple); }
.blog-reader-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-color);
}
.blog-reader-actions {
  display: flex;
  gap: 10px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
}
@media (max-width: 680px) {
  .blog-reader-card { padding: 20px; }
  .blog-reader-cover { margin: -20px -20px 18px; }
  .blog-reader-title { font-size: 26px; }
}

/* ── Blog body typography (shared by the reader and the editor) ── */
.blog-body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-main);
  overflow-wrap: anywhere;
}
.blog-body > *:first-child { margin-top: 0; }
.blog-body p, .blog-body div { margin: 0 0 14px; }
.blog-body h1 { font-size: 28px; margin: 28px 0 12px; }
.blog-body h2 { font-size: 24px; margin: 26px 0 10px; line-height: 1.3; }
.blog-body h3 { font-size: 20px; margin: 22px 0 8px; line-height: 1.3; }
.blog-body h4 { font-size: 17px; margin: 18px 0 8px; color: var(--text-muted); }
.blog-body ul, .blog-body ol { margin: 0 0 14px; padding-left: 26px; }
.blog-body ul { list-style: disc; }
.blog-body ol { list-style: decimal; }
.blog-body li { margin-bottom: 4px; }
.blog-body a { color: var(--accent-blue); text-decoration: underline; }
.blog-body a:hover { color: var(--accent-purple); }
.blog-body blockquote {
  margin: 0 0 14px;
  padding: 8px 18px;
  border-left: 4px solid var(--accent-purple);
  background: var(--bg-card-hover);
  border-radius: 0 8px 8px 0;
  color: var(--text-muted);
  font-style: italic;
}
.blog-body hr { border: none; border-top: 1px solid var(--border-color); margin: 24px 0; }
.blog-body img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 14px 0; }
.blog-body table { border-collapse: collapse; margin: 0 0 14px; max-width: 100%; }
.blog-body th, .blog-body td { border: 1px solid var(--border-color); padding: 6px 10px; }
.blog-body code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(148, 163, 184, 0.18);
  color: var(--accent-cyan);
}
.blog-body pre {
  position: relative;
  margin: 0 0 16px;
  padding: 16px 18px;
  background: #0b1220;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow-x: auto;
  white-space: pre;
  line-height: 1.55;
  tab-size: 2;
}
.blog-body pre code {
  display: block;
  padding: 0;
  background: none;
  color: #e2e8f0;
  font-size: 13.5px;
  white-space: pre;
}
.blog-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
}
.blog-copy-btn:hover { color: var(--accent-purple); border-color: var(--accent-purple); }
html.theme-light .blog-body blockquote { background: #fff0f5; }
html.theme-light .blog-body code { background: rgba(233, 30, 140, 0.1); color: #ad1457; }
html.theme-light .blog-body pre { background: #fdf2f8; border-color: var(--border-color); }
html.theme-light .blog-body pre code { color: #1a0a14; background: none; }
html.theme-light .blog-copy-btn { background: #fff; }

/* ── Blog editor ── */
.blog-editor-box { max-width: 860px; width: 94%; max-height: 92vh; overflow-y: auto; }
.blog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-color);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  position: sticky;
  top: -1px;
  z-index: 3;
}
.blog-toolbar select {
  width: auto;
  display: inline-block;
  padding: 6px 8px;
  font-size: 12.5px;
  margin-right: 4px;
}
.blog-toolbar input[type="color"] {
  width: 30px;
  height: 30px;
  padding: 2px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  cursor: pointer;
  display: inline-block;
}
.blog-tool-btn {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.blog-tool-btn .material-symbols-outlined { font-size: 19px; }
.blog-tool-btn:hover { background: var(--bg-card); color: var(--accent-purple); border-color: var(--border-color); }
.blog-tool-btn.active { background: var(--accent-purple); color: #fff; border-color: var(--accent-purple); }
.blog-tool-sep { width: 1px; height: 20px; background: var(--border-color); margin: 0 4px; }
.blog-editor-area {
  min-height: 300px;
  max-height: 55vh;
  overflow-y: auto;
  padding: 16px 18px;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: 0 0 10px 10px;
  outline: none;
}
.blog-editor-area:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); }
.blog-editor-area:empty::before { content: attr(data-placeholder); color: var(--text-secondary); pointer-events: none; }
html.theme-light .blog-toolbar { background: #fff0f5; }
html.theme-light .blog-tool-btn:hover { background: #fff; }
html.theme-light .blog-toolbar input[type="color"] { background: #fff; }
html.theme-light .blog-editor-area { background: #fff0f5; }

/* ==========================================================================
   34. GROUP PAGE LAYOUT
   Individual groups get their own page layout (banner, title row, tabs,
   composer + posts on the left, members on the right). Everything here is
   scoped to #page-groups.group-mode, so the Main Feed keeps its normal look.
   Dark values are the defaults; every surface has an html.theme-light version.
   ========================================================================== */

/* ── Hero: back button, banner, title row, tabs ── */
.group-hero {
  display: none;
  grid-column: 1 / -1;
  min-width: 0;
  margin-bottom: -10px;
}
#page-groups.group-mode .group-hero { display: block; }

.group-hero-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 7px 14px;
  font-size: 13px;
}
.group-hero-back .material-symbols-outlined { font-size: 17px; }

.group-hero-banner {
  position: relative;
  width: 100%;
  height: 240px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(187, 134, 252, 0.3));
  display: flex;
  align-items: center;
  justify-content: center;
}
.group-hero-banner img {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.group-hero-banner.has-image img { display: block; }
.group-hero-banner-fallback {
  font-size: 64px !important;
  color: var(--text-secondary);
  opacity: 0.6;
}
.group-hero-banner.has-image .group-hero-banner-fallback { display: none; }

.group-hero-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 4px 18px;
}
.group-hero-titles { min-width: 0; flex: 1 1 260px; }
.group-hero-title {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-main);
  overflow-wrap: anywhere;
}
.group-hero-meta {
  margin-top: 4px;
  font-size: 14px;
  color: var(--text-muted);
}

.group-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.group-hero-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.group-hero-icon-btn .material-symbols-outlined { font-size: 22px; }
.group-hero-icon-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-color);
  color: var(--accent-purple);
}

.group-hero-join-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid var(--accent-blue);
  background: transparent;
  color: var(--accent-blue);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.group-hero-join-btn .material-symbols-outlined { font-size: 18px; }
.group-hero-join-btn:hover:not(:disabled) {
  background: var(--accent-blue);
  color: #fff;
}
.group-hero-join-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.group-hero-menu-wrap { position: relative; }
.group-hero-menu {
  position: absolute;
  top: 46px;
  right: 0;
  min-width: 190px;
  padding: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  z-index: 30;
}
.group-hero-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--text-main);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.group-hero-menu-item .material-symbols-outlined { font-size: 18px; color: var(--text-muted); }
.group-hero-menu-item:hover { background: var(--bg-card-hover); }
.group-hero-menu-item-danger,
.group-hero-menu-item-danger .material-symbols-outlined { color: var(--accent-danger); }
.group-hero-menu-item-danger:hover { background: rgba(248, 81, 73, 0.12); }

.group-hero-search-row { padding: 0 4px 16px; }

.group-hero-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
}
.group-hero-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  padding: 14px 24px;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.group-hero-tab:hover { color: var(--text-main); }
.group-hero-tab.active {
  color: var(--text-main);
  border-bottom-color: var(--accent-purple);
}

/* ── Things that change on the page while a group is open ── */
#page-groups.group-mode .feed-header-card,
#page-groups.group-mode .groups-list-card,
#page-groups.group-mode #adminPanel,
#page-groups.group-mode #publicGroupJoinUi { display: none !important; }

/* About tab swaps the discussion content for the About card */
#page-groups.group-tab-about #createPostBox,
#page-groups.group-tab-about #postsStream,
#page-groups.group-tab-about #groupGateUi,
#page-groups.group-tab-about #publicGroupJoinUi { display: none !important; }

/* ── Composer: avatar + "Share something..." + Create a Post, Photo/Video/GIF row ── */
.group-composer-avatar,
.group-composer-post-btn,
.group-composer-media-row { display: none; }

#page-groups.group-mode .create-post-box {
  padding: 0;
  overflow: hidden;
}
#page-groups.group-mode .post-box-trigger {
  gap: 12px;
  padding: 16px 20px;
}
#page-groups.group-mode .post-box-trigger input {
  flex: 1;
  width: auto;
  min-width: 0;
}
#page-groups.group-mode .group-composer-avatar {
  display: flex;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  color: #fff;
  font-weight: 700;
  font-size: 17px;
}
.group-composer-avatar img { width: 100%; height: 100%; object-fit: cover; }
#page-groups.group-mode .group-composer-post-btn {
  display: block;
  flex-shrink: 0;
  padding: 12px 20px;
  white-space: nowrap;
}
#page-groups.group-mode .group-composer-media-row {
  display: flex;
  border-top: 1px solid var(--border-color);
}
.group-composer-media-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 10px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.group-composer-media-btn + .group-composer-media-btn { border-left: 1px solid var(--border-color); }
.group-composer-media-btn .material-symbols-outlined { font-size: 20px; }
.group-composer-media-btn:hover {
  background: var(--bg-card-hover);
  color: var(--accent-purple);
}

/* ── About card ── */
.group-about-card {
  display: none;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
#page-groups.group-tab-about .group-about-card { display: block; }
.group-about-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-main);
}
.group-about-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-bottom: 18px;
}
.group-about-facts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
}
.group-about-fact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.group-about-fact > .material-symbols-outlined {
  font-size: 22px;
  color: var(--accent-purple);
}
.group-about-fact strong {
  display: block;
  font-size: 14px;
  color: var(--text-main);
}
.group-about-fact small,
.group-about-fact a {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
}
.group-about-fact a { color: var(--accent-blue); font-weight: 600; }
.group-about-fact a:hover { color: var(--accent-purple); }

/* ── Members widget (sidebar) + "See All" popup ── */
.group-members-widget { display: none; }
#page-groups.group-mode .group-members-widget { display: block; }
.group-members-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-main);
}
.group-members-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.group-members-list-full {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 6px;
}
.group-member-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.group-member-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}
.group-member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.group-member-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.group-member-name {
  display: block;
  max-width: 100%;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-member-name:hover { color: var(--accent-purple); }
.group-member-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.group-member-badges .user-badge-row {
  margin-left: 0;
  flex-wrap: wrap;
}
.group-member-follow-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--accent-purple);
  background: transparent;
  color: var(--accent-purple);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.group-member-follow-btn:hover:not(:disabled) {
  background: var(--accent-purple);
  color: #fff;
}
.group-member-follow-btn.following {
  border-color: var(--border-color);
  color: var(--text-muted);
}
.group-member-follow-btn.following:hover:not(:disabled) {
  background: rgba(248, 81, 73, 0.1);
  border-color: var(--accent-danger);
  color: var(--accent-danger);
}
.group-member-follow-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.group-members-see-all {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 10px 0 0;
  background: none;
  border: none;
  border-top: 1px solid var(--border-color);
  color: var(--accent-blue);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.group-members-see-all:hover { color: var(--accent-purple); }

.group-members-modal-box { max-width: 480px; width: 92%; }

@media (max-width: 680px) {
  .group-hero-banner { height: 150px; border-radius: 12px; }
  .group-hero-title { font-size: 22px; }
  .group-hero-tab { padding: 12px 16px; }
  #page-groups.group-mode .post-box-trigger { flex-wrap: wrap; }
  #page-groups.group-mode .group-composer-post-btn { width: 100%; }
}

/* ── Light mode overrides ── */
html.theme-light .group-hero-banner {
  background: linear-gradient(135deg, rgba(2, 136, 209, 0.2), rgba(233, 30, 140, 0.2));
  border-color: var(--border-color);
}
html.theme-light .group-hero-icon-btn:hover {
  background: #fff0f5;
  border-color: var(--border-color);
}
html.theme-light .group-hero-menu {
  background: var(--bg-card);
  border-color: var(--border-color);
  box-shadow: 0 8px 28px rgba(233, 30, 140, 0.2);
}
html.theme-light .group-hero-menu-item:hover { background: #fff0f5; }
html.theme-light .group-hero-menu-item-danger:hover { background: rgba(229, 57, 53, 0.1); }
html.theme-light .group-hero-tabs { border-bottom-color: var(--border-color); }
html.theme-light .group-hero-tab.active { border-bottom-color: var(--accent-purple); }
html.theme-light .group-hero-search-row input {
  background: #fff0f5;
  border-color: var(--border-color);
  color: var(--text-main);
}
html.theme-light .group-about-card {
  background: var(--bg-card);
  border-color: var(--border-color);
  box-shadow: 0 4px 15px rgba(233, 30, 140, 0.1);
}
html.theme-light .group-composer-media-btn:hover { background: #fff0f5; }
html.theme-light #page-groups.group-mode .group-composer-media-row,
html.theme-light .group-composer-media-btn + .group-composer-media-btn,
html.theme-light .group-members-see-all,
html.theme-light .group-about-facts { border-color: var(--border-color); }
html.theme-light .group-member-follow-btn.following {
  border-color: var(--border-color);
  color: var(--text-muted);
}
html.theme-light .group-member-follow-btn.following:hover:not(:disabled) {
  background: rgba(229, 57, 53, 0.1);
  border-color: var(--accent-danger);
  color: var(--accent-danger);
}

/* ==========================================================================
   35. THEME SETTING (Profile Settings) + THEME EDITOR ADDITIONS
   Replaces the old Dark Mode switch in account settings. The row below shows
   the active theme and opens the Theme Editor; html.theme-custom /
   html.theme-custom-light are set by the editor when Custom is active so the
   handful of rules that used hardcoded colors follow the chosen variables.
   Everything here reads CSS variables, so it adapts to Dark, Light and Custom;
   explicit html.theme-light versions are included where the light look differs.
   ========================================================================== */

/* ── Profile Settings: Theme row ── */
.theme-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card-hover);
}
.theme-setting-summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}
.theme-setting-dots { display: inline-flex; flex-shrink: 0; }
.theme-setting-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  margin-left: -4px;
}
.theme-setting-dot:first-child { margin-left: 0; }
.theme-setting-dot-bg { background: var(--bg-body); }
.theme-setting-dot-blue { background: var(--accent-blue); }
.theme-setting-dot-purple { background: var(--accent-purple); }
.theme-setting-btn { margin: 0; padding: 8px 14px; font-size: 13px; white-space: nowrap; }
html.theme-light .theme-setting-row { background: #fff0f5; border-color: var(--border-color); }

/* ── Theme editor (opened from Profile Settings) ── */
.theme-editor-overlay { z-index: 2150; } /* sits above Profile Settings, which stays open underneath */

.theme-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-purple);
  margin: 6px 0 10px;
}

/* Preset chips (swatch + name) */
.theme-preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-card-hover);
  color: var(--text-main);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.theme-preset-chip:hover { border-color: var(--accent-purple); }
.theme-preset-chip.active {
  border-color: var(--accent-purple);
  background: rgba(187, 134, 252, 0.15);
}
.theme-preset-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}
html.theme-light .theme-preset-chip { background: var(--bg-card); border-color: var(--border-color); }
html.theme-light .theme-preset-chip.active { background: rgba(233, 30, 140, 0.1); border-color: var(--accent-purple); }

/* Readability check under the color list */
.theme-contrast-note {
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  margin: 0 0 18px;
}
.theme-contrast-note.ok { color: var(--accent-success); border-color: var(--accent-success); }
.theme-contrast-note.warn { color: var(--accent-danger); border-color: var(--accent-danger); }

.theme-editor-actions-left { justify-content: flex-start; margin-bottom: 18px; }
.theme-editor-actions .secondary-btn-style { padding: 8px 14px; font-size: 13px; }

/* ── Custom theme: replace hardcoded colors elsewhere with the chosen variables ──
   These reuse the same targets the built-in html.theme-light block overrides,
   so a custom light OR dark palette stays readable everywhere. */
html.theme-custom .post-card { background-color: var(--bg-card); }
html.theme-custom .post-render-text,
html.theme-custom .author-name { color: var(--text-main); }
html.theme-custom .post-engagement-bar { border-top-color: var(--border-color); }
html.theme-custom .poll-widget-frame { background: var(--bg-card-hover); border-color: var(--border-color); }
html.theme-custom .comment-item-row { background: var(--bg-card-hover); }
html.theme-custom .comment-author-label { color: var(--text-muted); }
html.theme-custom .comment-text-content { color: var(--text-main); }
html.theme-custom .store-card-preview,
html.theme-custom .store-confirm-preview {
  background: radial-gradient(circle at 50% 40%, var(--bg-card-hover) 0%, var(--bg-body) 75%);
}
html.theme-custom .blog-body pre { background: var(--bg-body); }
html.theme-custom .blog-body pre code { color: var(--text-main); }
html.theme-custom .project-player-bar { background: var(--bg-card); border-bottom-color: var(--border-color); }
html.theme-custom .project-player-title,
html.theme-custom .project-player-close-btn { color: var(--text-main); }
html.theme-custom .nav-links a:hover,
html.theme-custom .bell-wrapper:hover { background-color: color-mix(in srgb, var(--text-main) 8%, transparent); }
html.theme-custom .nav-links a.active { background-color: color-mix(in srgb, var(--accent-blue) 14%, transparent); }

/* Custom palettes with a light page background */
html.theme-custom-light input[type="date"],
html.theme-custom-light input[type="time"] { color-scheme: light; }
html.theme-custom-light .art-stage-scroll {
  background:
    linear-gradient(45deg, #d9d9d9 25%, transparent 25%) 0 0 / 24px 24px,
    linear-gradient(-45deg, #d9d9d9 25%, transparent 25%) 0 0 / 24px 24px,
    linear-gradient(45deg, transparent 75%, #d9d9d9 75%) 0 0 / 24px 24px,
    linear-gradient(-45deg, transparent 75%, #d9d9d9 75%) 0 0 / 24px 24px,
    #f5f5f5;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0px;
}
html.theme-custom-light .art-stage-wrap { box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18); }

/* ==========================================================================
   36. THEME EDITOR — COLOR PICKER
   Swatch buttons in the color list open this picker: a preset palette, a
   saturation/brightness area, a hue bar and a hex field. All surfaces read
   CSS variables (so Dark, Light and Custom all work); explicit light-theme
   versions are included where the look differs.
   ========================================================================== */
@media (max-width: 520px) {
  .theme-editor-box { padding: 22px 16px; }
  .theme-var-row { gap: 8px; padding: 8px; }
}

.theme-var-swatch {
  width: 36px;
  height: 32px;
  flex: 0 0 36px;
  padding: 0;
  border-radius: 6px;
  border: 2px solid var(--border-color);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.theme-var-swatch:hover { border-color: var(--accent-purple); transform: scale(1.06); }

.theme-picker-overlay { z-index: 2250; } /* above the Theme editor (2150) */
.theme-picker-box {
  max-width: 560px;
  width: 94%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 24px;
}
.theme-picker-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 14px;
  padding-right: 28px;
  color: var(--text-main);
}
.theme-picker-layout { display: flex; gap: 16px; flex-wrap: wrap; }

.theme-picker-palette {
  flex: 0 1 230px;
  min-width: 200px;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-auto-rows: 18px;
  gap: 3px;
  align-content: start;
}
.theme-picker-cell {
  padding: 0;
  min-width: 0;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: transform 0.1s;
}
.theme-picker-cell:hover { transform: scale(1.3); position: relative; z-index: 1; border-color: var(--text-main); }
.theme-picker-cell.active { outline: 2px solid var(--text-main); outline-offset: 1px; position: relative; z-index: 1; }

.theme-picker-right { flex: 1 1 220px; min-width: 200px; display: flex; flex-direction: column; gap: 14px; }
.theme-picker-sv {
  position: relative;
  height: 200px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background-color: #f00;
  background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}
.theme-picker-handle {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.theme-picker-hue {
  position: relative;
  height: 16px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.theme-picker-hue-handle {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.theme-picker-footer { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.theme-picker-preview {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.theme-picker-footer input.theme-picker-hex {
  flex: 1;
  width: auto;
  min-width: 0;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
}
.theme-picker-footer .submit-btn { margin: 0; white-space: nowrap; }

/* ── Light mode overrides ── */
html.theme-light .theme-var-swatch { border-color: var(--border-color); }
html.theme-light .theme-picker-cell { border-color: rgba(0, 0, 0, 0.15); }
html.theme-light .theme-picker-sv,
html.theme-light .theme-picker-hue,
html.theme-light .theme-picker-preview { border-color: var(--border-color); }
html.theme-light .theme-picker-footer input.theme-picker-hex { background: #fff0f5; border-color: var(--border-color); color: var(--text-main); }


/* ==========================================================================
   37. PROJECT MODERATION, STATUS TAGS & REVIEWS
   Dark values are the defaults; every colored surface has an html.theme-light version.
   ========================================================================== */
.project-card-status-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0; }
.project-tag-pill, .project-status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 6px; border-radius: 999px; border: 1px solid var(--border-color); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; color: var(--text-muted); }
.project-tag-pill .material-symbols-outlined, .project-status-pill .material-symbols-outlined { font-size: 13px; }
.project-tag-verified { color: #4ade80; background: rgba(46, 160, 67, 0.14); border-color: #2ea043; }
.project-tag-halfbroken { color: #fbbf24; background: rgba(251, 191, 36, 0.12); border-color: #f5a524; }
.project-tag-broken { color: #f87171; background: rgba(248, 81, 73, 0.12); border-color: var(--accent-danger); }
.project-tag-unfinished { color: var(--accent-cyan); background: rgba(56, 189, 248, 0.12); border-color: var(--accent-cyan); }
.project-tag-abandoned { color: var(--text-muted); background: rgba(148, 163, 184, 0.12); border-color: var(--border-color); }
.project-tag-more { padding-left: 8px; }
.project-status-suspended { color: #f87171; background: rgba(248, 81, 73, 0.14); border-color: var(--accent-danger); }
.project-status-pending { color: var(--accent-purple); background: rgba(187, 134, 252, 0.14); border-color: var(--accent-purple); }
.project-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.project-status-banner { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-color); font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.project-status-banner strong { display: flex; align-items: center; gap: 6px; color: var(--text-main); font-size: 14px; }
.project-status-banner strong .material-symbols-outlined { font-size: 18px; }
.project-status-banner-suspended { border-color: var(--accent-danger); background: rgba(248, 81, 73, 0.08); }
.project-status-banner-suspended strong { color: #f87171; }
.project-status-banner-pending { border-color: var(--accent-purple); background: rgba(187, 134, 252, 0.08); }
.project-status-banner-pending strong { color: var(--accent-purple); }
.project-status-reason { color: var(--text-main); }
.project-moderation-box { max-width: 520px; width: 94%; max-height: 90vh; overflow-y: auto; }
.project-moderation-status { font-size: 13px; font-weight: 700; color: var(--accent-purple); margin-bottom: 14px; }
.project-moderation-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.project-moderation-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.project-moderation-actions .delete-btn { width: auto; margin-top: 0; padding: 10px 18px; }
.project-moderation-save { margin-top: 10px; }
.project-deletion-list { display: flex; flex-direction: column; gap: 10px; }
.project-deletion-item { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 10px; background: var(--bg-body); border: 1px solid var(--accent-purple); }
.project-deletion-title { font-size: 14px; color: var(--text-main); }
.project-deletion-item small { color: var(--text-muted); font-size: 12px; }
.project-deletion-reason { font-size: 13px; color: var(--text-main); line-height: 1.5; margin: 4px 0; }
.project-deletion-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.project-deletion-actions .secondary-btn-style, .project-deletion-actions .delete-btn { width: auto; margin-top: 0; padding: 6px 12px; font-size: 12px; }
.project-reviews-section { margin-top: 14px; padding: 14px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card-hover); }
.project-reviews-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.project-reviews-label { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text-main); }
.project-reviews-label .material-symbols-outlined { font-size: 16px; }
.project-reviews-count { font-size: 12px; color: var(--text-muted); }
.project-review-form { flex-direction: column; gap: 8px; margin-bottom: 12px; }
.project-review-form textarea { min-height: 70px; }
.project-review-form .submit-btn { align-self: flex-end; padding: 8px 18px; font-size: 13px; }
.project-review-note { font-size: 12px; color: var(--text-muted); font-style: italic; margin-bottom: 10px; }
.project-reviews-list { display: flex; flex-direction: column; gap: 10px; max-height: 260px; overflow-y: auto; padding-right: 4px; }
.project-review-item { padding: 10px 12px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border-color); }
.project-review-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.project-review-author { font-size: 13px; font-weight: 700; color: var(--text-main); }
.project-review-author:hover { color: var(--accent-purple); }
.project-review-date { font-size: 11px; color: var(--text-secondary); margin-left: auto; }
.project-review-delete { background: none; border: none; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; padding: 2px; border-radius: 5px; }
.project-review-delete .material-symbols-outlined { font-size: 16px; }
.project-review-delete:hover { color: var(--accent-danger); background: rgba(248, 81, 73, 0.12); }
.project-review-text { font-size: 13px; color: var(--text-main); line-height: 1.55; margin: 0; overflow-wrap: anywhere; }

html.theme-light .project-tag-verified { color: #1b5e20; background: rgba(46, 125, 50, 0.12); border-color: #2e7d32; }
html.theme-light .project-tag-halfbroken { color: #b45309; background: rgba(180, 83, 9, 0.1); border-color: #b45309; }
html.theme-light .project-tag-broken, html.theme-light .project-status-suspended { color: #c62828; background: rgba(229, 57, 53, 0.1); border-color: var(--accent-danger); }
html.theme-light .project-tag-unfinished { color: #01579b; background: rgba(2, 136, 209, 0.1); border-color: var(--accent-blue); }
html.theme-light .project-tag-abandoned { color: var(--text-muted); background: rgba(123, 58, 85, 0.08); border-color: var(--border-color); }
html.theme-light .project-status-pending { color: var(--accent-purple); background: rgba(233, 30, 140, 0.1); border-color: var(--accent-purple); }
html.theme-light .project-status-banner-suspended { background: rgba(229, 57, 53, 0.07); }
html.theme-light .project-status-banner-suspended strong { color: #c62828; }
html.theme-light .project-status-banner-pending { background: rgba(233, 30, 140, 0.07); }
html.theme-light .project-deletion-item { background: #fff0f5; border-color: var(--accent-purple); }
html.theme-light .project-reviews-section { background: var(--bg-card); border-color: var(--border-color); }
html.theme-light .project-review-item { background: #fff0f5; border-color: var(--border-color); }
html.theme-light .project-moderation-box { background: var(--bg-card); border-color: var(--border-color); }
html.theme-light .project-review-delete:hover { background: rgba(229, 57, 53, 0.1); }

/* ==========================================================================
   38. EVENT RSVPs
   ========================================================================== */
.event-card-rsvp { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--accent-purple); }
.event-card-rsvp .material-symbols-outlined { font-size: 15px; }
.event-rsvp-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.event-rsvp-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.event-rsvp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-card-hover); color: var(--text-main); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.event-rsvp-btn .material-symbols-outlined { font-size: 18px; }
.event-rsvp-btn:hover:not(:disabled) { border-color: var(--accent-purple); }
.event-rsvp-btn.active { background: var(--accent-purple); border-color: var(--accent-purple); color: #fff; }
.event-rsvp-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.event-rsvp-count { min-width: 18px; padding: 0 6px; border-radius: 999px; background: rgba(148, 163, 184, 0.2); font-size: 11px; text-align: center; }
.event-rsvp-btn.active .event-rsvp-count { background: rgba(255, 255, 255, 0.25); }
.event-rsvp-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.event-rsvp-attendees { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.event-rsvp-group-label { display: block; font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
.event-rsvp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.event-rsvp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-card-hover); color: var(--text-main); font-size: 12px; font-weight: 600; }
.event-rsvp-chip:hover { border-color: var(--accent-purple); color: var(--accent-purple); }
.event-rsvp-chip-avatar { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); color: #fff; font-size: 11px; font-weight: 700; }
.event-rsvp-chip-avatar img { width: 100%; height: 100%; object-fit: cover; }
.event-rsvp-more { font-size: 12px; color: var(--text-muted); align-self: center; }
html.theme-light .event-rsvp-btn, html.theme-light .event-rsvp-chip { background: var(--bg-card); border-color: var(--border-color); }
html.theme-light .event-rsvp-btn.active { background: var(--accent-purple); border-color: var(--accent-purple); color: #fff; }
html.theme-light .event-rsvp-count { background: rgba(123, 58, 85, 0.12); }

/* ==========================================================================
   39. IMAGE ZOOM VIEWER
   ========================================================================== */
.post-img-attachment, .comment-image, .msg-image, .comment-body-text img, #blogReaderBody img, .event-detail-cover-wrap img, .project-detail-thumb-wrap img { cursor: zoom-in; }
.image-lightbox { position: fixed; inset: 0; z-index: 3500; display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.92); }
.image-lightbox-bar { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 10px 14px; flex-shrink: 0; }
.image-lightbox-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background 0.15s; }
.image-lightbox-btn:hover { background: rgba(255, 255, 255, 0.2); }
.image-lightbox-btn .material-symbols-outlined { font-size: 22px; }
.image-lightbox-zoom-label { color: #e2e8f0; font-size: 12px; min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.image-lightbox-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.image-lightbox-stage img { max-width: 94vw; max-height: 100%; object-fit: contain; cursor: zoom-in; user-select: none; touch-action: none; transform-origin: center center; }
.image-lightbox.is-zoomed .image-lightbox-stage img { cursor: grab; }
html.theme-light .image-lightbox { background: rgba(26, 10, 20, 0.92); }
html.theme-light .image-lightbox-btn { border-color: rgba(248, 187, 208, 0.5); background: rgba(233, 30, 140, 0.25); }
html.theme-light .image-lightbox-btn:hover { background: rgba(233, 30, 140, 0.45); }

/* ==========================================================================
   40. PINNED POSTS, LINK EMBEDS, COMMENT IMAGES, GROUP OWNER LABEL
   ========================================================================== */
.post-pinned-indicator { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px; padding: 2px 10px 2px 6px; border-radius: 999px; background: rgba(187, 134, 252, 0.14); border: 1px solid var(--accent-purple); color: var(--accent-purple); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.post-pinned-indicator .material-symbols-outlined { font-size: 14px; }
.pin-post-trigger-btn { font-size: 18px !important; color: var(--text-muted); cursor: pointer; margin-right: 8px; transition: color 0.15s, transform 0.15s; }
.pin-post-trigger-btn:hover { color: var(--accent-purple); }
.pin-post-trigger-btn.is-pinned { color: var(--accent-purple); transform: rotate(35deg); }
html.theme-light .post-pinned-indicator { background: rgba(233, 30, 140, 0.1); }
.post-embed-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-top: 12px; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--border-color); }
.post-embed-wrap iframe, .post-embed-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-embed-direct { aspect-ratio: auto; }
.post-embed-direct video { position: static; max-height: 420px; display: block; }
#hiddenCommentImageInput { display: none !important; }
.comment-input-form-row { display: flex; align-items: center; gap: 8px; }
.comment-input-form-row .comment-message-input-field { flex: 1; min-width: 0; }
.comment-attach-btn { width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; border: 1px solid var(--border-color); background: transparent; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.comment-attach-btn .material-symbols-outlined { font-size: 20px; }
.comment-attach-btn:hover { color: var(--accent-purple); border-color: var(--accent-purple); background: var(--bg-card-hover); }
html.theme-light .comment-attach-btn:hover { background: #fff0f5; }
.comment-img-preview-slot { margin: 6px 0; }
.comment-img-preview-slot:empty { display: none; }
.comment-img-preview-inner { position: relative; display: inline-block; }
.comment-img-preview-inner img { max-width: 140px; max-height: 110px; border-radius: 8px; display: block; border: 1px solid var(--border-color); }
.comment-img-clear { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-main); font-size: 14px; line-height: 1; cursor: pointer; padding: 0; }
.comment-img-clear:hover { background: var(--accent-danger); border-color: var(--accent-danger); color: #fff; }
.comment-image { display: block; max-width: 260px; max-height: 260px; margin-top: 8px; border-radius: 10px; border: 1px solid var(--border-color); object-fit: cover; }
.group-member-role { display: inline-block; width: fit-content; font-size: 11px; font-weight: 700; color: var(--accent-purple); text-transform: uppercase; letter-spacing: 0.04em; }


/* ==========================================================================
   41. GROUP BANNER EDITING, MESSENGER GROUP MEMBERS, NAV MESSENGER BADGE
   Dark values are the defaults; every surface has an html.theme-light version.
   ========================================================================== */

/* ── Change-banner button on the group hero ── */
.group-hero-banner-edit-btn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(5, 8, 15, 0.65);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.group-hero-banner-edit-btn .material-symbols-outlined { font-size: 18px; }
.group-hero-banner-edit-btn:hover { background: var(--accent-purple); border-color: var(--accent-purple); }
html.theme-light .group-hero-banner-edit-btn {
  background: rgba(255, 255, 255, 0.88);
  color: var(--text-main);
  border-color: var(--border-color);
}
html.theme-light .group-hero-banner-edit-btn:hover {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: #fff;
}

/* ── Edit Group modal: banner preview ── */
#editGroupModal .modal-box { max-height: 90vh; overflow-y: auto; }
.edit-group-banner-preview {
  width: 100%;
  height: 110px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(187, 134, 252, 0.25));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text-secondary);
}
.edit-group-banner-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.theme-light .edit-group-banner-preview {
  background: linear-gradient(135deg, rgba(2, 136, 209, 0.18), rgba(233, 30, 140, 0.18));
  border-color: var(--border-color);
}

/* ── Messenger: group members button in the chat header ── */
.chat-members-btn {
  margin-left: auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-color);
  color: var(--accent-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.chat-members-btn .material-symbols-outlined { font-size: 20px; }
.chat-members-btn:hover {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: #fff;
  transform: scale(1.06);
}
html.theme-light .chat-members-btn { background: var(--bg-card); border-color: var(--border-color); }

/* ── Messenger: group members modal ── */
.gcm-box { max-width: 480px; max-height: 88vh; overflow-y: auto; }
.gcm-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}
.gcm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-card-hover);
}
html.theme-light .gcm-row { background: var(--bg-card); border-color: var(--border-color); }
.gcm-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
html.theme-light .gcm-avatar { background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue)); }
.gcm-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gcm-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gcm-role {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-purple);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gcm-remove-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.gcm-remove-btn .material-symbols-outlined { font-size: 19px; }
.gcm-remove-btn:hover {
  color: var(--accent-danger);
  background: rgba(248, 81, 73, 0.12);
  border-color: var(--accent-danger);
}
html.theme-light .gcm-remove-btn:hover { background: rgba(229, 57, 53, 0.1); }
.gcm-add-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.gcm-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-purple);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}
.gcm-add-list { max-height: 200px; }
.gcm-add-icon { margin-left: auto; font-size: 20px; color: var(--text-muted); transition: color 0.15s; }
.user-picker-item:hover .gcm-add-icon { color: var(--accent-purple); }
html.theme-light .gcm-add-section { border-top-color: var(--border-color); }

/* ── Nav: Messenger unread badge sits above the link ── */
.nav-links a .nav-text-badge { top: -6px; right: -8px; }
html.theme-light .nav-links a .nav-text-badge { border-color: var(--bg-card); }

/* ==========================================================================
   42. MESSENGER NAV BADGE POLISH, BADGE GUIDE, GROUP MEMBER REMOVAL,
   SHARECOIN ADJUST TOOLS
   Dark values are the defaults; every surface has an html.theme-light version.
   ========================================================================== */

/* ── Messenger nav badge: sits above the link and bumps when a message lands ── */
.nav-links a .nav-text-badge {
  z-index: 2;
  box-shadow: 0 2px 6px rgba(248, 81, 73, 0.45);
}
html.theme-light .nav-links a .nav-text-badge {
  box-shadow: 0 2px 6px rgba(229, 57, 53, 0.4);
}
.nav-text-badge.nav-badge-bump { animation: navBadgeBump 0.5s ease; }
@keyframes navBadgeBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-text-badge.nav-badge-bump { animation: none; }
}

/* ── Number input (global input rule doesn't cover type=number) ── */
.sn-num-input {
  width: 100%;
  background-color: var(--bg-body);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  display: block;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sn-num-input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
html.theme-light .sn-num-input {
  background: #fff0f5;
  border-color: var(--border-color);
  color: var(--text-main);
}

/* ── Members page: directory + Badge Guide sidebar ── */
#page-members .members-section { grid-column: auto; min-width: 0; }
#page-members .members-section .members-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.badge-guide-widget {
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
@media (max-width: 960px) {
  .badge-guide-widget { position: static; max-height: none; }
}
.badge-guide-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text-main);
}
.badge-guide-title .material-symbols-outlined { font-size: 22px; color: var(--accent-purple); }
.badge-guide-intro {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 14px;
}
.badge-guide-list { display: flex; flex-direction: column; gap: 12px; }
.badge-guide-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-card-hover);
}
html.theme-light .badge-guide-item { background: #fff0f5; border-color: var(--border-color); }
.badge-guide-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.badge-guide-edit-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.badge-guide-edit-btn .material-symbols-outlined { font-size: 16px; }
.badge-guide-edit-btn:hover {
  color: var(--accent-purple);
  border-color: var(--accent-purple);
  background: rgba(187, 134, 252, 0.12);
}
html.theme-light .badge-guide-edit-btn:hover { background: rgba(233, 30, 140, 0.1); }
.badge-guide-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.badge-guide-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-muted);
}
.badge-guide-tag .material-symbols-outlined { font-size: 13px; }
.badge-guide-tag-notNeeded { color: var(--text-muted); background: rgba(148, 163, 184, 0.12); }
.badge-guide-tag-keepForever { color: #4ade80; background: rgba(46, 160, 67, 0.14); border-color: #2ea043; }
.badge-guide-tag-firstN { color: var(--accent-purple); background: rgba(187, 134, 252, 0.14); border-color: var(--accent-purple); }
html.theme-light .badge-guide-tag-notNeeded { background: rgba(123, 58, 85, 0.08); }
html.theme-light .badge-guide-tag-keepForever { color: #1b5e20; background: rgba(46, 125, 50, 0.12); border-color: #2e7d32; }
html.theme-light .badge-guide-tag-firstN { background: rgba(233, 30, 140, 0.1); }
.badge-guide-how {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-main);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}
.badge-guide-empty { color: var(--text-muted); font-style: italic; }
.badge-guide-edit-box { max-width: 480px; width: 92%; max-height: 90vh; overflow-y: auto; }
html.theme-light .badge-guide-edit-box { background: var(--bg-card); border-color: var(--border-color); }

/* ── Group member list: remove-member button ── */
.group-member-remove-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.group-member-remove-btn .material-symbols-outlined { font-size: 18px; }
.group-member-remove-btn:hover:not(:disabled) {
  color: var(--accent-danger);
  border-color: var(--accent-danger);
  background: rgba(248, 81, 73, 0.12);
}
.group-member-remove-btn:disabled { opacity: 0.55; cursor: not-allowed; }
html.theme-light .group-member-remove-btn { border-color: var(--border-color); color: var(--text-muted); }
html.theme-light .group-member-remove-btn:hover:not(:disabled) {
  color: var(--accent-danger);
  border-color: var(--accent-danger);
  background: rgba(229, 57, 53, 0.1);
}

/* ── Member actions popup: ShareCoins give / revoke ── */
.sc-adjust-balance { font-size: 13px; color: var(--text-muted); margin: 0 0 10px; }
.sc-adjust-balance strong { color: #facc15; }
html.theme-light .sc-adjust-balance strong { color: #b45309; }
.sc-adjust-fields { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.sc-adjust-actions { display: flex; gap: 8px; }
.sc-adjust-actions .action-btn,
.sc-adjust-actions .delete-btn { flex: 1; margin-top: 0; width: auto; }
.sc-adjust-actions button:disabled { opacity: 0.55; cursor: not-allowed; }


/* ==========================================================================
   43. PROJECT PLAYER — "HAVING TROUBLE LOADING?" PANEL
   Dark values are the defaults; every surface has an html.theme-light version.
   ========================================================================== */
.project-player-overlay { position: fixed; }
.project-player-help-btn { position: relative; }
.project-player-help-btn .project-feedback-count-bubble { position: absolute; top: -2px; right: -2px; margin-left: 0; }

.project-player-help-panel {
  position: absolute;
  top: 56px;
  right: 14px;
  z-index: 5;
  width: 360px;
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 16px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  color: var(--text-main);
}
.player-help-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 15px; }
.player-help-close { background: none; border: none; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.player-help-close:hover { color: var(--text-main); }
.player-help-list h4, .player-help-tips h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-purple); margin: 10px 0 6px; }
.player-help-empty { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.player-help-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; margin-bottom: 6px; border-radius: 8px; background: var(--bg-card-hover); border: 1px solid var(--border-color); font-size: 12.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.player-help-item strong { color: var(--text-main); font-size: 13px; }
.player-help-item-blocked { border-color: var(--accent-danger); }
.player-help-tips ul { margin: 0 0 12px; padding-left: 18px; list-style: disc; font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }
.player-help-tips li { margin-bottom: 6px; }
.player-help-reload { width: 100%; }

html.theme-light .project-player-help-panel { background: var(--bg-card); border-color: var(--border-color); box-shadow: 0 14px 40px rgba(233, 30, 140, 0.22); }
html.theme-light .player-help-item { background: #fff0f5; border-color: var(--border-color); }
html.theme-light .player-help-item-blocked { border-color: var(--accent-danger); }
html.theme-light .player-help-close:hover { color: var(--text-main); }


/* ==========================================================================
   44. PROJECT CENTER — PROXY TEST MODE (consent modal + status)
   Dark values are the defaults; every colored surface has an html.theme-light version.
   ========================================================================== */

.proxy-consent-box { max-width: 520px; width: 94%; max-height: 90vh; overflow-y: auto; }
.proxy-consent-intro { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin-bottom: 14px; }
.proxy-consent-intro strong { color: var(--text-main); }

.proxy-consent-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.proxy-consent-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card-hover);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.proxy-consent-list li .material-symbols-outlined { font-size: 20px; color: var(--accent-purple); flex-shrink: 0; }
.proxy-consent-list li strong { color: var(--text-main); }

.proxy-consent-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-purple);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-main);
}
.proxy-consent-check input { width: auto; margin-top: 2px; accent-color: var(--accent-purple); flex-shrink: 0; }

.proxy-consent-status {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  white-space: pre-wrap;
}
.proxy-consent-status.ok { color: #4ade80; background: rgba(46, 160, 67, 0.12); border-color: #2ea043; }
.proxy-consent-status.warn { color: #fbbf24; background: rgba(251, 191, 36, 0.1); border-color: #f5a524; }
.proxy-consent-status.err { color: #f87171; background: rgba(248, 81, 73, 0.1); border-color: var(--accent-danger); }
.proxy-consent-status code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(148, 163, 184, 0.18);
  color: var(--text-main);
}

.proxy-consent-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.proxy-consent-actions .submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Light mode overrides ── */
html.theme-light .proxy-consent-box { background: var(--bg-card); border-color: var(--border-color); }
html.theme-light .proxy-consent-list li { background: #fff0f5; border-color: var(--border-color); }
html.theme-light .proxy-consent-check { border-color: var(--border-color); border-left-color: var(--accent-purple); }
html.theme-light .proxy-consent-status.ok { color: #1b5e20; background: rgba(46, 125, 50, 0.12); border-color: #2e7d32; }
html.theme-light .proxy-consent-status.warn { color: #b45309; background: rgba(180, 83, 9, 0.1); border-color: #b45309; }
html.theme-light .proxy-consent-status.err { color: #c62828; background: rgba(229, 57, 53, 0.1); border-color: var(--accent-danger); }
html.theme-light .proxy-consent-status code { background: rgba(233, 30, 140, 0.1); color: #ad1457; }

/* ==========================================================================
   45. PROXY TEST MODE - ONE-CLICK SETUP FILE
   Dark values are the defaults; every surface has an html.theme-light version.
   ========================================================================== */
.proxy-consent-actions .secondary-btn-style:disabled { opacity: 0.5; cursor: not-allowed; }
.proxy-setup-help {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-blue);
  border-radius: 10px;
  background: var(--bg-card-hover);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}
.proxy-setup-help strong { color: var(--text-main); }
.proxy-setup-help code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
.proxy-setup-cmd-row { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.proxy-setup-cmd {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: rgba(148, 163, 184, 0.18);
  color: var(--text-main);
  font-size: 12.5px;
}
.proxy-setup-copy { padding: 7px 12px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
.proxy-setup-note { display: block; font-size: 12px; color: var(--text-secondary); }

html.theme-light .proxy-setup-help { background: #fff0f5; border-color: var(--border-color); border-left-color: var(--accent-purple); }
html.theme-light .proxy-setup-cmd { background: rgba(233, 30, 140, 0.08); border-color: var(--border-color); color: #ad1457; }
html.theme-light .proxy-setup-note { color: var(--text-muted); }

/* ==========================================================================
   46. PROJECT PLAYER - "TEST IN PROXY" BUTTON + PROJECT LABEL
   Dark values are the defaults; every colored surface has an html.theme-light version.
   (The button reuses .project-player-close-btn, which already has both themes.)
   ========================================================================== */
.project-player-proxy-btn { gap: 6px; padding: 6px 10px; font-size: 13px; font-weight: 600; }
.project-player-proxy-btn .material-symbols-outlined { font-size: 20px; }
@media (max-width: 560px) { .project-player-proxy-label { display: none; } }

.proxy-consent-project {
  display: inline-block;
  max-width: 100%;
  margin: -8px 0 12px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--accent-purple);
  background: rgba(187, 134, 252, 0.12);
  color: var(--accent-purple);
  font-size: 12.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.theme-light .proxy-consent-project { background: rgba(233, 30, 140, 0.1); color: var(--accent-purple); border-color: var(--accent-purple); }


/* ==========================================================================
   47. GROUP LABELS ON POSTS, GROUP RELATIONS (PARTNER / RIVAL / FACTION),
       GROUP ROLES & PERMISSIONS
   Dark values are the defaults; every colored surface has an html.theme-light version.
   ========================================================================== */

/* ── "Posted in <group>" label on every post card ── */
.post-group-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin-top: 4px;
  padding: 2px 10px 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent-blue);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  font-family: inherit;
}
.post-group-chip .material-symbols-outlined { font-size: 14px; }
.post-group-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.post-group-chip.is-link { cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.post-group-chip.is-link:hover { background: rgba(187, 134, 252, 0.18); border-color: var(--accent-purple); color: var(--accent-purple); }
.post-group-chip-main { background: rgba(148, 163, 184, 0.12); color: var(--text-muted); }
html.theme-light .post-group-chip { background: rgba(2, 136, 209, 0.1); border-color: var(--border-color); color: var(--accent-blue); }
html.theme-light .post-group-chip.is-link:hover { background: rgba(233, 30, 140, 0.1); color: var(--accent-purple); }
html.theme-light .post-group-chip-main { background: rgba(123, 58, 85, 0.08); color: var(--text-muted); }

/* ── Group role pill (color comes from --role-color on the element) ── */
.group-role-pill {
  --role-color: #a855f7;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--role-color);
  background: color-mix(in srgb, var(--role-color) 18%, transparent);
  color: var(--role-color);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.group-role-pill-partner { --role-color: #2ea043; }
html.theme-light .group-role-pill { background: color-mix(in srgb, var(--role-color) 14%, #ffffff); }

/* ── Assign-role button on a member row ── */
.group-member-role-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.group-member-role-btn .material-symbols-outlined { font-size: 18px; }
.group-member-role-btn:hover { color: var(--accent-purple); border-color: var(--accent-purple); background: rgba(187, 134, 252, 0.12); }
html.theme-light .group-member-role-btn { border-color: var(--border-color); color: var(--text-muted); }
html.theme-light .group-member-role-btn:hover { background: rgba(233, 30, 140, 0.1); }

/* ── "Your role / Partner access / Restricted" pill in the group hero ── */
.group-access-pill {
  --role-color: var(--accent-purple);
  display: none;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 3px 12px 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--accent-purple);
  background: rgba(187, 134, 252, 0.12);
  color: var(--accent-purple);
  font-size: 12px;
  font-weight: 700;
}
.group-access-pill .material-symbols-outlined { font-size: 16px; }
.group-access-pill.is-role { border-color: var(--role-color); color: var(--role-color); background: color-mix(in srgb, var(--role-color) 14%, transparent); }
.group-access-pill.is-partner { border-color: var(--accent-success); color: var(--accent-success); background: rgba(46, 160, 67, 0.12); }
.group-access-pill.is-blocked { border-color: var(--accent-danger); color: var(--accent-danger); background: rgba(248, 81, 73, 0.12); }
html.theme-light .group-access-pill { background: rgba(233, 30, 140, 0.08); }
html.theme-light .group-access-pill.is-role { background: color-mix(in srgb, var(--role-color) 12%, #ffffff); }
html.theme-light .group-access-pill.is-partner { background: rgba(46, 125, 50, 0.1); }
html.theme-light .group-access-pill.is-blocked { background: rgba(229, 57, 53, 0.1); }

/* ── Group Relations bar (sidebar, under the Groups bar) ── */
.group-relations-widget { display: block; }
.relation-section { margin-top: 14px; }
.relation-section:first-child { margin-top: 0; }
.relation-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.relation-section-title .material-symbols-outlined { font-size: 16px; }
.relation-card,
.relation-row,
.relation-request {
  padding: 9px 12px;
  margin-bottom: 6px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-body);
  font-size: 13px;
  color: var(--text-main);
}
.relation-faction { border-color: var(--accent-purple); background: rgba(187, 134, 252, 0.1); }
.relation-card-label { margin-bottom: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-purple); }
.relation-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.relation-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.relation-partner { border-left: 3px solid var(--accent-success); }
.relation-rival { border-left: 3px solid var(--accent-danger); }
.relation-row-icon { font-size: 18px !important; color: var(--accent-success); }
.relation-rival .relation-row-icon { color: var(--accent-danger); }
.relation-group-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--accent-blue);
  cursor: pointer;
  text-align: left;
}
.relation-group-link:hover { color: var(--accent-purple); text-decoration: underline; }
.relation-group-link.is-current { color: var(--accent-purple); }
.relation-request { border-color: var(--accent-blue); }
.relation-request-actions { display: flex; gap: 6px; margin-top: 8px; }
.relation-empty { font-size: 13px; color: var(--text-muted); line-height: 1.5; padding: 6px 0; }

.relation-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-main);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.relation-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.relation-btn-accept { border-color: var(--accent-success); color: var(--accent-success); }
.relation-btn-accept:hover:not(:disabled) { background: var(--accent-success); color: #fff; }
.relation-btn-decline,
.relation-btn-danger { border-color: var(--accent-danger); color: var(--accent-danger); }
.relation-btn-decline:hover:not(:disabled),
.relation-btn-danger:hover:not(:disabled) { background: var(--accent-danger); color: #fff; }
.relation-btn-neutral:hover:not(:disabled) { border-color: var(--accent-purple); color: var(--accent-purple); }

html.theme-light .relation-card,
html.theme-light .relation-row,
html.theme-light .relation-request { background: #fff0f5; border-color: var(--border-color); color: var(--text-main); }
html.theme-light .relation-faction { background: rgba(233, 30, 140, 0.08); border-color: var(--accent-purple); }
html.theme-light .relation-request { border-color: var(--accent-blue); }
html.theme-light .relation-btn { border-color: var(--border-color); color: var(--text-main); }
html.theme-light .relation-btn-accept { border-color: var(--accent-success); color: var(--accent-success); }
html.theme-light .relation-btn-decline,
html.theme-light .relation-btn-danger { border-color: var(--accent-danger); color: var(--accent-danger); }
html.theme-light .relation-btn-accept:hover:not(:disabled),
html.theme-light .relation-btn-decline:hover:not(:disabled),
html.theme-light .relation-btn-danger:hover:not(:disabled) { color: #fff; }

/* ── Group Relations manager modal ── */
.group-relations-box { max-width: 640px; width: 94%; max-height: 90vh; overflow-y: auto; }
.relation-modal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-card-hover);
}
.relation-modal-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 200px; }
.relation-modal-info strong { font-size: 14px; color: var(--text-main); overflow-wrap: anywhere; }
.relation-modal-info small { font-size: 12px; color: var(--text-muted); }
.relation-modal-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.relation-status-line { display: flex; gap: 6px; flex-wrap: wrap; }
.relation-status { width: fit-content; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid var(--border-color); color: var(--text-muted); }
.relation-status:empty { display: none; }
.relation-status-partner { border-color: var(--accent-success); color: var(--accent-success); background: rgba(46, 160, 67, 0.12); }
.relation-status-sent { border-color: var(--accent-blue); color: var(--accent-blue); background: rgba(59, 130, 246, 0.12); }
.relation-status-received { border-color: var(--accent-purple); color: var(--accent-purple); background: rgba(187, 134, 252, 0.14); }
.relation-status-rival { border-color: var(--accent-danger); color: var(--accent-danger); background: rgba(248, 81, 73, 0.12); }
html.theme-light .relation-modal-row { background: #fff0f5; border-color: var(--border-color); }
html.theme-light .relation-status-partner { background: rgba(46, 125, 50, 0.1); }
html.theme-light .relation-status-sent { background: rgba(2, 136, 209, 0.1); }
html.theme-light .relation-status-received { background: rgba(233, 30, 140, 0.1); }
html.theme-light .relation-status-rival { background: rgba(229, 57, 53, 0.1); }

/* ── Group Roles & Permissions modals ── */
.group-roles-box { max-width: 640px; width: 94%; max-height: 90vh; overflow-y: auto; }
.group-role-editor-box { max-width: 520px; width: 94%; max-height: 90vh; overflow-y: auto; }
.group-roles-section-title { margin: 18px 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.group-role-row,
.group-role-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 8px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-card-hover);
}
.group-role-row-partner { border-style: dashed; }
.group-role-row-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 200px; }
.group-role-row-info small,
.group-role-member-note { font-size: 12px; color: var(--text-muted); }
.group-role-member-name { font-size: 14px; font-weight: 600; color: var(--text-main); overflow-wrap: anywhere; }
.group-role-member.is-focus { border-color: var(--accent-purple); box-shadow: 0 0 0 2px rgba(187, 134, 252, 0.3); }
.group-role-select { max-width: 240px; padding: 7px 10px; border-radius: 8px; font-size: 13px; }
.group-role-color-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.group-role-color { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.group-role-color.active { border-color: var(--text-main); box-shadow: 0 0 0 2px var(--bg-card); }
.role-permission-check.is-locked { opacity: 0.55; }
.group-role-editor-hint { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; }
html.theme-light .group-role-row,
html.theme-light .group-role-member { background: #fff0f5; border-color: var(--border-color); }
html.theme-light .group-role-member.is-focus { box-shadow: 0 0 0 2px rgba(233, 30, 140, 0.25); }
html.theme-light .group-role-color.active { border-color: var(--text-main); box-shadow: 0 0 0 2px #ffffff; }


/* ==========================================================================
   48. MEMBER FEEDBACK UPDATE - messenger replies
   ========================================================================== */
.msg-row { align-items: center; gap: 6px; }
.msg-reply-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border-color); background: var(--bg-card);
  color: var(--text-muted); cursor: pointer; opacity: 0; flex-shrink: 0;
  transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}
.msg-reply-btn .material-symbols-outlined { font-size: 16px; }
.msg-row:hover .msg-reply-btn, .msg-reply-btn:focus-visible { opacity: 1; }
.msg-reply-btn:hover { color: var(--accent-purple); border-color: var(--accent-purple); }
.msg-row-mine .msg-reply-btn { order: -1; }
@media (hover: none) { .msg-reply-btn { opacity: .7; } }
.msg-reply-quote {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px;
  padding: 5px 9px; border-left: 3px solid var(--accent-purple);
  border-radius: 6px; background: rgba(0, 0, 0, .22); cursor: pointer;
  font-size: 12px; line-height: 1.35; max-width: 100%;
}
.msg-reply-quote strong { font-size: 12px; }
.msg-reply-quote span {
  opacity: .85; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.msg-bubble-theirs .msg-reply-quote { background: rgba(255, 255, 255, .06); }
html.theme-light .msg-bubble-theirs .msg-reply-quote { background: rgba(0, 0, 0, .06); }
.msg-row-flash .msg-bubble { animation: msgFlash 1.4s ease; }
@keyframes msgFlash { 0%, 60% { box-shadow: 0 0 0 3px var(--accent-purple); } 100% { box-shadow: 0 0 0 0 transparent; } }
.msg-reply-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  border-top: 1px solid var(--border-color); background: var(--bg-card);
  border-left: 3px solid var(--accent-purple);
}
html.theme-light .msg-reply-bar { background: var(--bg-card-hover); }
.msg-reply-bar-icon { color: var(--accent-purple); font-size: 20px; }
.msg-reply-bar-text { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 12px; color: var(--text-muted); }
.msg-reply-bar-text strong { color: var(--text-main); font-size: 12px; }
.msg-reply-bar-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-reply-bar-close { background: none; border: none; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.msg-reply-bar-close:hover { color: var(--text-main); }

/* --- project review replies + rating hint --- */
.project-rating-hint { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }
.project-rating-btn.pending { outline: 2px dashed var(--accent-purple); outline-offset: 2px; }
.project-review-replies { margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--border-color); display: flex; flex-direction: column; gap: 10px; }
.project-review-reply { background: rgba(255, 255, 255, .03); border-radius: 8px; padding: 8px 10px; }
html.theme-light .project-review-reply { background: rgba(0, 0, 0, .04); }
.project-review-reply-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.project-review-dev-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 999px; background: var(--accent-purple); color: #121212; }
html.theme-light .project-review-dev-tag { color: #fff; }
.project-review-reply-toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 2px 0; color: var(--text-muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.project-review-reply-toggle .material-symbols-outlined { font-size: 16px; }
.project-review-reply-toggle:hover { color: var(--accent-purple); }
.project-review-reply-form { flex-direction: column; gap: 8px; }
.project-review-reply-form textarea { width: 100%; resize: vertical; }
.project-review-reply-form .submit-btn { align-self: flex-end; margin: 0; padding: 7px 16px; font-size: 13px; width: auto; }

/* --- badge ordering on profile --- */
.profile-badges-grid { flex-wrap: wrap; }
.profile-badge-order-hint { width: 100%; margin: 0 0 6px; font-size: 12px; color: var(--text-muted); }
.profile-badge-card { position: relative; gap: 6px; }
.profile-badge-card.is-reorderable { padding: 6px 8px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card); }
html.theme-light .profile-badge-card.is-reorderable { background: var(--bg-card-hover); }
.profile-badge-primary-tag { position: absolute; top: -9px; left: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; background: var(--accent-purple); color: #121212; }
html.theme-light .profile-badge-primary-tag { color: #fff; }
.profile-badge-order-btns { display: inline-flex; gap: 2px; margin-left: 4px; }
.profile-badge-order-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid var(--border-color); background: transparent; color: var(--text-muted); cursor: pointer; }
.profile-badge-order-btn .material-symbols-outlined { font-size: 18px; }
.profile-badge-order-btn:hover:not(:disabled) { color: var(--accent-purple); border-color: var(--accent-purple); }
.profile-badge-order-btn:disabled { opacity: .3; cursor: default; }

/* --- members search --- */
.members-search-row { max-width: 600px; margin: 0 auto 24px auto; }
.members-search-row input { width: 100%; box-sizing: border-box; }

/* --- store wishlist --- */
.store-card-preview { position: relative; }
.store-wish-btn {
  position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--border-color);
  background: rgba(0, 0, 0, .35); color: var(--text-muted); cursor: pointer;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
html.theme-light .store-wish-btn { background: rgba(255, 255, 255, .75); }
.store-wish-btn .material-symbols-outlined { font-size: 18px; }
.store-wish-btn:hover { color: #ff5d8f; border-color: #ff5d8f; transform: scale(1.08); }
.store-wish-btn.is-wished { color: #ff5d8f; border-color: #ff5d8f; }
.store-wish-btn.is-wished .material-symbols-outlined { font-variation-settings: 'FILL' 1; }

/* ==========================================================================
   49. PROJECT CENTER - Save Data & Multiplayer guide card
   ========================================================================== */
.project-ai-title { display: flex; align-items: center; gap: 8px; }
.project-ai-title .material-symbols-outlined { color: var(--accent-purple); font-size: 22px; }
.project-ai-intro { color: var(--text-muted); font-size: 13px; line-height: 1.6; margin: 0 0 10px; }
.project-ai-facts { margin: 0 0 14px; padding-left: 18px; color: var(--text-muted); font-size: 12.5px; line-height: 1.55; display: flex; flex-direction: column; gap: 6px; }
.project-ai-facts strong { color: var(--text-main); }
.project-ai-facts code, .project-ai-intro code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px;
  padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, .07); color: var(--accent-purple);
}
html.theme-light .project-ai-facts code { background: rgba(0, 0, 0, .06); }
.project-ai-list { display: flex; flex-direction: column; gap: 8px; }
.project-ai-item { border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card); overflow: hidden; }
html.theme-light .project-ai-item { background: var(--bg-card-hover); }
.project-ai-item > summary {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer;
  font-weight: 600; font-size: 14px; color: var(--text-main); list-style: none;
}
.project-ai-item > summary::-webkit-details-marker { display: none; }
.project-ai-item > summary .material-symbols-outlined { font-size: 20px; color: var(--accent-purple); }
.project-ai-item > summary::after { content: "expand_more"; font-family: "Material Symbols Outlined"; margin-left: auto; color: var(--text-muted); transition: transform .15s ease; }
.project-ai-item[open] > summary::after { transform: rotate(180deg); }
.project-ai-item-blurb { margin: 0; padding: 0 12px 8px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.project-ai-prompt {
  margin: 0 12px 10px; padding: 10px; max-height: 190px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.5;
  border: 1px solid var(--border-color); border-radius: 8px; background: rgba(0, 0, 0, .28); color: var(--text-main);
}
html.theme-light .project-ai-prompt { background: #fff; }
.project-ai-copy-btn { display: inline-flex; align-items: center; gap: 6px; margin: 0 12px 12px; padding: 7px 14px; font-size: 13px; }
.project-ai-copy-btn .material-symbols-outlined { font-size: 16px; }

/* --- group chip now sits in the top-right of the post header --- */
.header-actions-wrap { gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.header-actions-wrap .post-group-chip { margin-top: 0; max-width: 200px; flex-shrink: 1; }
.header-actions-wrap .post-group-chip-name { max-width: 150px; }
@media (max-width: 600px) {
  .header-actions-wrap .post-group-chip { max-width: 130px; }
  .header-actions-wrap .post-group-chip-name { max-width: 80px; }
}

/* ==========================================================================
   50. PROJECT CENTER - language picker, language pill
   ========================================================================== */
.project-language-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.project-format-tab:disabled { opacity: 0.4; cursor: not-allowed; }
.project-language-pill {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; border: 1px solid var(--border-color);
  background: rgba(52, 211, 153, 0.12); color: #34d399;
}
.project-language-pill .material-symbols-outlined { font-size: 13px; }
html.theme-light .project-language-pill { background: rgba(46, 125, 50, 0.1); color: #2e7d32; }

/* ==========================================================================
   51. STORE - "saved on this device" notice
   ========================================================================== */
.store-pending-notice { align-items: center; gap: 10px; border-color: var(--accent-purple); background: rgba(187, 134, 252, 0.1); }
.store-pending-notice > .material-symbols-outlined { color: var(--accent-purple); font-size: 22px; flex-shrink: 0; }
.store-pending-notice > span:not(.material-symbols-outlined) { flex: 1; font-size: 13px; line-height: 1.5; color: var(--text-main); }
html.theme-light .store-pending-notice { background: rgba(233, 30, 140, 0.08); }

/* ==========================================================================
   ECONOMY: cosmetics, store tabs, promotions, spotlights, Control Terminal
   (economy.js). Dark is the default; every block that uses a fixed colour has
   an html.theme-light version. Most of it reads the theme variables, so the
   custom theme editor works with it too.
   The per-item rules (.sn-fr-gold, .sn-bn-polka, ...) are generated: each has a
   dark rule and an html.theme-light rule; they are at the end of this section.
   ========================================================================== */

@keyframes snFrPulse {
  0%, 100% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) var(--fr-a, #fbbf24), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px) * 2) var(--fr-b, transparent), 0 0 5px var(--fr-a, #fbbf24); }
  50% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) var(--fr-a, #fbbf24), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px) * 2) var(--fr-b, transparent), 0 0 20px var(--fr-a, #fbbf24); }
}
@keyframes snFrCycle {
  0%, 100% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) var(--fr-c1), 0 0 10px var(--fr-c1); }
  33% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) var(--fr-c2), 0 0 10px var(--fr-c2); }
  66% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) var(--fr-c3), 0 0 10px var(--fr-c3); }
}
@keyframes snFrRainbow {
  0%, 100% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) #ef4444, 0 0 8px #ef4444; }
  17% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) #f59e0b, 0 0 8px #f59e0b; }
  34% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) #22c55e, 0 0 8px #22c55e; }
  50% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) #06b6d4, 0 0 8px #06b6d4; }
  67% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) #3b82f6, 0 0 8px #3b82f6; }
  84% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) #a855f7, 0 0 8px #a855f7; }
}
@keyframes snBnShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes snBnRain { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 0 100%; } }
@keyframes snBnSnow { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 46px 92px, -29px 58px, 0 0; } }
@keyframes snFxShimmer { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes snFxGlow { 0%, 100% { text-shadow: 0 0 3px var(--fx-glow); } 50% { text-shadow: 0 0 14px var(--fx-glow), 0 0 4px var(--fx-glow); } }
@keyframes snFxGlitch {
  0%, 90%, 100% { text-shadow: none; transform: none; }
  92% { text-shadow: 2px 0 var(--fx-g1), -2px 0 var(--fx-g2); }
  95% { text-shadow: -2px 0 var(--fx-g1), 2px 0 var(--fx-g2); }
  97% { text-shadow: 1px 1px var(--fx-g1), -1px -1px var(--fx-g2); }
}
@keyframes snBoost { 0%, 100% { box-shadow: 0 0 0 1px var(--eco-glow-a), 0 0 14px var(--eco-glow-b); } 50% { box-shadow: 0 0 0 1px var(--eco-glow-a), 0 0 30px var(--eco-glow-b); } }
@keyframes snGbSweep { from { background-position: 0 0; } to { background-position: 200% 0; } }

/* ── Avatar frames ────────────────────────────────────────────────────────── */
html .sn-fr.sn-fr {
  box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card),
              0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) var(--fr-a, #fbbf24),
              0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px) * 2) var(--fr-b, transparent),
              0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px) * 3) var(--fr-c, transparent),
              var(--fr-glow, 0 0 0 transparent),
              var(--fr-in, 0 0 0 transparent);
  outline: var(--fr-ow, 0) var(--fr-os, solid) var(--fr-oc, transparent);
  outline-offset: var(--fr-oo, 0px);
}
.sn-fr { position: relative; }

/* ── Profile banners (the strip across the top of a profile) ──────────────── */
.profile-header-card.sn-bn::before {
  background: none;
  background-image: var(--bn-img);
  background-size: var(--bn-size, auto);
  animation: var(--bn-anim, none);
  filter: var(--bn-filter, none);
  background-position: var(--bn-pos, 0 0);
}

/* ── Name effects (they stack with the equipped name style) ───────────────── */
.sn-fxk-sh {
  background-image: linear-gradient(110deg, var(--fx-a) 25%, var(--fx-b) 45%, var(--fx-a) 65%) !important;
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
  animation: snFxShimmer 3.2s linear infinite;
}
.sn-fxk-ic::before {
  content: var(--fx-ic);
  display: inline-block; margin-right: .28em;
  background: none; -webkit-text-fill-color: initial; text-shadow: none; animation: none;
}
.sn-fxk-ft { font-family: var(--fx-font, inherit); }
.sn-fxk-gl { animation: snFxGlow 2s ease-in-out infinite; }
.sn-fxk-gx { animation: snFxGlitch 2.6s steps(1) infinite; display: inline-block; }

/* ── Post + comment flair ─────────────────────────────────────────────────── */
.post-card.sn-fl, .comment-item.sn-fl { position: relative; }
.post-card.sn-fl {
  box-shadow: inset var(--fl-bw, 4px) 0 0 var(--fl-c), var(--fl-glow, 0 0 0 transparent), 0 4px 12px rgba(0, 0, 0, 0.18);
  background-image: var(--fl-wash, none);
  animation: var(--fl-cardanim, none);
}
.comment-item.sn-fl { box-shadow: inset calc(var(--fl-bw, 4px) - 1px) 0 0 var(--fl-c), var(--fl-glow, 0 0 0 transparent); background-image: var(--fl-wash, none); }
.post-card.sn-fl::before, .comment-item.sn-fl::before {
  content: var(--fl-tag);
  position: absolute; top: -9px; left: 16px; z-index: 1;
  padding: 1px 9px; border-radius: var(--fl-tagr, 999px);
  background: var(--fl-tagbg, var(--fl-c)); background-size: var(--fl-tagsz, auto);
  color: var(--fl-tagfg, #fff); border: 1px solid var(--fl-tagbd, transparent);
  text-transform: var(--fl-tagtt, none);
  font-size: 11px; font-weight: 700; letter-spacing: var(--fl-tagls, .02em); line-height: 1.5;
  animation: var(--fl-anim, none);
}
.post-card.sn-fl::after, .comment-item.sn-fl::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--fl-bw, 4px);
  border-radius: 12px 0 0 12px; pointer-events: none;
  background: var(--fl-edge-bg, transparent); background-size: var(--fl-edgesz, auto);
  animation: var(--fl-edgeanim, none);
}
html.theme-light .post-card.sn-fl { box-shadow: inset var(--fl-bw, 4px) 0 0 var(--fl-c), var(--fl-glow, 0 0 0 transparent), 0 4px 12px rgba(233, 30, 140, 0.1); }

/* ── Message bubbles ──────────────────────────────────────────────────────── */
.msg-bubble.sn-bb {
  background: var(--bb-bg) !important; background-size: var(--bb-size, auto) !important; background-origin: border-box !important;
  color: var(--bb-fg) !important;
  border: var(--bb-bw, 1px) var(--bb-bs, solid) var(--bb-bd) !important;
  box-shadow: var(--bb-sh, none);
  animation: var(--bb-anim, none);
}
.msg-bubble.sn-bb .msg-time { color: inherit; opacity: .7; }

/* ── Profile themes ───────────────────────────────────────────────────────── */
.sn-pt .profile-header-card, .sn-pt .profile-about-section, .sn-pt .profile-groups-section,
.sn-pt .profile-badges-section, .sn-pt .profile-join-strip {
  border-color: var(--pt-a) !important;
  border-width: var(--pt-bw, 1px);
  border-style: var(--pt-bs, solid);
  border-radius: var(--pt-r);
  box-shadow: var(--pt-sh);
  background-image: var(--pt-img, none), linear-gradient(var(--pt-bg), var(--pt-bg));
  background-size: var(--pt-size, auto);
  font-family: var(--pt-ff, inherit);
  animation: var(--pt-anim, none);
}
.sn-pt .profile-stat-num, .sn-pt .profile-section-header h3, .sn-pt .profile-groups-section h3,
.sn-pt .profile-badges-section h3, .sn-pt .profile-username { color: var(--pt-a); }
.sn-pt .profile-follow-btn { background: var(--pt-a); border-color: var(--pt-a); }

/* ── Group perks ──────────────────────────────────────────────────────────── */
.eco-verified::after {
  content: "\2714"; display: inline-flex; align-items: center; justify-content: center;
  width: 1.15em; height: 1.15em; margin-left: .35em; border-radius: 50%;
  background: var(--accent-blue); color: #fff; font-size: .7em; font-weight: 700; vertical-align: middle;
  -webkit-text-fill-color: #fff;
}
#groupHeroBanner.sn-gb { box-shadow: 0 0 0 3px var(--gb-a), 0 0 26px var(--gb-b); border-radius: 14px; position: relative; }
#groupHeroBanner.sn-gb::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; pointer-events: none;
  background: linear-gradient(90deg, var(--gb-a), var(--gb-b), var(--gb-a)); background-size: 200% 100%;
  animation: snGbSweep 4s linear infinite;
}

/* ── Boosted / pinned posts, spotlighted events ───────────────────────────── */
:root { --eco-glow-a: rgba(187, 134, 252, .8); --eco-glow-b: rgba(187, 134, 252, .4); }
html.theme-light { --eco-glow-a: rgba(233, 30, 140, .75); --eco-glow-b: rgba(233, 30, 140, .3); }
.post-card.eco-boosted { animation: snBoost 3s ease-in-out infinite; }
.post-card.eco-boosted.sn-fl { animation: none; box-shadow: inset 4px 0 0 var(--fl-c), 0 0 0 1px var(--eco-glow-a), 0 0 22px var(--eco-glow-b); }
.eco-pin-label {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px;
  font-size: 12px; font-weight: 700; color: var(--accent-purple);
}
.eco-pin-label .material-symbols-outlined { font-size: 16px; }
.eco-spot { border-color: var(--accent-purple) !important; box-shadow: 0 0 0 1px var(--accent-purple), 0 0 18px var(--eco-glow-b); }

.eco-chip {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 2px 9px 2px 6px;
  border: 1px solid var(--border-color); border-radius: 999px; background: transparent;
  color: var(--text-muted); font-size: 11px; font-weight: 600; cursor: pointer; vertical-align: middle;
  transition: border-color .15s, color .15s;
}
.eco-chip .material-symbols-outlined { font-size: 14px; }
.eco-chip:hover { border-color: var(--accent-purple); color: var(--accent-purple); }
.eco-chip-lg { margin: 0; padding: 7px 14px 7px 10px; font-size: 13px; }
.eco-inline-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.eco-inline-row .eco-chip { margin-left: 0; padding: 6px 12px 6px 8px; font-size: 12px; }

/* ── Spotlight strips ─────────────────────────────────────────────────────── */
.eco-strip { margin-bottom: 22px; }
.eco-strip-title { font-size: 15px; margin-bottom: 10px; color: var(--text-main); }
.eco-strip-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.eco-spot-card {
  display: flex; gap: 12px; align-items: center; padding: 10px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--accent-purple); border-radius: 12px;
  box-shadow: 0 0 16px var(--eco-glow-b); transition: transform .15s;
}
.eco-spot-card:hover { transform: translateY(-2px); }
.eco-spot-img { width: 64px; height: 64px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--bg-body); display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.eco-spot-img img { width: 100%; height: 100%; object-fit: cover; }
.eco-spot-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.eco-spot-body b { color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Store tabs + cards ───────────────────────────────────────────────────── */
.eco-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.eco-tab {
  padding: 7px 15px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main);
  transition: background .15s, border-color .15s;
}
.eco-tab:hover { border-color: var(--accent-purple); }
.eco-tab.active { background: var(--accent-purple); border-color: var(--accent-purple); color: var(--bg-body); }
.eco-panel { display: none; }
.eco-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.eco-h { font-size: 22px; font-weight: 700; margin: 0 0 4px; color: var(--text-main); }
.eco-h3 { font-size: 16px; margin: 0 0 6px; color: var(--text-main); }
.eco-h4 { font-size: 13px; margin: 14px 0 6px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.eco-sub, .eco-muted { color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.eco-bal { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; padding: 8px 14px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--accent-purple); white-space: nowrap; }
.eco-empty { color: var(--text-muted); text-align: center; padding: 28px 12px; }
.eco-p { margin: 0 0 12px; line-height: 1.55; color: var(--text-main); }
.eco-bad { color: var(--accent-danger); font-weight: 600; }
.eco-sect { margin: 0 0 24px; }
.eco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.eco-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; transition: border-color .15s, transform .15s; }
.eco-card:hover { border-color: var(--accent-purple); }
.eco-card.is-owned { border-color: var(--accent-green); }
.eco-card.is-retired { opacity: .7; }
.eco-card-wide { flex-direction: row; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.eco-card-wide .eco-pv { flex: 0 0 150px; }
.eco-card-wide .eco-card-body { flex: 1 1 200px; }
.eco-card-name { font-weight: 700; color: var(--text-main); }
.eco-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: auto; }
.eco-owned { font-size: 12px; color: var(--accent-green); font-weight: 600; }
.eco-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.eco-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--bg-body); border: 1px solid var(--border-color); color: var(--text-muted); }
.eco-tag-drop { color: var(--accent-purple); border-color: var(--accent-purple); }
.eco-tag-retired { color: var(--accent-danger); border-color: var(--accent-danger); }
.eco-tag-ms { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.eco-pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--bg-body); border: 1px solid var(--border-color); color: var(--text-muted); }
.eco-pill-live { color: var(--accent-green); border-color: var(--accent-green); }
.eco-pill-retired { color: var(--accent-danger); border-color: var(--accent-danger); }
html.theme-light .eco-pill-live { color: #2e7d32; border-color: #2e7d32; }

.eco-pv { display: flex; align-items: center; justify-content: center; min-height: 82px; padding: 8px; border-radius: 10px; background: var(--bg-body); overflow: hidden; }
.eco-pv-avatar { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-blue); color: #fff; font-weight: 700; font-size: 22px; }
.eco-pv-frame { padding: 14px 8px; }
.eco-pv-banner { width: 100%; height: 64px; border-radius: 8px; background-image: var(--bn-img); background-size: var(--bn-size, auto); animation: var(--bn-anim, none); filter: var(--bn-filter, none); background-position: var(--bn-pos, 0 0); }
.eco-pv-name { font-size: 20px; font-weight: 700; color: var(--text-main); }
.eco-pv-post { width: 100%; padding: 12px 12px 12px 16px; border-radius: 8px; background: var(--bg-card); background-image: var(--fl-wash, none); border: 1px solid var(--border-color); position: relative; display: flex; flex-direction: column; gap: 7px; box-shadow: inset var(--fl-bw, 4px) 0 0 var(--fl-c), var(--fl-glow, 0 0 0 transparent); animation: var(--fl-cardanim, none); }
.eco-pv-post::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--fl-bw, 4px); border-radius: 8px 0 0 8px; pointer-events: none; background: var(--fl-edge-bg, transparent); background-size: var(--fl-edgesz, auto); animation: var(--fl-edgeanim, none); }
.eco-pv-post::before { content: var(--fl-tag); position: absolute; top: -9px; left: 12px; padding: 1px 8px; border-radius: var(--fl-tagr, 999px); background: var(--fl-tagbg, var(--fl-c)); background-size: var(--fl-tagsz, auto); color: var(--fl-tagfg, #fff); border: 1px solid var(--fl-tagbd, transparent); text-transform: var(--fl-tagtt, none); letter-spacing: var(--fl-tagls, 0); font-size: 10px; font-weight: 700; animation: var(--fl-anim, none); }
.eco-pv-line { height: 6px; border-radius: 3px; background: var(--border-color); }
.eco-pv-line.w60 { width: 60%; }
.eco-pv-bubble { padding: 9px 14px; border-radius: 16px 16px 4px 16px; font-size: 13px; background: var(--bb-bg); background-size: var(--bb-size, auto); background-origin: border-box; color: var(--bb-fg); border: var(--bb-bw, 1px) var(--bb-bs, solid) var(--bb-bd); box-shadow: var(--bb-sh, none); animation: var(--bb-anim, none); max-width: 90%; }
.eco-pv-pt { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.eco-pv-ptcard { padding: 8px 10px; font-size: 12px; display: flex; justify-content: space-between; gap: 8px; border: var(--pt-bw, 1px) var(--pt-bs, solid) var(--pt-a); border-radius: var(--pt-r); background-image: var(--pt-img, none), linear-gradient(var(--pt-bg), var(--pt-bg)); background-size: var(--pt-size, auto); font-family: var(--pt-ff, inherit); animation: var(--pt-anim, none); box-shadow: var(--pt-sh); color: var(--text-main); }
.eco-pv-ptcard b { color: var(--pt-a); }

.eco-lock { display: flex; gap: 8px; align-items: flex-start; color: var(--text-muted); font-size: 12px; width: 100%; }
.eco-lock .material-symbols-outlined { font-size: 20px; color: var(--accent-cyan); }
.eco-lock-text { font-weight: 600; color: var(--text-main); margin-bottom: 5px; }
.eco-lock-sub { margin-top: 4px; }
.eco-bar { height: 7px; border-radius: 4px; background: var(--border-color); overflow: hidden; min-width: 120px; }
.eco-bar i { display: block; height: 100%; background: var(--accent-purple); border-radius: 4px; }
.eco-streak { display: flex; gap: 12px; align-items: center; padding: 14px; margin-bottom: 14px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border-color); }
.eco-streak .material-symbols-outlined { font-size: 34px; color: #f97316; }
.eco-streak div { display: flex; flex-direction: column; }
.eco-streak span:not(.material-symbols-outlined) { color: var(--text-muted); font-size: 13px; }
.eco-drop { margin-bottom: 26px; }
.eco-drop-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.eco-drop-emoji { font-size: 30px; }
.eco-drop-head .eco-pill { margin-left: auto; }

.eco-btn { padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--border-color); background: transparent; color: var(--text-main); transition: background .15s, border-color .15s, opacity .15s; }
.eco-btn:hover:not(:disabled) { border-color: var(--accent-purple); }
.eco-btn:disabled { opacity: .45; cursor: not-allowed; }
.eco-btn-primary { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.eco-btn-primary:hover:not(:disabled) { background: #2563eb; border-color: #2563eb; }
html.theme-light .eco-btn-primary:hover:not(:disabled) { background: #0277bd; border-color: #0277bd; }
.eco-btn-danger { color: var(--accent-danger); border-color: var(--accent-danger); }
.eco-btn-danger:hover:not(:disabled) { background: var(--accent-danger); color: #fff; }
.eco-btn-icon { padding: 6px 8px; display: inline-flex; }
.eco-btn-icon .material-symbols-outlined { font-size: 18px; }

.eco-input { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-body); color: var(--text-main); font-size: 14px; }
.eco-input:focus { outline: none; border-color: var(--accent-purple); }
.eco-input-sm { width: auto; min-width: 110px; padding: 7px 10px; font-size: 13px; }
.eco-input-xs { width: 90px; padding: 6px 8px; font-size: 13px; }
.eco-lbl { display: block; font-size: 13px; color: var(--text-muted); margin: 12px 0 6px; }
.eco-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; margin-top: 10px; }
.eco-picker { position: relative; min-width: 220px; flex: 1 1 220px; }
.eco-picker-list { display: flex; flex-direction: column; margin-top: 4px; border-radius: 8px; overflow: hidden; }
.eco-picker-list button { text-align: left; padding: 8px 12px; background: var(--bg-card); border: 0; border-bottom: 1px solid var(--border-color); color: var(--text-main); cursor: pointer; font-size: 13px; }
.eco-picker-list button:hover { background: var(--bg-card-hover); }
.eco-picker-chosen { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--accent-purple); }
.eco-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.eco-note { padding: 12px 14px; border-radius: 10px; margin: 0 0 16px; background: var(--bg-card); border: 1px solid var(--accent-purple); color: var(--text-main); font-size: 13px; line-height: 1.55; }
.eco-list-plain { margin: 0 0 12px 18px; line-height: 1.7; color: var(--text-main); font-size: 13px; }
.eco-verified-mark { color: var(--accent-blue); }

.eco-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 8px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; }
.eco-row-col { flex-direction: column; align-items: stretch; }
.eco-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 200px; }
.eco-row-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Dialog + toasts ──────────────────────────────────────────────────────── */
.eco-modal { max-width: 460px; max-height: 88vh; overflow-y: auto; }
.eco-modal-wide { max-width: 640px; }
.eco-error { padding: 9px 12px; margin: 8px 0; border-radius: 8px; background: rgba(248, 81, 73, .12); border: 1px solid var(--accent-danger); color: var(--accent-danger); font-size: 13px; }
.eco-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.eco-toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 3000; pointer-events: none; }
.eco-toast { max-width: 340px; padding: 11px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; line-height: 1.4; background: var(--bg-card); color: var(--text-main); border: 1px solid var(--accent-green); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); animation: snFxFade .25s ease-out; }
.eco-toast-err { border-color: var(--accent-danger); }
.eco-toast-gift { border-color: var(--accent-purple); }
html.theme-light .eco-toast { box-shadow: 0 8px 24px rgba(233, 30, 140, .2); }
@keyframes snFxFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Control Terminal ─────────────────────────────────────────────────────── */
.ctl-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.ctl-badge { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent-danger); color: #fff; font-size: 11px; line-height: 18px; }
.ctl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0 0 20px; }
.ctl-tile { padding: 14px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 4px; }
.ctl-tile b { font-size: 24px; color: var(--accent-purple); }
.ctl-tile span { font-size: 12px; color: var(--text-muted); }
.ctl-tile.hot { border-color: var(--accent-danger); }
.ctl-tile.hot b { color: var(--accent-danger); }
.ctl-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.ctl-chips-label { width: 150px; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.ctl-chip { padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--border-color); background: transparent; color: var(--text-muted); }
.ctl-chip.on { border-color: var(--accent-green); color: var(--accent-green); }
html.theme-light .ctl-chip.on { border-color: #2e7d32; color: #2e7d32; }
.ctl-feature { padding: 14px; margin-bottom: 10px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border-color); }
.ctl-feature.is-on { border-left: 4px solid var(--accent-green); }
.ctl-feature-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.ctl-details { margin-top: 12px; }
.ctl-details summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent-purple); }
.ctl-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 12px 0; }
.ctl-set { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.ctl-set small { font-size: 11px; opacity: .8; }
.ctl-set-bool { flex-direction: row; align-items: center; gap: 8px; }
.ctl-acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.ctl-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.ctl-table { display: flex; flex-direction: column; gap: 8px; }
.ctl-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; margin-bottom: 8px; }
.ctl-row-pv { width: 150px; flex-shrink: 0; }
.ctl-row-pv .eco-pv { min-height: 56px; padding: 4px; transform: scale(.85); transform-origin: left center; }
.ctl-row-pv .eco-pv-avatar { width: 40px; height: 40px; font-size: 16px; }
.ctl-row-pv .eco-pv-banner { height: 40px; }
.ctl-row-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ctl-row-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ctl-drop { padding: 16px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-color); }
.ctl-minigrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 8px; }
.eco-mini { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-muted); text-align: center; }
.eco-mini .eco-pv { min-height: 56px; padding: 4px; }
.eco-mini .eco-pv-avatar { width: 38px; height: 38px; font-size: 15px; }
.eco-mini .eco-pv-banner { height: 38px; }
.eco-mini .eco-pv-bubble { font-size: 11px; padding: 6px 9px; }

@media (max-width: 700px) {
  .eco-head { flex-direction: column; }
  .eco-row, .ctl-row { align-items: flex-start; }
  .ctl-chips-label { width: 100%; }
  .eco-toasts { left: 12px; right: 12px; }
  .eco-toast { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sn-fr, .sn-fxk-sh, .sn-fxk-gl, .sn-fxk-gx, .sn-bn::before, .eco-pv-banner, .post-card.eco-boosted, #groupHeroBanner.sn-gb::after { animation: none !important; }
}

/* ── Generated per-item rules (dark + html.theme-light for every item) ────── */

.eco-ctl-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; }
.sn-fr.sn-fr-gold{--fr-a:#fbbf24;--fr-w:3px;}
html.theme-light .sn-fr.sn-fr-gold{--fr-a:#c3941c;--fr-w:3px;}
.sn-fr.sn-fr-silver{--fr-a:#cbd5e1;--fr-w:3px;}
html.theme-light .sn-fr.sn-fr-silver{--fr-a:#838a92;--fr-w:3px;}
.sn-fr.sn-fr-bronze{--fr-a:#c2763a;--fr-w:3px;}
html.theme-light .sn-fr.sn-fr-bronze{--fr-a:#975c2d;--fr-w:3px;}
.sn-fr.sn-fr-emerald{--fr-a:#10b981;--fr-w:3px;}
html.theme-light .sn-fr.sn-fr-emerald{--fr-a:#0c9064;--fr-w:3px;}
.sn-fr.sn-fr-ruby{--fr-a:#ef4444;--fr-w:3px;}
html.theme-light .sn-fr.sn-fr-ruby{--fr-a:#ba3535;--fr-w:3px;}
.sn-fr.sn-fr-sapphire{--fr-a:#3b82f6;--fr-w:3px;}
html.theme-light .sn-fr.sn-fr-sapphire{--fr-a:#2e65bf;--fr-w:3px;}
.sn-fr.sn-fr-amethyst{--fr-a:#a855f7;--fr-w:3px;}
html.theme-light .sn-fr.sn-fr-amethyst{--fr-a:#8342c0;--fr-w:3px;}
.sn-fr.sn-fr-rose{--fr-a:#f472b6;--fr-w:3px;}
html.theme-light .sn-fr.sn-fr-rose{--fr-a:#be588d;--fr-w:3px;}
.sn-fr.sn-fr-neon-cyan{--fr-a:#22d3ee;--fr-w:2px;--fr-glow:0 0 12px #22d3ee;}
html.theme-light .sn-fr.sn-fr-neon-cyan{--fr-a:#1aa4b9;--fr-w:2px;--fr-glow:0 0 12px #1aa4b9;}
.sn-fr.sn-fr-neon-pink{--fr-a:#f0abfc;--fr-w:2px;--fr-glow:0 0 12px #e879f9;}
html.theme-light .sn-fr.sn-fr-neon-pink{--fr-a:#9c6fa3;--fr-w:2px;--fr-glow:0 0 12px #e879f9;}
.sn-fr.sn-fr-neon-lime{--fr-a:#a3e635;--fr-w:2px;--fr-glow:0 0 12px #a3e635;}
html.theme-light .sn-fr.sn-fr-neon-lime{--fr-a:#7fb329;--fr-w:2px;--fr-glow:0 0 12px #7fb329;}
.sn-fr.sn-fr-double-royal{--fr-a:#fbbf24;--fr-w:3px;--fr-b:#7c3aed;}
html.theme-light .sn-fr.sn-fr-double-royal{--fr-a:#c3941c;--fr-w:3px;--fr-b:#602db8;}
.sn-fr.sn-fr-double-candy{--fr-a:#f9a8d4;--fr-w:3px;--fr-b:#5eead4;}
html.theme-light .sn-fr.sn-fr-double-candy{--fr-a:#c283a5;--fr-w:3px;--fr-b:#49b6a5;}
.sn-fr.sn-fr-pulse{--fr-a:#f43f5e;--fr-w:3px;--fr-glow:0 0 10px #f43f5e;animation:snFrPulse 1.6s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-pulse{--fr-a:#be3149;--fr-w:3px;--fr-glow:0 0 10px #be3149;animation:snFrPulse 1.6s ease-in-out infinite;}
.sn-fr.sn-fr-aurora{--fr-a:#34d399;--fr-w:3px;--fr-b:#38bdf8;--fr-c1:#34d399;--fr-c2:#38bdf8;--fr-c3:#a78bfa;animation:snFrCycle 3.2s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-aurora{--fr-a:#28a477;--fr-w:3px;--fr-b:#2b93c1;--fr-c1:#28a477;--fr-c2:#2b93c1;--fr-c3:#826cc3;animation:snFrCycle 3.2s ease-in-out infinite;}
.sn-fr.sn-fr-ember{--fr-a:#f97316;--fr-w:3px;--fr-b:#ef4444;--fr-c1:#f97316;--fr-c2:#ef4444;--fr-c3:#fbbf24;animation:snFrCycle 3.2s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-ember{--fr-a:#c25911;--fr-w:3px;--fr-b:#ba3535;--fr-c1:#c25911;--fr-c2:#ba3535;--fr-c3:#c3941c;animation:snFrCycle 3.2s ease-in-out infinite;}
.sn-fr.sn-fr-frost{--fr-a:#bae6fd;--fr-w:3px;--fr-b:#93c5fd;--fr-c1:#e0f2fe;--fr-c2:#7dd3fc;--fr-c3:#a5b4fc;animation:snFrCycle 3.2s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-frost{--fr-a:#7895a4;--fr-w:3px;--fr-b:#7299c5;--fr-c1:#aebcc6;--fr-c2:#61a4c4;--fr-c3:#808cc4;animation:snFrCycle 3.2s ease-in-out infinite;}
.sn-fr.sn-fr-rainbow{--fr-a:#f43f5e;--fr-w:3px;animation:snFrRainbow 4s linear infinite;}
html.theme-light .sn-fr.sn-fr-rainbow{--fr-a:#be3149;--fr-w:3px;animation:snFrRainbow 4s linear infinite;}
.sn-fr.sn-fr-void{--fr-a:#1e1b4b;--fr-w:3px;--fr-b:#7c3aed;--fr-glow:0 0 14px #7c3aed;}
html.theme-light .sn-fr.sn-fr-void{--fr-a:#17153a;--fr-w:3px;--fr-b:#602db8;--fr-glow:0 0 14px #7c3aed;}
.sn-bn.sn-bn-stripes-violet{--bn-img:repeating-linear-gradient(45deg,#4c1d95 0 14px,#5b21b6 14px 28px);}
html.theme-light .sn-bn.sn-bn-stripes-violet{--bn-img:repeating-linear-gradient(45deg,#e9d5ff 0 14px,#f5d0fe 14px 28px);}
.sn-bn.sn-bn-stripes-mint{--bn-img:repeating-linear-gradient(-45deg,#064e3b 0 14px,#047857 14px 28px);}
html.theme-light .sn-bn.sn-bn-stripes-mint{--bn-img:repeating-linear-gradient(-45deg,#a7f3d0 0 14px,#d1fae5 14px 28px);}
.sn-bn.sn-bn-polka{--bn-img:radial-gradient(circle,rgba(255,255,255,.28) 3px,transparent 4px),linear-gradient(135deg,#0f766e,#14b8a6);--bn-size:24px 24px,100% 100%;}
html.theme-light .sn-bn.sn-bn-polka{--bn-img:radial-gradient(circle,rgba(255,255,255,.7) 3px,transparent 4px),linear-gradient(135deg,#5eead4,#99f6e4);--bn-size:24px 24px,100% 100%;}
.sn-bn.sn-bn-blueprint{--bn-img:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(135deg,#1e3a8a,#1d4ed8);--bn-size:22px 22px,22px 22px,100% 100%;}
html.theme-light .sn-bn.sn-bn-blueprint{--bn-img:linear-gradient(rgba(30,64,175,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(30,64,175,.25) 1px,transparent 1px),linear-gradient(135deg,#bfdbfe,#dbeafe);--bn-size:22px 22px,22px 22px,100% 100%;}
.sn-bn.sn-bn-checker{--bn-img:conic-gradient(#111827 25%,#374151 0 50%,#111827 0 75%,#374151 0);--bn-size:40px 40px;}
html.theme-light .sn-bn.sn-bn-checker{--bn-img:conic-gradient(#f1f5f9 25%,#cbd5e1 0 50%,#f1f5f9 0 75%,#cbd5e1 0);--bn-size:40px 40px;}
.sn-bn.sn-bn-waves{--bn-img:repeating-radial-gradient(circle at 50% 160%,#0c4a6e 0 12px,#075985 12px 24px);}
html.theme-light .sn-bn.sn-bn-waves{--bn-img:repeating-radial-gradient(circle at 50% 160%,#bae6fd 0 12px,#e0f2fe 12px 24px);}
.sn-bn.sn-bn-diamonds{--bn-img:linear-gradient(135deg,#7c2d12 25%,transparent 25%),linear-gradient(225deg,#7c2d12 25%,transparent 25%),linear-gradient(315deg,#7c2d12 25%,transparent 25%),linear-gradient(45deg,#7c2d12 25%,#9a3412 25%);--bn-size:40px 40px,40px 40px,40px 40px,40px 40px;--bn-pos:-20px 0,-20px 0,0 0,0 0;}
html.theme-light .sn-bn.sn-bn-diamonds{--bn-img:linear-gradient(135deg,#fed7aa 25%,transparent 25%),linear-gradient(225deg,#fed7aa 25%,transparent 25%),linear-gradient(315deg,#fed7aa 25%,transparent 25%),linear-gradient(45deg,#fed7aa 25%,#ffedd5 25%);--bn-size:40px 40px,40px 40px,40px 40px,40px 40px;--bn-pos:-20px 0,-20px 0,0 0,0 0;}
.sn-bn.sn-bn-confetti{--bn-img:radial-gradient(circle at 20% 30%,#f472b6 3px,transparent 4px),radial-gradient(circle at 70% 60%,#fbbf24 3px,transparent 4px),radial-gradient(circle at 45% 80%,#34d399 3px,transparent 4px),radial-gradient(circle at 85% 20%,#60a5fa 3px,transparent 4px),linear-gradient(#312e81,#312e81);--bn-size:60px 60px,60px 60px,60px 60px,60px 60px,100% 100%;}
html.theme-light .sn-bn.sn-bn-confetti{--bn-img:radial-gradient(circle at 20% 30%,#ec4899 3px,transparent 4px),radial-gradient(circle at 70% 60%,#f59e0b 3px,transparent 4px),radial-gradient(circle at 45% 80%,#10b981 3px,transparent 4px),radial-gradient(circle at 85% 20%,#3b82f6 3px,transparent 4px),linear-gradient(#fef9c3,#fef9c3);--bn-size:60px 60px,60px 60px,60px 60px,60px 60px,100% 100%;}
.sn-bn.sn-bn-carbon{--bn-img:linear-gradient(27deg,#151515 5px,transparent 5px),linear-gradient(207deg,#151515 5px,transparent 5px),linear-gradient(27deg,#222 5px,transparent 5px),linear-gradient(207deg,#222 5px,transparent 5px),linear-gradient(90deg,#1b1b1b 10px,transparent 10px),linear-gradient(#1d1d1d 25%,#1a1a1a 25%,#1a1a1a 50%,transparent 50%,transparent 75%,#242424 75%,#242424);--bn-size:10px 10px,10px 10px,10px 10px,10px 10px,20px 20px,20px 20px;--bn-pos:0 5px,10px 0,0 10px,10px 5px,0 0,0 0;}
html.theme-light .sn-bn.sn-bn-carbon{--bn-img:linear-gradient(27deg,#cbd5e1 5px,transparent 5px),linear-gradient(207deg,#cbd5e1 5px,transparent 5px),linear-gradient(27deg,#e2e8f0 5px,transparent 5px),linear-gradient(207deg,#e2e8f0 5px,transparent 5px),linear-gradient(90deg,#f1f5f9 10px,transparent 10px),linear-gradient(#e2e8f0 25%,#f1f5f9 25%,#f1f5f9 50%,transparent 50%,transparent 75%,#cbd5e1 75%,#cbd5e1);--bn-size:10px 10px,10px 10px,10px 10px,10px 10px,20px 20px,20px 20px;--bn-pos:0 5px,10px 0,0 10px,10px 5px,0 0,0 0;}
.sn-bn.sn-bn-sunburst{--bn-img:repeating-conic-gradient(from 0deg at 50% 120%,#b45309 0 8deg,#d97706 8deg 16deg);}
html.theme-light .sn-bn.sn-bn-sunburst{--bn-img:repeating-conic-gradient(from 0deg at 50% 120%,#fde68a 0 8deg,#fef3c7 8deg 16deg);}
.sn-bn.sn-bn-aurora-flow{--bn-img:linear-gradient(120deg,#064e3b,#0e7490,#6d28d9,#064e3b);--bn-size:300% 300%;--bn-anim:snBnShift 10s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-aurora-flow{--bn-img:linear-gradient(120deg,#a7f3d0,#a5f3fc,#ddd6fe,#a7f3d0);--bn-size:300% 300%;--bn-anim:snBnShift 10s ease-in-out infinite;}
.sn-bn.sn-bn-sunset-drift{--bn-img:linear-gradient(120deg,#9a3412,#be123c,#7e22ce,#9a3412);--bn-size:300% 300%;--bn-anim:snBnShift 12s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-sunset-drift{--bn-img:linear-gradient(120deg,#fed7aa,#fecdd3,#e9d5ff,#fed7aa);--bn-size:300% 300%;--bn-anim:snBnShift 12s ease-in-out infinite;}
.sn-bn.sn-bn-ocean-tide{--bn-img:linear-gradient(120deg,#082f49,#0369a1,#0891b2,#082f49);--bn-size:300% 300%;--bn-anim:snBnShift 9s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-ocean-tide{--bn-img:linear-gradient(120deg,#bae6fd,#7dd3fc,#a5f3fc,#bae6fd);--bn-size:300% 300%;--bn-anim:snBnShift 9s ease-in-out infinite;}
.sn-bn.sn-bn-lava{--bn-img:linear-gradient(120deg,#450a0a,#b91c1c,#f97316,#450a0a);--bn-size:300% 300%;--bn-anim:snBnShift 8s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-lava{--bn-img:linear-gradient(120deg,#fecaca,#fdba74,#fde68a,#fecaca);--bn-size:300% 300%;--bn-anim:snBnShift 8s ease-in-out infinite;}
.sn-bn.sn-bn-neon-pulse{--bn-img:linear-gradient(120deg,#0f172a,#7e22ce,#0ea5e9,#0f172a);--bn-size:300% 300%;--bn-anim:snBnShift 5s linear infinite;}
html.theme-light .sn-bn.sn-bn-neon-pulse{--bn-img:linear-gradient(120deg,#e9d5ff,#bae6fd,#fbcfe8,#e9d5ff);--bn-size:300% 300%;--bn-anim:snBnShift 5s linear infinite;}
.sn-bn.sn-bn-cotton-candy{--bn-img:linear-gradient(120deg,#9d174d,#6d28d9,#0e7490,#9d174d);--bn-size:300% 300%;--bn-anim:snBnShift 11s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-cotton-candy{--bn-img:linear-gradient(120deg,#fbcfe8,#ddd6fe,#a5f3fc,#fbcfe8);--bn-size:300% 300%;--bn-anim:snBnShift 11s ease-in-out infinite;}
.sn-bn.sn-bn-matrix{--bn-img:repeating-linear-gradient(90deg,rgba(34,197,94,.35) 0 2px,transparent 2px 14px),linear-gradient(180deg,#022c22,#052e16,#022c22);--bn-size:100% 100%,100% 300%;--bn-anim:snBnRain 5s linear infinite;}
html.theme-light .sn-bn.sn-bn-matrix{--bn-img:repeating-linear-gradient(90deg,rgba(21,128,61,.3) 0 2px,transparent 2px 14px),linear-gradient(180deg,#dcfce7,#bbf7d0,#dcfce7);--bn-size:100% 100%,100% 300%;--bn-anim:snBnRain 5s linear infinite;}
.sn-bn.sn-bn-galaxy{--bn-img:radial-gradient(circle at 20% 40%,rgba(255,255,255,.9) 1px,transparent 2px),radial-gradient(circle at 60% 70%,rgba(255,255,255,.8) 1px,transparent 2px),radial-gradient(circle at 80% 25%,rgba(255,255,255,.9) 1px,transparent 2px),linear-gradient(135deg,#020617,#312e81,#4c1d95);--bn-size:70px 70px,90px 90px,50px 50px,100% 100%;}
html.theme-light .sn-bn.sn-bn-galaxy{--bn-img:radial-gradient(circle at 20% 40%,rgba(124,58,237,.8) 1px,transparent 2px),radial-gradient(circle at 60% 70%,rgba(14,116,144,.8) 1px,transparent 2px),radial-gradient(circle at 80% 25%,rgba(124,58,237,.8) 1px,transparent 2px),linear-gradient(135deg,#e0e7ff,#ddd6fe,#fbcfe8);--bn-size:70px 70px,90px 90px,50px 50px,100% 100%;}
.sn-fx.sn-fx-ft-serif{--fx-font:Georgia,'Times New Roman',serif;--fx-extra:1;font-weight:700;}
html.theme-light .sn-fx.sn-fx-ft-serif{--fx-font:Georgia,'Times New Roman',serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-mono{--fx-font:'Courier New',ui-monospace,monospace;--fx-extra:1;font-weight:700;}
html.theme-light .sn-fx.sn-fx-ft-mono{--fx-font:'Courier New',ui-monospace,monospace;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-script{--fx-font:'Brush Script MT','Segoe Script','Lucida Handwriting',cursive;--fx-extra:1;font-size:1.12em;}
html.theme-light .sn-fx.sn-fx-ft-script{--fx-font:'Brush Script MT','Segoe Script','Lucida Handwriting',cursive;--fx-extra:1;font-size:1.12em;}
.sn-fx.sn-fx-ft-impact{--fx-font:Impact,'Arial Black',sans-serif;--fx-extra:1;letter-spacing:.03em;}
html.theme-light .sn-fx.sn-fx-ft-impact{--fx-font:Impact,'Arial Black',sans-serif;--fx-extra:1;letter-spacing:.03em;}
.sn-fx.sn-fx-ft-smallcaps{--fx-font:inherit;--fx-extra:1;font-variant:small-caps;letter-spacing:.06em;font-weight:700;}
html.theme-light .sn-fx.sn-fx-ft-smallcaps{--fx-font:inherit;--fx-extra:1;font-variant:small-caps;letter-spacing:.06em;font-weight:700;}
.sn-fx.sn-fx-ft-wide{--fx-font:inherit;--fx-extra:1;letter-spacing:.16em;text-transform:uppercase;font-size:.88em;font-weight:700;}
html.theme-light .sn-fx.sn-fx-ft-wide{--fx-font:inherit;--fx-extra:1;letter-spacing:.16em;text-transform:uppercase;font-size:.88em;font-weight:700;}
.sn-fx.sn-fx-ft-slant{--fx-font:inherit;--fx-extra:1;font-style:italic;font-weight:800;}
html.theme-light .sn-fx.sn-fx-ft-slant{--fx-font:inherit;--fx-extra:1;font-style:italic;font-weight:800;}
.sn-fl.sn-fl-creator{--fl-c:#a855f7;--fl-tag:"Creator";}
html.theme-light .sn-fl.sn-fl-creator{--fl-c:#8342c0;--fl-tag:"Creator";}
.sn-fl.sn-fl-developer{--fl-c:#3b82f6;--fl-tag:"Developer";}
html.theme-light .sn-fl.sn-fl-developer{--fl-c:#2e65bf;--fl-tag:"Developer";}
.sn-fl.sn-fl-artist{--fl-c:#f472b6;--fl-tag:"Artist";}
html.theme-light .sn-fl.sn-fl-artist{--fl-c:#be588d;--fl-tag:"Artist";}
.sn-fl.sn-fl-gamer{--fl-c:#22c55e;--fl-tag:"Gamer";}
html.theme-light .sn-fl.sn-fl-gamer{--fl-c:#1a9949;--fl-tag:"Gamer";}
.sn-fl.sn-fl-writer{--fl-c:#f59e0b;--fl-tag:"Writer";}
html.theme-light .sn-fl.sn-fl-writer{--fl-c:#bf7b08;--fl-tag:"Writer";}
.sn-fl.sn-fl-musician{--fl-c:#06b6d4;--fl-tag:"Musician";}
html.theme-light .sn-fl.sn-fl-musician{--fl-c:#048da5;--fl-tag:"Musician";}
.sn-fl.sn-fl-helper{--fl-c:#14b8a6;--fl-tag:"Helper";}
html.theme-light .sn-fl.sn-fl-helper{--fl-c:#0f8f81;--fl-tag:"Helper";}
.sn-fl.sn-fl-veteran{--fl-c:#94a3b8;--fl-tag:"Veteran";}
html.theme-light .sn-fl.sn-fl-veteran{--fl-c:#737f8f;--fl-tag:"Veteran";}
.sn-fl.sn-fl-nightowl{--fl-c:#6366f1;--fl-tag:"Night Owl";}
html.theme-light .sn-fl.sn-fl-nightowl{--fl-c:#4d4fbb;--fl-tag:"Night Owl";}
.sn-fl.sn-fl-earlybird{--fl-c:#fb923c;--fl-tag:"Early Bird";}
html.theme-light .sn-fl.sn-fl-earlybird{--fl-c:#c3712e;--fl-tag:"Early Bird";}
.sn-fl.sn-fl-explorer{--fl-c:#84cc16;--fl-tag:"Explorer";}
html.theme-light .sn-fl.sn-fl-explorer{--fl-c:#669f11;--fl-tag:"Explorer";}
.sn-fl.sn-fl-champion{--fl-c:#eab308;--fl-tag:"Champion";}
html.theme-light .sn-fl.sn-fl-champion{--fl-c:#b68b06;--fl-tag:"Champion";}
.sn-fl.sn-fl-legend{--fl-c:#ef4444;--fl-tag:"Legend";}
html.theme-light .sn-fl.sn-fl-legend{--fl-c:#ba3535;--fl-tag:"Legend";}
.sn-fl.sn-fl-rookie{--fl-c:#64748b;--fl-tag:"Rookie";}
html.theme-light .sn-fl.sn-fl-rookie{--fl-c:#4e5a6c;--fl-tag:"Rookie";}
.sn-bb.sn-bb-sunset{--bb-bg:linear-gradient(135deg,#f97316,#db2777);--bb-fg:#fff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-sunset{--bb-bg:linear-gradient(135deg,#fb923c,#ec4899);--bb-fg:#fff;--bb-bd:transparent;}
.sn-bb.sn-bb-ocean{--bb-bg:linear-gradient(135deg,#0ea5e9,#2563eb);--bb-fg:#fff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-ocean{--bb-bg:linear-gradient(135deg,#38bdf8,#3b82f6);--bb-fg:#fff;--bb-bd:transparent;}
.sn-bb.sn-bb-forest{--bb-bg:linear-gradient(135deg,#16a34a,#065f46);--bb-fg:#fff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-forest{--bb-bg:linear-gradient(135deg,#4ade80,#16a34a);--bb-fg:#052e16;--bb-bd:transparent;}
.sn-bb.sn-bb-grape{--bb-bg:linear-gradient(135deg,#8b5cf6,#6d28d9);--bb-fg:#fff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-grape{--bb-bg:linear-gradient(135deg,#c4b5fd,#a78bfa);--bb-fg:#2e1065;--bb-bd:transparent;}
.sn-bb.sn-bb-bubblegum{--bb-bg:linear-gradient(135deg,#f9a8d4,#c4b5fd);--bb-fg:#3b0764;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-bubblegum{--bb-bg:linear-gradient(135deg,#fbcfe8,#ddd6fe);--bb-fg:#3b0764;--bb-bd:transparent;}
.sn-bb.sn-bb-terminal{--bb-bg:#04130a;--bb-fg:#4ade80;--bb-bd:#16a34a;}
html.theme-light .sn-bb.sn-bb-terminal{--bb-bg:#ecfdf5;--bb-fg:#14532d;--bb-bd:#16a34a;}
.sn-bb.sn-bb-neon-outline{--bb-bg:rgba(34,211,238,.08);--bb-fg:#a5f3fc;--bb-bd:#22d3ee;}
html.theme-light .sn-bb.sn-bb-neon-outline{--bb-bg:rgba(8,145,178,.08);--bb-fg:#155e75;--bb-bd:#0891b2;}
.sn-bb.sn-bb-glass{--bb-bg:rgba(255,255,255,.12);--bb-fg:#fff;--bb-bd:rgba(255,255,255,.35);}
html.theme-light .sn-bb.sn-bb-glass{--bb-bg:rgba(255,255,255,.7);--bb-fg:#1a0a14;--bb-bd:rgba(0,0,0,.18);}
.sn-bb.sn-bb-gold{--bb-bg:linear-gradient(135deg,#b45309,#fbbf24);--bb-fg:#fff;--bb-bd:#fde68a;}
html.theme-light .sn-bb.sn-bb-gold{--bb-bg:linear-gradient(135deg,#f59e0b,#fde68a);--bb-fg:#451a03;--bb-bd:#d97706;}
.sn-bb.sn-bb-midnight{--bb-bg:linear-gradient(135deg,#0f172a,#312e81);--bb-fg:#e0e7ff;--bb-bd:#4338ca;}
html.theme-light .sn-bb.sn-bb-midnight{--bb-bg:linear-gradient(135deg,#312e81,#4338ca);--bb-fg:#fff;--bb-bd:#4338ca;}
.sn-bb.sn-bb-candy-cane{--bb-bg:repeating-linear-gradient(45deg,#ef4444 0 10px,#f87171 10px 20px);--bb-fg:#fff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-candy-cane{--bb-bg:repeating-linear-gradient(45deg,#fca5a5 0 10px,#fecaca 10px 20px);--bb-fg:#450a0a;--bb-bd:transparent;}
.sn-bb.sn-bb-paper{--bb-bg:#fef9c3;--bb-fg:#422006;--bb-bd:#facc15;}
html.theme-light .sn-bb.sn-bb-paper{--bb-bg:#fef08a;--bb-fg:#422006;--bb-bd:#eab308;}
.sn-pt.sn-pt-violet{--pt-a:#a78bfa;--pt-bg:rgba(124,58,237,.14);--pt-r:18px;--pt-sh:0 8px 28px rgba(124,58,237,.35);}
html.theme-light .sn-pt.sn-pt-violet{--pt-a:#7c3aed;--pt-bg:rgba(124,58,237,.08);--pt-r:18px;--pt-sh:0 8px 24px rgba(124,58,237,.22);}
.sn-pt.sn-pt-ocean{--pt-a:#38bdf8;--pt-bg:rgba(14,165,233,.12);--pt-r:14px;--pt-sh:0 8px 28px rgba(14,165,233,.3);}
html.theme-light .sn-pt.sn-pt-ocean{--pt-a:#0284c7;--pt-bg:rgba(2,132,199,.08);--pt-r:14px;--pt-sh:0 8px 24px rgba(2,132,199,.2);}
.sn-pt.sn-pt-forest{--pt-a:#4ade80;--pt-bg:rgba(34,197,94,.12);--pt-r:10px;--pt-sh:0 8px 28px rgba(34,197,94,.28);}
html.theme-light .sn-pt.sn-pt-forest{--pt-a:#15803d;--pt-bg:rgba(21,128,61,.08);--pt-r:10px;--pt-sh:0 8px 24px rgba(21,128,61,.2);}
.sn-pt.sn-pt-ember{--pt-a:#fb923c;--pt-bg:rgba(249,115,22,.13);--pt-r:14px;--pt-sh:0 8px 28px rgba(249,115,22,.32);}
html.theme-light .sn-pt.sn-pt-ember{--pt-a:#c2410c;--pt-bg:rgba(194,65,12,.08);--pt-r:14px;--pt-sh:0 8px 24px rgba(194,65,12,.2);}
.sn-pt.sn-pt-rose{--pt-a:#f472b6;--pt-bg:rgba(244,114,182,.13);--pt-r:22px;--pt-sh:0 8px 28px rgba(244,114,182,.3);}
html.theme-light .sn-pt.sn-pt-rose{--pt-a:#be185d;--pt-bg:rgba(190,24,93,.07);--pt-r:22px;--pt-sh:0 8px 24px rgba(190,24,93,.18);}
.sn-pt.sn-pt-mono{--pt-a:#e5e7eb;--pt-bg:rgba(255,255,255,.04);--pt-r:2px;--pt-sh:none;}
html.theme-light .sn-pt.sn-pt-mono{--pt-a:#111827;--pt-bg:rgba(0,0,0,.04);--pt-r:2px;--pt-sh:none;}
.sn-pt.sn-pt-gold{--pt-a:#fbbf24;--pt-bg:rgba(251,191,36,.12);--pt-r:16px;--pt-sh:0 8px 30px rgba(251,191,36,.3);}
html.theme-light .sn-pt.sn-pt-gold{--pt-a:#b45309;--pt-bg:rgba(180,83,9,.08);--pt-r:16px;--pt-sh:0 8px 24px rgba(180,83,9,.2);}
.sn-pt.sn-pt-neon{--pt-a:#22d3ee;--pt-bg:rgba(34,211,238,.08);--pt-r:6px;--pt-sh:0 0 24px rgba(34,211,238,.45);}
html.theme-light .sn-pt.sn-pt-neon{--pt-a:#0891b2;--pt-bg:rgba(8,145,178,.06);--pt-r:6px;--pt-sh:0 0 18px rgba(8,145,178,.3);}
.sn-pt.sn-pt-sakura{--pt-a:#fda4af;--pt-bg:rgba(253,164,175,.14);--pt-r:24px;--pt-sh:0 8px 28px rgba(253,164,175,.3);}
html.theme-light .sn-pt.sn-pt-sakura{--pt-a:#e11d48;--pt-bg:rgba(225,29,72,.07);--pt-r:24px;--pt-sh:0 8px 24px rgba(225,29,72,.16);}
.sn-pt.sn-pt-slate{--pt-a:#94a3b8;--pt-bg:rgba(148,163,184,.1);--pt-r:12px;--pt-sh:none;}
html.theme-light .sn-pt.sn-pt-slate{--pt-a:#475569;--pt-bg:rgba(71,85,105,.07);--pt-r:12px;--pt-sh:none;}
.sn-fr.sn-fr-ltd-pumpkin{--fr-a:#f97316;--fr-b:#7c2d12;--fr-w:3px;--fr-glow:0 0 14px #f97316;animation:snFrPulse 2s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-ltd-pumpkin{--fr-a:#c2410c;--fr-b:#7c2d12;--fr-w:3px;--fr-glow:0 0 10px #c2410c;animation:snFrPulse 2s ease-in-out infinite;}
.sn-fr.sn-fr-ltd-spectral{--fr-a:#a7f3d0;--fr-w:2px;--fr-glow:0 0 16px #6ee7b7;animation:snFrPulse 2.6s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-ltd-spectral{--fr-a:#059669;--fr-w:2px;--fr-glow:0 0 10px #10b981;animation:snFrPulse 2.6s ease-in-out infinite;}
.sn-bn.sn-bn-ltd-haunted{--bn-img:radial-gradient(circle at 80% 30%,#fde68a 0 18px,transparent 19px),linear-gradient(180deg,#1e1b4b,#3b0764 60%,#7c2d12);--bn-size:100% 100%,100% 100%;}
html.theme-light .sn-bn.sn-bn-ltd-haunted{--bn-img:radial-gradient(circle at 80% 30%,#f59e0b 0 18px,transparent 19px),linear-gradient(180deg,#ddd6fe,#fbcfe8 60%,#fed7aa);--bn-size:100% 100%,100% 100%;}
.sn-fl.sn-fl-ltd-trick{--fl-c:#f97316;--fl-tag:"Trick-or-Treater";}
html.theme-light .sn-fl.sn-fl-ltd-trick{--fl-c:#c2410c;--fl-tag:"Trick-or-Treater";}
.sn-bb.sn-bb-ltd-cauldron{--bb-bg:linear-gradient(135deg,#4c1d95,#15803d);--bb-fg:#ecfccb;--bb-bd:#a3e635;}
html.theme-light .sn-bb.sn-bb-ltd-cauldron{--bb-bg:linear-gradient(135deg,#ddd6fe,#bbf7d0);--bb-fg:#14532d;--bb-bd:#16a34a;}
.sn-fr.sn-fr-ltd-snowfall{--fr-a:#e0f2fe;--fr-b:#7dd3fc;--fr-w:3px;--fr-glow:0 0 12px #bae6fd;}
html.theme-light .sn-fr.sn-fr-ltd-snowfall{--fr-a:#0284c7;--fr-b:#7dd3fc;--fr-w:3px;--fr-glow:0 0 8px #7dd3fc;}
.sn-fr.sn-fr-ltd-candycane{--fr-a:#ef4444;--fr-b:#f8fafc;--fr-w:3px;}
html.theme-light .sn-fr.sn-fr-ltd-candycane{--fr-a:#dc2626;--fr-b:#fda4af;--fr-w:3px;}
.sn-bn.sn-bn-ltd-snowy{--bn-img:radial-gradient(circle,rgba(255,255,255,.9) 2px,transparent 3px),radial-gradient(circle,rgba(255,255,255,.6) 1.5px,transparent 2.5px),linear-gradient(180deg,#0c4a6e,#1e3a8a);--bn-size:46px 46px,29px 29px,100% 100%;--bn-anim:snBnSnow 14s linear infinite;}
html.theme-light .sn-bn.sn-bn-ltd-snowy{--bn-img:radial-gradient(circle,rgba(255,255,255,1) 2px,transparent 3px),radial-gradient(circle,rgba(255,255,255,.9) 1.5px,transparent 2.5px),linear-gradient(180deg,#7dd3fc,#bfdbfe);--bn-size:46px 46px,29px 29px,100% 100%;--bn-anim:snBnSnow 14s linear infinite;}
.sn-fl.sn-fl-ltd-helper{--fl-c:#16a34a;--fl-tag:"Santa's Helper";}
html.theme-light .sn-fl.sn-fl-ltd-helper{--fl-c:#15803d;--fl-tag:"Santa's Helper";}
.sn-bb.sn-bb-ltd-gingerbread{--bb-bg:linear-gradient(135deg,#92400e,#b45309);--bb-fg:#fff7ed;--bb-bd:#fde68a;}
html.theme-light .sn-bb.sn-bb-ltd-gingerbread{--bb-bg:linear-gradient(135deg,#fdba74,#fde68a);--bb-fg:#431407;--bb-bd:#b45309;}
.sn-fr.sn-fr-ltd-heart{--fr-a:#fb7185;--fr-b:#fda4af;--fr-w:3px;--fr-glow:0 0 12px #fb7185;animation:snFrPulse 1.4s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-ltd-heart{--fr-a:#e11d48;--fr-b:#fda4af;--fr-w:3px;--fr-glow:0 0 8px #fb7185;animation:snFrPulse 1.4s ease-in-out infinite;}
.sn-bn.sn-bn-ltd-hearts{--bn-img:radial-gradient(circle at 25% 35%,rgba(255,255,255,.35) 6px,transparent 7px),radial-gradient(circle at 75% 65%,rgba(255,255,255,.25) 8px,transparent 9px),linear-gradient(135deg,#9d174d,#e11d48);--bn-size:60px 60px,80px 80px,100% 100%;}
html.theme-light .sn-bn.sn-bn-ltd-hearts{--bn-img:radial-gradient(circle at 25% 35%,rgba(255,255,255,.8) 6px,transparent 7px),radial-gradient(circle at 75% 65%,rgba(255,255,255,.6) 8px,transparent 9px),linear-gradient(135deg,#fbcfe8,#fecdd3);--bn-size:60px 60px,80px 80px,100% 100%;}
.sn-fl.sn-fl-ltd-cupid{--fl-c:#f43f5e;--fl-tag:"Cupid";}
html.theme-light .sn-fl.sn-fl-ltd-cupid{--fl-c:#be123c;--fl-tag:"Cupid";}
.sn-bb.sn-bb-ltd-love{--bb-bg:linear-gradient(135deg,#f43f5e,#be185d);--bb-fg:#fff;--bb-bd:#fda4af;}
html.theme-light .sn-bb.sn-bb-ltd-love{--bb-bg:linear-gradient(135deg,#fecdd3,#fbcfe8);--bb-fg:#500724;--bb-bd:#e11d48;}
.sn-fr.sn-fr-ltd-sun{--fr-a:#fde047;--fr-b:#fb923c;--fr-w:3px;--fr-glow:0 0 14px #fde047;}
html.theme-light .sn-fr.sn-fr-ltd-sun{--fr-a:#ca8a04;--fr-b:#ea580c;--fr-w:3px;--fr-glow:0 0 8px #facc15;}
.sn-bn.sn-bn-ltd-beach{--bn-img:linear-gradient(180deg,#38bdf8 0 55%,#fde68a 55%);--bn-size:100% 100%;}
html.theme-light .sn-bn.sn-bn-ltd-beach{--bn-img:linear-gradient(180deg,#bae6fd 0 55%,#fef3c7 55%);--bn-size:100% 100%;}
.sn-fl.sn-fl-ltd-surfer{--fl-c:#06b6d4;--fl-tag:"Surfer";}
html.theme-light .sn-fl.sn-fl-ltd-surfer{--fl-c:#0e7490;--fl-tag:"Surfer";}
.sn-bb.sn-bb-ltd-sherbet{--bb-bg:linear-gradient(135deg,#fb923c,#facc15,#4ade80);--bb-fg:#1c1917;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-ltd-sherbet{--bb-bg:linear-gradient(135deg,#fed7aa,#fef08a,#bbf7d0);--bb-fg:#1c1917;--bb-bd:transparent;}
.sn-fr.sn-fr-ms-spark{--fr-a:#fde047;--fr-w:3px;--fr-glow:0 0 8px #fde047;}
html.theme-light .sn-fr.sn-fr-ms-spark{--fr-a:#ca8a04;--fr-w:3px;--fr-glow:0 0 6px #facc15;}
.sn-fr.sn-fr-ms-flame{--fr-a:#fb923c;--fr-b:#ef4444;--fr-w:3px;--fr-glow:0 0 12px #f97316;animation:snFrPulse 1.8s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-ms-flame{--fr-a:#ea580c;--fr-b:#dc2626;--fr-w:3px;--fr-glow:0 0 8px #f97316;animation:snFrPulse 1.8s ease-in-out infinite;}
.sn-fr.sn-fr-ms-blaze{--fr-a:#f97316;--fr-b:#ef4444;--fr-w:3px;--fr-c1:#f97316;--fr-c2:#ef4444;--fr-c3:#fbbf24;animation:snFrCycle 2s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-ms-blaze{--fr-a:#c2410c;--fr-b:#b91c1c;--fr-w:3px;--fr-c1:#c2410c;--fr-c2:#b91c1c;--fr-c3:#d97706;animation:snFrCycle 2s ease-in-out infinite;}
.sn-fr.sn-fr-ms-inferno{--fr-a:#ef4444;--fr-w:3px;--fr-c1:#ef4444;--fr-c2:#f97316;--fr-c3:#fde047;animation:snFrCycle 1.4s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-ms-inferno{--fr-a:#b91c1c;--fr-w:3px;--fr-c1:#b91c1c;--fr-c2:#c2410c;--fr-c3:#ca8a04;animation:snFrCycle 1.4s ease-in-out infinite;}
.sn-fl.sn-fl-ms-regular{--fl-c:#f97316;--fl-tag:"Regular";}
html.theme-light .sn-fl.sn-fl-ms-regular{--fl-c:#c2410c;--fl-tag:"Regular";}
.sn-fl.sn-fl-ms-acclaimed{--fl-c:#eab308;--fl-tag:"Acclaimed Creator";}
html.theme-light .sn-fl.sn-fl-ms-acclaimed{--fl-c:#a16207;--fl-tag:"Acclaimed Creator";}
.sn-fr.sn-fr-ms-critic{--fr-a:#fbbf24;--fr-b:#f59e0b;--fr-w:3px;--fr-glow:0 0 12px #fbbf24;}
html.theme-light .sn-fr.sn-fr-ms-critic{--fr-a:#b45309;--fr-b:#d97706;--fr-w:3px;--fr-glow:0 0 8px #f59e0b;}
.sn-bn.sn-bn-ms-masterwork{--bn-img:linear-gradient(120deg,#78350f,#f59e0b,#fde68a,#f59e0b,#78350f);--bn-size:300% 300%;--bn-anim:snBnShift 7s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-ms-masterwork{--bn-img:linear-gradient(120deg,#fde68a,#fbbf24,#fef3c7,#fbbf24,#fde68a);--bn-size:300% 300%;--bn-anim:snBnShift 7s ease-in-out infinite;}
.sn-pt.sn-pt-ms-prestige{--pt-a:#fbbf24;--pt-bg:rgba(251,191,36,.1);--pt-r:16px;--pt-sh:0 0 30px rgba(251,191,36,.35);}
html.theme-light .sn-pt.sn-pt-ms-prestige{--pt-a:#b45309;--pt-bg:rgba(180,83,9,.07);--pt-r:16px;--pt-sh:0 0 22px rgba(180,83,9,.22);}
.sn-gb.sn-gb-gold{--gb-a:#fbbf24;--gb-b:#f59e0b;}
html.theme-light .sn-gb.sn-gb-gold{--gb-a:#bc8f1b;--gb-b:#dc8e09;}
.sn-gb.sn-gb-royal{--gb-a:#a78bfa;--gb-b:#7c3aed;}
html.theme-light .sn-gb.sn-gb-royal{--gb-a:#7d68bb;--gb-b:#6f34d5;}
.sn-gb.sn-gb-ocean{--gb-a:#38bdf8;--gb-b:#0284c7;}
html.theme-light .sn-gb.sn-gb-ocean{--gb-a:#2a8dba;--gb-b:#0176b3;}
.sn-gb.sn-gb-ember{--gb-a:#fb923c;--gb-b:#dc2626;}
html.theme-light .sn-gb.sn-gb-ember{--gb-a:#bc6d2d;--gb-b:#c62222;}
.sn-gb.sn-gb-emerald{--gb-a:#34d399;--gb-b:#059669;}
html.theme-light .sn-gb.sn-gb-emerald{--gb-a:#279e72;--gb-b:#04875e;}
.sn-gb.sn-gb-rose{--gb-a:#f472b6;--gb-b:#be185d;}
html.theme-light .sn-gb.sn-gb-rose{--gb-a:#b75588;--gb-b:#ab1553;}


/* ==========================================================================
   SECURITY RE-LOGIN GATE (#snReauthGate). Uses only theme variables, so it
   follows dark, light and custom themes automatically.
   ========================================================================== */
.sn-reauth { display: none; z-index: 2147483000; }
.sn-reauth.sn-reauth-on { display: flex; }
html.sn-reauth-lock { overflow: hidden; }
html.sn-reauth-lock body > *:not(#snReauthGate):not(script):not(style) { visibility: hidden !important; }
html.sn-reauth-lock #snReauthGate { visibility: visible !important; }
.sn-reauth-box { max-width: 460px; max-height: 92vh; overflow-y: auto; text-align: left; }
.sn-reauth-icon { font-size: 30px; margin-bottom: 8px; }
.sn-reauth-box h2 { margin-bottom: 12px; }
.sn-reauth-text { font-size: 14px; line-height: 1.55; color: var(--text-main); margin: 0 0 10px; }
.sn-reauth-sub { color: var(--text-muted); font-size: 13px; }
.sn-reauth-email { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-card-hover); color: var(--text-muted); font-size: 14px; word-break: break-all; }
.sn-reauth-msg { min-height: 18px; margin: 4px 0 10px; font-size: 13px; color: var(--accent-danger); }
.sn-reauth-msg.sn-reauth-ok { color: var(--accent-success); }
.sn-reauth-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 13px; }
.sn-reauth-links a { color: var(--accent-blue); font-weight: 600; text-decoration: none; }
.sn-reauth-links a:hover { text-decoration: underline; }

/* ==========================================================================
   STORE TABS - same arrangement as Name Styles (uses the .store-* classes)
   ========================================================================== */
.eco-store-card .store-card-preview { height: auto; min-height: 96px; padding: 12px; }
.eco-store-card .store-card-preview .eco-pv,
.eco-eq-pv .eco-pv { background: transparent; min-height: 0; padding: 0; width: 100%; overflow: visible; }
.eco-store-card .store-card-preview .eco-pv-frame { padding: 4px 0; }
.eco-store-card.is-retired { opacity: 0.7; }
.eco-store-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.eco-store-retired { color: var(--text-muted); }
.eco-store-actions { display: inline-flex; align-items: center; gap: 6px; }
.eco-gift-btn { padding: 7px 9px; }
.eco-gift-btn .material-symbols-outlined { margin-right: 0; }
.eco-eq-pv { min-width: 120px; max-width: 360px; margin-top: 4px; }
.eco-eq-pv .eco-pv-banner { height: 48px; }
.eco-store-card .eco-lock { margin-top: 4px; }
.eco-streak, .eco-drop { margin-bottom: 14px; }
.eco-store-card .store-price { white-space: nowrap; }
.eco-store-card .store-card-footer { flex-wrap: wrap; }

/* ===== Name Fonts (replace the old name effects) ===== */
.sn-fx.sn-fx-ft-playfair,
html.theme-light .sn-fx.sn-fx-ft-playfair{--fx-font:'Playfair Display',serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-merriweather,
html.theme-light .sn-fx.sn-fx-ft-merriweather{--fx-font:'Merriweather',serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-lora,
html.theme-light .sn-fx.sn-fx-ft-lora{--fx-font:'Lora',serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-cinzel,
html.theme-light .sn-fx.sn-fx-ft-cinzel{--fx-font:'Cinzel',serif;--fx-extra:1;font-weight:700;letter-spacing:.04em;}
.sn-fx.sn-fx-ft-abril,
html.theme-light .sn-fx.sn-fx-ft-abril{--fx-font:'Abril Fatface',serif;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-cormorant,
html.theme-light .sn-fx.sn-fx-ft-cormorant{--fx-font:'Cormorant Garamond',serif;--fx-extra:1;font-weight:700;font-size:1.1em;}
.sn-fx.sn-fx-ft-alfaslab,
html.theme-light .sn-fx.sn-fx-ft-alfaslab{--fx-font:'Alfa Slab One',serif;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-poppins,
html.theme-light .sn-fx.sn-fx-ft-poppins{--fx-font:'Poppins',sans-serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-montserrat,
html.theme-light .sn-fx.sn-fx-ft-montserrat{--fx-font:'Montserrat',sans-serif;--fx-extra:1;font-weight:800;}
.sn-fx.sn-fx-ft-raleway,
html.theme-light .sn-fx.sn-fx-ft-raleway{--fx-font:'Raleway',sans-serif;--fx-extra:1;font-weight:800;}
.sn-fx.sn-fx-ft-oswald,
html.theme-light .sn-fx.sn-fx-ft-oswald{--fx-font:'Oswald',sans-serif;--fx-extra:1;font-weight:700;letter-spacing:.02em;}
.sn-fx.sn-fx-ft-bebas,
html.theme-light .sn-fx.sn-fx-ft-bebas{--fx-font:'Bebas Neue',sans-serif;--fx-extra:1;font-weight:400;letter-spacing:.05em;font-size:1.1em;}
.sn-fx.sn-fx-ft-anton,
html.theme-light .sn-fx.sn-fx-ft-anton{--fx-font:'Anton',sans-serif;--fx-extra:1;font-weight:400;letter-spacing:.02em;}
.sn-fx.sn-fx-ft-lexend,
html.theme-light .sn-fx.sn-fx-ft-lexend{--fx-font:'Lexend',sans-serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-quicksand,
html.theme-light .sn-fx.sn-fx-ft-quicksand{--fx-font:'Quicksand',sans-serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-comfortaa,
html.theme-light .sn-fx.sn-fx-ft-comfortaa{--fx-font:'Comfortaa',sans-serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-rubik,
html.theme-light .sn-fx.sn-fx-ft-rubik{--fx-font:'Rubik',sans-serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-pacifico,
html.theme-light .sn-fx.sn-fx-ft-pacifico{--fx-font:'Pacifico',cursive;--fx-extra:1;font-weight:400;font-size:1.05em;}
.sn-fx.sn-fx-ft-dancing,
html.theme-light .sn-fx.sn-fx-ft-dancing{--fx-font:'Dancing Script',cursive;--fx-extra:1;font-weight:700;font-size:1.12em;}
.sn-fx.sn-fx-ft-caveat,
html.theme-light .sn-fx.sn-fx-ft-caveat{--fx-font:'Caveat',cursive;--fx-extra:1;font-weight:700;font-size:1.18em;}
.sn-fx.sn-fx-ft-satisfy,
html.theme-light .sn-fx.sn-fx-ft-satisfy{--fx-font:'Satisfy',cursive;--fx-extra:1;font-weight:400;font-size:1.12em;}
.sn-fx.sn-fx-ft-greatvibes,
html.theme-light .sn-fx.sn-fx-ft-greatvibes{--fx-font:'Great Vibes',cursive;--fx-extra:1;font-weight:400;font-size:1.25em;}
.sn-fx.sn-fx-ft-kaushan,
html.theme-light .sn-fx.sn-fx-ft-kaushan{--fx-font:'Kaushan Script',cursive;--fx-extra:1;font-weight:400;font-size:1.08em;}
.sn-fx.sn-fx-ft-shadows,
html.theme-light .sn-fx.sn-fx-ft-shadows{--fx-font:'Shadows Into Light',cursive;--fx-extra:1;font-weight:400;font-size:1.15em;}
.sn-fx.sn-fx-ft-indie,
html.theme-light .sn-fx.sn-fx-ft-indie{--fx-font:'Indie Flower',cursive;--fx-extra:1;font-weight:400;font-size:1.1em;}
.sn-fx.sn-fx-ft-marker,
html.theme-light .sn-fx.sn-fx-ft-marker{--fx-font:'Permanent Marker',cursive;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-amatic,
html.theme-light .sn-fx.sn-fx-ft-amatic{--fx-font:'Amatic SC',cursive;--fx-extra:1;font-weight:700;font-size:1.3em;letter-spacing:.04em;}
.sn-fx.sn-fx-ft-jetbrains,
html.theme-light .sn-fx.sn-fx-ft-jetbrains{--fx-font:'JetBrains Mono',monospace;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-spacemono,
html.theme-light .sn-fx.sn-fx-ft-spacemono{--fx-font:'Space Mono',monospace;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-sharetech,
html.theme-light .sn-fx.sn-fx-ft-sharetech{--fx-font:'Share Tech Mono',monospace;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-orbitron,
html.theme-light .sn-fx.sn-fx-ft-orbitron{--fx-font:'Orbitron',sans-serif;--fx-extra:1;font-weight:700;letter-spacing:.04em;font-size:.92em;}
.sn-fx.sn-fx-ft-audiowide,
html.theme-light .sn-fx.sn-fx-ft-audiowide{--fx-font:'Audiowide',sans-serif;--fx-extra:1;font-weight:400;font-size:.95em;}
.sn-fx.sn-fx-ft-press,
html.theme-light .sn-fx.sn-fx-ft-press{--fx-font:'Press Start 2P',monospace;--fx-extra:1;font-weight:400;font-size:.62em;line-height:1.6;}
.sn-fx.sn-fx-ft-vt323,
html.theme-light .sn-fx.sn-fx-ft-vt323{--fx-font:'VT323',monospace;--fx-extra:1;font-weight:400;font-size:1.25em;}
.sn-fx.sn-fx-ft-blackops,
html.theme-light .sn-fx.sn-fx-ft-blackops{--fx-font:'Black Ops One',sans-serif;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-specialelite,
html.theme-light .sn-fx.sn-fx-ft-specialelite{--fx-font:'Special Elite',monospace;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-bangers,
html.theme-light .sn-fx.sn-fx-ft-bangers{--fx-font:'Bangers',sans-serif;--fx-extra:1;font-weight:400;letter-spacing:.04em;font-size:1.1em;}
.sn-fx.sn-fx-ft-lobster,
html.theme-light .sn-fx.sn-fx-ft-lobster{--fx-font:'Lobster',cursive;--fx-extra:1;font-weight:400;font-size:1.08em;}
.sn-fx.sn-fx-ft-fredoka,
html.theme-light .sn-fx.sn-fx-ft-fredoka{--fx-font:'Fredoka',sans-serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-chewy,
html.theme-light .sn-fx.sn-fx-ft-chewy{--fx-font:'Chewy',cursive;--fx-extra:1;font-weight:400;font-size:1.1em;}
.sn-fx.sn-fx-ft-righteous,
html.theme-light .sn-fx.sn-fx-ft-righteous{--fx-font:'Righteous',sans-serif;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-bungee,
html.theme-light .sn-fx.sn-fx-ft-bungee{--fx-font:'Bungee',sans-serif;--fx-extra:1;font-weight:400;font-size:.9em;}
.sn-fx.sn-fx-ft-monoton,
html.theme-light .sn-fx.sn-fx-ft-monoton{--fx-font:'Monoton',sans-serif;--fx-extra:1;font-weight:400;font-size:.95em;letter-spacing:.03em;}
.sn-fx.sn-fx-ft-ltd-creepy,
html.theme-light .sn-fx.sn-fx-ft-ltd-creepy{--fx-font:'Creepster',cursive;--fx-extra:1;font-weight:400;font-size:1.15em;letter-spacing:.03em;}
.sn-fx.sn-fx-ft-ltd-jolly,
html.theme-light .sn-fx.sn-fx-ft-ltd-jolly{--fx-font:'Mountains of Christmas',cursive;--fx-extra:1;font-weight:700;font-size:1.15em;}
.sn-fx.sn-fx-ft-ltd-sweetheart,
html.theme-light .sn-fx.sn-fx-ft-ltd-sweetheart{--fx-font:'Sacramento',cursive;--fx-extra:1;font-weight:400;font-size:1.3em;}
.sn-fx.sn-fx-ft-ltd-boardwalk,
html.theme-light .sn-fx.sn-fx-ft-ltd-boardwalk{--fx-font:'Fontdiner Swanky',cursive;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-ms-gothic,
html.theme-light .sn-fx.sn-fx-ft-ms-gothic{--fx-font:'UnifrakturCook',serif;--fx-extra:1;font-weight:700;font-size:1.1em;}

/* ==========================================================================
   STORE EXPANSION: 100+ items per category (frames, banners, name fonts, flair,
   bubbles, profile themes). Generated: each item has a dark rule and a light rule.
   ========================================================================== */
@keyframes snFrBreathe { 0%, 100% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) var(--fr-a), 0 0 5px var(--fr-a); } 50% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) var(--fr-b), 0 0 20px var(--fr-b); } }
@keyframes snFrBeat { 0%, 24%, 60%, 100% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) var(--fr-a), 0 0 4px var(--fr-a); } 12%, 36% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px) + 2px) var(--fr-a), 0 0 20px var(--fr-a); } }
@keyframes snFrFlicker { 0%, 8%, 12%, 30%, 34%, 58%, 66%, 100% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) var(--fr-a), 0 0 16px var(--fr-a); } 9%, 11%, 31%, 33%, 60%, 62%, 64% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) var(--fr-b), 0 0 0 transparent; } 10%, 32%, 61%, 63% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) var(--fr-a), 0 0 16px var(--fr-a); } }
@keyframes snFrCycle5 { 0% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) var(--fr-c1), 0 0 10px var(--fr-c1); } 20% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) var(--fr-c2), 0 0 10px var(--fr-c2); } 40% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) var(--fr-c3), 0 0 10px var(--fr-c3); } 60% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) var(--fr-c4), 0 0 10px var(--fr-c4); } 80% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) var(--fr-c5), 0 0 10px var(--fr-c5); } 100% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) var(--fr-c1), 0 0 10px var(--fr-c1); } }
@keyframes snFrOrbit { 0% { outline-offset: calc(var(--fr-g, 2px) + var(--fr-w, 3px) * 2 + 1px); outline-color: var(--fr-a); } 100% { outline-offset: calc(var(--fr-g, 2px) + var(--fr-w, 3px) * 2 + 12px); outline-color: transparent; } }
@keyframes snFrAlt { 0%, 45% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) var(--fr-a), 0 0 10px var(--fr-a); } 55%, 100% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) var(--fr-b), 0 0 10px var(--fr-b); } }
@keyframes snFrAura { 0%, 100% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) var(--fr-c1), 0 0 26px 3px var(--fr-c1); } 33% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) var(--fr-c2), 0 0 26px 3px var(--fr-c2); } 66% { box-shadow: 0 0 0 var(--fr-g, 2px) var(--bg-card), 0 0 0 calc(var(--fr-g, 2px) + var(--fr-w, 3px)) var(--fr-c3), 0 0 26px 3px var(--fr-c3); } }
@keyframes snBnScroll { from { background-position: var(--bn-from, 0 0); } to { background-position: var(--bn-to, 0 0); } }
@keyframes snBnTwinkle { 0%, 100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.5) saturate(1.25); } }
@keyframes snBnHue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@keyframes snFlShimmer { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes snFlGlow { 0%, 100% { box-shadow: inset var(--fl-bw, 4px) 0 0 var(--fl-c), 0 0 4px color-mix(in srgb, var(--fl-gc) 35%, transparent); } 50% { box-shadow: inset var(--fl-bw, 4px) 0 0 var(--fl-c), 0 0 22px color-mix(in srgb, var(--fl-gc) 70%, transparent); } }
@keyframes snFlFlow { from { background-position: 0 0; } to { background-position: 0 150%; } }
@keyframes snFlHue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@keyframes snFlBlink { 0%, 100% { opacity: 1; } 45% { opacity: 1; } 50% { opacity: .35; } 55% { opacity: 1; } 70% { opacity: .6; } 75% { opacity: 1; } }
@keyframes snBbShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes snBbShine { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
@keyframes snBbGlow { 0%, 100% { box-shadow: 0 0 4px var(--bb-gc); } 50% { box-shadow: 0 0 18px 1px var(--bb-gc); } }
@keyframes snBbBorder { 0%, 100% { box-shadow: inset 0 0 0 var(--bb-bw, 2px) var(--bb-c1), 0 0 10px var(--bb-c1); } 33% { box-shadow: inset 0 0 0 var(--bb-bw, 2px) var(--bb-c2), 0 0 10px var(--bb-c2); } 66% { box-shadow: inset 0 0 0 var(--bb-bw, 2px) var(--bb-c3), 0 0 10px var(--bb-c3); } }
@keyframes snPtGlow { 0%, 100% { box-shadow: 0 0 6px var(--pt-gc); } 50% { box-shadow: 0 0 26px 2px var(--pt-gc); } }
@keyframes snPtDrift { 0%, 100% { background-position: 0% 50%, 0 0; } 50% { background-position: 100% 50%, 0 0; } }
@keyframes snPtBorder { 0%, 100% { box-shadow: 0 0 8px var(--pt-a), inset 0 0 0 1px var(--pt-a); } 50% { box-shadow: 0 0 22px var(--pt-a2), inset 0 0 0 1px var(--pt-a2); } }
.sn-fr.sn-fr-platinum{--fr-a:#e5e4e2;--fr-w:3px;--fr-glow:0 0 6px #e5e4e2;}
html.theme-light .sn-fr.sn-fr-platinum{--fr-a:#b2b1b0;--fr-w:3px;--fr-glow:0 0 6px #b2b1b0;}
.sn-fr.sn-fr-titanium{--fr-a:#8d99ae;--fr-w:3px;}
html.theme-light .sn-fr.sn-fr-titanium{--fr-a:#6d7787;--fr-w:3px;}
.sn-fr.sn-fr-copper{--fr-a:#b87333;--fr-w:3px;}
html.theme-light .sn-fr.sn-fr-copper{--fr-a:#8f5927;--fr-w:3px;}
.sn-fr.sn-fr-rose-gold{--fr-a:#e8a798;--fr-w:3px;}
html.theme-light .sn-fr.sn-fr-rose-gold{--fr-a:#b48276;--fr-w:3px;}
.sn-fr.sn-fr-pearl{--fr-a:#f5efe6;--fr-w:3px;--fr-glow:0 0 6px #f5efe6;}
html.theme-light .sn-fr.sn-fr-pearl{--fr-a:#bfbab3;--fr-w:3px;--fr-glow:0 0 6px #bfbab3;}
.sn-fr.sn-fr-jade{--fr-a:#00a86b;--fr-w:3px;}
html.theme-light .sn-fr.sn-fr-jade{--fr-a:#008353;--fr-w:3px;}
.sn-fr.sn-fr-topaz{--fr-a:#ffc87c;--fr-w:3px;}
html.theme-light .sn-fr.sn-fr-topaz{--fr-a:#c69c60;--fr-w:3px;}
.sn-fr.sn-fr-citrine{--fr-a:#e4d00a;--fr-w:3px;}
html.theme-light .sn-fr.sn-fr-citrine{--fr-a:#b1a207;--fr-w:3px;}
.sn-fr.sn-fr-garnet{--fr-a:#a4161a;--fr-w:3px;}
html.theme-light .sn-fr.sn-fr-garnet{--fr-a:#7f1114;--fr-w:3px;}
.sn-fr.sn-fr-peridot{--fr-a:#9acd32;--fr-w:3px;}
html.theme-light .sn-fr.sn-fr-peridot{--fr-a:#789f27;--fr-w:3px;}
.sn-fr.sn-fr-aquamarine{--fr-a:#7fffd4;--fr-w:3px;--fr-glow:0 0 6px #7fffd4;}
html.theme-light .sn-fr.sn-fr-aquamarine{--fr-a:#63c6a5;--fr-w:3px;--fr-glow:0 0 6px #63c6a5;}
.sn-fr.sn-fr-moonstone{--fr-a:#c7d3e6;--fr-w:3px;--fr-glow:0 0 6px #c7d3e6;}
html.theme-light .sn-fr.sn-fr-moonstone{--fr-a:#9ba4b3;--fr-w:3px;--fr-glow:0 0 6px #9ba4b3;}
.sn-fr.sn-fr-coral{--fr-a:#ff7f6e;--fr-w:3px;}
html.theme-light .sn-fr.sn-fr-coral{--fr-a:#c66355;--fr-w:3px;}
.sn-fr.sn-fr-obsidian{--fr-a:#64748b;--fr-w:3px;}
html.theme-light .sn-fr.sn-fr-obsidian{--fr-a:#4e5a6c;--fr-w:3px;}
.sn-fr.sn-fr-tangerine{--fr-a:#fb923c;--fr-w:3px;}
html.theme-light .sn-fr.sn-fr-tangerine{--fr-a:#c3712e;--fr-w:3px;}
.sn-fr.sn-fr-lavender{--fr-a:#c4b5fd;--fr-w:3px;}
html.theme-light .sn-fr.sn-fr-lavender{--fr-a:#988dc5;--fr-w:3px;}
.sn-fr.sn-fr-neon-orange{--fr-a:#fb923c;--fr-w:2px;--fr-glow:0 0 14px #fb923c;}
html.theme-light .sn-fr.sn-fr-neon-orange{--fr-a:#c3712e;--fr-w:2px;--fr-glow:0 0 14px #c3712e;}
.sn-fr.sn-fr-neon-violet{--fr-a:#a78bfa;--fr-w:2px;--fr-glow:0 0 14px #a78bfa;}
html.theme-light .sn-fr.sn-fr-neon-violet{--fr-a:#826cc3;--fr-w:2px;--fr-glow:0 0 14px #826cc3;}
.sn-fr.sn-fr-neon-red{--fr-a:#f87171;--fr-w:2px;--fr-glow:0 0 14px #f87171;}
html.theme-light .sn-fr.sn-fr-neon-red{--fr-a:#c15858;--fr-w:2px;--fr-glow:0 0 14px #c15858;}
.sn-fr.sn-fr-neon-mint{--fr-a:#6ee7b7;--fr-w:2px;--fr-glow:0 0 14px #6ee7b7;}
html.theme-light .sn-fr.sn-fr-neon-mint{--fr-a:#55b48e;--fr-w:2px;--fr-glow:0 0 14px #55b48e;}
.sn-fr.sn-fr-neon-gold{--fr-a:#fde047;--fr-w:2px;--fr-glow:0 0 14px #fde047;}
html.theme-light .sn-fr.sn-fr-neon-gold{--fr-a:#c5ae37;--fr-w:2px;--fr-glow:0 0 14px #c5ae37;}
.sn-fr.sn-fr-neon-blue{--fr-a:#60a5fa;--fr-w:2px;--fr-glow:0 0 14px #60a5fa;}
html.theme-light .sn-fr.sn-fr-neon-blue{--fr-a:#4a80c3;--fr-w:2px;--fr-glow:0 0 14px #4a80c3;}
.sn-fr.sn-fr-neon-white{--fr-a:#f8fafc;--fr-w:2px;--fr-glow:0 0 14px #f8fafc;}
html.theme-light .sn-fr.sn-fr-neon-white{--fr-a:#c1c3c4;--fr-w:2px;--fr-glow:0 0 14px #c1c3c4;}
.sn-fr.sn-fr-neon-teal{--fr-a:#2dd4bf;--fr-w:2px;--fr-glow:0 0 14px #2dd4bf;}
html.theme-light .sn-fr.sn-fr-neon-teal{--fr-a:#23a594;--fr-w:2px;--fr-glow:0 0 14px #23a594;}
.sn-fr.sn-fr-neon-magenta{--fr-a:#e879f9;--fr-w:2px;--fr-glow:0 0 14px #e879f9;}
html.theme-light .sn-fr.sn-fr-neon-magenta{--fr-a:#b45ec2;--fr-w:2px;--fr-glow:0 0 14px #b45ec2;}
.sn-fr.sn-fr-sunset-duo{--fr-a:#f97316;--fr-w:3px;--fr-b:#db2777;}
html.theme-light .sn-fr.sn-fr-sunset-duo{--fr-a:#c25911;--fr-w:3px;--fr-b:#aa1e5c;}
.sn-fr.sn-fr-ocean-duo{--fr-a:#0ea5e9;--fr-w:3px;--fr-b:#14b8a6;}
html.theme-light .sn-fr.sn-fr-ocean-duo{--fr-a:#0a80b5;--fr-w:3px;--fr-b:#0f8f81;}
.sn-fr.sn-fr-forest-duo{--fr-a:#16a34a;--fr-w:3px;--fr-b:#a3e635;}
html.theme-light .sn-fr.sn-fr-forest-duo{--fr-a:#117f39;--fr-w:3px;--fr-b:#7fb329;}
.sn-fr.sn-fr-berry-duo{--fr-a:#be185d;--fr-w:3px;--fr-b:#7c3aed;}
html.theme-light .sn-fr.sn-fr-berry-duo{--fr-a:#941248;--fr-w:3px;--fr-b:#602db8;}
.sn-fr.sn-fr-citrus-duo{--fr-a:#facc15;--fr-w:3px;--fr-b:#84cc16;}
html.theme-light .sn-fr.sn-fr-citrus-duo{--fr-a:#c39f10;--fr-w:3px;--fr-b:#669f11;}
.sn-fr.sn-fr-galaxy-duo{--fr-a:#312e81;--fr-w:3px;--fr-b:#c084fc;}
html.theme-light .sn-fr.sn-fr-galaxy-duo{--fr-a:#262364;--fr-w:3px;--fr-b:#9566c4;}
.sn-fr.sn-fr-mint-chocolate{--fr-a:#5eead4;--fr-w:3px;--fr-b:#78350f;}
html.theme-light .sn-fr.sn-fr-mint-chocolate{--fr-a:#49b6a5;--fr-w:3px;--fr-b:#5d290b;}
.sn-fr.sn-fr-bubblegum-duo{--fr-a:#f9a8d4;--fr-w:3px;--fr-b:#93c5fd;}
html.theme-light .sn-fr.sn-fr-bubblegum-duo{--fr-a:#c283a5;--fr-w:3px;--fr-b:#7299c5;}
.sn-fr.sn-fr-fire-and-ice{--fr-a:#ef4444;--fr-w:3px;--fr-b:#22d3ee;}
html.theme-light .sn-fr.sn-fr-fire-and-ice{--fr-a:#ba3535;--fr-w:3px;--fr-b:#1aa4b9;}
.sn-fr.sn-fr-lemonade{--fr-a:#fde047;--fr-w:3px;--fr-b:#fb7185;}
html.theme-light .sn-fr.sn-fr-lemonade{--fr-a:#c5ae37;--fr-w:3px;--fr-b:#c35867;}
.sn-fr.sn-fr-prism{--fr-a:#f43f5e;--fr-w:2px;--fr-b:#fbbf24;--fr-c:#22c55e;}
html.theme-light .sn-fr.sn-fr-prism{--fr-a:#be3149;--fr-w:2px;--fr-b:#c3941c;--fr-c:#1a9949;}
.sn-fr.sn-fr-neapolitan{--fr-a:#f9a8d4;--fr-w:2px;--fr-b:#fef3c7;--fr-c:#92400e;}
html.theme-light .sn-fr.sn-fr-neapolitan{--fr-a:#c283a5;--fr-w:2px;--fr-b:#c6bd9b;--fr-c:#71310a;}
.sn-fr.sn-fr-tropical{--fr-a:#06b6d4;--fr-w:2px;--fr-b:#f97316;--fr-c:#ec4899;}
html.theme-light .sn-fr.sn-fr-tropical{--fr-a:#048da5;--fr-w:2px;--fr-b:#c25911;--fr-c:#b83877;}
.sn-fr.sn-fr-twilight{--fr-a:#6366f1;--fr-w:2px;--fr-b:#a855f7;--fr-c:#f472b6;}
html.theme-light .sn-fr.sn-fr-twilight{--fr-a:#4d4fbb;--fr-w:2px;--fr-b:#8342c0;--fr-c:#be588d;}
.sn-fr.sn-fr-autumn{--fr-a:#b45309;--fr-w:2px;--fr-b:#dc2626;--fr-c:#facc15;}
html.theme-light .sn-fr.sn-fr-autumn{--fr-a:#8c4007;--fr-w:2px;--fr-b:#ab1d1d;--fr-c:#c39f10;}
.sn-fr.sn-fr-spring-bloom{--fr-a:#86efac;--fr-w:2px;--fr-b:#f9a8d4;--fr-c:#fde68a;}
html.theme-light .sn-fr.sn-fr-spring-bloom{--fr-a:#68ba86;--fr-w:2px;--fr-b:#c283a5;--fr-c:#c5b36b;}
.sn-fr.sn-fr-dashed-gold{--fr-a:#fbbf24;--fr-w:2px;--fr-ow:2px;--fr-os:dashed;--fr-oc:#fbbf24;--fr-oo:6px;}
html.theme-light .sn-fr.sn-fr-dashed-gold{--fr-a:#c3941c;--fr-w:2px;--fr-ow:2px;--fr-os:dashed;--fr-oc:#c3941c;--fr-oo:6px;}
.sn-fr.sn-fr-dotted-cyan{--fr-a:#22d3ee;--fr-w:2px;--fr-ow:2px;--fr-os:dotted;--fr-oc:#22d3ee;--fr-oo:6px;}
html.theme-light .sn-fr.sn-fr-dotted-cyan{--fr-a:#1aa4b9;--fr-w:2px;--fr-ow:2px;--fr-os:dotted;--fr-oc:#1aa4b9;--fr-oo:6px;}
.sn-fr.sn-fr-dashed-rose{--fr-a:#fb7185;--fr-w:2px;--fr-ow:2px;--fr-os:dashed;--fr-oc:#fb7185;--fr-oo:6px;}
html.theme-light .sn-fr.sn-fr-dashed-rose{--fr-a:#c35867;--fr-w:2px;--fr-ow:2px;--fr-os:dashed;--fr-oc:#c35867;--fr-oo:6px;}
.sn-fr.sn-fr-dotted-lime{--fr-a:#a3e635;--fr-w:2px;--fr-ow:2px;--fr-os:dotted;--fr-oc:#a3e635;--fr-oo:6px;}
html.theme-light .sn-fr.sn-fr-dotted-lime{--fr-a:#7fb329;--fr-w:2px;--fr-ow:2px;--fr-os:dotted;--fr-oc:#7fb329;--fr-oo:6px;}
.sn-fr.sn-fr-stitched{--fr-a:#64748b;--fr-w:2px;--fr-ow:2px;--fr-os:dashed;--fr-oc:#f8fafc;--fr-oo:6px;}
html.theme-light .sn-fr.sn-fr-stitched{--fr-a:#4e5a6c;--fr-w:2px;--fr-ow:2px;--fr-os:dashed;--fr-oc:#c1c3c4;--fr-oo:6px;}
.sn-fr.sn-fr-morse-code{--fr-a:#c084fc;--fr-w:2px;--fr-ow:2px;--fr-os:dotted;--fr-oc:#c084fc;--fr-oo:6px;}
html.theme-light .sn-fr.sn-fr-morse-code{--fr-a:#9566c4;--fr-w:2px;--fr-ow:2px;--fr-os:dotted;--fr-oc:#9566c4;--fr-oo:6px;}
.sn-fr.sn-fr-sapphire-pulse{--fr-a:#3b82f6;--fr-w:3px;--fr-glow:0 0 10px #3b82f6;animation:snFrPulse 1.8s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-sapphire-pulse{--fr-a:#2e65bf;--fr-w:3px;--fr-glow:0 0 10px #2e65bf;animation:snFrPulse 1.8s ease-in-out infinite;}
.sn-fr.sn-fr-emerald-pulse{--fr-a:#10b981;--fr-w:3px;--fr-glow:0 0 10px #10b981;animation:snFrPulse 1.8s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-emerald-pulse{--fr-a:#0c9064;--fr-w:3px;--fr-glow:0 0 10px #0c9064;animation:snFrPulse 1.8s ease-in-out infinite;}
.sn-fr.sn-fr-amber-pulse{--fr-a:#f59e0b;--fr-w:3px;--fr-glow:0 0 10px #f59e0b;animation:snFrPulse 1.8s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-amber-pulse{--fr-a:#bf7b08;--fr-w:3px;--fr-glow:0 0 10px #bf7b08;animation:snFrPulse 1.8s ease-in-out infinite;}
.sn-fr.sn-fr-violet-pulse{--fr-a:#a855f7;--fr-w:3px;--fr-glow:0 0 10px #a855f7;animation:snFrPulse 1.8s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-violet-pulse{--fr-a:#8342c0;--fr-w:3px;--fr-glow:0 0 10px #8342c0;animation:snFrPulse 1.8s ease-in-out infinite;}
.sn-fr.sn-fr-cyan-pulse{--fr-a:#22d3ee;--fr-w:3px;--fr-glow:0 0 10px #22d3ee;animation:snFrPulse 1.8s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-cyan-pulse{--fr-a:#1aa4b9;--fr-w:3px;--fr-glow:0 0 10px #1aa4b9;animation:snFrPulse 1.8s ease-in-out infinite;}
.sn-fr.sn-fr-calm-breath{--fr-a:#38bdf8;--fr-w:3px;--fr-b:#0ea5e9;animation:snFrBreathe 3.6s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-calm-breath{--fr-a:#2b93c1;--fr-w:3px;--fr-b:#0a80b5;animation:snFrBreathe 3.6s ease-in-out infinite;}
.sn-fr.sn-fr-lotus-breath{--fr-a:#f9a8d4;--fr-w:3px;--fr-b:#e879f9;animation:snFrBreathe 3.6s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-lotus-breath{--fr-a:#c283a5;--fr-w:3px;--fr-b:#b45ec2;animation:snFrBreathe 3.6s ease-in-out infinite;}
.sn-fr.sn-fr-moss-breath{--fr-a:#86efac;--fr-w:3px;--fr-b:#16a34a;animation:snFrBreathe 3.6s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-moss-breath{--fr-a:#68ba86;--fr-w:3px;--fr-b:#117f39;animation:snFrBreathe 3.6s ease-in-out infinite;}
.sn-fr.sn-fr-dusk-breath{--fr-a:#c4b5fd;--fr-w:3px;--fr-b:#6366f1;animation:snFrBreathe 3.6s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-dusk-breath{--fr-a:#988dc5;--fr-w:3px;--fr-b:#4d4fbb;animation:snFrBreathe 3.6s ease-in-out infinite;}
.sn-fr.sn-fr-sun-breath{--fr-a:#fde047;--fr-w:3px;--fr-b:#f97316;animation:snFrBreathe 3.6s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-sun-breath{--fr-a:#c5ae37;--fr-w:3px;--fr-b:#c25911;animation:snFrBreathe 3.6s ease-in-out infinite;}
.sn-fr.sn-fr-double-heart{--fr-a:#fb7185;--fr-w:3px;--fr-glow:0 0 6px #fb7185;animation:snFrBeat 1.6s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-double-heart{--fr-a:#c35867;--fr-w:3px;--fr-glow:0 0 6px #c35867;animation:snFrBeat 1.6s ease-in-out infinite;}
.sn-fr.sn-fr-thunder-beat{--fr-a:#facc15;--fr-w:3px;--fr-glow:0 0 6px #facc15;animation:snFrBeat 1.6s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-thunder-beat{--fr-a:#c39f10;--fr-w:3px;--fr-glow:0 0 6px #c39f10;animation:snFrBeat 1.6s ease-in-out infinite;}
.sn-fr.sn-fr-sonar{--fr-a:#4ade80;--fr-w:3px;--fr-glow:0 0 6px #4ade80;animation:snFrBeat 1.6s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-sonar{--fr-a:#39ad63;--fr-w:3px;--fr-glow:0 0 6px #39ad63;animation:snFrBeat 1.6s ease-in-out infinite;}
.sn-fr.sn-fr-drumline{--fr-a:#f97316;--fr-w:3px;--fr-glow:0 0 6px #f97316;animation:snFrBeat 1.6s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-drumline{--fr-a:#c25911;--fr-w:3px;--fr-glow:0 0 6px #c25911;animation:snFrBeat 1.6s ease-in-out infinite;}
.sn-fr.sn-fr-neon-sign{--fr-a:#f0abfc;--fr-w:3px;--fr-b:#4a044e;--fr-glow:0 0 14px #f0abfc;animation:snFrFlicker 4.2s linear infinite;}
html.theme-light .sn-fr.sn-fr-neon-sign{--fr-a:#bb85c4;--fr-w:3px;--fr-b:#39033c;--fr-glow:0 0 14px #bb85c4;animation:snFrFlicker 4.2s linear infinite;}
.sn-fr.sn-fr-broken-bulb{--fr-a:#fde68a;--fr-w:3px;--fr-b:#451a03;--fr-glow:0 0 14px #fde68a;animation:snFrFlicker 4.2s linear infinite;}
html.theme-light .sn-fr.sn-fr-broken-bulb{--fr-a:#c5b36b;--fr-w:3px;--fr-b:#351402;--fr-glow:0 0 14px #c5b36b;animation:snFrFlicker 4.2s linear infinite;}
.sn-fr.sn-fr-arcade-sign{--fr-a:#22d3ee;--fr-w:3px;--fr-b:#083344;--fr-glow:0 0 14px #22d3ee;animation:snFrFlicker 4.2s linear infinite;}
html.theme-light .sn-fr.sn-fr-arcade-sign{--fr-a:#1aa4b9;--fr-w:3px;--fr-b:#062735;--fr-glow:0 0 14px #1aa4b9;animation:snFrFlicker 4.2s linear infinite;}
.sn-fr.sn-fr-candle{--fr-a:#fb923c;--fr-w:3px;--fr-b:#431407;--fr-glow:0 0 14px #fb923c;animation:snFrFlicker 4.2s linear infinite;}
html.theme-light .sn-fr.sn-fr-candle{--fr-a:#c3712e;--fr-w:3px;--fr-b:#340f05;--fr-glow:0 0 14px #c3712e;animation:snFrFlicker 4.2s linear infinite;}
.sn-fr.sn-fr-prism-cycle{--fr-a:#f43f5e;--fr-w:3px;--fr-c1:#f43f5e;--fr-c2:#fbbf24;--fr-c3:#22c55e;animation:snFrCycle 3.2s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-prism-cycle{--fr-a:#be3149;--fr-w:3px;--fr-c1:#be3149;--fr-c2:#c3941c;--fr-c3:#1a9949;animation:snFrCycle 3.2s ease-in-out infinite;}
.sn-fr.sn-fr-sherbet-cycle{--fr-a:#fb923c;--fr-w:3px;--fr-c1:#fb923c;--fr-c2:#f9a8d4;--fr-c3:#a7f3d0;animation:snFrCycle 3.2s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-sherbet-cycle{--fr-a:#c3712e;--fr-w:3px;--fr-c1:#c3712e;--fr-c2:#c283a5;--fr-c3:#82bda2;animation:snFrCycle 3.2s ease-in-out infinite;}
.sn-fr.sn-fr-tropic-cycle{--fr-a:#06b6d4;--fr-w:3px;--fr-c1:#06b6d4;--fr-c2:#84cc16;--fr-c3:#f97316;animation:snFrCycle 3.2s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-tropic-cycle{--fr-a:#048da5;--fr-w:3px;--fr-c1:#048da5;--fr-c2:#669f11;--fr-c3:#c25911;animation:snFrCycle 3.2s ease-in-out infinite;}
.sn-fr.sn-fr-bubblegum-cycle{--fr-a:#f472b6;--fr-w:3px;--fr-c1:#f472b6;--fr-c2:#c084fc;--fr-c3:#67e8f9;animation:snFrCycle 3.2s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-bubblegum-cycle{--fr-a:#be588d;--fr-w:3px;--fr-c1:#be588d;--fr-c2:#9566c4;--fr-c3:#50b4c2;animation:snFrCycle 3.2s ease-in-out infinite;}
.sn-fr.sn-fr-toxic-cycle{--fr-a:#a3e635;--fr-w:3px;--fr-c1:#a3e635;--fr-c2:#22c55e;--fr-c3:#facc15;animation:snFrCycle 3.2s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-toxic-cycle{--fr-a:#7fb329;--fr-w:3px;--fr-c1:#7fb329;--fr-c2:#1a9949;--fr-c3:#c39f10;animation:snFrCycle 3.2s ease-in-out infinite;}
.sn-fr.sn-fr-spectrum{--fr-a:#ef4444;--fr-w:3px;--fr-c1:#ef4444;--fr-c2:#f59e0b;--fr-c3:#22c55e;--fr-c4:#3b82f6;--fr-c5:#a855f7;animation:snFrCycle5 4.5s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-spectrum{--fr-a:#ba3535;--fr-w:3px;--fr-c1:#ba3535;--fr-c2:#bf7b08;--fr-c3:#1a9949;--fr-c4:#2e65bf;--fr-c5:#8342c0;animation:snFrCycle5 4.5s ease-in-out infinite;}
.sn-fr.sn-fr-festival{--fr-a:#f43f5e;--fr-w:3px;--fr-c1:#f43f5e;--fr-c2:#facc15;--fr-c3:#2dd4bf;--fr-c4:#818cf8;--fr-c5:#f472b6;animation:snFrCycle5 4.5s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-festival{--fr-a:#be3149;--fr-w:3px;--fr-c1:#be3149;--fr-c2:#c39f10;--fr-c3:#23a594;--fr-c4:#646dc1;--fr-c5:#be588d;animation:snFrCycle5 4.5s ease-in-out infinite;}
.sn-fr.sn-fr-disco{--fr-a:#22d3ee;--fr-w:3px;--fr-c1:#22d3ee;--fr-c2:#e879f9;--fr-c3:#facc15;--fr-c4:#4ade80;--fr-c5:#fb7185;animation:snFrCycle5 4.5s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-disco{--fr-a:#1aa4b9;--fr-w:3px;--fr-c1:#1aa4b9;--fr-c2:#b45ec2;--fr-c3:#c39f10;--fr-c4:#39ad63;--fr-c5:#c35867;animation:snFrCycle5 4.5s ease-in-out infinite;}
.sn-fr.sn-fr-radar{--fr-a:#4ade80;--fr-w:3px;--fr-b:#14532d;--fr-ow:2px;--fr-os:dashed;--fr-oc:#4ade80;--fr-oo:3px;animation:snFrOrbit 3.0s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-radar{--fr-a:#39ad63;--fr-w:3px;--fr-b:#0f4023;--fr-ow:2px;--fr-os:dashed;--fr-oc:#39ad63;--fr-oo:3px;animation:snFrOrbit 3.0s ease-in-out infinite;}
.sn-fr.sn-fr-halo-drift{--fr-a:#fde68a;--fr-w:3px;--fr-b:#fbbf24;--fr-ow:2px;--fr-os:dashed;--fr-oc:#fde68a;--fr-oo:3px;animation:snFrOrbit 3.0s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-halo-drift{--fr-a:#c5b36b;--fr-w:3px;--fr-b:#c3941c;--fr-ow:2px;--fr-os:dashed;--fr-oc:#c5b36b;--fr-oo:3px;animation:snFrOrbit 3.0s ease-in-out infinite;}
.sn-fr.sn-fr-sonic-ripple{--fr-a:#38bdf8;--fr-w:3px;--fr-b:#818cf8;--fr-ow:2px;--fr-os:dashed;--fr-oc:#38bdf8;--fr-oo:3px;animation:snFrOrbit 3.0s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-sonic-ripple{--fr-a:#2b93c1;--fr-w:3px;--fr-b:#646dc1;--fr-ow:2px;--fr-os:dashed;--fr-oc:#2b93c1;--fr-oo:3px;animation:snFrOrbit 3.0s ease-in-out infinite;}
.sn-fr.sn-fr-twin-flame{--fr-a:#fb923c;--fr-w:3px;--fr-b:#ef4444;animation:snFrAlt 1.4s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-twin-flame{--fr-a:#c3712e;--fr-w:3px;--fr-b:#ba3535;animation:snFrAlt 1.4s ease-in-out infinite;}
.sn-fr.sn-fr-ice-flame{--fr-a:#22d3ee;--fr-w:3px;--fr-b:#a78bfa;animation:snFrAlt 1.4s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-ice-flame{--fr-a:#1aa4b9;--fr-w:3px;--fr-b:#826cc3;animation:snFrAlt 1.4s ease-in-out infinite;}
.sn-fr.sn-fr-yin-yang{--fr-a:#f8fafc;--fr-w:3px;--fr-b:#334155;animation:snFrAlt 1.4s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-yin-yang{--fr-a:#c1c3c4;--fr-w:3px;--fr-b:#273242;animation:snFrAlt 1.4s ease-in-out infinite;}
.sn-fr.sn-fr-aurora-aura{--fr-a:#34d399;--fr-w:3px;--fr-b:transparent;--fr-c1:#34d399;--fr-c2:#38bdf8;--fr-c3:#a78bfa;animation:snFrAura 5.0s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-aurora-aura{--fr-a:#28a477;--fr-w:3px;--fr-b:transparent;--fr-c1:#28a477;--fr-c2:#2b93c1;--fr-c3:#826cc3;animation:snFrAura 5.0s ease-in-out infinite;}
.sn-fr.sn-fr-dream-aura{--fr-a:#f9a8d4;--fr-w:3px;--fr-b:transparent;--fr-c1:#f9a8d4;--fr-c2:#c4b5fd;--fr-c3:#93c5fd;animation:snFrAura 5.0s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-dream-aura{--fr-a:#c283a5;--fr-w:3px;--fr-b:transparent;--fr-c1:#c283a5;--fr-c2:#988dc5;--fr-c3:#7299c5;animation:snFrAura 5.0s ease-in-out infinite;}
.sn-bn.sn-bn-candy-stripes{--bn-img:repeating-linear-gradient(45deg,#be185d 0 16px,#f9a8d4 16px 32px);}
html.theme-light .sn-bn.sn-bn-candy-stripes{--bn-img:repeating-linear-gradient(45deg,#ecbed1 0 16px,#fde6f2 16px 32px);}
.sn-bn.sn-bn-midnight-pinstripe{--bn-img:repeating-linear-gradient(90deg,#0f172a 0 6px,#1e293b 6px 12px);}
html.theme-light .sn-bn.sn-bn-midnight-pinstripe{--bn-img:repeating-linear-gradient(90deg,#bbbec3 0 6px,#c0c3c8 6px 12px);}
.sn-bn.sn-bn-citrus-bands{--bn-img:repeating-linear-gradient(0deg,#ea580c 0 18px,#facc15 18px 36px);}
html.theme-light .sn-bn.sn-bn-citrus-bands{--bn-img:repeating-linear-gradient(0deg,#f9d0ba 0 18px,#fdf0bd 18px 36px);}
.sn-bn.sn-bn-barber-pole{--bn-img:repeating-linear-gradient(-45deg,#1d4ed8 0 14px,#e5e7eb 14px 28px);}
html.theme-light .sn-bn.sn-bn-barber-pole{--bn-img:repeating-linear-gradient(-45deg,#bfcdf4 0 14px,#f7f8f9 14px 28px);}
.sn-bn.sn-bn-forest-rails{--bn-img:repeating-linear-gradient(90deg,#14532d 0 10px,#166534 10px 20px);}
html.theme-light .sn-bn.sn-bn-forest-rails{--bn-img:repeating-linear-gradient(90deg,#bdcec4 0 10px,#bdd3c6 10px 20px);}
.sn-bn.sn-bn-rosewood-slats{--bn-img:repeating-linear-gradient(90deg,#7c2d12 0 12px,#9a3412 12px 24px);}
html.theme-light .sn-bn.sn-bn-rosewood-slats{--bn-img:repeating-linear-gradient(90deg,#dac4bc 0 12px,#e2c6bc 12px 24px);}
.sn-bn.sn-bn-ice-cream-stripes{--bn-img:repeating-linear-gradient(-45deg,#67e8f9 0 15px,#fbcfe8 15px 30px);}
html.theme-light .sn-bn.sn-bn-ice-cream-stripes{--bn-img:repeating-linear-gradient(-45deg,#d4f8fd 0 15px,#fdf1f8 15px 30px);}
.sn-bn.sn-bn-hazard{--bn-img:repeating-linear-gradient(45deg,#111827 0 16px,#facc15 16px 32px);}
html.theme-light .sn-bn.sn-bn-hazard{--bn-img:repeating-linear-gradient(45deg,#bcbec2 0 16px,#fdf0bd 16px 32px);}
.sn-bn.sn-bn-peach-fuzz{--bn-img:linear-gradient(135deg,#fb923c,#f472b6);}
html.theme-light .sn-bn.sn-bn-peach-fuzz{--bn-img:linear-gradient(135deg,#fde0c8,#fbd7ea);}
.sn-bn.sn-bn-midnight-city{--bn-img:linear-gradient(160deg,#0f172a,#312e81,#7c3aed);}
html.theme-light .sn-bn.sn-bn-midnight-city{--bn-img:linear-gradient(160deg,#bbbec3,#c5c4db,#dac7f9);}
.sn-bn.sn-bn-mojito{--bn-img:linear-gradient(120deg,#065f46,#34d399,#d9f99d);}
html.theme-light .sn-bn.sn-bn-mojito{--bn-img:linear-gradient(120deg,#b9d2cb,#c6f2e2,#f4fde3);}
.sn-bn.sn-bn-dusk-rose{--bn-img:linear-gradient(150deg,#4c1d95,#be185d,#fb7185);}
html.theme-light .sn-bn.sn-bn-dusk-rose{--bn-img:linear-gradient(150deg,#ccbfe1,#ecbed1,#fdd7dc);}
.sn-bn.sn-bn-glacier{--bn-img:linear-gradient(180deg,#0c4a6e,#38bdf8,#e0f2fe);}
html.theme-light .sn-bn.sn-bn-glacier{--bn-img:linear-gradient(180deg,#baccd6,#c7ecfd,#f6fbfe);}
.sn-bn.sn-bn-blood-orange{--bn-img:linear-gradient(135deg,#7f1d1d,#ea580c,#fbbf24);}
html.theme-light .sn-bn.sn-bn-blood-orange{--bn-img:linear-gradient(135deg,#dbbfbf,#f9d0ba,#fdedc1);}
.sn-bn.sn-bn-mulberry{--bn-img:linear-gradient(135deg,#3b0764,#86198f,#f0abfc);}
html.theme-light .sn-bn.sn-bn-mulberry{--bn-img:linear-gradient(135deg,#c8b9d3,#ddbedf,#fae7fe);}
.sn-bn.sn-bn-pine-mist{--bn-img:linear-gradient(160deg,#052e16,#166534,#86efac);}
html.theme-light .sn-bn.sn-bn-pine-mist{--bn-img:linear-gradient(160deg,#b9c4bd,#bdd3c6,#ddfae7);}
.sn-bn.sn-bn-cherry-cola{--bn-img:linear-gradient(120deg,#450a0a,#9f1239,#fb7185);}
html.theme-light .sn-bn.sn-bn-cherry-cola{--bn-img:linear-gradient(120deg,#cababa,#e4bcc7,#fdd7dc);}
.sn-bn.sn-bn-lagoon{--bn-img:linear-gradient(135deg,#0e7490,#2dd4bf,#bef264);}
html.theme-light .sn-bn.sn-bn-lagoon{--bn-img:linear-gradient(135deg,#bbd8df,#c4f2ed,#ecfbd3);}
.sn-bn.sn-bn-northern-haze{--bn-img:radial-gradient(circle at 15% 20%,#22d3ee 0,transparent 45%),radial-gradient(circle at 80% 30%,#a78bfa 0,transparent 45%),radial-gradient(circle at 50% 90%,#34d399 0,transparent 50%),linear-gradient(#0f172a,#0f172a);}
html.theme-light .sn-bn.sn-bn-northern-haze{--bn-img:radial-gradient(circle at 15% 20%,#c1f2fa 0,transparent 45%),radial-gradient(circle at 80% 30%,#e6defd 0,transparent 45%),radial-gradient(circle at 50% 90%,#c6f2e2 0,transparent 50%),linear-gradient(#bbbec3,#bbbec3);}
.sn-bn.sn-bn-candy-mesh{--bn-img:radial-gradient(circle at 10% 10%,#f472b6 0,transparent 50%),radial-gradient(circle at 90% 20%,#818cf8 0,transparent 50%),radial-gradient(circle at 60% 100%,#fde68a 0,transparent 45%),linear-gradient(#1e1b4b,#1e1b4b);}
html.theme-light .sn-bn.sn-bn-candy-mesh{--bn-img:radial-gradient(circle at 10% 10%,#fbd7ea 0,transparent 50%),radial-gradient(circle at 90% 20%,#dbdefd 0,transparent 50%),radial-gradient(circle at 60% 100%,#fef8de 0,transparent 45%),linear-gradient(#c0bfcc,#c0bfcc);}
.sn-bn.sn-bn-ember-mesh{--bn-img:radial-gradient(circle at 20% 80%,#f97316 0,transparent 50%),radial-gradient(circle at 85% 20%,#dc2626 0,transparent 50%),radial-gradient(circle at 55% 50%,#fbbf24 0,transparent 35%),linear-gradient(#1c0a0a,#1c0a0a);}
html.theme-light .sn-bn.sn-bn-ember-mesh{--bn-img:radial-gradient(circle at 20% 80%,#fdd7bd 0,transparent 50%),radial-gradient(circle at 85% 20%,#f5c2c2 0,transparent 50%),radial-gradient(circle at 55% 50%,#fdedc1 0,transparent 35%),linear-gradient(#bfbaba,#bfbaba);}
.sn-bn.sn-bn-deep-sea-mesh{--bn-img:radial-gradient(circle at 15% 30%,#0ea5e9 0,transparent 50%),radial-gradient(circle at 85% 70%,#14b8a6 0,transparent 50%),radial-gradient(circle at 50% 0%,#6366f1 0,transparent 40%),linear-gradient(#020617,#020617);}
html.theme-light .sn-bn.sn-bn-deep-sea-mesh{--bn-img:radial-gradient(circle at 15% 30%,#bbe5f8 0,transparent 50%),radial-gradient(circle at 85% 70%,#bdebe6 0,transparent 50%),radial-gradient(circle at 50% 0%,#d3d4fb 0,transparent 40%),linear-gradient(#b8b9be,#b8b9be);}
.sn-bn.sn-bn-orchid-mesh{--bn-img:radial-gradient(circle at 10% 60%,#e879f9 0,transparent 50%),radial-gradient(circle at 90% 40%,#60a5fa 0,transparent 45%),radial-gradient(circle at 55% 0%,#fb7185 0,transparent 40%),linear-gradient(#2e1065,#2e1065);}
html.theme-light .sn-bn.sn-bn-orchid-mesh{--bn-img:radial-gradient(circle at 10% 60%,#f8d9fd 0,transparent 50%),radial-gradient(circle at 90% 40%,#d2e5fd 0,transparent 45%),radial-gradient(circle at 55% 0%,#fdd7dc 0,transparent 40%),linear-gradient(#c4bcd3,#c4bcd3);}
.sn-bn.sn-bn-lime-spritz{--bn-img:radial-gradient(circle at 20% 20%,#bef264 0,transparent 45%),radial-gradient(circle at 80% 80%,#22d3ee 0,transparent 45%),radial-gradient(circle at 60% 10%,#fde047 0,transparent 35%),linear-gradient(#064e3b,#064e3b);}
html.theme-light .sn-bn.sn-bn-lime-spritz{--bn-img:radial-gradient(circle at 20% 20%,#ecfbd3 0,transparent 45%),radial-gradient(circle at 80% 80%,#c1f2fa 0,transparent 45%),radial-gradient(circle at 60% 10%,#fef6cb 0,transparent 35%),linear-gradient(#b9cdc8,#b9cdc8);}
.sn-bn.sn-bn-peach-sky{--bn-img:radial-gradient(circle at 10% 80%,#fdba74 0,transparent 55%),radial-gradient(circle at 90% 30%,#fda4af 0,transparent 55%),radial-gradient(circle at 50% 0%,#c4b5fd 0,transparent 45%),linear-gradient(#7c2d12,#7c2d12);}
html.theme-light .sn-bn.sn-bn-peach-sky{--bn-img:radial-gradient(circle at 10% 80%,#feebd8 0,transparent 55%),radial-gradient(circle at 90% 30%,#fee5e8 0,transparent 55%),radial-gradient(circle at 50% 0%,#eeeafe 0,transparent 45%),linear-gradient(#dac4bc,#dac4bc);}
.sn-bn.sn-bn-monochrome-fog{--bn-img:radial-gradient(circle at 20% 30%,#94a3b8 0,transparent 55%),radial-gradient(circle at 80% 70%,#64748b 0,transparent 55%),radial-gradient(circle at 50% 50%,#cbd5e1 0,transparent 30%),linear-gradient(#0f172a,#0f172a);}
html.theme-light .sn-bn.sn-bn-monochrome-fog{--bn-img:radial-gradient(circle at 20% 30%,#e1e5eb 0,transparent 55%),radial-gradient(circle at 80% 70%,#d3d8de 0,transparent 55%),radial-gradient(circle at 50% 50%,#f0f3f6 0,transparent 30%),linear-gradient(#bbbec3,#bbbec3);}
.sn-bn.sn-bn-graph-paper{--bn-img:linear-gradient(rgba(8,145,178,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(8,145,178,.35) 1px,transparent 1px),linear-gradient(#ecfeff,#ecfeff);--bn-size:20px 20px,20px 20px,100% 100%;}
html.theme-light .sn-bn.sn-bn-graph-paper{--bn-img:linear-gradient(rgba(8,145,178,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(8,145,178,.35) 1px,transparent 1px),linear-gradient(#f9feff,#f9feff);--bn-size:20px 20px,20px 20px,100% 100%;}
.sn-bn.sn-bn-chalkboard-grid{--bn-img:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(#14532d,#14532d);--bn-size:24px 24px,24px 24px,100% 100%;}
html.theme-light .sn-bn.sn-bn-chalkboard-grid{--bn-img:linear-gradient(rgba(255,255,255,0.43) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.43) 1px,transparent 1px),linear-gradient(#bdcec4,#bdcec4);--bn-size:24px 24px,24px 24px,100% 100%;}
.sn-bn.sn-bn-neon-grid{--bn-img:linear-gradient(rgba(217,70,239,.45) 1px,transparent 1px),linear-gradient(90deg,rgba(217,70,239,.45) 1px,transparent 1px),linear-gradient(#0b0221,#0b0221);--bn-size:26px 26px,26px 26px,100% 100%;}
html.theme-light .sn-bn.sn-bn-neon-grid{--bn-img:linear-gradient(rgba(217,70,239,.45) 1px,transparent 1px),linear-gradient(90deg,rgba(217,70,239,.45) 1px,transparent 1px),linear-gradient(#bab8c0,#bab8c0);--bn-size:26px 26px,26px 26px,100% 100%;}
.sn-bn.sn-bn-cyber-lime{--bn-img:linear-gradient(rgba(163,230,53,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(163,230,53,.4) 1px,transparent 1px),linear-gradient(#0a0a0a,#0a0a0a);--bn-size:18px 18px,18px 18px,100% 100%;}
html.theme-light .sn-bn.sn-bn-cyber-lime{--bn-img:linear-gradient(rgba(163,230,53,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(163,230,53,.4) 1px,transparent 1px),linear-gradient(#bababa,#bababa);--bn-size:18px 18px,18px 18px,100% 100%;}
.sn-bn.sn-bn-polka-pink{--bn-img:radial-gradient(circle,#fbcfe8 3px,transparent 4px),linear-gradient(#9d174d,#9d174d);--bn-size:26px 26px,100% 100%;}
html.theme-light .sn-bn.sn-bn-polka-pink{--bn-img:radial-gradient(circle,#fdf1f8 3px,transparent 4px),linear-gradient(#e3becd,#e3becd);--bn-size:26px 26px,100% 100%;}
.sn-bn.sn-bn-polka-navy{--bn-img:radial-gradient(circle,rgba(255,255,255,.35) 3px,transparent 4px),linear-gradient(#1e3a8a,#1e3a8a);--bn-size:22px 22px,100% 100%;}
html.theme-light .sn-bn.sn-bn-polka-navy{--bn-img:radial-gradient(circle,rgba(255,255,255,0.84) 3px,transparent 4px),linear-gradient(#c0c7de,#c0c7de);--bn-size:22px 22px,100% 100%;}
.sn-bn.sn-bn-bubble-bath{--bn-img:radial-gradient(circle,rgba(255,255,255,.4) 3px,transparent 4px),linear-gradient(#0891b2,#0891b2);--bn-size:34px 34px,100% 100%;}
html.theme-light .sn-bn.sn-bn-bubble-bath{--bn-img:radial-gradient(circle,rgba(255,255,255,0.9) 3px,transparent 4px),linear-gradient(#b9e0e9,#b9e0e9);--bn-size:34px 34px,100% 100%;}
.sn-bn.sn-bn-starry-dots{--bn-img:radial-gradient(circle,#fde68a 3px,transparent 4px),linear-gradient(#312e81,#312e81);--bn-size:30px 30px,100% 100%;}
html.theme-light .sn-bn.sn-bn-starry-dots{--bn-img:radial-gradient(circle,#fef8de 3px,transparent 4px),linear-gradient(#c5c4db,#c5c4db);--bn-size:30px 30px,100% 100%;}
.sn-bn.sn-bn-zigzag-coral{--bn-img:linear-gradient(135deg,#fb7185 25%,transparent 25%),linear-gradient(225deg,#fb7185 25%,transparent 25%),linear-gradient(315deg,#fb7185 25%,transparent 25%),linear-gradient(45deg,#fb7185 25%,#be123c 25%);--bn-size:32px 32px,32px 32px,32px 32px,32px 32px;--bn-pos:-16px 0,-16px 0,0 0,0 0;}
html.theme-light .sn-bn.sn-bn-zigzag-coral{--bn-img:linear-gradient(135deg,#fdd7dc 25%,transparent 25%),linear-gradient(225deg,#fdd7dc 25%,transparent 25%),linear-gradient(315deg,#fdd7dc 25%,transparent 25%),linear-gradient(45deg,#fdd7dc 25%,#ecbcc8 25%);--bn-size:32px 32px,32px 32px,32px 32px,32px 32px;--bn-pos:-16px 0,-16px 0,0 0,0 0;}
.sn-bn.sn-bn-plaid-picnic{--bn-img:repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 8px,transparent 8px 32px),repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 8px,transparent 8px 32px),linear-gradient(#b91c1c,#b91c1c);}
html.theme-light .sn-bn.sn-bn-plaid-picnic{--bn-img:repeating-linear-gradient(0deg,rgba(255,255,255,0.53) 0 8px,transparent 8px 32px),repeating-linear-gradient(90deg,rgba(255,255,255,0.53) 0 8px,transparent 8px 32px),linear-gradient(#ebbfbf,#ebbfbf);}
.sn-bn.sn-bn-gingham-sky{--bn-img:repeating-linear-gradient(0deg,rgba(255,255,255,.35) 0 12px,transparent 12px 24px),repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 12px,transparent 12px 24px),linear-gradient(#0284c7,#0284c7);}
html.theme-light .sn-bn.sn-bn-gingham-sky{--bn-img:repeating-linear-gradient(0deg,rgba(255,255,255,0.84) 0 12px,transparent 12px 24px),repeating-linear-gradient(90deg,rgba(255,255,255,0.84) 0 12px,transparent 12px 24px),linear-gradient(#b8dcef,#b8dcef);}
.sn-bn.sn-bn-argyle-wine{--bn-img:linear-gradient(45deg,rgba(255,255,255,.12) 25%,transparent 25% 75%,rgba(255,255,255,.12) 75%),linear-gradient(-45deg,rgba(0,0,0,.25) 25%,transparent 25% 75%,rgba(0,0,0,.25) 75%),linear-gradient(#7f1d1d,#7f1d1d);--bn-size:36px 36px,36px 36px,100% 100%;}
html.theme-light .sn-bn.sn-bn-argyle-wine{--bn-img:linear-gradient(45deg,rgba(255,255,255,0.29) 25%,transparent 25% 75%,rgba(255,255,255,0.29) 75%),linear-gradient(-45deg,rgba(0,0,0,.25) 25%,transparent 25% 75%,rgba(0,0,0,.25) 75%),linear-gradient(#dbbfbf,#dbbfbf);--bn-size:36px 36px,36px 36px,100% 100%;}
.sn-bn.sn-bn-fish-scales{--bn-img:radial-gradient(circle at 50% 0,transparent 48%,rgba(255,255,255,.25) 50% 54%,transparent 56%),linear-gradient(#0e7490,#0e7490);--bn-size:28px 16px,100% 100%;}
html.theme-light .sn-bn.sn-bn-fish-scales{--bn-img:radial-gradient(circle at 50% 0,transparent 48%,rgba(255,255,255,0.6) 50% 54%,transparent 56%),linear-gradient(#bbd8df,#bbd8df);--bn-size:28px 16px,100% 100%;}
.sn-bn.sn-bn-tiny-triangles{--bn-img:conic-gradient(from 150deg at 50% 50%,#7c3aed 0 60deg,#4c1d95 0 120deg,#6d28d9 0 180deg,#4c1d95 0 240deg,#7c3aed 0 300deg,#5b21b6 0);--bn-size:30px 26px;}
html.theme-light .sn-bn.sn-bn-tiny-triangles{--bn-img:conic-gradient(from 150deg at 50% 50%,#dac7f9 0 60deg,#ccbfe1 0 120deg,#d6c2f4 0 180deg,#ccbfe1 0 240deg,#dac7f9 0 300deg,#d1c0ea 0);--bn-size:30px 26px;}
.sn-bn.sn-bn-brick-wall{--bn-img:linear-gradient(rgba(0,0,0,.35) 3px,transparent 3px),linear-gradient(90deg,rgba(0,0,0,.35) 3px,transparent 3px),linear-gradient(#b45309,#b45309);--bn-size:60px 26px,60px 26px,100% 100%;}
html.theme-light .sn-bn.sn-bn-brick-wall{--bn-img:linear-gradient(rgba(0,0,0,.35) 3px,transparent 3px),linear-gradient(90deg,rgba(0,0,0,.35) 3px,transparent 3px),linear-gradient(#eaceba,#eaceba);--bn-size:60px 26px,60px 26px,100% 100%;}
.sn-bn.sn-bn-honey-comb{--bn-img:radial-gradient(circle farthest-side at 0% 50%,#fbbf24 23.5%,transparent 24%),radial-gradient(circle farthest-side at 100% 50%,#fbbf24 23.5%,transparent 24%),linear-gradient(#b45309,#b45309);--bn-size:42px 48px,42px 48px,auto;--bn-pos:21px 0,0 0,0 0;}
html.theme-light .sn-bn.sn-bn-honey-comb{--bn-img:radial-gradient(circle farthest-side at 0% 50%,#fdedc1 23.5%,transparent 24%),radial-gradient(circle farthest-side at 100% 50%,#fdedc1 23.5%,transparent 24%),linear-gradient(#eaceba,#eaceba);--bn-size:42px 48px,42px 48px,auto;--bn-pos:21px 0,0 0,0 0;}
.sn-bn.sn-bn-sunrise-horizon{--bn-img:radial-gradient(circle at 50% 100%,#fde047 0 18%,#fb923c 19% 30%,transparent 31%),linear-gradient(180deg,#1e1b4b,#9d174d 60%,#f97316);}
html.theme-light .sn-bn.sn-bn-sunrise-horizon{--bn-img:radial-gradient(circle at 50% 100%,#fef6cb 0 18%,#fde0c8 19% 30%,transparent 31%),linear-gradient(180deg,#c0bfcc,#e3becd 60%,#fdd7bd);}
.sn-bn.sn-bn-desert-dune{--bn-img:radial-gradient(ellipse at 20% 120%,#92400e 0 40%,transparent 41%),radial-gradient(ellipse at 80% 130%,#b45309 0 45%,transparent 46%),linear-gradient(180deg,#fcd34d,#fb923c);}
html.theme-light .sn-bn.sn-bn-desert-dune{--bn-img:radial-gradient(ellipse at 20% 120%,#e0c9bb 0 40%,transparent 41%),radial-gradient(ellipse at 80% 130%,#eaceba 0 45%,transparent 46%),linear-gradient(180deg,#fef2cd,#fde0c8);}
.sn-bn.sn-bn-alpine-peaks{--bn-img:conic-gradient(from 135deg at 25% 100%,transparent 0 0,#334155 0 90deg,transparent 0),conic-gradient(from 135deg at 70% 100%,transparent 0 0,#1e293b 0 90deg,transparent 0),linear-gradient(180deg,#38bdf8,#e0f2fe);--bn-size:100% 100%,100% 100%,100% 100%;}
html.theme-light .sn-bn.sn-bn-alpine-peaks{--bn-img:conic-gradient(from 135deg at 25% 100%,transparent 0 0,#c5c9cf 0 90deg,transparent 0),conic-gradient(from 135deg at 70% 100%,transparent 0 0,#c0c3c8 0 90deg,transparent 0),linear-gradient(180deg,#c7ecfd,#f6fbfe);--bn-size:100% 100%,100% 100%,100% 100%;}
.sn-bn.sn-bn-moonlit-lake{--bn-img:radial-gradient(circle at 75% 25%,#f8fafc 0 6%,rgba(248,250,252,.25) 7% 12%,transparent 13%),linear-gradient(180deg,#020617 0 60%,#0c4a6e 60% 100%);}
html.theme-light .sn-bn.sn-bn-moonlit-lake{--bn-img:radial-gradient(circle at 75% 25%,#fdfdfe 0 6%,rgba(248,250,252,.25) 7% 12%,transparent 13%),linear-gradient(180deg,#b8b9be 0 60%,#baccd6 60% 100%);}
.sn-bn.sn-bn-cherry-blossom{--bn-img:radial-gradient(circle at 20% 30%,#fbcfe8 4px,transparent 5px),radial-gradient(circle at 70% 60%,#f9a8d4 5px,transparent 6px),radial-gradient(circle at 45% 85%,#fce7f3 4px,transparent 5px),linear-gradient(180deg,#831843,#be185d);--bn-size:70px 70px,90px 90px,60px 60px,100% 100%;}
html.theme-light .sn-bn.sn-bn-cherry-blossom{--bn-img:radial-gradient(circle at 20% 30%,#fdf1f8 4px,transparent 5px),radial-gradient(circle at 70% 60%,#fde6f2 5px,transparent 6px),radial-gradient(circle at 45% 85%,#fef8fb 4px,transparent 5px),linear-gradient(180deg,#dcbeca,#ecbed1);--bn-size:70px 70px,90px 90px,60px 60px,100% 100%;}
.sn-bn.sn-bn-starfield{--bn-img:radial-gradient(circle at 20% 40%,rgba(255,255,255,.9) 1px,transparent 2px),radial-gradient(circle at 60% 70%,rgba(255,255,255,.7) 1px,transparent 2px),radial-gradient(circle at 80% 25%,rgba(255,255,255,.9) 1px,transparent 2px),linear-gradient(180deg,#020617,#0f172a);--bn-size:70px 70px,90px 90px,50px 50px,100% 100%;}
html.theme-light .sn-bn.sn-bn-starfield{--bn-img:radial-gradient(circle at 20% 40%,rgba(255,255,255,0.9) 1px,transparent 2px),radial-gradient(circle at 60% 70%,rgba(255,255,255,0.9) 1px,transparent 2px),radial-gradient(circle at 80% 25%,rgba(255,255,255,0.9) 1px,transparent 2px),linear-gradient(180deg,#b8b9be,#bbbec3);--bn-size:70px 70px,90px 90px,50px 50px,100% 100%;}
.sn-bn.sn-bn-nebula-core{--bn-img:radial-gradient(circle at 30% 50%,rgba(244,114,182,.7),transparent 45%),radial-gradient(circle at 70% 40%,rgba(96,165,250,.7),transparent 45%),radial-gradient(circle at 20% 20%,rgba(255,255,255,.85) 1px,transparent 2px),linear-gradient(#0b0221,#0b0221);--bn-size:100% 100%,100% 100%,60px 60px,100% 100%;}
html.theme-light .sn-bn.sn-bn-nebula-core{--bn-img:radial-gradient(circle at 30% 50%,rgba(244,114,182,.7),transparent 45%),radial-gradient(circle at 70% 40%,rgba(96,165,250,.7),transparent 45%),radial-gradient(circle at 20% 20%,rgba(255,255,255,0.9) 1px,transparent 2px),linear-gradient(#bab8c0,#bab8c0);--bn-size:100% 100%,100% 100%,60px 60px,100% 100%;}
.sn-bn.sn-bn-tropical-drift{--bn-img:linear-gradient(120deg,#064e3b,#f59e0b,#db2777,#064e3b);--bn-size:300% 300%;--bn-anim:snBnShift 11s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-tropical-drift{--bn-img:linear-gradient(120deg,#b9cdc8,#fce3ba,#f4c2d8,#b9cdc8);--bn-size:300% 300%;--bn-anim:snBnShift 11s ease-in-out infinite;}
.sn-bn.sn-bn-violet-tide{--bn-img:linear-gradient(120deg,#1e1b4b,#6d28d9,#db2777,#1e1b4b);--bn-size:300% 300%;--bn-anim:snBnShift 10s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-violet-tide{--bn-img:linear-gradient(120deg,#c0bfcc,#d6c2f4,#f4c2d8,#c0bfcc);--bn-size:300% 300%;--bn-anim:snBnShift 10s ease-in-out infinite;}
.sn-bn.sn-bn-citrus-drift{--bn-img:linear-gradient(120deg,#9a3412,#facc15,#84cc16,#9a3412);--bn-size:300% 300%;--bn-anim:snBnShift 9s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-citrus-drift{--bn-img:linear-gradient(120deg,#e2c6bc,#fdf0bd,#dcf0bd,#e2c6bc);--bn-size:300% 300%;--bn-anim:snBnShift 9s ease-in-out infinite;}
.sn-bn.sn-bn-glacier-drift{--bn-img:linear-gradient(120deg,#0c4a6e,#67e8f9,#e0f2fe,#0c4a6e);--bn-size:300% 300%;--bn-anim:snBnShift 12s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-glacier-drift{--bn-img:linear-gradient(120deg,#baccd6,#d4f8fd,#f6fbfe,#baccd6);--bn-size:300% 300%;--bn-anim:snBnShift 12s ease-in-out infinite;}
.sn-bn.sn-bn-rose-gold-drift{--bn-img:linear-gradient(120deg,#7f1d1d,#fda4af,#fcd34d,#7f1d1d);--bn-size:300% 300%;--bn-anim:snBnShift 10s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-rose-gold-drift{--bn-img:linear-gradient(120deg,#dbbfbf,#fee5e8,#fef2cd,#dbbfbf);--bn-size:300% 300%;--bn-anim:snBnShift 10s ease-in-out infinite;}
.sn-bn.sn-bn-toxic-tide{--bn-img:linear-gradient(120deg,#052e16,#a3e635,#22d3ee,#052e16);--bn-size:300% 300%;--bn-anim:snBnShift 8s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-toxic-tide{--bn-img:linear-gradient(120deg,#b9c4bd,#e5f8c6,#c1f2fa,#b9c4bd);--bn-size:300% 300%;--bn-anim:snBnShift 8s ease-in-out infinite;}
.sn-bn.sn-bn-dragon-fire{--bn-img:linear-gradient(120deg,#450a0a,#dc2626,#fbbf24,#450a0a);--bn-size:300% 300%;--bn-anim:snBnShift 6s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-dragon-fire{--bn-img:linear-gradient(120deg,#cababa,#f5c2c2,#fdedc1,#cababa);--bn-size:300% 300%;--bn-anim:snBnShift 6s ease-in-out infinite;}
.sn-bn.sn-bn-synthwave{--bn-img:linear-gradient(120deg,#0f0326,#c026d3,#22d3ee,#0f0326);--bn-size:300% 300%;--bn-anim:snBnShift 7s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-synthwave{--bn-img:linear-gradient(120deg,#bbb8c2,#edc2f2,#c1f2fa,#bbb8c2);--bn-size:300% 300%;--bn-anim:snBnShift 7s ease-in-out infinite;}
.sn-bn.sn-bn-bubblegum-sky{--bn-img:linear-gradient(120deg,#be185d,#38bdf8,#fef08a,#be185d);--bn-size:300% 300%;--bn-anim:snBnShift 12s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-bubblegum-sky{--bn-img:linear-gradient(120deg,#ecbed1,#c7ecfd,#fefade,#ecbed1);--bn-size:300% 300%;--bn-anim:snBnShift 12s ease-in-out infinite;}
.sn-bn.sn-bn-cosmic-candy{--bn-img:linear-gradient(120deg,#4c1d95,#ec4899,#38bdf8,#4c1d95);--bn-size:300% 300%;--bn-anim:snBnShift 9s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-cosmic-candy{--bn-img:linear-gradient(120deg,#ccbfe1,#f9cbe2,#c7ecfd,#ccbfe1);--bn-size:300% 300%;--bn-anim:snBnShift 9s ease-in-out infinite;}
.sn-bn.sn-bn-emerald-dream{--bn-img:linear-gradient(120deg,#022c22,#10b981,#a7f3d0,#022c22);--bn-size:300% 300%;--bn-anim:snBnShift 11s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-emerald-dream{--bn-img:linear-gradient(120deg,#b8c3c1,#bcebdb,#e6fbf1,#b8c3c1);--bn-size:300% 300%;--bn-anim:snBnShift 11s ease-in-out infinite;}
.sn-bn.sn-bn-twilight-wave{--bn-img:linear-gradient(120deg,#172554,#7c3aed,#fb7185,#172554);--bn-size:300% 300%;--bn-anim:snBnShift 8s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-twilight-wave{--bn-img:linear-gradient(120deg,#bec1cf,#dac7f9,#fdd7dc,#bec1cf);--bn-size:300% 300%;--bn-anim:snBnShift 8s ease-in-out infinite;}
.sn-bn.sn-bn-molten-gold{--bn-img:linear-gradient(120deg,#451a03,#d97706,#fde68a,#451a03);--bn-size:300% 300%;--bn-anim:snBnShift 7s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-molten-gold{--bn-img:linear-gradient(120deg,#cabeb8,#f4d8b9,#fef8de,#cabeb8);--bn-size:300% 300%;--bn-anim:snBnShift 7s ease-in-out infinite;}
.sn-bn.sn-bn-lavender-haze{--bn-img:linear-gradient(120deg,#2e1065,#a78bfa,#f0abfc,#2e1065);--bn-size:300% 300%;--bn-anim:snBnShift 12s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-lavender-haze{--bn-img:linear-gradient(120deg,#c4bcd3,#e6defd,#fae7fe,#c4bcd3);--bn-size:300% 300%;--bn-anim:snBnShift 12s ease-in-out infinite;}
.sn-bn.sn-bn-barber-spin{--bn-img:repeating-linear-gradient(45deg,#dc2626 0 16px,#f8fafc 16px 32px);--bn-size:45.25px 45.25px;--bn-from:0 0;--bn-to:45.25px 0px;--bn-anim:snBnScroll 2.5s linear infinite;}
html.theme-light .sn-bn.sn-bn-barber-spin{--bn-img:repeating-linear-gradient(45deg,#f5c2c2 0 16px,#fdfdfe 16px 32px);--bn-size:45.25px 45.25px;--bn-from:0 0;--bn-to:45.25px 0px;--bn-anim:snBnScroll 2.5s linear infinite;}
.sn-bn.sn-bn-racing-stripes{--bn-img:repeating-linear-gradient(0deg,#facc15 0 14px,#111827 14px 28px);--bn-size:28px 28px;--bn-from:0 0;--bn-to:0px 28px;--bn-anim:snBnScroll 1.4s linear infinite;}
html.theme-light .sn-bn.sn-bn-racing-stripes{--bn-img:repeating-linear-gradient(0deg,#fdf0bd 0 14px,#bcbec2 14px 28px);--bn-size:28px 28px;--bn-from:0 0;--bn-to:0px 28px;--bn-anim:snBnScroll 1.4s linear infinite;}
.sn-bn.sn-bn-conveyor-belt{--bn-img:repeating-linear-gradient(90deg,#334155 0 22px,#475569 22px 24px);--bn-size:24px 100%;--bn-from:0 0;--bn-to:24px 0px;--bn-anim:snBnScroll 1.2s linear infinite;}
html.theme-light .sn-bn.sn-bn-conveyor-belt{--bn-img:repeating-linear-gradient(90deg,#c5c9cf 0 22px,#cbcfd5 22px 24px);--bn-size:24px 100%;--bn-from:0 0;--bn-to:24px 0px;--bn-anim:snBnScroll 1.2s linear infinite;}
.sn-bn.sn-bn-disco-floor{--bn-img:conic-gradient(#ec4899 25%,#22d3ee 0 50%,#facc15 0 75%,#8b5cf6 0);--bn-size:60px 60px;--bn-from:0 0;--bn-to:60px 60px;--bn-anim:snBnScroll 5s linear infinite;}
html.theme-light .sn-bn.sn-bn-disco-floor{--bn-img:conic-gradient(#f9cbe2 25%,#c1f2fa 0 50%,#fdf0bd 0 75%,#ded1fc 0);--bn-size:60px 60px;--bn-from:0 0;--bn-to:60px 60px;--bn-anim:snBnScroll 5s linear infinite;}
.sn-bn.sn-bn-checker-rush{--bn-img:conic-gradient(#0f172a 25%,#e11d48 0 50%,#0f172a 0 75%,#e11d48 0);--bn-size:50px 50px;--bn-from:0 0;--bn-to:50px 0px;--bn-anim:snBnScroll 2.4s linear infinite;}
html.theme-light .sn-bn.sn-bn-checker-rush{--bn-img:conic-gradient(#bbbec3 25%,#f6bfcb 0 50%,#bbbec3 0 75%,#f6bfcb 0);--bn-size:50px 50px;--bn-from:0 0;--bn-to:50px 0px;--bn-anim:snBnScroll 2.4s linear infinite;}
.sn-bn.sn-bn-rain-check{--bn-img:linear-gradient(105deg,transparent 45%,rgba(186,230,253,.55) 46% 48%,transparent 49%),linear-gradient(180deg,#0f172a,#1e3a8a);--bn-size:20px 36px,100% 100%;--bn-from:0 0,0 0;--bn-to:-20px 36px,0 0;--bn-anim:snBnScroll 0.8s linear infinite;}
html.theme-light .sn-bn.sn-bn-rain-check{--bn-img:linear-gradient(105deg,transparent 45%,rgba(186,230,253,.55) 46% 48%,transparent 49%),linear-gradient(180deg,#bbbec3,#c0c7de);--bn-size:20px 36px,100% 100%;--bn-from:0 0,0 0;--bn-to:-20px 36px,0 0;--bn-anim:snBnScroll 0.8s linear infinite;}
.sn-bn.sn-bn-ocean-swell{--bn-img:repeating-radial-gradient(circle at 50% 160%,#0c4a6e 0 12px,#0369a1 12px 24px);--bn-size:48px 100%;--bn-from:0 0;--bn-to:48px 0px;--bn-anim:snBnScroll 4s linear infinite;}
html.theme-light .sn-bn.sn-bn-ocean-swell{--bn-img:repeating-radial-gradient(circle at 50% 160%,#baccd6 0 12px,#b8d5e4 12px 24px);--bn-size:48px 100%;--bn-from:0 0;--bn-to:48px 0px;--bn-anim:snBnScroll 4s linear infinite;}
.sn-bn.sn-bn-dot-matrix{--bn-img:radial-gradient(circle,#4ade80 2px,transparent 3px),linear-gradient(#052e16,#052e16);--bn-size:18px 18px,100% 100%;--bn-from:0 0,0 0;--bn-to:18px 18px,0 0;--bn-anim:snBnScroll 2s linear infinite;}
html.theme-light .sn-bn.sn-bn-dot-matrix{--bn-img:radial-gradient(circle,#ccf5db 2px,transparent 3px),linear-gradient(#b9c4bd,#b9c4bd);--bn-size:18px 18px,100% 100%;--bn-from:0 0,0 0;--bn-to:18px 18px,0 0;--bn-anim:snBnScroll 2s linear infinite;}
.sn-bn.sn-bn-brick-road{--bn-img:linear-gradient(rgba(0,0,0,.3) 3px,transparent 3px),linear-gradient(90deg,rgba(0,0,0,.3) 3px,transparent 3px),linear-gradient(#ca8a04,#ca8a04);--bn-size:60px 26px,60px 26px,100% 100%;--bn-from:0 0,0 0,0 0;--bn-to:60px 0px,60px 0px,0 0;--bn-anim:snBnScroll 5s linear infinite;}
html.theme-light .sn-bn.sn-bn-brick-road{--bn-img:linear-gradient(rgba(0,0,0,.3) 3px,transparent 3px),linear-gradient(90deg,rgba(0,0,0,.3) 3px,transparent 3px),linear-gradient(#f0deb8,#f0deb8);--bn-size:60px 26px,60px 26px,100% 100%;--bn-from:0 0,0 0,0 0;--bn-to:60px 0px,60px 0px,0 0;--bn-anim:snBnScroll 5s linear infinite;}
.sn-bn.sn-bn-triangle-run{--bn-img:conic-gradient(from 150deg at 50% 50%,#0891b2 0 60deg,#164e63 0 120deg,#06b6d4 0 180deg,#164e63 0 240deg,#0891b2 0 300deg,#155e75 0);--bn-size:30px 26px;--bn-from:0 0;--bn-to:30px 26px;--bn-anim:snBnScroll 3s linear infinite;}
html.theme-light .sn-bn.sn-bn-triangle-run{--bn-img:conic-gradient(from 150deg at 50% 50%,#b9e0e9 0 60deg,#bdcdd3 0 120deg,#b9eaf2 0 180deg,#bdcdd3 0 240deg,#b9e0e9 0 300deg,#bdd1d8 0);--bn-size:30px 26px;--bn-from:0 0;--bn-to:30px 26px;--bn-anim:snBnScroll 3s linear infinite;}
.sn-bn.sn-bn-blizzard{--bn-img:radial-gradient(circle,rgba(255,255,255,.95) 2px,transparent 3px),radial-gradient(circle,rgba(255,255,255,.6) 1.5px,transparent 2.5px),linear-gradient(180deg,#0c4a6e,#1e3a8a);--bn-size:46px 46px,29px 29px,100% 100%;--bn-from:0 0,0 0,0 0;--bn-to:0px 46px,-29px 58px,0 0;--bn-anim:snBnScroll 5s linear infinite;}
html.theme-light .sn-bn.sn-bn-blizzard{--bn-img:radial-gradient(circle,rgba(255,255,255,0.9) 2px,transparent 3px),radial-gradient(circle,rgba(255,255,255,0.9) 1.5px,transparent 2.5px),linear-gradient(180deg,#baccd6,#c0c7de);--bn-size:46px 46px,29px 29px,100% 100%;--bn-from:0 0,0 0,0 0;--bn-to:0px 46px,-29px 58px,0 0;--bn-anim:snBnScroll 5s linear infinite;}
.sn-bn.sn-bn-golden-confetti{--bn-img:radial-gradient(circle,#fde047 2px,transparent 3px),radial-gradient(circle,#f472b6 2px,transparent 3px),linear-gradient(180deg,#312e81,#4c1d95);--bn-size:38px 38px,55px 55px,100% 100%;--bn-from:0 0,0 0,0 0;--bn-to:0px 38px,0px 55px,0 0;--bn-anim:snBnScroll 6s linear infinite;}
html.theme-light .sn-bn.sn-bn-golden-confetti{--bn-img:radial-gradient(circle,#fef6cb 2px,transparent 3px),radial-gradient(circle,#fbd7ea 2px,transparent 3px),linear-gradient(180deg,#c5c4db,#ccbfe1);--bn-size:38px 38px,55px 55px,100% 100%;--bn-from:0 0,0 0,0 0;--bn-to:0px 38px,0px 55px,0 0;--bn-anim:snBnScroll 6s linear infinite;}
.sn-bn.sn-bn-ember-rise{--bn-img:radial-gradient(circle,#fb923c 2px,transparent 3px),radial-gradient(circle,#fde047 1.5px,transparent 2.5px),linear-gradient(0deg,#7f1d1d,#0c0a09);--bn-size:40px 40px,26px 26px,100% 100%;--bn-from:0 0,0 0,0 0;--bn-to:0px -40px,0px -26px,0 0;--bn-anim:snBnScroll 4s linear infinite;}
html.theme-light .sn-bn.sn-bn-ember-rise{--bn-img:radial-gradient(circle,#fde0c8 2px,transparent 3px),radial-gradient(circle,#fef6cb 1.5px,transparent 2.5px),linear-gradient(0deg,#dbbfbf,#bababa);--bn-size:40px 40px,26px 26px,100% 100%;--bn-from:0 0,0 0,0 0;--bn-to:0px -40px,0px -26px,0 0;--bn-anim:snBnScroll 4s linear infinite;}
.sn-bn.sn-bn-code-rain{--bn-img:radial-gradient(circle,rgba(74,222,128,.95) 1.5px,transparent 2.5px),radial-gradient(circle,rgba(34,197,94,.55) 1.5px,transparent 2.5px),linear-gradient(180deg,#022c22,#052e16);--bn-size:16px 34px,16px 21px,100% 100%;--bn-from:0 0,0 0,0 0;--bn-to:0px 34px,8px 42px,0 0;--bn-anim:snBnScroll 2.2s linear infinite;}
html.theme-light .sn-bn.sn-bn-code-rain{--bn-img:radial-gradient(circle,rgba(74,222,128,.95) 1.5px,transparent 2.5px),radial-gradient(circle,rgba(34,197,94,.55) 1.5px,transparent 2.5px),linear-gradient(180deg,#b8c3c1,#b9c4bd);--bn-size:16px 34px,16px 21px,100% 100%;--bn-from:0 0,0 0,0 0;--bn-to:0px 34px,8px 42px,0 0;--bn-anim:snBnScroll 2.2s linear infinite;}
.sn-bn.sn-bn-twinkling-night{--bn-img:radial-gradient(circle at 20% 40%,rgba(255,255,255,.95) 1.5px,transparent 2.5px),radial-gradient(circle at 60% 70%,rgba(255,255,255,.8) 1.5px,transparent 2.5px),radial-gradient(circle at 80% 25%,rgba(255,255,255,.95) 1.5px,transparent 2.5px),linear-gradient(135deg,#020617,#1e1b4b);--bn-size:70px 70px,90px 90px,50px 50px,100% 100%;--bn-anim:snBnTwinkle 3.4s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-twinkling-night{--bn-img:radial-gradient(circle at 20% 40%,rgba(255,255,255,0.9) 1.5px,transparent 2.5px),radial-gradient(circle at 60% 70%,rgba(255,255,255,0.9) 1.5px,transparent 2.5px),radial-gradient(circle at 80% 25%,rgba(255,255,255,0.9) 1.5px,transparent 2.5px),linear-gradient(135deg,#b8b9be,#c0bfcc);--bn-size:70px 70px,90px 90px,50px 50px,100% 100%;--bn-anim:snBnTwinkle 3.4s ease-in-out infinite;}
.sn-bn.sn-bn-fireflies{--bn-img:radial-gradient(circle at 30% 60%,rgba(253,224,71,.95) 2px,transparent 4px),radial-gradient(circle at 70% 30%,rgba(190,242,100,.9) 2px,transparent 4px),linear-gradient(180deg,#052e16,#14532d);--bn-size:80px 80px,60px 60px,100% 100%;--bn-anim:snBnTwinkle 3.4s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-fireflies{--bn-img:radial-gradient(circle at 30% 60%,rgba(253,224,71,.95) 2px,transparent 4px),radial-gradient(circle at 70% 30%,rgba(190,242,100,.9) 2px,transparent 4px),linear-gradient(180deg,#b9c4bd,#bdcec4);--bn-size:80px 80px,60px 60px,100% 100%;--bn-anim:snBnTwinkle 3.4s ease-in-out infinite;}
.sn-bn.sn-bn-neon-sunset{--bn-img:radial-gradient(circle at 50% 100%,#fde047 0 14%,#f43f5e 15% 28%,transparent 29%),linear-gradient(180deg,#1e1b4b,#7e22ce 60%,#fb7185);--bn-anim:snBnTwinkle 3.4s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-neon-sunset{--bn-img:radial-gradient(circle at 50% 100%,#fef6cb 0 14%,#fbc9d1 15% 28%,transparent 29%),linear-gradient(180deg,#c0bfcc,#dac1f1 60%,#fdd7dc);--bn-anim:snBnTwinkle 3.4s ease-in-out infinite;}
.sn-bn.sn-bn-pulse-core{--bn-img:radial-gradient(circle at 50% 50%,#22d3ee 0,#1d4ed8 35%,#0f172a 75%);--bn-anim:snBnTwinkle 3.4s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-pulse-core{--bn-img:radial-gradient(circle at 50% 50%,#c1f2fa 0,#bfcdf4 35%,#bbbec3 75%);--bn-anim:snBnTwinkle 3.4s ease-in-out infinite;}
.sn-bn.sn-bn-heart-glow{--bn-img:radial-gradient(circle at 50% 50%,#fb7185 0,#be123c 40%,#4c0519 85%);--bn-anim:snBnTwinkle 3.4s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-heart-glow{--bn-img:radial-gradient(circle at 50% 50%,#fdd7dc 0,#ecbcc8 40%,#ccb9be 85%);--bn-anim:snBnTwinkle 3.4s ease-in-out infinite;}
.sn-bn.sn-bn-solar-flare{--bn-img:radial-gradient(circle at 80% 20%,#fef08a 0,#f97316 22%,#7c2d12 55%,#1c0a0a 100%);--bn-anim:snBnTwinkle 3.4s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-solar-flare{--bn-img:radial-gradient(circle at 80% 20%,#fefade 0,#fdd7bd 22%,#dac4bc 55%,#bfbaba 100%);--bn-anim:snBnTwinkle 3.4s ease-in-out infinite;}
.sn-bn.sn-bn-holo-wave{--bn-img:linear-gradient(120deg,#f472b6,#60a5fa,#34d399);--bn-anim:snBnHue 8s linear infinite;}
html.theme-light .sn-bn.sn-bn-holo-wave{--bn-img:linear-gradient(120deg,#fbd7ea,#d2e5fd,#c6f2e2);--bn-anim:snBnHue 8s linear infinite;}
.sn-bn.sn-bn-oil-slick{--bn-img:radial-gradient(circle at 20% 30%,#a78bfa 0,transparent 50%),radial-gradient(circle at 80% 70%,#2dd4bf 0,transparent 50%),radial-gradient(circle at 50% 100%,#f472b6 0,transparent 40%),linear-gradient(#111827,#111827);--bn-anim:snBnHue 8s linear infinite;}
html.theme-light .sn-bn.sn-bn-oil-slick{--bn-img:radial-gradient(circle at 20% 30%,#e6defd 0,transparent 50%),radial-gradient(circle at 80% 70%,#c4f2ed 0,transparent 50%),radial-gradient(circle at 50% 100%,#fbd7ea 0,transparent 40%),linear-gradient(#bcbec2,#bcbec2);--bn-anim:snBnHue 8s linear infinite;}
.sn-bn.sn-bn-prism-burst{--bn-img:repeating-conic-gradient(from 0deg at 50% 120%,#f43f5e 0 10deg,#f59e0b 10deg 20deg,#22c55e 20deg 30deg,#3b82f6 30deg 40deg);--bn-anim:snBnHue 8s linear infinite;}
html.theme-light .sn-bn.sn-bn-prism-burst{--bn-img:repeating-conic-gradient(from 0deg at 50% 120%,#fbc9d1 0 10deg,#fce3ba 10deg 20deg,#c1eed1 20deg 30deg,#c8dcfc 30deg 40deg);--bn-anim:snBnHue 8s linear infinite;}
.sn-bn.sn-bn-chromatic{--bn-img:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e,#3b82f6,#a855f7);--bn-anim:snBnHue 8s linear infinite;}
html.theme-light .sn-bn.sn-bn-chromatic{--bn-img:linear-gradient(90deg,#facaca,#fce3ba,#c1eed1,#c8dcfc,#e6cffc);--bn-anim:snBnHue 8s linear infinite;}
.sn-fl.sn-fl-bookworm{--fl-c:#22c55e;--fl-tag:"Bookworm";}
html.theme-light .sn-fl.sn-fl-bookworm{--fl-c:#1a9949;--fl-tag:"Bookworm";}
.sn-fl.sn-fl-coder{--fl-c:#84cc16;--fl-tag:"Coder";--fl-tagbg:transparent;--fl-tagfg:#84cc16;--fl-tagbd:#84cc16;}
html.theme-light .sn-fl.sn-fl-coder{--fl-c:#669f11;--fl-tag:"Coder";--fl-tagbg:transparent;--fl-tagfg:#669f11;--fl-tagbd:#669f11;}
.sn-fl.sn-fl-designer{--fl-c:#e11d48;--fl-tag:"Designer";--fl-tagbg:#0b1020;--fl-tagfg:#e11d48;--fl-tagbd:#e11d48;}
html.theme-light .sn-fl.sn-fl-designer{--fl-c:#af1638;--fl-tag:"Designer";--fl-tagbg:#ffffff;--fl-tagfg:#af1638;--fl-tagbd:#af1638;}
.sn-fl.sn-fl-builder{--fl-c:#f59e0b;--fl-tag:"Builder";--fl-tagbg:linear-gradient(90deg,#f59e0b,#ec4899);--fl-edge-bg:linear-gradient(180deg,#f59e0b,#ec4899);}
html.theme-light .sn-fl.sn-fl-builder{--fl-c:#bf7b08;--fl-tag:"Builder";--fl-tagbg:linear-gradient(90deg,#bf7b08,#b83877);--fl-edge-bg:linear-gradient(180deg,#bf7b08,#b83877);}
.sn-fl.sn-fl-tinkerer{--fl-c:#eab308;--fl-tag:"Tinkerer";--fl-tagr:4px;}
html.theme-light .sn-fl.sn-fl-tinkerer{--fl-c:#b68b06;--fl-tag:"Tinkerer";--fl-tagr:4px;}
.sn-fl.sn-fl-inventor{--fl-c:#2dd4bf;--fl-tag:"Inventor";--fl-wash:linear-gradient(90deg,rgba(45,212,191,0.16),transparent 45%);}
html.theme-light .sn-fl.sn-fl-inventor{--fl-c:#23a594;--fl-tag:"Inventor";--fl-wash:linear-gradient(90deg,rgba(35,165,148,0.16),transparent 45%);}
.sn-fl.sn-fl-scientist{--fl-c:#06b6d4;--fl-tag:"Scientist";--fl-glow:0 0 16px rgba(6,182,212,0.45);}
html.theme-light .sn-fl.sn-fl-scientist{--fl-c:#048da5;--fl-tag:"Scientist";--fl-glow:0 0 16px rgba(4,141,165,0.45);}
.sn-fl.sn-fl-photographer{--fl-c:#ec4899;--fl-tag:"Photographer";--fl-bw:8px;}
html.theme-light .sn-fl.sn-fl-photographer{--fl-c:#b83877;--fl-tag:"Photographer";--fl-bw:8px;}
.sn-fl.sn-fl-storyteller{--fl-c:#facc15;--fl-tag:"Storyteller";--fl-tagbg:linear-gradient(90deg,#facc15,#ef4444);--fl-edge-bg:linear-gradient(180deg,#facc15,#ef4444);--fl-wash:linear-gradient(90deg,rgba(250,204,21,0.16),transparent 45%);}
html.theme-light .sn-fl.sn-fl-storyteller{--fl-c:#c39f10;--fl-tag:"Storyteller";--fl-tagbg:linear-gradient(90deg,#c39f10,#ba3535);--fl-edge-bg:linear-gradient(180deg,#c39f10,#ba3535);--fl-wash:linear-gradient(90deg,rgba(195,159,16,0.16),transparent 45%);}
.sn-fl.sn-fl-dreamer{--fl-c:#14b8a6;--fl-tag:"Dreamer";--fl-tagr:4px;--fl-tagtt:uppercase;--fl-tagls:.08em;}
html.theme-light .sn-fl.sn-fl-dreamer{--fl-c:#0f8f81;--fl-tag:"Dreamer";--fl-tagr:4px;--fl-tagtt:uppercase;--fl-tagls:.08em;}
.sn-fl.sn-fl-strategist{--fl-c:#0ea5e9;--fl-tag:"Strategist";--fl-tagbg:transparent;--fl-tagfg:#0ea5e9;--fl-tagbd:#0ea5e9;--fl-glow:0 0 16px rgba(14,165,233,0.45);}
html.theme-light .sn-fl.sn-fl-strategist{--fl-c:#0a80b5;--fl-tag:"Strategist";--fl-tagbg:transparent;--fl-tagfg:#0a80b5;--fl-tagbd:#0a80b5;--fl-glow:0 0 16px rgba(10,128,181,0.45);}
.sn-fl.sn-fl-speedrunner{--fl-c:#a855f7;--fl-tag:"Speedrunner";--fl-tagbg:#0b1020;--fl-tagfg:#a855f7;--fl-tagbd:#a855f7;--fl-wash:linear-gradient(90deg,rgba(168,85,247,0.16),transparent 45%);}
html.theme-light .sn-fl.sn-fl-speedrunner{--fl-c:#8342c0;--fl-tag:"Speedrunner";--fl-tagbg:#ffffff;--fl-tagfg:#8342c0;--fl-tagbd:#8342c0;--fl-wash:linear-gradient(90deg,rgba(131,66,192,0.16),transparent 45%);}
.sn-fl.sn-fl-streamer{--fl-c:#ef4444;--fl-tag:"Streamer";}
html.theme-light .sn-fl.sn-fl-streamer{--fl-c:#ba3535;--fl-tag:"Streamer";}
.sn-fl.sn-fl-collector{--fl-c:#10b981;--fl-tag:"Collector";--fl-tagbg:transparent;--fl-tagfg:#10b981;--fl-tagbd:#10b981;}
html.theme-light .sn-fl.sn-fl-collector{--fl-c:#0c9064;--fl-tag:"Collector";--fl-tagbg:transparent;--fl-tagfg:#0c9064;--fl-tagbd:#0c9064;}
.sn-fl.sn-fl-skater{--fl-c:#3b82f6;--fl-tag:"Skater";--fl-tagbg:#0b1020;--fl-tagfg:#3b82f6;--fl-tagbd:#3b82f6;}
html.theme-light .sn-fl.sn-fl-skater{--fl-c:#2e65bf;--fl-tag:"Skater";--fl-tagbg:#ffffff;--fl-tagfg:#2e65bf;--fl-tagbd:#2e65bf;}
.sn-fl.sn-fl-hooper{--fl-c:#6366f1;--fl-tag:"Hooper";--fl-tagbg:linear-gradient(90deg,#6366f1,#8b5cf6);--fl-edge-bg:linear-gradient(180deg,#6366f1,#8b5cf6);}
html.theme-light .sn-fl.sn-fl-hooper{--fl-c:#4d4fbb;--fl-tag:"Hooper";--fl-tagbg:linear-gradient(90deg,#4d4fbb,#6c47bf);--fl-edge-bg:linear-gradient(180deg,#4d4fbb,#6c47bf);}
.sn-fl.sn-fl-swimmer{--fl-c:#f97316;--fl-tag:"Swimmer";--fl-tagr:4px;}
html.theme-light .sn-fl.sn-fl-swimmer{--fl-c:#c25911;--fl-tag:"Swimmer";--fl-tagr:4px;}
.sn-fl.sn-fl-runner{--fl-c:#f472b6;--fl-tag:"Runner";--fl-wash:linear-gradient(90deg,rgba(244,114,182,0.16),transparent 45%);}
html.theme-light .sn-fl.sn-fl-runner{--fl-c:#be588d;--fl-tag:"Runner";--fl-wash:linear-gradient(90deg,rgba(190,88,141,0.16),transparent 45%);}
.sn-fl.sn-fl-dancer{--fl-c:#fb923c;--fl-tag:"Dancer";--fl-glow:0 0 16px rgba(251,146,60,0.45);}
html.theme-light .sn-fl.sn-fl-dancer{--fl-c:#c3712e;--fl-tag:"Dancer";--fl-glow:0 0 16px rgba(195,113,46,0.45);}
.sn-fl.sn-fl-chef{--fl-c:#8b5cf6;--fl-tag:"Chef";--fl-bw:8px;}
html.theme-light .sn-fl.sn-fl-chef{--fl-c:#6c47bf;--fl-tag:"Chef";--fl-bw:8px;}
.sn-fl.sn-fl-baker{--fl-c:#22c55e;--fl-tag:"Baker";--fl-tagbg:linear-gradient(90deg,#22c55e,#eab308);--fl-edge-bg:linear-gradient(180deg,#22c55e,#eab308);--fl-wash:linear-gradient(90deg,rgba(34,197,94,0.16),transparent 45%);}
html.theme-light .sn-fl.sn-fl-baker{--fl-c:#1a9949;--fl-tag:"Baker";--fl-tagbg:linear-gradient(90deg,#1a9949,#b68b06);--fl-edge-bg:linear-gradient(180deg,#1a9949,#b68b06);--fl-wash:linear-gradient(90deg,rgba(26,153,73,0.16),transparent 45%);}
.sn-fl.sn-fl-gardener{--fl-c:#84cc16;--fl-tag:"Gardener";--fl-tagr:4px;--fl-tagtt:uppercase;--fl-tagls:.08em;}
html.theme-light .sn-fl.sn-fl-gardener{--fl-c:#669f11;--fl-tag:"Gardener";--fl-tagr:4px;--fl-tagtt:uppercase;--fl-tagls:.08em;}
.sn-fl.sn-fl-pet-lover{--fl-c:#e11d48;--fl-tag:"Pet Lover";--fl-tagbg:transparent;--fl-tagfg:#e11d48;--fl-tagbd:#e11d48;--fl-glow:0 0 16px rgba(225,29,72,0.45);}
html.theme-light .sn-fl.sn-fl-pet-lover{--fl-c:#af1638;--fl-tag:"Pet Lover";--fl-tagbg:transparent;--fl-tagfg:#af1638;--fl-tagbd:#af1638;--fl-glow:0 0 16px rgba(175,22,56,0.45);}
.sn-fl.sn-fl-cat-person{--fl-c:#f59e0b;--fl-tag:"Cat Person";--fl-tagbg:#0b1020;--fl-tagfg:#f59e0b;--fl-tagbd:#f59e0b;--fl-wash:linear-gradient(90deg,rgba(245,158,11,0.16),transparent 45%);}
html.theme-light .sn-fl.sn-fl-cat-person{--fl-c:#bf7b08;--fl-tag:"Cat Person";--fl-tagbg:#ffffff;--fl-tagfg:#bf7b08;--fl-tagbd:#bf7b08;--fl-wash:linear-gradient(90deg,rgba(191,123,8,0.16),transparent 45%);}
.sn-fl.sn-fl-dog-person{--fl-c:#eab308;--fl-tag:"Dog Person";}
html.theme-light .sn-fl.sn-fl-dog-person{--fl-c:#b68b06;--fl-tag:"Dog Person";}
.sn-fl.sn-fl-anime-fan{--fl-c:#2dd4bf;--fl-tag:"Anime Fan";--fl-tagbg:transparent;--fl-tagfg:#2dd4bf;--fl-tagbd:#2dd4bf;}
html.theme-light .sn-fl.sn-fl-anime-fan{--fl-c:#23a594;--fl-tag:"Anime Fan";--fl-tagbg:transparent;--fl-tagfg:#23a594;--fl-tagbd:#23a594;}
.sn-fl.sn-fl-movie-buff{--fl-c:#06b6d4;--fl-tag:"Movie Buff";--fl-tagbg:#0b1020;--fl-tagfg:#06b6d4;--fl-tagbd:#06b6d4;}
html.theme-light .sn-fl.sn-fl-movie-buff{--fl-c:#048da5;--fl-tag:"Movie Buff";--fl-tagbg:#ffffff;--fl-tagfg:#048da5;--fl-tagbd:#048da5;}
.sn-fl.sn-fl-podcast-fan{--fl-c:#ec4899;--fl-tag:"Podcast Fan";--fl-tagbg:linear-gradient(90deg,#ec4899,#a855f7);--fl-edge-bg:linear-gradient(180deg,#ec4899,#a855f7);}
html.theme-light .sn-fl.sn-fl-podcast-fan{--fl-c:#b83877;--fl-tag:"Podcast Fan";--fl-tagbg:linear-gradient(90deg,#b83877,#8342c0);--fl-edge-bg:linear-gradient(180deg,#b83877,#8342c0);}
.sn-fl.sn-fl-chess-nerd{--fl-c:#facc15;--fl-tag:"Chess Nerd";--fl-tagr:4px;}
html.theme-light .sn-fl.sn-fl-chess-nerd{--fl-c:#c39f10;--fl-tag:"Chess Nerd";--fl-tagr:4px;}
.sn-fl.sn-fl-trivia-master{--fl-c:#14b8a6;--fl-tag:"Trivia Master";--fl-wash:linear-gradient(90deg,rgba(20,184,166,0.16),transparent 45%);}
html.theme-light .sn-fl.sn-fl-trivia-master{--fl-c:#0f8f81;--fl-tag:"Trivia Master";--fl-wash:linear-gradient(90deg,rgba(15,143,129,0.16),transparent 45%);}
.sn-fl.sn-fl-puzzle-pro{--fl-c:#0ea5e9;--fl-tag:"Puzzle Pro";--fl-glow:0 0 16px rgba(14,165,233,0.45);}
html.theme-light .sn-fl.sn-fl-puzzle-pro{--fl-c:#0a80b5;--fl-tag:"Puzzle Pro";--fl-glow:0 0 16px rgba(10,128,181,0.45);}
.sn-fl.sn-fl-pixel-artist{--fl-c:#a855f7;--fl-tag:"Pixel Artist";--fl-bw:8px;}
html.theme-light .sn-fl.sn-fl-pixel-artist{--fl-c:#8342c0;--fl-tag:"Pixel Artist";--fl-bw:8px;}
.sn-fl.sn-fl-modder{--fl-c:#ef4444;--fl-tag:"Modder";--fl-tagbg:linear-gradient(90deg,#ef4444,#f97316);--fl-edge-bg:linear-gradient(180deg,#ef4444,#f97316);--fl-wash:linear-gradient(90deg,rgba(239,68,68,0.16),transparent 45%);}
html.theme-light .sn-fl.sn-fl-modder{--fl-c:#ba3535;--fl-tag:"Modder";--fl-tagbg:linear-gradient(90deg,#ba3535,#c25911);--fl-edge-bg:linear-gradient(180deg,#ba3535,#c25911);--fl-wash:linear-gradient(90deg,rgba(186,53,53,0.16),transparent 45%);}
.sn-fl.sn-fl-daydreamer{--fl-c:#10b981;--fl-tag:"Daydreamer";--fl-tagr:4px;--fl-tagtt:uppercase;--fl-tagls:.08em;}
html.theme-light .sn-fl.sn-fl-daydreamer{--fl-c:#0c9064;--fl-tag:"Daydreamer";--fl-tagr:4px;--fl-tagtt:uppercase;--fl-tagls:.08em;}
.sn-fl.sn-fl-coffee-fuel{--fl-c:#3b82f6;--fl-tag:"Coffee Fuel";--fl-tagbg:transparent;--fl-tagfg:#3b82f6;--fl-tagbd:#3b82f6;--fl-glow:0 0 16px rgba(59,130,246,0.45);}
html.theme-light .sn-fl.sn-fl-coffee-fuel{--fl-c:#2e65bf;--fl-tag:"Coffee Fuel";--fl-tagbg:transparent;--fl-tagfg:#2e65bf;--fl-tagbd:#2e65bf;--fl-glow:0 0 16px rgba(46,101,191,0.45);}
.sn-fl.sn-fl-tea-time{--fl-c:#6366f1;--fl-tag:"Tea Time";--fl-tagbg:#0b1020;--fl-tagfg:#6366f1;--fl-tagbd:#6366f1;--fl-wash:linear-gradient(90deg,rgba(99,102,241,0.16),transparent 45%);}
html.theme-light .sn-fl.sn-fl-tea-time{--fl-c:#4d4fbb;--fl-tag:"Tea Time";--fl-tagbg:#ffffff;--fl-tagfg:#4d4fbb;--fl-tagbd:#4d4fbb;--fl-wash:linear-gradient(90deg,rgba(77,79,187,0.16),transparent 45%);}
.sn-fl.sn-fl-snack-lord{--fl-c:#f97316;--fl-tag:"Snack Lord";}
html.theme-light .sn-fl.sn-fl-snack-lord{--fl-c:#c25911;--fl-tag:"Snack Lord";}
.sn-fl.sn-fl-caffeinated{--fl-c:#f472b6;--fl-tag:"Caffeinated";--fl-tagbg:transparent;--fl-tagfg:#f472b6;--fl-tagbd:#f472b6;}
html.theme-light .sn-fl.sn-fl-caffeinated{--fl-c:#be588d;--fl-tag:"Caffeinated";--fl-tagbg:transparent;--fl-tagfg:#be588d;--fl-tagbd:#be588d;}
.sn-fl.sn-fl-chill{--fl-c:#fb923c;--fl-tag:"Chill";--fl-tagbg:#0b1020;--fl-tagfg:#fb923c;--fl-tagbd:#fb923c;}
html.theme-light .sn-fl.sn-fl-chill{--fl-c:#c3712e;--fl-tag:"Chill";--fl-tagbg:#ffffff;--fl-tagfg:#c3712e;--fl-tagbd:#c3712e;}
.sn-fl.sn-fl-hyped{--fl-c:#8b5cf6;--fl-tag:"Hyped";--fl-tagbg:linear-gradient(90deg,#8b5cf6,#f59e0b);--fl-edge-bg:linear-gradient(180deg,#8b5cf6,#f59e0b);}
html.theme-light .sn-fl.sn-fl-hyped{--fl-c:#6c47bf;--fl-tag:"Hyped";--fl-tagbg:linear-gradient(90deg,#6c47bf,#bf7b08);--fl-edge-bg:linear-gradient(180deg,#6c47bf,#bf7b08);}
.sn-fl.sn-fl-focused{--fl-c:#22c55e;--fl-tag:"Focused";--fl-tagr:4px;}
html.theme-light .sn-fl.sn-fl-focused{--fl-c:#1a9949;--fl-tag:"Focused";--fl-tagr:4px;}
.sn-fl.sn-fl-curious{--fl-c:#84cc16;--fl-tag:"Curious";--fl-wash:linear-gradient(90deg,rgba(132,204,22,0.16),transparent 45%);}
html.theme-light .sn-fl.sn-fl-curious{--fl-c:#669f11;--fl-tag:"Curious";--fl-wash:linear-gradient(90deg,rgba(102,159,17,0.16),transparent 45%);}
.sn-fl.sn-fl-cozy{--fl-c:#e11d48;--fl-tag:"Cozy";--fl-glow:0 0 16px rgba(225,29,72,0.45);}
html.theme-light .sn-fl.sn-fl-cozy{--fl-c:#af1638;--fl-tag:"Cozy";--fl-glow:0 0 16px rgba(175,22,56,0.45);}
.sn-fl.sn-fl-sleepy{--fl-c:#f59e0b;--fl-tag:"Sleepy";--fl-bw:8px;}
html.theme-light .sn-fl.sn-fl-sleepy{--fl-c:#bf7b08;--fl-tag:"Sleepy";--fl-bw:8px;}
.sn-fl.sn-fl-zen{--fl-c:#eab308;--fl-tag:"Zen";--fl-tagbg:linear-gradient(90deg,#eab308,#facc15);--fl-edge-bg:linear-gradient(180deg,#eab308,#facc15);--fl-wash:linear-gradient(90deg,rgba(234,179,8,0.16),transparent 45%);}
html.theme-light .sn-fl.sn-fl-zen{--fl-c:#b68b06;--fl-tag:"Zen";--fl-tagbg:linear-gradient(90deg,#b68b06,#c39f10);--fl-edge-bg:linear-gradient(180deg,#b68b06,#c39f10);--fl-wash:linear-gradient(90deg,rgba(182,139,6,0.16),transparent 45%);}
.sn-fl.sn-fl-chaotic{--fl-c:#2dd4bf;--fl-tag:"Chaotic";--fl-tagr:4px;--fl-tagtt:uppercase;--fl-tagls:.08em;}
html.theme-light .sn-fl.sn-fl-chaotic{--fl-c:#23a594;--fl-tag:"Chaotic";--fl-tagr:4px;--fl-tagtt:uppercase;--fl-tagls:.08em;}
.sn-fl.sn-fl-lucky{--fl-c:#06b6d4;--fl-tag:"Lucky";--fl-tagbg:transparent;--fl-tagfg:#06b6d4;--fl-tagbd:#06b6d4;--fl-glow:0 0 16px rgba(6,182,212,0.45);}
html.theme-light .sn-fl.sn-fl-lucky{--fl-c:#048da5;--fl-tag:"Lucky";--fl-tagbg:transparent;--fl-tagfg:#048da5;--fl-tagbd:#048da5;--fl-glow:0 0 16px rgba(4,141,165,0.45);}
.sn-fl.sn-fl-stargazer{--fl-c:#ec4899;--fl-tag:"Stargazer";--fl-tagbg:#0b1020;--fl-tagfg:#ec4899;--fl-tagbd:#ec4899;--fl-wash:linear-gradient(90deg,rgba(236,72,153,0.16),transparent 45%);}
html.theme-light .sn-fl.sn-fl-stargazer{--fl-c:#b83877;--fl-tag:"Stargazer";--fl-tagbg:#ffffff;--fl-tagfg:#b83877;--fl-tagbd:#b83877;--fl-wash:linear-gradient(90deg,rgba(184,56,119,0.16),transparent 45%);}
.sn-fl.sn-fl-wanderer{--fl-c:#facc15;--fl-tag:"Wanderer";}
html.theme-light .sn-fl.sn-fl-wanderer{--fl-c:#c39f10;--fl-tag:"Wanderer";}
.sn-fl.sn-fl-daredevil{--fl-c:#14b8a6;--fl-tag:"Daredevil";--fl-tagbg:transparent;--fl-tagfg:#14b8a6;--fl-tagbd:#14b8a6;}
html.theme-light .sn-fl.sn-fl-daredevil{--fl-c:#0f8f81;--fl-tag:"Daredevil";--fl-tagbg:transparent;--fl-tagfg:#0f8f81;--fl-tagbd:#0f8f81;}
.sn-fl.sn-fl-trailblazer{--fl-c:#0ea5e9;--fl-tag:"Trailblazer";--fl-tagbg:#0b1020;--fl-tagfg:#0ea5e9;--fl-tagbd:#0ea5e9;}
html.theme-light .sn-fl.sn-fl-trailblazer{--fl-c:#0a80b5;--fl-tag:"Trailblazer";--fl-tagbg:#ffffff;--fl-tagfg:#0a80b5;--fl-tagbd:#0a80b5;}
.sn-fl.sn-fl-peacekeeper{--fl-c:#a855f7;--fl-tag:"Peacekeeper";--fl-tagbg:linear-gradient(90deg,#a855f7,#6366f1);--fl-edge-bg:linear-gradient(180deg,#a855f7,#6366f1);}
html.theme-light .sn-fl.sn-fl-peacekeeper{--fl-c:#8342c0;--fl-tag:"Peacekeeper";--fl-tagbg:linear-gradient(90deg,#8342c0,#4d4fbb);--fl-edge-bg:linear-gradient(180deg,#8342c0,#4d4fbb);}
.sn-fl.sn-fl-team-player{--fl-c:#ef4444;--fl-tag:"Team Player";--fl-tagr:4px;}
html.theme-light .sn-fl.sn-fl-team-player{--fl-c:#ba3535;--fl-tag:"Team Player";--fl-tagr:4px;}
.sn-fl.sn-fl-quiz-whiz{--fl-c:#10b981;--fl-tag:"Quiz Whiz";--fl-wash:linear-gradient(90deg,rgba(16,185,129,0.16),transparent 45%);}
html.theme-light .sn-fl.sn-fl-quiz-whiz{--fl-c:#0c9064;--fl-tag:"Quiz Whiz";--fl-wash:linear-gradient(90deg,rgba(12,144,100,0.16),transparent 45%);}
.sn-fl.sn-fl-joker{--fl-c:#3b82f6;--fl-tag:"Joker";--fl-glow:0 0 16px rgba(59,130,246,0.45);}
html.theme-light .sn-fl.sn-fl-joker{--fl-c:#2e65bf;--fl-tag:"Joker";--fl-glow:0 0 16px rgba(46,101,191,0.45);}
.sn-fl.sn-fl-sunshine{--fl-c:#6366f1;--fl-tag:"Sunshine";--fl-bw:8px;}
html.theme-light .sn-fl.sn-fl-sunshine{--fl-c:#4d4fbb;--fl-tag:"Sunshine";--fl-bw:8px;}
.sn-fl.sn-fl-shining-star{--fl-c:#fbbf24;--fl-tag:"Shining Star";--fl-tagbg:linear-gradient(110deg,#fbbf24 20%,#fde68a 45%,#fbbf24 70%);--fl-tagsz:250% 100%;--fl-anim:snFlShimmer 2.6s linear infinite;--fl-tagfg:#1a1020;}
html.theme-light .sn-fl.sn-fl-shining-star{--fl-c:#c3941c;--fl-tag:"Shining Star";--fl-tagbg:linear-gradient(110deg,#c3941c 20%,#c5b36b 45%,#c3941c 70%);--fl-tagsz:250% 100%;--fl-anim:snFlShimmer 2.6s linear infinite;--fl-tagfg:#1a1020;}
.sn-fl.sn-fl-rising-star{--fl-c:#f97316;--fl-tag:"Rising Star";--fl-tagbg:linear-gradient(110deg,#f97316 20%,#fbbf24 45%,#f97316 70%);--fl-tagsz:250% 100%;--fl-anim:snFlShimmer 2.6s linear infinite;--fl-tagfg:#1a1020;}
html.theme-light .sn-fl.sn-fl-rising-star{--fl-c:#c25911;--fl-tag:"Rising Star";--fl-tagbg:linear-gradient(110deg,#c25911 20%,#c3941c 45%,#c25911 70%);--fl-tagsz:250% 100%;--fl-anim:snFlShimmer 2.6s linear infinite;--fl-tagfg:#1a1020;}
.sn-fl.sn-fl-all-star{--fl-c:#3b82f6;--fl-tag:"All-Star";--fl-tagbg:linear-gradient(110deg,#3b82f6 20%,#a5f3fc 45%,#3b82f6 70%);--fl-tagsz:250% 100%;--fl-anim:snFlShimmer 2.6s linear infinite;--fl-tagfg:#1a1020;}
html.theme-light .sn-fl.sn-fl-all-star{--fl-c:#2e65bf;--fl-tag:"All-Star";--fl-tagbg:linear-gradient(110deg,#2e65bf 20%,#80bdc4 45%,#2e65bf 70%);--fl-tagsz:250% 100%;--fl-anim:snFlShimmer 2.6s linear infinite;--fl-tagfg:#1a1020;}
.sn-fl.sn-fl-supernova{--fl-c:#ef4444;--fl-tag:"Supernova";--fl-glow:0 0 18px rgba(239,68,68,0.55);--fl-cardanim:snFlGlow 2.8s ease-in-out infinite;--fl-gc:#ef4444;}
html.theme-light .sn-fl.sn-fl-supernova{--fl-c:#ba3535;--fl-tag:"Supernova";--fl-glow:0 0 18px rgba(186,53,53,0.55);--fl-cardanim:snFlGlow 2.8s ease-in-out infinite;--fl-gc:#ba3535;}
.sn-fl.sn-fl-prodigy{--fl-c:#8b5cf6;--fl-tag:"Prodigy";--fl-edge-bg:linear-gradient(180deg,#8b5cf6,#f0abfc,#8b5cf6);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 3s linear infinite;--fl-bw:7px;--fl-tagbg:linear-gradient(90deg,#8b5cf6,#f0abfc);}
html.theme-light .sn-fl.sn-fl-prodigy{--fl-c:#6c47bf;--fl-tag:"Prodigy";--fl-edge-bg:linear-gradient(180deg,#6c47bf,#bb85c4,#6c47bf);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 3s linear infinite;--fl-bw:7px;--fl-tagbg:linear-gradient(90deg,#6c47bf,#bb85c4);}
.sn-fl.sn-fl-overachiever{--fl-c:#10b981;--fl-tag:"Overachiever";--fl-edge-bg:linear-gradient(180deg,#10b981,#a7f3d0,#10b981);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 3s linear infinite;--fl-bw:7px;--fl-tagbg:linear-gradient(90deg,#10b981,#a7f3d0);}
html.theme-light .sn-fl.sn-fl-overachiever{--fl-c:#0c9064;--fl-tag:"Overachiever";--fl-edge-bg:linear-gradient(180deg,#0c9064,#82bda2,#0c9064);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 3s linear infinite;--fl-bw:7px;--fl-tagbg:linear-gradient(90deg,#0c9064,#82bda2);}
.sn-fl.sn-fl-hot-streak{--fl-c:#f97316;--fl-tag:"Hot Streak";--fl-glow:0 0 18px rgba(249,115,22,0.55);--fl-cardanim:snFlGlow 2.8s ease-in-out infinite;--fl-gc:#f97316;}
html.theme-light .sn-fl.sn-fl-hot-streak{--fl-c:#c25911;--fl-tag:"Hot Streak";--fl-glow:0 0 18px rgba(194,89,17,0.55);--fl-cardanim:snFlGlow 2.8s ease-in-out infinite;--fl-gc:#c25911;}
.sn-fl.sn-fl-on-fire{--fl-c:#ef4444;--fl-tag:"On Fire";--fl-edge-bg:linear-gradient(180deg,#ef4444,#fb923c,#ef4444);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 3s linear infinite;--fl-bw:7px;--fl-tagbg:linear-gradient(90deg,#ef4444,#fb923c);}
html.theme-light .sn-fl.sn-fl-on-fire{--fl-c:#ba3535;--fl-tag:"On Fire";--fl-edge-bg:linear-gradient(180deg,#ba3535,#c3712e,#ba3535);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 3s linear infinite;--fl-bw:7px;--fl-tagbg:linear-gradient(90deg,#ba3535,#c3712e);}
.sn-fl.sn-fl-unstoppable{--fl-c:#6366f1;--fl-tag:"Unstoppable";--fl-edge-bg:linear-gradient(180deg,#6366f1,#22d3ee,#6366f1);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 3s linear infinite;--fl-bw:7px;--fl-tagbg:linear-gradient(90deg,#6366f1,#22d3ee);}
html.theme-light .sn-fl.sn-fl-unstoppable{--fl-c:#4d4fbb;--fl-tag:"Unstoppable";--fl-edge-bg:linear-gradient(180deg,#4d4fbb,#1aa4b9,#4d4fbb);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 3s linear infinite;--fl-bw:7px;--fl-tagbg:linear-gradient(90deg,#4d4fbb,#1aa4b9);}
.sn-fl.sn-fl-mastermind{--fl-c:#7c3aed;--fl-tag:"Mastermind";--fl-tagbg:linear-gradient(110deg,#7c3aed 20%,#c084fc 45%,#7c3aed 70%);--fl-tagsz:250% 100%;--fl-anim:snFlShimmer 2.6s linear infinite;--fl-tagfg:#1a1020;}
html.theme-light .sn-fl.sn-fl-mastermind{--fl-c:#602db8;--fl-tag:"Mastermind";--fl-tagbg:linear-gradient(110deg,#602db8 20%,#9566c4 45%,#602db8 70%);--fl-tagsz:250% 100%;--fl-anim:snFlShimmer 2.6s linear infinite;--fl-tagfg:#1a1020;}
.sn-fl.sn-fl-hypermind{--fl-c:#ec4899;--fl-tag:"Hypermind";--fl-tagbg:linear-gradient(90deg,#ec4899,#a78bfa);--fl-edge-bg:linear-gradient(180deg,#ec4899,#a78bfa);--fl-anim:snFlHue 6s linear infinite;--fl-edgeanim:snFlHue 6s linear infinite;--fl-bw:6px;}
html.theme-light .sn-fl.sn-fl-hypermind{--fl-c:#b83877;--fl-tag:"Hypermind";--fl-tagbg:linear-gradient(90deg,#b83877,#826cc3);--fl-edge-bg:linear-gradient(180deg,#b83877,#826cc3);--fl-anim:snFlHue 6s linear infinite;--fl-edgeanim:snFlHue 6s linear infinite;--fl-bw:6px;}
.sn-fl.sn-fl-electric{--fl-c:#22d3ee;--fl-tag:"Electric";--fl-tagbg:linear-gradient(90deg,#22d3ee,#facc15);--fl-anim:snFlBlink 1.6s ease-in-out infinite;--fl-glow:0 0 12px rgba(34,211,238,0.4);}
html.theme-light .sn-fl.sn-fl-electric{--fl-c:#1aa4b9;--fl-tag:"Electric";--fl-tagbg:linear-gradient(90deg,#1aa4b9,#c39f10);--fl-anim:snFlBlink 1.6s ease-in-out infinite;--fl-glow:0 0 12px rgba(26,164,185,0.4);}
.sn-fl.sn-fl-voltage{--fl-c:#facc15;--fl-tag:"Voltage";--fl-tagbg:linear-gradient(90deg,#facc15,#f59e0b);--fl-anim:snFlBlink 1.6s ease-in-out infinite;--fl-glow:0 0 12px rgba(250,204,21,0.4);}
html.theme-light .sn-fl.sn-fl-voltage{--fl-c:#c39f10;--fl-tag:"Voltage";--fl-tagbg:linear-gradient(90deg,#c39f10,#bf7b08);--fl-anim:snFlBlink 1.6s ease-in-out infinite;--fl-glow:0 0 12px rgba(195,159,16,0.4);}
.sn-fl.sn-fl-stormcaller{--fl-c:#475569;--fl-tag:"Stormcaller";--fl-glow:0 0 18px rgba(71,85,105,0.55);--fl-cardanim:snFlGlow 2.8s ease-in-out infinite;--fl-gc:#475569;}
html.theme-light .sn-fl.sn-fl-stormcaller{--fl-c:#374251;--fl-tag:"Stormcaller";--fl-glow:0 0 18px rgba(55,66,81,0.55);--fl-cardanim:snFlGlow 2.8s ease-in-out infinite;--fl-gc:#374251;}
.sn-fl.sn-fl-frostbite{--fl-c:#7dd3fc;--fl-tag:"Frostbite";--fl-tagbg:linear-gradient(110deg,#7dd3fc 20%,#e0f2fe 45%,#7dd3fc 70%);--fl-tagsz:250% 100%;--fl-anim:snFlShimmer 2.6s linear infinite;--fl-tagfg:#1a1020;}
html.theme-light .sn-fl.sn-fl-frostbite{--fl-c:#61a4c4;--fl-tag:"Frostbite";--fl-tagbg:linear-gradient(110deg,#61a4c4 20%,#aebcc6 45%,#61a4c4 70%);--fl-tagsz:250% 100%;--fl-anim:snFlShimmer 2.6s linear infinite;--fl-tagfg:#1a1020;}
.sn-fl.sn-fl-ember-heart{--fl-c:#f97316;--fl-tag:"Ember Heart";--fl-glow:0 0 18px rgba(249,115,22,0.55);--fl-cardanim:snFlGlow 2.8s ease-in-out infinite;--fl-gc:#f97316;}
html.theme-light .sn-fl.sn-fl-ember-heart{--fl-c:#c25911;--fl-tag:"Ember Heart";--fl-glow:0 0 18px rgba(194,89,17,0.55);--fl-cardanim:snFlGlow 2.8s ease-in-out infinite;--fl-gc:#c25911;}
.sn-fl.sn-fl-mystic{--fl-c:#a855f7;--fl-tag:"Mystic";--fl-tagbg:linear-gradient(90deg,#a855f7,#6366f1);--fl-edge-bg:linear-gradient(180deg,#a855f7,#6366f1);--fl-anim:snFlHue 6s linear infinite;--fl-edgeanim:snFlHue 6s linear infinite;--fl-bw:6px;}
html.theme-light .sn-fl.sn-fl-mystic{--fl-c:#8342c0;--fl-tag:"Mystic";--fl-tagbg:linear-gradient(90deg,#8342c0,#4d4fbb);--fl-edge-bg:linear-gradient(180deg,#8342c0,#4d4fbb);--fl-anim:snFlHue 6s linear infinite;--fl-edgeanim:snFlHue 6s linear infinite;--fl-bw:6px;}
.sn-fl.sn-fl-enchanted{--fl-c:#f472b6;--fl-tag:"Enchanted";--fl-tagbg:linear-gradient(110deg,#f472b6 20%,#c084fc 45%,#f472b6 70%);--fl-tagsz:250% 100%;--fl-anim:snFlShimmer 2.6s linear infinite;--fl-tagfg:#1a1020;}
html.theme-light .sn-fl.sn-fl-enchanted{--fl-c:#be588d;--fl-tag:"Enchanted";--fl-tagbg:linear-gradient(110deg,#be588d 20%,#9566c4 45%,#be588d 70%);--fl-tagsz:250% 100%;--fl-anim:snFlShimmer 2.6s linear infinite;--fl-tagfg:#1a1020;}
.sn-fl.sn-fl-phantom{--fl-c:#94a3b8;--fl-tag:"Phantom";--fl-tagbg:linear-gradient(90deg,#94a3b8,#1e293b);--fl-anim:snFlBlink 1.6s ease-in-out infinite;--fl-glow:0 0 12px rgba(148,163,184,0.4);}
html.theme-light .sn-fl.sn-fl-phantom{--fl-c:#737f8f;--fl-tag:"Phantom";--fl-tagbg:linear-gradient(90deg,#737f8f,#171f2e);--fl-anim:snFlBlink 1.6s ease-in-out infinite;--fl-glow:0 0 12px rgba(115,127,143,0.4);}
.sn-fl.sn-fl-glitch{--fl-c:#22d3ee;--fl-tag:"Glitch";--fl-tagbg:linear-gradient(90deg,#22d3ee,#f43f5e);--fl-anim:snFlBlink 1.6s ease-in-out infinite;--fl-glow:0 0 12px rgba(34,211,238,0.4);}
html.theme-light .sn-fl.sn-fl-glitch{--fl-c:#1aa4b9;--fl-tag:"Glitch";--fl-tagbg:linear-gradient(90deg,#1aa4b9,#be3149);--fl-anim:snFlBlink 1.6s ease-in-out infinite;--fl-glow:0 0 12px rgba(26,164,185,0.4);}
.sn-fl.sn-fl-neon-dreamer{--fl-c:#e879f9;--fl-tag:"Neon Dreamer";--fl-edge-bg:linear-gradient(180deg,#e879f9,#22d3ee,#e879f9);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 3s linear infinite;--fl-bw:7px;--fl-tagbg:linear-gradient(90deg,#e879f9,#22d3ee);}
html.theme-light .sn-fl.sn-fl-neon-dreamer{--fl-c:#b45ec2;--fl-tag:"Neon Dreamer";--fl-edge-bg:linear-gradient(180deg,#b45ec2,#1aa4b9,#b45ec2);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 3s linear infinite;--fl-bw:7px;--fl-tagbg:linear-gradient(90deg,#b45ec2,#1aa4b9);}
.sn-fl.sn-fl-cyberpunk{--fl-c:#f0abfc;--fl-tag:"Cyberpunk";--fl-tagbg:linear-gradient(90deg,#f0abfc,#22d3ee);--fl-edge-bg:linear-gradient(180deg,#f0abfc,#22d3ee);--fl-anim:snFlHue 6s linear infinite;--fl-edgeanim:snFlHue 6s linear infinite;--fl-bw:6px;}
html.theme-light .sn-fl.sn-fl-cyberpunk{--fl-c:#bb85c4;--fl-tag:"Cyberpunk";--fl-tagbg:linear-gradient(90deg,#bb85c4,#1aa4b9);--fl-edge-bg:linear-gradient(180deg,#bb85c4,#1aa4b9);--fl-anim:snFlHue 6s linear infinite;--fl-edgeanim:snFlHue 6s linear infinite;--fl-bw:6px;}
.sn-fl.sn-fl-pixel-rush{--fl-c:#4ade80;--fl-tag:"Pixel Rush";--fl-tagbg:linear-gradient(90deg,#4ade80,#22c55e);--fl-anim:snFlBlink 1.6s ease-in-out infinite;--fl-glow:0 0 12px rgba(74,222,128,0.4);}
html.theme-light .sn-fl.sn-fl-pixel-rush{--fl-c:#39ad63;--fl-tag:"Pixel Rush";--fl-tagbg:linear-gradient(90deg,#39ad63,#1a9949);--fl-anim:snFlBlink 1.6s ease-in-out infinite;--fl-glow:0 0 12px rgba(57,173,99,0.4);}
.sn-fl.sn-fl-turbo{--fl-c:#ef4444;--fl-tag:"Turbo";--fl-edge-bg:linear-gradient(180deg,#ef4444,#facc15,#ef4444);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 3s linear infinite;--fl-bw:7px;--fl-tagbg:linear-gradient(90deg,#ef4444,#facc15);}
html.theme-light .sn-fl.sn-fl-turbo{--fl-c:#ba3535;--fl-tag:"Turbo";--fl-edge-bg:linear-gradient(180deg,#ba3535,#c39f10,#ba3535);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 3s linear infinite;--fl-bw:7px;--fl-tagbg:linear-gradient(90deg,#ba3535,#c39f10);}
.sn-fl.sn-fl-rocket-fuel{--fl-c:#fb923c;--fl-tag:"Rocket Fuel";--fl-edge-bg:linear-gradient(180deg,#fb923c,#fde047,#fb923c);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 3s linear infinite;--fl-bw:7px;--fl-tagbg:linear-gradient(90deg,#fb923c,#fde047);}
html.theme-light .sn-fl.sn-fl-rocket-fuel{--fl-c:#c3712e;--fl-tag:"Rocket Fuel";--fl-edge-bg:linear-gradient(180deg,#c3712e,#c5ae37,#c3712e);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 3s linear infinite;--fl-bw:7px;--fl-tagbg:linear-gradient(90deg,#c3712e,#c5ae37);}
.sn-fl.sn-fl-rainbow-road{--fl-c:#f43f5e;--fl-tag:"Rainbow Road";--fl-tagbg:linear-gradient(90deg,#f43f5e,#8b5cf6);--fl-edge-bg:linear-gradient(180deg,#f43f5e,#8b5cf6);--fl-anim:snFlHue 6s linear infinite;--fl-edgeanim:snFlHue 6s linear infinite;--fl-bw:6px;}
html.theme-light .sn-fl.sn-fl-rainbow-road{--fl-c:#be3149;--fl-tag:"Rainbow Road";--fl-tagbg:linear-gradient(90deg,#be3149,#6c47bf);--fl-edge-bg:linear-gradient(180deg,#be3149,#6c47bf);--fl-anim:snFlHue 6s linear infinite;--fl-edgeanim:snFlHue 6s linear infinite;--fl-bw:6px;}
.sn-fl.sn-fl-cosmic{--fl-c:#6366f1;--fl-tag:"Cosmic";--fl-tagbg:linear-gradient(90deg,#6366f1,#ec4899);--fl-edge-bg:linear-gradient(180deg,#6366f1,#ec4899);--fl-anim:snFlHue 6s linear infinite;--fl-edgeanim:snFlHue 6s linear infinite;--fl-bw:6px;}
html.theme-light .sn-fl.sn-fl-cosmic{--fl-c:#4d4fbb;--fl-tag:"Cosmic";--fl-tagbg:linear-gradient(90deg,#4d4fbb,#b83877);--fl-edge-bg:linear-gradient(180deg,#4d4fbb,#b83877);--fl-anim:snFlHue 6s linear infinite;--fl-edgeanim:snFlHue 6s linear infinite;--fl-bw:6px;}
.sn-fl.sn-fl-galaxy-brain{--fl-c:#4f46e5;--fl-tag:"Galaxy Brain";--fl-tagbg:linear-gradient(110deg,#4f46e5 20%,#a78bfa 45%,#4f46e5 70%);--fl-tagsz:250% 100%;--fl-anim:snFlShimmer 2.6s linear infinite;--fl-tagfg:#1a1020;}
html.theme-light .sn-fl.sn-fl-galaxy-brain{--fl-c:#3d36b2;--fl-tag:"Galaxy Brain";--fl-tagbg:linear-gradient(110deg,#3d36b2 20%,#826cc3 45%,#3d36b2 70%);--fl-tagsz:250% 100%;--fl-anim:snFlShimmer 2.6s linear infinite;--fl-tagfg:#1a1020;}
.sn-fl.sn-fl-golden-hour{--fl-c:#f59e0b;--fl-tag:"Golden Hour";--fl-glow:0 0 18px rgba(245,158,11,0.55);--fl-cardanim:snFlGlow 2.8s ease-in-out infinite;--fl-gc:#f59e0b;}
html.theme-light .sn-fl.sn-fl-golden-hour{--fl-c:#bf7b08;--fl-tag:"Golden Hour";--fl-glow:0 0 18px rgba(191,123,8,0.55);--fl-cardanim:snFlGlow 2.8s ease-in-out infinite;--fl-gc:#bf7b08;}
.sn-fl.sn-fl-aurora{--fl-c:#34d399;--fl-tag:"Aurora";--fl-edge-bg:linear-gradient(180deg,#34d399,#818cf8,#34d399);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 3s linear infinite;--fl-bw:7px;--fl-tagbg:linear-gradient(90deg,#34d399,#818cf8);}
html.theme-light .sn-fl.sn-fl-aurora{--fl-c:#28a477;--fl-tag:"Aurora";--fl-edge-bg:linear-gradient(180deg,#28a477,#646dc1,#28a477);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 3s linear infinite;--fl-bw:7px;--fl-tagbg:linear-gradient(90deg,#28a477,#646dc1);}
.sn-bb.sn-bb-mango-tango{--bb-bg:linear-gradient(135deg,#f59e0b,#ef4444);--bb-fg:#ffffff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-mango-tango{--bb-bg:linear-gradient(135deg,#f7b13b,#f26969);--bb-fg:#ffffff;--bb-bd:transparent;}
.sn-bb.sn-bb-blueberry{--bb-bg:linear-gradient(135deg,#3730a3,#6366f1);--bb-fg:#ffffff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-blueberry{--bb-bg:linear-gradient(135deg,#5f59b5,#8284f3);--bb-fg:#ffffff;--bb-bd:transparent;}
.sn-bb.sn-bb-lime-fizz{--bb-bg:linear-gradient(135deg,#65a30d,#fde047);--bb-fg:#1a0a14;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-lime-fizz{--bb-bg:linear-gradient(135deg,#83b53d,#fde66b);--bb-fg:#1a0a14;--bb-bd:transparent;}
.sn-bb.sn-bb-bubble-tea{--bb-bg:linear-gradient(135deg,#d6a77a,#f9a8d4);--bb-fg:#1a0a14;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-bubble-tea{--bb-bg:linear-gradient(135deg,#deb894,#fab9dc);--bb-fg:#1a0a14;--bb-bd:transparent;}
.sn-bb.sn-bb-deep-space{--bb-bg:linear-gradient(135deg,#020617,#4c1d95,#be185d);--bb-fg:#ffffff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-deep-space{--bb-bg:linear-gradient(135deg,#343745,#6f4aaa,#cb467d);--bb-fg:#ffffff;--bb-bd:transparent;}
.sn-bb.sn-bb-cotton-sky{--bb-bg:linear-gradient(135deg,#bae6fd,#fbcfe8);--bb-fg:#1a0a14;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-cotton-sky{--bb-bg:linear-gradient(135deg,#c7ebfd,#fbd8ec);--bb-fg:#1a0a14;--bb-bd:transparent;}
.sn-bb.sn-bb-lava-lamp{--bb-bg:linear-gradient(135deg,#7f1d1d,#ea580c,#facc15);--bb-fg:#ffffff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-lava-lamp{--bb-bg:linear-gradient(135deg,#984a4a,#ee793c,#fbd643);--bb-fg:#ffffff;--bb-bd:transparent;}
.sn-bb.sn-bb-frozen-lake{--bb-bg:linear-gradient(135deg,#0e7490,#a5f3fc);--bb-fg:#1a0a14;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-frozen-lake{--bb-bg:linear-gradient(135deg,#3e8fa6,#b7f5fc);--bb-fg:#1a0a14;--bb-bd:transparent;}
.sn-bb.sn-bb-plum-wine{--bb-bg:linear-gradient(135deg,#581c87,#be185d);--bb-fg:#ffffff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-plum-wine{--bb-bg:linear-gradient(135deg,#79499f,#cb467d);--bb-fg:#ffffff;--bb-bd:transparent;}
.sn-bb.sn-bb-pistachio{--bb-bg:linear-gradient(135deg,#bef264,#4ade80);--bb-fg:#1a0a14;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-pistachio{--bb-bg:linear-gradient(135deg,#cbf483,#6ee499);--bb-fg:#1a0a14;--bb-bd:transparent;}
.sn-bb.sn-bb-cherry-pop{--bb-bg:linear-gradient(135deg,#e11d48,#fb7185);--bb-fg:#ffffff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-cherry-pop{--bb-bg:linear-gradient(135deg,#e74a6c,#fb8d9d);--bb-fg:#ffffff;--bb-bd:transparent;}
.sn-bb.sn-bb-twilight{--bb-bg:linear-gradient(135deg,#1e1b4b,#7c3aed,#f472b6);--bb-fg:#ffffff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-twilight{--bb-bg:linear-gradient(135deg,#4b486f,#9661f0,#f68ec4);--bb-fg:#ffffff;--bb-bd:transparent;}
.sn-bb.sn-bb-spring-meadow{--bb-bg:linear-gradient(135deg,#4ade80,#fef08a,#f9a8d4);--bb-fg:#1a0a14;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-spring-meadow{--bb-bg:linear-gradient(135deg,#6ee499,#fef3a1,#fab9dc);--bb-fg:#1a0a14;--bb-bd:transparent;}
.sn-bb.sn-bb-steel-blue{--bb-bg:linear-gradient(135deg,#334155,#64748b);--bb-fg:#ffffff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-steel-blue{--bb-bg:linear-gradient(135deg,#5b6777,#838fa2);--bb-fg:#ffffff;--bb-bd:transparent;}
.sn-bb.sn-bb-peach-soda{--bb-bg:linear-gradient(135deg,#fdba74,#fda4af);--bb-fg:#1a0a14;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-peach-soda{--bb-bg:linear-gradient(135deg,#fdc78f,#fdb6bf);--bb-fg:#1a0a14;--bb-bd:transparent;}
.sn-bb.sn-bb-midnight-jazz{--bb-bg:linear-gradient(135deg,#0f172a,#1e40af,#9333ea);--bb-fg:#ffffff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-midnight-jazz{--bb-bg:linear-gradient(135deg,#3f4554,#4b66bf,#a85bee);--bb-fg:#ffffff;--bb-bd:transparent;}
.sn-bb.sn-bb-sea-glass{--bb-bg:linear-gradient(135deg,#14b8a6,#a7f3d0);--bb-fg:#1a0a14;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-sea-glass{--bb-bg:linear-gradient(135deg,#43c6b7,#b8f5d9);--bb-fg:#1a0a14;--bb-bd:transparent;}
.sn-bb.sn-bb-raspberry-lemonade{--bb-bg:linear-gradient(135deg,#be185d,#fde047);--bb-fg:#ffffff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-raspberry-lemonade{--bb-bg:linear-gradient(135deg,#cb467d,#fde66b);--bb-fg:#ffffff;--bb-bd:transparent;}
.sn-bb.sn-bb-mocha{--bb-bg:linear-gradient(135deg,#44281d,#a16207);--bb-fg:#ffffff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-mocha{--bb-bg:linear-gradient(135deg,#69534a,#b38138);--bb-fg:#ffffff;--bb-bd:transparent;}
.sn-bb.sn-bb-arctic-aurora{--bb-bg:linear-gradient(135deg,#0891b2,#22c55e,#a78bfa);--bb-fg:#ffffff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-arctic-aurora{--bb-bg:linear-gradient(135deg,#39a7c1,#4ed07e,#b8a2fb);--bb-fg:#ffffff;--bb-bd:transparent;}
.sn-bb.sn-bb-golden-sunset{--bb-bg:linear-gradient(135deg,#facc15,#f97316,#be123c);--bb-fg:#1a0a14;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-golden-sunset{--bb-bg:linear-gradient(135deg,#fbd643,#fa8f44,#cb4163);--bb-fg:#1a0a14;--bb-bd:transparent;}
.sn-bb.sn-bb-ink-wash{--bb-bg:linear-gradient(135deg,#111827,#4b5563);--bb-fg:#ffffff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-ink-wash{--bb-bg:linear-gradient(135deg,#404652,#6f7782);--bb-fg:#ffffff;--bb-bd:transparent;}
.sn-bb.sn-bb-cream{--bb-bg:#fef3c7;--bb-fg:#1a0a14;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-cream{--bb-bg:#fef4cc;--bb-fg:#1a0a14;--bb-bd:transparent;}
.sn-bb.sn-bb-charcoal{--bb-bg:#1f2937;--bb-fg:#ffffff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-charcoal{--bb-bg:#474f5b;--bb-fg:#ffffff;--bb-bd:transparent;}
.sn-bb.sn-bb-blush{--bb-bg:#fbcfe8;--bb-fg:#1a0a14;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-blush{--bb-bg:#fbd3ea;--bb-fg:#1a0a14;--bb-bd:transparent;}
.sn-bb.sn-bb-royal-blue{--bb-bg:#1d4ed8;--bb-fg:#ffffff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-royal-blue{--bb-bg:#456ddf;--bb-fg:#ffffff;--bb-bd:transparent;}
.sn-bb.sn-bb-forest-green{--bb-bg:#166534;--bb-fg:#ffffff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-forest-green{--bb-bg:#3f8058;--bb-fg:#ffffff;--bb-bd:transparent;}
.sn-bb.sn-bb-tomato{--bb-bg:#dc2626;--bb-fg:#ffffff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-tomato{--bb-bg:#e24d4d;--bb-fg:#ffffff;--bb-bd:transparent;}
.sn-bb.sn-bb-lilac{--bb-bg:#ddd6fe;--bb-fg:#1a0a14;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-lilac{--bb-bg:#e0dafe;--bb-fg:#1a0a14;--bb-bd:transparent;}
.sn-bb.sn-bb-teal-deal{--bb-bg:#0f766e;--bb-fg:#ffffff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-teal-deal{--bb-bg:#3a8e88;--bb-fg:#ffffff;--bb-bd:transparent;}
.sn-bb.sn-bb-butter{--bb-bg:#fde047;--bb-fg:#1a0a14;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-butter{--bb-bg:#fde359;--bb-fg:#1a0a14;--bb-bd:transparent;}
.sn-bb.sn-bb-slate-rose{--bb-bg:#9f1239;--bb-fg:#ffffff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-slate-rose{--bb-bg:#b03c5c;--bb-fg:#ffffff;--bb-bd:transparent;}
.sn-bb.sn-bb-candy-cane-stripe{--bb-bg:repeating-linear-gradient(45deg,#dc2626 0 8px,#fff 8px 16px);--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:auto;}
html.theme-light .sn-bb.sn-bb-candy-cane-stripe{--bb-bg:repeating-linear-gradient(45deg,#ef9d9d 0 8px,#ffffff 8px 16px);--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:auto;}
.sn-bb.sn-bb-blue-pinstripe{--bb-bg:repeating-linear-gradient(90deg,#1e3a8a 0 10px,#1d4ed8 10px 12px);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:auto;}
html.theme-light .sn-bb.sn-bb-blue-pinstripe{--bb-bg:repeating-linear-gradient(90deg,#99a6ca 0 10px,#99afed 10px 12px);--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:auto;}
.sn-bb.sn-bb-polka-party{--bb-bg:radial-gradient(circle,rgba(255,255,255,.55) 3px,transparent 4px),#db2777;--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:16px 16px,100% 100%;}
html.theme-light .sn-bb.sn-bb-polka-party{--bb-bg:radial-gradient(circle,rgba(255,255,255,0.9) 3px,transparent 4px),#ee9dc1;--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:16px 16px,100% 100%;}
.sn-bb.sn-bb-checker-pop{--bb-bg:conic-gradient(#111827 25%,#374151 0 50%,#111827 0 75%,#374151 0);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:18px 18px;}
html.theme-light .sn-bb.sn-bb-checker-pop{--bb-bg:conic-gradient(#93979d 25%,#a5a9b0 0 50%,#93979d 0 75%,#a5a9b0 0);--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:18px 18px;}
.sn-bb.sn-bb-gingham-picnic{--bb-bg:repeating-linear-gradient(0deg,rgba(255,255,255,.35) 0 6px,transparent 6px 12px),repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 6px,transparent 6px 12px),#dc2626;--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:auto;}
html.theme-light .sn-bb.sn-bb-gingham-picnic{--bb-bg:repeating-linear-gradient(0deg,rgba(255,255,255,0.84) 0 6px,transparent 6px 12px),repeating-linear-gradient(90deg,rgba(255,255,255,0.84) 0 6px,transparent 6px 12px),#ef9d9d;--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:auto;}
.sn-bb.sn-bb-graph-note{--bb-bg:linear-gradient(rgba(37,99,235,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.35) 1px,transparent 1px),#eff6ff;--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:14px 14px,14px 14px,100% 100%;}
html.theme-light .sn-bb.sn-bb-graph-note{--bb-bg:linear-gradient(rgba(37,99,235,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.35) 1px,transparent 1px),#f7faff;--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:14px 14px,14px 14px,100% 100%;}
.sn-bb.sn-bb-confetti-cake{--bb-bg:radial-gradient(circle at 20% 30%,#f472b6 2px,transparent 3px),radial-gradient(circle at 70% 60%,#facc15 2px,transparent 3px),radial-gradient(circle at 45% 85%,#34d399 2px,transparent 3px),#4c1d95;--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:30px 30px,30px 30px,30px 30px,100% 100%;}
html.theme-light .sn-bb.sn-bb-confetti-cake{--bb-bg:radial-gradient(circle at 20% 30%,#fabfde 2px,transparent 3px),radial-gradient(circle at 70% 60%,#fce895 2px,transparent 3px),radial-gradient(circle at 45% 85%,#a3ebd1 2px,transparent 3px),#ae99cf;--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:30px 30px,30px 30px,30px 30px,100% 100%;}
.sn-bb.sn-bb-zebra-crossing{--bb-bg:repeating-linear-gradient(90deg,#f8fafc 0 14px,#1f2937 14px 28px);--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:auto;}
html.theme-light .sn-bb.sn-bb-zebra-crossing{--bb-bg:repeating-linear-gradient(90deg,#fbfcfd 0 14px,#9a9ea5 14px 28px);--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:auto;}
.sn-bb.sn-bb-honey-hive{--bb-bg:radial-gradient(circle at 25% 50%,#fbbf24 30%,transparent 31%),radial-gradient(circle at 75% 50%,#fcd34d 30%,transparent 31%),#b45309;--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:16px 18px,16px 18px,100% 100%;}
html.theme-light .sn-bb.sn-bb-honey-hive{--bb-bg:radial-gradient(circle at 25% 50%,#fde29c 30%,transparent 31%),radial-gradient(circle at 75% 50%,#fdebae 30%,transparent 31%),#ddb190;--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:16px 18px,16px 18px,100% 100%;}
.sn-bb.sn-bb-waves{--bb-bg:repeating-radial-gradient(circle at 50% 200%,#0369a1 0 8px,#0ea5e9 8px 16px);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:auto;}
html.theme-light .sn-bb.sn-bb-waves{--bb-bg:repeating-radial-gradient(circle at 50% 200%,#8dbbd4 0 8px,#92d6f5 8px 16px);--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:auto;}
.sn-bb.sn-bb-neon-cyan{--bb-bg:#0b0b14;--bb-fg:#22d3ee;--bb-bd:#22d3ee;--bb-sh:0 0 12px rgba(34,211,238,0.6);}
html.theme-light .sn-bb.sn-bb-neon-cyan{--bb-bg:#e8fafd;--bb-fg:#1aa4b9;--bb-bd:#1aa4b9;--bb-sh:0 0 10px rgba(34,211,238,0.35);}
.sn-bb.sn-bb-neon-pink{--bb-bg:#0b0b14;--bb-fg:#f472b6;--bb-bd:#f472b6;--bb-sh:0 0 12px rgba(244,114,182,0.6);}
html.theme-light .sn-bb.sn-bb-neon-pink{--bb-bg:#fdf0f7;--bb-fg:#be588d;--bb-bd:#be588d;--bb-sh:0 0 10px rgba(244,114,182,0.35);}
.sn-bb.sn-bb-neon-lime{--bb-bg:#0b0b14;--bb-fg:#a3e635;--bb-bd:#a3e635;--bb-sh:0 0 12px rgba(163,230,53,0.6);}
html.theme-light .sn-bb.sn-bb-neon-lime{--bb-bg:#f5fcea;--bb-fg:#7fb329;--bb-bd:#7fb329;--bb-sh:0 0 10px rgba(163,230,53,0.35);}
.sn-bb.sn-bb-neon-orange{--bb-bg:#0b0b14;--bb-fg:#fb923c;--bb-bd:#fb923c;--bb-sh:0 0 12px rgba(251,146,60,0.6);}
html.theme-light .sn-bb.sn-bb-neon-orange{--bb-bg:#fef4eb;--bb-fg:#c3712e;--bb-bd:#c3712e;--bb-sh:0 0 10px rgba(251,146,60,0.35);}
.sn-bb.sn-bb-neon-violet{--bb-bg:#0b0b14;--bb-fg:#a78bfa;--bb-bd:#a78bfa;--bb-sh:0 0 12px rgba(167,139,250,0.6);}
html.theme-light .sn-bb.sn-bb-neon-violet{--bb-bg:#f6f3fe;--bb-fg:#826cc3;--bb-bd:#826cc3;--bb-sh:0 0 10px rgba(167,139,250,0.35);}
.sn-bb.sn-bb-neon-gold{--bb-bg:#0b0b14;--bb-fg:#fde047;--bb-bd:#fde047;--bb-sh:0 0 12px rgba(253,224,71,0.6);}
html.theme-light .sn-bb.sn-bb-neon-gold{--bb-bg:#fefbec;--bb-fg:#c5ae37;--bb-bd:#c5ae37;--bb-sh:0 0 10px rgba(253,224,71,0.35);}
.sn-bb.sn-bb-neon-red{--bb-bg:#0b0b14;--bb-fg:#f87171;--bb-bd:#f87171;--bb-sh:0 0 12px rgba(248,113,113,0.6);}
html.theme-light .sn-bb.sn-bb-neon-red{--bb-bg:#fef0f0;--bb-fg:#c15858;--bb-bd:#c15858;--bb-sh:0 0 10px rgba(248,113,113,0.35);}
.sn-bb.sn-bb-neon-mint{--bb-bg:#0b0b14;--bb-fg:#6ee7b7;--bb-bd:#6ee7b7;--bb-sh:0 0 12px rgba(110,231,183,0.6);}
html.theme-light .sn-bb.sn-bb-neon-mint{--bb-bg:#f0fcf7;--bb-fg:#55b48e;--bb-bd:#55b48e;--bb-sh:0 0 10px rgba(110,231,183,0.35);}
.sn-bb.sn-bb-milk-glass{--bb-bg:rgba(255,255,255,0.16);--bb-fg:#fff;--bb-bd:rgba(255,255,255,0.55);--bb-sh:0 4px 16px rgba(0,0,0,.25);}
html.theme-light .sn-bb.sn-bb-milk-glass{--bb-bg:rgba(255,255,255,0.28);--bb-fg:#1a0a14;--bb-bd:rgba(255,255,255,0.8);}
.sn-bb.sn-bb-smoke-glass{--bb-bg:rgba(148,163,184,0.16);--bb-fg:#fff;--bb-bd:rgba(148,163,184,0.55);--bb-sh:0 4px 16px rgba(0,0,0,.25);}
html.theme-light .sn-bb.sn-bb-smoke-glass{--bb-bg:rgba(148,163,184,0.28);--bb-fg:#1a0a14;--bb-bd:rgba(148,163,184,0.8);}
.sn-bb.sn-bb-rose-glass{--bb-bg:rgba(251,113,133,0.16);--bb-fg:#fff;--bb-bd:rgba(251,113,133,0.55);--bb-sh:0 4px 16px rgba(0,0,0,.25);}
html.theme-light .sn-bb.sn-bb-rose-glass{--bb-bg:rgba(251,113,133,0.28);--bb-fg:#1a0a14;--bb-bd:rgba(251,113,133,0.8);}
.sn-bb.sn-bb-ocean-glass{--bb-bg:rgba(56,189,248,0.16);--bb-fg:#fff;--bb-bd:rgba(56,189,248,0.55);--bb-sh:0 4px 16px rgba(0,0,0,.25);}
html.theme-light .sn-bb.sn-bb-ocean-glass{--bb-bg:rgba(56,189,248,0.28);--bb-fg:#1a0a14;--bb-bd:rgba(56,189,248,0.8);}
.sn-bb.sn-bb-kraft-paper{--bb-bg:repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 2px,transparent 2px 4px),#c19a6b;--bb-fg:#1a0a14;--bb-bd:#8d6e4b;}
html.theme-light .sn-bb.sn-bb-kraft-paper{--bb-bg:repeating-linear-gradient(0deg,rgba(0,0,0,.04) 0 2px,transparent 2px 4px),#e6c9a0;--bb-fg:#1a0a14;--bb-bd:#a17f55;}
.sn-bb.sn-bb-chalkboard{--bb-bg:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 2px,transparent 2px 5px),#1f3b2d;--bb-fg:#f1f5f9;--bb-bd:#8b5a2b;--bb-bw:2px;}
html.theme-light .sn-bb.sn-bb-chalkboard{--bb-bg:repeating-linear-gradient(0deg,rgba(0,0,0,.04) 0 2px,transparent 2px 5px),#cfe3d6;--bb-fg:#1a0a14;--bb-bd:#8b5a2b;--bb-bw:2px;}
.sn-bb.sn-bb-denim{--bb-bg:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 2px,transparent 2px 4px),#1e3a8a;--bb-fg:#e0e7ff;--bb-bd:#f59e0b;--bb-bs:dashed;}
html.theme-light .sn-bb.sn-bb-denim{--bb-bg:repeating-linear-gradient(45deg,rgba(255,255,255,.2) 0 2px,transparent 2px 4px),#93c5fd;--bb-fg:#1a0a14;--bb-bd:#b45309;--bb-bs:dashed;}
.sn-bb.sn-bb-blueprint{--bb-bg:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px),#1d4ed8;--bb-fg:#e0f2fe;--bb-bd:#93c5fd;--bb-size:12px 12px,12px 12px,100% 100%;}
html.theme-light .sn-bb.sn-bb-blueprint{--bb-bg:linear-gradient(rgba(29,78,216,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(29,78,216,.25) 1px,transparent 1px),#dbeafe;--bb-fg:#1a0a14;--bb-bd:#2563eb;--bb-size:12px 12px,12px 12px,100% 100%;}
.sn-bb.sn-bb-liquid-sunset{--bb-bg:linear-gradient(120deg,#f97316,#db2777,#7c3aed,#f97316);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
html.theme-light .sn-bb.sn-bb-liquid-sunset{--bb-bg:linear-gradient(120deg,#fa8f44,#e25292,#9661f0,#fa8f44);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
.sn-bb.sn-bb-ocean-current{--bb-bg:linear-gradient(120deg,#0369a1,#06b6d4,#14b8a6,#0369a1);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
html.theme-light .sn-bb.sn-bb-ocean-current{--bb-bg:linear-gradient(120deg,#3587b3,#37c4dc,#43c6b7,#3587b3);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
.sn-bb.sn-bb-fruit-punch{--bb-bg:linear-gradient(120deg,#e11d48,#f59e0b,#ec4899,#e11d48);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
html.theme-light .sn-bb.sn-bb-fruit-punch{--bb-bg:linear-gradient(120deg,#e74a6c,#f7b13b,#ef6cad,#e74a6c);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
.sn-bb.sn-bb-mint-chip{--bb-bg:linear-gradient(120deg,#065f46,#34d399,#a7f3d0,#065f46);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
html.theme-light .sn-bb.sn-bb-mint-chip{--bb-bg:linear-gradient(120deg,#377f6b,#5cdbad,#b8f5d9,#377f6b);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
.sn-bb.sn-bb-cosmic-swirl{--bb-bg:linear-gradient(120deg,#312e81,#a855f7,#ec4899,#312e81);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
html.theme-light .sn-bb.sn-bb-cosmic-swirl{--bb-bg:linear-gradient(120deg,#5a579a,#b977f8,#ef6cad,#5a579a);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
.sn-bb.sn-bb-lemon-drift{--bb-bg:linear-gradient(120deg,#facc15,#84cc16,#22d3ee,#facc15);--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
html.theme-light .sn-bb.sn-bb-lemon-drift{--bb-bg:linear-gradient(120deg,#fbd643,#9cd644,#4edbf1,#fbd643);--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
.sn-bb.sn-bb-lava-flow{--bb-bg:linear-gradient(120deg,#450a0a,#dc2626,#fb923c,#450a0a);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
html.theme-light .sn-bb.sn-bb-lava-flow{--bb-bg:linear-gradient(120deg,#6a3b3b,#e35151,#fba763,#6a3b3b);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
.sn-bb.sn-bb-orchid-wave{--bb-bg:linear-gradient(120deg,#701a75,#c026d3,#f0abfc,#701a75);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
html.theme-light .sn-bb.sn-bb-orchid-wave{--bb-bg:linear-gradient(120deg,#8c4790,#cc51db,#f3bbfc,#8c4790);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
.sn-bb.sn-bb-glacier-slide{--bb-bg:linear-gradient(120deg,#0c4a6e,#7dd3fc,#e0f2fe,#0c4a6e);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
html.theme-light .sn-bb.sn-bb-glacier-slide{--bb-bg:linear-gradient(120deg,#3c6e8b,#97dbfc,#e6f4fe,#3c6e8b);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
.sn-bb.sn-bb-candy-flow{--bb-bg:linear-gradient(120deg,#f472b6,#c084fc,#67e8f9,#f472b6);--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
html.theme-light .sn-bb.sn-bb-candy-flow{--bb-bg:linear-gradient(120deg,#f68ec4,#cc9cfc,#85ecfa,#f68ec4);--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
.sn-bb.sn-bb-dragonfruit{--bb-bg:linear-gradient(120deg,#9d174d,#c026d3,#f43f5e,#9d174d);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
html.theme-light .sn-bb.sn-bb-dragonfruit{--bb-bg:linear-gradient(120deg,#b04570,#cc51db,#f6657e,#b04570);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
.sn-bb.sn-bb-northern-lights{--bb-bg:linear-gradient(120deg,#022c22,#10b981,#6366f1,#022c22);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
html.theme-light .sn-bb.sn-bb-northern-lights{--bb-bg:linear-gradient(120deg,#34564e,#3fc79a,#8284f3,#34564e);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
.sn-bb.sn-bb-glossy-cherry{--bb-bg:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%),linear-gradient(135deg,#be123c,#f43f5e);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:250% 100%,100% 100%;--bb-anim:snBbShine 3s linear infinite;}
html.theme-light .sn-bb.sn-bb-glossy-cherry{--bb-bg:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%),linear-gradient(135deg,#d15976,#f7788e);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:250% 100%,100% 100%;--bb-anim:snBbShine 3s linear infinite;}
.sn-bb.sn-bb-chrome{--bb-bg:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%),linear-gradient(135deg,#6b7280,#d1d5db,#6b7280);--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:250% 100%,100% 100%;--bb-anim:snBbShine 3s linear infinite;}
html.theme-light .sn-bb.sn-bb-chrome{--bb-bg:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%),linear-gradient(135deg,#979ca6,#dee1e5,#979ca6);--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:250% 100%,100% 100%;--bb-anim:snBbShine 3s linear infinite;}
.sn-bb.sn-bb-gold-bar{--bb-bg:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%),linear-gradient(135deg,#a16207,#fbbf24,#a16207);--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:250% 100%,100% 100%;--bb-anim:snBbShine 3s linear infinite;}
html.theme-light .sn-bb.sn-bb-gold-bar{--bb-bg:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%),linear-gradient(135deg,#bd9151,#fcd265,#bd9151);--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:250% 100%,100% 100%;--bb-anim:snBbShine 3s linear infinite;}
.sn-bb.sn-bb-sapphire-shine{--bb-bg:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%),linear-gradient(135deg,#1e3a8a,#3b82f6);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:250% 100%,100% 100%;--bb-anim:snBbShine 3s linear infinite;}
html.theme-light .sn-bb.sn-bb-sapphire-shine{--bb-bg:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%),linear-gradient(135deg,#6175ad,#75a7f8);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:250% 100%,100% 100%;--bb-anim:snBbShine 3s linear infinite;}
.sn-bb.sn-bb-emerald-shine{--bb-bg:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%),linear-gradient(135deg,#064e3b,#10b981);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:250% 100%,100% 100%;--bb-anim:snBbShine 3s linear infinite;}
html.theme-light .sn-bb.sn-bb-emerald-shine{--bb-bg:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%),linear-gradient(135deg,#508375,#57cea6);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:250% 100%,100% 100%;--bb-anim:snBbShine 3s linear infinite;}
.sn-bb.sn-bb-amethyst-shine{--bb-bg:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%),linear-gradient(135deg,#4c1d95,#a855f7);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:250% 100%,100% 100%;--bb-anim:snBbShine 3s linear infinite;}
html.theme-light .sn-bb.sn-bb-amethyst-shine{--bb-bg:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%),linear-gradient(135deg,#8160b4,#c288f9);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:250% 100%,100% 100%;--bb-anim:snBbShine 3s linear infinite;}
.sn-bb.sn-bb-rose-pearl{--bb-bg:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%),linear-gradient(135deg,#f9a8d4,#fde68a);--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:250% 100%,100% 100%;--bb-anim:snBbShine 3s linear infinite;}
html.theme-light .sn-bb.sn-bb-rose-pearl{--bb-bg:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%),linear-gradient(135deg,#fac2e0,#fdedad);--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:250% 100%,100% 100%;--bb-anim:snBbShine 3s linear infinite;}
.sn-bb.sn-bb-black-pearl{--bb-bg:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%),linear-gradient(135deg,#0a0a0a,#374151);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:250% 100%,100% 100%;--bb-anim:snBbShine 3s linear infinite;}
html.theme-light .sn-bb.sn-bb-black-pearl{--bb-bg:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%),linear-gradient(135deg,#535353,#737a85);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:250% 100%,100% 100%;--bb-anim:snBbShine 3s linear infinite;}
.sn-bb.sn-bb-pulse-cyan{--bb-bg:#06141a;--bb-fg:#a5f3fc;--bb-bd:#22d3ee;--bb-gc:#22d3ee;--bb-anim:snBbGlow 2.4s ease-in-out infinite;}
html.theme-light .sn-bb.sn-bb-pulse-cyan{--bb-bg:#e4f9fc;--bb-fg:#1aa4b9;--bb-bd:#1aa4b9;--bb-gc:#1aa4b9;--bb-anim:snBbGlow 2.4s ease-in-out infinite;}
.sn-bb.sn-bb-pulse-pink{--bb-bg:#1a0612;--bb-fg:#fbcfe8;--bb-bd:#f472b6;--bb-gc:#f472b6;--bb-anim:snBbGlow 2.4s ease-in-out infinite;}
html.theme-light .sn-bb.sn-bb-pulse-pink{--bb-bg:#fdeef6;--bb-fg:#be588d;--bb-bd:#be588d;--bb-gc:#be588d;--bb-anim:snBbGlow 2.4s ease-in-out infinite;}
.sn-bb.sn-bb-pulse-lime{--bb-bg:#0e1a04;--bb-fg:#d9f99d;--bb-bd:#a3e635;--bb-gc:#a3e635;--bb-anim:snBbGlow 2.4s ease-in-out infinite;}
html.theme-light .sn-bb.sn-bb-pulse-lime{--bb-bg:#f3fce6;--bb-fg:#7fb329;--bb-bd:#7fb329;--bb-gc:#7fb329;--bb-anim:snBbGlow 2.4s ease-in-out infinite;}
.sn-bb.sn-bb-pulse-gold{--bb-bg:#1a1204;--bb-fg:#fde68a;--bb-bd:#fbbf24;--bb-gc:#fbbf24;--bb-anim:snBbGlow 2.4s ease-in-out infinite;}
html.theme-light .sn-bb.sn-bb-pulse-gold{--bb-bg:#fef7e4;--bb-fg:#c3941c;--bb-bd:#c3941c;--bb-gc:#c3941c;--bb-anim:snBbGlow 2.4s ease-in-out infinite;}
.sn-bb.sn-bb-pulse-violet{--bb-bg:#0f0a1f;--bb-fg:#ddd6fe;--bb-bd:#a78bfa;--bb-gc:#a78bfa;--bb-anim:snBbGlow 2.4s ease-in-out infinite;}
html.theme-light .sn-bb.sn-bb-pulse-violet{--bb-bg:#f4f1fe;--bb-fg:#826cc3;--bb-bd:#826cc3;--bb-gc:#826cc3;--bb-anim:snBbGlow 2.4s ease-in-out infinite;}
.sn-bb.sn-bb-heartbeat-red{--bb-bg:#1c0509;--bb-fg:#fecdd3;--bb-bd:#f43f5e;--bb-gc:#f43f5e;--bb-anim:snBbGlow 2.4s ease-in-out infinite;}
html.theme-light .sn-bb.sn-bb-heartbeat-red{--bb-bg:#fde7eb;--bb-fg:#be3149;--bb-bd:#be3149;--bb-gc:#be3149;--bb-anim:snBbGlow 2.4s ease-in-out infinite;}
.sn-bb.sn-bb-prism-edge{--bb-bg:#111827;--bb-fg:#f9fafb;--bb-bd:transparent;--bb-c1:#f43f5e;--bb-c2:#facc15;--bb-c3:#22d3ee;--bb-anim:snBbBorder 3.4s linear infinite;--bb-bw:2px;}
html.theme-light .sn-bb.sn-bb-prism-edge{--bb-bg:#fdebee;--bb-fg:#1a0a14;--bb-bd:transparent;--bb-c1:#be3149;--bb-c2:#c39f10;--bb-c3:#1aa4b9;--bb-anim:snBbBorder 3.4s linear infinite;--bb-bw:2px;}
.sn-bb.sn-bb-candy-edge{--bb-bg:#1a1030;--bb-fg:#fdf4ff;--bb-bd:transparent;--bb-c1:#f472b6;--bb-c2:#c084fc;--bb-c3:#67e8f9;--bb-anim:snBbBorder 3.4s linear infinite;--bb-bw:2px;}
html.theme-light .sn-bb.sn-bb-candy-edge{--bb-bg:#fdf0f7;--bb-fg:#1a0a14;--bb-bd:transparent;--bb-c1:#be588d;--bb-c2:#9566c4;--bb-c3:#50b4c2;--bb-anim:snBbBorder 3.4s linear infinite;--bb-bw:2px;}
.sn-bb.sn-bb-toxic-edge{--bb-bg:#0b1a0b;--bb-fg:#ecfccb;--bb-bd:transparent;--bb-c1:#a3e635;--bb-c2:#22c55e;--bb-c3:#facc15;--bb-anim:snBbBorder 3.4s linear infinite;--bb-bw:2px;}
html.theme-light .sn-bb.sn-bb-toxic-edge{--bb-bg:#f5fcea;--bb-fg:#1a0a14;--bb-bd:transparent;--bb-c1:#7fb329;--bb-c2:#1a9949;--bb-c3:#c39f10;--bb-anim:snBbBorder 3.4s linear infinite;--bb-bw:2px;}
.sn-bb.sn-bb-fire-edge{--bb-bg:#1c0a0a;--bb-fg:#fff7ed;--bb-bd:transparent;--bb-c1:#ef4444;--bb-c2:#f97316;--bb-c3:#fde047;--bb-anim:snBbBorder 3.4s linear infinite;--bb-bw:2px;}
html.theme-light .sn-bb.sn-bb-fire-edge{--bb-bg:#fdecec;--bb-fg:#1a0a14;--bb-bd:transparent;--bb-c1:#ba3535;--bb-c2:#c25911;--bb-c3:#c5ae37;--bb-anim:snBbBorder 3.4s linear infinite;--bb-bw:2px;}
.sn-pt.sn-pt-ruby-glass{--pt-a:#ef4444;--pt-bg:rgba(239,68,68,0.14);--pt-r:18px;--pt-sh:0 8px 28px rgba(239,68,68,0.35);}
html.theme-light .sn-pt.sn-pt-ruby-glass{--pt-a:#ba3535;--pt-bg:rgba(239,68,68,0.07700000000000001);--pt-r:18px;--pt-sh:0 8px 28px rgba(239,68,68,0.1925);}
.sn-pt.sn-pt-ruby-paper{--pt-a:#ef4444;--pt-bg:rgba(239,68,68,0.08);--pt-r:8px;--pt-sh:0 2px 8px rgba(0,0,0,.2);--pt-img:radial-gradient(rgba(239,68,68,0.28) 1px,transparent 1.6px),linear-gradient(rgba(239,68,68,0.07),rgba(239,68,68,0.07));--pt-size:14px 14px,100% 100%;--pt-bs:dashed;--pt-ff:'Lora',serif;}
html.theme-light .sn-pt.sn-pt-ruby-paper{--pt-a:#ba3535;--pt-bg:rgba(239,68,68,0.08);--pt-r:8px;--pt-sh:0 2px 8px rgba(0,0,0,.2);--pt-img:radial-gradient(rgba(239,68,68,0.15400000000000003) 1px,transparent 1.6px),linear-gradient(rgba(239,68,68,0.07),rgba(239,68,68,0.07));--pt-size:14px 14px,100% 100%;--pt-bs:dashed;--pt-ff:'Lora',serif;}
.sn-pt.sn-pt-sapphire-edge{--pt-a:#3b82f6;--pt-bg:rgba(59,130,246,0.06);--pt-r:2px;--pt-sh:none;--pt-bw:2px;--pt-ff:'Space Mono',monospace;}
html.theme-light .sn-pt.sn-pt-sapphire-edge{--pt-a:#2e65bf;--pt-bg:rgba(59,130,246,0.06);--pt-r:2px;--pt-sh:none;--pt-bw:2px;--pt-ff:'Space Mono',monospace;}
.sn-pt.sn-pt-sapphire-blend{--pt-a:#3b82f6;--pt-bg:rgba(59,130,246,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(6,182,212,0.3);--pt-img:linear-gradient(135deg,rgba(59,130,246,0.26),rgba(6,182,212,0.26));}
html.theme-light .sn-pt.sn-pt-sapphire-blend{--pt-a:#2e65bf;--pt-bg:rgba(59,130,246,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(6,182,212,0.165);--pt-img:linear-gradient(135deg,rgba(59,130,246,0.14300000000000002),rgba(6,182,212,0.14300000000000002));}
.sn-pt.sn-pt-emerald-neon{--pt-a:#10b981;--pt-bg:rgba(0,0,0,.35);--pt-r:10px;--pt-sh:0 0 18px rgba(16,185,129,0.5),inset 0 0 12px rgba(16,185,129,0.22);--pt-bw:2px;--pt-ff:'Orbitron',sans-serif;}
html.theme-light .sn-pt.sn-pt-emerald-neon{--pt-a:#0c9064;--pt-bg:rgba(16,185,129,0.06);--pt-r:10px;--pt-sh:0 0 18px rgba(16,185,129,0.275),inset 0 0 12px rgba(16,185,129,0.12100000000000001);--pt-bw:2px;--pt-ff:'Orbitron',sans-serif;}
.sn-pt.sn-pt-emerald-grid{--pt-a:#10b981;--pt-bg:rgba(16,185,129,0.05);--pt-r:4px;--pt-sh:none;--pt-img:linear-gradient(rgba(16,185,129,0.2) 1px,transparent 1px),linear-gradient(90deg,rgba(16,185,129,0.2) 1px,transparent 1px),linear-gradient(rgba(16,185,129,0.05),rgba(16,185,129,0.05));--pt-size:18px 18px,18px 18px,100% 100%;--pt-ff:'JetBrains Mono',monospace;}
html.theme-light .sn-pt.sn-pt-emerald-grid{--pt-a:#0c9064;--pt-bg:rgba(16,185,129,0.05);--pt-r:4px;--pt-sh:none;--pt-img:linear-gradient(rgba(16,185,129,0.11000000000000001) 1px,transparent 1px),linear-gradient(90deg,rgba(16,185,129,0.11000000000000001) 1px,transparent 1px),linear-gradient(rgba(16,185,129,0.05),rgba(16,185,129,0.05));--pt-size:18px 18px,18px 18px,100% 100%;--pt-ff:'JetBrains Mono',monospace;}
.sn-pt.sn-pt-amethyst-paper{--pt-a:#a855f7;--pt-bg:rgba(168,85,247,0.08);--pt-r:8px;--pt-sh:0 2px 8px rgba(0,0,0,.2);--pt-img:radial-gradient(rgba(168,85,247,0.28) 1px,transparent 1.6px),linear-gradient(rgba(168,85,247,0.07),rgba(168,85,247,0.07));--pt-size:14px 14px,100% 100%;--pt-bs:dashed;--pt-ff:'Lora',serif;}
html.theme-light .sn-pt.sn-pt-amethyst-paper{--pt-a:#8342c0;--pt-bg:rgba(168,85,247,0.08);--pt-r:8px;--pt-sh:0 2px 8px rgba(0,0,0,.2);--pt-img:radial-gradient(rgba(168,85,247,0.15400000000000003) 1px,transparent 1.6px),linear-gradient(rgba(168,85,247,0.07),rgba(168,85,247,0.07));--pt-size:14px 14px,100% 100%;--pt-bs:dashed;--pt-ff:'Lora',serif;}
.sn-pt.sn-pt-amethyst-frame{--pt-a:#a855f7;--pt-bg:rgba(168,85,247,0.08);--pt-r:12px;--pt-sh:0 4px 18px rgba(168,85,247,0.25);--pt-bs:double;--pt-bw:4px;--pt-ff:'Cinzel',serif;}
html.theme-light .sn-pt.sn-pt-amethyst-frame{--pt-a:#8342c0;--pt-bg:rgba(168,85,247,0.08);--pt-r:12px;--pt-sh:0 4px 18px rgba(168,85,247,0.1375);--pt-bs:double;--pt-bw:4px;--pt-ff:'Cinzel',serif;}
.sn-pt.sn-pt-amber-blend{--pt-a:#f59e0b;--pt-bg:rgba(245,158,11,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(239,68,68,0.3);--pt-img:linear-gradient(135deg,rgba(245,158,11,0.26),rgba(239,68,68,0.26));}
html.theme-light .sn-pt.sn-pt-amber-blend{--pt-a:#bf7b08;--pt-bg:rgba(245,158,11,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(239,68,68,0.165);--pt-img:linear-gradient(135deg,rgba(245,158,11,0.14300000000000002),rgba(239,68,68,0.14300000000000002));}
.sn-pt.sn-pt-amber-stripes{--pt-a:#f59e0b;--pt-bg:rgba(245,158,11,0.06);--pt-r:10px;--pt-sh:none;--pt-img:repeating-linear-gradient(45deg,rgba(245,158,11,0.16) 0 8px,transparent 8px 16px),linear-gradient(rgba(245,158,11,0.06),rgba(245,158,11,0.06));--pt-ff:'Oswald',sans-serif;}
html.theme-light .sn-pt.sn-pt-amber-stripes{--pt-a:#bf7b08;--pt-bg:rgba(245,158,11,0.06);--pt-r:10px;--pt-sh:none;--pt-img:repeating-linear-gradient(45deg,rgba(245,158,11,0.08800000000000001) 0 8px,transparent 8px 16px),linear-gradient(rgba(245,158,11,0.06),rgba(245,158,11,0.06));--pt-ff:'Oswald',sans-serif;}
.sn-pt.sn-pt-teal-grid{--pt-a:#14b8a6;--pt-bg:rgba(20,184,166,0.05);--pt-r:4px;--pt-sh:none;--pt-img:linear-gradient(rgba(20,184,166,0.2) 1px,transparent 1px),linear-gradient(90deg,rgba(20,184,166,0.2) 1px,transparent 1px),linear-gradient(rgba(20,184,166,0.05),rgba(20,184,166,0.05));--pt-size:18px 18px,18px 18px,100% 100%;--pt-ff:'JetBrains Mono',monospace;}
html.theme-light .sn-pt.sn-pt-teal-grid{--pt-a:#0f8f81;--pt-bg:rgba(20,184,166,0.05);--pt-r:4px;--pt-sh:none;--pt-img:linear-gradient(rgba(20,184,166,0.11000000000000001) 1px,transparent 1px),linear-gradient(90deg,rgba(20,184,166,0.11000000000000001) 1px,transparent 1px),linear-gradient(rgba(20,184,166,0.05),rgba(20,184,166,0.05));--pt-size:18px 18px,18px 18px,100% 100%;--pt-ff:'JetBrains Mono',monospace;}
.sn-pt.sn-pt-teal-glass{--pt-a:#14b8a6;--pt-bg:rgba(20,184,166,0.14);--pt-r:18px;--pt-sh:0 8px 28px rgba(20,184,166,0.35);}
html.theme-light .sn-pt.sn-pt-teal-glass{--pt-a:#0f8f81;--pt-bg:rgba(20,184,166,0.07700000000000001);--pt-r:18px;--pt-sh:0 8px 28px rgba(20,184,166,0.1925);}
.sn-pt.sn-pt-fuchsia-frame{--pt-a:#d946ef;--pt-bg:rgba(217,70,239,0.08);--pt-r:12px;--pt-sh:0 4px 18px rgba(217,70,239,0.25);--pt-bs:double;--pt-bw:4px;--pt-ff:'Cinzel',serif;}
html.theme-light .sn-pt.sn-pt-fuchsia-frame{--pt-a:#a936ba;--pt-bg:rgba(217,70,239,0.08);--pt-r:12px;--pt-sh:0 4px 18px rgba(217,70,239,0.1375);--pt-bs:double;--pt-bw:4px;--pt-ff:'Cinzel',serif;}
.sn-pt.sn-pt-fuchsia-edge{--pt-a:#d946ef;--pt-bg:rgba(217,70,239,0.06);--pt-r:2px;--pt-sh:none;--pt-bw:2px;--pt-ff:'Space Mono',monospace;}
html.theme-light .sn-pt.sn-pt-fuchsia-edge{--pt-a:#a936ba;--pt-bg:rgba(217,70,239,0.06);--pt-r:2px;--pt-sh:none;--pt-bw:2px;--pt-ff:'Space Mono',monospace;}
.sn-pt.sn-pt-lime-stripes{--pt-a:#84cc16;--pt-bg:rgba(132,204,22,0.06);--pt-r:10px;--pt-sh:none;--pt-img:repeating-linear-gradient(45deg,rgba(132,204,22,0.16) 0 8px,transparent 8px 16px),linear-gradient(rgba(132,204,22,0.06),rgba(132,204,22,0.06));--pt-ff:'Oswald',sans-serif;}
html.theme-light .sn-pt.sn-pt-lime-stripes{--pt-a:#669f11;--pt-bg:rgba(132,204,22,0.06);--pt-r:10px;--pt-sh:none;--pt-img:repeating-linear-gradient(45deg,rgba(132,204,22,0.08800000000000001) 0 8px,transparent 8px 16px),linear-gradient(rgba(132,204,22,0.06),rgba(132,204,22,0.06));--pt-ff:'Oswald',sans-serif;}
.sn-pt.sn-pt-lime-neon{--pt-a:#84cc16;--pt-bg:rgba(0,0,0,.35);--pt-r:10px;--pt-sh:0 0 18px rgba(132,204,22,0.5),inset 0 0 12px rgba(132,204,22,0.22);--pt-bw:2px;--pt-ff:'Orbitron',sans-serif;}
html.theme-light .sn-pt.sn-pt-lime-neon{--pt-a:#669f11;--pt-bg:rgba(132,204,22,0.06);--pt-r:10px;--pt-sh:0 0 18px rgba(132,204,22,0.275),inset 0 0 12px rgba(132,204,22,0.12100000000000001);--pt-bw:2px;--pt-ff:'Orbitron',sans-serif;}
.sn-pt.sn-pt-crimson-glass{--pt-a:#dc2626;--pt-bg:rgba(220,38,38,0.14);--pt-r:18px;--pt-sh:0 8px 28px rgba(220,38,38,0.35);}
html.theme-light .sn-pt.sn-pt-crimson-glass{--pt-a:#ab1d1d;--pt-bg:rgba(220,38,38,0.07700000000000001);--pt-r:18px;--pt-sh:0 8px 28px rgba(220,38,38,0.1925);}
.sn-pt.sn-pt-crimson-paper{--pt-a:#dc2626;--pt-bg:rgba(220,38,38,0.08);--pt-r:8px;--pt-sh:0 2px 8px rgba(0,0,0,.2);--pt-img:radial-gradient(rgba(220,38,38,0.28) 1px,transparent 1.6px),linear-gradient(rgba(220,38,38,0.07),rgba(220,38,38,0.07));--pt-size:14px 14px,100% 100%;--pt-bs:dashed;--pt-ff:'Lora',serif;}
html.theme-light .sn-pt.sn-pt-crimson-paper{--pt-a:#ab1d1d;--pt-bg:rgba(220,38,38,0.08);--pt-r:8px;--pt-sh:0 2px 8px rgba(0,0,0,.2);--pt-img:radial-gradient(rgba(220,38,38,0.15400000000000003) 1px,transparent 1.6px),linear-gradient(rgba(220,38,38,0.07),rgba(220,38,38,0.07));--pt-size:14px 14px,100% 100%;--pt-bs:dashed;--pt-ff:'Lora',serif;}
.sn-pt.sn-pt-indigo-edge{--pt-a:#6366f1;--pt-bg:rgba(99,102,241,0.06);--pt-r:2px;--pt-sh:none;--pt-bw:2px;--pt-ff:'Space Mono',monospace;}
html.theme-light .sn-pt.sn-pt-indigo-edge{--pt-a:#4d4fbb;--pt-bg:rgba(99,102,241,0.06);--pt-r:2px;--pt-sh:none;--pt-bw:2px;--pt-ff:'Space Mono',monospace;}
.sn-pt.sn-pt-indigo-blend{--pt-a:#6366f1;--pt-bg:rgba(99,102,241,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(167,139,250,0.3);--pt-img:linear-gradient(135deg,rgba(99,102,241,0.26),rgba(167,139,250,0.26));}
html.theme-light .sn-pt.sn-pt-indigo-blend{--pt-a:#4d4fbb;--pt-bg:rgba(99,102,241,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(167,139,250,0.165);--pt-img:linear-gradient(135deg,rgba(99,102,241,0.14300000000000002),rgba(167,139,250,0.14300000000000002));}
.sn-pt.sn-pt-coral-neon{--pt-a:#fb7185;--pt-bg:rgba(0,0,0,.35);--pt-r:10px;--pt-sh:0 0 18px rgba(251,113,133,0.5),inset 0 0 12px rgba(251,113,133,0.22);--pt-bw:2px;--pt-ff:'Orbitron',sans-serif;}
html.theme-light .sn-pt.sn-pt-coral-neon{--pt-a:#c35867;--pt-bg:rgba(251,113,133,0.06);--pt-r:10px;--pt-sh:0 0 18px rgba(251,113,133,0.275),inset 0 0 12px rgba(251,113,133,0.12100000000000001);--pt-bw:2px;--pt-ff:'Orbitron',sans-serif;}
.sn-pt.sn-pt-coral-grid{--pt-a:#fb7185;--pt-bg:rgba(251,113,133,0.05);--pt-r:4px;--pt-sh:none;--pt-img:linear-gradient(rgba(251,113,133,0.2) 1px,transparent 1px),linear-gradient(90deg,rgba(251,113,133,0.2) 1px,transparent 1px),linear-gradient(rgba(251,113,133,0.05),rgba(251,113,133,0.05));--pt-size:18px 18px,18px 18px,100% 100%;--pt-ff:'JetBrains Mono',monospace;}
html.theme-light .sn-pt.sn-pt-coral-grid{--pt-a:#c35867;--pt-bg:rgba(251,113,133,0.05);--pt-r:4px;--pt-sh:none;--pt-img:linear-gradient(rgba(251,113,133,0.11000000000000001) 1px,transparent 1px),linear-gradient(90deg,rgba(251,113,133,0.11000000000000001) 1px,transparent 1px),linear-gradient(rgba(251,113,133,0.05),rgba(251,113,133,0.05));--pt-size:18px 18px,18px 18px,100% 100%;--pt-ff:'JetBrains Mono',monospace;}
.sn-pt.sn-pt-mint-paper{--pt-a:#34d399;--pt-bg:rgba(52,211,153,0.08);--pt-r:8px;--pt-sh:0 2px 8px rgba(0,0,0,.2);--pt-img:radial-gradient(rgba(52,211,153,0.28) 1px,transparent 1.6px),linear-gradient(rgba(52,211,153,0.07),rgba(52,211,153,0.07));--pt-size:14px 14px,100% 100%;--pt-bs:dashed;--pt-ff:'Lora',serif;}
html.theme-light .sn-pt.sn-pt-mint-paper{--pt-a:#28a477;--pt-bg:rgba(52,211,153,0.08);--pt-r:8px;--pt-sh:0 2px 8px rgba(0,0,0,.2);--pt-img:radial-gradient(rgba(52,211,153,0.15400000000000003) 1px,transparent 1.6px),linear-gradient(rgba(52,211,153,0.07),rgba(52,211,153,0.07));--pt-size:14px 14px,100% 100%;--pt-bs:dashed;--pt-ff:'Lora',serif;}
.sn-pt.sn-pt-mint-frame{--pt-a:#34d399;--pt-bg:rgba(52,211,153,0.08);--pt-r:12px;--pt-sh:0 4px 18px rgba(52,211,153,0.25);--pt-bs:double;--pt-bw:4px;--pt-ff:'Cinzel',serif;}
html.theme-light .sn-pt.sn-pt-mint-frame{--pt-a:#28a477;--pt-bg:rgba(52,211,153,0.08);--pt-r:12px;--pt-sh:0 4px 18px rgba(52,211,153,0.1375);--pt-bs:double;--pt-bw:4px;--pt-ff:'Cinzel',serif;}
.sn-pt.sn-pt-lavender-blend{--pt-a:#a78bfa;--pt-bg:rgba(167,139,250,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(240,171,252,0.3);--pt-img:linear-gradient(135deg,rgba(167,139,250,0.26),rgba(240,171,252,0.26));}
html.theme-light .sn-pt.sn-pt-lavender-blend{--pt-a:#826cc3;--pt-bg:rgba(167,139,250,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(240,171,252,0.165);--pt-img:linear-gradient(135deg,rgba(167,139,250,0.14300000000000002),rgba(240,171,252,0.14300000000000002));}
.sn-pt.sn-pt-lavender-stripes{--pt-a:#a78bfa;--pt-bg:rgba(167,139,250,0.06);--pt-r:10px;--pt-sh:none;--pt-img:repeating-linear-gradient(45deg,rgba(167,139,250,0.16) 0 8px,transparent 8px 16px),linear-gradient(rgba(167,139,250,0.06),rgba(167,139,250,0.06));--pt-ff:'Oswald',sans-serif;}
html.theme-light .sn-pt.sn-pt-lavender-stripes{--pt-a:#826cc3;--pt-bg:rgba(167,139,250,0.06);--pt-r:10px;--pt-sh:none;--pt-img:repeating-linear-gradient(45deg,rgba(167,139,250,0.08800000000000001) 0 8px,transparent 8px 16px),linear-gradient(rgba(167,139,250,0.06),rgba(167,139,250,0.06));--pt-ff:'Oswald',sans-serif;}
.sn-pt.sn-pt-peach-grid{--pt-a:#fdba74;--pt-bg:rgba(253,186,116,0.05);--pt-r:4px;--pt-sh:none;--pt-img:linear-gradient(rgba(253,186,116,0.2) 1px,transparent 1px),linear-gradient(90deg,rgba(253,186,116,0.2) 1px,transparent 1px),linear-gradient(rgba(253,186,116,0.05),rgba(253,186,116,0.05));--pt-size:18px 18px,18px 18px,100% 100%;--pt-ff:'JetBrains Mono',monospace;}
html.theme-light .sn-pt.sn-pt-peach-grid{--pt-a:#c5915a;--pt-bg:rgba(253,186,116,0.05);--pt-r:4px;--pt-sh:none;--pt-img:linear-gradient(rgba(253,186,116,0.11000000000000001) 1px,transparent 1px),linear-gradient(90deg,rgba(253,186,116,0.11000000000000001) 1px,transparent 1px),linear-gradient(rgba(253,186,116,0.05),rgba(253,186,116,0.05));--pt-size:18px 18px,18px 18px,100% 100%;--pt-ff:'JetBrains Mono',monospace;}
.sn-pt.sn-pt-peach-glass{--pt-a:#fdba74;--pt-bg:rgba(253,186,116,0.14);--pt-r:18px;--pt-sh:0 8px 28px rgba(253,186,116,0.35);}
html.theme-light .sn-pt.sn-pt-peach-glass{--pt-a:#c5915a;--pt-bg:rgba(253,186,116,0.07700000000000001);--pt-r:18px;--pt-sh:0 8px 28px rgba(253,186,116,0.1925);}
.sn-pt.sn-pt-sky-frame{--pt-a:#38bdf8;--pt-bg:rgba(56,189,248,0.08);--pt-r:12px;--pt-sh:0 4px 18px rgba(56,189,248,0.25);--pt-bs:double;--pt-bw:4px;--pt-ff:'Cinzel',serif;}
html.theme-light .sn-pt.sn-pt-sky-frame{--pt-a:#2b93c1;--pt-bg:rgba(56,189,248,0.08);--pt-r:12px;--pt-sh:0 4px 18px rgba(56,189,248,0.1375);--pt-bs:double;--pt-bw:4px;--pt-ff:'Cinzel',serif;}
.sn-pt.sn-pt-sky-edge{--pt-a:#38bdf8;--pt-bg:rgba(56,189,248,0.06);--pt-r:2px;--pt-sh:none;--pt-bw:2px;--pt-ff:'Space Mono',monospace;}
html.theme-light .sn-pt.sn-pt-sky-edge{--pt-a:#2b93c1;--pt-bg:rgba(56,189,248,0.06);--pt-r:2px;--pt-sh:none;--pt-bw:2px;--pt-ff:'Space Mono',monospace;}
.sn-pt.sn-pt-lemon-stripes{--pt-a:#facc15;--pt-bg:rgba(250,204,21,0.06);--pt-r:10px;--pt-sh:none;--pt-img:repeating-linear-gradient(45deg,rgba(250,204,21,0.16) 0 8px,transparent 8px 16px),linear-gradient(rgba(250,204,21,0.06),rgba(250,204,21,0.06));--pt-ff:'Oswald',sans-serif;}
html.theme-light .sn-pt.sn-pt-lemon-stripes{--pt-a:#c39f10;--pt-bg:rgba(250,204,21,0.06);--pt-r:10px;--pt-sh:none;--pt-img:repeating-linear-gradient(45deg,rgba(250,204,21,0.08800000000000001) 0 8px,transparent 8px 16px),linear-gradient(rgba(250,204,21,0.06),rgba(250,204,21,0.06));--pt-ff:'Oswald',sans-serif;}
.sn-pt.sn-pt-lemon-neon{--pt-a:#facc15;--pt-bg:rgba(0,0,0,.35);--pt-r:10px;--pt-sh:0 0 18px rgba(250,204,21,0.5),inset 0 0 12px rgba(250,204,21,0.22);--pt-bw:2px;--pt-ff:'Orbitron',sans-serif;}
html.theme-light .sn-pt.sn-pt-lemon-neon{--pt-a:#c39f10;--pt-bg:rgba(250,204,21,0.06);--pt-r:10px;--pt-sh:0 0 18px rgba(250,204,21,0.275),inset 0 0 12px rgba(250,204,21,0.12100000000000001);--pt-bw:2px;--pt-ff:'Orbitron',sans-serif;}
.sn-pt.sn-pt-berry-glass{--pt-a:#be185d;--pt-bg:rgba(190,24,93,0.14);--pt-r:18px;--pt-sh:0 8px 28px rgba(190,24,93,0.35);}
html.theme-light .sn-pt.sn-pt-berry-glass{--pt-a:#941248;--pt-bg:rgba(190,24,93,0.07700000000000001);--pt-r:18px;--pt-sh:0 8px 28px rgba(190,24,93,0.1925);}
.sn-pt.sn-pt-berry-paper{--pt-a:#be185d;--pt-bg:rgba(190,24,93,0.08);--pt-r:8px;--pt-sh:0 2px 8px rgba(0,0,0,.2);--pt-img:radial-gradient(rgba(190,24,93,0.28) 1px,transparent 1.6px),linear-gradient(rgba(190,24,93,0.07),rgba(190,24,93,0.07));--pt-size:14px 14px,100% 100%;--pt-bs:dashed;--pt-ff:'Lora',serif;}
html.theme-light .sn-pt.sn-pt-berry-paper{--pt-a:#941248;--pt-bg:rgba(190,24,93,0.08);--pt-r:8px;--pt-sh:0 2px 8px rgba(0,0,0,.2);--pt-img:radial-gradient(rgba(190,24,93,0.15400000000000003) 1px,transparent 1.6px),linear-gradient(rgba(190,24,93,0.07),rgba(190,24,93,0.07));--pt-size:14px 14px,100% 100%;--pt-bs:dashed;--pt-ff:'Lora',serif;}
.sn-pt.sn-pt-cocoa-edge{--pt-a:#a16207;--pt-bg:rgba(161,98,7,0.06);--pt-r:2px;--pt-sh:none;--pt-bw:2px;--pt-ff:'Space Mono',monospace;}
html.theme-light .sn-pt.sn-pt-cocoa-edge{--pt-a:#7d4c05;--pt-bg:rgba(161,98,7,0.06);--pt-r:2px;--pt-sh:none;--pt-bw:2px;--pt-ff:'Space Mono',monospace;}
.sn-pt.sn-pt-cocoa-blend{--pt-a:#a16207;--pt-bg:rgba(161,98,7,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(120,53,15,0.3);--pt-img:linear-gradient(135deg,rgba(161,98,7,0.26),rgba(120,53,15,0.26));}
html.theme-light .sn-pt.sn-pt-cocoa-blend{--pt-a:#7d4c05;--pt-bg:rgba(161,98,7,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(120,53,15,0.165);--pt-img:linear-gradient(135deg,rgba(161,98,7,0.14300000000000002),rgba(120,53,15,0.14300000000000002));}
.sn-pt.sn-pt-slate-neon{--pt-a:#64748b;--pt-bg:rgba(0,0,0,.35);--pt-r:10px;--pt-sh:0 0 18px rgba(100,116,139,0.5),inset 0 0 12px rgba(100,116,139,0.22);--pt-bw:2px;--pt-ff:'Orbitron',sans-serif;}
html.theme-light .sn-pt.sn-pt-slate-neon{--pt-a:#4e5a6c;--pt-bg:rgba(100,116,139,0.06);--pt-r:10px;--pt-sh:0 0 18px rgba(100,116,139,0.275),inset 0 0 12px rgba(100,116,139,0.12100000000000001);--pt-bw:2px;--pt-ff:'Orbitron',sans-serif;}
.sn-pt.sn-pt-slate-grid{--pt-a:#64748b;--pt-bg:rgba(100,116,139,0.05);--pt-r:4px;--pt-sh:none;--pt-img:linear-gradient(rgba(100,116,139,0.2) 1px,transparent 1px),linear-gradient(90deg,rgba(100,116,139,0.2) 1px,transparent 1px),linear-gradient(rgba(100,116,139,0.05),rgba(100,116,139,0.05));--pt-size:18px 18px,18px 18px,100% 100%;--pt-ff:'JetBrains Mono',monospace;}
html.theme-light .sn-pt.sn-pt-slate-grid{--pt-a:#4e5a6c;--pt-bg:rgba(100,116,139,0.05);--pt-r:4px;--pt-sh:none;--pt-img:linear-gradient(rgba(100,116,139,0.11000000000000001) 1px,transparent 1px),linear-gradient(90deg,rgba(100,116,139,0.11000000000000001) 1px,transparent 1px),linear-gradient(rgba(100,116,139,0.05),rgba(100,116,139,0.05));--pt-size:18px 18px,18px 18px,100% 100%;--pt-ff:'JetBrains Mono',monospace;}
.sn-pt.sn-pt-rosewood-paper{--pt-a:#9f1239;--pt-bg:rgba(159,18,57,0.08);--pt-r:8px;--pt-sh:0 2px 8px rgba(0,0,0,.2);--pt-img:radial-gradient(rgba(159,18,57,0.28) 1px,transparent 1.6px),linear-gradient(rgba(159,18,57,0.07),rgba(159,18,57,0.07));--pt-size:14px 14px,100% 100%;--pt-bs:dashed;--pt-ff:'Lora',serif;}
html.theme-light .sn-pt.sn-pt-rosewood-paper{--pt-a:#7c0e2c;--pt-bg:rgba(159,18,57,0.08);--pt-r:8px;--pt-sh:0 2px 8px rgba(0,0,0,.2);--pt-img:radial-gradient(rgba(159,18,57,0.15400000000000003) 1px,transparent 1.6px),linear-gradient(rgba(159,18,57,0.07),rgba(159,18,57,0.07));--pt-size:14px 14px,100% 100%;--pt-bs:dashed;--pt-ff:'Lora',serif;}
.sn-pt.sn-pt-rosewood-frame{--pt-a:#9f1239;--pt-bg:rgba(159,18,57,0.08);--pt-r:12px;--pt-sh:0 4px 18px rgba(159,18,57,0.25);--pt-bs:double;--pt-bw:4px;--pt-ff:'Cinzel',serif;}
html.theme-light .sn-pt.sn-pt-rosewood-frame{--pt-a:#7c0e2c;--pt-bg:rgba(159,18,57,0.08);--pt-r:12px;--pt-sh:0 4px 18px rgba(159,18,57,0.1375);--pt-bs:double;--pt-bw:4px;--pt-ff:'Cinzel',serif;}
.sn-pt.sn-pt-jade-blend{--pt-a:#059669;--pt-bg:rgba(5,150,105,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(13,148,136,0.3);--pt-img:linear-gradient(135deg,rgba(5,150,105,0.26),rgba(13,148,136,0.26));}
html.theme-light .sn-pt.sn-pt-jade-blend{--pt-a:#037551;--pt-bg:rgba(5,150,105,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(13,148,136,0.165);--pt-img:linear-gradient(135deg,rgba(5,150,105,0.14300000000000002),rgba(13,148,136,0.14300000000000002));}
.sn-pt.sn-pt-jade-stripes{--pt-a:#059669;--pt-bg:rgba(5,150,105,0.06);--pt-r:10px;--pt-sh:none;--pt-img:repeating-linear-gradient(45deg,rgba(5,150,105,0.16) 0 8px,transparent 8px 16px),linear-gradient(rgba(5,150,105,0.06),rgba(5,150,105,0.06));--pt-ff:'Oswald',sans-serif;}
html.theme-light .sn-pt.sn-pt-jade-stripes{--pt-a:#037551;--pt-bg:rgba(5,150,105,0.06);--pt-r:10px;--pt-sh:none;--pt-img:repeating-linear-gradient(45deg,rgba(5,150,105,0.08800000000000001) 0 8px,transparent 8px 16px),linear-gradient(rgba(5,150,105,0.06),rgba(5,150,105,0.06));--pt-ff:'Oswald',sans-serif;}
.sn-pt.sn-pt-cobalt-grid{--pt-a:#1d4ed8;--pt-bg:rgba(29,78,216,0.05);--pt-r:4px;--pt-sh:none;--pt-img:linear-gradient(rgba(29,78,216,0.2) 1px,transparent 1px),linear-gradient(90deg,rgba(29,78,216,0.2) 1px,transparent 1px),linear-gradient(rgba(29,78,216,0.05),rgba(29,78,216,0.05));--pt-size:18px 18px,18px 18px,100% 100%;--pt-ff:'JetBrains Mono',monospace;}
html.theme-light .sn-pt.sn-pt-cobalt-grid{--pt-a:#163ca8;--pt-bg:rgba(29,78,216,0.05);--pt-r:4px;--pt-sh:none;--pt-img:linear-gradient(rgba(29,78,216,0.11000000000000001) 1px,transparent 1px),linear-gradient(90deg,rgba(29,78,216,0.11000000000000001) 1px,transparent 1px),linear-gradient(rgba(29,78,216,0.05),rgba(29,78,216,0.05));--pt-size:18px 18px,18px 18px,100% 100%;--pt-ff:'JetBrains Mono',monospace;}
.sn-pt.sn-pt-cobalt-glass{--pt-a:#1d4ed8;--pt-bg:rgba(29,78,216,0.14);--pt-r:18px;--pt-sh:0 8px 28px rgba(29,78,216,0.35);}
html.theme-light .sn-pt.sn-pt-cobalt-glass{--pt-a:#163ca8;--pt-bg:rgba(29,78,216,0.07700000000000001);--pt-r:18px;--pt-sh:0 8px 28px rgba(29,78,216,0.1925);}
.sn-pt.sn-pt-tangerine-frame{--pt-a:#f97316;--pt-bg:rgba(249,115,22,0.08);--pt-r:12px;--pt-sh:0 4px 18px rgba(249,115,22,0.25);--pt-bs:double;--pt-bw:4px;--pt-ff:'Cinzel',serif;}
html.theme-light .sn-pt.sn-pt-tangerine-frame{--pt-a:#c25911;--pt-bg:rgba(249,115,22,0.08);--pt-r:12px;--pt-sh:0 4px 18px rgba(249,115,22,0.1375);--pt-bs:double;--pt-bw:4px;--pt-ff:'Cinzel',serif;}
.sn-pt.sn-pt-tangerine-edge{--pt-a:#f97316;--pt-bg:rgba(249,115,22,0.06);--pt-r:2px;--pt-sh:none;--pt-bw:2px;--pt-ff:'Space Mono',monospace;}
html.theme-light .sn-pt.sn-pt-tangerine-edge{--pt-a:#c25911;--pt-bg:rgba(249,115,22,0.06);--pt-r:2px;--pt-sh:none;--pt-bw:2px;--pt-ff:'Space Mono',monospace;}
.sn-pt.sn-pt-orchid-stripes{--pt-a:#c026d3;--pt-bg:rgba(192,38,211,0.06);--pt-r:10px;--pt-sh:none;--pt-img:repeating-linear-gradient(45deg,rgba(192,38,211,0.16) 0 8px,transparent 8px 16px),linear-gradient(rgba(192,38,211,0.06),rgba(192,38,211,0.06));--pt-ff:'Oswald',sans-serif;}
html.theme-light .sn-pt.sn-pt-orchid-stripes{--pt-a:#951da4;--pt-bg:rgba(192,38,211,0.06);--pt-r:10px;--pt-sh:none;--pt-img:repeating-linear-gradient(45deg,rgba(192,38,211,0.08800000000000001) 0 8px,transparent 8px 16px),linear-gradient(rgba(192,38,211,0.06),rgba(192,38,211,0.06));--pt-ff:'Oswald',sans-serif;}
.sn-pt.sn-pt-orchid-neon{--pt-a:#c026d3;--pt-bg:rgba(0,0,0,.35);--pt-r:10px;--pt-sh:0 0 18px rgba(192,38,211,0.5),inset 0 0 12px rgba(192,38,211,0.22);--pt-bw:2px;--pt-ff:'Orbitron',sans-serif;}
html.theme-light .sn-pt.sn-pt-orchid-neon{--pt-a:#951da4;--pt-bg:rgba(192,38,211,0.06);--pt-r:10px;--pt-sh:0 0 18px rgba(192,38,211,0.275),inset 0 0 12px rgba(192,38,211,0.12100000000000001);--pt-bw:2px;--pt-ff:'Orbitron',sans-serif;}
.sn-pt.sn-pt-pine-glass{--pt-a:#15803d;--pt-bg:rgba(21,128,61,0.14);--pt-r:18px;--pt-sh:0 8px 28px rgba(21,128,61,0.35);}
html.theme-light .sn-pt.sn-pt-pine-glass{--pt-a:#10632f;--pt-bg:rgba(21,128,61,0.07700000000000001);--pt-r:18px;--pt-sh:0 8px 28px rgba(21,128,61,0.1925);}
.sn-pt.sn-pt-pine-paper{--pt-a:#15803d;--pt-bg:rgba(21,128,61,0.08);--pt-r:8px;--pt-sh:0 2px 8px rgba(0,0,0,.2);--pt-img:radial-gradient(rgba(21,128,61,0.28) 1px,transparent 1.6px),linear-gradient(rgba(21,128,61,0.07),rgba(21,128,61,0.07));--pt-size:14px 14px,100% 100%;--pt-bs:dashed;--pt-ff:'Lora',serif;}
html.theme-light .sn-pt.sn-pt-pine-paper{--pt-a:#10632f;--pt-bg:rgba(21,128,61,0.08);--pt-r:8px;--pt-sh:0 2px 8px rgba(0,0,0,.2);--pt-img:radial-gradient(rgba(21,128,61,0.15400000000000003) 1px,transparent 1.6px),linear-gradient(rgba(21,128,61,0.07),rgba(21,128,61,0.07));--pt-size:14px 14px,100% 100%;--pt-bs:dashed;--pt-ff:'Lora',serif;}
.sn-pt.sn-pt-glacier-edge{--pt-a:#7dd3fc;--pt-bg:rgba(125,211,252,0.06);--pt-r:2px;--pt-sh:none;--pt-bw:2px;--pt-ff:'Space Mono',monospace;}
html.theme-light .sn-pt.sn-pt-glacier-edge{--pt-a:#61a4c4;--pt-bg:rgba(125,211,252,0.06);--pt-r:2px;--pt-sh:none;--pt-bw:2px;--pt-ff:'Space Mono',monospace;}
.sn-pt.sn-pt-glacier-blend{--pt-a:#7dd3fc;--pt-bg:rgba(125,211,252,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(196,181,253,0.3);--pt-img:linear-gradient(135deg,rgba(125,211,252,0.26),rgba(196,181,253,0.26));}
html.theme-light .sn-pt.sn-pt-glacier-blend{--pt-a:#61a4c4;--pt-bg:rgba(125,211,252,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(196,181,253,0.165);--pt-img:linear-gradient(135deg,rgba(125,211,252,0.14300000000000002),rgba(196,181,253,0.14300000000000002));}
.sn-pt.sn-pt-sunset-neon{--pt-a:#fb923c;--pt-bg:rgba(0,0,0,.35);--pt-r:10px;--pt-sh:0 0 18px rgba(251,146,60,0.5),inset 0 0 12px rgba(251,146,60,0.22);--pt-bw:2px;--pt-ff:'Orbitron',sans-serif;}
html.theme-light .sn-pt.sn-pt-sunset-neon{--pt-a:#c3712e;--pt-bg:rgba(251,146,60,0.06);--pt-r:10px;--pt-sh:0 0 18px rgba(251,146,60,0.275),inset 0 0 12px rgba(251,146,60,0.12100000000000001);--pt-bw:2px;--pt-ff:'Orbitron',sans-serif;}
.sn-pt.sn-pt-sunset-grid{--pt-a:#fb923c;--pt-bg:rgba(251,146,60,0.05);--pt-r:4px;--pt-sh:none;--pt-img:linear-gradient(rgba(251,146,60,0.2) 1px,transparent 1px),linear-gradient(90deg,rgba(251,146,60,0.2) 1px,transparent 1px),linear-gradient(rgba(251,146,60,0.05),rgba(251,146,60,0.05));--pt-size:18px 18px,18px 18px,100% 100%;--pt-ff:'JetBrains Mono',monospace;}
html.theme-light .sn-pt.sn-pt-sunset-grid{--pt-a:#c3712e;--pt-bg:rgba(251,146,60,0.05);--pt-r:4px;--pt-sh:none;--pt-img:linear-gradient(rgba(251,146,60,0.11000000000000001) 1px,transparent 1px),linear-gradient(90deg,rgba(251,146,60,0.11000000000000001) 1px,transparent 1px),linear-gradient(rgba(251,146,60,0.05),rgba(251,146,60,0.05));--pt-size:18px 18px,18px 18px,100% 100%;--pt-ff:'JetBrains Mono',monospace;}
.sn-pt.sn-pt-midnight-paper{--pt-a:#4f46e5;--pt-bg:rgba(79,70,229,0.08);--pt-r:8px;--pt-sh:0 2px 8px rgba(0,0,0,.2);--pt-img:radial-gradient(rgba(79,70,229,0.28) 1px,transparent 1.6px),linear-gradient(rgba(79,70,229,0.07),rgba(79,70,229,0.07));--pt-size:14px 14px,100% 100%;--pt-bs:dashed;--pt-ff:'Lora',serif;}
html.theme-light .sn-pt.sn-pt-midnight-paper{--pt-a:#3d36b2;--pt-bg:rgba(79,70,229,0.08);--pt-r:8px;--pt-sh:0 2px 8px rgba(0,0,0,.2);--pt-img:radial-gradient(rgba(79,70,229,0.15400000000000003) 1px,transparent 1.6px),linear-gradient(rgba(79,70,229,0.07),rgba(79,70,229,0.07));--pt-size:14px 14px,100% 100%;--pt-bs:dashed;--pt-ff:'Lora',serif;}
.sn-pt.sn-pt-midnight-frame{--pt-a:#4f46e5;--pt-bg:rgba(79,70,229,0.08);--pt-r:12px;--pt-sh:0 4px 18px rgba(79,70,229,0.25);--pt-bs:double;--pt-bw:4px;--pt-ff:'Cinzel',serif;}
html.theme-light .sn-pt.sn-pt-midnight-frame{--pt-a:#3d36b2;--pt-bg:rgba(79,70,229,0.08);--pt-r:12px;--pt-sh:0 4px 18px rgba(79,70,229,0.1375);--pt-bs:double;--pt-bw:4px;--pt-ff:'Cinzel',serif;}
.sn-pt.sn-pt-bubblegum-blend{--pt-a:#f472b6;--pt-bg:rgba(244,114,182,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(103,232,249,0.3);--pt-img:linear-gradient(135deg,rgba(244,114,182,0.26),rgba(103,232,249,0.26));}
html.theme-light .sn-pt.sn-pt-bubblegum-blend{--pt-a:#be588d;--pt-bg:rgba(244,114,182,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(103,232,249,0.165);--pt-img:linear-gradient(135deg,rgba(244,114,182,0.14300000000000002),rgba(103,232,249,0.14300000000000002));}
.sn-pt.sn-pt-bubblegum-stripes{--pt-a:#f472b6;--pt-bg:rgba(244,114,182,0.06);--pt-r:10px;--pt-sh:none;--pt-img:repeating-linear-gradient(45deg,rgba(244,114,182,0.16) 0 8px,transparent 8px 16px),linear-gradient(rgba(244,114,182,0.06),rgba(244,114,182,0.06));--pt-ff:'Oswald',sans-serif;}
html.theme-light .sn-pt.sn-pt-bubblegum-stripes{--pt-a:#be588d;--pt-bg:rgba(244,114,182,0.06);--pt-r:10px;--pt-sh:none;--pt-img:repeating-linear-gradient(45deg,rgba(244,114,182,0.08800000000000001) 0 8px,transparent 8px 16px),linear-gradient(rgba(244,114,182,0.06),rgba(244,114,182,0.06));--pt-ff:'Oswald',sans-serif;}
.sn-pt.sn-pt-ruby-pulse{--pt-a:#ef4444;--pt-bg:rgba(239,68,68,0.12);--pt-r:16px;--pt-sh:0 0 14px rgba(239,68,68,0.4);--pt-gc:#ef4444;--pt-anim:snPtGlow 2.6s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-ruby-pulse{--pt-a:#ba3535;--pt-bg:rgba(239,68,68,0.12);--pt-r:16px;--pt-sh:0 0 14px rgba(239,68,68,0.22000000000000003);--pt-gc:#ba3535;--pt-anim:snPtGlow 2.6s ease-in-out infinite;}
.sn-pt.sn-pt-ruby-drift{--pt-a:#ef4444;--pt-bg:rgba(239,68,68,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(249,115,22,0.3);--pt-img:linear-gradient(120deg,rgba(239,68,68,0.3),rgba(249,115,22,0.3),rgba(239,68,68,0.3));--pt-size:300% 300%;--pt-anim:snPtDrift 9s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-ruby-drift{--pt-a:#ba3535;--pt-bg:rgba(239,68,68,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(249,115,22,0.165);--pt-img:linear-gradient(120deg,rgba(239,68,68,0.165),rgba(249,115,22,0.165),rgba(239,68,68,0.165));--pt-size:300% 300%;--pt-anim:snPtDrift 9s ease-in-out infinite;}
.sn-pt.sn-pt-sapphire-cycle{--pt-a:#3b82f6;--pt-bg:rgba(59,130,246,0.08);--pt-r:12px;--pt-sh:0 0 16px rgba(6,182,212,0.3);--pt-a2:#06b6d4;--pt-bw:2px;--pt-anim:snPtBorder 3.4s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-sapphire-cycle{--pt-a:#2e65bf;--pt-bg:rgba(59,130,246,0.08);--pt-r:12px;--pt-sh:0 0 16px rgba(6,182,212,0.165);--pt-a2:#048da5;--pt-bw:2px;--pt-anim:snPtBorder 3.4s ease-in-out infinite;}
.sn-pt.sn-pt-sapphire-aurora{--pt-a:#3b82f6;--pt-bg:rgba(59,130,246,0.08);--pt-r:14px;--pt-sh:0 0 20px rgba(6,182,212,0.35);--pt-img:linear-gradient(135deg,rgba(59,130,246,0.28),rgba(6,182,212,0.28),rgba(167,139,250,0.25),rgba(59,130,246,0.28));--pt-size:300% 300%;--pt-a2:#06b6d4;--pt-anim:snPtDrift 7s ease-in-out infinite;--pt-ff:'Righteous',sans-serif;}
html.theme-light .sn-pt.sn-pt-sapphire-aurora{--pt-a:#2e65bf;--pt-bg:rgba(59,130,246,0.08);--pt-r:14px;--pt-sh:0 0 20px rgba(6,182,212,0.1925);--pt-img:linear-gradient(135deg,rgba(59,130,246,0.15400000000000003),rgba(6,182,212,0.15400000000000003),rgba(167,139,250,0.1375),rgba(59,130,246,0.15400000000000003));--pt-size:300% 300%;--pt-a2:#048da5;--pt-anim:snPtDrift 7s ease-in-out infinite;--pt-ff:'Righteous',sans-serif;}
.sn-pt.sn-pt-emerald-pulse{--pt-a:#10b981;--pt-bg:rgba(16,185,129,0.12);--pt-r:16px;--pt-sh:0 0 14px rgba(16,185,129,0.4);--pt-gc:#10b981;--pt-anim:snPtGlow 2.6s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-emerald-pulse{--pt-a:#0c9064;--pt-bg:rgba(16,185,129,0.12);--pt-r:16px;--pt-sh:0 0 14px rgba(16,185,129,0.22000000000000003);--pt-gc:#0c9064;--pt-anim:snPtGlow 2.6s ease-in-out infinite;}
.sn-pt.sn-pt-emerald-drift{--pt-a:#10b981;--pt-bg:rgba(16,185,129,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(132,204,22,0.3);--pt-img:linear-gradient(120deg,rgba(16,185,129,0.3),rgba(132,204,22,0.3),rgba(16,185,129,0.3));--pt-size:300% 300%;--pt-anim:snPtDrift 9s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-emerald-drift{--pt-a:#0c9064;--pt-bg:rgba(16,185,129,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(132,204,22,0.165);--pt-img:linear-gradient(120deg,rgba(16,185,129,0.165),rgba(132,204,22,0.165),rgba(16,185,129,0.165));--pt-size:300% 300%;--pt-anim:snPtDrift 9s ease-in-out infinite;}
.sn-pt.sn-pt-amethyst-cycle{--pt-a:#a855f7;--pt-bg:rgba(168,85,247,0.08);--pt-r:12px;--pt-sh:0 0 16px rgba(236,72,153,0.3);--pt-a2:#ec4899;--pt-bw:2px;--pt-anim:snPtBorder 3.4s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-amethyst-cycle{--pt-a:#8342c0;--pt-bg:rgba(168,85,247,0.08);--pt-r:12px;--pt-sh:0 0 16px rgba(236,72,153,0.165);--pt-a2:#b83877;--pt-bw:2px;--pt-anim:snPtBorder 3.4s ease-in-out infinite;}
.sn-pt.sn-pt-amethyst-aurora{--pt-a:#a855f7;--pt-bg:rgba(168,85,247,0.08);--pt-r:14px;--pt-sh:0 0 20px rgba(236,72,153,0.35);--pt-img:linear-gradient(135deg,rgba(168,85,247,0.28),rgba(236,72,153,0.28),rgba(167,139,250,0.25),rgba(168,85,247,0.28));--pt-size:300% 300%;--pt-a2:#ec4899;--pt-anim:snPtDrift 7s ease-in-out infinite;--pt-ff:'Righteous',sans-serif;}
html.theme-light .sn-pt.sn-pt-amethyst-aurora{--pt-a:#8342c0;--pt-bg:rgba(168,85,247,0.08);--pt-r:14px;--pt-sh:0 0 20px rgba(236,72,153,0.1925);--pt-img:linear-gradient(135deg,rgba(168,85,247,0.15400000000000003),rgba(236,72,153,0.15400000000000003),rgba(167,139,250,0.1375),rgba(168,85,247,0.15400000000000003));--pt-size:300% 300%;--pt-a2:#b83877;--pt-anim:snPtDrift 7s ease-in-out infinite;--pt-ff:'Righteous',sans-serif;}
.sn-pt.sn-pt-amber-pulse{--pt-a:#f59e0b;--pt-bg:rgba(245,158,11,0.12);--pt-r:16px;--pt-sh:0 0 14px rgba(245,158,11,0.4);--pt-gc:#f59e0b;--pt-anim:snPtGlow 2.6s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-amber-pulse{--pt-a:#bf7b08;--pt-bg:rgba(245,158,11,0.12);--pt-r:16px;--pt-sh:0 0 14px rgba(245,158,11,0.22000000000000003);--pt-gc:#bf7b08;--pt-anim:snPtGlow 2.6s ease-in-out infinite;}
.sn-pt.sn-pt-amber-drift{--pt-a:#f59e0b;--pt-bg:rgba(245,158,11,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(239,68,68,0.3);--pt-img:linear-gradient(120deg,rgba(245,158,11,0.3),rgba(239,68,68,0.3),rgba(245,158,11,0.3));--pt-size:300% 300%;--pt-anim:snPtDrift 9s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-amber-drift{--pt-a:#bf7b08;--pt-bg:rgba(245,158,11,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(239,68,68,0.165);--pt-img:linear-gradient(120deg,rgba(245,158,11,0.165),rgba(239,68,68,0.165),rgba(245,158,11,0.165));--pt-size:300% 300%;--pt-anim:snPtDrift 9s ease-in-out infinite;}
.sn-pt.sn-pt-teal-cycle{--pt-a:#14b8a6;--pt-bg:rgba(20,184,166,0.08);--pt-r:12px;--pt-sh:0 0 16px rgba(59,130,246,0.3);--pt-a2:#3b82f6;--pt-bw:2px;--pt-anim:snPtBorder 3.4s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-teal-cycle{--pt-a:#0f8f81;--pt-bg:rgba(20,184,166,0.08);--pt-r:12px;--pt-sh:0 0 16px rgba(59,130,246,0.165);--pt-a2:#2e65bf;--pt-bw:2px;--pt-anim:snPtBorder 3.4s ease-in-out infinite;}
.sn-pt.sn-pt-teal-aurora{--pt-a:#14b8a6;--pt-bg:rgba(20,184,166,0.08);--pt-r:14px;--pt-sh:0 0 20px rgba(59,130,246,0.35);--pt-img:linear-gradient(135deg,rgba(20,184,166,0.28),rgba(59,130,246,0.28),rgba(167,139,250,0.25),rgba(20,184,166,0.28));--pt-size:300% 300%;--pt-a2:#3b82f6;--pt-anim:snPtDrift 7s ease-in-out infinite;--pt-ff:'Righteous',sans-serif;}
html.theme-light .sn-pt.sn-pt-teal-aurora{--pt-a:#0f8f81;--pt-bg:rgba(20,184,166,0.08);--pt-r:14px;--pt-sh:0 0 20px rgba(59,130,246,0.1925);--pt-img:linear-gradient(135deg,rgba(20,184,166,0.15400000000000003),rgba(59,130,246,0.15400000000000003),rgba(167,139,250,0.1375),rgba(20,184,166,0.15400000000000003));--pt-size:300% 300%;--pt-a2:#2e65bf;--pt-anim:snPtDrift 7s ease-in-out infinite;--pt-ff:'Righteous',sans-serif;}
.sn-pt.sn-pt-fuchsia-pulse{--pt-a:#d946ef;--pt-bg:rgba(217,70,239,0.12);--pt-r:16px;--pt-sh:0 0 14px rgba(217,70,239,0.4);--pt-gc:#d946ef;--pt-anim:snPtGlow 2.6s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-fuchsia-pulse{--pt-a:#a936ba;--pt-bg:rgba(217,70,239,0.12);--pt-r:16px;--pt-sh:0 0 14px rgba(217,70,239,0.22000000000000003);--pt-gc:#a936ba;--pt-anim:snPtGlow 2.6s ease-in-out infinite;}
.sn-pt.sn-pt-fuchsia-drift{--pt-a:#d946ef;--pt-bg:rgba(217,70,239,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(99,102,241,0.3);--pt-img:linear-gradient(120deg,rgba(217,70,239,0.3),rgba(99,102,241,0.3),rgba(217,70,239,0.3));--pt-size:300% 300%;--pt-anim:snPtDrift 9s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-fuchsia-drift{--pt-a:#a936ba;--pt-bg:rgba(217,70,239,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(99,102,241,0.165);--pt-img:linear-gradient(120deg,rgba(217,70,239,0.165),rgba(99,102,241,0.165),rgba(217,70,239,0.165));--pt-size:300% 300%;--pt-anim:snPtDrift 9s ease-in-out infinite;}
.sn-pt.sn-pt-lime-cycle{--pt-a:#84cc16;--pt-bg:rgba(132,204,22,0.08);--pt-r:12px;--pt-sh:0 0 16px rgba(34,197,94,0.3);--pt-a2:#22c55e;--pt-bw:2px;--pt-anim:snPtBorder 3.4s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-lime-cycle{--pt-a:#669f11;--pt-bg:rgba(132,204,22,0.08);--pt-r:12px;--pt-sh:0 0 16px rgba(34,197,94,0.165);--pt-a2:#1a9949;--pt-bw:2px;--pt-anim:snPtBorder 3.4s ease-in-out infinite;}
.sn-pt.sn-pt-lime-aurora{--pt-a:#84cc16;--pt-bg:rgba(132,204,22,0.08);--pt-r:14px;--pt-sh:0 0 20px rgba(34,197,94,0.35);--pt-img:linear-gradient(135deg,rgba(132,204,22,0.28),rgba(34,197,94,0.28),rgba(167,139,250,0.25),rgba(132,204,22,0.28));--pt-size:300% 300%;--pt-a2:#22c55e;--pt-anim:snPtDrift 7s ease-in-out infinite;--pt-ff:'Righteous',sans-serif;}
html.theme-light .sn-pt.sn-pt-lime-aurora{--pt-a:#669f11;--pt-bg:rgba(132,204,22,0.08);--pt-r:14px;--pt-sh:0 0 20px rgba(34,197,94,0.1925);--pt-img:linear-gradient(135deg,rgba(132,204,22,0.15400000000000003),rgba(34,197,94,0.15400000000000003),rgba(167,139,250,0.1375),rgba(132,204,22,0.15400000000000003));--pt-size:300% 300%;--pt-a2:#1a9949;--pt-anim:snPtDrift 7s ease-in-out infinite;--pt-ff:'Righteous',sans-serif;}
.sn-pt.sn-pt-crimson-pulse{--pt-a:#dc2626;--pt-bg:rgba(220,38,38,0.12);--pt-r:16px;--pt-sh:0 0 14px rgba(220,38,38,0.4);--pt-gc:#dc2626;--pt-anim:snPtGlow 2.6s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-crimson-pulse{--pt-a:#ab1d1d;--pt-bg:rgba(220,38,38,0.12);--pt-r:16px;--pt-sh:0 0 14px rgba(220,38,38,0.22000000000000003);--pt-gc:#ab1d1d;--pt-anim:snPtGlow 2.6s ease-in-out infinite;}
.sn-pt.sn-pt-crimson-drift{--pt-a:#dc2626;--pt-bg:rgba(220,38,38,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(244,63,94,0.3);--pt-img:linear-gradient(120deg,rgba(220,38,38,0.3),rgba(244,63,94,0.3),rgba(220,38,38,0.3));--pt-size:300% 300%;--pt-anim:snPtDrift 9s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-crimson-drift{--pt-a:#ab1d1d;--pt-bg:rgba(220,38,38,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(244,63,94,0.165);--pt-img:linear-gradient(120deg,rgba(220,38,38,0.165),rgba(244,63,94,0.165),rgba(220,38,38,0.165));--pt-size:300% 300%;--pt-anim:snPtDrift 9s ease-in-out infinite;}
.sn-pt.sn-pt-indigo-cycle{--pt-a:#6366f1;--pt-bg:rgba(99,102,241,0.08);--pt-r:12px;--pt-sh:0 0 16px rgba(167,139,250,0.3);--pt-a2:#a78bfa;--pt-bw:2px;--pt-anim:snPtBorder 3.4s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-indigo-cycle{--pt-a:#4d4fbb;--pt-bg:rgba(99,102,241,0.08);--pt-r:12px;--pt-sh:0 0 16px rgba(167,139,250,0.165);--pt-a2:#826cc3;--pt-bw:2px;--pt-anim:snPtBorder 3.4s ease-in-out infinite;}
.sn-pt.sn-pt-indigo-aurora{--pt-a:#6366f1;--pt-bg:rgba(99,102,241,0.08);--pt-r:14px;--pt-sh:0 0 20px rgba(167,139,250,0.35);--pt-img:linear-gradient(135deg,rgba(99,102,241,0.28),rgba(167,139,250,0.28),rgba(167,139,250,0.25),rgba(99,102,241,0.28));--pt-size:300% 300%;--pt-a2:#a78bfa;--pt-anim:snPtDrift 7s ease-in-out infinite;--pt-ff:'Righteous',sans-serif;}
html.theme-light .sn-pt.sn-pt-indigo-aurora{--pt-a:#4d4fbb;--pt-bg:rgba(99,102,241,0.08);--pt-r:14px;--pt-sh:0 0 20px rgba(167,139,250,0.1925);--pt-img:linear-gradient(135deg,rgba(99,102,241,0.15400000000000003),rgba(167,139,250,0.15400000000000003),rgba(167,139,250,0.1375),rgba(99,102,241,0.15400000000000003));--pt-size:300% 300%;--pt-a2:#826cc3;--pt-anim:snPtDrift 7s ease-in-out infinite;--pt-ff:'Righteous',sans-serif;}
.sn-pt.sn-pt-coral-pulse{--pt-a:#fb7185;--pt-bg:rgba(251,113,133,0.12);--pt-r:16px;--pt-sh:0 0 14px rgba(251,113,133,0.4);--pt-gc:#fb7185;--pt-anim:snPtGlow 2.6s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-coral-pulse{--pt-a:#c35867;--pt-bg:rgba(251,113,133,0.12);--pt-r:16px;--pt-sh:0 0 14px rgba(251,113,133,0.22000000000000003);--pt-gc:#c35867;--pt-anim:snPtGlow 2.6s ease-in-out infinite;}
.sn-pt.sn-pt-coral-drift{--pt-a:#fb7185;--pt-bg:rgba(251,113,133,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(251,146,60,0.3);--pt-img:linear-gradient(120deg,rgba(251,113,133,0.3),rgba(251,146,60,0.3),rgba(251,113,133,0.3));--pt-size:300% 300%;--pt-anim:snPtDrift 9s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-coral-drift{--pt-a:#c35867;--pt-bg:rgba(251,113,133,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(251,146,60,0.165);--pt-img:linear-gradient(120deg,rgba(251,113,133,0.165),rgba(251,146,60,0.165),rgba(251,113,133,0.165));--pt-size:300% 300%;--pt-anim:snPtDrift 9s ease-in-out infinite;}
.sn-pt.sn-pt-mint-cycle{--pt-a:#34d399;--pt-bg:rgba(52,211,153,0.08);--pt-r:12px;--pt-sh:0 0 16px rgba(34,211,238,0.3);--pt-a2:#22d3ee;--pt-bw:2px;--pt-anim:snPtBorder 3.4s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-mint-cycle{--pt-a:#28a477;--pt-bg:rgba(52,211,153,0.08);--pt-r:12px;--pt-sh:0 0 16px rgba(34,211,238,0.165);--pt-a2:#1aa4b9;--pt-bw:2px;--pt-anim:snPtBorder 3.4s ease-in-out infinite;}
.sn-pt.sn-pt-mint-aurora{--pt-a:#34d399;--pt-bg:rgba(52,211,153,0.08);--pt-r:14px;--pt-sh:0 0 20px rgba(34,211,238,0.35);--pt-img:linear-gradient(135deg,rgba(52,211,153,0.28),rgba(34,211,238,0.28),rgba(167,139,250,0.25),rgba(52,211,153,0.28));--pt-size:300% 300%;--pt-a2:#22d3ee;--pt-anim:snPtDrift 7s ease-in-out infinite;--pt-ff:'Righteous',sans-serif;}
html.theme-light .sn-pt.sn-pt-mint-aurora{--pt-a:#28a477;--pt-bg:rgba(52,211,153,0.08);--pt-r:14px;--pt-sh:0 0 20px rgba(34,211,238,0.1925);--pt-img:linear-gradient(135deg,rgba(52,211,153,0.15400000000000003),rgba(34,211,238,0.15400000000000003),rgba(167,139,250,0.1375),rgba(52,211,153,0.15400000000000003));--pt-size:300% 300%;--pt-a2:#1aa4b9;--pt-anim:snPtDrift 7s ease-in-out infinite;--pt-ff:'Righteous',sans-serif;}
.sn-pt.sn-pt-lavender-pulse{--pt-a:#a78bfa;--pt-bg:rgba(167,139,250,0.12);--pt-r:16px;--pt-sh:0 0 14px rgba(167,139,250,0.4);--pt-gc:#a78bfa;--pt-anim:snPtGlow 2.6s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-lavender-pulse{--pt-a:#826cc3;--pt-bg:rgba(167,139,250,0.12);--pt-r:16px;--pt-sh:0 0 14px rgba(167,139,250,0.22000000000000003);--pt-gc:#826cc3;--pt-anim:snPtGlow 2.6s ease-in-out infinite;}
.sn-pt.sn-pt-lavender-drift{--pt-a:#a78bfa;--pt-bg:rgba(167,139,250,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(240,171,252,0.3);--pt-img:linear-gradient(120deg,rgba(167,139,250,0.3),rgba(240,171,252,0.3),rgba(167,139,250,0.3));--pt-size:300% 300%;--pt-anim:snPtDrift 9s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-lavender-drift{--pt-a:#826cc3;--pt-bg:rgba(167,139,250,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(240,171,252,0.165);--pt-img:linear-gradient(120deg,rgba(167,139,250,0.165),rgba(240,171,252,0.165),rgba(167,139,250,0.165));--pt-size:300% 300%;--pt-anim:snPtDrift 9s ease-in-out infinite;}
.sn-pt.sn-pt-peach-cycle{--pt-a:#fdba74;--pt-bg:rgba(253,186,116,0.08);--pt-r:12px;--pt-sh:0 0 16px rgba(253,164,175,0.3);--pt-a2:#fda4af;--pt-bw:2px;--pt-anim:snPtBorder 3.4s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-peach-cycle{--pt-a:#c5915a;--pt-bg:rgba(253,186,116,0.08);--pt-r:12px;--pt-sh:0 0 16px rgba(253,164,175,0.165);--pt-a2:#c57f88;--pt-bw:2px;--pt-anim:snPtBorder 3.4s ease-in-out infinite;}
.sn-pt.sn-pt-peach-aurora{--pt-a:#fdba74;--pt-bg:rgba(253,186,116,0.08);--pt-r:14px;--pt-sh:0 0 20px rgba(253,164,175,0.35);--pt-img:linear-gradient(135deg,rgba(253,186,116,0.28),rgba(253,164,175,0.28),rgba(167,139,250,0.25),rgba(253,186,116,0.28));--pt-size:300% 300%;--pt-a2:#fda4af;--pt-anim:snPtDrift 7s ease-in-out infinite;--pt-ff:'Righteous',sans-serif;}
html.theme-light .sn-pt.sn-pt-peach-aurora{--pt-a:#c5915a;--pt-bg:rgba(253,186,116,0.08);--pt-r:14px;--pt-sh:0 0 20px rgba(253,164,175,0.1925);--pt-img:linear-gradient(135deg,rgba(253,186,116,0.15400000000000003),rgba(253,164,175,0.15400000000000003),rgba(167,139,250,0.1375),rgba(253,186,116,0.15400000000000003));--pt-size:300% 300%;--pt-a2:#c57f88;--pt-anim:snPtDrift 7s ease-in-out infinite;--pt-ff:'Righteous',sans-serif;}
.sn-pt.sn-pt-sky-pulse{--pt-a:#38bdf8;--pt-bg:rgba(56,189,248,0.12);--pt-r:16px;--pt-sh:0 0 14px rgba(56,189,248,0.4);--pt-gc:#38bdf8;--pt-anim:snPtGlow 2.6s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-sky-pulse{--pt-a:#2b93c1;--pt-bg:rgba(56,189,248,0.12);--pt-r:16px;--pt-sh:0 0 14px rgba(56,189,248,0.22000000000000003);--pt-gc:#2b93c1;--pt-anim:snPtGlow 2.6s ease-in-out infinite;}
.sn-pt.sn-pt-sky-drift{--pt-a:#38bdf8;--pt-bg:rgba(56,189,248,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(129,140,248,0.3);--pt-img:linear-gradient(120deg,rgba(56,189,248,0.3),rgba(129,140,248,0.3),rgba(56,189,248,0.3));--pt-size:300% 300%;--pt-anim:snPtDrift 9s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-sky-drift{--pt-a:#2b93c1;--pt-bg:rgba(56,189,248,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(129,140,248,0.165);--pt-img:linear-gradient(120deg,rgba(56,189,248,0.165),rgba(129,140,248,0.165),rgba(56,189,248,0.165));--pt-size:300% 300%;--pt-anim:snPtDrift 9s ease-in-out infinite;}
.sn-pt.sn-pt-lemon-cycle{--pt-a:#facc15;--pt-bg:rgba(250,204,21,0.08);--pt-r:12px;--pt-sh:0 0 16px rgba(163,230,53,0.3);--pt-a2:#a3e635;--pt-bw:2px;--pt-anim:snPtBorder 3.4s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-lemon-cycle{--pt-a:#c39f10;--pt-bg:rgba(250,204,21,0.08);--pt-r:12px;--pt-sh:0 0 16px rgba(163,230,53,0.165);--pt-a2:#7fb329;--pt-bw:2px;--pt-anim:snPtBorder 3.4s ease-in-out infinite;}
.sn-pt.sn-pt-lemon-aurora{--pt-a:#facc15;--pt-bg:rgba(250,204,21,0.08);--pt-r:14px;--pt-sh:0 0 20px rgba(163,230,53,0.35);--pt-img:linear-gradient(135deg,rgba(250,204,21,0.28),rgba(163,230,53,0.28),rgba(167,139,250,0.25),rgba(250,204,21,0.28));--pt-size:300% 300%;--pt-a2:#a3e635;--pt-anim:snPtDrift 7s ease-in-out infinite;--pt-ff:'Righteous',sans-serif;}
html.theme-light .sn-pt.sn-pt-lemon-aurora{--pt-a:#c39f10;--pt-bg:rgba(250,204,21,0.08);--pt-r:14px;--pt-sh:0 0 20px rgba(163,230,53,0.1925);--pt-img:linear-gradient(135deg,rgba(250,204,21,0.15400000000000003),rgba(163,230,53,0.15400000000000003),rgba(167,139,250,0.1375),rgba(250,204,21,0.15400000000000003));--pt-size:300% 300%;--pt-a2:#7fb329;--pt-anim:snPtDrift 7s ease-in-out infinite;--pt-ff:'Righteous',sans-serif;}
.sn-fr.sn-fr-spark-halo{--fr-a:#fbbf24;--fr-w:3px;--fr-b:#f97316;--fr-glow:0 0 8px #fbbf24;}
html.theme-light .sn-fr.sn-fr-spark-halo{--fr-a:#c3941c;--fr-w:3px;--fr-b:#c25911;--fr-glow:0 0 8px #c3941c;}
.sn-bn.sn-bn-spark-horizon{--bn-img:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(135deg,#322607,#fbbf24,#f97316);--bn-size:22px 22px,22px 22px,100% 100%;}
html.theme-light .sn-bn.sn-bn-spark-horizon{--bn-img:linear-gradient(rgba(255,255,255,0.24) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.24) 1px,transparent 1px),linear-gradient(135deg,#c5c2b9,#fdedc1,#fdd7bd);--bn-size:22px 22px,22px 22px,100% 100%;}
.sn-fl.sn-fl-spark-keeper{--fl-c:#fbbf24;--fl-tag:"Spark Keeper";--fl-tagbg:transparent;--fl-tagfg:#fbbf24;--fl-tagbd:#fbbf24;--fl-glow:0 0 16px rgba(251,191,36,0.45);}
html.theme-light .sn-fl.sn-fl-spark-keeper{--fl-c:#c3941c;--fl-tag:"Spark Keeper";--fl-tagbg:transparent;--fl-tagfg:#c3941c;--fl-tagbd:#c3941c;--fl-glow:0 0 16px rgba(195,148,28,0.45);}
.sn-bb.sn-bb-kindling-glow{--bb-bg:linear-gradient(135deg,#4b2b12,#5f1b1b);--bb-fg:#ffffff;--bb-bd:#ef4444;--bb-sh:0 0 12px rgba(251,146,60,0.45);}
html.theme-light .sn-bb.sn-bb-kindling-glow{--bb-bg:linear-gradient(135deg,#fcb276,#f37c7c);--bb-fg:#1a0a14;--bb-bd:#ba3535;--bb-sh:0 0 10px rgba(251,146,60,0.3);}
.sn-pt.sn-pt-kindling-realm{--pt-a:#fb923c;--pt-bg:rgba(0,0,0,.35);--pt-r:10px;--pt-sh:0 0 18px rgba(251,146,60,0.5),inset 0 0 12px rgba(251,146,60,0.22);--pt-bw:2px;--pt-ff:'Orbitron',sans-serif;}
html.theme-light .sn-pt.sn-pt-kindling-realm{--pt-a:#c3712e;--pt-bg:rgba(251,146,60,0.06);--pt-r:10px;--pt-sh:0 0 18px rgba(251,146,60,0.275),inset 0 0 12px rgba(251,146,60,0.12100000000000001);--pt-bw:2px;--pt-ff:'Orbitron',sans-serif;}
.sn-fr.sn-fr-kindling-halo{--fr-a:#fb923c;--fr-w:3px;--fr-b:#ef4444;--fr-glow:0 0 8px #fb923c;}
html.theme-light .sn-fr.sn-fr-kindling-halo{--fr-a:#c3712e;--fr-w:3px;--fr-b:#ba3535;--fr-glow:0 0 8px #c3712e;}
.sn-bn.sn-bn-ember-horizon{--bn-img:radial-gradient(circle at 82% 25%,rgba(253,186,116,0.7),transparent 45%),repeating-linear-gradient(45deg,#4a2206 0 14px,#361904 14px 28px);}
html.theme-light .sn-bn.sn-bn-ember-horizon{--bn-img:radial-gradient(circle at 82% 25%,rgba(253,186,116,0.7),transparent 45%),repeating-linear-gradient(45deg,#ccc1b9 0 14px,#c6beb8 14px 28px);}
.sn-fl.sn-fl-ember-keeper{--fl-c:#f97316;--fl-tag:"Ember Keeper";--fl-tagbg:#0b1020;--fl-tagfg:#f97316;--fl-tagbd:#f97316;--fl-wash:linear-gradient(90deg,rgba(249,115,22,0.16),transparent 45%);}
html.theme-light .sn-fl.sn-fl-ember-keeper{--fl-c:#c25911;--fl-tag:"Ember Keeper";--fl-tagbg:#ffffff;--fl-tagfg:#c25911;--fl-tagbd:#c25911;--fl-wash:linear-gradient(90deg,rgba(194,89,17,0.16),transparent 45%);}
.sn-bb.sn-bb-ember-glow{--bb-bg:linear-gradient(135deg,#4a2206,#580f0f);--bb-fg:#ffffff;--bb-bd:#dc2626;--bb-sh:0 0 12px rgba(249,115,22,0.45);}
html.theme-light .sn-bb.sn-bb-ember-glow{--bb-bg:linear-gradient(135deg,#fa9d5b,#e66767);--bb-fg:#1a0a14;--bb-bd:#ab1d1d;--bb-sh:0 0 10px rgba(249,115,22,0.3);}
.sn-pt.sn-pt-flare-realm{--pt-a:#fde047;--pt-bg:rgba(253,224,71,0.08);--pt-r:8px;--pt-sh:0 2px 8px rgba(0,0,0,.2);--pt-img:radial-gradient(rgba(253,224,71,0.28) 1px,transparent 1.6px),linear-gradient(rgba(253,224,71,0.07),rgba(253,224,71,0.07));--pt-size:14px 14px,100% 100%;--pt-bs:dashed;--pt-ff:'Lora',serif;}
html.theme-light .sn-pt.sn-pt-flare-realm{--pt-a:#c5ae37;--pt-bg:rgba(253,224,71,0.08);--pt-r:8px;--pt-sh:0 2px 8px rgba(0,0,0,.2);--pt-img:radial-gradient(rgba(253,224,71,0.15400000000000003) 1px,transparent 1.6px),linear-gradient(rgba(253,224,71,0.07),rgba(253,224,71,0.07));--pt-size:14px 14px,100% 100%;--pt-bs:dashed;--pt-ff:'Lora',serif;}
.sn-fr.sn-fr-flare-halo{--fr-a:#fde047;--fr-w:2px;--fr-b:#f97316;--fr-c:#fef9c3;--fr-glow:0 0 10px #f97316;}
html.theme-light .sn-fr.sn-fr-flare-halo{--fr-a:#c5ae37;--fr-w:2px;--fr-b:#c25911;--fr-c:#c6c298;--fr-glow:0 0 10px #c25911;}
.sn-bn.sn-bn-flare-horizon{--bn-img:radial-gradient(circle at 82% 25%,rgba(254,249,195,0.7),transparent 45%),repeating-linear-gradient(45deg,#4b4315 0 14px,#37310f 14px 28px);}
html.theme-light .sn-bn.sn-bn-flare-horizon{--bn-img:radial-gradient(circle at 82% 25%,rgba(254,249,195,0.7),transparent 45%),repeating-linear-gradient(45deg,#cccabd 0 14px,#c7c5bb 14px 28px);}
.sn-fl.sn-fl-torch-keeper{--fl-c:#facc15;--fl-tag:"Torch Keeper";--fl-tagbg:linear-gradient(90deg,#facc15,#ea580c);--fl-edge-bg:linear-gradient(180deg,#facc15,#ea580c);--fl-wash:linear-gradient(90deg,rgba(250,204,21,0.16),transparent 45%);}
html.theme-light .sn-fl.sn-fl-torch-keeper{--fl-c:#c39f10;--fl-tag:"Torch Keeper";--fl-tagbg:linear-gradient(90deg,#c39f10,#b64409);--fl-edge-bg:linear-gradient(180deg,#c39f10,#b64409);--fl-wash:linear-gradient(90deg,rgba(195,159,16,0.16),transparent 45%);}
.sn-bb.sn-bb-torch-glow{--bb-bg:#0b0b14;--bb-fg:#facc15;--bb-bd:#facc15;--bb-sh:0 0 14px rgba(250,204,21,0.6);}
html.theme-light .sn-bb.sn-bb-torch-glow{--bb-bg:#fef9e7;--bb-fg:#c39f10;--bb-bd:#c39f10;--bb-sh:0 0 10px rgba(250,204,21,0.35);}
.sn-pt.sn-pt-torch-realm{--pt-a:#facc15;--pt-bg:rgba(250,204,21,0.08);--pt-r:12px;--pt-sh:0 4px 18px rgba(250,204,21,0.25);--pt-bs:double;--pt-bw:4px;--pt-ff:'Cinzel',serif;}
html.theme-light .sn-pt.sn-pt-torch-realm{--pt-a:#c39f10;--pt-bg:rgba(250,204,21,0.08);--pt-r:12px;--pt-sh:0 4px 18px rgba(250,204,21,0.1375);--pt-bs:double;--pt-bw:4px;--pt-ff:'Cinzel',serif;}
.sn-fr.sn-fr-hearth-halo{--fr-a:#fb7185;--fr-w:3px;--fr-b:#f59e0b;--fr-glow:0 0 6px #fb7185;--fr-ow:2px;--fr-os:dashed;--fr-oc:#f59e0b;--fr-oo:6px;}
html.theme-light .sn-fr.sn-fr-hearth-halo{--fr-a:#c35867;--fr-w:3px;--fr-b:#bf7b08;--fr-glow:0 0 6px #c35867;--fr-ow:2px;--fr-os:dashed;--fr-oc:#bf7b08;--fr-oo:6px;}
.sn-bn.sn-bn-hearth-horizon{--bn-img:radial-gradient(circle at 15% 25%,#fb7185 0,transparent 50%),radial-gradient(circle at 85% 40%,#f59e0b 0,transparent 50%),radial-gradient(circle at 50% 100%,#fecdd3 0,transparent 45%),linear-gradient(#1e0d0f,#1e0d0f);}
html.theme-light .sn-bn.sn-bn-hearth-horizon{--bn-img:radial-gradient(circle at 15% 25%,#fdd7dc 0,transparent 50%),radial-gradient(circle at 85% 40%,#fce3ba 0,transparent 50%),radial-gradient(circle at 50% 100%,#fef1f2 0,transparent 45%),linear-gradient(#c0bbbb,#c0bbbb);}
.sn-fl.sn-fl-hearth-keeper{--fl-c:#fb7185;--fl-tag:"Hearth Keeper";--fl-tagbg:#0b1020;--fl-tagfg:#fb7185;--fl-tagbd:#fb7185;--fl-wash:linear-gradient(90deg,rgba(251,113,133,0.16),transparent 45%);}
html.theme-light .sn-fl.sn-fl-hearth-keeper{--fl-c:#c35867;--fl-tag:"Hearth Keeper";--fl-tagbg:#ffffff;--fl-tagfg:#c35867;--fl-tagbd:#c35867;--fl-wash:linear-gradient(90deg,rgba(195,88,103,0.16),transparent 45%);}
.sn-bb.sn-bb-bonfire-glow{--bb-bg:linear-gradient(135deg,#6b1e1e,#ef4444,#fbbf24);--bb-fg:#ffffff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-bonfire-glow{--bb-bg:linear-gradient(135deg,#884b4b,#f26969,#fbcb4f);--bb-fg:#ffffff;--bb-bd:transparent;}
.sn-pt.sn-pt-bonfire-realm{--pt-a:#ef4444;--pt-bg:rgba(239,68,68,0.06);--pt-r:10px;--pt-sh:none;--pt-img:repeating-linear-gradient(45deg,rgba(239,68,68,0.16) 0 8px,transparent 8px 16px),linear-gradient(rgba(239,68,68,0.06),rgba(239,68,68,0.06));--pt-ff:'Oswald',sans-serif;}
html.theme-light .sn-pt.sn-pt-bonfire-realm{--pt-a:#ba3535;--pt-bg:rgba(239,68,68,0.06);--pt-r:10px;--pt-sh:none;--pt-img:repeating-linear-gradient(45deg,rgba(239,68,68,0.08800000000000001) 0 8px,transparent 8px 16px),linear-gradient(rgba(239,68,68,0.06),rgba(239,68,68,0.06));--pt-ff:'Oswald',sans-serif;}
.sn-fr.sn-fr-bonfire-halo{--fr-a:#ef4444;--fr-w:3px;--fr-b:#fbbf24;--fr-glow:0 0 6px #ef4444;--fr-ow:2px;--fr-os:dashed;--fr-oc:#fbbf24;--fr-oo:6px;}
html.theme-light .sn-fr.sn-fr-bonfire-halo{--fr-a:#ba3535;--fr-w:3px;--fr-b:#c3941c;--fr-glow:0 0 6px #ba3535;--fr-ow:2px;--fr-os:dashed;--fr-oc:#c3941c;--fr-oo:6px;}
.sn-bn.sn-bn-wildfire-horizon{--bn-img:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(135deg,#2b0707,#dc2626,#f97316);--bn-size:22px 22px,22px 22px,100% 100%;}
html.theme-light .sn-bn.sn-bn-wildfire-horizon{--bn-img:linear-gradient(rgba(255,255,255,0.24) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.24) 1px,transparent 1px),linear-gradient(135deg,#c3b9b9,#f5c2c2,#fdd7bd);--bn-size:22px 22px,22px 22px,100% 100%;}
.sn-fl.sn-fl-wildfire-keeper{--fl-c:#dc2626;--fl-tag:"Wildfire Keeper";--fl-tagbg:linear-gradient(90deg,#dc2626,#f97316);--fl-edge-bg:linear-gradient(180deg,#dc2626,#f97316);--fl-wash:linear-gradient(90deg,rgba(220,38,38,0.16),transparent 45%);}
html.theme-light .sn-fl.sn-fl-wildfire-keeper{--fl-c:#ab1d1d;--fl-tag:"Wildfire Keeper";--fl-tagbg:linear-gradient(90deg,#ab1d1d,#c25911);--fl-edge-bg:linear-gradient(180deg,#ab1d1d,#c25911);--fl-wash:linear-gradient(90deg,rgba(171,29,29,0.16),transparent 45%);}
.sn-bb.sn-bb-wildfire-glow{--bb-bg:linear-gradient(135deg,#621111,#dc2626,#f97316);--bb-fg:#ffffff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-wildfire-glow{--bb-bg:linear-gradient(135deg,#814040,#e35151,#fa8f44);--bb-fg:#ffffff;--bb-bd:transparent;}
.sn-pt.sn-pt-comet-realm{--pt-a:#38bdf8;--pt-bg:rgba(56,189,248,0.12);--pt-r:16px;--pt-sh:0 0 14px rgba(56,189,248,0.4);--pt-gc:#38bdf8;--pt-anim:snPtGlow 2.6s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-comet-realm{--pt-a:#2b93c1;--pt-bg:rgba(56,189,248,0.12);--pt-r:16px;--pt-sh:0 0 14px rgba(56,189,248,0.22000000000000003);--pt-gc:#2b93c1;--pt-anim:snPtGlow 2.6s ease-in-out infinite;}
.sn-fr.sn-fr-comet-halo{--fr-a:#38bdf8;--fr-w:3px;--fr-b:#818cf8;--fr-glow:0 0 8px #38bdf8;}
html.theme-light .sn-fr.sn-fr-comet-halo{--fr-a:#2b93c1;--fr-w:3px;--fr-b:#646dc1;--fr-glow:0 0 8px #2b93c1;}
.sn-bn.sn-bn-comet-horizon{--bn-img:radial-gradient(circle at 50% 120%,#818cf8 0,#38bdf8 28%,#0e2f3e 60%,#0c0d18 100%);--bn-anim:snBnTwinkle 3.4s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-comet-horizon{--bn-img:radial-gradient(circle at 50% 120%,#dbdefd 0,#c7ecfd 28%,#bbc4c8 60%,#babbbe 100%);--bn-anim:snBnTwinkle 3.4s ease-in-out infinite;}
.sn-fl.sn-fl-meteor-keeper{--fl-c:#6366f1;--fl-tag:"Meteor Keeper";--fl-tagr:4px;--fl-tagtt:uppercase;--fl-tagls:.08em;}
html.theme-light .sn-fl.sn-fl-meteor-keeper{--fl-c:#4d4fbb;--fl-tag:"Meteor Keeper";--fl-tagr:4px;--fl-tagtt:uppercase;--fl-tagls:.08em;}
.sn-bb.sn-bb-meteor-glow{--bb-bg:#090a18;--bb-fg:#d0d1fa;--bb-bd:#6366f1;--bb-gc:#6366f1;--bb-anim:snBbGlow 2.4s ease-in-out infinite;}
html.theme-light .sn-bb.sn-bb-meteor-glow{--bb-bg:#ececfd;--bb-fg:#4d4fbb;--bb-bd:#4d4fbb;--bb-gc:#4d4fbb;--bb-anim:snBbGlow 2.4s ease-in-out infinite;}
.sn-pt.sn-pt-meteor-realm{--pt-a:#6366f1;--pt-bg:rgba(99,102,241,0.08);--pt-r:8px;--pt-sh:0 2px 8px rgba(0,0,0,.2);--pt-img:radial-gradient(rgba(99,102,241,0.28) 1px,transparent 1.6px),linear-gradient(rgba(99,102,241,0.07),rgba(99,102,241,0.07));--pt-size:14px 14px,100% 100%;--pt-bs:dashed;--pt-ff:'Lora',serif;}
html.theme-light .sn-pt.sn-pt-meteor-realm{--pt-a:#4d4fbb;--pt-bg:rgba(99,102,241,0.08);--pt-r:8px;--pt-sh:0 2px 8px rgba(0,0,0,.2);--pt-img:radial-gradient(rgba(99,102,241,0.15400000000000003) 1px,transparent 1.6px),linear-gradient(rgba(99,102,241,0.07),rgba(99,102,241,0.07));--pt-size:14px 14px,100% 100%;--pt-bs:dashed;--pt-ff:'Lora',serif;}
.sn-fr.sn-fr-nova-halo{--fr-a:#a78bfa;--fr-w:3px;--fr-b:#f0abfc;--fr-ow:2px;--fr-os:dashed;--fr-oc:#a78bfa;--fr-oo:3px;animation:snFrOrbit 3.0s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-nova-halo{--fr-a:#826cc3;--fr-w:3px;--fr-b:#bb85c4;--fr-ow:2px;--fr-os:dashed;--fr-oc:#826cc3;--fr-oo:3px;animation:snFrOrbit 3.0s ease-in-out infinite;}
.sn-bn.sn-bn-nova-horizon{--bn-img:radial-gradient(circle at 82% 25%,rgba(221,214,254,0.7),transparent 45%),repeating-linear-gradient(45deg,#32294b 0 14px,#241e36 14px 28px);}
html.theme-light .sn-bn.sn-bn-nova-horizon{--bn-img:radial-gradient(circle at 82% 25%,rgba(221,214,254,0.7),transparent 45%),repeating-linear-gradient(45deg,#c5c3cc 0 14px,#c1c0c6 14px 28px);}
.sn-fl.sn-fl-nova-keeper{--fl-c:#a78bfa;--fl-tag:"Nova Keeper";--fl-tagbg:linear-gradient(110deg,#a78bfa 20%,#f0abfc 45%,#a78bfa 70%);--fl-tagsz:250% 100%;--fl-anim:snFlShimmer 2.6s linear infinite;--fl-tagfg:#1a1020;}
html.theme-light .sn-fl.sn-fl-nova-keeper{--fl-c:#826cc3;--fl-tag:"Nova Keeper";--fl-tagbg:linear-gradient(110deg,#826cc3 20%,#bb85c4 45%,#826cc3 70%);--fl-tagsz:250% 100%;--fl-anim:snFlShimmer 2.6s linear infinite;--fl-tagfg:#1a1020;}
.sn-bb.sn-bb-pulsar-glow{--bb-bg:#0b0b14;--bb-fg:#22d3ee;--bb-bd:#22d3ee;--bb-sh:0 0 14px rgba(34,211,238,0.6);}
html.theme-light .sn-bb.sn-bb-pulsar-glow{--bb-bg:#e8fafd;--bb-fg:#1aa4b9;--bb-bd:#1aa4b9;--bb-sh:0 0 10px rgba(34,211,238,0.35);}
.sn-pt.sn-pt-pulsar-realm{--pt-a:#22d3ee;--pt-bg:rgba(34,211,238,0.12);--pt-r:16px;--pt-sh:0 0 14px rgba(34,211,238,0.4);--pt-gc:#22d3ee;--pt-anim:snPtGlow 2.6s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-pulsar-realm{--pt-a:#1aa4b9;--pt-bg:rgba(34,211,238,0.12);--pt-r:16px;--pt-sh:0 0 14px rgba(34,211,238,0.22000000000000003);--pt-gc:#1aa4b9;--pt-anim:snPtGlow 2.6s ease-in-out infinite;}
.sn-fr.sn-fr-pulsar-halo{--fr-a:#22d3ee;--fr-w:2px;--fr-b:#a78bfa;--fr-c:#a5f3fc;--fr-glow:0 0 10px #a78bfa;}
html.theme-light .sn-fr.sn-fr-pulsar-halo{--fr-a:#1aa4b9;--fr-w:2px;--fr-b:#826cc3;--fr-c:#80bdc4;--fr-glow:0 0 10px #826cc3;}
.sn-bn.sn-bn-quasar-horizon{--bn-img:linear-gradient(120deg,#1b1231,#8b5cf6,#06b6d4,#1b1231);--bn-size:300% 300%;--bn-anim:snBnShift 8s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-quasar-horizon{--bn-img:linear-gradient(120deg,#bfbcc5,#ded1fc,#b9eaf2,#bfbcc5);--bn-size:300% 300%;--bn-anim:snBnShift 8s ease-in-out infinite;}
.sn-fl.sn-fl-quasar-keeper{--fl-c:#8b5cf6;--fl-tag:"Quasar Keeper";--fl-tagr:4px;--fl-tagtt:uppercase;--fl-tagls:.08em;}
html.theme-light .sn-fl.sn-fl-quasar-keeper{--fl-c:#6c47bf;--fl-tag:"Quasar Keeper";--fl-tagr:4px;--fl-tagtt:uppercase;--fl-tagls:.08em;}
.sn-bb.sn-bb-quasar-glow{--bb-bg:#0d0918;--bb-fg:#dccefc;--bb-bd:#8b5cf6;--bb-gc:#8b5cf6;--bb-anim:snBbGlow 2.4s ease-in-out infinite;}
html.theme-light .sn-bb.sn-bb-quasar-glow{--bb-bg:#f1ebfd;--bb-fg:#6c47bf;--bb-bd:#6c47bf;--bb-gc:#6c47bf;--bb-anim:snBbGlow 2.4s ease-in-out infinite;}
.sn-pt.sn-pt-zenith-realm{--pt-a:#f472b6;--pt-bg:rgba(244,114,182,0.05);--pt-r:4px;--pt-sh:none;--pt-img:linear-gradient(rgba(244,114,182,0.2) 1px,transparent 1px),linear-gradient(90deg,rgba(244,114,182,0.2) 1px,transparent 1px),linear-gradient(rgba(244,114,182,0.05),rgba(244,114,182,0.05));--pt-size:18px 18px,18px 18px,100% 100%;--pt-ff:'JetBrains Mono',monospace;}
html.theme-light .sn-pt.sn-pt-zenith-realm{--pt-a:#be588d;--pt-bg:rgba(244,114,182,0.05);--pt-r:4px;--pt-sh:none;--pt-img:linear-gradient(rgba(244,114,182,0.11000000000000001) 1px,transparent 1px),linear-gradient(90deg,rgba(244,114,182,0.11000000000000001) 1px,transparent 1px),linear-gradient(rgba(244,114,182,0.05),rgba(244,114,182,0.05));--pt-size:18px 18px,18px 18px,100% 100%;--pt-ff:'JetBrains Mono',monospace;}
.sn-fr.sn-fr-zenith-halo{--fr-a:#f472b6;--fr-w:3px;--fr-b:#a78bfa;--fr-ow:2px;--fr-os:dashed;--fr-oc:#f472b6;--fr-oo:3px;animation:snFrOrbit 3.0s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-zenith-halo{--fr-a:#be588d;--fr-w:3px;--fr-b:#826cc3;--fr-ow:2px;--fr-os:dashed;--fr-oc:#be588d;--fr-oo:3px;animation:snFrOrbit 3.0s ease-in-out infinite;}
.sn-bn.sn-bn-zenith-horizon{--bn-img:radial-gradient(circle at 15% 25%,#f472b6 0,transparent 50%),radial-gradient(circle at 85% 40%,#a78bfa 0,transparent 50%),radial-gradient(circle at 50% 100%,#fbcfe8 0,transparent 45%),linear-gradient(#1d0d15,#1d0d15);}
html.theme-light .sn-bn.sn-bn-zenith-horizon{--bn-img:radial-gradient(circle at 15% 25%,#fbd7ea 0,transparent 50%),radial-gradient(circle at 85% 40%,#e6defd 0,transparent 50%),radial-gradient(circle at 50% 100%,#fdf1f8 0,transparent 45%),linear-gradient(#bfbbbd,#bfbbbd);}
.sn-fl.sn-fl-monarch-keeper{--fl-c:#fbbf24;--fl-tag:"Monarch Keeper";--fl-edge-bg:linear-gradient(180deg,#fbbf24,#a855f7,#fbbf24);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 3s linear infinite;--fl-bw:7px;--fl-tagbg:linear-gradient(90deg,#fbbf24,#a855f7);}
html.theme-light .sn-fl.sn-fl-monarch-keeper{--fl-c:#c3941c;--fl-tag:"Monarch Keeper";--fl-edge-bg:linear-gradient(180deg,#c3941c,#8342c0,#c3941c);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 3s linear infinite;--fl-bw:7px;--fl-tagbg:linear-gradient(90deg,#c3941c,#8342c0);}
.sn-bb.sn-bb-monarch-glow{--bb-bg:linear-gradient(135deg,#705510,#fbbf24,#a855f7);--bb-fg:#ffffff;--bb-bd:transparent;}
html.theme-light .sn-bb.sn-bb-monarch-glow{--bb-bg:linear-gradient(135deg,#8c773f,#fbcb4f,#b977f8);--bb-fg:#ffffff;--bb-bd:transparent;}
.sn-pt.sn-pt-monarch-realm{--pt-a:#fbbf24;--pt-bg:rgba(251,191,36,0.12);--pt-r:16px;--pt-sh:0 0 14px rgba(251,191,36,0.4);--pt-gc:#fbbf24;--pt-anim:snPtGlow 2.6s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-monarch-realm{--pt-a:#c3941c;--pt-bg:rgba(251,191,36,0.12);--pt-r:16px;--pt-sh:0 0 14px rgba(251,191,36,0.22000000000000003);--pt-gc:#c3941c;--pt-anim:snPtGlow 2.6s ease-in-out infinite;}
.sn-fr.sn-fr-regent-halo{--fr-a:#f59e0b;--fr-w:3px;--fr-b:#be123c;--fr-glow:0 0 8px #f59e0b;}
html.theme-light .sn-fr.sn-fr-regent-halo{--fr-a:#bf7b08;--fr-w:3px;--fr-b:#940e2e;--fr-glow:0 0 8px #bf7b08;}
.sn-bn.sn-bn-regent-horizon{--bn-img:linear-gradient(120deg,#301f02,#f59e0b,#be123c,#301f02);--bn-size:300% 300%;--bn-anim:snBnShift 8s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-regent-horizon{--bn-img:linear-gradient(120deg,#c5c0b8,#fce3ba,#ecbcc8,#c5c0b8);--bn-size:300% 300%;--bn-anim:snBnShift 8s ease-in-out infinite;}
.sn-fl.sn-fl-regent-keeper{--fl-c:#f59e0b;--fl-tag:"Regent Keeper";--fl-tagr:4px;--fl-tagtt:uppercase;--fl-tagls:.08em;}
html.theme-light .sn-fl.sn-fl-regent-keeper{--fl-c:#bf7b08;--fl-tag:"Regent Keeper";--fl-tagr:4px;--fl-tagtt:uppercase;--fl-tagls:.08em;}
.sn-bb.sn-bb-sovereign-glow{--bb-bg:linear-gradient(120deg,#700e24,#e11d48,#fbbf24,#700e24);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
html.theme-light .sn-bb.sn-bb-sovereign-glow{--bb-bg:linear-gradient(120deg,#8c3e4f,#e74a6c,#fbcb4f,#8c3e4f);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
.sn-pt.sn-pt-sovereign-realm{--pt-a:#e11d48;--pt-bg:rgba(225,29,72,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(251,191,36,0.3);--pt-img:linear-gradient(120deg,rgba(225,29,72,0.3),rgba(251,191,36,0.3),rgba(225,29,72,0.3));--pt-size:300% 300%;--pt-anim:snPtDrift 9s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-sovereign-realm{--pt-a:#af1638;--pt-bg:rgba(225,29,72,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(251,191,36,0.165);--pt-img:linear-gradient(120deg,rgba(225,29,72,0.165),rgba(251,191,36,0.165),rgba(225,29,72,0.165));--pt-size:300% 300%;--pt-anim:snPtDrift 9s ease-in-out infinite;}
.sn-fr.sn-fr-sovereign-halo{--fr-a:#e11d48;--fr-w:3px;--fr-b:#fbbf24;--fr-ow:2px;--fr-os:dashed;--fr-oc:#e11d48;--fr-oo:3px;animation:snFrOrbit 3.0s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-sovereign-halo{--fr-a:#af1638;--fr-w:3px;--fr-b:#c3941c;--fr-ow:2px;--fr-os:dashed;--fr-oc:#af1638;--fr-oo:3px;animation:snFrOrbit 3.0s ease-in-out infinite;}
.sn-bn.sn-bn-titan-horizon{--bn-img:radial-gradient(circle,rgba(203,213,225,0.95) 2px,transparent 3px),radial-gradient(circle,rgba(100,116,139,0.8) 1.5px,transparent 2.5px),linear-gradient(0deg,#251c05,#1e2229);--bn-size:40px 40px,26px 26px,100% 100%;--bn-from:0 0,0 0,0 0;--bn-to:0px -40px,0px -26px,0 0;--bn-anim:snBnScroll 4s linear infinite;}
html.theme-light .sn-bn.sn-bn-titan-horizon{--bn-img:radial-gradient(circle,rgba(203,213,225,0.95) 2px,transparent 3px),radial-gradient(circle,rgba(100,116,139,0.8) 1.5px,transparent 2.5px),linear-gradient(0deg,#c1bfb9,#c0c1c3);--bn-size:40px 40px,26px 26px,100% 100%;--bn-from:0 0,0 0,0 0;--bn-to:0px -40px,0px -26px,0 0;--bn-anim:snBnScroll 4s linear infinite;}
.sn-fl.sn-fl-titan-keeper{--fl-c:#64748b;--fl-tag:"Titan Keeper";--fl-edge-bg:linear-gradient(180deg,#64748b,#fbbf24,#64748b);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 3s linear infinite;--fl-bw:7px;--fl-tagbg:linear-gradient(90deg,#64748b,#fbbf24);}
html.theme-light .sn-fl.sn-fl-titan-keeper{--fl-c:#4e5a6c;--fl-tag:"Titan Keeper";--fl-edge-bg:linear-gradient(180deg,#4e5a6c,#c3941c,#4e5a6c);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 3s linear infinite;--fl-bw:7px;--fl-tagbg:linear-gradient(90deg,#4e5a6c,#c3941c);}
.sn-bb.sn-bb-titan-glow{--bb-bg:#090b0d;--bb-fg:#f9fafb;--bb-bd:transparent;--bb-c1:#64748b;--bb-c2:#fbbf24;--bb-c3:#cbd5e1;--bb-anim:snBbBorder 3.4s linear infinite;--bb-bw:2px;}
html.theme-light .sn-bb.sn-bb-titan-glow{--bb-bg:#eff1f3;--bb-fg:#1a0a14;--bb-bd:transparent;--bb-c1:#4e5a6c;--bb-c2:#c3941c;--bb-c3:#9ea6af;--bb-anim:snBbBorder 3.4s linear infinite;--bb-bw:2px;}
.sn-pt.sn-pt-colossus-realm{--pt-a:#14b8a6;--pt-bg:rgba(20,184,166,0.08);--pt-r:12px;--pt-sh:0 0 16px rgba(253,224,71,0.3);--pt-a2:#fde047;--pt-bw:2px;--pt-anim:snPtBorder 3.4s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-colossus-realm{--pt-a:#0f8f81;--pt-bg:rgba(20,184,166,0.08);--pt-r:12px;--pt-sh:0 0 16px rgba(253,224,71,0.165);--pt-a2:#c5ae37;--pt-bw:2px;--pt-anim:snPtBorder 3.4s ease-in-out infinite;}
.sn-fr.sn-fr-colossus-halo{--fr-a:#14b8a6;--fr-w:3px;--fr-c1:#14b8a6;--fr-c2:#fde047;--fr-c3:#99f6e4;animation:snFrCycle 3.2s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-colossus-halo{--fr-a:#0f8f81;--fr-w:3px;--fr-c1:#0f8f81;--fr-c2:#c5ae37;--fr-c3:#77bfb1;animation:snFrCycle 3.2s ease-in-out infinite;}
.sn-bn.sn-bn-colossus-horizon{--bn-img:linear-gradient(120deg,#032421,#14b8a6,#fde047,#032421);--bn-size:300% 300%;--bn-anim:snBnShift 8s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-colossus-horizon{--bn-img:linear-gradient(120deg,#b8c1c0,#bdebe6,#fef6cb,#b8c1c0);--bn-size:300% 300%;--bn-anim:snBnShift 8s ease-in-out infinite;}
.sn-fl.sn-fl-legend-keeper{--fl-c:#10b981;--fl-tag:"Legend Keeper";--fl-tagbg:linear-gradient(90deg,#10b981,#f59e0b);--fl-edge-bg:linear-gradient(180deg,#10b981,#f59e0b);--fl-anim:snFlHue 6s linear infinite;--fl-edgeanim:snFlHue 6s linear infinite;--fl-bw:6px;}
html.theme-light .sn-fl.sn-fl-legend-keeper{--fl-c:#0c9064;--fl-tag:"Legend Keeper";--fl-tagbg:linear-gradient(90deg,#0c9064,#bf7b08);--fl-edge-bg:linear-gradient(180deg,#0c9064,#bf7b08);--fl-anim:snFlHue 6s linear infinite;--fl-edgeanim:snFlHue 6s linear infinite;--fl-bw:6px;}
.sn-bb.sn-bb-legend-glow{--bb-bg:linear-gradient(120deg,#085c40,#10b981,#f59e0b,#085c40);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
html.theme-light .sn-bb.sn-bb-legend-glow{--bb-bg:linear-gradient(120deg,#397c66,#3fc79a,#f7b13b,#397c66);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
.sn-pt.sn-pt-legend-realm{--pt-a:#10b981;--pt-bg:rgba(16,185,129,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(245,158,11,0.3);--pt-img:linear-gradient(120deg,rgba(16,185,129,0.3),rgba(245,158,11,0.3),rgba(16,185,129,0.3));--pt-size:300% 300%;--pt-anim:snPtDrift 9s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-legend-realm{--pt-a:#0c9064;--pt-bg:rgba(16,185,129,0.1);--pt-r:16px;--pt-sh:0 6px 24px rgba(245,158,11,0.165);--pt-img:linear-gradient(120deg,rgba(16,185,129,0.165),rgba(245,158,11,0.165),rgba(16,185,129,0.165));--pt-size:300% 300%;--pt-anim:snPtDrift 9s ease-in-out infinite;}
.sn-fr.sn-fr-mythic-halo{--fr-a:#ec4899;--fr-w:3px;--fr-b:#8b5cf6;animation:snFrBreathe 3.4s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-mythic-halo{--fr-a:#b83877;--fr-w:3px;--fr-b:#6c47bf;animation:snFrBreathe 3.4s ease-in-out infinite;}
.sn-bn.sn-bn-mythic-horizon{--bn-img:radial-gradient(circle,rgba(251,207,232,0.95) 2px,transparent 3px),radial-gradient(circle,rgba(236,72,153,0.8) 1.5px,transparent 2.5px),linear-gradient(0deg,#140d24,#46152d);--bn-size:40px 40px,26px 26px,100% 100%;--bn-from:0 0,0 0,0 0;--bn-to:0px -40px,0px -26px,0 0;--bn-anim:snBnScroll 4s linear infinite;}
html.theme-light .sn-bn.sn-bn-mythic-horizon{--bn-img:radial-gradient(circle,rgba(251,207,232,0.95) 2px,transparent 3px),radial-gradient(circle,rgba(236,72,153,0.8) 1.5px,transparent 2.5px),linear-gradient(0deg,#bdbbc1,#cbbdc4);--bn-size:40px 40px,26px 26px,100% 100%;--bn-from:0 0,0 0,0 0;--bn-to:0px -40px,0px -26px,0 0;--bn-anim:snBnScroll 4s linear infinite;}
.sn-fl.sn-fl-mythic-keeper{--fl-c:#ec4899;--fl-tag:"Mythic Keeper";--fl-edge-bg:linear-gradient(180deg,#ec4899,#8b5cf6,#ec4899);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 3s linear infinite;--fl-bw:7px;--fl-tagbg:linear-gradient(90deg,#ec4899,#8b5cf6);}
html.theme-light .sn-fl.sn-fl-mythic-keeper{--fl-c:#b83877;--fl-tag:"Mythic Keeper";--fl-edge-bg:linear-gradient(180deg,#b83877,#6c47bf,#b83877);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 3s linear infinite;--fl-bw:7px;--fl-tagbg:linear-gradient(90deg,#b83877,#6c47bf);}
.sn-bb.sn-bb-celestial-glow{--bb-bg:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%),linear-gradient(135deg,#164b63,#38bdf8,#f0abfc);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:250% 100%,100% 100%;--bb-anim:snBbShine 3s linear infinite;}
html.theme-light .sn-bb.sn-bb-celestial-glow{--bb-bg:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%),linear-gradient(135deg,#5b8191,#73d0fa,#f4c4fc);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:250% 100%,100% 100%;--bb-anim:snBbShine 3s linear infinite;}
.sn-pt.sn-pt-celestial-realm{--pt-a:#38bdf8;--pt-bg:rgba(56,189,248,0.08);--pt-r:12px;--pt-sh:0 0 16px rgba(240,171,252,0.3);--pt-a2:#f0abfc;--pt-bw:2px;--pt-anim:snPtBorder 3.4s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-celestial-realm{--pt-a:#2b93c1;--pt-bg:rgba(56,189,248,0.08);--pt-r:12px;--pt-sh:0 0 16px rgba(240,171,252,0.165);--pt-a2:#bb85c4;--pt-bw:2px;--pt-anim:snPtBorder 3.4s ease-in-out infinite;}
.sn-fr.sn-fr-celestial-halo{--fr-a:#38bdf8;--fr-w:3px;--fr-c1:#38bdf8;--fr-c2:#f0abfc;--fr-c3:#e0f2fe;animation:snFrCycle 3.2s ease-in-out infinite;}
html.theme-light .sn-fr.sn-fr-celestial-halo{--fr-a:#2b93c1;--fr-w:3px;--fr-c1:#2b93c1;--fr-c2:#bb85c4;--fr-c3:#aebcc6;animation:snFrCycle 3.2s ease-in-out infinite;}
.sn-bn.sn-bn-ascendant-horizon{--bn-img:radial-gradient(circle at 50% 120%,#fde047 0,#f0abfc 28%,#3c2a3f 60%,#191607 100%);--bn-anim:snBnTwinkle 3.4s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-ascendant-horizon{--bn-img:radial-gradient(circle at 50% 120%,#fef6cb 0,#fae7fe 28%,#c8c3c9 60%,#bebdb9 100%);--bn-anim:snBnTwinkle 3.4s ease-in-out infinite;}
.sn-fl.sn-fl-ascendant-keeper{--fl-c:#f0abfc;--fl-tag:"Ascendant Keeper";--fl-tagbg:linear-gradient(90deg,#f0abfc,#fde047);--fl-edge-bg:linear-gradient(180deg,#f0abfc,#fde047);--fl-anim:snFlHue 6s linear infinite;--fl-edgeanim:snFlHue 6s linear infinite;--fl-bw:6px;}
html.theme-light .sn-fl.sn-fl-ascendant-keeper{--fl-c:#bb85c4;--fl-tag:"Ascendant Keeper";--fl-tagbg:linear-gradient(90deg,#bb85c4,#c5ae37);--fl-edge-bg:linear-gradient(180deg,#bb85c4,#c5ae37);--fl-anim:snFlHue 6s linear infinite;--fl-edgeanim:snFlHue 6s linear infinite;--fl-bw:6px;}
.sn-bb.sn-bb-ascendant-glow{--bb-bg:linear-gradient(120deg,#78557e,#f0abfc,#fde047,#78557e);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
html.theme-light .sn-bb.sn-bb-ascendant-glow{--bb-bg:linear-gradient(120deg,#937797,#f3bbfc,#fde66b,#937797);--bb-fg:#ffffff;--bb-bd:transparent;--bb-size:300% 300%;--bb-anim:snBbShift 8s ease-in-out infinite;}
.sn-fr.sn-fr-ms-eternal{--fr-a:#fde047;--fr-w:3px;--fr-b:#f0abfc;--fr-c1:#ef4444;--fr-c2:#f59e0b;--fr-c3:#22c55e;--fr-c4:#3b82f6;--fr-c5:#a855f7;--fr-ow:2px;--fr-os:dotted;--fr-oc:#fde047;--fr-oo:4px;animation:snFrCycle5 4s linear infinite,snFrOrbit 2.4s ease-out infinite;}
html.theme-light .sn-fr.sn-fr-ms-eternal{--fr-a:#c5ae37;--fr-w:3px;--fr-b:#bb85c4;--fr-c1:#ba3535;--fr-c2:#bf7b08;--fr-c3:#1a9949;--fr-c4:#2e65bf;--fr-c5:#8342c0;--fr-ow:2px;--fr-os:dotted;--fr-oc:#c5ae37;--fr-oo:4px;animation:snFrCycle5 4s linear infinite,snFrOrbit 2.4s ease-out infinite;}
.sn-bn.sn-bn-eternal-flame{--bn-img:radial-gradient(circle,#fff7ad 1.5px,transparent 2.5px),radial-gradient(circle,#fbbf24 2px,transparent 3px),radial-gradient(circle,#fb923c 2.5px,transparent 3.5px),linear-gradient(0deg,#7f1d1d,#dc2626 35%,#f97316 65%,#fde047);--bn-size:34px 34px,52px 52px,76px 76px,100% 100%;--bn-from:0 0,0 0,0 0,0 0;--bn-to:0 -34px,0 -52px,0 -76px,0 0;--bn-anim:snBnScroll 3s linear infinite,snBnTwinkle 2.6s ease-in-out infinite;}
html.theme-light .sn-bn.sn-bn-eternal-flame{--bn-img:radial-gradient(circle,#fff9c9 1.5px,transparent 2.5px),radial-gradient(circle,#fcd570 2px,transparent 3px),radial-gradient(circle,#fcb880 2.5px,transparent 3.5px),linear-gradient(0deg,#ab6c6c,#e87171 35%,#fba467 65%,#fdea87);--bn-size:34px 34px,52px 52px,76px 76px,100% 100%;--bn-from:0 0,0 0,0 0,0 0;--bn-to:0 -34px,0 -52px,0 -76px,0 0;--bn-anim:snBnScroll 3s linear infinite,snBnTwinkle 2.6s ease-in-out infinite;}
.sn-fl.sn-fl-eternal{--fl-c:#fde047;--fl-tag:"\221E  ETERNAL";--fl-tagbg:linear-gradient(110deg,#fde047 20%,#fff 42%,#f472b6 55%,#fde047 72%);--fl-tagsz:250% 100%;--fl-anim:snFlShimmer 2.2s linear infinite;--fl-tagfg:#2a1030;--fl-tagtt:uppercase;--fl-tagls:.1em;--fl-edge-bg:linear-gradient(180deg,#ef4444,#f59e0b,#22c55e,#3b82f6,#a855f7,#ef4444);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 2.5s linear infinite;--fl-bw:9px;--fl-glow:0 0 24px rgba(253,224,71,0.5);--fl-cardanim:snFlGlow 2.8s ease-in-out infinite;--fl-gc:#fde047;}
html.theme-light .sn-fl.sn-fl-eternal{--fl-c:#c5ae37;--fl-tag:"\221E  ETERNAL";--fl-tagbg:linear-gradient(110deg,#c5ae37 20%,#fff 42%,#be588d 55%,#c5ae37 72%);--fl-tagsz:250% 100%;--fl-anim:snFlShimmer 2.2s linear infinite;--fl-tagfg:#2a1030;--fl-tagtt:uppercase;--fl-tagls:.1em;--fl-edge-bg:linear-gradient(180deg,#ba3535,#bf7b08,#1a9949,#2e65bf,#8342c0,#ba3535);--fl-edgesz:100% 300%;--fl-edgeanim:snFlFlow 2.5s linear infinite;--fl-bw:9px;--fl-glow:0 0 24px rgba(253,224,71,0.5);--fl-cardanim:snFlGlow 2.8s ease-in-out infinite;--fl-gc:#c5ae37;}
.sn-bb.sn-bb-eternal-aurora{--bb-bg:linear-gradient(120deg,#ef4444,#f59e0b,#22c55e,#3b82f6,#a855f7,#ef4444);--bb-fg:#fff;--bb-bd:transparent;--bb-size:300% 300%;--bb-c1:#fde047;--bb-c2:#f0abfc;--bb-c3:#67e8f9;--bb-bw:2px;--bb-anim:snBbShift 6s ease-in-out infinite,snBbBorder 3.4s linear infinite;}
html.theme-light .sn-bb.sn-bb-eternal-aurora{--bb-bg:linear-gradient(120deg,#f37c7c,#f8bb54,#64d68e,#75a7f8,#c288f9,#f37c7c);--bb-fg:#1a0a14;--bb-bd:transparent;--bb-size:300% 300%;--bb-c1:#fde97e;--bb-c2:#f4c4fc;--bb-c3:#94eefa;--bb-bw:2px;--bb-anim:snBbShift 6s ease-in-out infinite,snBbBorder 3.4s linear infinite;}
.sn-pt.sn-pt-eternal-realm{--pt-a:#fde047;--pt-a2:#f0abfc;--pt-bg:rgba(168,85,247,0.1);--pt-r:16px;--pt-sh:0 0 22px rgba(253,224,71,0.35);--pt-img:linear-gradient(120deg,rgba(239,68,68,0.3),rgba(245,158,11,0.3),rgba(34,197,94,0.3),rgba(59,130,246,0.3),rgba(168,85,247,0.3),rgba(239,68,68,0.3));--pt-size:300% 300%;--pt-bw:2px;--pt-ff:'Righteous',sans-serif;--pt-anim:snPtDrift 8s ease-in-out infinite,snPtBorder 3.4s ease-in-out infinite;}
html.theme-light .sn-pt.sn-pt-eternal-realm{--pt-a:#c5ae37;--pt-a2:#bb85c4;--pt-bg:rgba(168,85,247,0.1);--pt-r:16px;--pt-sh:0 0 22px rgba(253,224,71,0.1925);--pt-img:linear-gradient(120deg,rgba(239,68,68,0.165),rgba(245,158,11,0.165),rgba(34,197,94,0.165),rgba(59,130,246,0.165),rgba(168,85,247,0.165),rgba(239,68,68,0.165));--pt-size:300% 300%;--pt-bw:2px;--pt-ff:'Righteous',sans-serif;--pt-anim:snPtDrift 8s ease-in-out infinite,snPtBorder 3.4s ease-in-out infinite;}
.sn-fx.sn-fx-ft-bitter,
html.theme-light .sn-fx.sn-fx-ft-bitter{--fx-font:'Bitter',serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-crimson,
html.theme-light .sn-fx.sn-fx-ft-crimson{--fx-font:'Crimson Text',serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-garamond,
html.theme-light .sn-fx.sn-fx-ft-garamond{--fx-font:'EB Garamond',serif;--fx-extra:1;font-weight:700;font-size:1.08em;}
.sn-fx.sn-fx-ft-baskerville,
html.theme-light .sn-fx.sn-fx-ft-baskerville{--fx-font:'Libre Baskerville',serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-spectral,
html.theme-light .sn-fx.sn-fx-ft-spectral{--fx-font:'Spectral',serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-vollkorn,
html.theme-light .sn-fx.sn-fx-ft-vollkorn{--fx-font:'Vollkorn',serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-arvo,
html.theme-light .sn-fx.sn-fx-ft-arvo{--fx-font:'Arvo',serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-zilla-slab,
html.theme-light .sn-fx.sn-fx-ft-zilla-slab{--fx-font:'Zilla Slab',serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-bree-serif,
html.theme-light .sn-fx.sn-fx-ft-bree-serif{--fx-font:'Bree Serif',serif;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-yeseva,
html.theme-light .sn-fx.sn-fx-ft-yeseva{--fx-font:'Yeseva One',serif;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-rozha,
html.theme-light .sn-fx.sn-fx-ft-rozha{--fx-font:'Rozha One',serif;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-domine,
html.theme-light .sn-fx.sn-fx-ft-domine{--fx-font:'Domine',serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-nunito,
html.theme-light .sn-fx.sn-fx-ft-nunito{--fx-font:'Nunito',sans-serif;--fx-extra:1;font-weight:800;}
.sn-fx.sn-fx-ft-work-sans,
html.theme-light .sn-fx.sn-fx-ft-work-sans{--fx-font:'Work Sans',sans-serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-barlow-condensed,
html.theme-light .sn-fx.sn-fx-ft-barlow-condensed{--fx-font:'Barlow Condensed',sans-serif;--fx-extra:1;font-weight:700;letter-spacing:.03em;}
.sn-fx.sn-fx-ft-archivo-black,
html.theme-light .sn-fx.sn-fx-ft-archivo-black{--fx-font:'Archivo Black',sans-serif;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-teko,
html.theme-light .sn-fx.sn-fx-ft-teko{--fx-font:'Teko',sans-serif;--fx-extra:1;font-weight:700;font-size:1.18em;letter-spacing:.04em;}
.sn-fx.sn-fx-ft-exo,
html.theme-light .sn-fx.sn-fx-ft-exo{--fx-font:'Exo 2',sans-serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-josefin,
html.theme-light .sn-fx.sn-fx-ft-josefin{--fx-font:'Josefin Sans',sans-serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-kanit,
html.theme-light .sn-fx.sn-fx-ft-kanit{--fx-font:'Kanit',sans-serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-sora,
html.theme-light .sn-fx.sn-fx-ft-sora{--fx-font:'Sora',sans-serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-space-grotesk,
html.theme-light .sn-fx.sn-fx-ft-space-grotesk{--fx-font:'Space Grotesk',sans-serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-syne,
html.theme-light .sn-fx.sn-fx-ft-syne{--fx-font:'Syne',sans-serif;--fx-extra:1;font-weight:800;}
.sn-fx.sn-fx-ft-dosis,
html.theme-light .sn-fx.sn-fx-ft-dosis{--fx-font:'Dosis',sans-serif;--fx-extra:1;font-weight:700;font-size:1.1em;}
.sn-fx.sn-fx-ft-fjalla,
html.theme-light .sn-fx.sn-fx-ft-fjalla{--fx-font:'Fjalla One',sans-serif;--fx-extra:1;font-weight:400;letter-spacing:.02em;}
.sn-fx.sn-fx-ft-titan,
html.theme-light .sn-fx.sn-fx-ft-titan{--fx-font:'Titan One',sans-serif;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-russo,
html.theme-light .sn-fx.sn-fx-ft-russo{--fx-font:'Russo One',sans-serif;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-allura,
html.theme-light .sn-fx.sn-fx-ft-allura{--fx-font:'Allura',cursive;--fx-extra:1;font-weight:400;font-size:1.3em;}
.sn-fx.sn-fx-ft-parisienne,
html.theme-light .sn-fx.sn-fx-ft-parisienne{--fx-font:'Parisienne',cursive;--fx-extra:1;font-weight:400;font-size:1.2em;}
.sn-fx.sn-fx-ft-courgette,
html.theme-light .sn-fx.sn-fx-ft-courgette{--fx-font:'Courgette',cursive;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-handlee,
html.theme-light .sn-fx.sn-fx-ft-handlee{--fx-font:'Handlee',cursive;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-gloria,
html.theme-light .sn-fx.sn-fx-ft-gloria{--fx-font:'Gloria Hallelujah',cursive;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-rock-salt,
html.theme-light .sn-fx.sn-fx-ft-rock-salt{--fx-font:'Rock Salt',cursive;--fx-extra:1;font-weight:400;font-size:.85em;}
.sn-fx.sn-fx-ft-yellowtail,
html.theme-light .sn-fx.sn-fx-ft-yellowtail{--fx-font:'Yellowtail',cursive;--fx-extra:1;font-weight:400;font-size:1.2em;}
.sn-fx.sn-fx-ft-cookie,
html.theme-light .sn-fx.sn-fx-ft-cookie{--fx-font:'Cookie',cursive;--fx-extra:1;font-weight:400;font-size:1.25em;}
.sn-fx.sn-fx-ft-marck,
html.theme-light .sn-fx.sn-fx-ft-marck{--fx-font:'Marck Script',cursive;--fx-extra:1;font-weight:400;font-size:1.12em;}
.sn-fx.sn-fx-ft-patrick-hand,
html.theme-light .sn-fx.sn-fx-ft-patrick-hand{--fx-font:'Patrick Hand',cursive;--fx-extra:1;font-weight:400;font-size:1.1em;}
.sn-fx.sn-fx-ft-luckiest-guy,
html.theme-light .sn-fx.sn-fx-ft-luckiest-guy{--fx-font:'Luckiest Guy',sans-serif;--fx-extra:1;font-weight:400;letter-spacing:.03em;}
.sn-fx.sn-fx-ft-boogaloo,
html.theme-light .sn-fx.sn-fx-ft-boogaloo{--fx-font:'Boogaloo',sans-serif;--fx-extra:1;font-weight:400;font-size:1.12em;}
.sn-fx.sn-fx-ft-bowlby,
html.theme-light .sn-fx.sn-fx-ft-bowlby{--fx-font:'Bowlby One',sans-serif;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-shrikhand,
html.theme-light .sn-fx.sn-fx-ft-shrikhand{--fx-font:'Shrikhand',cursive;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-staatliches,
html.theme-light .sn-fx.sn-fx-ft-staatliches{--fx-font:'Staatliches',sans-serif;--fx-extra:1;font-weight:400;letter-spacing:.05em;}
.sn-fx.sn-fx-ft-pirata,
html.theme-light .sn-fx.sn-fx-ft-pirata{--fx-font:'Pirata One',cursive;--fx-extra:1;font-weight:400;font-size:1.12em;}
.sn-fx.sn-fx-ft-lilita,
html.theme-light .sn-fx.sn-fx-ft-lilita{--fx-font:'Lilita One',sans-serif;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-rye,
html.theme-light .sn-fx.sn-fx-ft-rye{--fx-font:'Rye',serif;--fx-extra:1;font-weight:400;font-size:.95em;}
.sn-fx.sn-fx-ft-metal-mania,
html.theme-light .sn-fx.sn-fx-ft-metal-mania{--fx-font:'Metal Mania',cursive;--fx-extra:1;font-weight:400;font-size:1.05em;}
.sn-fx.sn-fx-ft-frijole,
html.theme-light .sn-fx.sn-fx-ft-frijole{--fx-font:'Frijole',cursive;--fx-extra:1;font-weight:400;font-size:.9em;}
.sn-fx.sn-fx-ft-fira-code,
html.theme-light .sn-fx.sn-fx-ft-fira-code{--fx-font:'Fira Code',monospace;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-plex-mono,
html.theme-light .sn-fx.sn-fx-ft-plex-mono{--fx-font:'IBM Plex Mono',monospace;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-silkscreen,
html.theme-light .sn-fx.sn-fx-ft-silkscreen{--fx-font:'Silkscreen',monospace;--fx-extra:1;font-weight:400;font-size:.8em;}
.sn-fx.sn-fx-ft-streak-racer,
html.theme-light .sn-fx.sn-fx-ft-streak-racer{--fx-font:'Faster One',sans-serif;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-typewriter-pro,
html.theme-light .sn-fx.sn-fx-ft-typewriter-pro{--fx-font:'Special Elite',monospace;--fx-extra:1;font-weight:400;font-size:.92em;}
.sn-fx.sn-fx-ft-stencil-ops,
html.theme-light .sn-fx.sn-fx-ft-stencil-ops{--fx-font:'Black Ops One',sans-serif;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-shadow-block,
html.theme-light .sn-fx.sn-fx-ft-shadow-block{--fx-font:'Bungee Shade',sans-serif;--fx-extra:1;font-weight:400;font-size:.9em;}
.sn-fx.sn-fx-ft-chiseled,
html.theme-light .sn-fx.sn-fx-ft-chiseled{--fx-font:'Fredericka the Great',serif;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-royal-capitals,
html.theme-light .sn-fx.sn-fx-ft-royal-capitals{--fx-font:'Cinzel Decorative',serif;--fx-extra:1;font-weight:700;}
.sn-fx.sn-fx-ft-glitch-core,
html.theme-light .sn-fx.sn-fx-ft-glitch-core{--fx-font:'Rubik Glitch',sans-serif;--fx-extra:1;font-weight:400;}
.sn-fx.sn-fx-ft-eternal-neon,
html.theme-light .sn-fx.sn-fx-ft-eternal-neon{--fx-font:'Fascinate Inline',cursive;--fx-extra:1;font-weight:400;font-size:1.05em;}

/* ==========================================================================
   STORE: collapsible lists, group cards, group perk looks, tag spacing
   ========================================================================== */
/* Tags sit on the card's top edge, so give the first one room instead of letting its parent clip it */
.post-card.sn-fl { margin-top: 18px; }
.comment-item.sn-fl { margin-top: 16px; }

/* Collapsible / searchable lists of your own posts, events, projects */
.eco-lb { margin-top: 6px; }
.eco-lb-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.eco-lb-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-weight: 600; }
.eco-lb-toggle .material-symbols-outlined { font-size: 20px; }
.eco-lb-q { flex: 1 1 200px; min-width: 0; max-width: 360px; }
.eco-lb-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.eco-lb-chips .store-result-count { margin-left: auto; }
.eco-lb-list { max-height: 460px; overflow-y: auto; padding-right: 4px; }
.eco-lb-more { width: 100%; margin-top: 4px; padding: 9px 14px; }
.eco-lb-empty { padding: 8px 2px; }

/* Group cards: one collapsible card per group */
.eco-gp-toolbar { grid-template-columns: 1fr auto auto; }
@media (max-width: 680px) { .eco-gp-toolbar { grid-template-columns: 1fr 1fr; } .eco-gp-toolbar input { grid-column: 1 / -1; } }
.eco-gcard { margin: 12px 0 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; }
.eco-gcard.is-open { border-color: var(--accent-purple); }
.eco-gcard-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; background: transparent; border: 0; color: var(--text-main); cursor: pointer; text-align: left; font: inherit; }
.eco-gcard-head:hover { background: rgba(127, 127, 127, 0.07); }
.eco-gcard-caret { transition: transform .18s; color: var(--text-muted); }
.eco-gcard.is-open .eco-gcard-caret { transform: rotate(180deg); color: var(--accent-purple); }
.eco-gcard-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eco-gcard-pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.eco-gcard-body { padding: 4px 14px 14px; }
.eco-gcard-note { margin: 4px 2px 12px; }
.eco-pk-text { min-width: 200px; }

/* Group welcome message */
.eco-gwelcome { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 14px; padding: 12px 16px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--gp-a, var(--accent-purple)); color: var(--text-main); font-size: 14px; line-height: 1.5; }
.eco-gwelcome .material-symbols-outlined { color: var(--gp-a, var(--accent-purple)); font-size: 22px; flex-shrink: 0; }
.eco-gwelcome-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Accent colour on the group page */
#groupHero.sn-gpa { --gp-a: var(--gp-c); }
html.theme-light #groupHero.sn-gpa { --gp-a: color-mix(in srgb, var(--gp-c) 76%, #000); }
#groupHero.sn-gpa .group-hero-join-btn { background: var(--gp-a) !important; border-color: var(--gp-a) !important; color: #fff !important; }
#groupHero.sn-gpa .group-hero-header { box-shadow: 0 0 0 1px var(--gp-a), 0 0 26px color-mix(in srgb, var(--gp-a) 32%, transparent); border-radius: 16px; padding-left: 16px; padding-right: 16px; }
#groupHero.sn-gpa .group-hero-tab.active { color: var(--gp-a); border-color: var(--gp-a); }
#groupHero.sn-gpa .group-hero-meta { color: var(--gp-a); }

#groupHero.sn-gpa-violet { --gp-c: #a78bfa; }
#groupHero.sn-gpa-sky { --gp-c: #38bdf8; }
#groupHero.sn-gpa-emerald { --gp-c: #10b981; }
#groupHero.sn-gpa-rose { --gp-c: #f472b6; }
#groupHero.sn-gpa-amber { --gp-c: #f59e0b; }
#groupHero.sn-gpa-coral { --gp-c: #fb7185; }
#groupHero.sn-gpa-teal { --gp-c: #14b8a6; }
#groupHero.sn-gpa-fuchsia { --gp-c: #d946ef; }
#groupHero.sn-gpa-lime { --gp-c: #84cc16; }
#groupHero.sn-gpa-crimson { --gp-c: #e11d48; }
#groupHero.sn-gpa-indigo { --gp-c: #6366f1; }
#groupHero.sn-gpa-gold { --gp-c: #eab308; }

.sn-gtx { background-image: var(--gtx-g); background-size: var(--gtx-size, 100% 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: var(--gtx-anim, none); }
html.theme-light .sn-gtx { filter: brightness(.82) saturate(1.15); }
@keyframes snGtxFlow { from { background-position: 0 0; } to { background-position: 150% 0; } }
@keyframes snGtxNeon { 0%, 100% { filter: drop-shadow(0 0 3px var(--gtx-n)); } 50% { filter: drop-shadow(0 0 14px var(--gtx-n)); } }
.sn-gtx-gold { --gtx-g: linear-gradient(90deg, #fde68a, #f59e0b, #b45309); }
.sn-gtx-sunset { --gtx-g: linear-gradient(90deg, #fb923c, #f43f5e, #a855f7); }
.sn-gtx-ocean { --gtx-g: linear-gradient(90deg, #67e8f9, #3b82f6, #6366f1); }
.sn-gtx-rose { --gtx-g: linear-gradient(90deg, #fbcfe8, #f472b6, #be185d); }
.sn-gtx-mint { --gtx-g: linear-gradient(90deg, #bbf7d0, #34d399, #0d9488); }
.sn-gtx-aurora { --gtx-g: linear-gradient(90deg, #34d399, #38bdf8, #a78bfa, #34d399); --gtx-size: 300% 100%; --gtx-anim: snGtxFlow 6s linear infinite; }
.sn-gtx-fire { --gtx-g: linear-gradient(90deg, #fde047, #f97316, #dc2626, #fde047); --gtx-size: 300% 100%; --gtx-anim: snGtxFlow 3.4s linear infinite; }
.sn-gtx-rainbow { --gtx-g: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #a855f7, #ef4444); --gtx-size: 300% 100%; --gtx-anim: snGtxFlow 5s linear infinite; }
.sn-gtx-chrome { --gtx-g: linear-gradient(110deg, #94a3b8 20%, #f8fafc 45%, #94a3b8 70%); --gtx-size: 300% 100%; --gtx-anim: snGtxFlow 3s linear infinite; }
.sn-gtx-neon { --gtx-g: linear-gradient(90deg, #22d3ee, #e879f9); --gtx-n: #22d3ee; --gtx-anim: snGtxNeon 2.4s ease-in-out infinite; }

.sn-gtf-playfair { font-family: 'Playfair Display',serif !important; }
.sn-gtf-cinzel { font-family: 'Cinzel',serif !important; }
.sn-gtf-abril { font-family: 'Abril Fatface',serif !important; }
.sn-gtf-alfa { font-family: 'Alfa Slab One',serif !important; }
.sn-gtf-bebas { font-family: 'Bebas Neue',sans-serif !important; }
.sn-gtf-pacifico { font-family: 'Pacifico',cursive !important; }
.sn-gtf-dancing { font-family: 'Dancing Script',cursive !important; }
.sn-gtf-greatvibes { font-family: 'Great Vibes',cursive !important; }
.sn-gtf-oswald { font-family: 'Oswald',sans-serif !important; }
.sn-gtf-comfortaa { font-family: 'Comfortaa',sans-serif !important; }
.sn-gtf-satisfy { font-family: 'Satisfy',cursive !important; }
.sn-gtf-anton { font-family: 'Anton',sans-serif !important; }

#groupHeroTitle[data-emblem]::before { content: attr(data-emblem); margin-right: .3em; -webkit-text-fill-color: initial; }
.post-group-chip[data-emblem]::before { content: attr(data-emblem); margin-right: 2px; }

.sn-gcf { --gcf: #fbbf24; }
html.theme-light .sn-gcf { filter: none; }
.sn-gcf-gold { --gcf: #fbbf24; border-color: var(--gcf) !important; color: var(--gcf) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--gcf) 55%, transparent); }
html.theme-light .sn-gcf-gold { --gcf: #c3941c; }
.sn-gcf-cyan { --gcf: #22d3ee; border-color: var(--gcf) !important; color: var(--gcf) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--gcf) 55%, transparent); }
html.theme-light .sn-gcf-cyan { --gcf: #1aa4b9; }
.sn-gcf-rose { --gcf: #f472b6; border-color: var(--gcf) !important; color: var(--gcf) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--gcf) 55%, transparent); }
html.theme-light .sn-gcf-rose { --gcf: #be588d; }
.sn-gcf-violet { --gcf: #a78bfa; border-color: var(--gcf) !important; color: var(--gcf) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--gcf) 55%, transparent); }
html.theme-light .sn-gcf-violet { --gcf: #826cc3; }
.sn-gcf-emerald { --gcf: #34d399; border-color: var(--gcf) !important; color: var(--gcf) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--gcf) 55%, transparent); }
html.theme-light .sn-gcf-emerald { --gcf: #28a477; }

@keyframes snGcfEmber { 0%, 100% { box-shadow: 0 0 4px rgba(249,115,22,.4); } 50% { box-shadow: 0 0 16px rgba(239,68,68,.85); } }
@keyframes snGcfRainbow { 0% { border-color: #ef4444; box-shadow: 0 0 9px #ef4444; } 20% { border-color: #f59e0b; box-shadow: 0 0 9px #f59e0b; } 40% { border-color: #22c55e; box-shadow: 0 0 9px #22c55e; } 60% { border-color: #3b82f6; box-shadow: 0 0 9px #3b82f6; } 80% { border-color: #a855f7; box-shadow: 0 0 9px #a855f7; } 100% { border-color: #ef4444; box-shadow: 0 0 9px #ef4444; } }
@keyframes snGcfIce { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.45); } }
.sn-gcf-ember { border-color: #f97316 !important; color: #fb923c !important; animation: snGcfEmber 2s ease-in-out infinite; }
.sn-gcf-rainbow { animation: snGcfRainbow 4s linear infinite; }
.sn-gcf-ice { border-color: #7dd3fc !important; color: #7dd3fc !important; animation: snGcfIce 2.6s ease-in-out infinite; }
html.theme-light .sn-gcf-ember { color: #c2581a !important; }
html.theme-light .sn-gcf-ice { border-color: #0284c7 !important; color: #0369a1 !important; }


#groupHeroBanner.sn-gfx { position: relative; }
#groupHeroBanner.sn-gfx::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background-image: var(--gfx-img); background-size: var(--gfx-size); animation: var(--gfx-anim, none); }
@keyframes snGfxTwinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.sn-gfx-snow { --gfx-img: radial-gradient(circle, rgba(255,255,255,.95) 2px, transparent 3px), radial-gradient(circle, rgba(255,255,255,.65) 1.5px, transparent 2.5px), radial-gradient(circle, rgba(255,255,255,.4) 1px, transparent 2px); --gfx-size: 46px 46px, 29px 29px, 71px 71px; --bn-from: 0 0, 0 0, 0 0; --bn-to: 0 46px, -29px 58px, 23px 142px; --gfx-anim: snBnScroll 6s linear infinite; }
.sn-gfx-embers { --gfx-img: radial-gradient(circle, #fb923c 2px, transparent 3px), radial-gradient(circle, #fde047 1.5px, transparent 2.5px), radial-gradient(circle, #ef4444 2px, transparent 3px); --gfx-size: 40px 40px, 26px 26px, 63px 63px; --bn-from: 0 0, 0 0, 0 0; --bn-to: 0 -40px, 13px -52px, -21px -126px; --gfx-anim: snBnScroll 4s linear infinite; }
.sn-gfx-stars { --gfx-img: radial-gradient(circle at 20% 40%, rgba(255,255,255,.95) 1.5px, transparent 2.5px), radial-gradient(circle at 60% 70%, rgba(255,255,255,.8) 1.5px, transparent 2.5px), radial-gradient(circle at 80% 25%, rgba(255,255,255,.95) 1.5px, transparent 2.5px); --gfx-size: 70px 70px, 90px 90px, 50px 50px; --gfx-anim: snGfxTwinkle 3s ease-in-out infinite; }
.sn-gfx-rain { --gfx-img: linear-gradient(105deg, transparent 45%, rgba(186,230,253,.6) 46% 48%, transparent 49%); --gfx-size: 20px 36px; --bn-from: 0 0; --bn-to: -20px 36px; --gfx-anim: snBnScroll .8s linear infinite; }
.sn-gfx-bubbles { --gfx-img: radial-gradient(circle, transparent 5px, rgba(186,230,253,.7) 6px, transparent 7px), radial-gradient(circle, transparent 3px, rgba(255,255,255,.6) 4px, transparent 5px); --gfx-size: 58px 58px, 33px 33px; --bn-from: 0 0, 0 0; --bn-to: 0 -58px, 11px -66px; --gfx-anim: snBnScroll 7s linear infinite; }
.sn-gfx-confetti { --gfx-img: radial-gradient(circle, #fde047 2px, transparent 3px), radial-gradient(circle, #f472b6 2px, transparent 3px), radial-gradient(circle, #38bdf8 2px, transparent 3px); --gfx-size: 38px 38px, 55px 55px, 47px 47px; --bn-from: 0 0, 0 0, 0 0; --bn-to: 0 38px, 0 55px, 0 94px; --gfx-anim: snBnScroll 6s linear infinite; }
.sn-gfx-sparkle { --gfx-img: radial-gradient(circle at 30% 50%, rgba(253,224,71,.95) 2px, transparent 4px), radial-gradient(circle at 70% 30%, rgba(255,255,255,.9) 1.5px, transparent 3px), radial-gradient(circle at 50% 80%, rgba(251,191,36,.9) 2px, transparent 4px); --gfx-size: 80px 80px, 60px 60px, 95px 95px; --gfx-anim: snGfxTwinkle 2.2s ease-in-out infinite; }
.sn-gfx-aurora { --gfx-img: linear-gradient(120deg, rgba(52,211,153,.4), rgba(56,189,248,.4), rgba(167,139,250,.4), rgba(52,211,153,.4)); --gfx-size: 300% 300%; --gfx-anim: snBnShift 9s ease-in-out infinite; mix-blend-mode: screen; }

@keyframes snGbAurora { 0%, 100% { box-shadow: 0 0 0 3px #34d399, 0 0 26px #38bdf8; } 33% { box-shadow: 0 0 0 3px #38bdf8, 0 0 26px #a78bfa; } 66% { box-shadow: 0 0 0 3px #a78bfa, 0 0 26px #34d399; } }
.sn-gb.sn-gb-aurora { --gb-a: #34d399; --gb-b: #38bdf8; animation: snGbAurora 4s ease-in-out infinite; }
@keyframes snGbAuroraL { 0%, 100% { box-shadow: 0 0 0 3px #28a477, 0 0 26px #2b93c1; } 33% { box-shadow: 0 0 0 3px #2b93c1, 0 0 26px #826cc3; } 66% { box-shadow: 0 0 0 3px #826cc3, 0 0 26px #28a477; } }
html.theme-light .sn-gb.sn-gb-aurora { --gb-a: #28a477; --gb-b: #2b93c1; animation: snGbAuroraL 4s ease-in-out infinite; }
@keyframes snGbRainbow { 0%, 100% { box-shadow: 0 0 0 3px #ef4444, 0 0 26px #22c55e; } 33% { box-shadow: 0 0 0 3px #22c55e, 0 0 26px #3b82f6; } 66% { box-shadow: 0 0 0 3px #3b82f6, 0 0 26px #ef4444; } }
.sn-gb.sn-gb-rainbow { --gb-a: #ef4444; --gb-b: #22c55e; animation: snGbRainbow 4s ease-in-out infinite; }
@keyframes snGbRainbowL { 0%, 100% { box-shadow: 0 0 0 3px #ba3535, 0 0 26px #1a9949; } 33% { box-shadow: 0 0 0 3px #1a9949, 0 0 26px #2e65bf; } 66% { box-shadow: 0 0 0 3px #2e65bf, 0 0 26px #ba3535; } }
html.theme-light .sn-gb.sn-gb-rainbow { --gb-a: #ba3535; --gb-b: #1a9949; animation: snGbRainbowL 4s ease-in-out infinite; }
@keyframes snGbPulsegold { 0%, 100% { box-shadow: 0 0 0 3px #fbbf24, 0 0 26px #f59e0b; } 33% { box-shadow: 0 0 0 3px #f59e0b, 0 0 26px #fde047; } 66% { box-shadow: 0 0 0 3px #fde047, 0 0 26px #fbbf24; } }
.sn-gb.sn-gb-pulsegold { --gb-a: #fbbf24; --gb-b: #f59e0b; animation: snGbPulsegold 2.2s ease-in-out infinite; }
@keyframes snGbPulsegoldL { 0%, 100% { box-shadow: 0 0 0 3px #c3941c, 0 0 26px #bf7b08; } 33% { box-shadow: 0 0 0 3px #bf7b08, 0 0 26px #c5ae37; } 66% { box-shadow: 0 0 0 3px #c5ae37, 0 0 26px #c3941c; } }
html.theme-light .sn-gb.sn-gb-pulsegold { --gb-a: #c3941c; --gb-b: #bf7b08; animation: snGbPulsegoldL 2.2s ease-in-out infinite; }
@keyframes snGbInferno { 0%, 100% { box-shadow: 0 0 0 3px #f97316, 0 0 26px #dc2626; } 33% { box-shadow: 0 0 0 3px #dc2626, 0 0 26px #fde047; } 66% { box-shadow: 0 0 0 3px #fde047, 0 0 26px #f97316; } }
.sn-gb.sn-gb-inferno { --gb-a: #f97316; --gb-b: #dc2626; animation: snGbInferno 4s ease-in-out infinite; }
@keyframes snGbInfernoL { 0%, 100% { box-shadow: 0 0 0 3px #c25911, 0 0 26px #ab1d1d; } 33% { box-shadow: 0 0 0 3px #ab1d1d, 0 0 26px #c5ae37; } 66% { box-shadow: 0 0 0 3px #c5ae37, 0 0 26px #c25911; } }
html.theme-light .sn-gb.sn-gb-inferno { --gb-a: #c25911; --gb-b: #ab1d1d; animation: snGbInfernoL 4s ease-in-out infinite; }
@keyframes snGbGlacier { 0%, 100% { box-shadow: 0 0 0 3px #7dd3fc, 0 0 26px #38bdf8; } 33% { box-shadow: 0 0 0 3px #38bdf8, 0 0 26px #e0f2fe; } 66% { box-shadow: 0 0 0 3px #e0f2fe, 0 0 26px #7dd3fc; } }
.sn-gb.sn-gb-glacier { --gb-a: #7dd3fc; --gb-b: #38bdf8; animation: snGbGlacier 4s ease-in-out infinite; }
@keyframes snGbGlacierL { 0%, 100% { box-shadow: 0 0 0 3px #61a4c4, 0 0 26px #2b93c1; } 33% { box-shadow: 0 0 0 3px #2b93c1, 0 0 26px #aebcc6; } 66% { box-shadow: 0 0 0 3px #aebcc6, 0 0 26px #61a4c4; } }
html.theme-light .sn-gb.sn-gb-glacier { --gb-a: #61a4c4; --gb-b: #2b93c1; animation: snGbGlacierL 4s ease-in-out infinite; }
@keyframes snGbNebula { 0%, 100% { box-shadow: 0 0 0 3px #c084fc, 0 0 26px #6366f1; } 33% { box-shadow: 0 0 0 3px #6366f1, 0 0 26px #f472b6; } 66% { box-shadow: 0 0 0 3px #f472b6, 0 0 26px #c084fc; } }
.sn-gb.sn-gb-nebula { --gb-a: #c084fc; --gb-b: #6366f1; animation: snGbNebula 4s ease-in-out infinite; }
@keyframes snGbNebulaL { 0%, 100% { box-shadow: 0 0 0 3px #9566c4, 0 0 26px #4d4fbb; } 33% { box-shadow: 0 0 0 3px #4d4fbb, 0 0 26px #be588d; } 66% { box-shadow: 0 0 0 3px #be588d, 0 0 26px #9566c4; } }
html.theme-light .sn-gb.sn-gb-nebula { --gb-a: #9566c4; --gb-b: #4d4fbb; animation: snGbNebulaL 4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .sn-fl, .sn-fl::before, .sn-fl::after, .msg-bubble.sn-bb, .sn-pt .profile-header-card, .sn-pt .profile-about-section, .sn-gtx, .sn-gcf, .sn-gb, #groupHeroBanner.sn-gfx::before { animation: none !important; }
}