@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');


/* Import Montserrat font - must be first */
/* ViralBuzz Theme Variables and Base Styles */
:root {
    /* Font Family - Single Source of Truth */
    --font-family: 'Questrial', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    
    --dark-bg: #14141A;
    --dark-surface: #121212;
    --dark-card: #21212B;
    --neon-green: #00ff88;
    --neon-pink: #ff00ff;
    --neon-cyan: #00ffff;
    --purple-500: #a855f7;
    --purple-600: #8B5CF6;
    --gray-400: #9ca3af;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --white: #ffffff;
    --text-white: #ffffff;
    --text-gray-300: #d1d5db;
    --text-gray-400: #9ca3af;
    --text-gray-500: #6b7280;
    --text-gray-600: #4b5563;
    --border-gray-600: #4b5563;
    --border-gray-700: #374151;
    --border-gray-800: #1f2937;
    --dark-gray-600: #4b5563;
    --dark-gray-700: #374151;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,
body {
    padding: 0;
    margin: 0;
    background-color: var(--dark-bg);
    color: var(--white);
    font-family: var(--font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color-scheme: dark;
}
body {
    min-height: 100vh;
    overflow-x: hidden;
    /* Ensure body scrolls but header stays fixed */
    padding-top: 0;
    margin-top: 0;
    /* Prevent body from affecting fixed header */
    position: relative;
}
/* Ensure header custom element stays fixed */
viralbuzz-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
}





































































/* Main Content Styles */
.main-content {
  padding: 0;
  min-height: calc(100vh - 60px);
  margin-top: 60px; /* Below fixed header */
  transition: margin-left 0.3s ease-in-out, transform 0.3s ease-in-out;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  width: 100%;
  margin-left: 0;
}

@media (max-width: 767px) {
  .main-content {
    margin-top: 56px;
    min-height: calc(100vh - 56px);
  }
}

/* Mobile: sidebar overlays content instead of pushing the app off-screen. */
@media (max-width: 1023px) {
  .main-content {
    margin-left: 0;
    width: 100%;
    transform: none !important;
    transition: none;
  }

  body.sidebar-open .main-content,
  .main-content.sidebar-open {
    transform: none !important;
  }

  body.sidebar-closed .main-content,
  .main-content.sidebar-closed {
    transform: none !important;
  }
}

/* Desktop: content shifts right to make room for sidebar when open */
@media (min-width: 1024px) {
  .main-content {
    margin-left: 16rem;
    width: calc(100% - 16rem);
    transform: none;
  }
  
  /* When sidebar is closed, main content expands to full width */
  body.sidebar-closed .main-content,
  .main-content.sidebar-closed {
    margin-left: 0;
    width: 100%;
  }
  
  /* When sidebar is open, ensure proper spacing */
  body.sidebar-open .main-content,
  .main-content.sidebar-open {
    margin-left: 16rem;
    width: calc(100% - 16rem);
  }
}

/* Full-page routes appended to body (create/edit flows) — same horizontal sidebar push as .main-content */
.vb-full-route {
  transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out, transform 0.3s ease-in-out;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  width: 100%;
  margin-left: 0;
}

@media (max-width: 1023px) {
  .vb-full-route {
    margin-left: 0;
    width: 100%;
    transform: none !important;
    transition: none;
  }

  body.sidebar-open .vb-full-route,
  .vb-full-route.sidebar-open {
    transform: none !important;
  }

  body.sidebar-closed .vb-full-route,
  .vb-full-route.sidebar-closed {
    transform: none !important;
  }
}

@media (min-width: 1024px) {
  .vb-full-route {
    margin-left: 16rem;
    width: calc(100% - 16rem);
    transform: none;
  }

  body.sidebar-closed .vb-full-route,
  .vb-full-route.sidebar-closed {
    margin-left: 0;
    width: 100%;
  }

  body.sidebar-open .vb-full-route,
  .vb-full-route.sidebar-open {
    margin-left: 16rem;
    width: calc(100% - 16rem);
  }

  body.sidebar-minimized .vb-full-route {
    margin-left: 4rem;
    width: calc(100% - 4rem);
  }
}

.content-container {
  max-width: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

.content-container h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0;
  color: var(--white);
  padding: 0;
}

.content-container p {
  font-size: 1rem;
  color: var(--gray-400);
  padding: 0.5rem 0;
}

/* Thin Scrollbar Styles */
.thin-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

.thin-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.thin-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.thin-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.5);
  border-radius: 3px;
}

.thin-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(156, 163, 175, 0.7);
}

/* Auto-hide scrollbar (show on hover) */
.auto-hide-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.auto-hide-scrollbar:hover {
  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

.auto-hide-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.auto-hide-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.auto-hide-scrollbar::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 3px;
}

.auto-hide-scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.5);
}

.auto-hide-scrollbar:hover::-webkit-scrollbar-thumb:hover {
  background-color: rgba(156, 163, 175, 0.7);
}

/* Embed Container Styles */
.embed-container {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 1rem 0;
  overflow: visible;
}

/* Twitter Embed Styling - Full width, no centering */
.embed-container blockquote.twitter-tweet {
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  line-height: normal;
  display: block !important;
}

/* Override Twitter's default centering and max-width */
.embed-container blockquote.twitter-tweet,
.embed-container blockquote.twitter-tweet > *,
.embed-container blockquote.twitter-tweet iframe,
.embed-container blockquote.twitter-tweet div {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Twitter video embeds - must be full width */
.embed-container blockquote.twitter-tweet video,
.embed-container blockquote.twitter-tweet iframe,
.embed-container blockquote.twitter-tweet [data-video-id],
.embed-container blockquote.twitter-tweet .twitter-video {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
}

/* Twitter tweet content wrapper */
.embed-container blockquote.twitter-tweet .twitter-tweet-rendered {
  width: 100% !important;
  max-width: 100% !important;
}

.embed-container blockquote.twitter-tweet * {
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
  line-height: normal !important;
}

/* Instagram Embed Styling */
.embed-container blockquote.instagram-media {
  margin: 0 auto;
  max-width: 540px;
  width: 100%;
  overflow: visible;
}

/* Generic Embed Styling - Full width for videos */
.embed-container iframe {
  width: 100% !important;
  max-width: 100% !important;
  border: none;
  display: block;
}

/* Video embeds must take full container width */
.embed-container iframe[src*="youtube"],
.embed-container iframe[src*="youtu.be"],
.embed-container iframe[src*="vimeo"],
.embed-container iframe[src*="x.com"],
.embed-container iframe[src*="twitter.com"] {
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Reaction Bounce Animation - More pronounced */
@keyframes reactionBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  15% {
    transform: translateY(-20px) scale(1.2);
  }
  30% {
    transform: translateY(-30px) scale(1.3);
  }
  45% {
    transform: translateY(-25px) scale(1.25);
  }
  60% {
    transform: translateY(-15px) scale(1.1);
  }
  75% {
    transform: translateY(-8px) scale(1.05);
  }
}

.reaction-bounce {
  animation: reactionBounce 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55) 3;
  display: inline-block;
}
/* ViralBuzz Header Styles */
viralbuzz-header,
.viralbuzz-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    background-color: #181818;
    border-bottom: 1px solid #1f2937;
    width: 100% !important;
    height: auto !important;
    min-height: 60px !important;
    box-sizing: border-box;
    display: block !important;
    /* Ensure header never scrolls */
    margin: 0 !important;
    padding: 0 !important;
    /* Smooth transition for show/hide */
    transition: transform 0.3s ease-in-out !important;
    transform: translateY(0) !important;
    will-change: transform !important;
}

/* Header hidden state (scrolling down) */
viralbuzz-header.header-hidden,
.viralbuzz-header.header-hidden {
    transform: translateY(-100%) !important;
}

/* Header visible state (scrolling up or at top) */
viralbuzz-header.header-visible,
.viralbuzz-header.header-visible {
    transform: translateY(0) !important;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    max-width: 100%;
    gap: 1rem;
    height: 60px;
    box-sizing: border-box;
}

.password-change-banner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 1rem;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.18), rgba(234, 88, 12, 0.12));
    border-bottom: 1px solid rgba(245, 158, 11, 0.35);
    color: #fde68a;
    font-size: 0.78rem;
    line-height: 1.35;
}

.password-change-banner.hidden {
    display: none;
}

.password-change-banner-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.65rem;
}

.password-change-banner-link {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
}

.password-change-banner-dismiss {
    border: 1px solid rgba(253, 230, 138, 0.45);
    background: rgba(255, 255, 255, 0.08);
    color: #fde68a;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 0.375rem;
    flex-shrink: 0;
    white-space: nowrap;
}

.password-change-banner-dismiss:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 767px) {
    .header-container {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }

    .header-left {
        gap: 0.5rem;
        min-width: 0;
    }

    .header-hamburger {
        width: 2.5rem;
        height: 2.5rem;
        padding: 0.5rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.03);
    }

    .logo-text {
        font-size: 1.35rem;
    }

    .header-right {
        gap: 0.4rem;
        flex: 0 0 auto;
        min-width: 0;
    }

    .header-actions {
        gap: 0.35rem;
    }

    .header-icon-btn {
        padding: 0.4rem;
    }

    .header-user-name,
    .header-profile-chevron {
        display: none !important;
    }

    .header-create-btn {
        width: 2.45rem;
        height: 2.45rem;
        padding: 0;
        border-radius: 0.75rem;
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .header-container {
        padding: 0.5rem;
    }

    .logo-text {
        font-size: 1.15rem;
    }

    .header-icon-btn {
        padding: 0.3rem;
    }

    .header-icon-btn svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* Left Section: Hamburger + Logo */
.header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.header-hamburger {
    background: transparent;
    border: none;
    color: #ffffff;
    padding: 0.5rem;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header-hamburger:hover {
    color: #00ff88;
}

.header-hamburger svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Logo Styles */
.header-logo {
    display: flex;
    align-items: center;
}

.logo-link {
    text-decoration: none;
    display: inline-block;
}

.logo-text {
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
}

.logo-viral {
    color: #ffffff;
    font-weight: 900;
}

.logo-buzz-wrapper {
    position: relative;
    display: inline-block;
    margin-left: -0.125rem;
}

.logo-b {
    background: linear-gradient(to right, #ff00ff, #9333ea, #00ffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
}

.logo-badge {
    position: absolute;
    top: -0.125rem;
    right: -0.25rem;
    width: 1rem;
    height: 1rem;
    background-color: #9333ea;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(147, 51, 234, 0.4);
}

.logo-badge svg {
    width: 0.625rem;
    height: 0.625rem;
    color: #ffffff;
}

.logo-uzz {
    background: linear-gradient(to right, #ff00ff, #9333ea, #00ffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-left: -0.125rem;
    font-weight: 900;
}

/* Right Section: Navigation + Actions */
.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    justify-content: flex-end;
}

/* Navigation Links */
.header-nav {
    display: none;
    align-items: center;
    gap: 1.5rem;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: #9ca3af;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.nav-link:hover {
    color: #00ff88;
}

.nav-link svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.nav-link span {
    display: none;
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.header-icon-btn {
    background: transparent;
    border: none;
    color: #9ca3af;
    padding: 0.5rem;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-notification-btn {
    position: relative;
}

.header-notification-badge {
    position: absolute;
    top: 0.1rem;
    right: 0.05rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1rem;
    text-align: center;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
}

.header-icon-btn:hover {
    color: #ffffff;
}

.header-icon-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

.header-user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-user-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.header-user-initials {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background:
        linear-gradient(#181818, #181818) padding-box,
        linear-gradient(to right, #ff00ff, #9333ea, #00ffff) border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.75rem;
    border: 2px solid transparent;
}

.header-user-name {
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640px) {
    .header-user-name {
        display: none;
    }
}

/* Profile dropdown */
.header-profile-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.header-profile-trigger {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.header-profile-chevron {
    width: 1rem;
    height: 1rem;
    color: #9ca3af;
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease;
}
.header-profile-logged-in .header-profile-chevron {
    display: block;
}
.header-profile-dropdown:not(.header-profile-logged-in) .header-profile-chevron {
    display: none;
}
.header-profile-dropdown:hover .header-profile-chevron,
.header-profile-dropdown[aria-expanded="true"] .header-profile-chevron {
    color: #00ff88;
}
.header-profile-dropdown .header-profile-trigger[aria-expanded="true"] .header-profile-chevron {
    transform: rotate(180deg);
}

.header-profile-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 200px;
    background-color: #181818;
    border: 1px solid #1f2937;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    padding: 0.5rem 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
}
.header-profile-dropdown-menu.hidden {
    display: none;
}

.header-dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #e5e7eb;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.header-dropdown-item:hover {
    background-color: rgba(0, 255, 136, 0.1);
    color: #00ff88;
}

.header-admin-portal.hidden {
    display: none;
}

.header-admin-portal:hover {
    background-color: rgba(0, 255, 136, 0.1);
    color: #00ff88;
}

.header-admin-portal-top {
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 255, 136, 0.45);
    background: rgba(0, 255, 136, 0.08);
    color: #00ff88;
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.header-admin-portal-top:hover {
    background: rgba(0, 255, 136, 0.16);
    border-color: #00ff88;
    color: #ffffff;
}

.header-admin-portal-top.hidden {
    display: none;
}

.header-dropdown-divider {
    height: 1px;
    background-color: #1f2937;
    margin: 0.25rem 0;
}

.header-dropdown-logout {
    color: #f87171;
    margin-top: 0.25rem;
}
.header-dropdown-logout:hover {
    background-color: rgba(248, 113, 113, 0.15);
    color: #fca5a5;
}

.header-create-btn {
    background: linear-gradient(to right, #ff00ff, #9333ea, #00ffff);
    color: #ffffff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.header-create-btn:hover {
    opacity: 0.9;
}

.header-create-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.header-create-btn span {
    display: none;
}

/* Responsive adjustments */
@media (min-width: 640px) {
    .logo-text {
        font-size: 2rem;
    }
    
    .logo-badge {
        width: 1.25rem;
        height: 1.25rem;
    }
    
    .logo-badge svg {
        width: 0.75rem;
        height: 0.75rem;
    }

    .header-create-btn span {
        display: inline;
    }
}

@media (min-width: 768px) {
    .header-admin-portal-top:not(.hidden) {
        display: flex;
    }

    .header-profile-dropdown-menu .header-admin-portal {
        display: none;
    }
}

@media (min-width: 1180px) {
    .logo-text {
        font-size: 2.5rem;
    }

    .header-nav {
        display: flex;
    }

    .nav-link span {
        display: inline;
    }
}

@media (min-width: 1024px) {
    .logo-text {
        font-size: 3rem;
    }
}
/* Final small-screen overrides live after base rules so they actually win. */
@media (max-width: 767px) {
    viralbuzz-header,
    .viralbuzz-header {
        height: 56px !important;
    }

    .header-container {
        height: 56px;
        padding: 0.45rem 0.6rem;
        gap: 0.45rem;
    }

    .header-left {
        min-width: 0;
        flex: 1 1 auto;
        gap: 0.45rem;
    }

    .header-hamburger {
        width: 2.35rem;
        height: 2.35rem;
        padding: 0.45rem;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
    }

    .logo-text {
        font-size: 1.2rem;
        max-width: 7.25rem;
        overflow: hidden;
    }

    .header-right {
        flex: 0 0 auto;
        gap: 0.25rem;
    }

    .header-actions {
        gap: 0.25rem;
    }

    .header-icon-btn {
        padding: 0.3rem;
    }

    .header-icon-btn svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .header-user-name,
    .header-profile-chevron {
        display: none !important;
    }

    .header-user-avatar,
    .header-user-initials {
        width: 1.85rem;
        height: 1.85rem;
        font-size: 0.7rem;
    }

    .header-create-btn {
        width: 2.35rem;
        height: 2.35rem;
        padding: 0;
        border-radius: 0.75rem;
        justify-content: center;
    }

    .header-create-btn span {
        display: none !important;
    }
}

@media (max-width: 390px) {
    .logo-text {
        max-width: 5.75rem;
        font-size: 1.05rem;
    }

    .header-container {
        padding-inline: 0.45rem;
    }
}








































/* ViralBuzz Sidebar Styles */
viralbuzz-sidebar,
.viralbuzz-sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 60 !important;
    right: auto !important;
    width: 16rem !important;
    max-width: 16rem !important;
    min-width: 16rem !important;
    background-color: #0f0f0f;
    border-right: 1px solid #1a1a1a;
    z-index: 30;
    overflow: hidden;
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
    box-sizing: border-box;
    display: block !important;
    /* Force width - prevent any expansion */
    flex: 0 0 16rem !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    /* Ensure sidebar stays connected to header - no gap on scroll */
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Collapsed state - icons only */
viralbuzz-sidebar.minimized,
.viralbuzz-sidebar.minimized {
    width: 4rem !important;
    max-width: 4rem !important;
    min-width: 4rem !important;
}

.sidebar-inner {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

.sidebar-inner::-webkit-scrollbar {
    width: 3px;
}

.sidebar-inner::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-inner::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

.sidebar-inner:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
}

.viralbuzz-sidebar::-webkit-scrollbar {
    width: 3px;
}

.viralbuzz-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.viralbuzz-sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

.viralbuzz-sidebar:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
}

/* Mobile: overlay sidebar, content remains full width behind backdrop */
@media (max-width: 1023px) {
    viralbuzz-sidebar,
    .viralbuzz-sidebar {
        position: fixed;
        left: 0;
        top: 0 !important;
        width: min(16rem, 86vw) !important;
        max-width: min(16rem, 86vw) !important;
        min-width: 0 !important;
        z-index: 90 !important;
    }
    
    /* Sidebar open state - visible (already in place) */
    viralbuzz-sidebar.open,
    .viralbuzz-sidebar.open {
        transform: translateX(0) !important;
    }
    
    /* Sidebar closed state - hidden off-screen to the left */
    viralbuzz-sidebar.closed,
    .viralbuzz-sidebar.closed {
        transform: translateX(-100%) !important;
    }
}

/* Desktop: sidebar visible by default, but can be closed */
@media (min-width: 1024px) {
    viralbuzz-sidebar,
    .viralbuzz-sidebar {
        transform: translateX(0);
    }
    
    /* Desktop: open state - visible */
    viralbuzz-sidebar.open,
    .viralbuzz-sidebar.open {
        transform: translateX(0) !important;
    }
    
    /* Desktop: closed state - hidden */
    viralbuzz-sidebar.closed,
    .viralbuzz-sidebar.closed {
        transform: translateX(-100%) !important;
    }
}

/* Sidebar Header */
.sidebar-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background-color: #0f0f0f;
    z-index: 10;
    margin-top: 0;
    padding-top: 0.75rem;
}

.sidebar-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #ffffff;
}

.sidebar-close-btn {
    background: transparent;
    border: none;
    color: #9ca3af;
    padding: 0.25rem;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-close-btn:hover {
    color: #ffffff;
}

.sidebar-close-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

.sidebar-minimize-btn {
    background: transparent;
    border: none;
    color: #9ca3af;
    padding: 0.25rem;
    cursor: pointer;
    transition: color 0.2s ease;
    display: none;
    align-items: center;
    justify-content: center;
}

.sidebar-minimize-btn:hover {
    color: #ffffff;
}

.sidebar-minimize-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

@media (min-width: 1024px) {
    .sidebar-close-btn {
        display: none;
    }
    
    .sidebar-minimize-btn {
        display: flex;
    }
}

/* Sidebar Section */
.sidebar-section {
    padding: 0.5rem 1rem;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    margin: 0;
}

.sidebar-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    justify-content: center;
}

/* Nested Section Styles (for Memes/Articles dropdowns) - Match Explore Tags */
.sidebar-nested-section {
    padding: 0.5rem 1rem;
    margin: 0;
    position: relative;
    z-index: 2;
    isolation: isolate;
    border-top: 1px solid #1f2937;
}

/* Remove gap between nested sections */
.sidebar-nested-section + .sidebar-nested-section {
    margin-top: 0;
}

/* Ensure nested sections match Forum/Explore/Page row spacing */
.sidebar-section.sidebar-nested-section {
    padding: 0.5rem 1rem;
}

.sidebar-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: left;
    margin: 0;
    min-height: 3rem;
    box-sizing: border-box;
}

.sidebar-section-toggle:focus {
    outline: none;
}

.sidebar-section-toggle:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

.sidebar-section-toggle.active,
.sidebar-explore-toggle.active,
.sidebar-page-item.active {
    background-color: rgba(88, 28, 135, 0.4);
    color: #c4b5fd;
}

.sidebar-section-toggle-content {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex: 1;
    justify-content: flex-start;
}

.sidebar-section-toggle-icon {
    width: 1rem;
    height: 1rem;
    color: #9ca3af;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    transform-origin: center;
}

.sidebar-section-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #a855f7;
    flex-shrink: 0;
}

.sidebar-section-toggle h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #d1d5db;
    margin: 0;
    line-height: 1.5;
    transition: color 0.2s ease;
}

.sidebar-section-toggle:hover h3,
.sidebar-section-toggle.active h3 {
    color: #ffffff;
}

.sidebar-section-title svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #ef4444;
    flex-shrink: 0;
}

.sidebar-section-title h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
}

@media (min-width: 1024px) {
    .sidebar-section-title {
        justify-content: flex-start;
    }
}

/* Navigation Items */
.sidebar-nav-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

/* Wrapper for nested section navigation items (enables smooth slide animation) */
.sidebar-nested-section .sidebar-nav-items-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.sidebar-nested-section .sidebar-nav-items-wrapper.expanded {
    grid-template-rows: 1fr;
    padding-top: 0.5rem;
}

/* Nested section navigation items (for collapsible sections) */
.sidebar-nested-section .sidebar-nav-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    min-height: 0;
    /* Fixed layout - no transitions on items themselves */
    /* Items will slide down smoothly as wrapper expands */
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    text-decoration: none;
    transition: background-color 0.2s ease;
    justify-content: center;
    position: relative;
    z-index: 1;
    min-height: 3rem;
    box-sizing: border-box;
    width: 100%;
}

.sidebar-nav-item:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

.sidebar-nav-item.active {
    background-color: rgba(88, 28, 135, 0.4);
    border-left: none;
}

.sidebar-nav-item.active .sidebar-nav-item-text {
    color: #c4b5fd;
    font-weight: 600;
}

.sidebar-nav-item-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
}

.sidebar-nav-item-text {
    font-size: 0.9375rem;
    color: #d1d5db;
    flex: 1;
    transition: color 0.2s ease, opacity 0.3s ease, width 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.5;
    display: block;
}

.sidebar-nav-item:hover .sidebar-nav-item-text {
    color: #ffffff;
}

/* Hide text when sidebar is minimized (collapsed rail mode) */
viralbuzz-sidebar.minimized .sidebar-nav-item-text,
.viralbuzz-sidebar.minimized .sidebar-nav-item-text,
viralbuzz-sidebar.minimized .sidebar-section-toggle h3,
.viralbuzz-sidebar.minimized .sidebar-section-toggle h3,
viralbuzz-sidebar.minimized .sidebar-explore-toggle h3,
.viralbuzz-sidebar.minimized .sidebar-explore-toggle h3,
viralbuzz-sidebar.minimized .sidebar-create-btn span,
.viralbuzz-sidebar.minimized .sidebar-create-btn span,
viralbuzz-sidebar.minimized .sidebar-brand-text,
.viralbuzz-sidebar.minimized .sidebar-brand-text,
viralbuzz-sidebar.minimized .sidebar-page-item-text,
.viralbuzz-sidebar.minimized .sidebar-page-item-text,
viralbuzz-sidebar.minimized .sidebar-link-chevron,
.viralbuzz-sidebar.minimized .sidebar-link-chevron,
viralbuzz-sidebar.minimized .sidebar-explore-arrow,
.viralbuzz-sidebar.minimized .sidebar-explore-arrow,
viralbuzz-sidebar.minimized .sidebar-section-toggle-icon,
.viralbuzz-sidebar.minimized .sidebar-section-toggle-icon,
viralbuzz-sidebar.minimized .sidebar-nav-items-wrapper,
.viralbuzz-sidebar.minimized .sidebar-nav-items-wrapper,
viralbuzz-sidebar.minimized .sidebar-explore-content,
.viralbuzz-sidebar.minimized .sidebar-explore-content {
    opacity: 0;
    width: 0;
    overflow: hidden;
    display: none;
}

/* Minimized: stack brand logo on top + hamburger toggle below, both centered */
viralbuzz-sidebar.minimized .sidebar-brand-header,
.viralbuzz-sidebar.minimized .sidebar-brand-header {
    flex-direction: column;
    padding: 0.75rem 0.5rem;
    gap: 0.625rem;
    justify-content: center;
    align-items: center;
}

viralbuzz-sidebar.minimized .sidebar-brand-link,
.viralbuzz-sidebar.minimized .sidebar-brand-link {
    flex: 0 0 auto;
    justify-content: center;
    gap: 0;
}

/* Minimized: shrink section padding so icons line up */
viralbuzz-sidebar.minimized .sidebar-section,
.viralbuzz-sidebar.minimized .sidebar-section,
viralbuzz-sidebar.minimized .sidebar-explore-section,
.viralbuzz-sidebar.minimized .sidebar-explore-section,
viralbuzz-sidebar.minimized .sidebar-help-section,
.viralbuzz-sidebar.minimized .sidebar-help-section,
viralbuzz-sidebar.minimized .sidebar-pages-section,
.viralbuzz-sidebar.minimized .sidebar-pages-section,
viralbuzz-sidebar.minimized .sidebar-create-section,
.viralbuzz-sidebar.minimized .sidebar-create-section {
    padding: 0.5rem;
}

/* Minimized: shrink nav item / page item padding so icon centers in 4rem rail */
viralbuzz-sidebar.minimized .sidebar-nav-item,
.viralbuzz-sidebar.minimized .sidebar-nav-item,
viralbuzz-sidebar.minimized .sidebar-page-item,
.viralbuzz-sidebar.minimized .sidebar-page-item,
viralbuzz-sidebar.minimized .sidebar-section-toggle,
.viralbuzz-sidebar.minimized .sidebar-section-toggle,
viralbuzz-sidebar.minimized .sidebar-explore-toggle,
.viralbuzz-sidebar.minimized .sidebar-explore-toggle {
    padding: 0.5rem;
    justify-content: center;
    gap: 0;
}

viralbuzz-sidebar.minimized .sidebar-create-btn,
.viralbuzz-sidebar.minimized .sidebar-create-btn {
    padding: 0.625rem;
    border-radius: 9999px;
}

/* Smooth width transition when toggling minimized */
viralbuzz-sidebar,
.viralbuzz-sidebar {
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out, min-width 0.3s ease-in-out, max-width 0.3s ease-in-out !important;
}

/* When sidebar is minimized, shift main content + global header to 4rem */
@media (min-width: 1024px) {
    body.sidebar-minimized .main-content {
        margin-left: 4rem !important;
        width: calc(100% - 4rem) !important;
    }
    body.sidebar-minimized viralbuzz-header {
        padding-left: 4rem !important;
    }
}

/* Center icons when minimized */
viralbuzz-sidebar.minimized .sidebar-nav-item,
.viralbuzz-sidebar.minimized .sidebar-nav-item {
    justify-content: center;
}

viralbuzz-sidebar.minimized .sidebar-section-toggle-content,
.viralbuzz-sidebar.minimized .sidebar-explore-toggle-content {
    justify-content: center;
}

.sidebar-nav-item-count {
    font-size: 0.75rem;
    color: #6b7280;
}

@media (min-width: 1024px) {
    .sidebar-nav-item {
        justify-content: flex-start;
    }
}

/* Color classes for icons */
.icon-red { background-color: #ef4444; }
.icon-pink { background-color: #ec4899; }
.icon-green { background-color: #10b981; }
.icon-yellow { background-color: #eab308; }
.icon-purple { background-color: #a855f7; }
.icon-blue { background-color: #3b82f6; }
.icon-cyan { background-color: #06b6d4; }
.icon-indigo { background-color: #6366f1; }
.icon-orange { background-color: #f97316; }
.icon-teal { background-color: #14b8a6; }
.icon-emerald { background-color: #10b981; }
.icon-rose { background-color: #f43f5e; }
.icon-amber { background-color: #f59e0b; }
.icon-lime { background-color: #84cc16; }
.icon-violet { background-color: #8b5cf6; }
.icon-fuchsia { background-color: #d946ef; }
.icon-sky { background-color: #0ea5e9; }
.icon-stone { background-color: #78716c; }
.icon-red-dark { background-color: #dc2626; }
.icon-yellow-dark { background-color: #ca8a04; }
.icon-gray { background-color: #6b7280; }
.icon-green-dark { background-color: #16a34a; }

/* Explore Tags Section */
.sidebar-explore-section {
    padding: 0.5rem 1rem;
    border-top: 1px solid #1f2937;
    position: relative;
    z-index: 1;
    margin: 0;
    isolation: isolate;
}

.sidebar-explore-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    min-height: 3rem;
}

.sidebar-explore-toggle:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

.sidebar-explore-toggle-content {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.sidebar-explore-hash-icon {
    width: 1.75rem;
    height: 1.75rem;
    color: #8b5cf6;
    flex-shrink: 0;
}

.sidebar-explore-arrow {
    width: 1rem;
    height: 1rem;
    color: #9ca3af;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.sidebar-explore-toggle.expanded .sidebar-explore-arrow {
    transform: rotate(90deg);
}

.sidebar-explore-toggle h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #ffffff;
}

.sidebar-explore-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    margin-top: 0;
}

.sidebar-explore-content.expanded {
    grid-template-rows: 1fr;
}

.sidebar-explore-content > div {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sidebar-explore-item {
    display: block;
    padding: 0.625rem 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: #c4b5fd;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
    border-radius: 8px;
    position: relative;
    z-index: 1;
    min-height: 2.5rem;
    box-sizing: border-box;
    line-height: 1.5;
    width: 100%;
}

.sidebar-explore-item:hover {
    color: #ddd6fe;
    background-color: rgba(139, 92, 246, 0.12);
}

/* Pages Section */
.sidebar-pages-section {
    padding: 0.5rem 1rem;
    border-top: 1px solid #1f2937;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
    margin: 0;
}

.sidebar-pages-section:not(.sidebar-forum-section) {
    padding: 0;
    border-top: none;
    gap: 0;
}

.sidebar-pages-section:not(.sidebar-forum-section) .sidebar-page-item {
    border-top: 1px solid #1f2937;
    border-radius: 0;
    padding: 1.25rem 2rem;
}

.sidebar-pages-section:not(.sidebar-forum-section) .sidebar-page-item:hover {
    border-radius: 0;
}

.sidebar-forum-section {
    order: 0;
}

.sidebar-page-item {
    display: block;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    color: #d1d5db;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
    border-radius: 12px;
    position: relative;
    z-index: 1;
    min-height: 3rem;
    box-sizing: border-box;
    line-height: 1.5;
    width: 100%;
}

.sidebar-page-item:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.06);
}

/* Create Post Button */
.sidebar-create-section {
    padding: 1rem;
    border-top: 1px solid #1f2937;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    margin-top: auto;
}

.sidebar-create-btn {
    width: 100%;
    background: linear-gradient(to right, #7c3aed, #a855f7, #ec4899);
    color: #ffffff;
    border: none;
    padding: 0.875rem 1rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
}

.sidebar-create-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.sidebar-create-btn:active {
    transform: translateY(0);
}

.sidebar-create-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.sidebar-create-btn span {
    display: none;
}

@media (min-width: 1024px) {
    .sidebar-create-btn span {
        display: inline;
    }
}

/* Help menu (bottom of sidebar) */
.sidebar-help-section {
    padding: 0 0.5rem 1rem;
    border-top: 1px solid #1f2937;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.sidebar-help-icon {
    width: 1.75rem;
    height: 1.75rem;
    color: #8b5cf6;
    flex-shrink: 0;
}

.sidebar-help-section .sidebar-explore-item.active {
    color: #ffffff;
    background-color: rgba(139, 92, 246, 0.15);
}

/* Sidebar Overlay (Mobile) */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(3px);
    z-index: 80;
    display: none;
    top: 0;
}

.sidebar-overlay.active {
    display: block;
}

@media (min-width: 1024px) {
    .sidebar-overlay {
        display: none !important;
    }
}

/* Sidebar Brand Header (Logo + Hamburger inside sidebar) */
.sidebar-brand-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    gap: 0.75rem;
    flex-shrink: 0;
}

.sidebar-brand-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    flex: 1;
    min-width: 0;
}

.sidebar-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-brand-logo svg {
    width: 2rem;
    height: 2rem;
}

.sidebar-brand-text {
    font-size: 1.375rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.sidebar-brand-text-accent {
    background: linear-gradient(90deg, #a855f7, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.sidebar-brand-toggle {
    background: transparent;
    border: 1px solid #2a2a2a;
    color: #9ca3af;
    border-radius: 9999px;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar-brand-toggle:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.sidebar-brand-toggle svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Hide logo and hamburger in global header (logo lives in sidebar now) */
viralbuzz-header .header-logo,
viralbuzz-header .header-hamburger {
    display: none !important;
}

/* Mobile/tablet needs the header hamburger because the sidebar starts closed. */
@media (max-width: 1023px) {
    viralbuzz-header .header-hamburger {
        display: flex !important;
    }

    viralbuzz-header .header-logo {
        display: flex !important;
    }
}

/* Push the global header right so it doesn't sit under the sidebar */
@media (min-width: 1024px) {
    body.sidebar-open viralbuzz-header,
    viralbuzz-header {
        padding-left: 16rem;
    }
    body.sidebar-closed viralbuzz-header {
        padding-left: 0;
    }
}

/* Page item icons (Privacy, Terms, etc.) */
.sidebar-page-item {
    display: flex !important;
    align-items: center;
    gap: 0.875rem;
}

.sidebar-page-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #a855f7;
    flex-shrink: 0;
}

.sidebar-page-item-text {
    flex: 1;
    line-height: 1.5;
    font-weight: 700;
}

.sidebar-explore-toggle h3 {
    font-weight: 700;
}

.sidebar-page-item.active .sidebar-page-item-text,
.sidebar-page-item.active .sidebar-page-icon,
.sidebar-explore-toggle.active h3,
.sidebar-explore-toggle.active .sidebar-explore-hash-icon,
.sidebar-explore-toggle.active .sidebar-help-icon,
.sidebar-section-toggle.active .sidebar-section-icon {
    color: #c4b5fd;
}

/* Minimized overrides must come after page-row rules so collapsed icons stay centered. */
viralbuzz-sidebar.minimized .sidebar-nested-section,
.viralbuzz-sidebar.minimized .sidebar-nested-section,
viralbuzz-sidebar.minimized .sidebar-explore-section,
.viralbuzz-sidebar.minimized .sidebar-explore-section,
viralbuzz-sidebar.minimized .sidebar-help-section,
.viralbuzz-sidebar.minimized .sidebar-help-section,
viralbuzz-sidebar.minimized .sidebar-pages-section,
.viralbuzz-sidebar.minimized .sidebar-pages-section {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border-top: 1px solid #1f2937 !important;
    gap: 0 !important;
}

viralbuzz-sidebar.minimized .sidebar-home-section,
.viralbuzz-sidebar.minimized .sidebar-home-section {
    border-top: 0 !important;
}

viralbuzz-sidebar.minimized .sidebar-section-toggle,
.viralbuzz-sidebar.minimized .sidebar-section-toggle,
viralbuzz-sidebar.minimized .sidebar-explore-toggle,
.viralbuzz-sidebar.minimized .sidebar-explore-toggle,
viralbuzz-sidebar.minimized .sidebar-page-item,
.viralbuzz-sidebar.minimized .sidebar-page-item,
viralbuzz-sidebar.minimized .sidebar-create-btn,
.viralbuzz-sidebar.minimized .sidebar-create-btn,
viralbuzz-sidebar.minimized .sidebar-pages-section:not(.sidebar-forum-section) .sidebar-page-item,
.viralbuzz-sidebar.minimized .sidebar-pages-section:not(.sidebar-forum-section) .sidebar-page-item {
    width: 100% !important;
    min-width: 100% !important;
    height: 4rem !important;
    min-height: 4rem !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
    border: 0 !important;
}

viralbuzz-sidebar.minimized .sidebar-pages-section:not(.sidebar-forum-section) .sidebar-page-item,
.viralbuzz-sidebar.minimized .sidebar-pages-section:not(.sidebar-forum-section) .sidebar-page-item {
    border-top: 1px solid #1f2937 !important;
}

viralbuzz-sidebar.minimized .sidebar-section-toggle.active,
.viralbuzz-sidebar.minimized .sidebar-explore-toggle.active,
viralbuzz-sidebar.minimized .sidebar-page-item.active,
.viralbuzz-sidebar.minimized .sidebar-section-toggle.active,
.viralbuzz-sidebar.minimized .sidebar-explore-toggle.active,
.viralbuzz-sidebar.minimized .sidebar-page-item.active {
    border-radius: 0.875rem !important;
    width: calc(100% - 1rem) !important;
    min-width: calc(100% - 1rem) !important;
    height: 3rem !important;
    min-height: 3rem !important;
    margin: 0.5rem auto !important;
}

viralbuzz-sidebar.minimized .sidebar-page-icon,
.viralbuzz-sidebar.minimized .sidebar-page-icon,
viralbuzz-sidebar.minimized .sidebar-section-icon,
.viralbuzz-sidebar.minimized .sidebar-section-icon,
viralbuzz-sidebar.minimized .sidebar-explore-hash-icon,
.viralbuzz-sidebar.minimized .sidebar-explore-hash-icon,
viralbuzz-sidebar.minimized .sidebar-help-icon,
.viralbuzz-sidebar.minimized .sidebar-help-icon,
viralbuzz-sidebar.minimized .sidebar-nav-item-icon,
.viralbuzz-sidebar.minimized .sidebar-nav-item-icon {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

viralbuzz-sidebar.minimized .sidebar-section-toggle-content,
.viralbuzz-sidebar.minimized .sidebar-section-toggle-content,
viralbuzz-sidebar.minimized .sidebar-explore-toggle-content,
.viralbuzz-sidebar.minimized .sidebar-explore-toggle-content {
    flex: 0 0 auto;
    justify-content: center !important;
}

.sidebar-link-chevron {
    width: 1rem;
    height: 1rem;
    color: #9ca3af;
    flex-shrink: 0;
}













/* Featured Slider Styles - Full Width Square Tiles */
.featured-slider-section {
    background-color: #0f0f0f;
    padding: 0;
    overflow: hidden;
    width: 100%;
    margin: 0;
    position: relative;
}

.slider-container {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible; /* Allow arrows to be visible outside */
}

.slider-track {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0;
    width: 100%;
    background-color: #0f0f0f;
    box-sizing: border-box;
    position: relative;
}

.slider-track::-webkit-scrollbar {
    display: none;
}

.slider-card {
    flex-shrink: 0;
    cursor: pointer;
    aspect-ratio: 1;
    position: relative;
    overflow: hidden;
    background-color: #0f0f0f;
    /* Width will be calculated dynamically in JS */
}

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

/* Navigation Arrows - Black Circles with White Arrows */
.slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #000000;
    color: #ffffff;
    border: none;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 100;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    padding: 0;
    visibility: visible !important;
}

.slider-nav-btn:hover {
    background-color: #1a1a1a;
}

.slider-nav-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.slider-nav-btn svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: 2.5;
    stroke: #ffffff;
}

.slider-prev {
    left: 0.75rem;
}

.slider-next {
    right: 0.75rem;
    /* Ensure right arrow is always visible and on top */
    visibility: visible !important;
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 100 !important;
}

.slider-nav-btn:disabled,
.slider-nav-btn[style*="pointer-events: none"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.slider-error {
    padding: 2rem;
    text-align: center;
    color: #9ca3af;
}

/* Card widths are calculated dynamically in JavaScript based on sidebar state */





































































/* Featured Row Section */
.featured-row-section {
    background-color: var(--dark-surface);
    padding: 2rem 0;
}

.featured-row-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}

.featured-row-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .featured-row-grid {
        grid-template-columns: 7fr 5fr;
        gap: 1.5rem;
    }
}

/* Large Feature Card */
.featured-large-card {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    overflow: visible;
    cursor: pointer;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-large-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

.featured-card-image {
    position: relative;
    height: 400px;
    overflow: hidden;
    border-radius: 0.5rem 0.5rem 0 0;
}

@media (min-width: 768px) {
    .featured-card-image {
        height: 450px;
    }
}

.featured-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-card-content {
    padding: 1.5rem 2rem;
}

@media (min-width: 768px) {
    .featured-card-content {
        padding: 2rem;
    }
}

.featured-card-title {
    font-size: 1.875rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .featured-card-title {
        font-size: 2.25rem;
    }
}

.featured-card-description {
    font-size: 1.125rem;
    color: var(--text-gray-300);
    margin-bottom: 1.5rem;
}

.featured-card-divider {
    border-top: 1px solid var(--border-gray-700);
    padding-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.featured-card-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.author-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.author-info {
    font-size: 0.875rem;
    color: var(--text-gray-400);
}

.social-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.social-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.social-btn svg {
    width: 1rem;
    height: 1rem;
}

.social-facebook {
    background-color: #1877f2;
    color: white;
}

.social-facebook:hover {
    background-color: #166fe5;
}

.social-twitter {
    background-color: #06b6d4;
    color: white;
}

.social-twitter:hover {
    background-color: #0891b2;
}

.social-pinterest {
    background-color: #e60023;
    color: white;
}

.social-pinterest:hover {
    background-color: #cc001f;
}

.social-tumblr {
    background-color: var(--dark-gray-700);
    color: white;
}

.social-tumblr:hover {
    background-color: var(--dark-gray-600);
}

.social-email {
    background-color: var(--dark-gray-700);
    color: white;
}

.social-email:hover {
    background-color: var(--dark-gray-600);
}

/* Small Cards */
.featured-small-cards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.featured-small-card {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    overflow: visible;
    cursor: pointer;
    position: relative;
    display: flex;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-small-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

.small-card-thumbnail {
    position: relative;
    flex-shrink: 0;
    width: 40%;
    height: 200px;
    overflow: hidden;
    border-radius: 0.5rem 0 0 0.5rem;
}

.small-card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.small-card-content {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.small-card-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.small-card-description {
    font-size: 0.875rem;
    color: var(--text-gray-400);
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.small-card-divider {
    border-top: 1px solid var(--border-gray-700);
    padding-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.small-card-author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.author-avatar-small {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
}

.author-info-small {
    font-size: 0.75rem;
    color: var(--text-gray-400);
}

/* Reaction Icons */
.reaction-icons {
    position: absolute;
    top: -0.5rem;
    left: -0.5rem;
    z-index: 10;
    display: flex;
    gap: 0.25rem;
}

.reaction-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.reaction-like {
    background-color: #ef4444;
}

.reaction-like svg {
    width: 3rem;
    height: 3rem;
    color: white;
}

.reaction-laugh {
    background-color: #facc15;
    font-size: 3rem;
}

/* Trending Badge */
.trending-badge {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    z-index: 10;
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(to right, var(--neon-pink), var(--purple-500), var(--neon-cyan));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.trending-badge svg {
    width: 3rem;
    height: 3rem;
    color: white;
}

/* Category Badge */
.category-badge {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.category-icon {
    font-size: 0.75rem;
}

.category-name {
    font-size: 0.75rem;
    color: white;
    font-weight: 500;
}

.featured-row-error {
    padding: 2rem;
    text-align: center;
    color: var(--text-gray-400);
}





































































/* Content Grid Section */
.content-grid-section {
    background-color: var(--dark-surface);
    padding: 2rem 0;
}

.content-grid-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .content-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .content-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .content-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Content Card */
.content-card {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    overflow: visible;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-card:hover {
    transform: scale(1.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.content-card-image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0.5rem 0.5rem 0 0;
}

.content-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.content-card-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--text-gray-400);
    margin-bottom: 0.5rem;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.stat-item svg {
    width: 1rem;
    height: 1rem;
}

.content-card-tags {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.tag {
    font-size: 0.75rem;
    color: var(--text-gray-600);
}

.content-card-author {
    font-size: 0.75rem;
    color: var(--text-gray-500);
    margin-top: auto;
}

/* Reaction Icons */
.reaction-icons {
    position: absolute;
    top: -0.5rem;
    left: -0.5rem;
    z-index: 10;
    display: flex;
    gap: 0.25rem;
}

.reaction-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.reaction-like {
    background-color: #ef4444;
}

.reaction-like svg {
    width: 3rem;
    height: 3rem;
    color: white;
}

.reaction-laugh {
    background-color: #facc15;
    font-size: 3rem;
}

/* Trending Badge */
.trending-badge {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    z-index: 10;
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(to right, var(--neon-pink), var(--purple-500), var(--neon-cyan));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.trending-badge svg {
    width: 3rem;
    height: 3rem;
    color: white;
}

/* Category Badge */
.category-badge {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.category-icon {
    font-size: 0.75rem;
}

.category-name {
    font-size: 0.75rem;
    color: white;
    font-weight: 500;
}

/* GIF Badge */
.gif-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background-color: rgba(24, 24, 27, 0.9);
    padding: 0.5rem 1rem;
    border-radius: 9999px;
}

.gif-badge span {
    color: white;
    font-weight: bold;
    font-size: 0.875rem;
}

.content-grid-error {
    padding: 2rem;
    text-align: center;
    color: var(--text-gray-400);
}





































































/* Homepage Component Styles - 9GAG Inspired (Dark Theme) */

/* Debug: Ensure body is the scrolling container */
body {
    overflow-y: scroll;
    overflow-x: hidden;
}

/* Make sure parent containers don't interfere with sticky */
.main-content {
    overflow: visible !important;
}

.content-container {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

[class*="wrapper"],
[class*="container"]:not(.homepage-container):not(.homepage-layout) {
    overflow: visible !important;
}

viralbuzz-homepage {
    display: block;
    width: 100%;
    min-height: 100vh;
    overflow: visible;
}

.homepage-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0.75rem;
    box-sizing: border-box;
}

.homepage-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
}

.homepage-layout > aside {
    grid-column: 2;
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
}

.homepage-layout aside {
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    flex-shrink: 0;
    overflow-y: auto !important;
    /* Removed scrollbar-width and scrollbar-color from default to allow auto-hide */
    -ms-overflow-style: none !important; /* IE and Edge */
}

/* Force hide webkit scrollbar - must be separate rule */
.homepage-layout aside::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
    background: transparent !important;
    display: none !important;
}

.homepage-layout aside::-webkit-scrollbar-track {
    width: 0px !important;
    background: transparent !important;
    display: none !important;
}

.homepage-layout aside::-webkit-scrollbar-thumb {
    width: 0px !important;
    background: transparent !important;
    display: none !important;
}

/* Left Column */
.homepage-left-column {
    background-color: var(--dark-card);
    border: 1px solid var(--border-gray-700);
    border-radius: 8px;
    padding: 0;
    min-height: 500px;
    max-width: 100%;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.homepage-posts-container {
    padding: 1rem;
    overflow: visible;
    flex: 1;
}

/* Tabs */
.homepage-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-gray-700);
    background-color: var(--dark-card);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    overflow: hidden;
    flex-shrink: 0;
    width: 100%;
}

.homepage-tab {
    background: none;
    border: none;
    border-radius: 0;
    border-bottom: 2px solid transparent !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0.875rem 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-gray-400);
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease, background-color 0.2s ease;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.homepage-drawer-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(17, 17, 22, 0.92);
    color: var(--text-white);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.65rem 0.9rem;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.homepage-drawer-toggle:hover {
    border-color: rgba(139, 92, 246, 0.6);
    transform: translateY(-1px);
}

.homepage-drawer-toggle svg,
.homepage-drawer-close svg {
    width: 1.1rem;
    height: 1.1rem;
}

.homepage-drawer-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-left: auto;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-gray-300);
    cursor: pointer;
}

.homepage-drawer-overlay {
    display: none;
}

.homepage-tab:hover {
    color: var(--text-white);
    background-color: rgba(255, 255, 255, 0.02);
}

.homepage-tab svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

.homepage-tab.active {
    color: #8b5cf6 !important;
    font-weight: 600 !important;
}

.homepage-tab.active svg {
    color: #8b5cf6 !important;
}

.homepage-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #7c3aed !important;
    z-index: 25;
    display: block !important;
    pointer-events: none;
}

.homepage-mobile-active-tab {
    display: none;
}

/* Post removal animation */
.post-removing {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.homepage-post {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Share Modal Styles */
.share-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.2s ease, backdrop-filter 0.2s ease;
    pointer-events: none;
}

.share-modal-overlay.hidden {
    display: none;
}

.share-modal-overlay.show {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    pointer-events: auto;
}

.share-modal-container {
    background-color: var(--dark-card);
    border: 1px solid var(--border-gray-700);
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    transform: scale(1) translateY(0);
    opacity: 1;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.share-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-gray-700);
}

.share-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-white);
    margin: 0;
}

.share-modal-close {
    background: none;
    border: none;
    color: var(--text-gray-400);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.share-modal-close:hover {
    color: var(--text-white);
}

.share-modal-close svg {
    width: 1.5rem;
    height: 1.5rem;
}

.share-modal-content {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow-y: auto;
}

.share-modal-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.25rem;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 1rem;
    color: var(--text-white) !important;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
    border-radius: 8px;
    opacity: 1;
    transform: translateX(0);
    visibility: visible !important;
}

.share-modal-item:nth-child(1) { animation-delay: 0.05s; }
.share-modal-item:nth-child(2) { animation-delay: 0.1s; }
.share-modal-item:nth-child(3) { animation-delay: 0.15s; }
.share-modal-item:nth-child(4) { animation-delay: 0.2s; }
.share-modal-item:nth-child(5) { animation-delay: 0.25s; }
.share-modal-item:nth-child(6) { animation-delay: 0.3s; }

@keyframes slideInItem {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.share-modal-item:hover {
    background-color: var(--dark-surface);
    transform: translateX(4px);
}

.share-modal-item svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
}

.share-icon-circle {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.share-icon-facebook {
    background-color: #1877f2;
}

.share-icon-pinterest {
    background-color: #bd081c;
}

.share-icon-circle span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    display: block;
}

.share-modal-item > span:not(.share-icon-circle span) {
    flex: 1;
}

.share-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    font-size: inherit;
    cursor: pointer;
}

.share-icon-circle {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.share-icon-facebook {
    background-color: #1877f2;
}

.share-icon-pinterest {
    background-color: #bd081c;
}

.share-icon-circle span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    display: block;
}

.share-dropdown-item > span:not(.share-icon-circle span) {
    flex: 1;
}

/* Toast Notification */
.share-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--dark-card);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.share-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Posts Container */
.homepage-posts-container {
    padding: 1rem;
    overflow: visible;
    flex: 1;
}

/* Post Card */
.homepage-post {
    background-color: var(--dark-surface);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0;
    margin-bottom: 1.5rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
}

.homepage-post:hover {
    border-color: var(--neon-green);
    box-shadow: 0 4px 12px rgba(0, 255, 136, 0.1);
}

/* Post Layout: Vote Sidebar + Main Content */
.post-layout {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
}

/* Vote Sidebar (Left) */
.post-vote-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    width: 40px;
    background-color: rgba(255, 255, 255, 0.03);
    margin-right: 0.75rem;
    padding: 0.5rem 0.25rem;
}

/* Main Content (Right) */
.post-main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Post body row: text left, thumbnail right */
.post-body-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex: 1;
}

.post-text-section {
    flex: 1;
    min-width: 0;
}

/* Thumbnail (right side of card) — fixed consistent height */
.post-thumbnail-wrap {
    flex-shrink: 0;
    width: 120px !important;
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    align-self: flex-start;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    display: block;
    text-decoration: none;
}

.post-thumbnail-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}

.post-thumbnail-wrap:hover img {
    transform: scale(1.03);
}

/* Content Type Ribbon — sits on top of the thumbnail */
.post-content-type-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
    color: #000;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.3rem 0.6rem;
    border-radius: 0 6px 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 5;
    line-height: 1;
}

.ribbon-text {
    color: #000;
    font-weight: 700;
}

@media (max-width: 768px) {
    .post-thumbnail-wrap {
        width: 100px !important;
        height: 100px !important;
        min-height: 100px !important;
        max-height: 100px !important;
    }
}

@media (max-width: 480px) {
    .post-thumbnail-wrap {
        width: 80px !important;
        height: 80px !important;
        min-height: 80px !important;
        max-height: 80px !important;
    }
}

/* Post Header (Category, Time, and Author - All in one line) */
.post-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    padding-right: 0;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.post-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.post-category-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.post-category-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.post-category {
    color: var(--text-white);
    font-weight: 600;
    text-transform: capitalize;
}

.post-time {
    color: var(--text-gray-400);
    font-size: 0.8125rem;
}

.post-by-text {
    color: var(--text-gray-400);
    font-size: 0.8125rem;
}

.post-author-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    text-decoration: none;
    color: var(--text-gray-300);
    transition: color 0.2s ease;
}

.post-author-link:hover {
    color: var(--neon-green);
}

.post-author-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-gray-700);
    flex-shrink: 0;
}

.post-author-avatar-placeholder {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--dark-card);
    border: 1px solid var(--border-gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-gray-400);
}

.post-author-avatar-placeholder svg {
    width: 12px;
    height: 12px;
}

.post-author-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-gray-300);
}

.post-author-link:hover .post-author-name {
    color: var(--neon-green);
}

/* Post Title */
.post-title {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
}

.post-title-link {
    color: var(--text-white);
    text-decoration: none;
    transition: color 0.2s ease;
}

.post-title-link:hover {
    color: var(--neon-green);
}

/* Tags */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.post-tag {
    display: inline-block;
    background-color: var(--dark-card);
    border: 1px solid var(--border-gray-700);
    color: var(--text-gray-300);
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.post-tag:hover {
    background-color: var(--dark-card);
    border-color: var(--neon-green);
    color: var(--neon-green);
}

.post-tag-more {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: var(--text-gray-400);
    font-weight: 600;
    border-radius: 9999px;
}

/* Post Content */
.post-content-image,
.post-content-video {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    border-radius: 6px;
    overflow: hidden;
}

.post-content-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 600px;
    display: block;
    object-fit: contain;
    object-position: center;
}

.post-content-video video {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 600px;
    display: block;
    object-fit: contain;
}

.post-content-text {
    margin-bottom: 1rem;
    color: var(--text-gray-300);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Engagement Metrics */
.post-engagement {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-gray-700);
}

.engagement-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.engagement-share-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.engagement-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-gray-400);
    font-size: 0.875rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.engagement-item:hover {
    color: var(--text-white);
}

/* Social Share Buttons (Facebook, Twitter, Pinterest) - Large and Prominent */
.engagement-social-share {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.engagement-share-row .engagement-share {
    margin-left: auto;
}

.social-share-button {
    border-radius: 25px;
    padding: 0.5rem 0.75rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
}

.social-share-button:hover {
    opacity: 0.9;
}

.social-share-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.social-share-icon svg {
    width: 100%;
    height: 100%;
    color: white;
    fill: white;
}

.social-share-text {
    white-space: nowrap;
    font-weight: 500;
    color: white;
}

/* Facebook Button */
.social-share-facebook {
    background: #2d5f9a;
    border: 1px solid #2d5f9a;
    color: white;
}

.social-share-facebook:hover {
    background: #2d5f9a;
    border-color: #2d5f9a;
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.4);
}

/* Twitter Button - Black with Gray Border */
.social-share-twitter {
    background: #000000;
    border: 1px solid rgba(156, 163, 175, 0.5);
    color: white;
}

.social-share-twitter:hover {
    background: #1a1a1a;
    border-color: rgba(156, 163, 175, 0.7);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Pinterest Button */
.social-share-pinterest {
    background: #BD081C;
    border: 1px solid #BD081C;
    color: white;
}

.social-share-pinterest:hover {
    background: #A5071A;
    border-color: #A5071A;
    box-shadow: 0 4px 12px rgba(189, 8, 28, 0.4);
}

/* Save button spacing */
.engagement-save {
    margin-left: -0.5rem;
}

/* Vote (Like/Dislike) Buttons - Sidebar */
.vote-button {
    background: none;
    border: none;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-gray-400);
    transition: color 0.2s ease, transform 0.1s ease, background-color 0.2s ease;
    border-radius: 4px;
    width: 32px;
    height: 32px;
}

.vote-button:hover {
    color: var(--text-white);
    background-color: var(--dark-card);
    transform: scale(1.1);
}

.vote-button.active {
    color: var(--neon-green);
}

.vote-button.active:hover {
    color: var(--neon-green);
    background-color: rgba(0, 255, 136, 0.1);
    transform: scale(1.15);
}

.vote-icon {
    width: 20px;
    height: 20px;
}

.vote-count {
    min-width: 2rem;
    text-align: center;
    color: var(--text-white);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.25rem 0;
}

.engagement-icon {
    width: 18px;
    height: 18px;
}

.engagement-count {
    font-weight: 500;
}

.engagement-save {
    margin-left: -0.5rem;
}

.engagement-share {
    margin-left: auto;
}

/* Save Button Styles */
.save-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    font-size: inherit;
    cursor: pointer;
    transition: color 0.2s ease;
}

.save-button:hover {
    color: var(--text-white);
}

.save-button.saved {
    color: var(--neon-green);
}

.save-button.saved:hover {
    color: var(--neon-green);
    opacity: 0.8;
}

/* Right Column - Sticky */
.homepage-right-column {
    position: sticky;
    top: 0; /* Test with 0 first, then change back to 80px after confirming it works */
    align-self: flex-start;
    height: fit-content;
    max-height: 100vh; /* Full viewport for testing */
    overflow: visible;
    z-index: 1;
    background-color: var(--dark-card);
    color: var(--text-white);
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Thin auto-hide scrollbar for sidebar - Completely hidden by default */
/* Hide scrollbar by default - Firefox */
.homepage-sidebar {
    /* Removed scrollbar-width from default to allow auto-hide */
    -ms-overflow-style: none !important;
}

/* Hide scrollbar by default - Webkit (Chrome, Safari, Edge) */
.homepage-sidebar::-webkit-scrollbar {
    width: 0px !important;
    background: transparent !important;
}

/* Show scrollbar on hover - Firefox */
.homepage-sidebar:hover {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(75, 85, 99, 0.6) transparent !important;
}

.homepage-layout aside:hover {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(75, 85, 99, 0.6) transparent !important;
}

/* Show scrollbar on hover - Webkit */
.homepage-sidebar:hover::-webkit-scrollbar {
    width: 6px !important;
    background: transparent !important;
}

.homepage-layout aside:hover::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
    background: transparent !important;
    display: block !important;
}

.homepage-sidebar:hover::-webkit-scrollbar-track,
.homepage-layout aside:hover::-webkit-scrollbar-track {
    background: transparent !important;
    display: block !important;
}

.homepage-sidebar:hover::-webkit-scrollbar-thumb,
.homepage-layout aside:hover::-webkit-scrollbar-thumb {
    background-color: rgba(75, 85, 99, 0.6) !important;
    border-radius: 3px !important;
    transition: background-color 0.3s ease !important;
    display: block !important;
}

.homepage-sidebar:hover::-webkit-scrollbar-thumb:hover,
.homepage-layout aside:hover::-webkit-scrollbar-thumb:hover {
    background-color: rgba(75, 85, 99, 0.8) !important;
}

.homepage-sidebar {
    background-color: var(--dark-card);
    border: 1px solid var(--border-gray-700);
    border-radius: 8px;
    padding: 0;
    min-height: 200px;
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

/* AdSense Banner Placeholder */
.ad-banner-placeholder {
    width: 100%;
    min-height: 600px;
    max-height: 600px;
    background: linear-gradient(135deg, rgba(33, 33, 43, 0.8) 0%, rgba(18, 18, 18, 0.9) 100%);
    border: 2px dashed var(--border-gray-700);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.ad-banner-placeholder:hover {
    border-color: var(--neon-green);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.1);
}

.ad-banner-content {
    text-align: center;
    padding: 2rem;
    z-index: 1;
}

.ad-banner-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-gray-500);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.ad-banner-size {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-gray-400);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.ad-banner-text {
    font-size: 0.875rem;
    color: var(--text-gray-500);
    font-weight: 500;
}

/* Decorative pattern for ad placeholder */
.ad-banner-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(156, 163, 175, 0.03) 10px,
            rgba(156, 163, 175, 0.03) 20px
        );
    pointer-events: none;
}

/* Loading */
.homepage-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
}

.homepage-loading.hidden {
    display: none;
}

.homepage-loading .spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--border-gray-700);
    border-top-color: var(--neon-green);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.homepage-loading p {
    color: var(--text-gray-400);
    font-size: 0.875rem;
}

/* Empty State */
.homepage-empty {
    text-align: center;
    padding: 3rem;
    color: var(--text-gray-400);
    font-size: 0.95rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.homepage-empty p {
    margin: 0;
}

.homepage-error {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.homepage-error.show {
    opacity: 1;
    transform: translateY(0);
}

/* Become an Author CTA */
.homepage-author-cta {
    background-color: var(--dark-surface);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    padding: 1rem;
    position: relative;
    margin-bottom: 1.5rem;
}

.homepage-cta-icon {
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.homepage-cta-icon-circle {
    width: 3rem;
    height: 3rem;
    background-color: #facc15;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.homepage-cta-icon-circle svg {
    width: 1.5rem;
    height: 1.5rem;
    color: black;
}

.homepage-cta-content {
    margin-top: 1.5rem;
    text-align: center;
}

.homepage-cta-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.homepage-cta-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    margin-bottom: 0.5rem;
}

.homepage-cta-subtitle {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.5rem;
}

.homepage-cta-button {
    width: 100%;
    background-color: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.homepage-cta-button:hover {
    background-color: rgba(24, 24, 24, 0.8);
    border-color: rgba(255, 255, 255, 0.3);
}

.homepage-cta-button svg {
    width: 1.25rem;
    height: 1.25rem;
}

.homepage-retry-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--neon-green);
    color: var(--dark-surface);
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.homepage-retry-btn:hover {
    background-color: var(--neon-green);
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 255, 136, 0.3);
}

.homepage-retry-btn:active {
    transform: translateY(0);
}

.homepage-retry-btn svg {
    width: 1rem;
    height: 1rem;
}

/* Responsive Design */
@media (max-width: 1180px) {
    .homepage-container {
        padding: 0.75rem;
    }

    .homepage-layout {
        grid-template-columns: 1fr;
        max-width: 100%;
        gap: 0;
        margin: 0;
    }

    .homepage-left-column {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .homepage-drawer-toggle {
        display: flex;
        position: fixed;
        right: 1rem;
        bottom: 1rem;
        z-index: 72;
    }

    .homepage-layout > aside.homepage-right-column,
    .homepage-right-column {
        display: flex !important;
        position: fixed !important;
        top: 60px;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(380px, 88vw) !important;
        min-width: 0 !important;
        max-width: min(380px, 88vw) !important;
        height: calc(100dvh - 60px);
        max-height: calc(100dvh - 60px);
        padding: 4rem 1rem 1rem;
        border-radius: 0;
        border-top: 0;
        border-right: 0;
        border-bottom: 0;
        overflow-y: auto !important;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        z-index: 86;
    }

    .homepage-right-column.open {
        transform: translateX(0);
    }

    .homepage-drawer-close {
        position: absolute;
        top: 0.85rem;
        right: 1rem;
        display: flex;
    }

    .homepage-drawer-overlay {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        display: none;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(2px);
        z-index: 85;
    }

    .homepage-drawer-overlay.active {
        display: block;
    }

    body.homepage-drawer-open {
        overflow: hidden;
    }

}

/* Large screens - constrain content width */
@media (min-width: 1400px) {
    .homepage-layout {
        max-width: 1200px;
    }
}

/* Medium screens */
@media (min-width: 1181px) and (max-width: 1399px) {
    .homepage-layout {
        max-width: 1000px;
    }
}

/* Tablet screens */
@media (min-width: 768px) and (max-width: 1023px) {
    .homepage-layout {
        max-width: 100%;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .homepage-left-column {
        width: 100%;
        min-width: 0;
    }
    
    .post-content-image img,
    .post-content-video video {
        max-height: 500px;
    }
}

/* Mobile: Remove sticky and scrollable behavior */
@media (max-width: 1023px) {
    .homepage-right-column {
        max-height: 100vh;
    }
}

@media (max-width: 768px) {
    .homepage-container {
        padding: 0.5rem;
    }

    .homepage-layout {
        grid-template-columns: 1fr;
        max-width: 100%;
        gap: 1rem;
    }

    .homepage-left-column {
        border-left: none;
        border-right: none;
        border-radius: 0;
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    .homepage-posts-container {
        padding: 0.75rem 0.5rem;
    }
    
    .ad-banner-placeholder {
        min-height: 400px;
    }
    
    .ad-banner-size {
        font-size: 1.25rem;
    }
    
    .post-content-image img,
    .post-content-video video {
        max-height: 400px;
    }
    
    .homepage-tabs {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(2.65rem, 1fr));
        padding: 0;
        overflow: visible;
        border-bottom-width: 1px;
    }
    
    .homepage-tabs::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    
    .homepage-tab {
        min-height: 3.35rem;
        padding: 0;
        font-size: 0.875rem;
        white-space: nowrap;
        gap: 0;
    }

    .homepage-tab span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .homepage-tab svg {
        width: 1.15rem;
        height: 1.15rem;
    }

    .homepage-tab.active {
        color: #ffffff !important;
        background: linear-gradient(135deg, rgba(124, 58, 237, 0.85), rgba(168, 85, 247, 0.85));
    }

    .homepage-tab.active svg {
        color: #ffffff !important;
        stroke: #ffffff !important;
        fill: none;
    }

    .homepage-tab.active svg[fill="currentColor"] {
        fill: #ffffff !important;
        stroke: none !important;
    }

    .homepage-mobile-active-tab {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.55rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        color: var(--text-white);
        font-size: 0.85rem;
        font-weight: 800;
        background: rgba(255, 255, 255, 0.025);
    }

    .homepage-post {
        padding: 0;
    }

    .post-layout {
        padding: 1rem;
        gap: 0.75rem;
    }

    .post-vote-sidebar {
        width: 36px;
    }

    .vote-button {
        width: 28px;
        height: 28px;
        padding: 0.375rem;
    }

    .vote-icon {
        width: 18px;
        height: 18px;
    }

    .vote-count {
        font-size: 0.8125rem;
    }

    .post-header {
        padding-right: 3.5rem; /* Less space for ribbon on mobile */
    }

    .post-content-type-ribbon {
        font-size: 0.625rem;
        padding: 0.25rem 0.5rem;
    }

    .post-title {
        font-size: 1.125rem;
    }

    .post-author-avatar,
    .post-author-avatar-placeholder {
        width: 20px;
        height: 20px;
    }

    .post-author-name {
        font-size: 0.8125rem;
    }

    .post-tags {
        gap: 0.375rem;
    }

    .post-tag {
        font-size: 0.6875rem;
        padding: 0.22rem 0.625rem;
        border-radius: 9999px;
    }

    .post-engagement {
        gap: 1rem;
    }

    .engagement-save,
    .engagement-share {
        margin-left: 0;
    }
}

@media (max-width: 520px) {
    .post-layout {
        padding: 0.875rem;
        gap: 0.625rem;
    }

    .post-main-content {
        gap: 0.75rem;
    }

    .post-vote-sidebar {
        width: 30px;
    }

    .post-thumbnail-wrap {
        width: 72px !important;
        height: 72px !important;
        min-height: 72px !important;
        border-radius: 6px;
    }

    .post-title {
        font-size: 1rem;
        line-height: 1.35;
    }

    .post-meta {
        gap: 0.35rem;
        flex-wrap: wrap;
    }

    .post-engagement {
        gap: 0.75rem;
        flex-wrap: wrap;
    }
}

@media (max-width: 380px) {
    .post-layout {
        padding: 0.75rem 0.625rem;
    }

    .post-thumbnail-wrap {
        width: 64px !important;
        height: 64px !important;
        min-height: 64px !important;
    }

    .homepage-tab {
        padding: 0.7rem 0.85rem;
    }
}

/* Final phone layout: do not squeeze text beside thumbnail. */
@media (max-width: 640px) {
    viralbuzz-homepage {
        overflow-x: hidden;
    }

    .homepage-container {
        padding: 0;
    }

    .homepage-layout {
        display: block;
        max-width: 100%;
        width: 100%;
    }

    .homepage-left-column {
        width: 100%;
        min-width: 0;
        margin: 0;
        border-left: 0;
        border-right: 0;
    }

    .homepage-posts-container {
        padding: 0.65rem;
    }

    .post-layout {
        display: grid;
        grid-template-columns: 2rem minmax(0, 1fr);
        gap: 0.65rem;
        padding: 0.85rem;
    }

    .post-vote-sidebar {
        width: 2rem;
        margin-right: 0;
        grid-row: 1;
    }

    .post-main-content {
        min-width: 0;
        width: 100%;
    }

    .post-body-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }

    .post-thumbnail-wrap {
        order: -1;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 16 / 9;
    }

    .post-title {
        font-size: 1.1rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .post-header {
        padding-right: 0;
        gap: 0.4rem;
    }

    .post-header-left,
    .post-category-wrapper,
    .post-author-link {
        min-width: 0;
    }

    .post-author-name,
    .post-category {
        max-width: 10rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .post-engagement {
        gap: 0.85rem;
        flex-wrap: wrap;
    }
}

@media (max-width: 430px) {
    .homepage-posts-container {
        padding: 0.5rem;
    }

    .post-layout {
        grid-template-columns: 1.75rem minmax(0, 1fr);
        padding: 0.7rem;
        gap: 0.55rem;
    }

    .post-vote-sidebar {
        width: 1.75rem;
    }

    .post-title {
        font-size: 1rem;
    }

    .post-author-name,
    .post-category {
        max-width: 7rem;
    }
}

/* Final drawer override: keep the panel above the overlay on tablet/mobile. */
@media (max-width: 1180px) {
    viralbuzz-homepage .homepage-drawer-overlay {
        z-index: 1000 !important;
    }

    viralbuzz-homepage .homepage-right-column {
        top: 60px !important;
        height: calc(100dvh - 60px) !important;
        max-height: calc(100dvh - 60px) !important;
        visibility: hidden;
        pointer-events: none;
        z-index: 1002 !important;
        transform: translateX(100%) !important;
    }

    viralbuzz-homepage .homepage-right-column.open,
    body.homepage-drawer-open viralbuzz-homepage .homepage-right-column {
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(0) !important;
    }

    viralbuzz-homepage .homepage-drawer-toggle {
        z-index: 1003 !important;
    }
}

/* Hashtag Bar Component */
viralbuzz-hashtag-bar {
    position: sticky;
    top: 60px; /* Below fixed header (header is 60px tall) */
    z-index: 40; /* Below header (z-index: 50) but above content */
    display: block;
    width: 100%;
    background-color: var(--dark-surface, #121212);
    margin-top: 0;
}

/* Hashtag Bar Section */
.hashtag-bar-section {
    background-color: var(--dark-surface, #121212);
    border-bottom: 1px solid var(--border-gray-700, #1f2937);
    overflow: hidden;
    width: 100%;
    position: relative;
    z-index: inherit;
    display: flex;
    align-items: center;
}

.hashtag-bar-scroll {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}

.hashtag-bar-scroll::-webkit-scrollbar {
    display: none;
}

.hashtag-bar-container {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 3rem;
    white-space: nowrap;
    min-width: max-content;
}

.hashtag-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(18, 18, 18, 0.96);
    color: var(--text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.45);
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.hashtag-scroll-btn:hover {
    background: var(--dark-card);
}

.hashtag-scroll-btn.hidden {
    opacity: 0;
    pointer-events: none;
}

.hashtag-scroll-btn:disabled {
    opacity: 0.28;
    pointer-events: none;
}

.hashtag-scroll-btn svg {
    width: 1rem;
    height: 1rem;
}

.hashtag-scroll-btn-left {
    left: 0.5rem;
}

.hashtag-scroll-btn-right {
    right: 0.5rem;
}

.hashtag-bar-section::before,
.hashtag-bar-section::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3rem;
    pointer-events: none;
    z-index: 1;
}

.hashtag-bar-section::before {
    left: 0;
    background: linear-gradient(90deg, var(--dark-surface, #121212), transparent);
}

.hashtag-bar-section::after {
    right: 0;
    background: linear-gradient(270deg, var(--dark-surface, #121212), transparent);
}

.hashtag-item {
    display: inline-block;
    padding: 0.375rem 1rem;
    background-color: var(--dark-card);
    border-radius: 9999px;
    font-size: 0.875rem;
    color: var(--text-white);
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
    cursor: pointer;
}

.hashtag-item:hover {
    background-color: var(--gray-700);
    transform: translateY(-1px);
}

.hashtag-item:active {
    transform: translateY(0);
}

@media (max-width: 767px) {
    viralbuzz-hashtag-bar {
        top: 56px;
    }

    .hashtag-bar-container {
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
        padding-left: 2.75rem;
        padding-right: 2.75rem;
    }

    .hashtag-scroll-btn {
        width: 2rem;
        height: 2rem;
    }
}




















/* Post Type Modal */
.post-type-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.post-type-modal.hidden {
    display: none;
}

.post-type-modal-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.post-type-modal-content {
    position: relative;
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    width: 100%;
    max-width: 56rem;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Modal Header */
.post-type-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-gray-700);
    background-color: var(--dark-surface);
}

.post-type-modal-header-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-white);
}

.post-type-modal-close {
    color: var(--text-gray-400);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.post-type-modal-close:hover {
    color: var(--text-white);
}

.post-type-modal-close svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Modal Body */
.post-type-modal-body {
    overflow-y: auto;
    padding: 1.5rem;
    /* Auto-hide scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

.post-type-modal-body::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

.post-type-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.post-type-modal-body::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

.post-type-modal-body:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
}

/* Post Type Options Grid */
.post-type-options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .post-type-options-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .post-type-options-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Post Type Option Card */
.post-type-option {
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.post-type-option:hover {
    background-color: var(--gray-800);
    border-color: var(--purple-500);
}

.post-type-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-type-icon svg {
    width: 3rem;
    height: 3rem;
    color: var(--purple-500);
}

.post-type-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-white);
    text-align: center;
}

@media (max-width: 640px) {
    .post-type-modal {
        align-items: flex-end;
        padding: 0;
    }

    .post-type-modal-overlay {
        background-color: rgba(0, 0, 0, 0.78);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        opacity: 0;
        transition: opacity 0.22s ease;
    }

    .post-type-modal-content {
        width: 100%;
        max-width: none;
        max-height: min(82dvh, 42rem);
        border-radius: 1.25rem 1.25rem 0 0;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 0;
        transform: translateY(110%);
        transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
    }

    .post-type-modal.is-open .post-type-modal-overlay {
        opacity: 1;
    }

    .post-type-modal.is-open .post-type-modal-content {
        transform: translateY(0);
    }

    .post-type-modal-header {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 1rem 1rem 0.85rem;
        background: rgba(17, 17, 20, 0.98);
    }

    .post-type-modal-header-title {
        font-size: 1.15rem;
        line-height: 1.2;
    }

    .post-type-modal-close {
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
    }

    .post-type-modal-close svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .post-type-modal-body {
        padding: 0.85rem 1rem calc(1rem + env(safe-area-inset-bottom));
    }

    .post-type-options-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .post-type-option {
        min-height: 5.75rem;
        padding: 0.75rem 0.55rem;
        gap: 0.45rem;
        border-radius: 0.85rem;
        background: rgba(15, 15, 15, 0.92);
    }

    .post-type-icon svg {
        width: 2.15rem;
        height: 2.15rem;
    }

    .post-type-title {
        font-size: 0.8rem;
        line-height: 1.2;
    }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
    .post-type-modal-overlay,
    .post-type-modal-content {
        transition: none;
    }
}

@media (max-width: 360px) {
    .post-type-modal-body {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .post-type-options-grid {
        gap: 0.5rem;
    }

    .post-type-option {
        min-height: 5.25rem;
        padding: 0.65rem 0.45rem;
    }
}





































































/**
 * Shared styles for all create/edit forms (personality quiz, trivia quiz, story, list, polls, etc.)
 * Use classes: quiz-layout, quiz-form-column, quiz-actions-sidebar for consistent 320px sidebar.
 */

/* Two Column Layout */
.quiz-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 1rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .quiz-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 1.5rem;
        padding: 2rem 1.5rem;
        max-width: 1400px;
        margin: 0 auto;
    }
    .quiz-form-column {
        overflow-y: visible;
    }
}

.quiz-form-column {
    min-width: 0;
    padding: 0;
    width: 100%;
}

/* Right Sidebar */
.quiz-actions-sidebar {
    display: none;
}

@media (min-width: 1024px) {
    .quiz-actions-sidebar {
        display: block;
        align-self: start;
        width: 320px;
        min-width: 320px;
        position: sticky;
        top: 20px;
        height: fit-content;
        max-height: calc(100vh - 100px);
        background-color: var(--dark-card);
        border-radius: 0.5rem;
        border: 1px solid var(--border-gray-700);
    }
}

.actions-sticky {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

/* Post Settings Accordion */
.post-settings-accordion {
    margin-bottom: 1rem;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.2);
}

.post-settings-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.post-settings-accordion-header:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.post-settings-accordion-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-white);
    font-family: var(--font-family);
}

.post-settings-accordion-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-gray-400);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.post-settings-accordion-content {
    max-height: 0;
    overflow: hidden;
    overflow-y: auto;
    transition: max-height 0.35s ease-out;
}

.post-settings-accordion-content.expanded {
    max-height: min(70vh, 600px);
    transition: max-height 0.4s ease-in;
}

.post-settings-accordion-content .sidebar-form-field {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
}

.post-settings-accordion-content .sidebar-form-field:first-child {
    padding-top: 1rem;
}

.quiz-actions-sidebar .form-select,
.quiz-actions-sidebar .datetime-input {
    font-size: 0.875rem;
}

.quiz-actions-sidebar .datetime-input {
    padding-right: 0.25rem;
}

.sidebar-form-field {
    margin-bottom: 1.5rem;
}

.sidebar-form-field:last-child {
    margin-bottom: 0;
}

.reaction-group-container {
    margin-top: 0.5rem;
    padding: 1rem;
    background-color: var(--dark-surface);
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-600);
}

.quiz-actions-sidebar .form-select,
.quiz-actions-sidebar .form-input.datetime-input {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    font-family: var(--font-family);
}

.quiz-actions-sidebar .form-select:focus,
.quiz-actions-sidebar .datetime-input:focus {
    outline: none;
    border-color: var(--neon-green);
}

.thumbnail-image-preview {
    position: relative;
    width: 100%;
    height: 150px;
    background: #000;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px dashed var(--border-gray-600);
    transition: border-color 0.2s ease;
}

.thumbnail-image-preview:hover {
    border-color: var(--neon-green);
}

.thumbnail-image-preview img,
.thumbnail-image-preview .preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Switch */
.switch-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-gray-600);
    transition: 0.3s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.switch input:checked + .slider {
    background-color: var(--neon-green);
}

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

.switch-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-gray-300);
    cursor: pointer;
    font-family: var(--font-family);
    user-select: none;
    flex: 1;
}

.form-hint {
    font-size: 0.75rem;
    color: var(--text-gray-500);
    margin-top: 0.35rem;
    display: block;
}

/* Action buttons */
.actions-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    font-family: var(--font-family);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.action-btn-primary {
    background: linear-gradient(to right, var(--neon-pink), var(--purple-500), var(--neon-cyan));
    color: var(--text-white);
}

.action-btn-primary:hover {
    opacity: 0.9;
}

.action-btn-secondary {
    background-color: var(--dark-surface);
    color: var(--text-white);
    border: 1px solid var(--border-gray-700);
}

.action-btn-secondary:hover {
    background-color: var(--gray-800);
    border-color: var(--text-gray-600);
}

.action-btn-link {
    background: transparent;
    color: var(--text-gray-300);
    border: 1px solid var(--border-gray-700);
}

.action-btn-link:hover {
    color: var(--text-white);
    border-color: var(--text-gray-600);
}

.action-btn-danger {
    background-color: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.action-btn-danger:hover {
    background-color: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
    color: #fca5a5;
}

/* Mobile actions bar */
.mobile-actions-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--dark-card);
    border-top: 1px solid var(--border-gray-700);
    padding: 1rem;
    z-index: 40;
    display: flex;
    gap: 0.75rem;
}

@media (min-width: 1024px) {
    .mobile-actions-bar {
        display: none;
    }
}

.mobile-actions-bar .action-btn {
    flex: 1;
}

.mobile-actions-bar .action-btn-primary {
    flex: 2;
}

@media (max-width: 1023px) {
    .quiz-form-column {
        padding-bottom: 100px;
    }
}

/* Categories & Tags (main column) */
.form-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.form-field-header .form-label {
    margin-bottom: 0;
}

.char-counter {
    font-size: 0.75rem;
    color: var(--text-gray-500);
}

.char-counter.at-limit {
    color: var(--error-red, #ef4444);
    font-weight: 600;
}

.form-select-multiple {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.5rem;
    color: var(--text-white);
    font-size: 1rem;
    min-height: 120px;
    font-family: var(--font-family);
}

.form-select-multiple:focus {
    outline: none;
    border-color: var(--neon-green);
}

.form-select-multiple option:checked {
    background: linear-gradient(90deg, var(--neon-green) 0%, rgba(0, 255, 136, 0.2) 100%);
    color: #0a0a0a;
}

.invalid-feedback {
    font-size: 0.75rem;
    color: #ef4444;
    margin-top: 0.25rem;
}

.tags-input-container {
    width: 100%;
}

.tags-input {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    font-size: 1rem;
    font-family: var(--font-family);
}

.tags-input:focus {
    outline: none;
    border-color: var(--neon-green);
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    min-height: 2rem;
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 1.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    color: var(--text-white);
    font-family: var(--font-family);
}

.tag-remove {
    background: none;
    border: none;
    color: var(--text-gray-400);
    cursor: pointer;
    padding: 0;
    display: inline-flex;
}

.tag-remove:hover {
    color: var(--text-white);
}

/* Post slug input with inline "Generate slug" button */
.slug-input-group {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}

.slug-input-group .slug-input-with-btn {
    flex: 1;
    padding-right: 7.5rem;
    min-width: 0;
}

.slug-input-group .btn-generate-slug {
    position: absolute;
    right: 0.375rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--neon-green, #00ff88);
    background-color: rgba(0, 255, 136, 0.12);
    border: 1px solid rgba(0, 255, 136, 0.35);
    border-radius: 0.375rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.slug-input-group .btn-generate-slug:hover {
    background-color: rgba(0, 255, 136, 0.2);
    border-color: var(--neon-green, #00ff88);
    color: var(--text-white, #fff);
}
/* Create Personality Quiz Component Styles */

/* Skeleton loader when loading edit data */
viralbuzz-create-personality-quiz .quiz-form-skeleton.hidden {
    display: none !important;
}

viralbuzz-create-personality-quiz .quiz-form-skeleton {
    display: block;
    padding: 2rem 1rem;
    min-height: 400px;
}

viralbuzz-create-personality-quiz .quiz-form-content-loading {
    position: absolute !important;
    visibility: hidden !important;
    pointer-events: none;
    width: 100%;
    left: 0;
    top: 0;
}

viralbuzz-create-personality-quiz .quiz-skeleton-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    viralbuzz-create-personality-quiz .quiz-skeleton-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

viralbuzz-create-personality-quiz .quiz-skeleton-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@keyframes quiz-skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

viralbuzz-create-personality-quiz .quiz-form-skeleton .skeleton-base {
    background: linear-gradient(
        90deg,
        #1a1a1a 0%,
        #2a2a2a 50%,
        #1a1a1a 100%
    );
    background-size: 200% 100%;
    animation: quiz-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
}

viralbuzz-create-personality-quiz .quiz-skeleton-title {
    height: 32px;
    width: 60%;
    max-width: 300px;
}

viralbuzz-create-personality-quiz .quiz-skeleton-field {
    height: 44px;
    width: 100%;
}

viralbuzz-create-personality-quiz .quiz-skeleton-banner {
    height: 250px;
    width: 100%;
    border-radius: 8px;
}

@media (min-width: 768px) {
    viralbuzz-create-personality-quiz .quiz-skeleton-banner {
        height: 400px;
    }
}

viralbuzz-create-personality-quiz .quiz-skeleton-section-title {
    height: 28px;
    width: 40%;
    margin-top: 0.5rem;
}

viralbuzz-create-personality-quiz .quiz-skeleton-question {
    height: 120px;
    width: 100%;
    border-radius: 8px;
}

viralbuzz-create-personality-quiz .quiz-skeleton-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

viralbuzz-create-personality-quiz .quiz-skeleton-sidebar-item {
    height: 24px;
    width: 100%;
}

viralbuzz-create-personality-quiz .quiz-skeleton-btn {
    height: 44px;
    width: 100%;
    border-radius: 6px;
}

viralbuzz-create-personality-quiz {
    display: block;
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px; /* Account for fixed header */
    background-color: var(--dark-bg);
}

/* Content container for quiz - ensure proper scrolling */
viralbuzz-create-personality-quiz .content-container {
    height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    /* Auto-hide scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

viralbuzz-create-personality-quiz .content-container::-webkit-scrollbar {
    width: 6px;
}

viralbuzz-create-personality-quiz .content-container::-webkit-scrollbar-track {
    background: transparent;
}

viralbuzz-create-personality-quiz .content-container::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

viralbuzz-create-personality-quiz .content-container:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
}

/* Two Column Layout */
.quiz-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 1rem;
    align-items: start; /* Align items to top */
}

/* Ensure main content scrolls, sidebar stays fixed */
@media (min-width: 1024px) {
    .quiz-form-column {
        overflow-y: visible; /* Allow natural scrolling */
    }
}

@media (min-width: 1024px) {
    .quiz-layout {
        /* Right sidebar 320px; left column takes the rest (reduced by sidebar + gap) */
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 1.5rem; /* Reduced gap between columns */
        padding: 2rem 1.5rem;
        max-width: 1400px; /* Constrain overall layout width - reduced from 1600px */
        margin: 0 auto; /* Center the layout */
    }
    
    /* Adjust when sidebar is open */
    body.sidebar-open .quiz-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
    
    /* Adjust when sidebar is closed */
    body.sidebar-closed .quiz-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

/* Quiz Form Column */
.quiz-form-column {
    min-width: 0;
    padding: 0;
    width: 100%; /* Take full width of grid column */
}

@media (min-width: 1024px) {
    .quiz-form-column {
        /* Form takes full width of its grid column */
        max-width: none; /* Remove max-width constraint, let grid handle it */
    }
}

/* Page Header - Now inside form section */
.page-header {
    margin-bottom: 1.5rem;
    padding: 0;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-gray-700);
}

.page-header-with-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-header-with-status .page-title {
    margin-bottom: 0;
}

/* Status pill (Draft, Published, Scheduled, Unpublished) */
.quiz-status-pill {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: capitalize;
    flex-shrink: 0;
    font-family: var(--font-family);
}

.quiz-status-pill-draft {
    background-color: rgba(156, 163, 175, 0.25);
    color: var(--text-gray-300);
    border: 1px solid var(--border-gray-600);
}

.quiz-status-pill-published {
    background-color: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.quiz-status-pill-scheduled {
    background-color: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.4);
}

/* Remove top margin from form when title is inside */
.quiz-form .page-header:first-child {
    margin-top: 0;
}

.page-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

@media (min-width: 768px) {
    .page-title {
        font-size: 2.5rem;
    }
}

.page-subtitle {
    font-size: 1rem;
    color: var(--text-gray-400);
    font-family: var(--font-family);
}

/* Quiz Form */
.quiz-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0;
}

/* Form Section */
.form-section {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
}

@media (min-width: 768px) {
    .form-section {
        padding: 2rem;
    }
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.section-header .section-title {
    margin: 0;
    line-height: 1.25;
}

.gallery-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

.gallery-header-actions > .btn-preview-gallery,
.gallery-header-actions > .btn-add-question {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.375rem;
    padding: 0.4375rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    box-sizing: border-box;
    font-family: var(--font-family);
    cursor: pointer;
}

.gallery-header-actions > .btn-add-question {
    border: 1px solid transparent;
    padding: 0.4375rem 0.875rem;
}

.gallery-header-actions > .btn-add-question svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

.btn-preview-gallery {
    border: 1px solid var(--border-gray-600);
    background: transparent;
    color: var(--text-gray-300);
    border-radius: 0.5rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-family);
}

.btn-preview-gallery:hover {
    color: var(--text-white);
    border-color: var(--border-gray-500);
}

.section-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-white);
    font-family: var(--font-family);
}

/* Form Fields */
.form-field {
    margin-bottom: 1.5rem;
}

.form-field:last-child {
    margin-bottom: 0;
}

.form-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.form-field-header .form-label {
    margin-bottom: 0;
}

.form-field .char-counter {
    font-size: 0.75rem;
    color: var(--text-gray-500);
}

.form-field .char-counter.at-limit {
    color: #ef4444;
}

.form-field-tight {
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-300);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.label-hint {
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--text-gray-500);
    margin-left: 0.5rem;
    font-family: var(--font-family);
}

.required {
    color: #ef4444;
}

.form-input,
.form-textarea {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    font-size: 1rem;
    font-family: var(--font-family);
    transition: border-color 0.2s ease;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--neon-green);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-gray-500);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Multi-select (Categories) - same pattern as admin */
.form-select,
.form-select-multiple {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    font-size: 1rem;
    font-family: var(--font-family);
    transition: border-color 0.2s ease;
}

.form-select-multiple {
    min-height: 120px;
    padding: 0.5rem;
}

.form-select-multiple option {
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    margin-bottom: 2px;
}

.form-select-multiple option:checked {
    background: linear-gradient(90deg, var(--neon-green) 0%, rgba(0, 255, 136, 0.2) 100%);
    color: #0a0a0a;
}

.form-select:focus,
.form-select-multiple:focus {
    outline: none;
    border-color: var(--neon-green);
}

.form-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-gray-500);
    margin-top: 0.35rem;
}

.invalid-feedback {
    font-size: 0.75rem;
    color: #ef4444;
    margin-top: 0.25rem;
}

/* Image Upload */
.image-upload-label {
    cursor: pointer;
    display: block;
    width: 100%;
}

/* Hide native file input */
.hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.feature-image-banner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 250px;
    background: #000;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px dashed var(--border-gray-600);
    transition: border-color 0.2s ease;
}

@media (min-width: 768px) {
    .feature-image-banner {
        height: 400px;
    }
}

.feature-image-banner:hover {
    border-color: var(--neon-green);
}

.feature-image-banner img,
.feature-image-banner .preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Wrapper when preview has an image set */
.image-preview-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}

/* Hover overlay to show "Change image" when image is set */
.image-edit-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.feature-image-banner:hover .image-edit-overlay,
.thumbnail-image-preview:hover .image-edit-overlay,
.image-preview-container:hover .image-edit-overlay {
    opacity: 1;
}

.image-edit-overlay-text {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 0.375rem;
    background: rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
    .image-edit-overlay-text {
        font-size: 1.125rem;
    }
}

.upload-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-gray-500);
    z-index: 10;
}

.upload-placeholder svg {
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.75rem;
}

.upload-text {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    font-family: var(--font-family);
}

.upload-hint {
    font-size: 0.75rem;
    color: var(--text-gray-500);
    font-family: var(--font-family);
}

/* Thumbnail Image Preview */
.thumbnail-image-preview {
    position: relative;
    width: 100%;
    height: 150px;
    background: #000;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px dashed var(--border-gray-600);
    transition: border-color 0.2s ease;
}

.thumbnail-image-preview:hover {
    border-color: var(--neon-green);
}

.thumbnail-image-preview img,
.thumbnail-image-preview .preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnail-image-preview .preview-img.thumbnail-round {
    border-radius: 8px;
}

.thumbnail-image-preview .image-preview-wrap {
    height: 100%;
}

/* Tags Input Container */
.tags-input-container {
    width: 100%;
}

.tags-input-wrapper {
    position: relative;
}

.tags-input {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    font-size: 1rem;
    font-family: var(--font-family);
    transition: border-color 0.2s ease;
}

.tags-input:focus {
    outline: none;
    border-color: var(--neon-green);
}

.tags-input::placeholder {
    color: var(--text-gray-500);
}

/* Tags Container (Pills) */
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    min-height: 2rem;
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 1.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    color: var(--text-white);
    font-family: var(--font-family);
    transition: all 0.2s ease;
}

.tag-pill:hover {
    border-color: var(--neon-green);
    background-color: rgba(0, 255, 136, 0.1);
}

.tag-remove {
    background: none;
    border: none;
    color: var(--text-gray-400);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    transition: color 0.2s ease;
}

.tag-remove:hover {
    color: var(--text-white);
}

.tag-remove svg {
    width: 14px;
    height: 14px;
}

/* Switch/Toggle Styling */
.switch-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-gray-600);
    transition: 0.3s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.switch input:checked + .slider {
    background-color: var(--neon-green);
}

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

.switch-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-gray-300);
    cursor: pointer;
    font-family: var(--font-family);
    user-select: none;
    flex: 1;
}

/* Sidebar Form Fields */
.sidebar-form-field {
    margin-bottom: 1.5rem;
}

.sidebar-form-field:last-child {
    margin-bottom: 0;
}

/* Reaction Group Container */
.reaction-group-container {
    margin-top: 1rem;
    padding: 1rem;
    background-color: var(--dark-surface);
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-600);
}

/* Form Select */
.form-select {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    font-size: 1rem;
    font-family: var(--font-family);
    transition: border-color 0.2s ease;
    cursor: pointer;
}

.form-select:focus {
    outline: none;
    border-color: var(--neon-green);
}

.form-select option {
    background-color: var(--dark-surface);
    color: var(--text-white);
}

/* Form Hint */
.form-hint {
    font-size: 0.75rem;
    color: var(--text-gray-500);
    margin-top: 0.5rem;
    font-family: var(--font-family);
    display: block;
}

/* Datetime Input - Dark Theme */
.datetime-input {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    font-size: 1rem;
    font-family: var(--font-family);
    transition: border-color 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    color-scheme: dark;
}

.datetime-input:focus {
    outline: none;
    border-color: var(--neon-green);
}

/* Dark theme for datetime-local input calendar icon */
.datetime-input::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.8);
    cursor: pointer;
    opacity: 0.8;
    padding: 0.25rem;
    margin-left: 0.5rem;
}

.datetime-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    filter: invert(1) brightness(1);
}

/* For Firefox */
.datetime-input::-moz-calendar-picker-indicator {
    filter: invert(1) brightness(0.8);
    cursor: pointer;
    opacity: 0.8;
}

.datetime-input::-moz-calendar-picker-indicator:hover {
    opacity: 1;
    filter: invert(1) brightness(1);
}

/* Style the datetime input value text */
.datetime-input::-webkit-datetime-edit {
    color: var(--text-white);
    background-color: transparent;
}

.datetime-input::-webkit-datetime-edit-fields-wrapper {
    color: var(--text-white);
    background-color: transparent;
}

.datetime-input::-webkit-datetime-edit-text {
    color: var(--text-gray-400);
    padding: 0 0.25rem;
}

.datetime-input::-webkit-datetime-edit-month-field,
.datetime-input::-webkit-datetime-edit-day-field,
.datetime-input::-webkit-datetime-edit-year-field,
.datetime-input::-webkit-datetime-edit-hour-field,
.datetime-input::-webkit-datetime-edit-minute-field {
    color: var(--text-white);
    background-color: transparent;
}

.datetime-input::-webkit-datetime-edit-month-field:focus,
.datetime-input::-webkit-datetime-edit-day-field:focus,
.datetime-input::-webkit-datetime-edit-year-field:focus,
.datetime-input::-webkit-datetime-edit-hour-field:focus,
.datetime-input::-webkit-datetime-edit-minute-field:focus {
    background-color: rgba(0, 255, 136, 0.2);
    color: var(--text-white);
    border-radius: 0.25rem;
}

/* Dark theme for calendar popup - WebKit browsers */
.datetime-input::-webkit-calendar-picker-indicator {
    background-color: var(--dark-surface);
}

/* Additional styling to ensure calendar popup is dark */
.datetime-input::-webkit-datetime-edit-ampm-field {
    color: var(--text-white);
    background-color: transparent;
}

/* Force dark calendar popup styling */
.datetime-input {
    color-scheme: dark;
}

/* Additional dark theme for calendar dropdown */
@supports (-webkit-appearance: none) {
    .datetime-input {
        color-scheme: dark;
    }
}

/* Dark theme for calendar popup - Additional styling */
.datetime-input::-webkit-calendar-picker-indicator {
    background-color: var(--dark-surface);
    border-radius: 0.25rem;
}

/* Ensure the input itself has dark background when calendar opens */
.datetime-input::-webkit-datetime-edit {
    background-color: var(--dark-surface) !important;
}

.datetime-input::-webkit-datetime-edit-fields-wrapper {
    background-color: var(--dark-surface) !important;
}

/* Style for when calendar picker is active */
.datetime-input:focus::-webkit-calendar-picker-indicator {
    background-color: var(--dark-surface);
}

/* Add Question Button */
.btn-add-question {
    background-color: var(--neon-green);
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-family: var(--font-family);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.2s ease;
    font-size: 0.875rem;
}

.btn-add-question:hover {
    opacity: 0.9;
}

.btn-add-question svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Questions Container */
.questions-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Question Block */
.question-block {
    background-color: var(--dark-surface);
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-700);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

/* Question Accordion Header */
.question-accordion-header {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.question-accordion-header:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.question-header-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

/* Move buttons (up/down arrows) */
.move-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.move-btn {
    background: transparent;
    border: 1px solid rgba(156, 163, 175, 0.3);
    color: var(--text-gray-400);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 0.25rem;
    min-width: 1.5rem;
    min-height: 1.5rem;
}

.move-btn:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--neon-green);
    color: var(--neon-green);
    transform: scale(1.1);
}

.move-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.move-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.move-btn svg {
    width: 1rem;
    height: 1rem;
    pointer-events: none;
}

.question-number-accent {
    width: 4px;
    height: 2rem;
    background: #FF0033;
    border-radius: 2px;
    flex-shrink: 0;
}

.question-header-text {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.question-number {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-400);
    font-family: var(--font-family);
}

.question-title-text {
    color: var(--text-white);
    font-weight: 600;
    font-family: var(--font-family);
}

.question-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gallery-image-chevron {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-gray-600);
    border-radius: 0.375rem;
    background: #1a1a22;
    color: var(--text-gray-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gallery-image-chevron svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
}

.gallery-image-chevron.collapsed svg {
    transform: rotate(-90deg);
}

.gallery-image-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.375rem;
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    cursor: pointer;
}

.gallery-image-remove-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

.accordion-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-gray-400);
    transition: transform 0.3s ease;
}

.btn-remove-question {
    color: #ef4444;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s ease;
}

.btn-remove-question:hover {
    color: #dc2626;
}

.btn-remove-question svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Question Accordion Content */
.question-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.question-accordion-content.expanded {
    max-height: 5000px;
    transition: max-height 0.5s ease-in;
}

.question-content {
    padding: 1.5rem;
    padding-top: 0;
}

/* Question Image Preview - orientation (vertical = portrait, landscape = landscape) */
.image-preview-container {
    position: relative;
    background: #000;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px dashed var(--border-gray-600);
    margin: 0 auto;
    transition: border-color 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.image-preview-container.orientation-vertical {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 5 / 7;
}

.image-preview-container.orientation-landscape {
    width: 100%;
    max-width: 560px;
    aspect-ratio: 7 / 5;
}

.image-preview-container:hover {
    border-color: var(--neon-green);
}

.image-preview-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Question Image label row with orientation icons at end */
.question-image-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.question-image-label-row .question-image-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-300);
}

.question-image-orientation-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.orientation-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: var(--text-gray-500);
    background: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.orientation-option:hover {
    color: var(--text-gray-300);
    border-color: var(--border-gray-500);
}

.orientation-option.selected {
    color: var(--neon-green);
    border-color: var(--neon-green);
    background: rgba(34, 197, 94, 0.1);
}

.orientation-option svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Question Image two-column grid */
.question-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 640px) {
    .question-image-grid {
        grid-template-columns: 1fr;
    }
}

.question-image-col-preview {
    position: relative;
}

.question-image-col-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.question-image-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.question-image-field-header .form-label {
    margin-bottom: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-gray-500);
}

.question-image-field .char-counter {
    font-size: 0.75rem;
    color: var(--text-gray-500);
}

.question-image-field .char-counter.at-limit {
    color: #ef4444;
}

.countdown-url-group {
    margin-bottom: 0.75rem;
}

.countdown-url-input {
    margin-bottom: 0;
}

.gallery-link-modal {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 1rem;
}

.gallery-link-modal.active {
    display: flex;
}

.gallery-link-modal-content {
    width: min(460px, 100%);
    background: #171721;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.75rem;
    overflow: hidden;
}

.gallery-link-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border-gray-700);
}

.gallery-link-modal-header h3 {
    margin: 0;
    color: var(--text-white);
    font-size: 1rem;
}

.gallery-link-modal-close {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-gray-600);
    border-radius: 0.35rem;
    background: #21212B;
    color: var(--text-gray-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gallery-link-modal-close svg {
    width: 1rem;
    height: 1rem;
}

.gallery-link-modal-body {
    padding: 1rem;
}

.gallery-link-modal-hint {
    margin-top: 0.4rem;
    color: var(--text-gray-500);
    font-size: 0.75rem;
}

.gallery-link-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.8rem 1rem 1rem;
}

.btn-cancel-link,
.btn-save-link {
    border-radius: 0.5rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--border-gray-600);
    background: #21212B;
    color: var(--text-gray-300);
    cursor: pointer;
    font-weight: 600;
}

.btn-save-link {
    border-color: #0f5132;
    background: #064e3b;
    color: #a7f3d0;
}

.gallery-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.78);
    padding: 1rem;
}

.gallery-preview-modal.active {
    display: flex;
}

/* Scoped to questions preview only so other gallery modals are not forced into a 2-column grid */
viralbuzz-create-personality-quiz #questionsPreviewModal .gallery-preview-modal-content {
    width: min(980px, 100%);
    max-height: 86vh;
    background: #14141A;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
    padding: 0.75rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    grid-template-rows: auto auto 1fr;
    gap: 0.5rem 0.75rem;
}

.gallery-preview-topbar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
    grid-column: 1 / -1;
}

.gallery-preview-chip {
    justify-self: start;
    padding: 0.55rem 1rem;
    background: #21212B;
    border: 1px solid var(--border-gray-700);
    color: var(--text-gray-300);
    border-radius: 0.25rem;
    font-size: 0.95rem;
}

.gallery-preview-count-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gallery-preview-count-label {
    color: var(--text-gray-400);
    font-size: 0.9rem;
}

.gallery-preview-count {
    min-width: 64px;
    text-align: center;
    padding: 0.25rem 0.5rem;
    background: #0f0f13;
    color: var(--text-white);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.gallery-preview-close-btn {
    justify-self: end;
    border: 1px solid var(--border-gray-600);
    border-radius: 0.25rem;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: #21212B;
    color: var(--text-gray-300);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gallery-preview-close-btn svg {
    width: 1rem;
    height: 1rem;
}

.gallery-preview-stage {
    position: relative;
    overflow: hidden;
}

.gallery-preview-viewport {
    width: min(100%, 900px);
    margin: 0 auto;
    overflow: hidden;
    background: #0b0b10;
    border-radius: 0.25rem 0.25rem 0 0;
    border: 1px solid var(--border-gray-700);
    height: min(52vh, 460px);
    position: relative;
}

.gallery-preview-track {
    display: flex;
    transition: transform 0.35s ease;
    will-change: transform;
}

.gallery-preview-slide {
    flex: 0 0 100%;
    min-width: 100%;
    height: min(52vh, 460px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
}

.gallery-preview-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gallery-preview-zoom-controls {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 4;
    display: flex;
    gap: 0.35rem;
    background: rgba(12, 15, 24, 0.78);
    border: 1px solid var(--border-gray-600);
    border-radius: 999px;
    padding: 0.25rem;
}

.gallery-zoom-btn {
    border: 1px solid var(--border-gray-600);
    background: #1a1f2b;
    color: var(--text-gray-200);
    min-width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gallery-zoom-btn.reset {
    min-width: 3.2rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.gallery-zoom-btn:hover {
    color: #fff;
    border-color: var(--neon-cyan);
}

/* Questions preview: blur + reveal when "Show Viewer Caution" is on */
.gallery-preview-slide--caution .gallery-preview-caution-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.25rem;
}

.gallery-preview-slide--caution .gallery-preview-caution-wrap:not(.is-revealed) img {
    filter: blur(22px);
    transform: scale(1.06);
    pointer-events: none;
    user-select: none;
}

.gallery-preview-slide--caution .gallery-preview-caution-wrap.is-revealed img {
    filter: none;
    transform: none;
}

.gallery-preview-caution-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.75rem 1.5rem;
    background: rgba(0, 255, 136, 0.92);
    color: #0a0a0a;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-family);
    cursor: pointer;
    z-index: 4;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    transition: background 0.2s ease;
}

.gallery-preview-caution-btn:hover {
    background: #00ff88;
}

.gallery-preview-caution-wrap.is-revealed .gallery-preview-caution-btn {
    display: none;
}

.gallery-preview-thumb--caution img {
    filter: blur(10px);
    transform: scale(1.05);
}

.gallery-preview-thumb--caution.is-revealed img {
    filter: none;
    transform: none;
}

.gallery-preview-arrow {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--border-gray-600);
    background: rgba(17, 24, 39, 0.85);
    color: var(--text-gray-200);
    cursor: pointer;
    z-index: 3;
}

.gallery-preview-arrow.prev { left: 0.75rem; }
.gallery-preview-arrow.next { right: 0.75rem; }
.gallery-preview-arrow svg { width: 1rem; height: 1rem; }

.gallery-preview-caption {
    width: min(100%, 900px);
    margin: 0 auto;
    background: #21212B;
    color: var(--text-gray-200);
    min-height: 5.25rem;
    padding: 0.55rem 0.8rem;
    border-radius: 0 0 0.25rem 0.25rem;
    border: 1px solid var(--border-gray-700);
    border-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.gallery-preview-caption-main { min-width: 0; }
.gallery-preview-caption-title { margin: 0; font-size: 1.1rem; color: #fff; font-weight: 700; }
.gallery-preview-caption-desc { margin: 0.2rem 0 0 0; font-size: 0.86rem; color: var(--text-gray-300); }

.gallery-preview-caption-meta {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.gallery-preview-meta-chip {
    background: #171721;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    padding: 0.35rem 0.55rem;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
}

.gallery-preview-meta-chip span {
    display: block;
    font-size: 0.68rem;
    color: var(--text-gray-500);
    margin-bottom: 0.1rem;
}

.gallery-preview-meta-chip strong {
    display: block;
    font-size: 0.8rem;
    color: var(--text-gray-200);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-meta-link {
    color: #60a5fa;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gallery-meta-link:hover {
    color: #93c5fd;
}

.gallery-preview-thumbs-wrap {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 0.5rem;
    grid-column: 1 / 2;
}

.questions-preview-options-panel {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    background: #171721;
    padding: 0.6rem;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.questions-preview-options-title {
    color: var(--text-white);
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.questions-preview-options-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-right: 0.15rem;
}

.questions-preview-option {
    display: grid;
    grid-template-columns: 1.5rem 1fr auto;
    gap: 0.45rem;
    align-items: center;
    padding: 0.4rem 0.45rem;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.4rem;
    background: #101018;
}

.questions-preview-option-index {
    color: var(--text-gray-400);
    font-size: 0.75rem;
    text-align: center;
}

.questions-preview-option-text {
    color: var(--text-gray-200);
    font-size: 0.8rem;
}

.questions-preview-correct-badge {
    font-size: 0.68rem;
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.1);
    border-radius: 999px;
    padding: 0.12rem 0.4rem;
    font-weight: 600;
}

.questions-preview-option-empty {
    color: var(--text-gray-500);
    font-size: 0.78rem;
    padding: 0.5rem 0.4rem;
}

@media (max-width: 980px) {
    viralbuzz-create-personality-quiz #questionsPreviewModal .gallery-preview-modal-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto 1fr;
    }
    .gallery-preview-thumbs-wrap {
        grid-column: 1 / -1;
    }
    .questions-preview-options-panel {
        grid-column: 1 / -1;
        grid-row: auto;
        max-height: 180px;
    }
    .gallery-preview-caption {
        flex-direction: column;
        align-items: flex-start;
        min-height: auto;
    }
    .gallery-preview-caption-meta {
        width: 100%;
    }
    .gallery-preview-meta-chip {
        flex: 1;
        min-width: 0;
        width: auto;
        max-width: none;
    }
}

.gallery-thumb-nav {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-gray-600);
    border-radius: 0.25rem;
    background: #1a1a22;
    color: var(--text-gray-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gallery-preview-thumbs {
    display: flex;
    gap: 0.55rem;
    overflow-x: auto;
    padding: 0.2rem 0;
}

.gallery-preview-thumb {
    flex: 0 0 96px;
    width: 96px;
    height: 62px;
    border-radius: 0.35rem;
    border: 2px solid var(--border-gray-700);
    overflow: hidden;
    cursor: pointer;
    background: #101018;
}

.gallery-preview-thumb.active {
    border-color: var(--neon-green);
    box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.35);
}

.gallery-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Show Viewer Caution */
.question-image-viewer-caution {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-gray-600);
}

.question-image-viewer-caution .switch-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-gray-500);
    margin-top: 0.25rem;
    margin-left: 3.25rem;
}

/* Choices Section */
.choices-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.choices-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-300);
    font-family: var(--font-family);
}

.btn-add-choice {
    font-size: 0.875rem;
    color: var(--neon-green);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.2s ease;
    font-family: var(--font-family);
}

.btn-add-choice:hover {
    color: var(--neon-green);
    opacity: 0.8;
}

.btn-add-choice svg {
    width: 1rem;
    height: 1rem;
}

.choices-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Choice Option */
.choice-option {
    background-color: var(--dark-card);
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.choice-option:hover {
    border-color: var(--text-gray-600);
}

.choice-option.selected {
    border-color: var(--neon-green);
    border-width: 2px;
}

/* Custom Radio Button */
.custom-radio {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border-gray-700);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.choice-option.selected .custom-radio {
    border-color: var(--neon-green);
    background: var(--neon-green);
}

.choice-option.selected .custom-radio::after {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    background: #000;
    border-radius: 50%;
}

.choice-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-white);
    font-size: 1rem;
    font-family: var(--font-family);
    padding: 0;
}

.choice-input::placeholder {
    color: var(--text-gray-500);
}

.btn-remove-choice {
    color: #ef4444;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.btn-remove-choice:hover {
    color: #dc2626;
}

.btn-remove-choice svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Right Sidebar - Actions */
.quiz-actions-sidebar {
    display: none;
}

@media (min-width: 1024px) {
    .quiz-actions-sidebar {
        display: block;
        align-self: start; /* Align to top of grid */
        width: 320px; /* Fixed width; left column uses remaining space */
        min-width: 320px;
        position: sticky;
        top: 20px; 
        height: fit-content;
        max-height: calc(100vh - 100px);
        background-color: var(--dark-card);
        border-radius: 0.5rem;
        padding: 0;
        border: 1px solid var(--border-gray-700);
    }
}

.actions-sticky {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Auto-hide scrollbar for buttons if needed */
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

/* Post Settings Accordion (right sidebar) */
.post-settings-accordion {
    margin-bottom: 1rem;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.2);
}

.post-settings-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.post-settings-accordion-header:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.post-settings-accordion-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-white);
    font-family: var(--font-family);
}

.post-settings-accordion-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-gray-400);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.post-settings-accordion-content {
    max-height: 0;
    overflow: hidden;
    overflow-y: auto;
    transition: max-height 0.35s ease-out;
}

.post-settings-accordion-content.expanded {
    max-height: min(70vh, 600px);
    transition: max-height 0.4s ease-in;
}

.post-settings-accordion-content .sidebar-form-field {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
}

.post-settings-accordion-content .sidebar-form-field:first-child {
    padding-top: 1rem;
}

/* Match sidebar dropdowns and datetime input font size to labels (avoid truncation) */
.quiz-actions-sidebar .form-select,
.quiz-actions-sidebar .datetime-input {
    font-size: 0.75rem;
}

.quiz-actions-sidebar .form-select option {
    font-size: 0.875rem;
}

/* Keep datetime value from overlapping calendar icon in sidebar */
.quiz-actions-sidebar .datetime-input {
    padding-right: 0.25rem;
}

.actions-sticky::-webkit-scrollbar {
    width: 3px;
}

.actions-sticky::-webkit-scrollbar-track {
    background: transparent;
}

.actions-sticky::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

.actions-sticky:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
}

.actions-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 1.5rem;
    font-family: var(--font-family);
}

.actions-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    font-family: var(--font-family);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.action-btn-primary {
    background: linear-gradient(to right, var(--neon-pink), var(--purple-500), var(--neon-cyan));
    color: var(--text-white);
}

.action-btn-primary:hover {
    opacity: 0.9;
}

.action-btn-secondary {
    background-color: var(--dark-surface);
    color: var(--text-white);
    border: 1px solid var(--border-gray-700);
}

.action-btn-secondary:hover {
    background-color: var(--gray-800);
    border-color: var(--text-gray-600);
}

.action-btn-link {
    background: transparent;
    color: var(--text-gray-300);
    border: 1px solid var(--border-gray-700);
}

.action-btn-link:hover {
    color: var(--text-white);
    border-color: var(--text-gray-600);
}

.action-btn-danger {
    background-color: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.action-btn-danger:hover {
    background-color: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
    color: #fca5a5;
}

/* Mobile Actions Bar (shown on mobile instead of sidebar) */
.mobile-actions-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--dark-card);
    border-top: 1px solid var(--border-gray-700);
    padding: 1rem;
    z-index: 40;
    display: flex;
    gap: 0.75rem;
}

@media (min-width: 1024px) {
    .mobile-actions-bar {
        display: none;
    }
}

.mobile-actions-bar .action-btn {
    flex: 1;
}

.mobile-actions-bar .action-btn-primary {
    flex: 2;
}

/* Add bottom padding to main content on mobile to account for actions bar */
@media (max-width: 1023px) {
    .quiz-form-column {
        padding-bottom: 100px;
    }
}
/* Create Trivia Quiz Component Styles */

viralbuzz-create-trivia-quiz {
    display: block;
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px; /* Account for fixed header */
    background-color: var(--dark-bg);
}

/* Content container for quiz - ensure proper scrolling */
viralbuzz-create-trivia-quiz .content-container {
    height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    /* Auto-hide scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

viralbuzz-create-trivia-quiz .content-container::-webkit-scrollbar {
    width: 6px;
}

viralbuzz-create-trivia-quiz .content-container::-webkit-scrollbar-track {
    background: transparent;
}

viralbuzz-create-trivia-quiz .content-container::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

viralbuzz-create-trivia-quiz .content-container:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
}

/* Skeleton loader when loading edit data */
viralbuzz-create-trivia-quiz .quiz-form-skeleton.hidden {
    display: none !important;
}

viralbuzz-create-trivia-quiz .quiz-form-skeleton {
    display: block;
    padding: 2rem 1rem;
    min-height: 400px;
}

viralbuzz-create-trivia-quiz .quiz-form-content-loading {
    position: absolute !important;
    visibility: hidden !important;
    pointer-events: none;
    width: 100%;
    left: 0;
    top: 0;
}

viralbuzz-create-trivia-quiz .quiz-skeleton-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    viralbuzz-create-trivia-quiz .quiz-skeleton-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

viralbuzz-create-trivia-quiz .quiz-skeleton-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@keyframes trivia-quiz-skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

viralbuzz-create-trivia-quiz .quiz-form-skeleton .skeleton-base {
    background: linear-gradient(
        90deg,
        #1a1a1a 0%,
        #2a2a2a 50%,
        #1a1a1a 100%
    );
    background-size: 200% 100%;
    animation: trivia-quiz-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
}

viralbuzz-create-trivia-quiz .quiz-skeleton-title {
    height: 32px;
    width: 60%;
    max-width: 300px;
}

viralbuzz-create-trivia-quiz .quiz-skeleton-field {
    height: 44px;
    width: 100%;
}

viralbuzz-create-trivia-quiz .quiz-skeleton-banner {
    height: 250px;
    width: 100%;
    border-radius: 8px;
}

@media (min-width: 768px) {
    viralbuzz-create-trivia-quiz .quiz-skeleton-banner {
        height: 400px;
    }
}

viralbuzz-create-trivia-quiz .quiz-skeleton-section-title {
    height: 28px;
    width: 40%;
    margin-top: 0.5rem;
}

viralbuzz-create-trivia-quiz .quiz-skeleton-question {
    height: 120px;
    width: 100%;
    border-radius: 8px;
}

viralbuzz-create-trivia-quiz .quiz-skeleton-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

viralbuzz-create-trivia-quiz .quiz-skeleton-sidebar-item {
    height: 24px;
    width: 100%;
}

viralbuzz-create-trivia-quiz .quiz-skeleton-btn {
    height: 44px;
    width: 100%;
}

/* Page header with status pill (Draft / Published / Scheduled) */
viralbuzz-create-trivia-quiz .page-header-with-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

viralbuzz-create-trivia-quiz .page-header-with-status .page-title {
    margin-bottom: 0;
}

viralbuzz-create-trivia-quiz .quiz-status-pill {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
}

viralbuzz-create-trivia-quiz .quiz-status-pill-draft {
    background-color: rgba(156, 163, 175, 0.25);
    color: var(--text-gray-300);
}

viralbuzz-create-trivia-quiz .quiz-status-pill-published {
    background-color: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

viralbuzz-create-trivia-quiz .quiz-status-pill-scheduled {
    background-color: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

/* Two Column Layout */
.quiz-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 1rem;
    align-items: start; /* Align items to top */
}

/* Ensure main content scrolls, sidebar stays fixed */
@media (min-width: 1024px) {
    .quiz-form-column {
        overflow-y: visible; /* Allow natural scrolling */
    }
}

@media (min-width: 1024px) {
    .quiz-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 1.5rem; /* Reduced gap between columns */
        padding: 2rem 1.5rem;
        max-width: 1400px; /* Constrain overall layout width */
        margin: 0 auto; /* Center the layout */
    }
    
    /* Adjust when sidebar is open */
    body.sidebar-open .quiz-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
    
    /* Adjust when sidebar is closed */
    body.sidebar-closed .quiz-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

/* Quiz Form Column */
.quiz-form-column {
    min-width: 0;
    padding: 0;
    width: 100%; /* Take full width of grid column */
}

@media (min-width: 1024px) {
    .quiz-form-column {
        /* Form takes full width of its grid column */
        max-width: none; /* Remove max-width constraint, let grid handle it */
    }
}

/* Page Header - Now inside form section */
.page-header {
    margin-bottom: 1.5rem;
    padding: 0;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-gray-700);
}

/* Remove top margin from form when title is inside */
.quiz-form .page-header:first-child {
    margin-top: 0;
}

.page-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

@media (min-width: 768px) {
    .page-title {
        font-size: 2.5rem;
    }
}

.page-subtitle {
    font-size: 1rem;
    color: var(--text-gray-400);
    font-family: var(--font-family);
}

/* Quiz Form */
.quiz-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0;
}

/* Form Section */
.form-section {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
}

@media (min-width: 768px) {
    .form-section {
        padding: 2rem;
    }
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.section-header .section-title {
    margin: 0;
    line-height: 1.25;
}

.gallery-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Same row height / alignment as ranked list toolbar */
.gallery-header-actions > .btn-preview-gallery,
.gallery-header-actions > .btn-add-question {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.375rem;
    padding: 0.4375rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    box-sizing: border-box;
    font-family: var(--font-family);
    cursor: pointer;
}

.gallery-header-actions > .btn-add-question {
    border: 1px solid transparent;
    padding: 0.4375rem 0.875rem;
}

.gallery-header-actions > .btn-add-question svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

.btn-preview-gallery {
    border: 1px solid var(--border-gray-600);
    background: transparent;
    color: var(--text-gray-300);
    border-radius: 0.5rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-family);
}

.btn-preview-gallery:hover {
    color: var(--text-white);
    border-color: var(--border-gray-500);
}

.section-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-white);
    font-family: var(--font-family);
}

/* Form Fields */
.form-field {
    margin-bottom: 1.5rem;
}

.form-field:last-child {
    margin-bottom: 0;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-300);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.label-hint {
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--text-gray-500);
    margin-left: 0.5rem;
    font-family: var(--font-family);
}

.required {
    color: #ef4444;
}

.form-input,
.form-textarea {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    font-size: 1rem;
    font-family: var(--font-family);
    transition: border-color 0.2s ease;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--neon-green);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-gray-500);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.form-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.form-field-header .form-label {
    margin-bottom: 0;
}

.char-counter {
    font-size: 0.75rem;
    color: var(--text-gray-500);
}

.char-counter.at-limit {
    color: var(--error-red, #ef4444);
    font-weight: 600;
}

.form-select-multiple {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.5rem;
    color: var(--text-white);
    font-size: 1rem;
    min-height: 120px;
}

.form-select-multiple option:checked {
    background: linear-gradient(90deg, var(--neon-green) 0%, rgba(0, 255, 136, 0.2) 100%);
    color: #0a0a0a;
}

.invalid-feedback {
    font-size: 0.75rem;
    color: #ef4444;
    margin-top: 0.25rem;
}

.tags-input-container {
    width: 100%;
}

.tags-input {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    font-size: 1rem;
    font-family: var(--font-family);
}

.tags-input:focus {
    outline: none;
    border-color: var(--neon-green);
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    min-height: 2rem;
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 1.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    color: var(--text-white);
    font-family: var(--font-family);
}

.tag-remove {
    background: none;
    border: none;
    color: var(--text-gray-400);
    cursor: pointer;
    padding: 0;
    display: inline-flex;
}

.tag-remove:hover {
    color: var(--text-white);
}

/* Image Upload */
.image-upload-label {
    cursor: pointer;
    display: block;
    width: 100%;
}

/* Hide native file input */
.hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.feature-image-banner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 250px;
    background: #000;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px dashed var(--border-gray-600);
    transition: border-color 0.2s ease;
}

@media (min-width: 768px) {
    .feature-image-banner {
        height: 400px;
    }
}

.feature-image-banner:hover {
    border-color: var(--neon-green);
}

.feature-image-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-gray-500);
    z-index: 10;
}

.upload-placeholder svg {
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.75rem;
}

.upload-text {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    font-family: var(--font-family);
}

.upload-hint {
    font-size: 0.75rem;
    color: var(--text-gray-500);
    font-family: var(--font-family);
}

/* Add Question Button */
.btn-add-question {
    background-color: var(--neon-green);
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-family: var(--font-family);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.2s ease;
    font-size: 0.875rem;
}

.btn-add-question:hover {
    opacity: 0.9;
}

.btn-add-question svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Questions Container */
.questions-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Question Block */
.question-block {
    background-color: var(--dark-surface);
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-700);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

/* Question Accordion Header */
.question-accordion-header {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.question-accordion-header:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.question-header-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

/* Move buttons (up/down arrows) */
.move-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.move-btn {
    background: transparent;
    border: 1px solid rgba(156, 163, 175, 0.3);
    color: var(--text-gray-400);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 0.25rem;
    min-width: 1.5rem;
    min-height: 1.5rem;
}

.move-btn:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--neon-green);
    color: var(--neon-green);
    transform: scale(1.1);
}

.move-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.move-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.move-btn svg {
    width: 1rem;
    height: 1rem;
    pointer-events: none;
}

.question-number-accent {
    width: 4px;
    height: 2rem;
    background: #FF0033;
    border-radius: 2px;
    flex-shrink: 0;
}

.question-header-text {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.question-number {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-400);
    font-family: var(--font-family);
}

.question-title-text {
    color: var(--text-white);
    font-weight: 600;
    font-family: var(--font-family);
}

.question-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gallery-image-chevron {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-gray-600);
    border-radius: 0.375rem;
    background: #1a1a22;
    color: var(--text-gray-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gallery-image-chevron svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
}

.gallery-image-chevron.collapsed svg {
    transform: rotate(-90deg);
}

.gallery-image-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.375rem;
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    cursor: pointer;
}

.gallery-image-remove-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Question Accordion Content */
.question-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.question-accordion-content.expanded {
    max-height: 5000px;
    transition: max-height 0.5s ease-in;
}

.question-content {
    padding: 1.5rem;
    padding-top: 0;
}

/* Question Image Preview */
.image-preview-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1;
    background: #000;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px dashed var(--border-gray-600);
    margin: 0 auto;
    transition: border-color 0.2s ease;
}

.image-preview-container:hover {
    border-color: var(--neon-green);
}

.image-preview-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Question Image orientation (Portrait / Landscape) and metadata fields - match personality quiz */
.image-preview-container.orientation-vertical {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 5 / 7;
}

.image-preview-container.orientation-landscape {
    width: 100%;
    max-width: 560px;
    aspect-ratio: 7 / 5;
}

.question-image-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.question-image-label-row .question-image-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-300);
}

.question-image-orientation-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.orientation-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: var(--text-gray-500);
    background: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.orientation-option:hover {
    color: var(--text-gray-300);
    border-color: var(--border-gray-500);
}

.orientation-option.selected {
    color: var(--neon-green, #22c55e);
    border-color: var(--neon-green, #22c55e);
    background: rgba(34, 197, 94, 0.1);
}

.orientation-option svg {
    width: 1.125rem;
    height: 1.125rem;
}

.question-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 640px) {
    .question-image-grid {
        grid-template-columns: 1fr;
    }
}

.question-image-col-preview {
    position: relative;
}

.question-image-col-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.question-image-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.question-image-field-header .form-label {
    margin-bottom: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-gray-500);
}

.question-image-field .char-counter {
    font-size: 0.75rem;
    color: var(--text-gray-500);
}

.question-image-field .char-counter.at-limit {
    color: #ef4444;
}

.countdown-url-group {
    margin-bottom: 0.75rem;
}

.countdown-url-input {
    margin-bottom: 0;
}

.question-image-viewer-caution {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-gray-600);
}

.question-image-viewer-caution .switch-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-gray-500);
    margin-top: 0.25rem;
    margin-left: 3.25rem;
}

.gallery-link-modal {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 1rem;
}

.gallery-link-modal.active {
    display: flex;
}

.gallery-link-modal-content {
    width: min(460px, 100%);
    background: #171721;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.75rem;
    overflow: hidden;
}

.gallery-link-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border-gray-700);
}

.gallery-link-modal-header h3 {
    margin: 0;
    color: var(--text-white);
    font-size: 1rem;
}

.gallery-link-modal-close {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-gray-600);
    border-radius: 0.35rem;
    background: #21212B;
    color: var(--text-gray-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gallery-link-modal-close svg {
    width: 1rem;
    height: 1rem;
}

.gallery-link-modal-body {
    padding: 1rem;
}

.gallery-link-modal-hint {
    margin-top: 0.4rem;
    color: var(--text-gray-500);
    font-size: 0.75rem;
}

.gallery-link-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.8rem 1rem 1rem;
}

.btn-cancel-link,
.btn-save-link {
    border-radius: 0.5rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--border-gray-600);
    background: #21212B;
    color: var(--text-gray-300);
    cursor: pointer;
    font-weight: 600;
}

.btn-save-link {
    border-color: #0f5132;
    background: #064e3b;
    color: #a7f3d0;
}

.gallery-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.78);
    padding: 1rem;
}

.gallery-preview-modal.active {
    display: flex;
}

/* Scoped to questions preview only so ranked list / story gallery modals are not forced into a 2-column grid */
viralbuzz-create-trivia-quiz #questionsPreviewModal .gallery-preview-modal-content {
    width: min(980px, 100%);
    max-height: 86vh;
    background: #14141A;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
    padding: 0.75rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    grid-template-rows: auto auto 1fr;
    gap: 0.5rem 0.75rem;
}

.gallery-preview-topbar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
    grid-column: 1 / -1;
}

.gallery-preview-chip {
    justify-self: start;
    padding: 0.55rem 1rem;
    background: #21212B;
    border: 1px solid var(--border-gray-700);
    color: var(--text-gray-300);
    border-radius: 0.25rem;
    font-size: 0.95rem;
}

.gallery-preview-count-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gallery-preview-count-label {
    color: var(--text-gray-400);
    font-size: 0.9rem;
}

.gallery-preview-count {
    min-width: 64px;
    text-align: center;
    padding: 0.25rem 0.5rem;
    background: #0f0f13;
    color: var(--text-white);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.gallery-preview-close-btn {
    justify-self: end;
    border: 1px solid var(--border-gray-600);
    border-radius: 0.25rem;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: #21212B;
    color: var(--text-gray-300);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gallery-preview-close-btn svg {
    width: 1rem;
    height: 1rem;
}

.gallery-preview-stage {
    position: relative;
    overflow: hidden;
}

.gallery-preview-viewport {
    width: min(100%, 900px);
    margin: 0 auto;
    overflow: hidden;
    background: #0b0b10;
    border-radius: 0.25rem 0.25rem 0 0;
    border: 1px solid var(--border-gray-700);
    height: min(52vh, 460px);
    position: relative;
}

.gallery-preview-track {
    display: flex;
    transition: transform 0.35s ease;
    will-change: transform;
}

.gallery-preview-slide {
    flex: 0 0 100%;
    min-width: 100%;
    height: min(52vh, 460px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
}

.gallery-preview-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gallery-preview-zoom-controls {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 4;
    display: flex;
    gap: 0.35rem;
    background: rgba(12, 15, 24, 0.78);
    border: 1px solid var(--border-gray-600);
    border-radius: 999px;
    padding: 0.25rem;
}

.gallery-zoom-btn {
    border: 1px solid var(--border-gray-600);
    background: #1a1f2b;
    color: var(--text-gray-200);
    min-width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gallery-zoom-btn.reset {
    min-width: 3.2rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.gallery-zoom-btn:hover {
    color: #fff;
    border-color: var(--neon-cyan);
}

/* Questions preview: blur + reveal when "Show Viewer Caution" is on */
.gallery-preview-slide--caution .gallery-preview-caution-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.25rem;
}

.gallery-preview-slide--caution .gallery-preview-caution-wrap:not(.is-revealed) img {
    filter: blur(22px);
    transform: scale(1.06);
    pointer-events: none;
    user-select: none;
}

.gallery-preview-slide--caution .gallery-preview-caution-wrap.is-revealed img {
    filter: none;
    transform: none;
}

.gallery-preview-caution-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.75rem 1.5rem;
    background: rgba(0, 255, 136, 0.92);
    color: #0a0a0a;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-family);
    cursor: pointer;
    z-index: 4;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    transition: background 0.2s ease;
}

.gallery-preview-caution-btn:hover {
    background: #00ff88;
}

.gallery-preview-caution-wrap.is-revealed .gallery-preview-caution-btn {
    display: none;
}

.gallery-preview-thumb--caution img {
    filter: blur(10px);
    transform: scale(1.05);
}

.gallery-preview-thumb--caution.is-revealed img {
    filter: none;
    transform: none;
}

.gallery-preview-arrow {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--border-gray-600);
    background: rgba(17, 24, 39, 0.85);
    color: var(--text-gray-200);
    cursor: pointer;
    z-index: 3;
}

.gallery-preview-arrow.prev { left: 0.75rem; }
.gallery-preview-arrow.next { right: 0.75rem; }
.gallery-preview-arrow svg { width: 1rem; height: 1rem; }

.gallery-preview-caption {
    width: min(100%, 900px);
    margin: 0 auto;
    background: #21212B;
    color: var(--text-gray-200);
    min-height: 5.25rem;
    padding: 0.55rem 0.8rem;
    border-radius: 0 0 0.25rem 0.25rem;
    border: 1px solid var(--border-gray-700);
    border-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.gallery-preview-caption-main { min-width: 0; }
.gallery-preview-caption-title { margin: 0; font-size: 1.1rem; color: #fff; font-weight: 700; }
.gallery-preview-caption-desc { margin: 0.2rem 0 0 0; font-size: 0.86rem; color: var(--text-gray-300); }

.gallery-preview-caption-meta {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.gallery-preview-meta-chip {
    background: #171721;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    padding: 0.35rem 0.55rem;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
}

.gallery-preview-meta-chip span {
    display: block;
    font-size: 0.68rem;
    color: var(--text-gray-500);
    margin-bottom: 0.1rem;
}

.gallery-preview-meta-chip strong {
    display: block;
    font-size: 0.8rem;
    color: var(--text-gray-200);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-meta-link {
    color: #60a5fa;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gallery-meta-link:hover {
    color: #93c5fd;
}

.gallery-preview-thumbs-wrap {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 0.5rem;
    grid-column: 1 / 2;
}

.questions-preview-options-panel {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    background: #171721;
    padding: 0.6rem;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.questions-preview-options-title {
    color: var(--text-white);
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.questions-preview-options-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-right: 0.15rem;
}

.questions-preview-option {
    display: grid;
    grid-template-columns: 1.5rem 1fr auto;
    gap: 0.45rem;
    align-items: center;
    padding: 0.4rem 0.45rem;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.4rem;
    background: #101018;
}

.questions-preview-option-index {
    color: var(--text-gray-400);
    font-size: 0.75rem;
    text-align: center;
}

.questions-preview-option-text {
    color: var(--text-gray-200);
    font-size: 0.8rem;
}

.questions-preview-correct-badge {
    font-size: 0.68rem;
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.1);
    border-radius: 999px;
    padding: 0.12rem 0.4rem;
    font-weight: 600;
}

.questions-preview-option-empty {
    color: var(--text-gray-500);
    font-size: 0.78rem;
    padding: 0.5rem 0.4rem;
}

@media (max-width: 980px) {
    viralbuzz-create-trivia-quiz #questionsPreviewModal .gallery-preview-modal-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto 1fr;
    }
    .gallery-preview-thumbs-wrap {
        grid-column: 1 / -1;
    }
    .questions-preview-options-panel {
        grid-column: 1 / -1;
        grid-row: auto;
        max-height: 180px;
    }
    .gallery-preview-caption {
        flex-direction: column;
        align-items: flex-start;
        min-height: auto;
    }
    .gallery-preview-caption-meta {
        width: 100%;
    }
    .gallery-preview-meta-chip {
        flex: 1;
        min-width: 0;
        width: auto;
        max-width: none;
    }
}

.gallery-thumb-nav {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-gray-600);
    border-radius: 0.25rem;
    background: #1a1a22;
    color: var(--text-gray-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gallery-preview-thumbs {
    display: flex;
    gap: 0.55rem;
    overflow-x: auto;
    padding: 0.2rem 0;
}

.gallery-preview-thumb {
    flex: 0 0 96px;
    width: 96px;
    height: 62px;
    border-radius: 0.35rem;
    border: 2px solid var(--border-gray-700);
    overflow: hidden;
    cursor: pointer;
    background: #101018;
}

.gallery-preview-thumb.active {
    border-color: var(--neon-green);
    box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.35);
}

.gallery-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Choices Section */
.choices-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.choices-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-300);
    font-family: var(--font-family);
}

/* Trivia: 3 / 5 / 10 choice count buttons */
.choice-count-buttons {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border-gray-600);
    border-radius: 6px;
    overflow: hidden;
    background: var(--dark-surface);
}

.choice-count-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-gray-500);
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-gray-600);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    font-family: var(--font-family);
}

.choice-count-btn:last-child {
    border-right: none;
}

.choice-count-btn:hover {
    color: var(--text-gray-300);
    background: rgba(255, 255, 255, 0.05);
}

.choice-count-btn.selected {
    color: var(--neon-green, #22c55e);
    background: rgba(34, 197, 94, 0.15);
}

.choices-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Choice Option */
.choice-option {
    background-color: var(--dark-card);
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.choice-option:hover {
    border-color: var(--text-gray-600);
}

.choice-option.selected {
    border-color: var(--neon-green);
    border-width: 2px;
}

/* Custom Radio Button */
.custom-radio {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border-gray-700);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.choice-option.selected .custom-radio {
    border-color: var(--neon-green);
    background: var(--neon-green);
}

.choice-option.selected .custom-radio::after {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    background: #000;
    border-radius: 50%;
}

.choice-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-white);
    font-size: 1rem;
    font-family: var(--font-family);
    padding: 0;
}

.choice-input::placeholder {
    color: var(--text-gray-500);
}

/* Right Sidebar - Actions */
.quiz-actions-sidebar {
    display: none;
}

@media (min-width: 1024px) {
    .quiz-actions-sidebar {
        display: block;
        align-self: start;
        width: 320px;
        min-width: 320px;
        position: sticky;
        top: 20px;
        height: fit-content;
        max-height: calc(100vh - 100px);
        background-color: var(--dark-card);
        border-radius: 0.5rem;
        border: 1px solid var(--border-gray-700);
    }
}

.actions-sticky {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
    width: 100%;
    height: fit-content;
    /* Auto-hide scrollbar for buttons if needed */
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

.actions-sticky::-webkit-scrollbar {
    width: 3px;
}

.actions-sticky::-webkit-scrollbar-track {
    background: transparent;
}

.actions-sticky::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

.actions-sticky:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
}

/* Post Settings Accordion (right sidebar) */
.post-settings-accordion {
    margin-bottom: 1rem;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.2);
}

.post-settings-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.post-settings-accordion-header:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.post-settings-accordion-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-white);
    font-family: var(--font-family);
}

.post-settings-accordion-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-gray-400);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.post-settings-accordion-content {
    max-height: 0;
    overflow: hidden;
    overflow-y: auto;
    transition: max-height 0.35s ease-out;
}

.post-settings-accordion-content.expanded {
    max-height: min(70vh, 600px);
    transition: max-height 0.4s ease-in;
}

.post-settings-accordion-content .sidebar-form-field {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
}

.post-settings-accordion-content .sidebar-form-field:first-child {
    padding-top: 1rem;
}

.quiz-actions-sidebar .form-select,
.quiz-actions-sidebar .datetime-input {
    font-size: 0.875rem;
}

.quiz-actions-sidebar .datetime-input {
    padding-right: 0.25rem;
}

.sidebar-form-field {
    margin-bottom: 1.5rem;
}

.sidebar-form-field:last-child {
    margin-bottom: 0;
}

.reaction-group-container {
    margin-top: 0.5rem;
    padding: 1rem;
    background-color: var(--dark-surface);
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-600);
}

.form-select {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    font-size: 1rem;
    font-family: var(--font-family);
    cursor: pointer;
}

.form-select:focus {
    outline: none;
    border-color: var(--neon-green);
}

.form-hint {
    font-size: 0.75rem;
    color: var(--text-gray-500);
    margin-top: 0.35rem;
    display: block;
}

.datetime-input {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    font-size: 1rem;
    font-family: var(--font-family);
    color-scheme: dark;
}

.datetime-input:focus {
    outline: none;
    border-color: var(--neon-green);
}

.thumbnail-image-preview {
    position: relative;
    width: 100%;
    height: 150px;
    background: #000;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px dashed var(--border-gray-600);
    transition: border-color 0.2s ease;
}

.thumbnail-image-preview:hover {
    border-color: var(--neon-green);
}

.thumbnail-image-preview img,
.thumbnail-image-preview .preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.switch-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-gray-600);
    transition: 0.3s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.switch input:checked + .slider {
    background-color: var(--neon-green);
}

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

.switch-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-gray-300);
    cursor: pointer;
    font-family: var(--font-family);
    user-select: none;
    flex: 1;
}

.actions-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 1.5rem;
    font-family: var(--font-family);
}

.actions-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    font-family: var(--font-family);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.action-btn-primary {
    background: linear-gradient(to right, var(--neon-pink), var(--purple-500), var(--neon-cyan));
    color: var(--text-white);
}

.action-btn-primary:hover {
    opacity: 0.9;
}

.action-btn-secondary {
    background-color: var(--dark-surface);
    color: var(--text-white);
    border: 1px solid var(--border-gray-700);
}

.action-btn-secondary:hover {
    background-color: var(--gray-800);
    border-color: var(--text-gray-600);
}

.action-btn-link {
    background: transparent;
    color: var(--text-gray-300);
    border: 1px solid var(--border-gray-700);
}

.action-btn-link:hover {
    color: var(--text-white);
    border-color: var(--text-gray-600);
}

.action-btn-danger {
    background-color: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.action-btn-danger:hover {
    background-color: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
    color: #fca5a5;
}

/* Mobile Actions Bar (shown on mobile instead of sidebar) */
.mobile-actions-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--dark-card);
    border-top: 1px solid var(--border-gray-700);
    padding: 1rem;
    z-index: 40;
    display: flex;
    gap: 0.75rem;
}

@media (min-width: 1024px) {
    .mobile-actions-bar {
        display: none;
    }
}

.mobile-actions-bar .action-btn {
    flex: 1;
}

.mobile-actions-bar .action-btn-primary {
    flex: 2;
}

/* Add bottom padding to main content on mobile to account for actions bar */
@media (max-width: 1023px) {
    .quiz-form-column {
        padding-bottom: 100px;
    }
}




































































/* Create Poll Component Styles */

viralbuzz-create-poll {
    display: block;
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px; /* Account for fixed header */
    background-color: #14141A;
}

/* Content container for poll - ensure proper scrolling */
viralbuzz-create-poll .content-container {
    height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    /* Auto-hide scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

viralbuzz-create-poll .content-container::-webkit-scrollbar {
    width: 6px;
}

viralbuzz-create-poll .content-container::-webkit-scrollbar-track {
    background: transparent;
}

viralbuzz-create-poll .content-container::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

viralbuzz-create-poll .content-container:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
}

/* Skeleton loader when loading edit data */
viralbuzz-create-poll .poll-form-skeleton.hidden {
    display: none !important;
}

viralbuzz-create-poll .poll-form-skeleton {
    display: block;
    padding: 2rem 1rem;
    min-height: 400px;
}

viralbuzz-create-poll .poll-form-content-loading {
    position: absolute !important;
    visibility: hidden !important;
    pointer-events: none;
    width: 100%;
    left: 0;
    top: 0;
}

viralbuzz-create-poll .poll-skeleton-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    viralbuzz-create-poll .poll-skeleton-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

viralbuzz-create-poll .poll-skeleton-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@keyframes poll-skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

viralbuzz-create-poll .poll-form-skeleton .skeleton-base {
    background: linear-gradient(
        90deg,
        #1a1a1a 0%,
        #2a2a2a 50%,
        #1a1a1a 100%
    );
    background-size: 200% 100%;
    animation: poll-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
}

viralbuzz-create-poll .poll-skeleton-title {
    height: 32px;
    width: 60%;
    max-width: 300px;
}

viralbuzz-create-poll .poll-skeleton-field {
    height: 44px;
    width: 100%;
}

viralbuzz-create-poll .poll-skeleton-banner {
    height: 250px;
    width: 100%;
    border-radius: 8px;
}

@media (min-width: 768px) {
    viralbuzz-create-poll .poll-skeleton-banner {
        height: 400px;
    }
}

viralbuzz-create-poll .poll-skeleton-section {
    height: 28px;
    width: 40%;
    margin-top: 0.5rem;
}

viralbuzz-create-poll .poll-skeleton-question {
    height: 120px;
    width: 100%;
    border-radius: 8px;
}

viralbuzz-create-poll .poll-skeleton-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

viralbuzz-create-poll .poll-skeleton-sidebar-item {
    height: 24px;
    width: 100%;
}

viralbuzz-create-poll .poll-skeleton-btn {
    height: 44px;
    width: 100%;
}

/* Page header with status pill (Draft / Published / Scheduled) */
viralbuzz-create-poll .page-header-with-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

viralbuzz-create-poll .page-header-with-status .page-title {
    margin-bottom: 0;
}

viralbuzz-create-poll .poll-status-pill {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
}

viralbuzz-create-poll .poll-status-pill-draft {
    background-color: rgba(156, 163, 175, 0.25);
    color: var(--text-gray-300);
}

viralbuzz-create-poll .poll-status-pill-published {
    background-color: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

viralbuzz-create-poll .poll-status-pill-scheduled {
    background-color: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

/* Two Column Layout */
.poll-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 1rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .poll-form-column {
        overflow-y: visible;
    }
}

@media (min-width: 1024px) {
    .poll-layout {
        grid-template-columns: 1fr 280px;
        gap: 1.5rem;
        padding: 2rem 1.5rem;
        max-width: 1400px;
        margin: 0 auto;
    }
    
    body.sidebar-open .poll-layout {
        grid-template-columns: 1fr 280px;
    }
    
    body.sidebar-closed .poll-layout {
        grid-template-columns: 1fr 280px;
    }
}

.poll-form-column {
    min-width: 0;
    padding: 0;
    width: 100%;
}

@media (min-width: 1024px) {
    .poll-form-column {
        max-width: none;
    }
}

/* Poll Type Selection */
.poll-type-selection {
    display: block;
}

.poll-type-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .poll-type-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

.poll-type-option {
    background-color: #21212B;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    padding: 1.5rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-family);
    width: 100%;
    display: flex;
    flex-direction: column;
}

.poll-type-option:hover {
    border-color: var(--neon-green);
}

.poll-type-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.poll-type-icon {
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    background: var(--purple-600);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.poll-type-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--text-white);
}

.poll-type-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-white);
    margin: 0;
    font-family: var(--font-family);
    flex: 1;
}

.poll-type-description {
    font-size: 0.875rem;
    color: var(--text-gray-400);
    font-family: var(--font-family);
    margin: 0;
    line-height: 1.5;
}

/* Poll Form Container */
.poll-form-container {
    display: block;
}

.poll-form-container.hidden {
    display: none;
}

/* Back Button - Styled as a button on top */
.btn-back {
    background-color: var(--dark-surface);
    color: var(--text-white);
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    margin-bottom: 0;
    text-decoration: none;
}

.btn-back:hover {
    background-color: var(--gray-800);
    border-color: var(--text-gray-600);
    color: var(--text-white);
}

.btn-back:active {
    transform: scale(0.98);
}

.btn-back svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* Page Header */
.page-header {
    margin-bottom: 1.5rem;
    padding: 0;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-gray-700);
}

.poll-form .page-header:first-child {
    margin-top: 0;
}

.page-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

@media (min-width: 768px) {
    .page-title {
        font-size: 2.5rem;
    }
}

.page-subtitle {
    font-size: 1rem;
    color: var(--text-gray-400);
    font-family: var(--font-family);
}

/* Poll Form */
.poll-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0;
}

/* Form Section */
.form-section {
    background-color: #21212B;
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--border-gray-700);
}

/* Poll type selection section needs padding */
.poll-type-selection .form-section {
    padding: 1.5rem;
}

@media (min-width: 768px) {
    .poll-type-selection .form-section {
        padding: 1.5rem;
    }
}

/* Other form sections need padding for their content */
.poll-form-container .form-section {
    padding: 1.5rem;
}

@media (min-width: 768px) {
    .poll-form-container .form-section {
        padding: 2rem;
    }
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

viralbuzz-create-poll .section-header .section-title {
    margin-bottom: 0;
}

.section-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-white);
    font-family: var(--font-family);
    margin-bottom: 0.5rem;
}

/* Form Fields */
.form-field {
    margin-bottom: 1.5rem;
}

.form-field:last-child {
    margin-bottom: 0;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-300);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.label-hint {
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--text-gray-500);
    margin-left: 0.5rem;
    font-family: var(--font-family);
}

.required {
    color: #ef4444;
}

.form-input,
.form-textarea,
select.form-input,
select {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    font-size: 1rem;
    font-family: var(--font-family);
    transition: border-color 0.2s ease;
}

/* Ensure question inputs match Poll Title/Description styling exactly */
viralbuzz-create-poll .question-content .form-input,
viralbuzz-create-poll .question-content input[type="text"],
viralbuzz-create-poll .question-content .question-title-input,
viralbuzz-create-poll .question-content input.form-input,
viralbuzz-create-poll .question-block .question-content input,
viralbuzz-create-poll .question-block .question-content .form-input,
viralbuzz-create-poll .form-field input[type="text"],
viralbuzz-create-poll .form-field .form-input,
viralbuzz-create-poll .question-block input[type="text"] {
    width: 100% !important;
    background-color: #121212 !important;
    background-color: var(--dark-surface) !important;
    border: 1px solid #4b5563 !important;
    border: 1px solid var(--border-gray-600) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #4b5563 !important;
    border-color: var(--border-gray-600) !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    color: #ffffff !important;
    color: var(--text-white) !important;
    font-size: 1rem !important;
    font-family: var(--font-family) !important;
    transition: border-color 0.2s ease !important;
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    min-height: 2.75rem !important;
}

/* Select in question content - with dropdown arrow - must match Poll Title exactly */
viralbuzz-create-poll .question-content select,
viralbuzz-create-poll .question-content select.form-input,
viralbuzz-create-poll .question-block .question-content select,
viralbuzz-create-poll .form-field select,
viralbuzz-create-poll .question-block select {
    width: 100% !important;
    background-color: #121212 !important;
    background-color: var(--dark-surface) !important;
    border: 1px solid #4b5563 !important;
    border: 1px solid var(--border-gray-600) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #4b5563 !important;
    border-color: var(--border-gray-600) !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    padding-right: 2.5rem !important;
    color: #ffffff !important;
    color: var(--text-white) !important;
    font-size: 1rem !important;
    font-family: var(--font-family) !important;
    transition: border-color 0.2s ease !important;
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23ffffff' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1.25rem !important;
    cursor: pointer !important;
    min-height: 2.75rem !important;
}

viralbuzz-create-poll .question-content .form-input:focus,
viralbuzz-create-poll .question-content input[type="text"]:focus,
viralbuzz-create-poll .question-content select:focus,
viralbuzz-create-poll .question-content .question-title-input:focus,
viralbuzz-create-poll .question-block .question-content input:focus,
viralbuzz-create-poll .question-block .question-content select:focus,
viralbuzz-create-poll .form-field input:focus,
viralbuzz-create-poll .form-field select:focus {
    outline: none !important;
    border-color: var(--neon-green) !important;
    border-width: 1px !important;
}

viralbuzz-create-poll .question-content .form-input::placeholder,
viralbuzz-create-poll .question-content input[type="text"]::placeholder {
    color: var(--text-gray-500) !important;
}

/* Select element specific styling */
viralbuzz-create-poll select.form-input,
viralbuzz-create-poll select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23ffffff' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    padding-right: 2.5rem;
    cursor: pointer;
}

/* Remove duplicate/conflicting select rules - use the !important ones above */

viralbuzz-create-poll .form-input:focus,
viralbuzz-create-poll .form-textarea:focus,
viralbuzz-create-poll select.form-input:focus,
viralbuzz-create-poll select:focus,
viralbuzz-create-poll input[type="text"]:focus,
viralbuzz-create-poll input[type="url"]:focus,
viralbuzz-create-poll .question-content .form-input:focus,
viralbuzz-create-poll .question-content input[type="text"]:focus,
viralbuzz-create-poll .question-content select:focus {
    outline: none;
    border-color: var(--neon-green) !important;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-gray-500);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Image Upload */
.image-upload-label {
    cursor: pointer;
    display: block;
    width: 100%;
}

.hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.feature-image-banner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 250px;
    background: #000;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px dashed var(--border-gray-600);
    transition: border-color 0.2s ease;
}

@media (min-width: 768px) {
    .feature-image-banner {
        height: 400px;
    }
}

.feature-image-banner:hover {
    border-color: var(--neon-green);
}

.feature-image-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-gray-500);
    z-index: 10;
}

.upload-placeholder svg {
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.75rem;
}

.upload-text {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    font-family: var(--font-family);
}

.upload-hint {
    font-size: 0.75rem;
    color: var(--text-gray-500);
    font-family: var(--font-family);
}

/* Poll Options Grid */
.poll-options-grid {
    display: grid;
    gap: 1rem;
}

.poll-options-grid-1up {
    grid-template-columns: repeat(2, 1fr);
}

.poll-options-grid-2up {
    grid-template-columns: repeat(2, 1fr);
}

.poll-options-grid-3up {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
    .poll-options-grid-3up {
        grid-template-columns: repeat(2, 1fr);
    }
}

.poll-option-card {
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    padding: 1rem;
    transition: border-color 0.2s ease;
}

.poll-option-card:hover {
    border-color: var(--text-gray-600);
}

.poll-option-image-preview {
    position: relative;
    width: 100%;
    max-width: 250px;
    max-height: 250px;
    aspect-ratio: 1;
    background: #000;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px dashed var(--border-gray-600);
    margin-bottom: 0.75rem;
    transition: border-color 0.2s ease;
    margin-left: auto;
    margin-right: auto;
}

.poll-option-image-preview:hover {
    border-color: var(--neon-green);
}

.poll-option-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.poll-option-image-preview .upload-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-gray-500);
}

.poll-option-image-preview .upload-placeholder svg {
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.5rem;
}

.poll-option-image-preview .upload-text {
    font-size: 0.75rem;
}

/* Poll description WYSIWYG (SunEditor) */
/* All SunEditor dark theme, image overflow fix, and dialog styles
   are now centralized in suneditor.min.css (appended ViralBuzz section). */
viralbuzz-create-poll .poll-description-editor.suneditor-editor,
viralbuzz-create-poll .poll-description-editor {
    min-height: 120px;
    max-width: 100%;
    overflow: hidden;
}

/* Ensure SunEditor root inside poll form is bounded */
viralbuzz-create-poll .poll-description-editor .sun-editor,
viralbuzz-create-poll .form-group:has(.poll-description-editor) .sun-editor {
    max-width: 100% !important;
}

/* Text Options */
.text-options-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.text-option-item {
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: border-color 0.2s ease;
}

.text-option-item:hover {
    border-color: var(--text-gray-600);
}

.custom-radio {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border-gray-700);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

/* Video Embed */
.video-embed-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background: #000;
    border-radius: 0.5rem;
    overflow: hidden;
    margin-top: 1rem;
}

.video-embed-container.hidden {
    display: none;
}

.video-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Questions Container (for Multiple Poll) */
.questions-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.question-block {
    background-color: var(--dark-surface);
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-700);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.question-accordion-header {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.question-accordion-header:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.question-header-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.move-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.move-btn {
    background: transparent;
    border: 1px solid rgba(156, 163, 175, 0.3);
    color: var(--text-gray-400);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 0.25rem;
    min-width: 1.5rem;
    min-height: 1.5rem;
}

.move-btn:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--neon-green);
    color: var(--neon-green);
    transform: scale(1.1);
}

.move-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.move-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.move-btn svg {
    width: 1rem;
    height: 1rem;
    pointer-events: none;
}

.question-number-accent {
    width: 4px;
    height: 2rem;
    background: #FF0033;
    border-radius: 2px;
    flex-shrink: 0;
}

.question-header-text {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.question-number {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-400);
    font-family: var(--font-family);
}

.question-title-text {
    color: var(--text-white);
    font-weight: 600;
    font-family: var(--font-family);
}

.question-header-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.accordion-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-gray-400);
    transition: transform 0.3s ease;
}

.btn-remove-question {
    color: #ef4444;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s ease;
}

.btn-remove-question:hover {
    color: #dc2626;
}

.btn-remove-question svg {
    width: 1.25rem;
    height: 1.25rem;
}

.question-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.question-accordion-content.expanded {
    max-height: 5000px;
    transition: max-height 0.5s ease-in;
}

.question-content {
    padding: 1.5rem;
    padding-top: 0;
}

.question-options-container {
    margin-top: 1rem;
}

/* Add Question/Choice Buttons */
.btn-add-question,
.btn-add-choice {
    background-color: var(--neon-green);
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-family: var(--font-family);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.2s ease;
    margin-top: 0;
}

.btn-add-question:hover,
.btn-add-choice:hover {
    opacity: 0.9;
}

.btn-add-question svg,
.btn-add-choice svg {
    width: 1.25rem;
    height: 1.25rem;
}

.btn-remove-choice {
    color: #ef4444;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.btn-remove-choice:hover {
    color: #dc2626;
}

.btn-remove-choice svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Right Sidebar - Actions */
.poll-actions-sidebar {
    display: none;
}

@media (min-width: 1024px) {
    .poll-actions-sidebar {
        display: block;
        align-self: start;
        width: 280px;
        position: sticky;
        top: 20px; 
        height: fit-content;
        max-height: calc(100vh - 100px);
    }
}

.actions-sticky {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
    width: 100%;
    height: fit-content;
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

.actions-sticky::-webkit-scrollbar {
    width: 3px;
}

.actions-sticky::-webkit-scrollbar-track {
    background: transparent;
}

.actions-sticky::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

.actions-sticky:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
}

.actions-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 1.5rem;
    font-family: var(--font-family);
}

/* Poll Settings Accordion (right sidebar) */
viralbuzz-create-poll .poll-settings-accordion {
    margin-bottom: 1rem;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.2);
}

viralbuzz-create-poll .poll-settings-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

viralbuzz-create-poll .poll-settings-accordion-header:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

viralbuzz-create-poll .poll-settings-accordion-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-white);
    font-family: var(--font-family);
}

viralbuzz-create-poll .poll-settings-accordion-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-gray-400);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

viralbuzz-create-poll .poll-settings-accordion-content {
    max-height: 0;
    overflow: hidden;
    overflow-y: auto;
    transition: max-height 0.35s ease-out;
}

viralbuzz-create-poll .poll-settings-accordion-content.expanded {
    max-height: min(50vh, 400px);
    transition: max-height 0.4s ease-in;
}

viralbuzz-create-poll .poll-settings-accordion-content .sidebar-form-field {
    padding: 0.75rem 1rem;
}

viralbuzz-create-poll .poll-expiry-fields {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.actions-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    font-family: var(--font-family);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.action-btn-primary {
    background: linear-gradient(to right, var(--neon-pink), var(--purple-500), var(--neon-cyan));
    color: var(--text-white);
}

.action-btn-primary:hover {
    opacity: 0.9;
}

.action-btn-secondary {
    background-color: var(--dark-surface);
    color: var(--text-white);
    border: 1px solid var(--border-gray-700);
}

.action-btn-secondary:hover {
    background-color: var(--gray-800);
    border-color: var(--text-gray-600);
}

.action-btn-link {
    background: transparent;
    color: var(--text-gray-300);
    border: 1px solid var(--border-gray-700);
}

.action-btn-link:hover {
    color: var(--text-white);
    border-color: var(--text-gray-600);
}

/* Mobile Actions Bar */
.mobile-actions-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--dark-card);
    border-top: 1px solid var(--border-gray-700);
    padding: 1rem;
    z-index: 40;
    display: flex;
    gap: 0.75rem;
}

@media (min-width: 1024px) {
    .mobile-actions-bar {
        display: none;
    }
}

.mobile-actions-bar .action-btn {
    flex: 1;
}

.mobile-actions-bar .action-btn-primary {
    flex: 2;
}

@media (max-width: 1023px) {
    .poll-form-column {
        padding-bottom: 100px;
    }
}

/* Multiple poll — section header + nested question row actions (match create-story blocks) */
viralbuzz-create-poll .story-block-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

viralbuzz-create-poll .btn-collapse-blocks {
    padding: 0.5rem 0.9rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-600);
    background: transparent;
    color: var(--text-gray-300);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-family);
}

viralbuzz-create-poll .btn-collapse-blocks:hover {
    color: var(--text-white);
    border-color: var(--border-gray-500);
}

viralbuzz-create-poll .section-header .btn-add-block,
viralbuzz-create-poll .section-header .btn-add-question {
    margin-top: 0;
}

viralbuzz-create-poll .btn-add-block {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--neon-green);
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    font-family: var(--font-family);
}

viralbuzz-create-poll .btn-add-block:hover {
    opacity: 0.9;
}

viralbuzz-create-poll .btn-add-block svg {
    width: 1.25rem;
    height: 1.25rem;
}

viralbuzz-create-poll .question-header-actions .gallery-image-chevron,
viralbuzz-create-poll .question-header-actions .gallery-image-remove-btn {
    width: 2rem;
    height: 2rem;
}

viralbuzz-create-poll .gallery-image-remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 0.375rem;
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
    flex-shrink: 0;
}

viralbuzz-create-poll .gallery-image-remove-btn:hover {
    background: rgba(239, 68, 68, 0.22);
    color: #fca5a5;
}

viralbuzz-create-poll .gallery-image-remove-btn:active {
    transform: scale(0.96);
}

viralbuzz-create-poll .gallery-image-remove-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

viralbuzz-create-poll .gallery-image-chevron {
    border: 1px solid var(--border-gray-600);
    border-radius: 0.375rem;
    background: #1a1a22;
    color: var(--text-gray-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

viralbuzz-create-poll .gallery-image-chevron svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
}

viralbuzz-create-poll .gallery-image-chevron.collapsed svg {
    transform: rotate(-90deg);
}




































































/* Create Story Component Styles */

viralbuzz-create-story {
    display: block;
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px; /* Account for fixed header */
    background-color: #14141A;
}

/* Content container for story - ensure proper scrolling */
viralbuzz-create-story .content-container {
    height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    /* Auto-hide scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

viralbuzz-create-story .content-container::-webkit-scrollbar {
    width: 6px;
}

viralbuzz-create-story .content-container::-webkit-scrollbar-track {
    background: transparent;
}

viralbuzz-create-story .content-container::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

viralbuzz-create-story .content-container:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
}

/* Two Column Layout */
.story-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 1rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .story-layout {
        grid-template-columns: 1fr 280px;
        gap: 1.5rem;
        padding: 2rem 1.5rem;
        max-width: 1400px;
        margin: 0 auto;
    }
}

.story-form-column {
    min-width: 0;
    padding: 0;
    width: 100%;
}

@media (min-width: 1024px) {
    .story-form-column {
        max-width: none;
    }
}

/* Story Form */
.story-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Form Section */
.form-section {
    background-color: #21212B;
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
}

/* Page Header */
.page-header {
    margin-bottom: 1.5rem;
}

.page-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.page-subtitle {
    font-size: 1rem;
    color: var(--text-gray-400);
    font-family: var(--font-family);
}

/* Form Fields */
.form-field {
    margin-bottom: 1.5rem;
}

.form-field:last-child {
    margin-bottom: 0;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-300);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.form-label-hint {
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--text-gray-500);
    margin-left: 0.5rem;
}

.required {
    color: #ef4444;
}

.form-input,
.form-textarea {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    font-family: var(--font-family);
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--neon-green);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-gray-500);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Feature Image */
.feature-image-container {
    margin-top: 0.5rem;
}

.feature-image-label {
    cursor: pointer;
    display: block;
}

.feature-image-preview {
    width: 100%;
    max-width: 1200px;
    height: 400px;
    background: #000;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px dashed var(--border-gray-600);
    transition: border-color 0.2s ease;
    position: relative;
}

.feature-image-preview:hover {
    border-color: var(--neon-green);
}

@media (max-width: 768px) {
    .feature-image-preview {
        height: 250px;
    }
}

.feature-image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-gray-500);
    z-index: 10;
}

.feature-image-placeholder svg {
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.75rem;
}

.feature-image-text {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.feature-image-hint {
    font-size: 0.75rem;
}

.feature-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Section Header */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.story-block-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-collapse-blocks {
    padding: 0.5rem 0.9rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-600);
    background: transparent;
    color: var(--text-gray-300);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-family);
}

.btn-collapse-blocks:hover {
    color: var(--text-white);
    border-color: var(--border-gray-500);
}

.section-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-white);
    font-family: var(--font-family);
}

/* Add Block Button */
.btn-add-block {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--neon-green);
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    font-family: var(--font-family);
}

.btn-add-block:hover {
    opacity: 0.9;
}

.btn-add-block svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Story Blocks Container */
.story-blocks-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-gray-500);
}

.empty-state svg {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    opacity: 0.5;
}

.empty-state p {
    font-size: 0.875rem;
    font-family: var(--font-family);
}

/* Story Block */
.story-block {
    background-color: var(--dark-surface);
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-700);
    transition: all 0.2s ease;
    overflow: hidden;
}

.story-block:hover {
    border-color: var(--border-gray-600);
}

.story-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    cursor: pointer;
    user-select: none;
}

.story-block-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.story-block-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    cursor: pointer;
}

.block-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    font-family: var(--font-family);
}

.block-number-text {
    font-size: 0.875rem;
    color: var(--text-gray-400);
    font-family: var(--font-family);
}

.story-block-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-remove-block {
    background: transparent;
    border: none;
    color: #ef4444;
    padding: 0.25rem;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-remove-block:hover {
    color: #dc2626;
}

.btn-remove-block svg {
    width: 1.25rem;
    height: 1.25rem;
}

.chevron-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-gray-500);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.story-block-header.active .chevron-icon {
    transform: rotate(180deg);
}

/* Move Buttons */
.move-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.move-btn {
    background: transparent;
    border: 1px solid rgba(156, 163, 175, 0.3);
    color: var(--text-gray-400);
    padding: 0.25rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
}

.move-btn:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--neon-green);
    color: var(--neon-green);
    transform: scale(1.1);
}

.move-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.move-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.move-btn svg {
    width: 1rem;
    height: 1rem;
    pointer-events: none;
}

/* Story block — image gallery */
viralbuzz-create-story .gallery-images-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

viralbuzz-create-story .gallery-image-item {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    padding: 1rem;
}

viralbuzz-create-story .gallery-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

viralbuzz-create-story .btn-preview-gallery {
    border: 1px solid var(--border-gray-600);
    background: transparent;
    color: var(--text-gray-300);
    border-radius: 0.5rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

viralbuzz-create-story .btn-preview-gallery:hover {
    color: var(--text-white);
    border-color: var(--border-gray-500);
}

viralbuzz-create-story .gallery-image-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

viralbuzz-create-story .gallery-image-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

viralbuzz-create-story .gallery-img-move-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex-shrink: 0;
}

viralbuzz-create-story .gallery-img-move-buttons .move-btn {
    min-width: 1.375rem;
    min-height: 1.375rem;
    padding: 0.2rem;
}

viralbuzz-create-story .gallery-image-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-gray-300);
}

viralbuzz-create-story .gallery-image-remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 0.375rem;
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
    flex-shrink: 0;
}

viralbuzz-create-story .gallery-image-remove-btn:hover {
    background: rgba(239, 68, 68, 0.22);
    color: #fca5a5;
}

viralbuzz-create-story .gallery-image-remove-btn:active {
    transform: scale(0.96);
}

viralbuzz-create-story .gallery-image-remove-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

viralbuzz-create-story .gallery-image-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

viralbuzz-create-story .gallery-image-chevron {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-gray-600);
    border-radius: 0.375rem;
    background: #1a1a22;
    color: var(--text-gray-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

viralbuzz-create-story .gallery-image-chevron svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
}

viralbuzz-create-story .gallery-image-chevron.collapsed svg {
    transform: rotate(-90deg);
}

viralbuzz-create-story .gallery-image-body {
    max-height: 5000px;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease;
    opacity: 1;
}

viralbuzz-create-story .gallery-image-body.collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

viralbuzz-create-story .gallery-dropzone-label {
    display: block;
    cursor: pointer;
    margin: 0;
}

viralbuzz-create-story .gallery-image-item .question-image-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
    gap: 1rem;
}

@media (max-width: 900px) {
    viralbuzz-create-story .gallery-image-item .question-image-grid {
        grid-template-columns: 1fr;
    }
}

viralbuzz-create-story .gallery-image-preview {
    border: 1px dashed rgba(156, 163, 175, 0.45);
    border-radius: 0.5rem;
    background: #18181f;
    min-height: 7rem;
    max-height: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color 0.15s ease, background 0.15s ease;
}

viralbuzz-create-story .gallery-dropzone-label:hover .gallery-image-preview:not(.gallery-image-preview--filled) {
    border-color: rgba(0, 255, 136, 0.5);
    background: #1a1a22;
}

viralbuzz-create-story .gallery-image-preview--filled {
    border-style: solid;
    border-color: rgba(156, 163, 175, 0.35);
    padding: 0;
    min-height: auto;
    max-height: none;
}

viralbuzz-create-story .gallery-dropzone-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    text-align: center;
}

viralbuzz-create-story .gallery-dropzone-icon {
    width: 2rem;
    height: 2rem;
    color: rgba(156, 163, 175, 0.85);
    flex-shrink: 0;
}

viralbuzz-create-story .gallery-dropzone-text {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-gray-300);
}

viralbuzz-create-story .gallery-dropzone-hint {
    font-size: 0.6875rem;
    color: var(--text-gray-500);
}

viralbuzz-create-story .gallery-preview-img-wrap {
    width: 100%;
    max-height: 11rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f0f12;
}

viralbuzz-create-story .gallery-preview-img {
    width: 100%;
    max-height: 11rem;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 0.375rem;
}

.gallery-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.78);
    padding: 1rem;
}

.gallery-preview-modal.active {
    display: flex;
}

.gallery-preview-modal-content {
    width: min(980px, 100%);
    max-height: 86vh;
    background: #14141A;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
    padding: 0.75rem;
}

@media (max-width: 900px) {
    .gallery-preview-modal-content {
        overflow-y: auto;
    }
}

.gallery-preview-topbar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.gallery-preview-chip {
    justify-self: start;
    padding: 0.55rem 1rem;
    background: #21212B;
    border: 1px solid var(--border-gray-700);
    color: var(--text-gray-300);
    border-radius: 0.25rem;
    font-size: 0.95rem;
}

.gallery-preview-count-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gallery-preview-count-label {
    color: var(--text-gray-400);
    font-size: 0.9rem;
}

.gallery-preview-count {
    min-width: 64px;
    text-align: center;
    padding: 0.25rem 0.5rem;
    background: #0f0f13;
    color: var(--text-white);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.gallery-preview-close-btn {
    justify-self: end;
    border: 1px solid var(--border-gray-600);
    border-radius: 0.25rem;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: #21212B;
    color: var(--text-gray-300);
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gallery-preview-close-btn:hover {
    color: var(--text-white);
    border-color: var(--border-gray-500);
}

.gallery-preview-close-btn svg {
    width: 1rem;
    height: 1rem;
}

.gallery-preview-stage {
    position: relative;
    background: transparent;
    min-height: 0;
    overflow: hidden;
}

.gallery-preview-viewport {
    width: min(100%, 900px);
    margin: 0 auto;
    overflow: hidden;
    background: #0b0b10;
    border-radius: 0.25rem 0.25rem 0 0;
    border: 1px solid var(--border-gray-700);
    height: min(52vh, 460px);
    position: relative;
}

/* Keep preview dimensions constant across slides (portrait/landscape) */
.gallery-preview-modal-content.is-portrait .gallery-preview-viewport,
.gallery-preview-modal-content.is-landscape .gallery-preview-viewport {
    width: min(100%, 900px);
}

.gallery-preview-modal-content.is-portrait .gallery-preview-caption,
.gallery-preview-modal-content.is-landscape .gallery-preview-caption {
    width: min(100%, 900px);
}

.gallery-preview-track {
    display: flex;
    transition: transform 0.35s ease;
    will-change: transform;
}

.gallery-preview-slide {
    flex: 0 0 100%;
    min-width: 100%;
    height: min(52vh, 460px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
}

.gallery-preview-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
}

.gallery-preview-zoom-controls {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 4;
    display: flex;
    gap: 0.35rem;
    background: rgba(12, 15, 24, 0.78);
    border: 1px solid var(--border-gray-600);
    border-radius: 999px;
    padding: 0.25rem;
}

.gallery-zoom-btn {
    border: 1px solid var(--border-gray-600);
    background: #1a1f2b;
    color: var(--text-gray-200);
    min-width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gallery-zoom-btn.reset {
    min-width: 3.2rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.gallery-zoom-btn:hover {
    color: #fff;
    border-color: var(--neon-cyan);
}

.gallery-preview-arrow {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--border-gray-600);
    background: rgba(17, 24, 39, 0.85);
    color: var(--text-gray-200);
    cursor: pointer;
    z-index: 3;
}

.gallery-preview-arrow.prev {
    left: 0.75rem;
}

.gallery-preview-arrow.next {
    right: 0.75rem;
}

.gallery-preview-arrow svg {
    width: 1rem;
    height: 1rem;
}

.gallery-preview-arrow:hover {
    border-color: var(--border-gray-500);
    background: #1f2937;
    color: var(--text-white);
}

.gallery-preview-caption {
    width: min(100%, 900px);
    margin: 0 auto;
    background: #21212B;
    color: var(--text-gray-200);
    height: 5.25rem;
    padding: 0.55rem 0.8rem;
    border-radius: 0 0 0.25rem 0.25rem;
    line-height: 1.25;
    border: 1px solid var(--border-gray-700);
    border-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.gallery-preview-caption-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.gallery-preview-caption-title {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.15;
    color: #fff;
    font-weight: 700;
}

.gallery-preview-caption-desc {
    margin: 0.2rem 0 0 0;
    font-size: 0.86rem;
    color: var(--text-gray-300);
    min-height: 2.05rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.gallery-preview-caption-meta {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.gallery-preview-meta-chip {
    background: #171721;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    padding: 0.35rem 0.55rem;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
}

.gallery-preview-meta-chip span {
    display: block;
    font-size: 0.68rem;
    color: var(--text-gray-500);
    margin-bottom: 0.1rem;
}

.gallery-preview-meta-chip strong {
    display: block;
    font-size: 0.8rem;
    color: var(--text-gray-200);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-meta-link {
    color: #60a5fa;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gallery-meta-link:hover {
    color: #93c5fd;
}

.gallery-link-modal {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 1rem;
}

.gallery-link-modal.active {
    display: flex;
}

.gallery-link-modal-content {
    width: min(460px, 100%);
    background: #171721;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.75rem;
    overflow: hidden;
}

.gallery-link-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border-gray-700);
}

.gallery-link-modal-header h3 {
    margin: 0;
    color: var(--text-white);
    font-size: 1rem;
}

.gallery-link-modal-close {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-gray-600);
    border-radius: 0.35rem;
    background: #21212B;
    color: var(--text-gray-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gallery-link-modal-close svg {
    width: 1rem;
    height: 1rem;
}

.gallery-link-modal-body {
    padding: 1rem;
}

.gallery-link-modal-hint {
    margin-top: 0.4rem;
    color: var(--text-gray-500);
    font-size: 0.75rem;
}

.gallery-link-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.8rem 1rem 1rem;
}

.btn-cancel-link,
.btn-save-link {
    border-radius: 0.5rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--border-gray-600);
    background: #21212B;
    color: var(--text-gray-300);
    cursor: pointer;
    font-weight: 600;
}

.btn-save-link {
    border-color: #0f5132;
    background: #064e3b;
    color: #a7f3d0;
}

.gallery-preview-thumbs-wrap {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 0.5rem;
}

.gallery-thumb-nav {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-gray-600);
    border-radius: 0.25rem;
    background: #1a1a22;
    color: var(--text-gray-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gallery-thumb-nav:hover {
    border-color: var(--border-gray-500);
    color: var(--text-white);
}

.gallery-thumb-nav svg {
    width: 1.05rem;
    height: 1.05rem;
}

.gallery-preview-thumbs {
    display: flex;
    gap: 0.55rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 0.2rem 0;
}

.gallery-preview-thumb {
    flex: 0 0 96px;
    width: 96px;
    height: 62px;
    border-radius: 0.35rem;
    border: 2px solid var(--border-gray-700);
    overflow: hidden;
    cursor: pointer;
    background: #101018;
}

.gallery-preview-thumb.active {
    border-color: var(--neon-green);
    box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.35);
}

.gallery-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 900px) {
    .gallery-preview-topbar {
        grid-template-columns: 1fr;
        justify-items: start;
    }
    .gallery-preview-count-wrap {
        width: 100%;
        justify-content: space-between;
    }
    .gallery-preview-close-btn {
        justify-self: start;
    }
    .gallery-preview-caption {
        flex-direction: column;
        align-items: stretch;
    }
    .gallery-preview-caption-meta {
        width: 100%;
    }
    .gallery-preview-meta-chip {
        min-width: 0;
        width: 100%;
        max-width: none;
        flex: 1;
    }
}

.gallery-preview-meta,
.gallery-preview-title,
.gallery-preview-index,
.gallery-preview-meta-row,
.gallery-preview-nav {
    display: none;
}

/* Story Block Content */
.story-block-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 1.5rem;
    border-top: 1px solid transparent;
    transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.22s ease, border-color 0.22s ease;
}

.story-block-content.active {
    max-height: 2400px;
    opacity: 1;
    padding: 1.5rem;
    border-top-color: var(--border-gray-700);
}

/* Actions Column (Desktop) */
.story-actions-column {
    display: none;
}

@media (min-width: 1024px) {
    .story-actions-column {
        display: block;
        position: sticky;
        top: 80px;
        height: fit-content;
    }
}

.actions-bar {
    background-color: #21212B;
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.btn-action {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-family);
    text-align: center;
}

.btn-action.btn-secondary {
    background: transparent;
    border: 1px solid var(--border-gray-600);
    color: var(--text-gray-300);
}

.btn-action.btn-secondary:hover {
    color: var(--text-white);
    border-color: var(--border-gray-500);
}

.btn-action.btn-primary {
    background: linear-gradient(to right, var(--neon-pink), var(--purple-500), var(--neon-cyan));
    color: var(--text-white);
}

.btn-action.btn-primary:hover {
    opacity: 0.9;
}

/* Mobile Actions Bar */
.mobile-actions-bar {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background-color: #21212B;
    border-top: 1px solid var(--border-gray-700);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
}

@media (min-width: 1024px) {
    .mobile-actions-bar {
        display: none;
    }
}

/* Block Type Modal */
.block-type-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.block-type-modal.active {
    display: flex;
}

.block-type-modal-content {
    background-color: #21212B;
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-700);
    padding: 1.5rem;
    max-width: 800px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.block-type-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.block-type-modal-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.block-type-modal-heading-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.block-type-modal-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-white);
    font-family: var(--font-family);
    margin: 0;
}

.block-type-modal-subtitle {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-gray-400);
}

.block-type-back-btn {
    background: transparent;
    border: 1px solid var(--border-gray-600);
    color: var(--text-gray-300);
    border-radius: 0.5rem;
    height: 2rem;
    padding: 0 0.625rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.block-type-back-btn:hover {
    border-color: var(--border-gray-500);
    color: var(--text-white);
}

.block-type-back-btn svg {
    width: 1rem;
    height: 1rem;
}

.block-type-modal-close {
    background: transparent;
    border: none;
    color: var(--text-gray-400);
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.block-type-modal-close:hover {
    color: var(--text-white);
}

.block-type-modal-close svg {
    width: 1.5rem;
    height: 1.5rem;
}

.block-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.block-type-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.block-type-option {
    background: var(--dark-surface);
    border: 2px solid var(--border-gray-700);
    border-radius: 0.5rem;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.block-type-option:hover {
    border-color: var(--neon-green);
    transform: translateY(-2px);
}

.block-type-option.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.block-type-option.disabled:hover {
    border-color: var(--border-gray-700);
    transform: none;
}

.block-type-option svg {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--neon-green);
}

.block-type-option-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-white);
    font-family: var(--font-family);
}

.block-type-option-badge {
    font-size: 0.6875rem;
    color: var(--text-gray-300);
    border: 1px solid var(--border-gray-600);
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
}

.block-type-category-option {
    align-items: flex-start;
    text-align: left;
    min-height: 170px;
}

.block-type-category-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.block-type-category-count {
    font-size: 0.8125rem;
    color: var(--text-gray-400);
}

.block-type-options-view {
    animation: blockTypeFadeIn 0.18s ease;
}

@keyframes blockTypeFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 860px) {
    .block-type-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .block-type-category-grid {
        grid-template-columns: 1fr;
    }
}

/* Hidden class */
.hidden {
    display: none !important;
}

/* Personality / Trivia quiz in story: one question per block — hide inner reorder */
viralbuzz-create-story .story-pq-single .move-buttons,
viralbuzz-create-story .story-tq-single .move-buttons,
viralbuzz-create-story .story-poll-single .move-buttons {
    display: none;
}

viralbuzz-create-story .story-pq-hint,
viralbuzz-create-story .story-tq-hint,
viralbuzz-create-story .story-poll-hint,
viralbuzz-create-story .story-list-hint {
    font-size: 0.875rem;
    color: #9ca3af;
    margin: 0 0 0.75rem 0;
    line-height: 1.4;
}

/* Story block: countdown items */
viralbuzz-create-story .countdown-items-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Force-reset any global countdown styles leaking from create-countdown.css */
viralbuzz-create-story .countdown-item.list-block {
    padding: 0 !important;
    margin: 0 !important;
}

viralbuzz-create-story .countdown-item .list-block-header {
    margin-bottom: 0 !important;
    padding: 1rem !important;
}

viralbuzz-create-story .countdown-item .list-block-header-left,
viralbuzz-create-story .countdown-item .list-block-header-right {
    margin: 0 !important;
}

viralbuzz-create-story .countdown-item .list-block-content {
    padding: 0 1.5rem !important;
    margin: 0 !important;
}

viralbuzz-create-story .countdown-item-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 1.5rem;
    border-top: 1px solid transparent;
    transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.22s ease, border-color 0.22s ease;
}

viralbuzz-create-story .countdown-item-content.active {
    max-height: 2400px;
    opacity: 1;
    padding: 1.5rem;
    border-top-color: var(--border-gray-700);
}

/* Force-reset ranked list styles leaking from create-ranked-list.css */
viralbuzz-create-story .ranked-item.list-block {
    padding: 0 !important;
    margin: 0 !important;
}

viralbuzz-create-story .ranked-item .list-block-header {
    margin-bottom: 0 !important;
    padding: 1rem !important;
}

viralbuzz-create-story .ranked-item .list-block-header-left,
viralbuzz-create-story .ranked-item .list-block-header-right {
    margin: 0 !important;
}

viralbuzz-create-story .ranked-item .list-block-content {
    padding: 0 1.5rem !important;
    margin: 0 !important;
}

viralbuzz-create-story .countdown-item .list-block-content.active,
viralbuzz-create-story .ranked-item .list-block-content.active {
    padding: 1.5rem !important;
}

viralbuzz-create-story .open-list-block-content,
viralbuzz-create-story .ranked-item-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 1.5rem;
    border-top: 1px solid transparent;
    transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.22s ease, border-color 0.22s ease;
}

viralbuzz-create-story .open-list-block-content.active,
viralbuzz-create-story .ranked-item-content.active {
    max-height: 2400px;
    opacity: 1;
    padding: 1.5rem;
    border-top-color: var(--border-gray-700);
}

viralbuzz-create-story .open-list-blocks-container,
viralbuzz-create-story .ranked-items-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

viralbuzz-create-story .countdown-item .image-preview-container,
viralbuzz-create-story .open-list-block-item .image-preview-container,
viralbuzz-create-story .ranked-item .image-preview-container,
viralbuzz-create-story .gallery-image-item .image-preview-container {
    max-width: none;
    aspect-ratio: 16 / 9;
}

viralbuzz-create-story .countdown-item .image-preview-container.orientation-vertical,
viralbuzz-create-story .open-list-block-item .image-preview-container.orientation-vertical,
viralbuzz-create-story .ranked-item .image-preview-container.orientation-vertical,
viralbuzz-create-story .gallery-image-item .image-preview-container.orientation-vertical {
    max-width: 320px;
    aspect-ratio: 5 / 7;
}

viralbuzz-create-story .countdown-item .image-preview-container.orientation-landscape,
viralbuzz-create-story .open-list-block-item .image-preview-container.orientation-landscape,
viralbuzz-create-story .ranked-item .image-preview-container.orientation-landscape,
viralbuzz-create-story .gallery-image-item .image-preview-container.orientation-landscape {
    max-width: none;
    aspect-ratio: 16 / 9;
}

viralbuzz-create-story .countdown-item .question-image-label-row,
viralbuzz-create-story .open-list-block-item .question-image-label-row,
viralbuzz-create-story .ranked-item .question-image-label-row,
viralbuzz-create-story .story-meme-block .question-image-label-row,
viralbuzz-create-story .gallery-image-item .question-image-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

viralbuzz-create-story .countdown-item .question-image-orientation-row,
viralbuzz-create-story .open-list-block-item .question-image-orientation-row,
viralbuzz-create-story .ranked-item .question-image-orientation-row,
viralbuzz-create-story .story-meme-block .question-image-orientation-row,
viralbuzz-create-story .gallery-image-item .question-image-orientation-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

viralbuzz-create-story .countdown-item .orientation-option,
viralbuzz-create-story .open-list-block-item .orientation-option,
viralbuzz-create-story .ranked-item .orientation-option,
viralbuzz-create-story .story-meme-block .orientation-option,
viralbuzz-create-story .gallery-image-item .orientation-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: var(--text-gray-500);
    background: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

viralbuzz-create-story .countdown-item .orientation-option:hover,
viralbuzz-create-story .open-list-block-item .orientation-option:hover,
viralbuzz-create-story .ranked-item .orientation-option:hover,
viralbuzz-create-story .story-meme-block .orientation-option:hover,
viralbuzz-create-story .gallery-image-item .orientation-option:hover {
    color: var(--text-gray-300);
    border-color: var(--border-gray-500);
}

viralbuzz-create-story .countdown-item .orientation-option.selected,
viralbuzz-create-story .open-list-block-item .orientation-option.selected,
viralbuzz-create-story .ranked-item .orientation-option.selected,
viralbuzz-create-story .story-meme-block .orientation-option.selected,
viralbuzz-create-story .gallery-image-item .orientation-option.selected {
    color: var(--neon-green, #22c55e);
    border-color: var(--neon-green, #22c55e);
    background: rgba(34, 197, 94, 0.1);
}

viralbuzz-create-story .countdown-item .orientation-option svg,
viralbuzz-create-story .open-list-block-item .orientation-option svg,
viralbuzz-create-story .ranked-item .orientation-option svg,
viralbuzz-create-story .story-meme-block .orientation-option svg,
viralbuzz-create-story .gallery-image-item .orientation-option svg {
    width: 1.125rem;
    height: 1.125rem;
}

viralbuzz-create-story .countdown-url-input {
    margin-bottom: 0.75rem;
}

viralbuzz-create-story .countdown-item .countdown-url-group,
viralbuzz-create-story .story-pq-single .countdown-url-group,
viralbuzz-create-story .open-list-block-item .countdown-url-group,
viralbuzz-create-story .ranked-item .countdown-url-group,
viralbuzz-create-story .story-meme-block .countdown-url-group,
viralbuzz-create-story .gallery-image-item .countdown-url-group {
    margin-bottom: 0.75rem;
}

viralbuzz-create-story .countdown-item .countdown-url-group .countdown-url-input,
viralbuzz-create-story .story-pq-single .countdown-url-group .countdown-url-input,
viralbuzz-create-story .open-list-block-item .countdown-url-group .countdown-url-input,
viralbuzz-create-story .ranked-item .countdown-url-group .countdown-url-input,
viralbuzz-create-story .story-meme-block .countdown-url-group .countdown-url-input,
viralbuzz-create-story .gallery-image-item .countdown-url-group .countdown-url-input {
    margin-bottom: 0;
    padding-right: 6.5rem;
}

viralbuzz-create-story .countdown-item .countdown-url-group .btn-generate-slug,
viralbuzz-create-story .story-pq-single .countdown-url-group .btn-generate-slug,
viralbuzz-create-story .open-list-block-item .countdown-url-group .btn-generate-slug,
viralbuzz-create-story .ranked-item .countdown-url-group .btn-generate-slug,
viralbuzz-create-story .story-meme-block .countdown-url-group .btn-generate-slug,
viralbuzz-create-story .gallery-image-item .countdown-url-group .btn-generate-slug {
    top: 50%;
    transform: translateY(-50%);
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

viralbuzz-create-story .story-meme-block {
    padding: 1.5rem;
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-700);
    margin-top: 1rem;
}

viralbuzz-create-story .story-meme-block .story-meme-saved-preview-img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

viralbuzz-create-story .story-meme-block .upload-placeholder {
    z-index: 2;
}

viralbuzz-create-story .open-list-block-item .content-type-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

viralbuzz-create-story .open-list-block-item .gallery-image-toolbar-actions,
viralbuzz-create-story .ranked-item .gallery-image-toolbar-actions,
viralbuzz-create-story .countdown-item .gallery-image-toolbar-actions,
viralbuzz-create-story .story-list-single .list-block .gallery-image-toolbar-actions,
viralbuzz-create-story .question-header-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

viralbuzz-create-story .open-list-block-item .gallery-image-chevron,
viralbuzz-create-story .ranked-item .gallery-image-chevron,
viralbuzz-create-story .countdown-item .gallery-image-chevron,
viralbuzz-create-story .story-list-single .list-block .gallery-image-chevron,
viralbuzz-create-story .question-header-actions .gallery-image-chevron {
    width: 2rem;
    height: 2rem;
}

viralbuzz-create-story .open-list-block-item .gallery-image-remove-btn,
viralbuzz-create-story .ranked-item .gallery-image-remove-btn,
viralbuzz-create-story .countdown-item .gallery-image-remove-btn,
viralbuzz-create-story .story-list-single .list-block .gallery-image-remove-btn,
viralbuzz-create-story .question-header-actions .gallery-image-remove-btn {
    width: 2rem;
    height: 2rem;
}

viralbuzz-create-story .open-list-block-item .content-type-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-600);
    background: transparent;
    color: var(--text-gray-400);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

viralbuzz-create-story .open-list-block-item .content-type-btn.active {
    background: var(--text-white);
    color: #1f2937;
    border-color: var(--text-white);
}

viralbuzz-create-story .open-list-block-item .content-type-separator {
    color: var(--text-gray-500);
    font-size: 0.875rem;
    font-weight: 500;
}

viralbuzz-create-story .open-list-embed-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

viralbuzz-create-story .open-list-embed-preview-btn {
    border: 1px solid var(--border-gray-600);
    background: var(--dark-surface);
    color: var(--text-white);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

viralbuzz-create-story .open-list-embed-preview-btn:hover {
    border-color: var(--neon-green);
    color: var(--neon-green);
    background: rgba(0, 255, 136, 0.08);
}

viralbuzz-create-story .open-list-embed-preview {
    border: 1px dashed rgba(156, 163, 175, 0.45);
    border-radius: 0.5rem;
    background: #18181f;
    padding: 0.5rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

viralbuzz-create-story .open-list-embed-preview-inner {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

viralbuzz-create-story .open-list-embed-preview iframe,
viralbuzz-create-story .open-list-embed-preview img,
viralbuzz-create-story .open-list-embed-preview video {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}




































































/* Create List Component Styles */

viralbuzz-create-list {
    display: block;
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px; /* Account for fixed header */
    background-color: #14141A;
}

/* Content container for list - ensure proper scrolling */
viralbuzz-create-list .content-container {
    height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    /* Auto-hide scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

viralbuzz-create-list .content-container::-webkit-scrollbar {
    width: 6px;
}

viralbuzz-create-list .content-container::-webkit-scrollbar-track {
    background: transparent;
}

viralbuzz-create-list .content-container::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

viralbuzz-create-list .content-container:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
}

/* Two Column Layout */
.list-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 1rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .list-layout {
        grid-template-columns: 1fr 280px;
        gap: 1.5rem;
        padding: 2rem 1.5rem;
        max-width: 1400px;
        margin: 0 auto;
    }
}

.list-form-column {
    min-width: 0;
    padding: 0;
    width: 100%;
}

@media (min-width: 1024px) {
    .list-form-column {
        max-width: none;
    }
}

/* List Form */
.list-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Form Section */
.form-section {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
}

/* Page Header */
.page-header {
    margin-bottom: 1.5rem;
}

.page-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.page-subtitle {
    font-size: 1rem;
    color: var(--text-gray-400);
    font-family: var(--font-family);
}

/* Section Header */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.section-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-white);
    font-family: var(--font-family);
}

.section-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 0.75rem;
    font-family: var(--font-family);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-subtitle svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #fbbf24;
}

/* Form Fields */
.form-field {
    margin-bottom: 1.5rem;
}

.form-field:last-child {
    margin-bottom: 0;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-300);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.form-label-hint {
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--text-gray-500);
    margin-left: 0.5rem;
}

.form-hint {
    font-size: 0.75rem;
    color: var(--text-gray-400);
    margin-top: 0.5rem;
    font-family: var(--font-family);
}

.required {
    color: #ef4444;
}

.form-input,
.form-textarea {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    font-family: var(--font-family);
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--neon-green);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-gray-500);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

/* Feature Image */
.feature-image-container {
    margin-top: 0.5rem;
}

.feature-image-label {
    cursor: pointer;
    display: block;
}

.feature-image-preview {
    width: 100%;
    max-width: 1200px;
    height: 400px;
    background: #000;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px dashed var(--border-gray-600);
    transition: border-color 0.2s ease;
    position: relative;
}

.feature-image-preview:hover {
    border-color: var(--neon-green);
}

@media (max-width: 768px) {
    .feature-image-preview {
        height: 250px;
    }
}

.feature-image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-gray-500);
    z-index: 10;
}

.feature-image-placeholder svg {
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.75rem;
}

.feature-image-text {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.feature-image-hint {
    font-size: 0.75rem;
}

.feature-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Add Block Button */
.btn-add-block {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--neon-green);
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    font-family: var(--font-family);
}

.btn-add-block:hover {
    opacity: 0.9;
}

.btn-add-block svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* List Blocks Container */
.list-blocks-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* List Block */
.list-block {
    background-color: var(--dark-surface);
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-700);
    overflow: hidden;
    transition: border-color 0.2s ease;
    padding: 0;
}

.list-block:hover {
    border-color: var(--border-gray-600);
}

.list-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 1rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.list-block-header:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.list-block-header:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.list-block-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 1.5rem;
    border-top: 1px solid transparent;
    background-color: var(--dark-surface);
    transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.22s ease, border-color 0.22s ease;
}

.list-block-content.active {
    max-height: 2200px;
    opacity: 1;
    padding: 1.5rem;
    border-top-color: var(--border-gray-700);
}

.list-block-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.block-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

/* Move Buttons */
.move-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.move-btn {
    background: transparent;
    border: 1px solid rgba(156, 163, 175, 0.3);
    color: var(--text-gray-400);
    padding: 0.25rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
}

.move-btn:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--neon-green);
    color: var(--neon-green);
    transform: scale(1.1);
}

.move-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.move-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.move-btn svg {
    width: 1rem;
    height: 1rem;
    pointer-events: none;
}

.block-number-badge {
    width: 2rem;
    height: 2rem;
    background: var(--purple-600);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.block-number-badge span {
    color: var(--text-white);
    font-weight: bold;
    font-size: 0.875rem;
    font-family: var(--font-family);
}

.block-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--text-white);
    font-family: var(--font-family);
}

.btn-remove-block {
    background: transparent;
    border: none;
    color: #ef4444;
    padding: 0.25rem;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-remove-block:hover {
    color: #dc2626;
}

.btn-remove-block svg {
    width: 1.25rem;
    height: 1.25rem;
}

.list-block-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chevron-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-gray-500);
    cursor: pointer;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.list-block-header.active .chevron-icon {
    transform: rotate(180deg);
}

/* Actions Sidebar (Desktop) */
.list-actions-sidebar {
    display: none;
}

@media (min-width: 1024px) {
    .list-actions-sidebar {
        display: block;
        align-self: start; /* Align to top of grid */
        width: 280px; /* Fixed width to match grid column */
        position: sticky;
        top: 20px; 
        height: fit-content;
        max-height: calc(100vh - 100px);
    }
}

.actions-sticky {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
    width: 100%;
    height: fit-content;
    /* Auto-hide scrollbar for buttons if needed */
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

.actions-sticky::-webkit-scrollbar {
    width: 3px;
}

.actions-sticky::-webkit-scrollbar-track {
    background: transparent;
}

.actions-sticky::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

.actions-sticky:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
}

.actions-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 1.5rem;
    font-family: var(--font-family);
}

.actions-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    font-family: var(--font-family);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.action-btn-primary {
    background: linear-gradient(to right, var(--neon-pink), var(--purple-500), var(--neon-cyan));
    color: var(--text-white);
}

.action-btn-primary:hover {
    opacity: 0.9;
}

.action-btn-secondary {
    background-color: var(--dark-surface);
    color: var(--text-white);
    border: 1px solid var(--border-gray-700);
}

.action-btn-secondary:hover {
    background-color: var(--gray-800);
    border-color: var(--text-gray-600);
}

.action-btn-link {
    background: transparent;
    color: var(--text-gray-300);
    border: 1px solid var(--border-gray-700);
}

.action-btn-link:hover {
    color: var(--text-white);
    border-color: var(--text-gray-600);
}

/* Mobile Actions Bar (shown on mobile instead of sidebar) */
.mobile-actions-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--dark-card);
    border-top: 1px solid var(--border-gray-700);
    padding: 1rem;
    z-index: 40;
    display: flex;
    gap: 0.75rem;
}

@media (min-width: 1024px) {
    .mobile-actions-bar {
        display: none;
    }
}

.mobile-actions-bar .action-btn {
    flex: 1;
}

.mobile-actions-bar .action-btn-primary {
    flex: 2;
}

/* Add bottom padding to main content on mobile to account for actions bar */
@media (max-width: 1023px) {
    .list-form-column {
        padding-bottom: 100px;
    }
}

/* SunEditor Dark Theme Styles */
.suneditor-editor {
    width: 100%;
}

.se-wrapper {
    background: #121212 !important;
}

.se-container {
    background: #121212 !important;
}

.se-toolbar {
    background: #181818 !important;
    border-color: #374151 !important;
}

.se-btn-list {
    background: #181818 !important;
}

.se-btn {
    color: #fff !important;
}

.se-btn:hover {
    background: #374151 !important;
}

.se-contents {
    background: #121212 !important;
    color: #fff !important;
}

.se-contents p, 
.se-contents div, 
.se-contents span, 
.se-contents h1, 
.se-contents h2, 
.se-contents h3, 
.se-contents h4, 
.se-contents h5, 
.se-contents h6,
.se-contents li,
.se-contents td,
.se-contents th {
    color: #fff !important;
}

.se-contents_wrap {
    background: #121212 !important;
}

/* Dropdown Menu Styles - Force white text (CRITICAL) */
.se-list-layer,
.se-list-layer *,
.se-list-layer li,
.se-list-layer span,
.se-list-layer div,
.se-list-layer p,
.se-list-layer a,
.se-list-layer .se-list-item {
    color: #ffffff !important;
    background-color: #181818 !important;
}

.se-list-item {
    color: #ffffff !important;
    background-color: transparent !important;
}

.se-list-item:hover,
.se-list-item:focus {
    background: #374151 !important;
    color: #ffffff !important;
}

.se-list-item.active,
.se-list-item.selected {
    background: #374151 !important;
    color: #ffffff !important;
}

/* Button select labels */
.se-btn-select-label,
.se-btn-select .se-btn-select-label,
.se-btn-select-label * {
    color: #ffffff !important;
}

.se-btn-select {
    color: #ffffff !important;
}

.se-btn-select * {
    color: #ffffff !important;
}

/* Dropdown arrow */
.se-btn-select::after {
    border-top-color: #ffffff !important;
}

/* All text in dropdowns - more specific */
.se-list-layer li *,
.se-list-layer span *,
.se-list-layer div *,
.se-list-layer p *,
.se-list-layer .se-list-item *,
.se-submenu .se-list-item *,
.se-submenu * {
    color: #ffffff !important;
}

.se-submenu {
    background: #181818 !important;
    border-color: #374151 !important;
    color: #ffffff !important;
}

.se-submenu .se-list-item {
    color: #ffffff !important;
}

.se-submenu .se-list-item:hover {
    background: #374151 !important;
    color: #ffffff !important;
}

/* Font dropdown specific */
.se-list-layer.font-size *,
.se-list-layer.font-family *,
.se-list-layer.format-block *,
.se-list-layer.align *,
.se-list-layer.list *,
.se-list-layer.paragraph-style * {
    color: #ffffff !important;
}

/* Selector dropdowns */
.se-selector,
.se-selector * {
    color: #ffffff !important;
    background-color: #181818 !important;
}

.se-selector .se-list-item {
    color: #ffffff !important;
}

.se-selector .se-list-item:hover {
    background-color: #374151 !important;
    color: #ffffff !important;
}

.se-placeholder {
    color: #6b7280 !important;
}

.se-counter {
    color: #9ca3af !important;
}

/* Hidden class */
.hidden {
    display: none !important;
}




































































/* Create Countdown Component Styles */

viralbuzz-create-countdown {
    display: block;
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px; /* Account for fixed header */
    background-color: #14141A;
}

/* Content container for countdown - ensure proper scrolling */
viralbuzz-create-countdown .content-container {
    height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    /* Auto-hide scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

viralbuzz-create-countdown .content-container::-webkit-scrollbar {
    width: 6px;
}

viralbuzz-create-countdown .content-container::-webkit-scrollbar-track {
    background: transparent;
}

viralbuzz-create-countdown .content-container::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

viralbuzz-create-countdown .content-container:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
}

/* Two Column Layout */
.countdown-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 1rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .countdown-layout {
        grid-template-columns: 1fr 280px;
        gap: 1.5rem;
        padding: 2rem 1.5rem;
        max-width: 1400px;
        margin: 0 auto;
    }
}

.countdown-form-column {
    min-width: 0;
    padding: 0;
    width: 100%;
}

@media (min-width: 1024px) {
    .countdown-form-column {
        max-width: none;
    }
}

/* Countdown Form */
.countdown-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Form Section */
.form-section {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
}

/* Page Header */
.page-header {
    margin-bottom: 1.5rem;
}

.page-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.page-subtitle {
    font-size: 1rem;
    color: var(--text-gray-400);
    font-family: var(--font-family);
}

/* Section Header */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.section-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-white);
    font-family: var(--font-family);
}

/* Form Field */
.form-field {
    margin-bottom: 1.5rem;
}

.form-field:last-child {
    margin-bottom: 0;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-300);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.form-label-hint {
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--text-gray-500);
    margin-left: 0.5rem;
}

.required {
    color: #ef4444;
}

.form-input,
.form-textarea {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    font-size: 0.875rem;
    font-family: var(--font-family);
    transition: border-color 0.2s ease;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--neon-green);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-gray-500);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Feature Image Container */
.feature-image-container {
    margin-top: 0.5rem;
}

.feature-image-label {
    cursor: pointer;
    display: block;
    width: 100%;
}

.feature-image-preview {
    position: relative;
    width: 100%;
    height: 250px;
    background-color: #000;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px dashed var(--border-gray-600);
    transition: border-color 0.2s ease;
}

.feature-image-preview:hover {
    border-color: var(--neon-green);
}

.feature-image-banner {
    height: 400px;
}

@media (max-width: 768px) {
    .feature-image-banner {
        height: 250px;
    }
}

.feature-image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-gray-500);
    z-index: 10;
}

.feature-image-placeholder svg {
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.75rem;
}

.feature-image-text {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.feature-image-hint {
    font-size: 0.75rem;
}

.feature-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Add Item Button */
.btn-add-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--neon-green);
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    font-family: var(--font-family);
}

.btn-add-item:hover {
    opacity: 0.9;
}

.btn-add-item svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Countdown Items Container */
.countdown-items-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

viralbuzz-create-countdown .gallery-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

viralbuzz-create-countdown .gallery-header-actions > .btn-preview-gallery,
viralbuzz-create-countdown .gallery-header-actions > .btn-add-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-600);
    background: transparent;
    color: var(--text-gray-300);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

viralbuzz-create-countdown .gallery-header-actions > .btn-add-item {
    background-color: var(--neon-green);
    color: #000;
    border-color: var(--neon-green);
}

viralbuzz-create-countdown .btn-preview-gallery:hover {
    border-color: var(--neon-green);
    color: var(--neon-green);
}

viralbuzz-create-countdown .gallery-header-actions > .btn-add-item:hover {
    opacity: 0.9;
}

viralbuzz-create-countdown .gallery-header-actions > .btn-add-item svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Countdown Item — matches list/ranked block header UI */
viralbuzz-create-countdown .countdown-item.list-block {
    background-color: var(--dark-surface);
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-700);
    padding: 0;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

viralbuzz-create-countdown .countdown-item.list-block:hover {
    border-color: var(--border-gray-600);
}

viralbuzz-create-countdown .countdown-item-title.block-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-white);
}

viralbuzz-create-countdown .countdown-item .list-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    cursor: pointer;
    user-select: none;
}

viralbuzz-create-countdown .countdown-item .list-block-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 1.5rem;
    border-top: 1px solid transparent;
    transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.22s ease, border-color 0.22s ease;
}

viralbuzz-create-countdown .countdown-item .list-block-content.active {
    max-height: 2400px;
    opacity: 1;
    padding: 1.5rem;
    border-top-color: var(--border-gray-700);
}

viralbuzz-create-countdown .countdown-item .block-number-badge {
    width: 2rem;
    height: 2rem;
    background: var(--purple-600);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

viralbuzz-create-countdown .countdown-item .block-number-badge span {
    color: var(--text-white);
    font-weight: 700;
    font-size: 0.875rem;
}

viralbuzz-create-countdown .countdown-item .move-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

viralbuzz-create-countdown .countdown-item .move-btn {
    background: transparent;
    border: 1px solid rgba(156, 163, 175, 0.3);
    color: var(--text-gray-400);
    padding: 0.25rem;
    border-radius: 0.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
}

viralbuzz-create-countdown .countdown-item .move-btn:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--neon-green);
    color: var(--neon-green);
}

viralbuzz-create-countdown .countdown-item .move-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

viralbuzz-create-countdown .countdown-item .move-btn svg {
    width: 1rem;
    height: 1rem;
}

viralbuzz-create-countdown .gallery-image-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

viralbuzz-create-countdown .gallery-image-chevron {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-gray-600);
    border-radius: 0.375rem;
    background: transparent;
    color: var(--text-gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

viralbuzz-create-countdown .gallery-image-chevron.collapsed svg {
    transform: rotate(-90deg);
}

viralbuzz-create-countdown .gallery-image-remove-btn {
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

viralbuzz-create-countdown .question-image-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

viralbuzz-create-countdown .question-image-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-300);
}

viralbuzz-create-countdown .question-image-orientation-row {
    display: flex;
    gap: 0.35rem;
}

viralbuzz-create-countdown .orientation-option {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-gray-600);
    border-radius: 0.375rem;
    background: transparent;
    color: var(--text-gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

viralbuzz-create-countdown .orientation-option.selected {
    border-color: var(--neon-green);
    color: var(--neon-green);
    background: rgba(0, 255, 136, 0.08);
}

viralbuzz-create-countdown .question-image-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    viralbuzz-create-countdown .question-image-grid {
        grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr);
        align-items: start;
    }
}

viralbuzz-create-countdown .image-preview-container {
    width: 100%;
    min-height: 180px;
    background: #000;
    border: 2px dashed var(--border-gray-600);
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

viralbuzz-create-countdown .image-preview-container.orientation-landscape {
    aspect-ratio: 16 / 9;
}

viralbuzz-create-countdown .image-preview-container.orientation-vertical {
    aspect-ratio: 9 / 16;
    max-height: 320px;
}

viralbuzz-create-countdown .question-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

viralbuzz-create-countdown .upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-gray-500);
    padding: 1rem;
    text-align: center;
}

viralbuzz-create-countdown .upload-placeholder svg {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.5rem;
}

viralbuzz-create-countdown .question-image-field {
    margin-bottom: 1rem;
}

viralbuzz-create-countdown .question-image-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

viralbuzz-create-countdown .countdown-url-group .btn-generate-slug {
    position: absolute;
    right: 0.375rem;
    top: 50%;
    transform: translateY(-50%);
}

viralbuzz-create-countdown .gallery-link-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: rgba(0, 0, 0, 0.65);
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

viralbuzz-create-countdown .gallery-link-modal.active {
    display: flex;
}

viralbuzz-create-countdown .gallery-link-modal-content {
    width: 100%;
    max-width: 480px;
    background: var(--dark-card);
    border: 1px solid var(--border-gray-700);
    border-radius: 0.75rem;
    overflow: hidden;
}

viralbuzz-create-countdown .gallery-link-modal-header,
viralbuzz-create-countdown .gallery-link-modal-body,
viralbuzz-create-countdown .gallery-link-modal-actions {
    padding: 1rem 1.25rem;
}

viralbuzz-create-countdown .gallery-link-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-gray-700);
}

viralbuzz-create-countdown .gallery-link-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    border-top: 1px solid var(--border-gray-700);
}

/* Actions Sidebar (Desktop) */
.countdown-actions-sidebar {
    display: none;
}

@media (min-width: 1024px) {
    .countdown-actions-sidebar {
        display: block;
        align-self: start; /* Align to top of grid */
        width: 280px; /* Fixed width to match grid column */
        position: sticky;
        top: 20px; 
        height: fit-content;
        max-height: calc(100vh - 100px);
    }
}

.actions-sticky {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
    width: 100%;
    height: fit-content;
    /* Auto-hide scrollbar for buttons if needed */
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

.actions-sticky::-webkit-scrollbar {
    width: 3px;
}

.actions-sticky::-webkit-scrollbar-track {
    background: transparent;
}

.actions-sticky::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

.actions-sticky:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
}

.actions-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 1.5rem;
    font-family: var(--font-family);
}

.actions-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    font-family: var(--font-family);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.action-btn-primary {
    background: linear-gradient(to right, var(--neon-pink), var(--purple-500), var(--neon-cyan));
    color: var(--text-white);
}

.action-btn-primary:hover {
    opacity: 0.9;
}

.action-btn-secondary {
    background-color: var(--dark-surface);
    color: var(--text-white);
    border: 1px solid var(--border-gray-700);
}

.action-btn-secondary:hover {
    background-color: var(--gray-800);
    border-color: var(--text-gray-600);
}

.action-btn-link {
    background: transparent;
    color: var(--text-gray-300);
    border: 1px solid var(--border-gray-700);
}

.action-btn-link:hover {
    color: var(--text-white);
    border-color: var(--text-gray-600);
}

/* Mobile Actions Bar (shown on mobile instead of sidebar) */
.mobile-actions-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--dark-card);
    border-top: 1px solid var(--border-gray-700);
    padding: 1rem;
    z-index: 40;
    display: flex;
    gap: 0.75rem;
}

@media (min-width: 1024px) {
    .mobile-actions-bar {
        display: none;
    }
}

.mobile-actions-bar .action-btn {
    flex: 1;
}

.mobile-actions-bar .action-btn-primary {
    flex: 2;
}

/* Add bottom padding to main content on mobile to account for actions bar */
@media (max-width: 1023px) {
    .countdown-form-column {
        padding-bottom: 100px;
    }
}

/* Hidden class */
.hidden {
    display: none !important;
}




































































/* Create Open List Component Styles */

viralbuzz-create-open-list {
    display: block;
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px; /* Account for fixed header */
    background-color: #14141A;
}

/* Content container for open list - ensure proper scrolling */
viralbuzz-create-open-list .content-container {
    height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    /* Auto-hide scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

viralbuzz-create-open-list .content-container::-webkit-scrollbar {
    width: 6px;
}

viralbuzz-create-open-list .content-container::-webkit-scrollbar-track {
    background: transparent;
}

viralbuzz-create-open-list .content-container::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

viralbuzz-create-open-list .content-container:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
}

/* Two Column Layout */
.open-list-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 1rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .open-list-layout {
        grid-template-columns: 1fr 280px;
        gap: 1.5rem;
        padding: 2rem 1.5rem;
        max-width: 1400px;
        margin: 0 auto;
    }
}

.open-list-form-column {
    min-width: 0;
    padding: 0;
    width: 100%;
}

@media (min-width: 1024px) {
    .open-list-form-column {
        max-width: none;
    }
}

/* Open List Form */
.open-list-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Form Section */
.form-section {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
}

/* Page Header */
.page-header {
    margin-bottom: 1.5rem;
}

.page-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.page-subtitle {
    font-size: 1rem;
    color: var(--text-gray-400);
    font-family: var(--font-family);
}

/* Section Header */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.section-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-white);
    font-family: var(--font-family);
}

/* Form Field */
viralbuzz-create-open-list .form-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.form-field {
    margin-bottom: 1.5rem;
}

.form-field:last-child {
    margin-bottom: 0;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-300);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.form-label-hint {
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--text-gray-500);
    margin-left: 0.5rem;
}

.form-hint {
    font-size: 0.75rem;
    color: var(--text-gray-400);
    margin-top: 0.5rem;
    font-family: var(--font-family);
}

.required {
    color: #ef4444;
}

.form-input,
.form-textarea {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    font-size: 0.875rem;
    font-family: var(--font-family);
    transition: border-color 0.2s ease;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--neon-green);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-gray-500);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Feature Image Container */
.feature-image-container {
    margin-top: 0.5rem;
}

.feature-image-label {
    cursor: pointer;
    display: block;
    width: 100%;
}

.feature-image-preview {
    position: relative;
    width: 100%;
    height: 250px;
    background-color: #000;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px dashed var(--border-gray-600);
    transition: border-color 0.2s ease;
}

.feature-image-preview:hover {
    border-color: var(--neon-green);
}

.feature-image-banner {
    height: 400px;
}

@media (max-width: 768px) {
    .feature-image-banner {
        height: 250px;
    }
}

.feature-image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-gray-500);
    z-index: 10;
}

.feature-image-placeholder svg {
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.75rem;
}

.feature-image-text {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.feature-image-hint {
    font-size: 0.75rem;
}

.feature-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Add Block Button */
.btn-add-block {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--neon-green);
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    font-family: var(--font-family);
}

.btn-add-block:hover {
    opacity: 0.9;
}

.btn-add-block svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Open List Blocks Container */
.open-list-blocks-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Open List Block */
.open-list-block {
    background-color: var(--dark-surface);
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-700);
    overflow: hidden;
    transition: border-color 0.2s ease;
    padding: 0;
}

.open-list-block:hover {
    border-color: var(--border-gray-600);
}

.open-list-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 1rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.open-list-block-header:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.open-list-block-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 1.5rem;
    border-top: 1px solid transparent;
    background-color: var(--dark-surface);
    transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.22s ease, border-color 0.22s ease;
}

.open-list-block-content.active {
    max-height: none;
    opacity: 1;
    padding: 1.5rem;
    overflow: visible;
    border-top-color: var(--border-gray-700);
}

.open-list-block-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.block-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.open-list-block-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Move Buttons */
.move-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.move-btn {
    background: transparent;
    border: 1px solid rgba(156, 163, 175, 0.3);
    color: var(--text-gray-400);
    padding: 0.25rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
}

.move-btn:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--neon-green);
    color: var(--neon-green);
    transform: scale(1.1);
}

.move-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.move-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.move-btn svg {
    width: 1rem;
    height: 1rem;
}

.chevron-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-gray-400);
    transition: transform 0.2s ease, color 0.2s ease;
    cursor: pointer;
}

.open-list-block-header.active .chevron-icon {
    transform: rotate(180deg);
}

.block-number-badge {
    width: 2rem;
    height: 2rem;
    background: var(--purple-600);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.block-number-badge span {
    color: var(--text-white);
    font-weight: bold;
    font-size: 0.875rem;
    font-family: var(--font-family);
}

.block-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--text-white);
    font-family: var(--font-family);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.block-title svg {
    width: 1.25rem;
    height: 1.25rem;
}

.btn-remove-block {
    background: transparent;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.25rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.btn-remove-block:hover {
    color: #f87171;
    background-color: rgba(239, 68, 68, 0.1);
}

.btn-remove-block svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Content Type Selector */
.content-type-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.content-type-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-600);
    background: transparent;
    color: var(--text-gray-400);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-family);
}

.content-type-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--border-gray-500);
    color: var(--text-white);
}

.content-type-btn.active {
    background: var(--text-white);
    color: #1f2937;
    border-color: var(--text-white);
}

.content-type-btn.active:hover {
    background: var(--text-white);
    opacity: 0.95;
}

.content-type-btn:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--border-gray-500);
    color: var(--text-white);
}

.content-type-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.content-type-separator {
    color: var(--text-gray-500);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-family);
}

/* Content Section */
.content-section {
    margin-top: 0;
}

/* Image Upload Area */
.image-upload-area {
    position: relative;
    width: 100%;
    min-height: 300px;
    background: var(--dark-surface);
    border: 2px dashed var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 2.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease;
}

.image-upload-area:hover {
    border-color: #dc2626;
}

.image-upload-area.has-image {
    padding: 0;
    min-height: auto;
}

.uploaded-image {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: contain;
    border-radius: 0.5rem;
    cursor: pointer;
}

.upload-button {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    background: #dc2626;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    transition: background 0.2s ease;
    font-family: var(--font-family);
}

.upload-button:hover {
    background: #b91c1c;
}

.upload-text {
    color: var(--text-gray-300);
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.upload-or {
    color: var(--text-gray-500);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.upload-url-link {
    color: #dc2626;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    font-family: var(--font-family);
}

.upload-url-link:hover {
    color: #b91c1c;
}

/* Image URL Input */
.image-url-input {
    display: none;
    width: 100%;
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    color: var(--text-white);
    font-size: 0.875rem;
    font-family: var(--font-family);
}

.image-url-input.show {
    display: block;
}

.image-url-input:focus {
    outline: none;
    border-color: #dc2626;
}

.image-url-input::placeholder {
    color: var(--text-gray-500);
}

/* Embed Content Area */
.embed-content-area {
    width: 100%;
    background: var(--dark-surface);
    border: 2px dashed var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 1.5rem;
}

.embed-content-area .form-label {
    color: var(--text-gray-300);
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: block;
}

.embed-textarea {
    width: 100%;
    min-height: 150px;
    background: var(--dark-card);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.75rem;
    font-family: var(--font-family);
    font-size: 0.875rem;
    color: var(--text-white);
    resize: vertical;
}

.embed-textarea:focus {
    outline: none;
    border-color: var(--neon-green);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.embed-textarea::placeholder {
    color: var(--text-gray-500);
}

.embed-preview {
    margin-top: 1rem;
    width: 100%;
    min-height: 200px;
    background: #000;
    border-radius: 0.5rem;
    overflow: hidden;
}

.embed-preview iframe {
    width: 100%;
    height: 400px;
    border: none;
}

/* Actions Sidebar (Desktop) */
.open-list-actions-sidebar {
    display: none;
}

@media (min-width: 1024px) {
    .open-list-actions-sidebar {
        display: block;
        align-self: start; /* Align to top of grid */
        width: 280px; /* Fixed width to match grid column */
        position: sticky;
        top: 20px; 
        height: fit-content;
        max-height: calc(100vh - 100px);
    }
}

.actions-sticky {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
    width: 100%;
    height: fit-content;
    /* Auto-hide scrollbar for buttons if needed */
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

.actions-sticky::-webkit-scrollbar {
    width: 3px;
}

.actions-sticky::-webkit-scrollbar-track {
    background: transparent;
}

.actions-sticky::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

.actions-sticky:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
}

.actions-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 1.5rem;
    font-family: var(--font-family);
}

.actions-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    font-family: var(--font-family);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.action-btn-primary {
    background: linear-gradient(to right, var(--neon-pink), var(--purple-500), var(--neon-cyan));
    color: var(--text-white);
}

.action-btn-primary:hover {
    opacity: 0.9;
}

.action-btn-secondary {
    background-color: var(--dark-surface);
    color: var(--text-white);
    border: 1px solid var(--border-gray-700);
}

.action-btn-secondary:hover {
    background-color: var(--gray-800);
    border-color: var(--text-gray-600);
}

.action-btn-link {
    background: transparent;
    color: var(--text-gray-300);
    border: 1px solid var(--border-gray-700);
}

.action-btn-link:hover {
    color: var(--text-white);
    border-color: var(--text-gray-600);
}

/* Mobile Actions Bar (shown on mobile instead of sidebar) */
.mobile-actions-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--dark-card);
    border-top: 1px solid var(--border-gray-700);
    padding: 1rem;
    z-index: 40;
    display: flex;
    gap: 0.75rem;
}

@media (min-width: 1024px) {
    .mobile-actions-bar {
        display: none;
    }
}

.mobile-actions-bar .action-btn {
    flex: 1;
}

.mobile-actions-bar .action-btn-primary {
    flex: 2;
}

/* Add bottom padding to main content on mobile to account for actions bar */
@media (max-width: 1023px) {
    .open-list-form-column {
        padding-bottom: 100px;
    }
}

/* Hidden class */
.hidden {
    display: none !important;
}

/* ----- Ranked / story parity: status pill, block toolbar, open-list items ----- */
viralbuzz-create-open-list .vb-open-list-page-header {
    position: relative;
    padding-right: 7rem;
}

viralbuzz-create-open-list .quiz-status-pill {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    height: 34px;
    border-radius: 999px;
    padding: 0 0.85rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    font-family: var(--font-family);
}

viralbuzz-create-open-list .quiz-status-pill-published {
    color: #22c55e;
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
}

viralbuzz-create-open-list .quiz-status-pill-draft {
    color: #9ca3af;
    background: rgba(107, 114, 128, 0.16);
    border-color: rgba(107, 114, 128, 0.35);
}

viralbuzz-create-open-list .quiz-status-pill-cancelled {
    color: #f87171;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
}

viralbuzz-create-open-list .section-header--open-list-blocks {
    align-items: flex-start;
}

viralbuzz-create-open-list .section-header--open-list-blocks .section-title {
    margin-bottom: 0;
}

viralbuzz-create-open-list .gallery-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

viralbuzz-create-open-list .gallery-header-actions > .btn-preview-gallery,
viralbuzz-create-open-list .gallery-header-actions > .btn-add-image,
viralbuzz-create-open-list .gallery-header-actions > .btn-add-ad {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.375rem;
    padding: 0.4375rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    box-sizing: border-box;
    font-family: var(--font-family);
    cursor: pointer;
}

viralbuzz-create-open-list .gallery-header-actions > .btn-add-image svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

viralbuzz-create-open-list .btn-preview-gallery {
    border: 1px solid var(--border-gray-600);
    background: transparent;
    color: var(--text-gray-300);
    border-radius: 0.5rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-family);
}

viralbuzz-create-open-list .btn-preview-gallery:hover {
    color: var(--text-white);
    border-color: var(--border-gray-500);
}

viralbuzz-create-open-list .btn-add-image {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--neon-green);
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    font-family: var(--font-family);
}

viralbuzz-create-open-list .btn-add-image:hover {
    opacity: 0.9;
}

viralbuzz-create-open-list .btn-add-ad {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: #fbbf24;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    border: 1px solid rgba(251, 191, 36, 0.55);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    font-family: var(--font-family);
}

viralbuzz-create-open-list .btn-add-ad:hover {
    background: rgba(251, 191, 36, 0.08);
    border-color: #fbbf24;
}

viralbuzz-create-open-list .btn-add-ad svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

viralbuzz-create-open-list .open-list-ad-block-item.list-block {
    padding: 0;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.06) 0%, var(--dark-card) 45%);
    border-radius: 0.5rem;
    border: 1px solid rgba(251, 191, 36, 0.35);
}

viralbuzz-create-open-list .open-list-ad-badge {
    background: rgba(251, 191, 36, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.45);
}

viralbuzz-create-open-list .open-list-ad-badge span {
    color: #fbbf24;
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

viralbuzz-create-open-list .open-list-ad-label {
    color: #fde68a;
}

viralbuzz-create-open-list .ol-ad-html-actions {
    margin-top: 0.5rem;
}

viralbuzz-create-open-list .btn-preview-ad-html {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--font-family);
    color: #111;
    background: var(--neon-green);
    border: none;
    border-radius: 0.4rem;
    cursor: pointer;
}

viralbuzz-create-open-list .btn-preview-ad-html:hover {
    opacity: 0.9;
}

viralbuzz-create-open-list .ol-ad-html-form-preview {
    margin-top: 0.75rem;
    padding: 0.5rem;
    background: #0f0f14;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    overflow: hidden;
}

viralbuzz-create-open-list .ol-ad-html-form-preview[hidden] {
    display: none !important;
}

viralbuzz-create-open-list .ol-ad-html-preview-iframe {
    display: block;
    width: 100%;
    min-height: 120px;
    border: 0;
    border-radius: 0.35rem;
    background: #14141a;
}

viralbuzz-create-open-list .open-list-block-item.list-block {
    padding: 0;
    overflow: hidden;
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-700);
}

viralbuzz-create-open-list .open-list-block-item .list-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    cursor: pointer;
    user-select: none;
}

viralbuzz-create-open-list .open-list-block-item .list-block-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

viralbuzz-create-open-list .open-list-block-item .block-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

viralbuzz-create-open-list .open-list-block-item .block-number-badge {
    width: 2rem;
    height: 2rem;
    background: var(--purple-600);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

viralbuzz-create-open-list .open-list-block-item .block-number-badge span {
    color: var(--text-white);
    font-weight: 700;
    font-size: 0.875rem;
}

viralbuzz-create-open-list .open-list-block-item .open-list-item-label.block-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
}

viralbuzz-create-open-list .open-list-block-item .move-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

viralbuzz-create-open-list .open-list-block-item .move-btn {
    background: transparent;
    border: 1px solid rgba(156, 163, 175, 0.3);
    color: var(--text-gray-400);
    padding: 0.25rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
}

viralbuzz-create-open-list .open-list-block-item .move-btn:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--neon-green);
    color: var(--neon-green);
}

viralbuzz-create-open-list .open-list-block-item .move-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

viralbuzz-create-open-list .open-list-block-item .move-btn svg {
    width: 1rem;
    height: 1rem;
}

viralbuzz-create-open-list .open-list-block-item .gallery-image-remove-btn,
viralbuzz-create-open-list .open-list-block-item .gallery-image-chevron {
    border: 1px solid rgba(156, 163, 175, 0.35);
    background: rgba(0, 0, 0, 0.25);
    border-radius: 0.35rem;
    color: var(--text-gray-300);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

viralbuzz-create-open-list .open-list-block-item .gallery-image-remove-btn:hover {
    border-color: #ef4444;
    color: #fecaca;
}

viralbuzz-create-open-list .open-list-block-item .gallery-image-chevron.collapsed svg {
    transform: rotate(-90deg);
}

viralbuzz-create-open-list .open-list-block-item .gallery-image-chevron svg {
    transition: transform 0.2s ease;
    width: 1.1rem;
    height: 1.1rem;
}

viralbuzz-create-open-list .open-list-block-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    border-top: 1px solid transparent;
    transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.22s ease, border-color 0.22s ease;
}

viralbuzz-create-open-list .open-list-block-content.active {
    max-height: none;
    opacity: 1;
    padding: 0.75rem;
    overflow: visible;
    border-top-color: var(--border-gray-700);
}

viralbuzz-create-open-list .open-list-blocks-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

viralbuzz-create-open-list .open-list-block-item .image-upload-label {
    display: block;
    cursor: pointer;
}

viralbuzz-create-open-list .open-list-block-item .image-preview-container {
    max-width: none;
    aspect-ratio: 16 / 9;
    border: 1px dashed rgba(156, 163, 175, 0.45);
    border-radius: 0.5rem;
    background: #18181f;
    min-height: 7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

viralbuzz-create-open-list .open-list-block-item .image-preview-container.orientation-vertical {
    max-width: 320px;
    aspect-ratio: 5 / 7;
}

viralbuzz-create-open-list .open-list-block-item .image-preview-container.orientation-landscape {
    max-width: none;
    aspect-ratio: 16 / 9;
}

viralbuzz-create-open-list .open-list-block-item .ol-thumbnail-panel {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

viralbuzz-create-open-list .open-list-block-item .ol-thumbnail-preview {
    aspect-ratio: 16 / 9;
    min-height: 7rem;
}

viralbuzz-create-open-list .open-list-block-item .ol-custom-image-field {
    max-width: none;
}

viralbuzz-create-open-list .open-list-block-item .ol-custom-image-preview {
    aspect-ratio: 16 / 9;
    min-height: 8rem;
    margin-top: 0.65rem;
}

viralbuzz-create-open-list .open-list-block-item .ol-custom-image-grid {
    gap: 1.25rem;
}

viralbuzz-create-open-list .open-list-block-item .ol-custom-gallery-field,
viralbuzz-create-open-list .open-list-block-item .ol-custom-video-field {
    border: 1px solid var(--border-gray-700);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

viralbuzz-create-open-list .ol-custom-media-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 1rem;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    text-align: left;
}

viralbuzz-create-open-list .ol-custom-media-count {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-gray-400);
}

viralbuzz-create-open-list .ol-custom-media-body {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

viralbuzz-create-open-list .ol-custom-gallery-item {
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.65rem;
    background: rgba(0, 0, 0, 0.12);
}

viralbuzz-create-open-list .ol-custom-gallery-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

viralbuzz-create-open-list .ol-custom-media-add {
    width: 100%;
}

viralbuzz-create-open-list .ol-custom-video-preview {
    margin-top: 0.75rem;
}

viralbuzz-create-open-list .open-list-block-item .question-image-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

viralbuzz-create-open-list .question-image-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-300);
}

viralbuzz-create-open-list .open-list-block-item .question-image-orientation-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

viralbuzz-create-open-list .open-list-block-item .orientation-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: var(--text-gray-500);
    background: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

viralbuzz-create-open-list .open-list-block-item .orientation-option:hover {
    color: var(--text-gray-300);
    border-color: var(--border-gray-500);
}

viralbuzz-create-open-list .open-list-block-item .orientation-option.selected {
    color: var(--neon-green, #22c55e);
    border-color: var(--neon-green, #22c55e);
    background: rgba(34, 197, 94, 0.1);
}

viralbuzz-create-open-list .open-list-block-item .orientation-option svg {
    width: 1.125rem;
    height: 1.125rem;
}

viralbuzz-create-open-list .open-list-block-item .countdown-url-group {
    margin-bottom: 0.75rem;
}

viralbuzz-create-open-list .open-list-block-item .countdown-url-group .countdown-url-input {
    margin-bottom: 0;
    padding-right: 6.5rem;
}

viralbuzz-create-open-list .open-list-block-item .countdown-url-group .btn-generate-slug {
    top: 50%;
    transform: translateY(-50%);
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

viralbuzz-create-open-list .open-list-block-item .content-type-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

viralbuzz-create-open-list .open-list-block-item .gallery-image-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

viralbuzz-create-open-list .open-list-block-item .gallery-image-chevron {
    width: 2rem;
    height: 2rem;
}

viralbuzz-create-open-list .open-list-block-item .gallery-image-remove-btn {
    width: 2rem;
    height: 2rem;
}

viralbuzz-create-open-list .open-list-block-item .content-type-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-600);
    background: transparent;
    color: var(--text-gray-400);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

viralbuzz-create-open-list .open-list-block-item .content-type-btn.active {
    background: var(--text-white);
    color: #1f2937;
    border-color: var(--text-white);
}

viralbuzz-create-open-list .open-list-block-item .content-type-separator {
    color: var(--text-gray-500);
    font-size: 0.875rem;
    font-weight: 500;
}

viralbuzz-create-open-list .open-list-embed-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

viralbuzz-create-open-list .open-list-embed-preview-btn {
    border: 1px solid var(--border-gray-600);
    background: var(--dark-surface);
    color: var(--text-white);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

viralbuzz-create-open-list .open-list-embed-preview-btn:hover {
    border-color: var(--neon-green);
    color: var(--neon-green);
    background: rgba(0, 255, 136, 0.08);
}

viralbuzz-create-open-list .open-list-embed-preview {
    border: 1px dashed rgba(156, 163, 175, 0.45);
    border-radius: 0.5rem;
    background: #18181f;
    padding: 0.5rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

viralbuzz-create-open-list .open-list-embed-preview-inner {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

viralbuzz-create-open-list .open-list-embed-preview iframe,
viralbuzz-create-open-list .open-list-embed-preview img,
viralbuzz-create-open-list .open-list-embed-preview video {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

viralbuzz-create-open-list .question-image-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    viralbuzz-create-open-list .question-image-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

viralbuzz-create-open-list .question-image-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

viralbuzz-create-open-list .question-image-field {
    margin-bottom: 1rem;
}

viralbuzz-create-open-list .question-image-viewer-caution {
    margin-top: 0.5rem;
}

viralbuzz-create-open-list .gallery-link-modal {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 1rem;
}

viralbuzz-create-open-list .gallery-link-modal.active {
    display: flex;
}

viralbuzz-create-open-list .gallery-link-modal-content {
    width: min(460px, 100%);
    background: #171721;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.75rem;
    overflow: hidden;
}

viralbuzz-create-open-list .gallery-link-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border-gray-700);
}

viralbuzz-create-open-list .gallery-link-modal-header h3 {
    margin: 0;
    color: var(--text-white);
    font-size: 1rem;
}

viralbuzz-create-open-list .gallery-link-modal-close {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-gray-600);
    border-radius: 0.35rem;
    background: #21212b;
    color: var(--text-gray-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

viralbuzz-create-open-list .gallery-link-modal-close svg {
    width: 1rem;
    height: 1rem;
}

viralbuzz-create-open-list .gallery-link-modal-body {
    padding: 1rem;
}

viralbuzz-create-open-list .gallery-link-modal-hint {
    margin-top: 0.4rem;
    color: var(--text-gray-500);
    font-size: 0.75rem;
}

viralbuzz-create-open-list .gallery-link-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.8rem 1rem 1rem;
}

viralbuzz-create-open-list .btn-cancel-link,
viralbuzz-create-open-list .btn-save-link {
    border-radius: 0.5rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--border-gray-600);
    background: #21212b;
    color: var(--text-gray-300);
    cursor: pointer;
    font-weight: 600;
}

viralbuzz-create-open-list .btn-save-link {
    border-color: #0f5132;
    background: #064e3b;
    color: #a7f3d0;
}

@media (max-width: 520px) {
    viralbuzz-create-open-list .vb-open-list-page-header {
        padding-right: 0;
        padding-top: 2.75rem;
    }

    viralbuzz-create-open-list .quiz-status-pill {
        left: 0;
        right: auto;
    }
}





































































/* Rich metadata row — two fields side-by-side */
.open-list-meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
}

@media (max-width: 480px) {
    .open-list-meta-row { grid-template-columns: 1fr; }
}

/* Even spacing between Item Name, custom fields, and rows (avoids :last-child zero margin in single-field rows) */
viralbuzz-create-open-list .open-list-meta-fields {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 0;
}

viralbuzz-create-open-list .open-list-meta-fields .form-field {
    margin-bottom: 0;
}

viralbuzz-create-open-list .open-list-meta-row .form-field {
    margin-bottom: 0;
}

.form-hint-inline {
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 400;
    margin-left: 0.3rem;
}

/* Item schema picker (list-level) */
.ol-schema-hint {
    margin-bottom: 0.75rem;
}

.ol-schema-current-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    justify-content: space-between;
}

.ol-schema-current {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 200px;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
}

.ol-schema-current-icon {
    font-size: 1.75rem;
    line-height: 1;
}

.ol-schema-current-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ol-schema-current-title {
    font-weight: 600;
    color: #fff;
}

.ol-schema-current-desc {
    font-size: 0.8rem;
    color: #9ca3af;
}

.ol-schema-current--locked {
    border-color: rgba(255, 255, 255, 0.05);
    opacity: 0.95;
}

.ol-custom-schema-readonly {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    color: #d1d5db;
    font-size: 0.9rem;
}

.ol-custom-schema-readonly-empty {
    color: #6b7280;
    list-style: none;
    margin-left: -1.25rem;
}

.ol-schema-option {
    text-align: center;
    min-height: 120px;
}

.ol-schema-option-emoji {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.35rem;
}

.ol-schema-option-desc {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.25rem;
    line-height: 1.3;
}

.ol-schema-option-selected {
    outline: 2px solid var(--primary-green, #22c55e);
    outline-offset: 2px;
}

.ol-custom-schema-editor {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ol-custom-schema-rows {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ol-custom-schema-row {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) minmax(0, 1fr) 2.75rem;
    gap: 0.75rem;
    align-items: end;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0.5rem;
    border: 1px solid transparent;
}

.ol-custom-schema-row--locked {
    opacity: 1;
}

.ol-custom-schema-row--locked select.form-input:disabled {
    cursor: not-allowed;
    color: #9ca3af;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(156, 163, 175, 0.2);
}

.ol-custom-schema-row--locked .ol-remove-custom-def {
    opacity: 1;
}

.ol-custom-schema-row--dragging {
    opacity: 0.55;
}

.ol-custom-schema-row--drop-target {
    border-color: rgba(0, 255, 136, 0.35);
    background: rgba(0, 255, 136, 0.06);
}

.ol-custom-field-drag-handle {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    border: 1px solid rgba(156, 163, 175, 0.35);
    background: rgba(0, 0, 0, 0.18);
    border-radius: 0.35rem;
    color: var(--text-gray-400);
    cursor: grab;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ol-custom-field-drag-handle:active {
    cursor: grabbing;
}

.ol-custom-field-drag-handle svg {
    width: 1.15rem;
    height: 1.15rem;
}

.ol-custom-schema-row .form-field {
    margin-bottom: 0;
}

.ol-custom-schema-row .form-label {
    display: block;
    margin-bottom: 0.35rem;
    line-height: 1.25;
}

.ol-custom-schema-row .form-input,
.ol-custom-schema-row select.form-input {
    width: 100%;
    min-height: 2.75rem;
    box-sizing: border-box;
}

.ol-custom-schema-row .ol-remove-custom-def {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
}

@media (max-width: 640px) {
    .ol-custom-schema-row {
        grid-template-columns: 1fr;
    }

    .ol-custom-field-drag-handle,
    .ol-custom-schema-row .ol-remove-custom-def {
        width: 100%;
    }
}

.ol-add-custom-field-btn {
    margin-top: 0.25rem;
}

viralbuzz-create-open-list .ol-item-schema-modal.block-type-modal {
    z-index: 1200;
}

.ol-custom-fields-accordion-wrap {
    margin-top: 1rem;
}

.ol-custom-fields-accordion-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    cursor: pointer;
    text-align: left;
}

.ol-custom-fields-accordion-header:hover {
    background: rgba(255, 255, 255, 0.07);
}

.ol-custom-fields-accordion-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.ol-custom-fields-accordion-summary {
    flex: 1;
    min-width: 8rem;
    font-size: 0.8rem;
    color: #9ca3af;
    font-weight: 400;
}

.ol-custom-fields-accordion-chevron {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    transform: rotate(-90deg);
    transition: transform 0.2s ease;
}

.ol-custom-fields-accordion-body {
    margin-top: 0.5rem;
    overflow: hidden;
}

.ol-custom-fields-accordion-body--collapsed {
    display: none;
}

.ol-custom-fields-setup-hint {
    margin: 0 0 0.85rem;
}

.ol-custom-fields-in-blocks {
    margin-bottom: 0;
}

.ol-block-meta-section {
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.02);
}

.ol-block-meta-header {
    padding: 0.75rem 0.9rem;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem 0.5rem 0 0;
}

.ol-block-meta-header-hint {
    font-size: 0.75rem;
    font-weight: 400;
    color: #9ca3af;
    margin-left: 0.35rem;
}

.ol-block-meta-body {
    padding: 0.75rem 1rem 1.1rem;
}

.ol-block-meta-body.ol-subsection-body--collapsed {
    display: none;
}

.ol-block-meta-body .open-list-meta-fields {
    margin-bottom: 0.5rem;
}

.ol-custom-fields-inline-hint {
    margin-top: 0.75rem;
}

.ol-block-fields-setup-heading,
.ol-block-values-heading {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #e5e7eb;
}

.ol-block-fields-setup-heading {
    display: block;
    margin-bottom: 0.15rem;
}

.ol-block-fields-setup-summary {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: #9ca3af;
}

.ol-block-values-heading {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ol-block-custom-fields-setup {
    margin-bottom: 0.75rem;
}

.ol-block-fields-setup-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.65rem 0.75rem;
    margin: 0 0 0.65rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    cursor: pointer;
    text-align: left;
}

.ol-block-fields-setup-toggle:hover {
    border-color: rgba(156, 163, 175, 0.35);
    background: rgba(255, 255, 255, 0.05);
}

.ol-block-custom-fields-body {
    padding-bottom: 0.4rem;
}

.ol-custom-fields-setup-card {
    padding: 1rem;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
}

.ol-block-custom-fields-setup-card {
    margin-bottom: 0;
}

.ol-custom-fields-setup-title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.ol-subsection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.65rem 0;
    margin: 0.5rem 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    text-align: left;
}

viralbuzz-create-open-list .ol-block-meta-section > .ol-block-meta-header {
    box-sizing: border-box;
    padding: 0.85rem 1rem;
    margin: 0;
    gap: 0.75rem;
    background: transparent;
}

viralbuzz-create-open-list .ol-block-meta-section > .ol-block-meta-header .ol-block-meta-header-hint {
    flex: 1;
    text-align: center;
}

viralbuzz-create-open-list .ol-block-meta-section > .ol-block-meta-header .gallery-image-chevron {
    flex-shrink: 0;
}

.ol-subsection-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.ol-subsection-chevron {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.2s ease;
}

.ol-subsection-chevron.collapsed {
    transform: rotate(-90deg);
}

.ol-subsection-body--collapsed {
    display: none !important;
}

viralbuzz-create-open-list .ol-media-section {
    margin-top: 0.75rem;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.02);
}

viralbuzz-create-open-list .ol-media-section > .ol-subsection-header {
    box-sizing: border-box;
    padding: 0.85rem 1rem;
    margin: 0;
    gap: 0.75rem;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

viralbuzz-create-open-list .ol-media-section > .ol-subsection-header .gallery-image-chevron {
    flex-shrink: 0;
}

viralbuzz-create-open-list .ol-media-body {
    box-sizing: border-box;
    padding: 1rem;
}

viralbuzz-create-open-list .ol-media-type-field {
    margin-top: 0;
    margin-bottom: 0.85rem;
}

viralbuzz-create-open-list .ol-media-section .content-type-selector {
    margin-top: 0;
    margin-bottom: 0;
}

viralbuzz-create-open-list .ol-subsection-body .ol-block-image-panel,
viralbuzz-create-open-list .ol-subsection-body .ol-block-embed-panel {
    margin-top: 0.5rem;
}

viralbuzz-create-open-list .open-list-overview-editor-host {
    margin-top: 0.25rem;
}

viralbuzz-create-open-list .open-list-overview-editor-host .sun-editor {
    width: 100% !important;
}

/* Structured custom fields (review, specs, pros/cons) */
.ol-review-field .ol-review-stars {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
}

.ol-review-star {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 1.35rem;
    line-height: 1;
    color: #4b5563;
    cursor: pointer;
}

.ol-review-star--filled {
    color: #ef4444;
}

.ol-review-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

.ol-review-meta .ol-review-score-input {
    max-width: 5rem;
}

.ol-review-meta .ol-review-label-input {
    flex: 1;
    min-width: 10rem;
}

.ol-specs-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.5rem;
}

.ol-specs-table th,
.ol-specs-table td {
    padding: 0.45rem 0.5rem;
    text-align: left;
    vertical-align: middle;
}

.ol-specs-table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ol-specs-table tbody td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ol-specs-remove-row,
.ol-pros-cons-remove {
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

.ol-specs-add-row,
.ol-pros-cons-add {
    margin-top: 0.35rem;
}

.ol-pros-cons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 640px) {
    .ol-pros-cons-grid {
        grid-template-columns: 1fr;
    }
}

.ol-pros-cons-heading {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.ol-pros-cons-heading--pros {
    color: #22c55e;
}

.ol-pros-cons-heading--cons {
    color: #f87171;
}

.ol-pros-cons-item {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    margin-bottom: 0.4rem;
}

.ol-pros-cons-item .ol-pros-cons-input {
    flex: 1;
}

.ol-meta-field--pros-cons {
    grid-column: 1 / -1;
}
/* Create Ranked List Component Styles */

viralbuzz-create-ranked-list {
    display: block;
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px; /* Account for fixed header */
    background-color: #14141A;
}

/* Content container for ranked list - ensure proper scrolling */
viralbuzz-create-ranked-list .content-container {
    height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    /* Auto-hide scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

viralbuzz-create-ranked-list .content-container::-webkit-scrollbar {
    width: 6px;
}

viralbuzz-create-ranked-list .content-container::-webkit-scrollbar-track {
    background: transparent;
}

viralbuzz-create-ranked-list .content-container::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

viralbuzz-create-ranked-list .content-container:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
}

/* Two Column Layout */
.ranked-list-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 1rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .ranked-list-layout {
        grid-template-columns: 1fr 280px;
        gap: 1.5rem;
        padding: 2rem 1.5rem;
        max-width: 1400px;
        margin: 0 auto;
    }
}

.ranked-list-form-column {
    min-width: 0;
    padding: 0;
    width: 100%;
}

@media (min-width: 1024px) {
    .ranked-list-form-column {
        max-width: none;
    }
}

/* Ranked List Form */
.ranked-list-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Form Section */
.form-section {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
}

/* Page Header */
.page-header {
    margin-bottom: 1.5rem;
    position: relative;
    padding-right: 7rem;
}

.page-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.page-subtitle {
    font-size: 1rem;
    color: var(--text-gray-400);
    font-family: var(--font-family);
}

.quiz-status-pill {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    height: 34px;
    border-radius: 999px;
    padding: 0 0.85rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}

.quiz-status-pill-published {
    color: #22c55e;
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
}

.quiz-status-pill-draft {
    color: #9ca3af;
    background: rgba(107, 114, 128, 0.16);
    border-color: rgba(107, 114, 128, 0.35);
}

.quiz-status-pill-cancelled {
    color: #f87171;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
}

/* Section Header */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.section-header .section-title {
    margin: 0;
    line-height: 1.25;
}

.section-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-white);
    font-family: var(--font-family);
}

/* Form Field */
.form-field {
    margin-bottom: 1.5rem;
}

.form-field:last-child {
    margin-bottom: 0;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-300);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.form-label-hint {
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--text-gray-500);
    margin-left: 0.5rem;
}

.form-hint {
    font-size: 0.75rem;
    color: var(--text-gray-400);
    margin-top: 0.5rem;
    font-family: var(--font-family);
}

.required {
    color: #ef4444;
}

.form-input,
.form-textarea {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    font-size: 0.875rem;
    font-family: var(--font-family);
    transition: border-color 0.2s ease;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--neon-green);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-gray-500);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Feature Image Container */
.feature-image-container {
    margin-top: 0.5rem;
}

.feature-image-label {
    cursor: pointer;
    display: block;
    width: 100%;
}

.feature-image-preview {
    position: relative;
    width: 100%;
    height: 250px;
    background-color: #000;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px dashed var(--border-gray-600);
    transition: border-color 0.2s ease;
}

.feature-image-preview:hover {
    border-color: var(--neon-green);
}

.feature-image-banner {
    height: 400px;
}

@media (max-width: 768px) {
    .feature-image-banner {
        height: 250px;
    }
}

.feature-image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-gray-500);
    z-index: 10;
}

.feature-image-placeholder svg {
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.75rem;
}

.feature-image-text {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.feature-image-hint {
    font-size: 0.75rem;
}

.feature-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Add Item Button */
.btn-add-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--neon-green);
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    font-family: var(--font-family);
}

.btn-add-item:hover {
    opacity: 0.9;
}

.btn-add-item svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Ranked Items Container */
.ranked-items-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Ranked Item */
.ranked-item {
    background-color: var(--dark-surface);
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-700);
    padding: 1.5rem;
    transition: border-color 0.2s ease;
}

.ranked-item:hover {
    border-color: var(--border-gray-600);
}

.ranked-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.ranked-item-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Rank Number - Large Display */
.rank-number {
    font-size: 4rem;
    font-weight: 900;
    color: #dc2626;
    line-height: 1;
    font-family: var(--font-family);
    min-width: 80px;
    text-align: center;
}

@media (max-width: 768px) {
    .rank-number {
        font-size: 3rem;
        min-width: 60px;
    }
}

.ranked-item-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--text-white);
    font-family: var(--font-family);
}

.btn-remove-item {
    background: transparent;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.25rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.btn-remove-item:hover {
    color: #f87171;
    background-color: rgba(239, 68, 68, 0.1);
}

.btn-remove-item svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Ranked Item Image Container */
.ranked-item-image-container {
    margin-top: 0.5rem;
}

.ranked-item-image-label {
    cursor: pointer;
    display: block;
    width: 100%;
}

.ranked-item-image-preview {
    position: relative;
    width: 100%;
    height: 400px;
    background-color: var(--dark-surface);
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px dashed var(--border-gray-600);
    transition: border-color 0.2s ease;
}

.ranked-item-image-preview:hover {
    border-color: var(--neon-green);
}

.ranked-item-image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-gray-500);
    z-index: 10;
}

.ranked-item-image-placeholder svg {
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.5rem;
}

.ranked-item-image-text {
    font-size: 0.875rem;
    font-weight: 500;
}

.ranked-item-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .ranked-item-image-preview {
        height: 300px;
    }
}

/* Actions Sidebar (Desktop) */
.ranked-list-actions-sidebar {
    display: none;
}

@media (min-width: 1024px) {
    .ranked-list-actions-sidebar {
        display: block;
        align-self: start; /* Align to top of grid */
        width: 280px; /* Fixed width to match grid column */
        position: sticky;
        top: 20px; 
        height: fit-content;
        max-height: calc(100vh - 100px);
    }
}

.actions-sticky {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
    width: 100%;
    height: fit-content;
    /* Auto-hide scrollbar for buttons if needed */
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

.actions-sticky::-webkit-scrollbar {
    width: 3px;
}

.actions-sticky::-webkit-scrollbar-track {
    background: transparent;
}

.actions-sticky::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

.actions-sticky:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
}

.actions-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 1.5rem;
    font-family: var(--font-family);
}

.actions-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    font-family: var(--font-family);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.action-btn-primary {
    background: linear-gradient(to right, var(--neon-pink), var(--purple-500), var(--neon-cyan));
    color: var(--text-white);
}

.action-btn-primary:hover {
    opacity: 0.9;
}

.action-btn-secondary {
    background-color: var(--dark-surface);
    color: var(--text-white);
    border: 1px solid var(--border-gray-700);
}

.action-btn-secondary:hover {
    background-color: var(--gray-800);
    border-color: var(--text-gray-600);
}

.action-btn-link {
    background: transparent;
    color: var(--text-gray-300);
    border: 1px solid var(--border-gray-700);
}

.action-btn-link:hover {
    color: var(--text-white);
    border-color: var(--text-gray-600);
}

/* Mobile Actions Bar (shown on mobile instead of sidebar) */
.mobile-actions-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--dark-card);
    border-top: 1px solid var(--border-gray-700);
    padding: 1rem;
    z-index: 40;
    display: flex;
    gap: 0.75rem;
}

@media (min-width: 1024px) {
    .mobile-actions-bar {
        display: none;
    }
}

.mobile-actions-bar .action-btn {
    flex: 1;
}

.mobile-actions-bar .action-btn-primary {
    flex: 2;
}

/* Add bottom padding to main content on mobile to account for actions bar */
@media (max-width: 1023px) {
    .ranked-list-form-column {
        padding-bottom: 100px;
    }
}

/* Hidden class */
.hidden {
    display: none !important;
}

/* Ranked list nested-block style (match create-story ranked items) */
.gallery-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

.gallery-header-actions > .btn-preview-gallery,
.gallery-header-actions > .btn-add-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.375rem;
    padding: 0.4375rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    box-sizing: border-box;
    font-family: var(--font-family);
    cursor: pointer;
}

.gallery-header-actions > .btn-add-image {
    border: 1px solid transparent;
    padding: 0.4375rem 0.875rem;
}

.gallery-header-actions > .btn-add-image svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

.btn-preview-gallery {
    border: 1px solid var(--border-gray-600);
    background: transparent;
    color: var(--text-gray-300);
    border-radius: 0.5rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-family);
}

.btn-preview-gallery:hover {
    color: var(--text-white);
    border-color: var(--border-gray-500);
}

.btn-add-image {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--neon-green);
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    font-family: var(--font-family);
}

.btn-add-image:hover {
    opacity: 0.9;
}

.btn-add-image svg {
    width: 1.25rem;
    height: 1.25rem;
}

.ranked-item.list-block {
    padding: 0;
    overflow: hidden;
}

.list-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    cursor: pointer;
    user-select: none;
}

.list-block-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.list-block-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 1.5rem;
    border-top: 1px solid transparent;
    transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.22s ease, border-color 0.22s ease;
}

.list-block-content.active {
    max-height: 2400px;
    opacity: 1;
    padding: 1.5rem;
    border-top-color: var(--border-gray-700);
}

.block-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.block-number-badge {
    width: 2rem;
    height: 2rem;
    background: var(--purple-600);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.block-number-badge span {
    color: var(--text-white);
    font-weight: 700;
    font-size: 0.875rem;
}

.ranked-item-title.block-title {
    font-size: 1.125rem;
    font-weight: 700;
}

.move-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.move-btn {
    background: transparent;
    border: 1px solid rgba(156, 163, 175, 0.3);
    color: var(--text-gray-400);
    padding: 0.25rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
}

.move-btn:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--neon-green);
    color: var(--neon-green);
}

.move-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.move-btn svg {
    width: 1rem;
    height: 1rem;
}

.gallery-image-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.gallery-image-chevron {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-gray-600);
    border-radius: 0.375rem;
    background: #1a1a22;
    color: var(--text-gray-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gallery-image-chevron svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
}

.gallery-image-chevron.collapsed svg {
    transform: rotate(-90deg);
}

.gallery-image-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.375rem;
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    cursor: pointer;
}

.gallery-image-remove-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

.question-image-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.question-image-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-300);
}

.question-image-orientation-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.orientation-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--text-gray-500);
    background: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 6px;
    cursor: pointer;
}

.orientation-option.selected {
    color: var(--neon-green, #22c55e);
    border-color: var(--neon-green, #22c55e);
    background: rgba(34, 197, 94, 0.1);
}

.orientation-option svg {
    width: 1.125rem;
    height: 1.125rem;
}

.question-image-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
    gap: 1rem;
}

@media (max-width: 900px) {
    .question-image-grid {
        grid-template-columns: 1fr;
    }
}

.image-upload-label {
    display: block;
    cursor: pointer;
}

.image-preview-container {
    border: 1px dashed rgba(156, 163, 175, 0.45);
    border-radius: 0.5rem;
    background: #18181f;
    min-height: 7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.image-preview-container.orientation-vertical {
    max-width: 320px;
    aspect-ratio: 5 / 7;
}

.question-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.question-image-field {
    margin-bottom: 0.75rem;
}

.question-image-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.countdown-url-group {
    margin-bottom: 0.75rem;
}

.countdown-url-input {
    margin-bottom: 0;
}

.gallery-link-modal {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 1rem;
}

.gallery-link-modal.active {
    display: flex;
}

.gallery-link-modal-content {
    width: min(460px, 100%);
    background: #171721;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.75rem;
    overflow: hidden;
}

.gallery-link-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border-gray-700);
}

.gallery-link-modal-header h3 {
    margin: 0;
    color: var(--text-white);
    font-size: 1rem;
}

.gallery-link-modal-close {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-gray-600);
    border-radius: 0.35rem;
    background: #21212B;
    color: var(--text-gray-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gallery-link-modal-close svg {
    width: 1rem;
    height: 1rem;
}

.gallery-link-modal-body {
    padding: 1rem;
}

.gallery-link-modal-hint {
    margin-top: 0.4rem;
    color: var(--text-gray-500);
    font-size: 0.75rem;
}

.gallery-link-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.8rem 1rem 1rem;
}

.btn-cancel-link,
.btn-save-link {
    border-radius: 0.5rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--border-gray-600);
    background: #21212B;
    color: var(--text-gray-300);
    cursor: pointer;
    font-weight: 600;
}

.btn-save-link {
    border-color: #0f5132;
    background: #064e3b;
    color: #a7f3d0;
}

.gallery-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.78);
    padding: 1rem;
}

.gallery-preview-modal.active {
    display: flex;
}

.gallery-preview-modal-content {
    width: min(980px, 100%);
    max-height: 86vh;
    background: #14141A;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
    padding: 0.75rem;
}

/* Single-column ranked preview (not the trivia/personality questions 2-col grid) */
viralbuzz-create-ranked-list .ranked-preview-modal-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.gallery-preview-topbar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.gallery-preview-chip {
    justify-self: start;
    padding: 0.55rem 1rem;
    background: #21212B;
    border: 1px solid var(--border-gray-700);
    color: var(--text-gray-300);
    border-radius: 0.25rem;
    font-size: 0.95rem;
}

.gallery-preview-count-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gallery-preview-count-label {
    color: var(--text-gray-400);
    font-size: 0.9rem;
}

.gallery-preview-count {
    min-width: 64px;
    text-align: center;
    padding: 0.25rem 0.5rem;
    background: #0f0f13;
    color: var(--text-white);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.gallery-preview-close-btn {
    justify-self: end;
    border: 1px solid var(--border-gray-600);
    border-radius: 0.25rem;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: #21212B;
    color: var(--text-gray-300);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gallery-preview-close-btn svg {
    width: 1rem;
    height: 1rem;
}

.gallery-preview-stage {
    position: relative;
    overflow: hidden;
}

.gallery-preview-viewport {
    width: min(100%, 900px);
    margin: 0 auto;
    overflow: hidden;
    background: #0b0b10;
    border-radius: 0.25rem 0.25rem 0 0;
    border: 1px solid var(--border-gray-700);
    height: min(52vh, 460px);
    position: relative;
}

.gallery-preview-track {
    display: flex;
    transition: transform 0.35s ease;
    will-change: transform;
}

.gallery-preview-slide {
    flex: 0 0 100%;
    min-width: 100%;
    height: min(52vh, 460px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
}

.gallery-preview-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gallery-preview-zoom-controls {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 4;
    display: flex;
    gap: 0.35rem;
    background: rgba(12, 15, 24, 0.78);
    border: 1px solid var(--border-gray-600);
    border-radius: 999px;
    padding: 0.25rem;
}

.gallery-zoom-btn {
    border: 1px solid var(--border-gray-600);
    background: #1a1f2b;
    color: var(--text-gray-200);
    min-width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gallery-zoom-btn.reset {
    min-width: 3.2rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.gallery-zoom-btn:hover {
    color: #fff;
    border-color: var(--neon-cyan);
}

.gallery-preview-slide--caution .gallery-preview-caution-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.25rem;
}

.gallery-preview-slide--caution .gallery-preview-caution-wrap:not(.is-revealed) img {
    filter: blur(22px);
    transform: scale(1.06);
    pointer-events: none;
    user-select: none;
}

.gallery-preview-slide--caution .gallery-preview-caution-wrap.is-revealed img {
    filter: none;
    transform: none;
}

.gallery-preview-caution-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.75rem 1.5rem;
    background: rgba(0, 255, 136, 0.92);
    color: #0a0a0a;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-family);
    cursor: pointer;
    z-index: 4;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    transition: background 0.2s ease;
}

.gallery-preview-caution-btn:hover {
    background: #00ff88;
}

.gallery-preview-caution-wrap.is-revealed .gallery-preview-caution-btn {
    display: none;
}

.gallery-preview-thumb--caution img {
    filter: blur(10px);
    transform: scale(1.05);
}

.gallery-preview-thumb--caution.is-revealed img {
    filter: none;
    transform: none;
}

@media (max-width: 640px) {
    .gallery-preview-caption.ranked-preview-caption {
        flex-direction: column;
        align-items: stretch;
    }
    .ranked-preview-caption .gallery-preview-caption-meta {
        width: 100%;
    }
    .ranked-preview-caption .gallery-preview-meta-chip {
        flex: 1;
        min-width: 0;
        width: auto;
        max-width: none;
    }
}

.gallery-preview-arrow {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--border-gray-600);
    background: rgba(17, 24, 39, 0.85);
    color: var(--text-gray-200);
    cursor: pointer;
    z-index: 3;
}

.gallery-preview-arrow.prev { left: 0.75rem; }
.gallery-preview-arrow.next { right: 0.75rem; }
.gallery-preview-arrow svg { width: 1rem; height: 1rem; }

.gallery-preview-caption {
    width: min(100%, 900px);
    margin: 0 auto;
    background: #21212B;
    color: var(--text-gray-200);
    min-height: 5.25rem;
    padding: 0.55rem 0.8rem;
    border-radius: 0 0 0.25rem 0.25rem;
    border: 1px solid var(--border-gray-700);
    border-top: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gallery-preview-caption.ranked-preview-caption {
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.ranked-preview-caption-left {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
    min-width: min(100%, 220px);
}

.ranked-preview-caption .gallery-preview-caption-meta {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.gallery-preview-meta-chip {
    background: #171721;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    padding: 0.35rem 0.55rem;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
}

.gallery-preview-meta-chip span {
    display: block;
    font-size: 0.68rem;
    color: var(--text-gray-500);
    margin-bottom: 0.1rem;
}

.gallery-preview-meta-chip strong {
    display: block;
    font-size: 0.8rem;
    color: var(--text-gray-200);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-meta-link {
    color: #60a5fa;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gallery-meta-link:hover {
    color: #93c5fd;
}

.ranked-preview-rank-chip {
    background: var(--purple-600);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    white-space: nowrap;
}

.gallery-preview-caption-main { min-width: 0; }
.gallery-preview-caption-title { margin: 0; font-size: 1.1rem; color: #fff; font-weight: 700; }
.gallery-preview-caption-desc { margin: 0.2rem 0 0 0; font-size: 0.86rem; color: var(--text-gray-300); }

.gallery-preview-thumbs-wrap {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 0.5rem;
}

.gallery-thumb-nav {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-gray-600);
    border-radius: 0.25rem;
    background: #1a1a22;
    color: var(--text-gray-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gallery-preview-thumbs {
    display: flex;
    gap: 0.55rem;
    overflow-x: auto;
    padding: 0.2rem 0;
}

.gallery-preview-thumb {
    flex: 0 0 96px;
    width: 96px;
    height: 62px;
    border-radius: 0.35rem;
    border: 2px solid var(--border-gray-700);
    overflow: hidden;
    cursor: pointer;
    background: #101018;
}

.gallery-preview-thumb.active {
    border-color: var(--neon-green);
    box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.35);
}

.gallery-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


































































/* Create Video Component Styles */

viralbuzz-create-video {
    display: block;
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px;
    background-color: #14141A;
}

viralbuzz-create-video .content-container {
    height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

viralbuzz-create-video .content-container::-webkit-scrollbar {
    width: 6px;
}

viralbuzz-create-video .content-container::-webkit-scrollbar-track {
    background: transparent;
}

viralbuzz-create-video .content-container::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

viralbuzz-create-video .content-container:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
}

/* Two Column Layout */
.video-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 1rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .video-layout {
        grid-template-columns: 1fr 280px;
        gap: 1.5rem;
        padding: 2rem 1.5rem;
        max-width: 1400px;
        margin: 0 auto;
    }
}

.video-form-column {
    min-width: 0;
    padding: 0;
    width: 100%;
}

@media (min-width: 1024px) {
    .video-form-column {
        max-width: none;
    }
}

.video-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Form Section */
.form-section {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
}

.page-header {
    margin-bottom: 1.5rem;
}

.page-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.page-subtitle {
    font-size: 1rem;
    color: var(--text-gray-400);
    font-family: var(--font-family);
}

.section-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 1.5rem;
    font-family: var(--font-family);
}

.form-field {
    margin-bottom: 1.5rem;
}

.form-field:last-child {
    margin-bottom: 0;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-300);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.form-label-hint {
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--text-gray-500);
    margin-left: 0.5rem;
}

.form-hint {
    font-size: 0.75rem;
    color: var(--text-gray-400);
    margin-top: 0.5rem;
    font-family: var(--font-family);
}

.required {
    color: #ef4444;
}

.form-input,
.form-textarea {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    font-size: 0.875rem;
    font-family: var(--font-family);
    transition: border-color 0.2s ease;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--neon-green);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-gray-500);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Feature Image */
.feature-image-container {
    margin-top: 0.5rem;
}

.feature-image-label {
    cursor: pointer;
    display: block;
    width: 100%;
}

.feature-image-preview {
    position: relative;
    width: 100%;
    height: 250px;
    background-color: #000;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px dashed var(--border-gray-600);
    transition: border-color 0.2s ease;
}

.feature-image-preview:hover {
    border-color: var(--neon-green);
}

.feature-image-banner {
    height: 400px;
}

@media (max-width: 768px) {
    .feature-image-banner {
        height: 250px;
    }
}

.feature-image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-gray-500);
    z-index: 10;
}

.feature-image-placeholder svg {
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.75rem;
}

.feature-image-text {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.feature-image-hint {
    font-size: 0.75rem;
}

.feature-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video Embed Container */
.video-embed-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background: var(--dark-surface);
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px solid var(--border-gray-600);
}

.video-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-preview-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-gray-500);
}

.video-preview-placeholder svg {
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.75rem;
}

/* Actions Sidebar */
.video-actions-sidebar {
    display: none;
}

@media (min-width: 1024px) {
    .video-actions-sidebar {
        display: block;
        align-self: start;
        width: 280px;
        position: sticky;
        top: 20px;
        height: fit-content;
        max-height: calc(100vh - 100px);
    }
}

.actions-sticky {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
    width: 100%;
    height: fit-content;
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

.actions-sticky::-webkit-scrollbar {
    width: 3px;
}

.actions-sticky::-webkit-scrollbar-track {
    background: transparent;
}

.actions-sticky::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

.actions-sticky:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
}

.actions-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 1.5rem;
    font-family: var(--font-family);
}

.actions-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    font-family: var(--font-family);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.action-btn-primary {
    background: linear-gradient(to right, var(--neon-pink), var(--purple-500), var(--neon-cyan));
    color: var(--text-white);
}

.action-btn-primary:hover {
    opacity: 0.9;
}

.action-btn-secondary {
    background-color: var(--dark-surface);
    color: var(--text-white);
    border: 1px solid var(--border-gray-700);
}

.action-btn-secondary:hover {
    background-color: var(--gray-800);
    border-color: var(--text-gray-600);
}

.action-btn-link {
    background: transparent;
    color: var(--text-gray-300);
    border: 1px solid var(--border-gray-700);
}

.action-btn-link:hover {
    color: var(--text-white);
    border-color: var(--text-gray-600);
}

/* Mobile Actions Bar */
.mobile-actions-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--dark-card);
    border-top: 1px solid var(--border-gray-700);
    padding: 1rem;
    z-index: 40;
    display: flex;
    gap: 0.75rem;
}

@media (min-width: 1024px) {
    .mobile-actions-bar {
        display: none;
    }
}

.mobile-actions-bar .action-btn {
    flex: 1;
}

.mobile-actions-bar .action-btn-primary {
    flex: 2;
}

@media (max-width: 1023px) {
    .video-form-column {
        padding-bottom: 100px;
    }
}

.hidden {
    display: none !important;
}


































































/* Create Audio Component Styles */

viralbuzz-create-audio {
    display: block;
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px;
    background-color: #14141A;
}

viralbuzz-create-audio .content-container {
    height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

viralbuzz-create-audio .content-container::-webkit-scrollbar {
    width: 6px;
}

viralbuzz-create-audio .content-container::-webkit-scrollbar-track {
    background: transparent;
}

viralbuzz-create-audio .content-container::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

.audio-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 1rem;
}

@media (min-width: 1024px) {
    .audio-layout {
        grid-template-columns: 1fr 280px;
        gap: 1.5rem;
        padding: 2rem 1.5rem;
        max-width: 1400px;
        margin: 0 auto;
    }
}

.audio-form-column {
    min-width: 0;
    padding: 0;
    width: 100%;
}

.audio-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-section {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
}

.page-header {
    margin-bottom: 1.5rem;
}

.page-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.page-subtitle {
    font-size: 1rem;
    color: var(--text-gray-400);
    font-family: var(--font-family);
}

.section-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 1.5rem;
    font-family: var(--font-family);
}

.form-field {
    margin-bottom: 1.5rem;
}

viralbuzz-create-audio .form-field-after-media-preview {
    margin-top: 1.25rem;
}

viralbuzz-create-audio .form-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
}

viralbuzz-create-audio .form-field-header .form-label {
    margin-bottom: 0;
}

viralbuzz-create-audio .char-counter {
    font-size: 0.75rem;
    color: var(--text-gray-500);
    font-family: var(--font-family);
    flex-shrink: 0;
}

viralbuzz-create-audio .char-counter.at-limit {
    color: #ef4444;
    font-weight: 600;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-300);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.form-label-hint {
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--text-gray-500);
    margin-left: 0.5rem;
}

.form-hint {
    font-size: 0.75rem;
    color: var(--text-gray-400);
    margin-top: 0.5rem;
    font-family: var(--font-family);
}

.required {
    color: #ef4444;
}

.form-input,
.form-textarea {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    font-size: 0.875rem;
    font-family: var(--font-family);
    transition: border-color 0.2s ease;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--neon-green);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-gray-500);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.feature-image-container {
    margin-top: 0.5rem;
}

.feature-image-label {
    cursor: pointer;
    display: block;
    width: 100%;
}

.feature-image-preview {
    position: relative;
    width: 100%;
    height: 250px;
    background-color: #000;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px dashed var(--border-gray-600);
    transition: border-color 0.2s ease;
}

.feature-image-banner {
    height: 400px;
}

@media (max-width: 768px) {
    .feature-image-banner {
        height: 250px;
    }
}

.feature-image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-gray-500);
    z-index: 10;
}

.feature-image-placeholder svg {
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.75rem;
}

.feature-image-text {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.feature-image-hint {
    font-size: 0.75rem;
}

.feature-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Audio Method Selector */
.audio-method-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.audio-method-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-600);
    background: transparent;
    color: var(--text-gray-400);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-family);
}

.audio-method-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--border-gray-500);
    color: var(--text-white);
}

.audio-method-btn.active {
    background: var(--text-white);
    color: #1f2937;
    border-color: var(--text-white);
}

.audio-method-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.content-type-separator {
    color: var(--text-gray-500);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-family);
}

.content-section {
    display: none;
}

.content-section[style*="display: block"] {
    display: block !important;
}

/* Audio Preview Container */
.audio-preview-container {
    width: 100%;
    min-height: 100px;
    background: var(--dark-surface);
    border: 2px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}

.audio-preview-container audio {
    width: 100%;
    max-width: 600px;
}

.audio-actions-sidebar {
    display: none;
}

@media (min-width: 1024px) {
    .audio-actions-sidebar {
        display: block;
        align-self: start;
        width: 280px;
        position: sticky;
        top: 20px;
        height: fit-content;
        max-height: calc(100vh - 100px);
    }
}

.actions-sticky {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
    width: 100%;
    height: fit-content;
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

.actions-sticky::-webkit-scrollbar {
    width: 3px;
}

.actions-sticky::-webkit-scrollbar-track {
    background: transparent;
}

.actions-sticky::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

.actions-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 1.5rem;
    font-family: var(--font-family);
}

.actions-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    font-family: var(--font-family);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: inline-block;
}

.action-btn-primary {
    background: linear-gradient(to right, var(--neon-pink), var(--purple-500), var(--neon-cyan));
    color: var(--text-white);
}

.action-btn-primary:hover {
    opacity: 0.9;
}

.action-btn-secondary {
    background-color: var(--dark-surface);
    color: var(--text-white);
    border: 1px solid var(--border-gray-700);
}

.action-btn-secondary:hover {
    background-color: var(--gray-800);
    border-color: var(--text-gray-600);
}

.action-btn-link {
    background: transparent;
    color: var(--text-gray-300);
    border: 1px solid var(--border-gray-700);
}

.action-btn-link:hover {
    color: var(--text-white);
    border-color: var(--text-gray-600);
}

.mobile-actions-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--dark-card);
    border-top: 1px solid var(--border-gray-700);
    padding: 1rem;
    z-index: 40;
    display: flex;
    gap: 0.75rem;
}

@media (min-width: 1024px) {
    .mobile-actions-bar {
        display: none;
    }
}

.mobile-actions-bar .action-btn {
    flex: 1;
}

.mobile-actions-bar .action-btn-primary {
    flex: 2;
}

@media (max-width: 1023px) {
    .audio-form-column {
        padding-bottom: 100px;
    }
}


































































/* Create Image Component Styles */

viralbuzz-create-image {
    display: block;
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px;
    background-color: #14141A;
}

viralbuzz-create-image .content-container {
    height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

viralbuzz-create-image .content-container::-webkit-scrollbar {
    width: 6px;
}

.image-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 1rem;
}

@media (min-width: 1024px) {
    .image-layout {
        grid-template-columns: 1fr 280px;
        gap: 1.5rem;
        padding: 2rem 1.5rem;
        max-width: 1400px;
        margin: 0 auto;
    }
}

.image-form-column {
    min-width: 0;
    padding: 0;
    width: 100%;
}

.image-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-section {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
}

.page-header {
    margin-bottom: 1.5rem;
}

.page-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.page-subtitle {
    font-size: 1rem;
    color: var(--text-gray-400);
    font-family: var(--font-family);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.section-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-white);
    font-family: var(--font-family);
}

.form-field {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-300);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.form-label-hint {
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--text-gray-500);
    margin-left: 0.5rem;
}

.form-hint {
    font-size: 0.75rem;
    color: var(--text-gray-400);
    margin-top: 0.5rem;
    font-family: var(--font-family);
}

.required {
    color: #ef4444;
}

.form-input,
.form-textarea {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    font-size: 0.875rem;
    font-family: var(--font-family);
    transition: border-color 0.2s ease;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--neon-green);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-gray-500);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.feature-image-container {
    margin-top: 0.5rem;
}

.feature-image-label {
    cursor: pointer;
    display: block;
    width: 100%;
}

.feature-image-preview {
    position: relative;
    width: 100%;
    height: 250px;
    background-color: #000;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px dashed var(--border-gray-600);
    transition: border-color 0.2s ease;
}

.feature-image-banner {
    height: 400px;
}

@media (max-width: 768px) {
    .feature-image-banner {
        height: 250px;
    }
}

.feature-image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-gray-500);
    z-index: 10;
}

.feature-image-placeholder svg {
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.75rem;
}

.feature-image-text {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.feature-image-hint {
    font-size: 0.75rem;
}

.feature-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn-add-image {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--neon-green);
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    font-family: var(--font-family);
}

.btn-add-image:hover {
    opacity: 0.9;
}

.btn-add-image svg {
    width: 1.25rem;
    height: 1.25rem;
}

.gallery-items-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.gallery-item {
    background-color: var(--dark-surface);
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-700);
    padding: 1.5rem;
    transition: border-color 0.2s ease;
}

.gallery-item:hover {
    border-color: var(--border-gray-600);
}

.gallery-item.main-image {
    border-color: var(--neon-green);
    border-width: 2px;
}

.gallery-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.gallery-item-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Gallery Item Number Badge (Purple Circle) */
.gallery-item-number-badge {
    width: 2rem;
    height: 2rem;
    background: var(--purple-600);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gallery-item-number-badge span {
    color: var(--text-white);
    font-weight: bold;
    font-size: 0.875rem;
    font-family: var(--font-family);
}

.gallery-item-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--text-white);
    font-family: var(--font-family);
}

.gallery-item-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Set as Main Button */
.btn-set-main {
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid var(--border-gray-600);
    background: transparent;
    color: var(--text-gray-300);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-family);
}

.btn-set-main:hover {
    border-color: var(--neon-green);
    color: var(--neon-green);
}

.btn-set-main-active {
    background: var(--neon-green);
    color: #000;
    border-color: var(--neon-green);
}

.main-image-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 255, 136, 0.9);
    color: #000;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 10;
    font-family: var(--font-family);
}

.btn-remove-image {
    background: transparent;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.25rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.btn-remove-image:hover {
    color: #f87171;
    background-color: rgba(239, 68, 68, 0.1);
}

.btn-remove-image svg {
    width: 1.25rem;
    height: 1.25rem;
}

.gallery-image-container {
    margin-top: 0.5rem;
}

.gallery-image-label {
    cursor: pointer;
    display: block;
    width: 100%;
}

.gallery-image-preview {
    position: relative;
    width: 100%;
    height: 300px;
    background-color: var(--dark-surface);
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px dashed var(--border-gray-600);
    transition: border-color 0.2s ease;
}

.gallery-image-preview:hover {
    border-color: var(--neon-green);
}

.gallery-image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-gray-500);
    z-index: 10;
}

.gallery-image-placeholder svg {
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.5rem;
}

.gallery-image-text {
    font-size: 0.875rem;
    font-weight: 500;
}

.gallery-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-actions-sidebar {
    display: none;
}

@media (min-width: 1024px) {
    .image-actions-sidebar {
        display: block;
        align-self: start;
        width: 280px;
        position: sticky;
        top: 20px;
        height: fit-content;
        max-height: calc(100vh - 100px);
    }
}

.actions-sticky {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
    width: 100%;
    height: fit-content;
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

.actions-sticky::-webkit-scrollbar {
    width: 3px;
}

.actions-sticky::-webkit-scrollbar-track {
    background: transparent;
}

.actions-sticky::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

.actions-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 1.5rem;
    font-family: var(--font-family);
}

.actions-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    font-family: var(--font-family);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: inline-block;
}

.action-btn-primary {
    background: linear-gradient(to right, var(--neon-pink), var(--purple-500), var(--neon-cyan));
    color: var(--text-white);
}

.action-btn-primary:hover {
    opacity: 0.9;
}

.action-btn-secondary {
    background-color: var(--dark-surface);
    color: var(--text-white);
    border: 1px solid var(--border-gray-700);
}

.action-btn-secondary:hover {
    background-color: var(--gray-800);
    border-color: var(--text-gray-600);
}

.action-btn-link {
    background: transparent;
    color: var(--text-gray-300);
    border: 1px solid var(--border-gray-700);
}

.action-btn-link:hover {
    color: var(--text-white);
    border-color: var(--text-gray-600);
}

.mobile-actions-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--dark-card);
    border-top: 1px solid var(--border-gray-700);
    padding: 1rem;
    z-index: 40;
    display: flex;
    gap: 0.75rem;
}

@media (min-width: 1024px) {
    .mobile-actions-bar {
        display: none;
    }
}

.mobile-actions-bar .action-btn {
    flex: 1;
}

.mobile-actions-bar .action-btn-primary {
    flex: 2;
}

@media (max-width: 1023px) {
    .image-form-column {
        padding-bottom: 100px;
    }
}

/* SunEditor Dark Theme */
.se-wrapper {
    background: #121212 !important;
}

.se-container {
    background: #121212 !important;
}

.se-toolbar {
    background: #181818 !important;
    border-color: #374151 !important;
}

.se-btn-list {
    background: #181818 !important;
}

.se-btn {
    color: #fff !important;
}

.se-btn:hover {
    background: #374151 !important;
}

.se-contents {
    background: #121212 !important;
    color: #fff !important;
}

.se-contents p, 
.se-contents div, 
.se-contents span, 
.se-contents h1, 
.se-contents h2, 
.se-contents h3, 
.se-contents h4, 
.se-contents h5, 
.se-contents h6,
.se-contents li,
.se-contents td,
.se-contents th {
    color: #fff !important;
}

.se-contents_wrap {
    background: #121212 !important;
}

.se-list-layer {
    background: #181818 !important;
    border-color: #374151 !important;
    color: #fff !important;
}

.se-list-item {
    color: #fff !important;
}

.se-list-item:hover {
    background: #374151 !important;
    color: #fff !important;
}

/* Story-style gallery + char headers (create image) */
viralbuzz-create-image .form-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
}

viralbuzz-create-image .form-field-header .form-label {
    margin-bottom: 0;
}

viralbuzz-create-image .char-counter {
    font-size: 0.75rem;
    color: var(--text-gray-500);
    font-family: var(--font-family);
    flex-shrink: 0;
}

viralbuzz-create-image .char-counter.at-limit {
    color: #ef4444;
    font-weight: 600;
}

viralbuzz-create-image .section-header .form-label {
    margin-bottom: 0;
}

.block-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.block-number-badge {
    width: 2rem;
    height: 2rem;
    background: var(--purple-600);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.block-number-badge span {
    color: var(--text-white);
    font-weight: 700;
    font-size: 0.875rem;
}

.move-btn {
    background: transparent;
    border: 1px solid rgba(156, 163, 175, 0.3);
    border-radius: 0.25rem;
    color: var(--text-gray-400);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem;
}

.move-btn:hover:not(:disabled) {
    border-color: var(--neon-green);
    color: var(--neon-green);
}

.move-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.move-btn svg {
    width: 1rem;
    height: 1rem;
    pointer-events: none;
}

viralbuzz-create-image .gallery-images-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

viralbuzz-create-image .gallery-image-item {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    padding: 1rem;
}

viralbuzz-create-image .gallery-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

viralbuzz-create-image .btn-preview-gallery {
    border: 1px solid var(--border-gray-600);
    background: transparent;
    color: var(--text-gray-300);
    border-radius: 0.5rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

viralbuzz-create-image .btn-preview-gallery:hover {
    color: var(--text-white);
    border-color: var(--border-gray-500);
}

viralbuzz-create-image .gallery-image-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

viralbuzz-create-image .gallery-image-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

viralbuzz-create-image .gallery-img-move-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex-shrink: 0;
}

viralbuzz-create-image .gallery-img-move-buttons .move-btn {
    min-width: 1.375rem;
    min-height: 1.375rem;
    padding: 0.2rem;
}

viralbuzz-create-image .gallery-image-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-gray-300);
}

viralbuzz-create-image .gallery-image-remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 0.375rem;
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
    flex-shrink: 0;
}

viralbuzz-create-image .gallery-image-remove-btn:hover {
    background: rgba(239, 68, 68, 0.22);
    color: #fca5a5;
}

viralbuzz-create-image .gallery-image-remove-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

viralbuzz-create-image .gallery-image-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

viralbuzz-create-image .gallery-image-chevron {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-gray-600);
    border-radius: 0.375rem;
    background: #1a1a22;
    color: var(--text-gray-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

viralbuzz-create-image .gallery-image-chevron svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
}

viralbuzz-create-image .gallery-image-chevron.collapsed svg {
    transform: rotate(-90deg);
}

viralbuzz-create-image .gallery-image-body {
    max-height: 5000px;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease;
    opacity: 1;
}

viralbuzz-create-image .gallery-image-body.collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

viralbuzz-create-image .gallery-image-item .question-image-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
    gap: 1rem;
}

@media (max-width: 900px) {
    viralbuzz-create-image .gallery-image-item .question-image-grid {
        grid-template-columns: 1fr;
    }
}

viralbuzz-create-image .gallery-image-item .image-preview-container {
    max-width: none;
    aspect-ratio: 16 / 9;
}

viralbuzz-create-image .gallery-image-item .image-preview-container.orientation-vertical {
    max-width: 320px;
    aspect-ratio: 5 / 7;
}

viralbuzz-create-image .gallery-image-item .image-preview-container.orientation-landscape {
    max-width: none;
    aspect-ratio: 16 / 9;
}

viralbuzz-create-image .gallery-image-item .question-image-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

viralbuzz-create-image .gallery-image-item .question-image-orientation-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

viralbuzz-create-image .gallery-image-item .orientation-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: var(--text-gray-500);
    background: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

viralbuzz-create-image .gallery-image-item .orientation-option:hover {
    color: var(--text-gray-300);
    border-color: var(--border-gray-500);
}

viralbuzz-create-image .gallery-image-item .orientation-option.selected {
    color: var(--neon-green, #22c55e);
    border-color: var(--neon-green, #22c55e);
    background: rgba(34, 197, 94, 0.1);
}

viralbuzz-create-image .gallery-image-item .orientation-option svg {
    width: 1.125rem;
    height: 1.125rem;
}

viralbuzz-create-image .gallery-image-item .countdown-url-group {
    margin-bottom: 0.75rem;
}

viralbuzz-create-image .gallery-image-item .countdown-url-group .countdown-url-input {
    margin-bottom: 0;
    padding-right: 6.5rem;
}

viralbuzz-create-image .gallery-image-item .countdown-url-group .btn-generate-slug {
    top: 50%;
    transform: translateY(-50%);
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

viralbuzz-create-image .question-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 640px) {
    viralbuzz-create-image .question-image-grid {
        grid-template-columns: 1fr;
    }
}

viralbuzz-create-image .question-image-col-preview {
    position: relative;
}

viralbuzz-create-image .question-image-col-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

viralbuzz-create-image .question-image-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

viralbuzz-create-image .question-image-field-header .form-label {
    margin-bottom: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-gray-500);
}

viralbuzz-create-image .question-image-field .char-counter {
    font-size: 0.75rem;
    color: var(--text-gray-500);
}

viralbuzz-create-image .question-image-field .char-counter.at-limit {
    color: #ef4444;
}

viralbuzz-create-image .image-upload-label {
    cursor: pointer;
    display: block;
}

viralbuzz-create-image .image-preview-container {
    position: relative;
    width: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px dashed var(--border-gray-600);
    background: var(--dark-surface);
}

viralbuzz-create-image .upload-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-gray-500);
    gap: 0.35rem;
    padding: 0.75rem;
    text-align: center;
}

viralbuzz-create-image .upload-placeholder svg {
    width: 2.5rem;
    height: 2.5rem;
}

.gallery-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.78);
    padding: 1rem;
}

.gallery-preview-modal.active {
    display: flex;
}

.gallery-preview-modal-content {
    width: min(980px, 100%);
    max-height: 86vh;
    background: #14141A;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
    padding: 0.75rem;
}

.gallery-preview-topbar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.gallery-preview-chip {
    justify-self: start;
    padding: 0.55rem 1rem;
    background: #21212B;
    border: 1px solid var(--border-gray-700);
    color: var(--text-gray-300);
    border-radius: 0.25rem;
    font-size: 0.95rem;
}

.gallery-preview-count-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gallery-preview-count-label {
    color: var(--text-gray-400);
    font-size: 0.9rem;
}

.gallery-preview-count {
    min-width: 64px;
    text-align: center;
    padding: 0.25rem 0.5rem;
    background: #0f0f13;
    color: var(--text-white);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.gallery-preview-close-btn {
    justify-self: end;
    border: 1px solid var(--border-gray-600);
    border-radius: 0.25rem;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: #21212B;
    color: var(--text-gray-300);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gallery-preview-close-btn svg {
    width: 1rem;
    height: 1rem;
}

.gallery-preview-stage {
    position: relative;
    background: transparent;
    min-height: 0;
    overflow: hidden;
}

.gallery-preview-viewport {
    width: min(100%, 900px);
    margin: 0 auto;
    overflow: hidden;
    background: #0b0b10;
    border-radius: 0.25rem 0.25rem 0 0;
    border: 1px solid var(--border-gray-700);
    height: min(52vh, 460px);
    position: relative;
}


.gallery-preview-track {
    display: flex;
    transition: transform 0.35s ease;
    will-change: transform;
}

.gallery-preview-slide {
    flex: 0 0 100%;
    min-width: 100%;
    height: min(52vh, 460px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
}

.gallery-preview-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gallery-preview-zoom-controls {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 4;
    display: flex;
    gap: 0.35rem;
    background: rgba(12, 15, 24, 0.78);
    border: 1px solid var(--border-gray-600);
    border-radius: 999px;
    padding: 0.25rem;
}

.gallery-zoom-btn {
    border: 1px solid var(--border-gray-600);
    background: #1a1f2b;
    color: var(--text-gray-200);
    min-width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gallery-zoom-btn.reset {
    min-width: 3.2rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.gallery-zoom-btn:hover {
    color: #fff;
    border-color: var(--neon-cyan);
}


.gallery-preview-arrow {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--border-gray-600);
    background: rgba(17, 24, 39, 0.85);
    color: var(--text-gray-200);
    cursor: pointer;
    z-index: 3;
}

.gallery-preview-arrow.prev {
    left: 0.75rem;
}

.gallery-preview-arrow.next {
    right: 0.75rem;
}

.gallery-preview-caption {
    width: min(100%, 900px);
    margin: 0 auto;
    background: #21212B;
    color: var(--text-gray-200);
    min-height: 5.25rem;
    padding: 0.55rem 0.8rem;
    border-radius: 0 0 0.25rem 0.25rem;
    line-height: 1.25;
    border: 1px solid var(--border-gray-700);
    border-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.gallery-preview-caption-main {
    min-width: 0;
    flex: 1;
}

.gallery-preview-caption-meta {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.gallery-preview-caption-title {
    margin: 0;
    font-size: 1.15rem;
    color: #fff;
    font-weight: 700;
}

.gallery-preview-caption-desc {
    margin: 0.2rem 0 0 0;
    font-size: 0.86rem;
    color: var(--text-gray-300);
}

.gallery-preview-meta-chip {
    background: #171721;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    padding: 0.35rem 0.55rem;
    min-width: 120px;
    max-width: 150px;
}

.gallery-preview-meta-chip span {
    display: block;
    font-size: 0.68rem;
    color: var(--text-gray-500);
}

.gallery-preview-meta-chip strong {
    display: block;
    font-size: 0.8rem;
    color: var(--text-gray-200);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-meta-link {
    color: #60a5fa;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gallery-preview-thumbs-wrap {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 0.5rem;
}

.gallery-preview-thumbs {
    display: flex;
    gap: 0.55rem;
    overflow-x: auto;
    padding: 0.2rem 0;
}

.gallery-preview-thumb {
    flex: 0 0 96px;
    width: 96px;
    height: 62px;
    border-radius: 0.35rem;
    border: 2px solid var(--border-gray-700);
    overflow: hidden;
    cursor: pointer;
    background: #101018;
    padding: 0;
}

.gallery-preview-thumb.active {
    border-color: var(--neon-green);
}

.gallery-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-link-modal {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 1rem;
}

.gallery-link-modal.active {
    display: flex;
}

.gallery-link-modal-content {
    width: min(460px, 100%);
    background: #171721;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.75rem;
    overflow: hidden;
}

.gallery-link-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border-gray-700);
}

.gallery-link-modal-header h3 {
    margin: 0;
    color: var(--text-white);
    font-size: 1rem;
}

.gallery-link-modal-body {
    padding: 1rem;
}

.gallery-link-modal-hint {
    margin-top: 0.4rem;
    color: var(--text-gray-500);
    font-size: 0.75rem;
}

.gallery-link-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.8rem 1rem 1rem;
}

/* Preview Modal */
.preview-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 1000;
    overflow-y: auto;
}

.preview-modal.active {
    display: flex;
    flex-direction: column;
}

.preview-header {
    background: linear-gradient(90deg, var(--neon-pink), var(--purple-500), var(--neon-cyan));
    padding: 0.75rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.preview-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.preview-logo {
    width: 2rem;
    height: 2rem;
    background: var(--text-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-logo svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #000;
}

.preview-brand {
    color: var(--text-white);
    font-weight: bold;
    font-family: var(--font-family);
}

.preview-close-btn {
    width: 2rem;
    height: 2rem;
    background: var(--text-white);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.preview-close-btn:hover {
    background: #e5e7eb;
}

.preview-close-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #000;
}

.preview-content {
    flex: 1;
    display: flex;
    height: calc(100vh - 60px);
}

.preview-image-area {
    flex: 1;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.preview-image-area img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Preview Loading */
.preview-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 15;
}

.preview-loading-spinner {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--neon-green);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.preview-loading-text {
    color: var(--text-white);
    font-size: 1rem;
    font-family: var(--font-family);
}

/* View Toggle Buttons */
.preview-view-controls {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 10;
}

.preview-view-btn {
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.preview-view-btn:hover {
    background: #fff;
    transform: scale(1.05);
}

.preview-view-btn.active {
    background: #fbbf24;
}

.preview-view-btn svg {
    width: 1.125rem;
    height: 1.125rem;
    stroke: #000;
    fill: #000;
}

/* Grid View Overlay */
.preview-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 20;
    padding: 2.5rem;
    overflow-y: auto;
    display: none;
}

.preview-grid-overlay.active {
    display: block;
}

.preview-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.preview-grid-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.preview-grid-item:hover {
    border-color: #fbbf24;
    transform: scale(1.02);
}

.preview-grid-item.active {
    border-color: #fbbf24;
    border-width: 3px;
}

.preview-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-details {
    width: 400px;
    background: #1f2937;
    padding: 1.5rem;
    overflow-y: auto;
}

@media (max-width: 1023px) {
    .preview-details {
        width: 100%;
        max-height: 50vh;
    }
    
    .preview-content {
        flex-direction: column;
    }
    
    .preview-image-area {
        height: 50vh;
    }
}

.preview-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.preview-nav-btn {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #fbbf24;
    border: none;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.preview-nav-btn:hover:not(:disabled) {
    background: #f59e0b;
}

.preview-nav-btn:disabled {
    background: #4b5563;
    cursor: not-allowed;
    opacity: 0.5;
}

.preview-nav-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

.preview-counter {
    color: var(--text-white);
    font-size: 1.125rem;
    font-weight: 600;
    font-family: var(--font-family);
}

.preview-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 1rem;
    font-family: var(--font-family);
}

.preview-description {
    color: var(--text-gray-300);
    margin-bottom: 1.5rem;
    font-family: var(--font-family);
    line-height: 1.6;
}

.preview-checkout-btn {
    width: 100%;
    background: #fbbf24;
    color: #000;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
    font-family: var(--font-family);
}

.preview-checkout-btn:hover {
    background: #f59e0b;
}

.hidden {
    display: none !important;
}


































































/* Create GIF Component Styles */

viralbuzz-create-gif {
    display: block;
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px;
    background-color: #14141A;
}

viralbuzz-create-gif .content-container {
    height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

viralbuzz-create-gif .content-container::-webkit-scrollbar {
    width: 6px;
}

.gif-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 1rem;
}

@media (min-width: 1024px) {
    .gif-layout {
        grid-template-columns: 1fr 280px;
        gap: 1.5rem;
        padding: 2rem 1.5rem;
        max-width: 1400px;
        margin: 0 auto;
    }
}

.gif-form-column {
    min-width: 0;
    padding: 0;
    width: 100%;
}

.gif-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-section {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
}

.page-header {
    margin-bottom: 1.5rem;
}

.page-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.page-subtitle {
    font-size: 1rem;
    color: var(--text-gray-400);
    font-family: var(--font-family);
}

.section-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 1.5rem;
    font-family: var(--font-family);
}

.form-field {
    margin-bottom: 1.5rem;
}

viralbuzz-create-gif .form-field-after-media-preview {
    margin-top: 1.25rem;
}

viralbuzz-create-gif .form-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
}

viralbuzz-create-gif .form-field-header .form-label {
    margin-bottom: 0;
}

viralbuzz-create-gif .char-counter {
    font-size: 0.75rem;
    color: var(--text-gray-500);
    font-family: var(--font-family);
    flex-shrink: 0;
}

viralbuzz-create-gif .char-counter.at-limit {
    color: #ef4444;
    font-weight: 600;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-300);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.form-label-hint {
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--text-gray-500);
    margin-left: 0.5rem;
}

.form-hint {
    font-size: 0.75rem;
    color: var(--text-gray-400);
    margin-top: 0.5rem;
    font-family: var(--font-family);
}

.required {
    color: #ef4444;
}

.form-input,
.form-textarea {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    font-size: 0.875rem;
    font-family: var(--font-family);
    transition: border-color 0.2s ease;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--neon-green);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-gray-500);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.feature-image-container {
    margin-top: 0.5rem;
}

.feature-image-label {
    cursor: pointer;
    display: block;
    width: 100%;
}

.feature-image-preview {
    position: relative;
    width: 100%;
    height: 250px;
    background-color: #000;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px dashed var(--border-gray-600);
    transition: border-color 0.2s ease;
}

.feature-image-banner {
    height: 400px;
}

@media (max-width: 768px) {
    .feature-image-banner {
        height: 250px;
    }
}

.feature-image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-gray-500);
    z-index: 10;
}

.feature-image-placeholder svg {
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.75rem;
}

.feature-image-text {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.feature-image-hint {
    font-size: 0.75rem;
}

.feature-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* GIF Method Selector */
.gif-method-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.gif-method-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-600);
    background: transparent;
    color: var(--text-gray-400);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-family);
}

.gif-method-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--border-gray-500);
    color: var(--text-white);
}

.gif-method-btn.active {
    background: var(--text-white);
    color: #1f2937;
    border-color: var(--text-white);
}

.gif-method-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.content-type-separator {
    color: var(--text-gray-500);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-family);
}

.content-section {
    display: none;
}

.content-section[style*="display: block"] {
    display: block !important;
}

/* GIF Upload Area */
.gif-upload-container {
    margin-top: 0.5rem;
}

.gif-upload-label {
    cursor: pointer;
    display: block;
    width: 100%;
}

.gif-upload-area {
    position: relative;
    width: 100%;
    min-height: 300px;
    background: var(--dark-surface);
    border: 2px dashed var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 2.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease;
}

.gif-upload-area:hover {
    border-color: var(--neon-green);
}

.gif-upload-area.has-gif {
    padding: 0;
    min-height: auto;
}

.gif-upload-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-gray-500);
    z-index: 10;
}

.gif-upload-placeholder svg {
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.75rem;
}

.gif-upload-text {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.gif-upload-hint {
    font-size: 0.75rem;
}

.gif-upload-img {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: contain;
    border-radius: 0.5rem;
}

/* GIF Preview Container */
.gif-preview-container {
    width: 100%;
    min-height: 300px;
    background: var(--dark-surface);
    border: 2px solid var(--border-gray-600);
    border-radius: 0.5rem;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}

.gif-preview-container img {
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
}

.gif-actions-sidebar {
    display: none;
}

@media (min-width: 1024px) {
    .gif-actions-sidebar {
        display: block;
        align-self: start;
        width: 280px;
        position: sticky;
        top: 20px;
        height: fit-content;
        max-height: calc(100vh - 100px);
    }
}

.actions-sticky {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
    width: 100%;
    height: fit-content;
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

.actions-sticky::-webkit-scrollbar {
    width: 3px;
}

.actions-sticky::-webkit-scrollbar-track {
    background: transparent;
}

.actions-sticky::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2);
    border-radius: 3px;
}

.actions-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 1.5rem;
    font-family: var(--font-family);
}

.actions-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    font-family: var(--font-family);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: inline-block;
}

.action-btn-primary {
    background: linear-gradient(to right, var(--neon-pink), var(--purple-500), var(--neon-cyan));
    color: var(--text-white);
}

.action-btn-primary:hover {
    opacity: 0.9;
}

.action-btn-secondary {
    background-color: var(--dark-surface);
    color: var(--text-white);
    border: 1px solid var(--border-gray-700);
}

.action-btn-secondary:hover {
    background-color: var(--gray-800);
    border-color: var(--text-gray-600);
}

.action-btn-link {
    background: transparent;
    color: var(--text-gray-300);
    border: 1px solid var(--border-gray-700);
}

.action-btn-link:hover {
    color: var(--text-white);
    border-color: var(--text-gray-600);
}

.mobile-actions-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--dark-card);
    border-top: 1px solid var(--border-gray-700);
    padding: 1rem;
    z-index: 40;
    display: flex;
    gap: 0.75rem;
}

@media (min-width: 1024px) {
    .mobile-actions-bar {
        display: none;
    }
}

.mobile-actions-bar .action-btn {
    flex: 1;
}

.mobile-actions-bar .action-btn-primary {
    flex: 2;
}

@media (max-width: 1023px) {
    .gif-form-column {
        padding-bottom: 100px;
    }
}

.hidden {
    display: none !important;
}


































































/* Create Meme Component Styles - Matching Design */

viralbuzz-create-meme {
    display: block;
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px;
    background-color: #14141A;
}

viralbuzz-create-meme .content-container {
    height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

viralbuzz-create-meme .content-container::-webkit-scrollbar {
    width: 6px;
}

.meme-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "main"
        "side";
    gap: 1.5rem;
    padding: 2rem 1rem;
}

@media (min-width: 900px) {
    .meme-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
        grid-template-areas: "main side";
        gap: 1.5rem;
        padding: 2rem 1.5rem;
        max-width: 1400px;
        margin: 0 auto;
        align-items: start;
    }
    
    /* Ensure sidebar is on the right - grid automatically places it correctly */
    .meme-form-column {
        grid-area: main;
    }
    
    .meme-layout > .quiz-actions-sidebar {
        grid-area: side;
        display: block;
        align-self: start;
        width: 280px;
        min-width: 280px;
        position: sticky;
        top: 20px;
        height: fit-content;
        max-height: calc(100vh - 100px);
        background-color: var(--dark-card);
        border-radius: 0.5rem;
        border: 1px solid var(--border-gray-700);
    }
}

.meme-form-column {
    grid-area: main;
    min-width: 0;
    padding: 0;
    width: 100%;
}

.meme-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-section {
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
}

.page-header {
    margin-bottom: 1.5rem;
}

.page-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.page-subtitle {
    font-size: 1rem;
    color: var(--text-gray-400);
    font-family: var(--font-family);
}

.meme-editor-section {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.meme-editor-header {
    padding: 1.5rem;
    background-color: var(--dark-card);
    border-radius: 0.5rem 0.5rem 0 0;
    border: 1px solid var(--border-gray-700);
    border-bottom: none;
    margin-bottom: 1.5rem;
}

.section-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-white);
    font-family: var(--font-family);
    margin-bottom: 0.5rem;
}

.form-hint {
    font-size: 0.875rem;
    color: var(--text-gray-400);
    margin: 0;
}

/* Meme Image block — layout matches personality quiz question image (global PQ styles apply). */
viralbuzz-create-meme .meme-editor-section .meme-image-question-block {
    padding: 1.5rem;
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    border: 1px solid var(--border-gray-700);
    margin-top: 1rem;
}

/* Show full meme export — editor canvas is ~640×580, not 7∶5; cover was cropping top/bottom. */
viralbuzz-create-meme #memeImagePreview .meme-saved-preview-img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

viralbuzz-create-meme #memeImagePlaceholder {
    z-index: 2;
}

.meme-editor-wrapper {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Ensure top bar and text controls are connected */
.meme-editor-wrapper > .viral-buzz-top-bar + .viral-buzz-text-controls {
    margin-top: 0;
}

/* Top Action Bar - Single purple bar with buttons inside (solid purple, no gradient) */
.viral-buzz-top-bar.tm-caps-top-bar {
    display: flex;
    gap: 0;
    width: 100%;
    background: #9333ea;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
    overflow: hidden;
}

.viral-buzz-top-bar .viral-buzz-btn,
.viral-buzz-top-bar .tm-caps-btn {
    flex: 1;
    background: transparent;
    color: white;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-family);
}

.viral-buzz-top-bar .viral-buzz-btn:last-child,
.viral-buzz-top-bar .tm-caps-btn:last-child {
    border-right: none;
}

.viral-buzz-top-bar .viral-buzz-btn:hover,
.viral-buzz-top-bar .tm-caps-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.viral-buzz-top-bar .viral-buzz-btn.active,
.viral-buzz-top-bar .tm-caps-btn.active {
    background: rgba(255, 255, 255, 0.15);
}

.viral-buzz-top-bar .viral-buzz-btn i,
.viral-buzz-top-bar .tm-caps-btn i {
    font-size: 1rem;
}

/* Controls Panel - Single white panel below purple bar */
.viral-buzz-controls-panel.tm-caps-controls-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-700);
    border-top: none;
    border-radius: 0 0 0.5rem 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Row 1: Dropdowns, Formatting, Colors */
.viral-buzz-controls-row-1.tm-caps-controls-row-1 {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-gray-700);
    flex-wrap: wrap;
}

.viral-buzz-controls-left {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.viral-buzz-controls-center {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex: 1;
    justify-content: center;
}

.viral-buzz-controls-right {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Row 2: Sliders - Horizontal layout */
.viral-buzz-controls-row-2.tm-caps-controls-row-2 {
    display: flex;
    width: 100%;
    padding-top: 1rem;
}

.viral-buzz-controls-panel .viral-buzz-slider-controls,
.viral-buzz-controls-panel .tm-caps-slider-controls {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    width: 100%;
    align-items: flex-start;
}

.viral-buzz-slider-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.viral-buzz-slider-item label {
    color: var(--text-gray-300);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-family);
    white-space: nowrap;
}

.viral-buzz-slider-item label span {
    color: var(--text-gray-400);
    font-weight: 400;
}

/* Legacy text controls - hide if using new controls panel */
.viral-buzz-text-controls.tm-caps-text-controls:not(.viral-buzz-controls-panel) {
    display: none;
}

.viral-buzz-btn-wrapper.tm-caps-btn-wrapper {
    display: flex;
    align-items: center;
}

.viral-buzz-select.tm-caps-select {
    background-color: var(--dark-card);
    border: 1px solid var(--border-gray-700);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    color: var(--text-white);
    font-size: 0.875rem;
    cursor: pointer;
    font-family: var(--font-family);
    min-width: 120px;
}

.viral-buzz-select.tm-caps-select:focus {
    outline: none;
    border-color: var(--neon-green);
}

.viral-buzz-btn.tm-caps-btn {
    background: transparent;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    color: var(--text-white);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    font-family: var(--font-family);
}

.viral-buzz-btn.tm-caps-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--neon-green);
}

.viral-buzz-btn.tm-caps-btn.active {
    background-color: var(--neon-green);
    border-color: var(--neon-green);
    color: #000;
}

.viral-buzz-colorpicker.tm-caps-colorpicker {
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    border: 2px solid var(--border-gray-700);
    cursor: pointer;
    transition: border-color 0.3s ease;
    flex-shrink: 0;
    background-color: #000;
}

.viral-buzz-colorpicker.tm-caps-colorpicker:hover {
    border-color: var(--neon-green);
}

/* Slider Controls - Inside controls panel */
.viral-buzz-controls-panel .viral-buzz-slider-controls,
.viral-buzz-controls-panel .tm-caps-slider-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

/* Slider Controls - Standalone (if needed) */
.viral-buzz-slider-controls.tm-caps-slider-controls:not(.viral-buzz-controls-panel .viral-buzz-slider-controls):not(.tm-caps-controls-panel .tm-caps-slider-controls) {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.viral-buzz-slider-controls > div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.viral-buzz-slider-controls label {
    color: var(--text-gray-300);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-family);
}

.viral-buzz-slider-controls label span {
    color: var(--text-gray-400);
    font-weight: 400;
}

/* Canvas Container - standalone, after controls panel */
.viral-buzz-container.tm-caps-container {
    width: 100%;
    min-height: 500px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    box-sizing: border-box;
    background-color: var(--dark-card);
    border: 1px solid var(--border-gray-700);
    border-radius: 0;
    padding: 2rem;
    margin-bottom: 1rem;
}

/* Footer Actions */
.viral-buzz-footer.tm-caps-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 0 0 0;
    margin-top: 0;
    border-top: 1px solid var(--border-gray-700);
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

/* Form Fields */
.form-field {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-300);
    margin-bottom: 0.5rem;
}

.required {
    color: #ef4444;
}

.form-input,
.form-textarea {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    font-size: 1rem;
    font-family: var(--font-family);
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-gray-500);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--neon-green);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Actions Sidebar (shared sidebar markup) */
.meme-layout > .quiz-actions-sidebar {
    grid-area: side;
    display: none;
}

@media (min-width: 900px) {
    .meme-layout > .quiz-actions-sidebar {
        display: block;
    }
}

.actions-sticky {
    position: sticky;
    top: 80px;
    background-color: var(--dark-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray-700);
}

.actions-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 1rem;
    font-family: var(--font-family);
}

.actions-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-btn {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-family: var(--font-family);
}

.action-btn-primary {
    background: linear-gradient(to right, var(--neon-pink), #9333ea, var(--neon-cyan));
    color: white;
}

.action-btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.action-btn-secondary {
    background-color: var(--dark-surface);
    color: var(--text-white);
    border: 1px solid var(--border-gray-700);
}

.action-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--neon-green);
}

.action-btn-link {
    background: none;
    color: var(--text-gray-400);
    text-align: center;
}

.action-btn-link:hover {
    color: var(--text-white);
}

/* Mobile Actions Bar */
.mobile-actions-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--dark-card);
    border-top: 1px solid var(--border-gray-700);
    padding: 1rem;
    display: flex;
    gap: 0.75rem;
    z-index: 40;
}

@media (min-width: 900px) {
    .mobile-actions-bar {
        display: none;
    }
}

.mobile-actions-bar .action-btn {
    flex: 1;
}

/* Assets Modal (Templates/Emoji) */
.meme-assets-modal {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 180ms ease;
}

.meme-assets-modal.is-open {
    opacity: 1;
}

.meme-assets-dialog {
    width: min(980px, 96vw);
    height: min(82vh, 760px);
    display: flex;
    flex-direction: column;
    background: #14141A;
    border: 1px solid var(--border-gray-700);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.45);
    transform: translateY(16px) scale(0.98);
    transition: transform 220ms ease;
}

.meme-assets-modal.is-open .meme-assets-dialog {
    transform: translateY(0) scale(1);
}

.meme-assets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: #1A1A1A;
    border-bottom: 1px solid var(--border-gray-700);
}

.meme-assets-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #E5E7EB;
}

.meme-assets-close-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-gray-700);
    background: #0f1117;
    color: #d1d5db;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.meme-assets-close-btn:hover {
    border-color: #4b5563;
    color: #fff;
}

.meme-assets-modal-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 1.25rem;
    background: #11131B;
    position: relative;
}

.meme-assets-modal-body .tm-caps-templates-panel,
.meme-assets-modal-body .viral-buzz-templates-panel,
.meme-assets-modal-body .tm-caps-emoji,
.meme-assets-modal-body .viral-buzz-emoji,
.meme-assets-modal-body .tm-caps-gallery,
.meme-assets-modal-body .viral-buzz-gallery {
    width: 100%;
    margin: 0;
    position: static;
    height: 100%;
    max-height: 100%;
    min-height: 0;
}

.meme-assets-modal .tm-caps-templates-panel,
.meme-assets-modal .viral-buzz-templates-panel {
    display: flex;
    flex-direction: column;
}

.meme-assets-modal .tm-caps-templates-content,
.meme-assets-modal .viral-buzz-templates-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0.5rem 0.5rem 0;
}

.meme-assets-modal .tm-caps-templates-search,
.meme-assets-modal .viral-buzz-templates-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.625rem;
    align-items: center;
}

.meme-assets-modal .tm-caps-templates-search.template-search-layout,
.meme-assets-modal .viral-buzz-templates-search.template-search-layout {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
    grid-template-areas: "search category";
    padding: 0.25rem 0.5rem 0.75rem;
}

.meme-assets-modal .tm-caps-templates-search.template-search-layout .tm-caps-templates-search-input,
.meme-assets-modal .tm-caps-templates-search.template-search-layout .viral-buzz-templates-search-input,
.meme-assets-modal .viral-buzz-templates-search.template-search-layout .tm-caps-templates-search-input,
.meme-assets-modal .viral-buzz-templates-search.template-search-layout .viral-buzz-templates-search-input {
    grid-area: search;
    width: 100%;
}

.meme-assets-modal .tm-caps-templates-search.template-search-layout .tm-caps-category-filter,
.meme-assets-modal .tm-caps-templates-search.template-search-layout .viral-buzz-category-filter,
.meme-assets-modal .viral-buzz-templates-search.template-search-layout .tm-caps-category-filter,
.meme-assets-modal .viral-buzz-templates-search.template-search-layout .viral-buzz-category-filter {
    grid-area: category;
    margin: 0;
    width: 100%;
}

.meme-assets-modal .tm-caps-templates-search.template-search-layout i,
.meme-assets-modal .viral-buzz-templates-search.template-search-layout i {
    display: none;
}

.meme-assets-modal .tm-caps-templates-search-input,
.meme-assets-modal .viral-buzz-templates-search-input,
.meme-assets-modal .tm-caps-category-select,
.meme-assets-modal .viral-buzz-category-select {
    min-height: 2.5rem;
}

.meme-assets-modal .tm-caps-templates-footer,
.meme-assets-modal .viral-buzz-templates-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin: 0.75rem 0.5rem 0;
    padding: 0.75rem 0 0.5rem;
}

.meme-assets-modal .tm-caps-footer-left,
.meme-assets-modal .viral-buzz-footer-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.meme-assets-modal .tm-caps-pagination,
.meme-assets-modal .viral-buzz-pagination {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.meme-assets-modal .tm-caps-insert-options,
.meme-assets-modal .viral-buzz-insert-options {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.meme-assets-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem 1.25rem 1rem;
    border-top: 1px solid var(--border-gray-700);
    background: #0f1117;
}

.meme-assets-footer-actions {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.meme-assets-footer .meme-modal-action-btn {
    min-height: 2.25rem;
    border-radius: 0.5rem;
    border: 1px solid #374151;
    padding: 0.45rem 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.16s ease;
}

.meme-assets-footer .meme-modal-action-btn.secondary {
    background: #111827;
    color: #E5E7EB;
}

.meme-assets-footer .meme-modal-action-btn.primary {
    background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
    border-color: #7c3aed;
    color: #fff;
}

.meme-assets-footer .meme-modal-action-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.meme-assets-footer .meme-modal-action-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.meme-assets-modal .tm-caps-templates-grid,
.meme-assets-modal .viral-buzz-templates-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
    align-content: start;
}

.meme-assets-modal .tm-caps-template-item,
.meme-assets-modal .viral-buzz-template-item {
    border-radius: 0.375rem;
    overflow: hidden;
}

.meme-assets-modal .tm-caps-template-item img,
.meme-assets-modal .viral-buzz-template-item img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
}

.meme-assets-modal .tm-caps-template-name,
.meme-assets-modal .viral-buzz-template-name {
    font-size: 0.75rem;
    line-height: 1.2;
    padding: 0.375rem 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.meme-assets-modal .tm-caps-emoji,
.meme-assets-modal .viral-buzz-emoji {
    display: flex;
    flex-direction: column;
}

.meme-assets-modal .tm-caps-emoji-wrapper,
.meme-assets-modal .viral-buzz-emoji-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.meme-assets-modal .tm-caps-emoji-list,
.meme-assets-modal .viral-buzz-emoji-list {
    flex: 1;
    overflow: auto;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 0.5rem;
    align-content: start;
    padding: 0.5rem;
}

.meme-assets-modal .tm-caps-emoji-item,
.meme-assets-modal .viral-buzz-emoji-item {
    width: 56px;
    height: 56px;
    padding: 0.35rem;
    justify-self: center;
}

.meme-assets-modal .tm-caps-emoji-item img,
.meme-assets-modal .viral-buzz-emoji-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.meme-assets-modal .tm-caps-close-templates-btn,
.meme-assets-modal .viral-buzz-close-templates-btn,
.meme-assets-modal .tm-caps-close-emoji-btn,
.meme-assets-modal .viral-buzz-close-emoji-btn,
.meme-assets-modal .tm-caps-close-gallery-btn,
.meme-assets-modal .viral-buzz-close-gallery-btn {
    display: none !important;
}

.meme-assets-modal .tm-caps-templates-header,
.meme-assets-modal .viral-buzz-templates-header,
.meme-assets-modal .tm-caps-emoji-header,
.meme-assets-modal .viral-buzz-emoji-header,
.meme-assets-modal .tm-caps-gallery-header,
.meme-assets-modal .viral-buzz-gallery-header {
    display: none !important;
}

.meme-assets-loading {
    position: absolute;
    inset: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(17, 19, 27, 0.84);
    z-index: 20;
    pointer-events: none;
}

.meme-assets-loading-spinner {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 2px solid rgba(156, 163, 175, 0.25);
    border-top-color: #9333ea;
    animation: memeAssetsSpin 0.75s linear infinite;
}

.meme-assets-loading-label {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.875rem;
}

@keyframes memeAssetsSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {
    .meme-assets-dialog {
        width: 96vw;
        height: 84vh;
        border-radius: 0.375rem;
    }

    .meme-assets-modal-body {
        padding: 0.875rem;
    }

    .meme-assets-footer {
        padding: 0.625rem 0.875rem 0.875rem;
    }

    .meme-assets-loading {
        inset: 0.875rem;
    }

    .meme-assets-modal .tm-caps-templates-grid,
    .meme-assets-modal .viral-buzz-templates-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .meme-assets-modal .tm-caps-templates-search.template-search-layout,
    .meme-assets-modal .viral-buzz-templates-search.template-search-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "search"
            "category";
        padding: 0;
    }
}

/* Preview Modal */
.preview-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(2px);
    z-index: 220;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    transition: opacity 180ms ease;
}

.preview-modal.is-open {
    opacity: 1;
}

.preview-header {
    width: min(980px, 96vw);
    background: #1A1A1A;
    border: 1px solid var(--border-gray-700);
    border-bottom: none;
    padding: 0.875rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.5rem 0.5rem 0 0;
    transform: translateY(16px) scale(0.98);
    transition: transform 220ms ease;
}

.preview-modal.is-open .preview-header {
    transform: translateY(0) scale(1);
}

.preview-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #E5E7EB;
}

viralbuzz-create-meme .preview-close-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(156, 163, 175, 0.45);
    background: #1f2937;
    color: #f9fafb;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

viralbuzz-create-meme .preview-close-btn:hover {
    border-color: #9ca3af;
    background: #374151;
    color: #ffffff;
}

viralbuzz-create-meme .preview-close-btn svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    color: #f9fafb;
}

viralbuzz-create-meme .preview-close-btn svg path {
    stroke: currentColor;
}

.preview-content {
    width: min(980px, 96vw);
    height: min(82vh, 760px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #11131B;
    border: 1px solid var(--border-gray-700);
    border-top: none;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.45);
    transform: translateY(16px) scale(0.98);
    transition: transform 220ms ease;
    overflow-y: auto;
}

.preview-modal.is-open .preview-content {
    transform: translateY(0) scale(1);
}

.preview-image-area {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 1.25rem;
}

.preview-image-area img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Meme preview: app runs modal under main; we reparent to body in JS — needs its own z-index and compact height */
#memePreviewModal.preview-modal {
    z-index: 10050;
    /* Space below header / safe area so the title bar is not lost under the nav */
    padding: max(3.5rem, env(safe-area-inset-top, 0px)) 1rem 1rem 1rem;
    box-sizing: border-box;
}

#memePreviewModal .preview-header,
#memePreviewModal .preview-content {
    width: min(720px, 92vw);
    max-width: 100%;
}

#memePreviewModal .preview-content {
    /* Hug the image: avoid a fixed 68–82vh empty “letterbox” around small previews */
    height: auto;
    min-height: 0;
    max-height: min(78vh, 620px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#memePreviewModal .preview-image-area {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0.5rem 0.6rem 0.65rem 0.6rem;
    box-sizing: border-box;
}

#memePreviewModal .preview-image-area img {
    max-width: 100%;
    max-height: min(70vh, 580px);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.vb-meme-modal-open-btn {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.vb-meme-modal-shell {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1500;
}

.vb-meme-modal-shell.is-open {
    display: block;
}

.vb-meme-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
}

.vb-meme-modal-dialog {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1240px, 90vw);
    height: min(780px, 86vh);
    background: #0f172a;
    border: 1px solid #1f2937;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media (max-width: 900px) {
    .vb-meme-modal-dialog {
        width: 94vw;
        height: 86vh;
    }
}

.vb-meme-modal-header {
    height: 56px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #1f2937;
    background: #111827;
}

.vb-meme-modal-header h3 {
    margin: 0;
    color: #f3f4f6;
    font-size: 14px;
}

.vb-meme-modal-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #374151;
    background: #1f2937;
    color: #fff;
    cursor: pointer;
}

.vb-meme-modal-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.vb-meme-modal-body--has-editor {
    position: relative;
}

.vb-meme-editor-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.92);
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.vb-meme-editor-loading-overlay.vb-meme-editor-loading-overlay--hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.vb-meme-editor-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.vb-meme-editor-spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(139, 92, 246, 0.25);
    border-top-color: #a78bfa;
    animation: vb-meme-editor-spin 0.75s linear infinite;
}

@keyframes vb-meme-editor-spin {
    to {
        transform: rotate(360deg);
    }
}

.vb-meme-editor-loading-text {
    color: #e5e7eb;
    font-size: 14px;
    font-weight: 500;
}

.vb-meme-modal-loading {
    padding: 18px;
    color: #e5e7eb;
    font-size: 14px;
}
/* Latest Page Styles - Matching Web App Design */
viralbuzz-latest {
    display: block;
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px;
    background-color: #0f0f0f;
    transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
    box-sizing: border-box;
    margin-left: 0;
}

/* Desktop: content shifts right to make room for sidebar when open */
@media (min-width: 1024px) {
    viralbuzz-latest {
        margin-left: 16rem;
        width: calc(100% - 16rem);
    }
    
    /* When sidebar is closed, main content expands to full width */
    body.sidebar-closed viralbuzz-latest,
    viralbuzz-latest.sidebar-closed {
        margin-left: 0;
        width: 100%;
    }
    
    /* When sidebar is open, ensure proper spacing */
    body.sidebar-open viralbuzz-latest,
    viralbuzz-latest.sidebar-open {
        margin-left: 16rem;
        width: calc(100% - 16rem);
    }
}

.latest-page {
    width: 100%;
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Horizontal Slider Section */
.latest-slider-section {
    background-color: #0f0f0f;
    padding: 1.5rem 0;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.latest-slider-container {
    position: relative;
    overflow: hidden;
    padding: 0 50px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.latest-slider-wrapper {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.latest-slider-wrapper::-webkit-scrollbar {
    display: none;
}

.latest-slider-slide {
    min-width: 150px;
    width: 150px;
    height: 150px;
    flex-shrink: 0;
}

.latest-slider-slide-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
}

.latest-slider-slide-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.latest-slider-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
    padding: 0.5rem;
}

.latest-slider-title {
    font-size: 0.625rem;
    font-weight: 600;
    color: white;
    line-height: 1.2;
    margin: 0;
}

.latest-slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: #000000;
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.latest-slider-nav-btn:hover {
    background: #1a1a1a;
}

.latest-slider-nav-btn.prev {
    left: 0;
}

.latest-slider-nav-btn.next {
    right: 0;
}

.latest-slider-nav-btn svg {
    width: 14px;
    height: 14px;
}

/* Main Content Area */
.latest-main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1rem;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Top Grid Layout */
.latest-grid-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 2rem;
    width: 100%;
}

@media (min-width: 1024px) {
    .latest-grid-top {
        grid-template-columns: 7fr 5fr;
        gap: 0;
    }
}

/* Left Column - Large Feature Post */
.latest-left-column {
    width: 100%;
}

.latest-feature-post {
    background-color: #181818;
    border-radius: 0.5rem;
    overflow: visible;
    cursor: pointer;
    position: relative;
}

.latest-feature-image {
    position: relative;
    height: 50px;
    overflow: hidden;
    border-radius: 0.5rem 0.5rem 0 0;
}

@media (min-width: 768px) {
    .latest-feature-image {
        height: 500px;
    }
}

.latest-feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.latest-feature-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
    padding: 1.5rem;
}

.latest-feature-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.latest-stat-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.latest-stat-item svg {
    width: 1rem;
    height: 1rem;
}

.latest-feature-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .latest-feature-title {
        font-size: 1.875rem;
    }
}

.latest-feature-author {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

/* Right Column - Two Smaller Posts */
.latest-right-column {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.latest-small-post {
    background-color: #181818;
    border-radius: 0.5rem;
    overflow: visible;
    cursor: pointer;
    position: relative;
    margin-top: 0;
}

.latest-small-post:first-child {
    margin-top: 0;
}

@media (min-width: 1024px) {
    .latest-small-post:first-child {
        margin-top: 0;
    }
}

.latest-small-image {
    position: relative;
    height: 250px;
    overflow: hidden;
    border-radius: 0.5rem 0.5rem 0 0;
}

.latest-small-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.latest-small-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
    padding: 1rem;
}

.latest-small-stats {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.latest-small-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: white;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.latest-small-author {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
}

/* Reaction Icons */
.latest-reaction-icons {
    position: absolute;
    top: -0.5rem;
    left: 0.5rem;
    z-index: 10;
    display: flex;
    gap: 0.25rem;
}

.latest-reaction-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.latest-reaction-like {
    background-color: #ef4444;
}

.latest-reaction-like svg {
    width: 2rem;
    height: 2rem;
    color: white;
}

.latest-reaction-laugh {
    background-color: #facc15;
    font-size: 2.5rem;
}

/* Trending Badge */
.latest-trending-badge {
    position: absolute;
    top: -0.5rem;
    right: 0.5rem;
    z-index: 10;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(to right, #ff00ff, #9333ea, #00ffff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.latest-trending-badge svg {
    width: 2rem;
    height: 2rem;
    color: white;
}

/* Bottom Grid Layout */
.latest-grid-bottom {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
    width: 100%;
}

@media (min-width: 1024px) {
    .latest-grid-bottom {
        grid-template-columns: 7fr 5fr;
    }
}

/* Grid Posts */
.latest-posts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .latest-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.latest-grid-post {
    background-color: #181818;
    border-radius: 0.5rem;
    overflow: visible;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s ease;
}

.latest-grid-post:hover {
    background-color: #121212;
}

.latest-grid-image {
    position: relative;
    height: 250px;
    overflow: hidden;
    border-radius: 0.5rem 0.5rem 0 0;
}

.latest-grid-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.latest-category-badge {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.latest-category-text {
    font-size: 0.75rem;
    color: white;
}

.latest-category-num {
    font-size: 0.75rem;
    color: white;
    font-weight: 500;
}

.latest-category-name {
    font-size: 0.75rem;
    color: white;
    font-weight: 500;
}

.latest-grid-content {
    padding: 1rem;
}

.latest-grid-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: white;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.latest-grid-description {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.latest-grid-author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.latest-author-avatar {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    object-fit: cover;
}

.latest-author-text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Sidebar */
.latest-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Leaderboard */
.latest-leaderboard {
    background-color: #121212;
    border-radius: 0.5rem;
    padding: 1.5rem;
}

.latest-leaderboard-title {
    font-size: 1.125rem;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
    .latest-leaderboard-title {
        font-size: 1.25rem;
    }
}

.latest-leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .latest-leaderboard-list {
        gap: 0.75rem;
    }
}

.latest-leaderboard-item {
    background-color: #181818;
    border-radius: 0.5rem;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .latest-leaderboard-item {
        padding: 0.75rem;
        gap: 0.75rem;
    }
}

.latest-leaderboard-rank {
    font-size: 1.25rem;
    font-weight: bold;
    color: white;
    flex-shrink: 0;
    width: 1.5rem;
}

@media (min-width: 640px) {
    .latest-leaderboard-rank {
        font-size: 1.5rem;
        width: 2rem;
    }
}

.latest-leaderboard-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.latest-leaderboard-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
}

@media (min-width: 640px) {
    .latest-leaderboard-avatar {
        width: 3rem;
        height: 3rem;
    }
}

.latest-leaderboard-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 1rem;
    height: 1rem;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    border: 2px solid #fbbf24;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

@media (min-width: 640px) {
    .latest-leaderboard-badge {
        width: 1.25rem;
        height: 1.25rem;
    }
}

.latest-leaderboard-badge::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.375rem;
    height: 0.375rem;
    background-color: #facc15;
    border-radius: 0.125rem;
}

@media (min-width: 640px) {
    .latest-leaderboard-badge::after {
        width: 0.5rem;
        height: 0.5rem;
    }
}

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

.latest-leaderboard-name {
    font-weight: bold;
    color: white;
    font-size: 0.75rem;
    line-height: 1.2;
}

@media (min-width: 640px) {
    .latest-leaderboard-name {
        font-size: 0.875rem;
    }
}

.latest-leaderboard-points {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.2;
}

/* Ad Block */
.latest-ad-block {
    background-color: #d1d5db;
    border-radius: 0.5rem;
    padding: 2rem;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.latest-ad-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(0, 0, 0, 0.1) 10px, rgba(0, 0, 0, 0.1) 20px),
                      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(0, 0, 0, 0.1) 10px, rgba(0, 0, 0, 0.1) 20px);
}

.latest-ad-pattern::after {
    content: '$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.2);
    word-spacing: 0.5rem;
}

.latest-ad-content {
    position: relative;
    z-index: 10;
    text-align: center;
}

.latest-ad-text {
    font-size: 3.75rem;
    font-weight: bold;
    color: #9333ea;
    margin-bottom: 0.5rem;
    font-family: sans-serif;
}

.latest-ad-size {
    font-size: 0.875rem;
    color: black;
    font-weight: 500;
}

/* Trending Section */
.latest-trending-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.latest-trending-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #9333ea;
}

.latest-trending-title {
    font-size: 1.125rem;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
}

/* Error State */
.latest-error {
    padding: 2rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}


































































/* Trending Page Styles - Matching Web App Design */
viralbuzz-trending {
    display: block;
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px;
    background-color: #0f0f0f;
    transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
    box-sizing: border-box;
    margin-left: 0;
}

/* Desktop: content shifts right to make room for sidebar when open */
@media (min-width: 1024px) {
    viralbuzz-trending {
        margin-left: 16rem;
        width: calc(100% - 16rem);
    }
    
    /* When sidebar is closed, main content expands to full width */
    body.sidebar-closed viralbuzz-trending,
    viralbuzz-trending.sidebar-closed {
        margin-left: 0;
        width: 100%;
    }
    
    /* When sidebar is open, ensure proper spacing */
    body.sidebar-open viralbuzz-trending,
    viralbuzz-trending.sidebar-open {
        margin-left: 16rem;
        width: calc(100% - 16rem);
    }
}

.trending-page {
    width: 100%;
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Page Header Section */
.trending-header-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
    width: 100%;
    box-sizing: border-box;
}

.trending-breadcrumbs {
    margin-bottom: 1rem;
}

.trending-breadcrumb-link {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s ease;
}

.trending-breadcrumb-link:hover {
    color: white;
}

.trending-breadcrumb-separator {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0.5rem;
}

.trending-breadcrumb-current {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

.trending-title-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .trending-title-section {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.trending-title-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.trending-page-title {
    font-size: 1.875rem;
    font-weight: bold;
    color: white;
    margin: 0;
}

@media (min-width: 768px) {
    .trending-page-title {
        font-size: 2.25rem;
    }
}

.trending-title-icon {
    width: 2rem;
    height: 2rem;
    color: #9333ea;
}

/* Tabs */
.trending-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.trending-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.3s ease;
    border-radius: 0.5rem;
}

.trending-tab:hover {
    color: rgba(255, 255, 255, 0.7);
}

.trending-tab.active {
    background-color: #9333ea;
    color: white;
}

.trending-tab-icon {
    width: 1rem;
    height: 1rem;
}

.trending-tab.active .trending-tab-icon {
    color: white;
}

.trending-tab:not(.active) .trending-tab-icon {
    color: #9333ea;
}

/* Main Content Area */
.trending-main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.trending-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    width: 100%;
}

@media (min-width: 1024px) {
    .trending-grid {
        grid-template-columns: 7fr 5fr;
    }
}

/* Articles Column */
.trending-articles-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.trending-article {
    background-color: #181818;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    display: flex;
    gap: 1rem;
    padding: 1rem;
    transition: background-color 0.3s ease;
}

.trending-article:hover {
    background-color: #121212;
}

/* Rank Badge */
.trending-rank-badge {
    position: absolute;
    top: -0.5rem;
    left: -0.5rem;
    z-index: 10;
}

.trending-rank-circle {
    width: 2.5rem;
    height: 2.5rem;
    background-color: #9333ea;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.trending-rank-number {
    color: white;
    font-weight: bold;
    font-size: 1.125rem;
}

/* Image Section */
.trending-article-image {
    position: relative;
    flex-shrink: 0;
    width: 40%;
    height: 200px;
    overflow: hidden;
    border-radius: 0.5rem;
}

.trending-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.trending-no-image {
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 0.875rem;
    border-radius: 0.5rem;
}

/* NSFW Placeholder */
.trending-nsfw-placeholder {
    position: relative;
    flex-shrink: 0;
    width: 40%;
    height: 200px;
    background-color: #121212;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.trending-nsfw-icon {
    width: 3rem;
    height: 3rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.5rem;
}

.trending-nsfw-text {
    color: #facc15;
    font-weight: bold;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.trending-nsfw-link {
    color: white;
    font-size: 0.75rem;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.trending-nsfw-link:hover {
    color: #00ff88;
}

/* Stats Overlay */
.trending-article-stats {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 0.5rem;
    padding: 0.375rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.trending-stat-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.trending-stat-item svg {
    width: 1rem;
    height: 1rem;
    color: white;
}

.trending-stat-item span {
    font-size: 0.75rem;
    color: white;
}

/* Content Section */
.trending-article-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.trending-article-category {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

.trending-category-text {
    color: rgba(255, 255, 255, 0.6);
}

.trending-category-separator {
    margin: 0 0.5rem;
}

.trending-comment-icon {
    width: 0.75rem;
    height: 0.75rem;
    display: inline-block;
    vertical-align: middle;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 0.25rem;
}

.trending-comment-count {
    margin-left: 0.25rem;
}

.trending-article-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: white;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 768px) {
    .trending-article-title {
        font-size: 1.5rem;
    }
}

.trending-article-description {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.trending-article-author {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.trending-author-avatar {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    object-fit: cover;
}

.trending-author-text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Sidebar */
.trending-sidebar {
    display: flex;
    flex-direction: column;
}

/* Author CTA */
.trending-author-cta {
    background-color: #121212;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    padding: 1.5rem;
    position: relative;
}

.trending-cta-icon {
    position: absolute;
    top: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
}

.trending-cta-icon-circle {
    width: 3rem;
    height: 3rem;
    background-color: #facc15;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.trending-cta-icon-circle svg {
    width: 1.5rem;
    height: 1.5rem;
    color: black;
}

.trending-cta-content {
    margin-top: 1.5rem;
    text-align: center;
}

.trending-cta-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.trending-cta-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    margin-bottom: 0.5rem;
}

.trending-cta-subtitle {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.5rem;
}

.trending-cta-button {
    width: 100%;
    background-color: #181818;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.trending-cta-button:hover {
    background-color: rgba(24, 24, 24, 0.8);
}

.trending-cta-button svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Error State */
.trending-error {
    padding: 2rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}









/* Hot Page Styles - Same as Trending */
viralbuzz-hot {
    display: block;
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px;
    background-color: #0f0f0f;
    transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
    box-sizing: border-box;
    margin-left: 0;
}

/* Desktop: content shifts right to make room for sidebar when open */
@media (min-width: 1024px) {
    viralbuzz-hot {
        margin-left: 16rem;
        width: calc(100% - 16rem);
    }
    
    /* When sidebar is closed, main content expands to full width */
    body.sidebar-closed viralbuzz-hot,
    viralbuzz-hot.sidebar-closed {
        margin-left: 0;
        width: 100%;
    }
    
    /* When sidebar is open, ensure proper spacing */
    body.sidebar-open viralbuzz-hot,
    viralbuzz-hot.sidebar-open {
        margin-left: 16rem;
        width: calc(100% - 16rem);
    }
}

/* Hot uses the same styles as trending - styles are loaded from trending.css in index.html */



































/* Popular Page Styles - Same as Trending */
viralbuzz-popular {
    display: block;
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px;
    background-color: #0f0f0f;
    transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
    box-sizing: border-box;
    margin-left: 0;
}

/* Desktop: content shifts right to make room for sidebar when open */
@media (min-width: 1024px) {
    viralbuzz-popular {
        margin-left: 16rem;
        width: calc(100% - 16rem);
    }
    
    /* When sidebar is closed, main content expands to full width */
    body.sidebar-closed viralbuzz-popular,
    viralbuzz-popular.sidebar-closed {
        margin-left: 0;
        width: 100%;
    }
    
    /* When sidebar is open, ensure proper spacing */
    body.sidebar-open viralbuzz-popular,
    viralbuzz-popular.sidebar-open {
        margin-left: 16rem;
        width: calc(100% - 16rem);
    }
}

/* Popular uses the same styles as trending - styles are loaded from trending.css in index.html */



































/* Page Component Styles */
viralbuzz-page,
.viralbuzz-page {
    display: block;
    width: 100%;
    min-height: 100vh;
    background-color: #181818;
    color: #ffffff;
    padding-top: 60px; /* Add padding to account for fixed header */
}

.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.page-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #1f2937;
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

.page-content {
    font-size: 1rem;
    line-height: 1.6;
    color: #ffffff !important; /* Force white text for dark theme */
}

/* Force all text elements to be white */
.page-content * {
    color: #ffffff !important;
}

/* Headings - white */
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
    color: #ffffff !important;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.page-content h1 {
    font-size: 1.875rem;
}

.page-content h2 {
    font-size: 1.5rem;
}

.page-content h3 {
    font-size: 1.25rem;
}

/* Paragraphs - white */
.page-content p {
    margin-bottom: 1rem;
    color: #ffffff !important;
}

/* Lists - white */
.page-content ul,
.page-content ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
    color: #ffffff !important;
}

.page-content li {
    margin-bottom: 0.5rem;
    color: #ffffff !important;
}

/* Links - blue with hover */
.page-content a {
    color: #3b82f6 !important;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.page-content a:hover {
    color: #60a5fa !important;
}

.page-content a:visited {
    color: #818cf8 !important; /* Slightly different for visited links */
}

/* Strong/Bold - white */
.page-content strong,
.page-content b {
    color: #ffffff !important;
    font-weight: 600;
}

/* Code - yellow on dark background */
.page-content code {
    background-color: #1f2937;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    color: #fbbf24 !important;
}

.page-content pre {
    background-color: #1f2937;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.page-content pre code {
    background-color: transparent;
    padding: 0;
    color: #fbbf24 !important;
}

/* Blockquote - light gray italic */
.page-content blockquote {
    border-left: 4px solid #3b82f6;
    padding-left: 1rem;
    margin-left: 0;
    margin-bottom: 1rem;
    color: #d1d5db !important;
    font-style: italic;
}

/* Images */
.page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

/* Tables - white text */
.page-content table {
    color: #ffffff !important;
    border-collapse: collapse;
    margin-bottom: 1rem;
    width: 100%;
}

.page-content table th,
.page-content table td {
    color: #ffffff !important;
    border: 1px solid #374151;
    padding: 0.5rem;
}

.page-content table th {
    background-color: #1f2937;
    font-weight: 600;
}

/* Divs and spans - white */
.page-content div,
.page-content span {
    color: #ffffff !important;
}

/* Ensure any inline styles don't override */
.page-content [style*="color"] {
    color: #ffffff !important;
}

/* Exception: links should remain blue */
.page-content a[style*="color"] {
    color: #3b82f6 !important;
}

.page-loading,
.page-error {
    text-align: center;
    padding: 3rem 1rem;
    color: #9ca3af;
}

.page-error h2 {
    color: #ef4444;
    margin-bottom: 1rem;
}

.page-back-link {
    display: inline-block;
    margin-top: 1rem;
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.2s ease;
}

.page-back-link:hover {
    color: #60a5fa;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .page-container {
        padding: 1rem;
    }

    .page-title {
        font-size: 1.5rem;
    }

    .page-content {
        font-size: 0.9375rem;
    }
}







/* View Article Component Styles - Using Tailwind CSS, minimal custom CSS */
viralbuzz-view-article,
.viralbuzz-view-article {
    display: block;
    width: 100%;
    min-height: 100vh;
    background-color: #0f0f0f; /* dark-bg from web-app */
    color: #ffffff;
    padding-top: 60px; /* Account for fixed header */
    transition: transform 0.3s ease-in-out;
}

/* Comments Drawer - BuzzFeed style: Only indent at depth 1 (second level) */
article-comments-drawer .comment-item {
    /* Base: no indentation */
    margin-left: 0 !important;
    padding-left: 0 !important;
    position: relative;
}

/* Only indent replies at depth 1 (second level) */
article-comments-drawer .comment-item[style*="margin-left: 2rem"] {
    margin-left: 2rem !important;
    position: relative;
    padding-left: 1.5rem;
}

/* Remove vertical lines from individual comment items */
article-comments-drawer .comment-item[style*="margin-left: 2rem"]::before {
    display: none;
}

/* Add curved horizontal connector line (the "hand" pointing to the comment) - branches from the vertical line */
article-comments-drawer .comment-item[style*="margin-left: 2rem"]::after {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 0.5rem;
    width: 0.75rem;
    height: 2px;
    background-color: #4b5563; /* gray-600 */
    z-index: 0;
    border-radius: 0 0 0 100%;
    transform-origin: left center;
}

/* Deeper levels (depth 2+) align with depth 1, no further indentation */
article-comments-drawer .comment-item[style*="margin-left: 2rem"] .comment-item {
    margin-left: 0 !important;
    padding-left: 1.5rem;
}

/* Remove branch lines from deeper nested comments */
article-comments-drawer .comment-item[style*="margin-left: 2rem"] .comment-item::before {
    display: none;
}

article-comments-drawer .comment-item[style*="margin-left: 2rem"] .comment-item::after {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 0.5rem;
    width: 0.75rem;
    height: 2px;
    background-color: #4b5563;
    z-index: 0;
    border-radius: 0 0 0 100%;
    transform-origin: left center;
}

article-comments-drawer .replies-container {
    margin-left: 0 !important;
    padding-left: 0 !important;
    position: relative;
}

/* ONE vertical line ONLY for top-level comment replies containers (depth 0) */
/* This is the ONLY vertical line - it runs down through all replies at the root level */
article-comments-drawer .comment-item:not([style*="margin-left: 2rem"]) > .replies-container::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: -1rem;
    bottom: 0;
    width: 1px;
    background-color: #4b5563; /* gray-600 */
    z-index: 0;
}

/* Stop the vertical line before the "Show More Replies" button wrapper */
article-comments-drawer .comment-item:not([style*="margin-left: 2rem"]) > .replies-container:has(.show-more-replies-wrapper)::before {
    bottom: auto;
    height: calc(100% - 3.5rem); /* Adjust based on button height */
}

/* NO vertical lines for ANY nested replies containers - hide all nested vertical lines */
/* This ensures only the root-level replies container has a vertical line */
article-comments-drawer .comment-item[style*="margin-left: 2rem"] .replies-container::before,
article-comments-drawer .replies-container .replies-container::before {
    display: none !important;
}

/* Ensure replies container content is above the line */
article-comments-drawer .replies-container > * {
    position: relative;
    z-index: 1;
}

article-comments-drawer #commentsDrawer {
    top: 60px !important;
    height: calc(100dvh - 60px) !important;
    z-index: 30050 !important;
}

article-comments-drawer #commentsDrawerOverlay {
    top: 60px !important;
    z-index: 30049 !important;
}

@media (max-width: 767px) {
    article-comments-drawer #commentsDrawer {
        top: 56px !important;
        height: calc(100dvh - 56px) !important;
    }

    article-comments-drawer #commentsDrawerOverlay {
        top: 56px !important;
    }
}

/* Ensure main element inside uses dark-bg */
viralbuzz-view-article main {
    background-color: #0f0f0f;
}

.article-sidebar-drawer-row,
.article-sidebar-drawer-toggle,
.article-mobile-context-link,
.article-sidebar-drawer-close,
.article-sidebar-drawer-overlay {
    display: none;
}

body.article-sidebar-drawer-open {
    overflow: hidden;
}

body.article-mobile-reactions-open {
    overflow: hidden;
}

body.article-mobile-reactions-open viralbuzz-view-article {
    position: relative;
    z-index: 30000;
}

body.article-mobile-reactions-open article-comments-button,
body.article-mobile-reactions-open viralbuzz-scroll-to-top,
body.article-mobile-reactions-open article-slide-panel {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.article-meme-more-menu-open .article-mobile-reactions-fab,
body.article-meme-more-menu-open article-comments-button {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.article-comments-drawer-open .article-mobile-reactions-fab,
body.article-comments-drawer-open article-comments-button {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.article-sidebar-drawer-open .article-mobile-reactions-fab,
body.article-sidebar-drawer-open article-comments-button {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.article-mobile-reactions-fab,
.article-mobile-reactions-overlay,
.article-mobile-reactions-panel {
    display: none;
}

.article-mute-duration-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.article-mute-duration-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(8px);
}

.article-mute-duration-card {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    background: #111114;
    color: #f8fafc;
    padding: 1.25rem;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

.article-mute-duration-card h3 {
    margin: 0 0 0.45rem;
    font-size: 1.15rem;
    font-weight: 800;
}

.article-mute-duration-card p {
    margin: 0 0 1rem;
    color: #a1a1aa;
    font-size: 0.9rem;
    line-height: 1.45;
}

.article-mute-duration-actions {
    display: grid;
    gap: 0.55rem;
}

.article-mute-duration-actions button,
.article-mute-duration-cancel {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.055);
    color: #f8fafc;
    padding: 0.75rem 1rem;
    font-weight: 800;
    cursor: pointer;
    text-align: left;
}

.article-mute-duration-actions button:hover {
    border-color: rgba(168, 85, 247, 0.55);
    background: rgba(168, 85, 247, 0.16);
}

.article-mute-duration-cancel {
    margin-top: 0.75rem;
    text-align: center;
    color: #cbd5e1;
}

/* Mobile: Push layout - content shifts right when sidebar is open */
@media (max-width: 1023px) {
    viralbuzz-view-article,
    .viralbuzz-view-article {
        transform: translateX(0);
    }
    
    body.sidebar-open viralbuzz-view-article,
    body.sidebar-open .viralbuzz-view-article {
        transform: translateX(16rem);
    }
    
    body.sidebar-closed viralbuzz-view-article,
    body.sidebar-closed .viralbuzz-view-article {
        transform: translateX(0);
    }

    .article-sidebar-drawer-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin: -0.1rem 0 0.9rem;
    }

    .article-mobile-context-link {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        gap: 0.35rem;
        color: #d1d5db;
        font-size: 0.9rem;
        font-weight: 800;
        text-decoration: none;
    }

    .article-mobile-context-link svg {
        width: 1.05rem;
        height: 1.05rem;
        flex: 0 0 auto;
        color: #a78bfa;
    }

    .article-mobile-context-link span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .article-sidebar-drawer-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        border: 1px solid rgba(168, 85, 247, 0.35);
        border-radius: 999px;
        background: rgba(168, 85, 247, 0.16);
        color: #f8fafc;
        padding: 0.5rem 0.75rem;
        font-size: 0.78rem;
        font-weight: 800;
        cursor: pointer;
        flex: 0 0 auto;
    }

    .article-sidebar-drawer-toggle svg {
        width: 1rem;
        height: 1rem;
    }

    .article-sidebar-drawer {
        position: fixed !important;
        top: 60px !important;
        right: 0;
        bottom: 0;
        z-index: 1002;
        width: min(380px, calc(100vw - 1.25rem)) !important;
        min-width: 0;
        max-width: min(380px, calc(100vw - 1.25rem));
        height: calc(100dvh - 60px) !important;
        overflow-y: auto !important;
        overflow-x: hidden;
        padding: 4rem 0.85rem 1rem !important;
        background: rgba(12, 12, 16, 0.98) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
        transform: translateX(110%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0.25s ease;
    }

    .article-sidebar-drawer.open {
        transform: translateX(0);
        visibility: visible;
    }

    .article-sidebar-drawer-close {
        position: absolute;
        top: 0.85rem;
        right: 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.35rem;
        height: 2.35rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        color: #f8fafc;
        cursor: pointer;
    }

    .article-sidebar-drawer-close svg {
        width: 1.15rem;
        height: 1.15rem;
    }

    .article-sidebar-drawer-overlay {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1001;
        display: block;
        background: rgba(0, 0, 0, 0.58);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .article-sidebar-drawer-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Desktop: content shifts right to make room for sidebar when open */
@media (min-width: 1024px) {
    viralbuzz-view-article,
    .viralbuzz-view-article {
        margin-left: 16rem;
        width: calc(100% - 16rem);
        transform: none;
    }
    
    body.sidebar-closed viralbuzz-view-article,
    body.sidebar-closed .viralbuzz-view-article {
        margin-left: 0;
        width: 100%;
    }
    
    body.sidebar-open viralbuzz-view-article,
    body.sidebar-open .viralbuzz-view-article {
        margin-left: 16rem;
        width: calc(100% - 16rem);
    }
}

.article-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    overflow-x: hidden; /* Prevent horizontal overflow */
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .article-container {
        flex-direction: row;
        padding: 2rem;
        gap: 2rem;
    }
}

/* Main Article Content */
.article-main {
    flex: 1;
    background-color: #181818;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: hidden; /* Prevent horizontal overflow */
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .article-main {
        flex: 0 0 68%;
        padding: 1.5rem 2rem;
    }
}

/* Breadcrumbs */
.article-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #9ca3af;
    overflow-x: auto;
    white-space: nowrap;
    font-family: var(--font-family);
}

.article-breadcrumb-link {
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.2s ease;
    cursor: pointer;
}

.article-breadcrumb-link:hover {
    color: #ffffff;
}

.article-breadcrumb-separator {
    color: #6b7280;
    margin: 0 0.25rem;
}

.article-breadcrumb-current {
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

@media (min-width: 640px) {
    .article-breadcrumbs {
        font-size: 0.875rem;
        margin-bottom: 1.5rem;
    }
    
    .article-breadcrumb-current {
        max-width: 400px;
    }
}

/* Categories */
.article-categories {
    margin-bottom: 1rem;
}

.article-categories span {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    margin-right: 0.5rem;
}

/* Article Title */
.article-title {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.2;
    color: #ffffff;
    margin: 0 0 1rem 0;
}

@media (min-width: 640px) {
    .article-title {
        font-size: 2rem;
    }
}

@media (min-width: 768px) {
    .article-title {
        font-size: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .article-title {
        font-size: 3rem;
        margin-bottom: 1.5rem;
    }
}

/* Preview Image */
.article-preview-image {
    width: 100%;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
    overflow: hidden;
}

.article-preview-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Article Header */
.article-header {
    margin-bottom: 2rem;
}

.article-description {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #d1d5db;
    margin: 1rem 0 1.5rem 0;
}

.article-meta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.article-publish-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #9ca3af;
    font-size: 0.875rem;
}

.article-date-label {
    font-weight: 600;
}

.article-date-value {
    color: #d1d5db;
}

/* Article Content Blocks Container */
.article-content-blocks {
    margin: 2rem 0;
}

/* Content Block Base Styles */
.article-content-block {
    background-color: #1f1f1f;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #2a2a2a;
    overflow-x: hidden; /* Prevent horizontal overflow */
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .article-content-block {
        padding: 2rem;
    }
}

/* Block Header */
.article-block-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.article-block-number {
    font-size: 4rem;
    font-weight: 900;
    color: #dc2626;
    line-height: 1;
    font-family: var(--font-family);
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .article-block-number {
        font-size: 3.5rem;
    }
}

.article-block-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
    font-family: var(--font-family);
    flex: 1;
}

@media (min-width: 640px) {
    .article-block-title {
        font-size: 1.5rem;
    }
}

/* Block Content */
.article-block-content {
    color: #ffffff;
}

/* Text Block */
.article-text-content {
    font-size: 1rem;
    line-height: 1.7;
    font-family: var(--font-family);
    color: #ffffff;
}

.article-text-content * {
    font-family: var(--font-family) !important;
}

.article-text-content p {
    margin-bottom: 1rem;
    color: #ffffff !important;
}

.article-text-content span {
    color: #ffffff !important;
}

.article-text-content h1,
.article-text-content h2,
.article-text-content h3,
.article-text-content h4,
.article-text-content h5,
.article-text-content h6 {
    color: #ffffff !important;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    font-family: var(--font-family) !important;
}

.article-text-content a {
    color: #3b82f6 !important;
    text-decoration: underline;
}

.article-text-content a:hover {
    color: #60a5fa !important;
}

/* Override any inline styles that might conflict with dark theme */
.article-text-content [style*="color: rgb(34, 34, 34)"],
.article-text-content [style*="color:rgb(34, 34, 34)"],
.article-text-content [style*="color: #000"],
.article-text-content [style*="color:#000"],
.article-text-content [style*="color: black"] {
    color: #d1d5db !important;
}

.article-text-content [style*="font-family"] {
    font-family: var(--font-family) !important;
}

/* Constrain images in text blocks to prevent overflow */
.article-text-content img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 1rem auto;
    border-radius: 0.5rem;
    object-fit: contain;
}

/* Ensure images don't break out of their containers */
.article-text-content {
    overflow-wrap: break-word;
    word-wrap: break-word;
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
}

/* Constrain any inline styles that set width/height on images */
.article-text-content img[style*="width"],
.article-text-content img[style*="height"] {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
}

/* Override any fixed pixel widths on images */
.article-text-content img[width],
.article-text-content img[height] {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}

/* Image Block */
.article-image-content {
    text-align: center;
    
}

.article-block-image {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    max-width: 768px;
}

.article-image-caption {
    font-size: 0.875rem;
    color: #9ca3af;
    font-style: italic;
    margin-top: 0.5rem;
}

/* Video Block */
.article-video-content {
    position: relative;
    width: 100%;
    margin-bottom: 0;
}

.article-video-embed-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: #000000;
}

.article-video-embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.article-video-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0.5rem;
}

/* More Details for Video Block - positioned outside video container */
.article-content-block-video .article-block-more-details {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #2a2a2a;
}

/* Reactions Block */
.article-reactions-container {
    margin: 2rem 0;
}

.article-reactions {
    background-color: #1f1f1f;
    border-radius: 0.75rem;
    padding: 1.5rem;
    border: 1px solid #2a2a2a;
}

.article-reactions-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.article-reaction-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background-color: #000000;
    border-radius: 0.5rem;
    border: 1px solid #3a3a3a;
    transition: all 0.2s ease;
}

.reaction-icon-wrapper {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.reaction-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0.25rem;
}

.reaction-icon-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2a2a2a;
    border-radius: 0.25rem;
    font-size: 1.25rem;
    color: #ffffff;
}

.reaction-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.reaction-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
}

.reaction-count {
    font-size: 1.125rem;
    font-weight: 700;
    color: #d1d5db;
}

.reaction-progress {
    width: 100px;
    height: 8px;
    background-color: #2a2a2a;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.reaction-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.article-reactions-total {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #2a2a2a;
    text-align: center;
}

.article-reactions-total .total-count {
    font-size: 1.5rem;
    font-weight: 700;
    color: #dc2626;
    display: block;
}

.article-reactions-total .total-label {
    font-size: 0.875rem;
    color: #9ca3af;
    display: block;
    margin-top: 0.25rem;
}

@media (min-width: 640px) {
    .article-reactions {
        padding: 2rem;
    }
    
    .article-reaction-item {
        padding: 1rem 1.25rem;
    }
    
    .reaction-progress {
        width: 150px;
    }
}

/* Poll Block */
.article-poll-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.article-poll-banner {
    width: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
    max-width: 768px;
    max-height: 450px;
}

.article-poll-banner-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Question block: prominent block like reference (large bold text, rounded block) */
.article-poll-question {
    font-size: 1.5rem;
    line-height: 1.4;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
    background-color: #1f1717;
    padding: 1.25rem 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 640px) {
    .article-poll-question {
        font-size: 1.65rem;
        padding: 1.5rem 2rem;
    }
}

.article-poll-question p {
    margin: 0;
    color: #ffffff;
}

.article-poll-question p:first-child {
    margin-top: 0;
}

.article-poll-question p:last-child {
    margin-bottom: 0;
}

.article-poll-description {
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    margin-top: -0.5rem;
    margin-bottom: 1.25rem;
    padding: 0 0.25rem;
}

.article-poll-description img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Buzzfeed-style: question on top, options in a uniform grid with centered content */
.article-poll-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Preview notice must span full width above the options, not take one grid cell */
.article-poll-preview-notice {
    grid-column: 1 / -1;
}

@media (max-width: 480px) {
    .article-poll-options {
        grid-template-columns: 1fr;
    }
}

.article-poll-option {
    position: relative;
    padding: 1rem 0.75rem;
    background-color: #1f1717;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    /* Smaller option div: compact height so text feels big, not tiny */
    min-height: 3.5rem;
    aspect-ratio: 2 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Poll option with image: square tile so image has room, then text below */
.article-poll-option-with-image {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    aspect-ratio: 1;
    min-height: 0;
}

.article-poll-option-with-image .article-poll-option-image {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0f0f0f;
}

.article-poll-option-with-image .article-poll-option-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.article-poll-option-with-image .article-poll-option-content-wrapper {
    padding: 0.75rem 0.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
}

.article-poll-option-content-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    z-index: 3;
    width: 100%;
}

/* Radio in corner so center stays for content */
.article-poll-option .article-poll-option-radio {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 4;
}

.article-poll-option:hover {
    border-color: #00ff88;
    background-color: #0a0a0a;
    outline: 2px solid #00ff88;
    outline-offset: -2px;
}

/* Only show hover effect when not voted */
.article-poll-options.poll-voted .article-poll-option:hover {
    outline: none;
}

.article-poll-option.poll-option-selected {
    border: 2px solid #00ff88;
    background-color: #0a0a0a;
}

.article-poll-option-text {
    color: #ffffff;
    font-family: var(--font-family);
    font-size: 1.25rem;
    font-weight: 700;
    flex: 1;
    position: relative;
    z-index: 3;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    text-align: center;
}

@media (min-width: 640px) {
    .article-poll-option-text {
        font-size: 1.35rem;
    }
}

.article-poll-option-radio {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    z-index: 3;
}

.article-poll-option-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.article-poll-option-radio label {
    display: block;
    width: 24px;
    height: 24px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    background-color: transparent;
}

/* Show checkmark on hover when not voted */
.article-poll-options:not(.poll-voted) .article-poll-option:hover .article-poll-option-radio label::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #00ff88;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    opacity: 0.7;
}

.article-poll-option-radio input[type="radio"]:checked + label {
    border-color: #ffffff;
    background-color: transparent;
}

.article-poll-option-radio input[type="radio"]:checked + label::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #00ff88;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    opacity: 1;
}

.article-poll-option-percentage {
    color: #ffffff;
    font-family: var(--font-family);
    font-size: 1.3rem;
    font-weight: 700;
    margin-left: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.article-poll-option-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: #ef4444;
    opacity: 1;
    z-index: 1;
    transition: width 0.5s ease;
}

.article-poll-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    gap: 1rem;
}

.article-poll-total-votes {
    color: #ffffff;
    font-family: var(--font-family);
    font-size: 1.5rem;
    flex: 1;
}

.article-poll-total-count {
    font-weight: 600;
}

.article-poll-options.poll-voted .article-poll-option {
    cursor: default;
}

.article-poll-options.poll-voted .article-poll-option-radio label {
    cursor: default;
}

/* Prevent clicking when results are visible */
.article-poll-options.poll-results-visible .article-poll-option {
    pointer-events: none !important;
    cursor: default !important;
}

.article-poll-options.poll-results-visible .article-poll-option-radio label {
    cursor: default !important;
}

/* Allow clicking when poll-voted class is removed and results are not visible */
.article-poll-options:not(.poll-voted):not(.poll-results-visible) .article-poll-option {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.article-poll-options:not(.poll-voted):not(.poll-results-visible) .article-poll-option-radio {
    pointer-events: auto !important;
}

.article-poll-options:not(.poll-voted):not(.poll-results-visible) .article-poll-option-radio label {
    cursor: pointer !important;
    pointer-events: auto !important;
}

.article-poll-toggle-btn {
    padding: 0.5rem 1.5rem;
    background-color: transparent;
    border: 1px solid #ffffff;
    border-radius: 0.5rem;
    color: #ffffff;
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.article-poll-toggle-btn:hover {
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

.article-poll-toggle-btn:active {
    transform: scale(0.98);
}

.article-poll-toggle-label {
    display: block;
}

/* Quiz Block */
.article-quiz-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.article-quiz-banner {
    width: 100%;
    margin-bottom: 0.25rem;
    position: relative;
}

.article-quiz-banner-with-overlay {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
}

.article-quiz-image-source-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.85);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
}

.article-quiz-banner-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.5rem;
}

.article-quiz-banner-with-overlay .article-quiz-banner-image {
    border-radius: 0.5rem;
}

/* Wrapper for image + overlay so overlay sits at bottom of image */
.article-quiz-banner-image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
}

/* Viewer caution: blurred question image + button to reveal */
.article-quiz-banner-viewer-caution {
    position: relative;
    min-height: 120px;
}

.article-quiz-banner-viewer-caution .article-quiz-banner-blur-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
}

.article-quiz-banner-viewer-caution[data-blurred="true"] .article-quiz-banner-blur-wrap {
    filter: blur(20px);
    pointer-events: none;
    user-select: none;
}

.article-quiz-banner-viewer-caution[data-blurred="false"] .article-quiz-banner-blur-wrap {
    filter: none;
}

.article-quiz-banner-viewer-caution .article-quiz-banner-blur-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

.article-viewer-caution-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.75rem 1.5rem;
    background: rgba(0, 255, 136, 0.9);
    color: #0a0a0a;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    z-index: 5;
    transition: background 0.2s ease;
}

.article-viewer-caution-btn:hover {
    background: #00ff88;
}

.article-quiz-banner-viewer-caution[data-blurred="false"] .article-viewer-caution-btn {
    display: none;
}

.article-quiz-question {
    color: #ffffff;
    font-family: var(--font-family);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

.article-quiz-question * {
    font-family: var(--font-family) !important;
    color: #ffffff !important;
}

/* Image description (moreDetails) - tight spacing below image/source */
.article-quiz-description {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.article-quiz-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Basic Grid - 2 column layout */
.article-quiz-options-basic-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

/* Image List - vertical list with images */
.article-quiz-options-image-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Image Grid - 2 column grid with images */
.article-quiz-options-image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.article-quiz-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background-color: #000000;
    border-radius: 0.5rem;
    border: 1px solid #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 3rem;
}

/* Ensure grid items maintain aspect ratio for image options */
.article-quiz-options-basic-grid .article-quiz-option,
.article-quiz-options-image-grid .article-quiz-option {
    min-height: auto;
}

.article-quiz-option:hover {
    border-color: #00ff88;
    background-color: #0a0a0a;
    outline: 2px solid #00ff88;
    outline-offset: -2px;
}

/* Correct answer: always green (success), not red */
.article-quiz-option.quiz-option-correct,
.article-quiz-option[data-is-correct="true"].quiz-option-correct,
.article-quiz-option[data-is-correct="true"]:has(input[type="radio"]:checked) {
    border-color: #00ff88 !important;
    background-color: rgba(0, 255, 136, 0.1) !important;
    outline-color: #00ff88 !important;
}

.article-quiz-option.quiz-option-incorrect {
    border-color: #ef4444;
    background-color: rgba(239, 68, 68, 0.1);
}

.article-quiz-options.quiz-answered .article-quiz-option {
    cursor: default;
    pointer-events: none;
}

.article-quiz-option-radio {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    z-index: 2;
}

.article-quiz-option-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.article-quiz-option-radio label {
    display: block;
    width: 24px;
    height: 24px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    background-color: transparent;
}

/* Show checkmark on hover when not answered */
.article-quiz-options:not(.quiz-answered) .article-quiz-option:hover .article-quiz-option-radio label::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    opacity: 0.7;
}

.article-quiz-option-radio input[type="radio"]:checked + label {
    border-color: #ffffff;
    background-color: transparent;
}

.article-quiz-option-radio input[type="radio"]:checked + label::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    opacity: 1;
}

/* Green checkmark and ring for correct answer (green = success, not error) */
.article-quiz-option.quiz-option-correct .article-quiz-option-radio input[type="radio"]:checked + label,
.article-quiz-option[data-is-correct="true"].quiz-option-correct .article-quiz-option-radio input[type="radio"]:checked + label,
.article-quiz-option[data-is-correct="true"]:has(input[type="radio"]:checked) .article-quiz-option-radio label {
    border-color: #00ff88 !important;
    background-color: rgba(0, 255, 136, 0.15) !important;
}

.article-quiz-option.quiz-option-correct .article-quiz-option-radio input[type="radio"]:checked + label::after,
.article-quiz-option[data-is-correct="true"].quiz-option-correct .article-quiz-option-radio input[type="radio"]:checked + label::after,
.article-quiz-option[data-is-correct="true"]:has(input[type="radio"]:checked) .article-quiz-option-radio label::after {
    color: #00ff88 !important;
}

/* Red circle and red X for incorrect selected answer */
.article-quiz-option.quiz-option-incorrect .article-quiz-option-radio input[type="radio"]:checked + label,
.article-quiz-option.quiz-option-incorrect.article-quiz-option .article-quiz-option-radio label {
    border-color: #ef4444;
    background-color: rgba(239, 68, 68, 0.15);
}

.article-quiz-option.quiz-option-incorrect .article-quiz-option-radio input[type="radio"]:checked + label::after,
.article-quiz-option.quiz-option-incorrect .article-quiz-option-radio label::after {
    content: '×' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #ef4444 !important;
    font-size: 20px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    opacity: 1 !important;
}

/* Injected red X for wrong answer (when wrong option is unchecked so CSS ::after doesn't show) */
.article-quiz-option.quiz-option-incorrect .article-quiz-option-radio label .quiz-option-x {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ef4444;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    pointer-events: none;
}

.article-quiz-option-text {
    color: #ffffff;
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 500;
    flex: 1;
    position: relative;
    z-index: 2;
}

/* Quiz option with image - for image-grid (full image with text below) */
.article-quiz-option-image-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    position: relative;
}

.article-quiz-option-image-grid .article-quiz-option-radio {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    padding: 0;
}

.article-quiz-option-image-grid .article-quiz-option-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #1a1a1a;
    position: relative;
}

.article-quiz-option-image-grid .article-quiz-option-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.article-quiz-option-image-grid .article-quiz-option-text {
    margin-top: 0;
    padding-left: 0;
    width: 100%;
}

/* Quiz option with image - for image-list (thumbnail on left, text on right) */
.article-quiz-option-image-list {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    position: relative;
}

.article-quiz-option-image-list .article-quiz-option-radio {
    position: relative;
    flex-shrink: 0;
    z-index: 2;
}

.article-quiz-option-image-thumbnail {
    width: 80px;
    height: 80px;
    min-width: 80px;
    flex-shrink: 0;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #1a1a1a;
    position: relative;
}

.article-quiz-option-image-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.article-quiz-option-image-list .article-quiz-option-text {
    margin-top: 0;
    padding-left: 0;
    flex: 1;
}

/* Responsive adjustments for grid layouts */
@media (max-width: 768px) {
    .article-quiz-options-basic-grid,
    .article-quiz-options-image-grid {
        grid-template-columns: 1fr;
    }
}

.article-quiz-banner {
    width: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
}

.article-quiz-banner-image {
    width: 100%;
    height: auto;
    display: block;
}

.article-quiz-question {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #ffffff;
}

.article-quiz-question p {
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.article-quiz-placeholder {
    padding: 1.5rem;
    text-align: center;
    background-color: #2a2a2a;
    border-radius: 0.5rem;
    border: 1px dashed #3a3a3a;
}

/* More Details Section */
.article-block-more-details {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #2a2a2a;
}

.article-more-details-description {
    font-size: 1rem;
    line-height: 1.7;
    color: #ffffff;
    margin-bottom: 0.75rem;
    font-family: var(--font-family);
}

.article-more-details-description * {
    font-family: var(--font-family) !important;
    color: #ffffff !important;
}

.article-more-details-description a {
    color: #3b82f6 !important;
    text-decoration: underline;
}

.article-more-details-description a:hover {
    color: #60a5fa !important;
}

.article-more-details-description p {
    margin-bottom: 0.5rem;
    color: #ffffff !important;
}

.article-more-details-description strong,
.article-more-details-description b {
    font-weight: 600;
    color: #ffffff !important;
}

.article-more-details-description em,
.article-more-details-description i {
    font-style: italic;
    color: #ffffff !important;
}

/* Override black/dark colors in moreDetails description */
.article-more-details-description [style*="color: rgb(0, 0, 0)"],
.article-more-details-description [style*="color:rgb(0, 0, 0)"],
.article-more-details-description [style*="color: #000"],
.article-more-details-description [style*="color:#000"],
.article-more-details-description [style*="color: #000000"],
.article-more-details-description [style*="color:#000000"],
.article-more-details-description [style*="color: black"] {
    color: #ffffff !important;
}

.article-more-details-source {
    font-size: 0.875rem;
    color: #9ca3af;
    margin: 0;
    font-family: var(--font-family);
}

.article-more-details-source a {
    color: #3b82f6;
    text-decoration: underline;
    word-break: break-all;
}

.article-more-details-source a:hover {
    color: #60a5fa;
}

/* Legacy Article Content (for backward compatibility) */
.article-content {
    font-size: 1rem;
    line-height: 1.6;
    color: #ffffff !important;
    margin-bottom: 2rem;
}

.article-content * {
    color: #ffffff !important;
}

.article-content p {
    margin-bottom: 1rem;
    color: #d1d5db !important;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    color: #ffffff !important;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

.article-content a {
    color: #3b82f6 !important;
    text-decoration: underline;
}

.article-content a:hover {
    color: #60a5fa !important;
}

/* Article Sidebar */
.article-sidebar {
    width: 100%;
}

@media (min-width: 1024px) {
    .article-sidebar {
        flex: 0 0 32%;
        position: sticky;
        top: 80px;
        align-self: flex-start;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
}

/* Loading and Error States */
.article-loading,
.article-error {
    text-align: center;
    padding: 3rem 1rem;
    color: #9ca3af;
}

.article-error h2 {
    color: #ef4444;
    margin-bottom: 1rem;
}

.article-back-link {
    display: inline-block;
    margin-top: 1rem;
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.2s ease;
}

.article-back-link:hover {
    color: #60a5fa;
}

/* Sharing Section */
.article-sharing-section {
    margin: 2rem 0;
}

.article-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .article-section-title {
        font-size: 1.5rem;
    }
}

/* Follow Button Hover Effect */
.follow-button.follow-btn-following {
    position: relative;
}

.follow-button.follow-btn-following:hover {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid #ef4444 !important;
}

.follow-button.follow-btn-following #follow-text {
    position: relative;
    display: inline-block;
}

.follow-button.follow-btn-following:hover #follow-text {
    color: transparent !important;
}

.follow-button.follow-btn-following:hover #follow-text::after {
    content: 'Unfollow';
    position: absolute;
    left: 0;
    right: 0;
    color: #ef4444;
    display: block;
}

/* Preview mode toast (reactions, share, likes disabled) */
.article-preview-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--dark-card, #1a1a1a);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 30060;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    font-size: 0.875rem;
}

.article-preview-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 767px) {
    body.article-detail-open .article-preview-toast {
        bottom: calc(4.75rem + env(safe-area-inset-bottom));
        width: min(22rem, calc(100vw - 2rem));
        text-align: center;
    }
}

/* Meme reader: compact hero so shares / votes stay near the fold */
.article-meme-reader-header {
    font-family: var(--font-family);
}

/* Clear title → tags breathing room (was cramped against emoji line) */
.article-meme-reader-header .article-meme-reader-title {
    margin-bottom: 1.125rem;
}

/* NSFW / sensitive — visible in header next to MEME */
.article-meme-nsfw-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fecaca;
    background: rgba(127, 29, 29, 0.55);
    border: 1px solid rgba(248, 113, 113, 0.65);
    white-space: nowrap;
}

/* MEME / post-type pill (top-right) — small green pill */
.article-meme-type-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #064e3b;
    background: #34d399;
    border: 1px solid #10b981;
    white-space: nowrap;
}

/* Views icon + count */
.article-meme-views {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #9ca3af;
    font-size: 0.875rem;
    font-weight: 600;
}

.article-meme-views svg {
    width: 1rem;
    height: 1rem;
}

/* Wrapper that anchors the dropdown menu to the 3-dot button */
.article-meme-more-wrap {
    position: relative;
    display: inline-flex;
    z-index: 1200;
}

/* 3-dot button used over the dark banner overlay (non-meme posts) */
.article-banner-more-btn {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease;
    padding: 0;
}

.article-banner-more-btn:hover {
    background: rgba(0, 0, 0, 0.75);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Action bar reused outside the meme body (non-meme posts) gets a top border + a touch of breathing room */
.article-main-column > .article-meme-action-bar {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Dropdown menu (X-style) — position: fixed so it escapes any overflow:hidden ancestor (e.g. the banner) */
.article-meme-more-menu {
    position: fixed;
    z-index: 30020;
    min-width: 17rem;
    max-width: calc(100vw - 2rem);
    padding: 0.375rem;
    background: #0f0f0f;
    border: 1px solid rgba(75, 85, 99, 0.6);
    border-radius: 0.75rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    transform-origin: top right;
    animation: article-meme-more-menu-pop 0.12s ease-out;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}

.article-meme-more-menu[hidden] {
    display: none;
}

@keyframes article-meme-more-menu-pop {
    from { opacity: 0; transform: scale(0.96) translateY(-4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.article-meme-more-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    color: #e5e7eb;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.article-meme-more-item:hover,
.article-meme-more-item:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    outline: none;
}

.article-meme-more-item-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    color: #d1d5db;
}

.article-meme-more-item-label {
    flex: 1;
    min-width: 0;
}

/* Make the action-bar wrap inline-flex so anchoring works correctly */
.article-meme-action-icons .article-meme-more-wrap {
    display: inline-flex;
}

/* 3-dot menu button on the right of the meta row */
.article-meme-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: #9ca3af;
    background: transparent;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.article-meme-more-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

/* Category pill (left of meta row) — purple gradient like the homepage */
.article-meme-category-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
    color: #ffffff;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
}

/* Cleaner breadcrumb — slim chevron separators, mixed-case, low contrast */
.article-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    color: #6b7280;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 0.25rem;
}

.article-breadcrumb::-webkit-scrollbar {
    display: none;
}

.article-breadcrumb-link {
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 500;
    text-transform: capitalize;
}

.article-breadcrumb-link:hover {
    color: #ffffff;
}

.article-breadcrumb-sep {
    color: #4b5563;
    flex-shrink: 0;
}

.article-breadcrumb-current {
    color: #6b7280;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 24rem;
}

@media (max-width: 1023px) {
    .article-breadcrumb {
        display: none;
    }

    .article-mobile-context-link span {
        text-transform: capitalize;
    }
}

/* Homepage .post-header reserves space for ribbon; article reader has no ribbon */
.article-meme-reader-header .article-meme-reader-post-header.post-header {
    padding-right: 0;
    margin-bottom: 0.25rem;
}

/* Category badge: sidebar-style color tile + optional image on top (same as sidebar nav when image 404) */
.article-meme-cat-badge-icon-slot {
    position: relative;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
}

.article-meme-cat-badge-color-fill {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: 4px;
}

.article-meme-cat-badge-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-meme-cat-badge-icon-only {
    width: 1rem !important;
    height: 1rem !important;
    flex-shrink: 0;
    border-radius: 4px;
}

/* Meme reader: tags under title use same .article-tags-card as trivia / standard article */
.article-tags-card.article-tags-card--meme-under-title {
    margin-top: 0.75rem;
    margin-bottom: 0.35rem;
    padding: 0.75rem 1rem;
}

.article-meme-media-stage {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

.article-meme-hero-wrap {
    position: relative;
    width: 100%;
}

/* Landscape: wide, modest height */
.article-meme-media-stage[data-meme-orientation="landscape"] .article-meme-hero-inner {
    width: 100%;
    max-width: 100%;
}

.article-meme-media-stage[data-meme-orientation="landscape"] .article-meme-main-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: clamp(280px, 58vh, 720px);
    object-fit: contain;
    object-position: center top;
}

/* Portrait / vertical: narrow column, taller cap but still bounded */
.article-meme-media-stage[data-meme-orientation="vertical"] .article-meme-hero-inner {
    width: auto;
    max-width: min(100%, 30rem);
    margin-left: auto;
    margin-right: auto;
}

.article-meme-media-stage[data-meme-orientation="vertical"] .article-meme-main-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: clamp(320px, 65vh, 780px);
    margin: 0 auto;
    object-fit: contain;
    object-position: center top;
}

.article-meme-image-source-bar {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: #000000;
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-top: 0.5rem;
    border-radius: 0 0 0.5rem 0.5rem;
}

/* ─── Meme Post Body Redesign ─────────────────────────────── */

/* Image meta row: source on the left, date • read-time on the right */
.article-meme-image-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.25rem;
    color: #9ca3af;
    font-size: 0.8125rem;
    font-weight: 500;
    flex-wrap: wrap;
}

.article-meme-image-source {
    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.article-meme-image-date {
    color: #9ca3af;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Short description (between meta row and action bar) */
.article-meme-short-description {
    margin: 1rem 0 0.875rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #e5e7eb;
}

/* GIF reader: post blurb injected under media, above credits/notice (not after the whole block) */
.article-meme-short-description--gif-after-media {
    margin: 0.75rem 0 1rem;
}

/* Long description (after action bar) — extends/expands the topic */
.article-meme-post-body .article-meme-description {
    margin: 0;
    padding: 1.25rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #d1d5db;
    border-top: 1px solid rgba(75, 85, 99, 0.5);
}

/* ─── Compact Action Bar ──────────────────────────────────── */
.article-meme-action-bar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: nowrap;
    padding: 0.75rem 1rem;
    background: #1a1a2e;
    border: 1px solid #2d2d4a;
    border-radius: 0.75rem;
    margin-bottom: 0;
}

.article-meme-action-shares {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.article-meme-action-share-icon-wrap {
    width: 1.875rem;
    height: 1.875rem;
    min-width: 1.875rem;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b5cf6;
}

.article-meme-action-share-icon-wrap svg {
    width: 0.9375rem;
    height: 0.9375rem;
}

.article-meme-action-shares-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
    white-space: nowrap;
}

.article-meme-action-shares-count {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #8b5cf6;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    white-space: nowrap;
}

.article-meme-action-shares-count span {
    color: #8b5cf6;
}

.article-meme-action-socials {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: nowrap;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

.article-meme-action-social {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.125rem;
    padding: 0 0.75rem;
    border-radius: 0.5rem;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.1s ease;
    white-space: nowrap;
}

.article-meme-action-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.article-meme-action-social-icon svg {
    width: 0.875rem;
    height: 0.875rem;
    color: #ffffff;
}

/* Full-color social buttons */
.article-meme-action-social.facebook {
    background: #1877f2;
}
.article-meme-action-social.facebook .article-meme-action-social-icon {
    background: transparent;
}

.article-meme-action-social.x {
    background: #000000;
    border: 1px solid #3d3d3d;
}
.article-meme-action-social.x .article-meme-action-social-icon {
    background: transparent;
}

.article-meme-action-social.instagram {
    background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%);
}
.article-meme-action-social.instagram .article-meme-action-social-icon {
    background: transparent;
}

.article-meme-action-social:hover {
    opacity: 0.88;
}

.article-meme-action-social:active {
    transform: translateY(1px);
}

.article-meme-action-icons {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    flex-shrink: 0;
}

.article-meme-action-icon-btn {
    width: 2rem;
    height: 2.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(75, 85, 99, 0.55);
    border-radius: 0.5rem;
    background: transparent;
    color: #d1d5db;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    padding: 0;
}

.article-meme-action-icon-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

.article-meme-action-icon-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    border-color: rgba(156, 163, 175, 0.6);
}

.article-meme-action-save.is-saved {
    background: rgba(0, 255, 136, 0.18);
    border-color: #00ff88;
    color: #00ff88;
}

.article-meme-action-save.is-saved svg {
    stroke: #00ff88;
}

.article-meme-vote-up.is-active {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}

.article-meme-vote-down.is-active {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
}

.article-meme-action-vote-count {
    align-self: center;
    min-width: 1.5rem;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #ffffff;
    padding: 0 0.25rem;
}

/* ─── Order: meme body → reactions → navigation ───────────── */
.is-meme-post .article-main-column {
    display: flex;
    flex-direction: column;
}

.is-meme-post .article-main-column > * {
    order: 5;
}

.is-meme-post .article-main-column > .article-meme-reader-header { order: 1; }
.is-meme-post .article-main-column > .article-meme-post-body { order: 2; }
.is-meme-post .article-main-column > article-reactions { order: 3; }
.is-meme-post .article-main-column > .article-inline-reactions { order: 3; }
.is-meme-post .article-main-column > article-navigation { order: 4; }

/* ─── Reactions Component (meme-only override) ────────────── */
viralbuzz-view-article article-reactions {
    display: block;
    margin: 1.5rem 0 1.25rem;
    padding: 0;
    border-top: none;
}

viralbuzz-view-article article-reactions > div > div {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    overflow: visible !important;
}

@media (max-width: 768px) {
    viralbuzz-view-article article-reactions > div > div {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    body.article-detail-open viralbuzz-view-article main {
        padding-bottom: calc(4.75rem + env(safe-area-inset-bottom));
    }

    .article-inline-reactions {
        display: none;
    }

    .article-mobile-reactions-fab {
        position: fixed;
        left: 0;
        right: 50%;
        bottom: 0;
        z-index: 30001;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        min-height: calc(3.75rem + env(safe-area-inset-bottom));
        padding: 0.55rem 0.85rem calc(0.55rem + env(safe-area-inset-bottom));
        border: none;
        border-radius: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-right: 1px solid rgba(255, 255, 255, 0.12);
        background: linear-gradient(135deg, #a855f7 0%, #ec4899 55%, #f97316 100%);
        color: #ffffff;
        box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.35);
        font-weight: 800;
        line-height: 1;
        transition: bottom 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

    body:has(viralbuzz-scroll-to-top #scrollToTop.opacity-100) .article-mobile-reactions-fab {
        bottom: 0;
    }

    .article-mobile-reactions-fab-icon {
        font-size: 1.25rem;
        line-height: 1;
    }

    .article-mobile-reactions-fab-label {
        font-size: 0.875rem;
    }

    body.article-detail-open article-comments-button #commentsDrawerToggle {
        left: 50% !important;
        right: 0 !important;
        bottom: 0 !important;
        width: auto !important;
        min-height: calc(3.75rem + env(safe-area-inset-bottom)) !important;
        padding: 0.55rem 0.85rem calc(0.55rem + env(safe-area-inset-bottom)) !important;
        border-radius: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        z-index: 30001 !important;
        justify-content: center !important;
        box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.35) !important;
    }

    body.article-detail-open article-comments-button #commentsDrawerToggle svg {
        width: 1.35rem !important;
        height: 1.35rem !important;
        order: 1 !important;
    }

    body.article-detail-open article-comments-button #commentsDrawerToggle span:not(#commentsBadge) {
        margin-left: 0.45rem !important;
        font-size: 0.875rem !important;
        font-weight: 800 !important;
        order: 2 !important;
    }

    body.article-detail-open article-comments-button #commentsBadge {
        position: static !important;
        width: auto !important;
        min-width: 1.35rem !important;
        height: 1.35rem !important;
        margin-left: 0.45rem !important;
        transform: none !important;
        border-width: 0 !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        order: 3 !important;
    }

    body.article-detail-open viralbuzz-scroll-to-top {
        bottom: calc(4.45rem + env(safe-area-inset-bottom)) !important;
        right: 1rem !important;
        z-index: 30000 !important;
    }

    .article-mobile-reactions-overlay {
        position: fixed;
        inset: 0;
        z-index: 30002;
        display: block;
        background: rgba(0, 0, 0, 0.6);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .article-mobile-reactions-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .article-mobile-reactions-panel {
        position: fixed;
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        z-index: 30003;
        display: block;
        max-height: min(78dvh, 42rem);
        padding: 1rem;
        border: 1px solid rgba(139, 92, 246, 0.45);
        border-radius: 1.25rem;
        background: #151525;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
        overflow-y: auto;
        transform: translateY(calc(100% + 1.5rem));
        visibility: hidden;
        transition: transform 0.24s ease, visibility 0.24s ease;
    }

    .article-mobile-reactions-panel.open {
        transform: translateY(0);
        visibility: visible;
    }

    .article-mobile-reactions-panel-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 0.75rem;
    }

    .article-mobile-reactions-panel-header h2 {
        margin: 0;
        color: #ffffff;
        font-size: 1.05rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .article-mobile-reactions-panel-header p {
        margin: 0.2rem 0 0;
        color: #9ca3af;
        font-size: 0.8125rem;
    }

    .article-mobile-reactions-close {
        width: 2.35rem;
        height: 2.35rem;
        border: 1px solid rgba(148, 163, 184, 0.32);
        border-radius: 9999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.06);
        color: #f8fafc;
        flex-shrink: 0;
    }

    .article-mobile-reactions-close svg {
        width: 1.15rem;
        height: 1.15rem;
    }

    .article-mobile-reactions-panel article-reactions {
        margin: 0;
    }

    .article-mobile-reactions-panel .article-reactions-card {
        border: none;
        padding: 0;
        background: transparent;
    }

    .article-mobile-reactions-panel .article-reactions-header {
        display: none !important;
    }

    .article-meme-action-bar {
        gap: 0.45rem;
        padding: 0.65rem;
        overflow: visible;
    }

    .article-meme-action-shares {
        gap: 0.35rem;
        min-width: 0;
    }

    .article-meme-action-share-icon-wrap {
        width: 1.75rem;
        min-width: 1.75rem;
        height: 1.75rem;
    }

    .article-meme-action-shares-title {
        display: none;
    }

    .article-meme-action-shares-count {
        font-size: 0;
        max-width: 2.5rem;
        overflow: visible;
    }

    .article-meme-action-shares-count span {
        font-size: 0.75rem;
    }

    .article-meme-action-socials {
        flex: 0 0 auto;
        gap: 0.35rem;
    }

    .article-meme-action-social {
        width: 2.25rem;
        height: 2.25rem;
        padding: 0;
        justify-content: center;
        border-radius: 0.55rem;
    }

    .article-meme-action-social-label {
        display: none;
    }

    .article-meme-action-social-icon {
        width: 1.35rem;
        height: 1.35rem;
    }

    .article-meme-action-social-icon svg {
        width: 1rem;
        height: 1rem;
    }

    .article-meme-action-icons {
        margin-left: auto;
        gap: 0.15rem;
    }

    .article-meme-action-icon-btn {
        width: 1.95rem;
        height: 2.25rem;
    }
}

viralbuzz-view-article article-reactions > div > div > div {
    background: transparent !important;
    border: 1px solid rgba(75, 85, 99, 0.5) !important;
    border-radius: 0.625rem !important;
    padding: 0.75rem 0.5rem !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem;
}

viralbuzz-view-article article-reactions > div > div > div > div:first-child {
    margin-bottom: 0 !important;
}

viralbuzz-view-article article-reactions > div > div > div > div:first-child img,
viralbuzz-view-article article-reactions > div > div > div > div:first-child svg {
    width: 2rem !important;
    height: 2rem !important;
}

/* Inner count + bar */
viralbuzz-view-article article-reactions > div > div > div > div:nth-child(2) {
    background: transparent !important;
    padding: 0 !important;
    width: 100%;
}

viralbuzz-view-article article-reactions > div > div > div > div:nth-child(2) > div:first-child {
    color: #ffffff !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.375rem !important;
}

viralbuzz-view-article article-reactions > div > div > div > div:nth-child(2) > div:nth-child(2) {
    background: rgba(75, 85, 99, 0.4) !important;
    height: 0.25rem !important;
    border-radius: 9999px !important;
    overflow: hidden;
}

viralbuzz-view-article article-reactions > div > div > div > div:nth-child(2) > div:nth-child(2) > div {
    height: 100% !important;
    background: #f97316 !important;
    border-radius: 9999px !important;
}

/* Reaction button → just the label, no panel */
viralbuzz-view-article article-reactions > div > div > div > button {
    background: transparent !important;
    color: #9ca3af !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0 !important;
    border: none !important;
}

viralbuzz-view-article article-reactions > div > div > div > button:hover {
    color: #ffffff !important;
}

/* ─── Navigation Component ───────────── */
viralbuzz-view-article article-navigation {
    display: block;
    margin-top: 1rem;
    padding-top: 0;
    border-top: none;
}


.article-meme-media-stage .article-quiz-banner-viewer-caution {
    min-height: min(180px, 32vh);
}

/* ----- Video post reader: single embed, structured below (no block number) ----- */
.article-video-post-wrap {
    margin-bottom: 1.5rem;
}

/* ----- Audio post reader: native controls or pasted embed (SoundCloud, etc.) ----- */
.article-audio-post-wrap {
    margin-bottom: 1.5rem;
}

.article-audio-url-shell {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

.article-audio-element {
    display: block;
    width: 100%;
    min-height: 40px;
    border-radius: 0.375rem;
}

.article-audio-embed-shell iframe,
.article-audio-embed-shell audio {
    max-width: 100%;
}

.article-audio-soundcloud-shell {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

.article-soundcloud-iframe {
    display: block;
    width: 100%;
    min-height: 166px;
    border: 0;
}

.article-video-embed-shell {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

/* GIF (and other video blocks) in meme-style primary column — frame like meme hero */
.is-meme-post .article-meme-post-body > .article-video-post-wrap > .article-video-embed-shell {
    box-shadow: none;
    border: 1px solid rgba(75, 85, 99, 0.65);
    background: rgba(0, 0, 0, 0.35);
}

/* Primary-column GIF/video: narrower + shorter than full column (portrait GIFs / Giphy embed) */
.is-meme-post .article-meme-post-body > .article-video-post-wrap {
    max-width: min(100%, 28rem);
    margin-left: auto;
    margin-right: auto;
}

.is-meme-post .article-meme-post-body > .article-video-post-wrap .article-gif-direct-wrap {
    max-width: min(100%, 26rem);
    margin-left: auto;
    margin-right: auto;
}

.is-meme-post .article-meme-post-body > .article-video-post-wrap .article-gif-direct-img {
    width: auto;
    max-width: 100%;
    max-height: clamp(180px, 48vh, 480px);
}

/* Direct GIF file / Giphy CDN image — no 16:9 letterbox */
.article-gif-direct-wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 6rem;
}

.article-gif-direct-img {
    width: auto;
    max-width: min(100%, 32rem);
    height: auto;
    max-height: clamp(200px, 52vh, 560px);
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
    display: block;
}

.article-video-below {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.article-video-description {
    font-size: 1rem;
    line-height: 1.65;
    color: #e5e7eb;
    font-family: var(--font-family);
}

.article-video-description p {
    margin: 0 0 0.75rem;
    color: inherit;
}

.article-video-description p:last-child {
    margin-bottom: 0;
}

.article-video-meta-card {
    border-radius: 0.75rem;
    padding: 1rem 1.125rem;
    border: 1px solid #2d3748;
    background: linear-gradient(165deg, rgba(30, 41, 35, 0.95) 0%, rgba(20, 24, 22, 0.98) 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.article-video-meta-card--credits {
    border-left: 3px solid #22c55e;
}

.article-video-meta-card--notice {
    border-left: 3px solid #f59e0b;
    background: linear-gradient(165deg, rgba(41, 37, 28, 0.95) 0%, rgba(24, 22, 18, 0.98) 100%);
}

.article-video-meta-card__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}

.article-video-meta-card__icon {
    display: flex;
    color: #86efac;
    flex-shrink: 0;
}

.article-video-meta-card--notice .article-video-meta-card__icon {
    color: #fcd34d;
}

.article-video-meta-card__label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6ee7b7;
}

.article-video-meta-card--notice .article-video-meta-card__label {
    color: #fde68a;
}

.article-video-meta-card__body {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #d1d5db;
    font-family: var(--font-family);
}

.article-video-inline-link {
    color: #38bdf8;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}

.article-video-inline-link:hover {
    color: #7dd3fc;
}

.article-video-source-line {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: #9ca3af;
}

.article-video-source-line__label {
    font-weight: 600;
    color: #6b7280;
    margin-right: 0.25rem;
}

/* Older video posts: HTML blob from moreDetails only */
.article-video-legacy-more {
    font-size: 1rem;
    line-height: 1.65;
    color: #e5e7eb;
}

.article-video-legacy-more p {
    margin: 0 0 1rem;
    color: inherit;
}

.article-video-legacy-more p:last-child {
    margin-bottom: 0;
}

.article-video-legacy-more strong {
    color: #f3f4f6;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Article Tags Card ────────────────────────────────────────── */

.article-tags-card {
    background: #1a1a2e;
    border: 1px solid #2d2d4a;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

/* ── Article Tag Pills ────────────────────────────────────────── */

.article-tag-pill {
    display: inline-block;
    background-color: #1a1a1a;
    border: 1px solid #2d2d2d;
    color: #a855f7;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.article-tag-pill:hover {
    border-color: #3b82f6;
    color: #60a5fa;
    text-decoration: none;
}

/* ── Trivia Quiz Redesign ─────────────────────────────────────── */

/* Header: "TRIVIA QUESTION" label + separator */
.article-quiz-trivia-header-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 1rem;
}

.article-quiz-trivia-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #00ff88;
    text-transform: uppercase;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #00ff88;
    margin-bottom: 0.75rem;
    display: inline-block;
}

/* Circle number badge for trivia */
.article-quiz-block-number-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    background-color: #00ff88;
    color: #000000;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 50%;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .article-quiz-block-number-circle {
        width: 2.25rem;
        height: 2.25rem;
        min-width: 2.25rem;
        font-size: 1rem;
    }
}

/* Then / Now overlay on banner image */
.article-quiz-banner-then-now {
    position: relative;
}

.article-quiz-then-now-overlay {
    position: absolute;
    bottom: 0.625rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 0.75rem;
    pointer-events: none;
}

.article-quiz-then-label,
.article-quiz-now-label {
    background: rgba(0, 0, 0, 0.72);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.625rem;
    border-radius: 0.375rem;
}

/* Description box with TV icon */
.article-quiz-description-box {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    background: #1c1c1c;
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
}

.article-quiz-description-icon {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    background: rgba(0, 255, 136, 0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00ff88;
}

.article-quiz-description-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.article-quiz-description-text {
    color: #cccccc;
    font-size: 0.9375rem;
    line-height: 1.6;
    flex: 1;
}

.article-quiz-description-text * {
    color: #cccccc !important;
    font-family: var(--font-family) !important;
}

/* "Choose the correct answer:" label */
.article-quiz-choose-label {
    color: #00ff88;
    font-size: 0.9375rem;
    font-weight: 500;
}

/* Correct / Incorrect answer feedback box */
.article-quiz-correct-feedback {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    border-radius: 0.75rem;
    margin-top: 0.25rem;
}

.article-quiz-feedback-correct {
    background: rgba(0, 255, 136, 0.12);
    border: 1px solid rgba(0, 255, 136, 0.3);
}

.article-quiz-feedback-incorrect {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.article-quiz-feedback-icon {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.article-quiz-feedback-correct .article-quiz-feedback-icon {
    background: #00ff88;
    color: #000000;
}

.article-quiz-feedback-incorrect .article-quiz-feedback-icon {
    background: #ef4444;
    color: #ffffff;
}

.article-quiz-feedback-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.article-quiz-feedback-content {
    flex: 1;
}

.article-quiz-feedback-title {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.article-quiz-feedback-desc {
    color: #aaaaaa;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ── Article Hero Banner ────────────────────────────────────────── */

.article-hero-banner {
    position: relative;
    width: 100%;
    border-radius: 0.75rem;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    min-height: 320px;
    max-height: 680px;
    background: #0a0a0a;
}

.article-hero-banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gradient: transparent top → dark bottom */
.article-hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 30%,
        rgba(0, 0, 0, 0.55) 60%,
        rgba(0, 0, 0, 0.88) 100%
    );
    z-index: 1;
}

/* Top-left: category pills */
.article-hero-top-left {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    right: 4.25rem;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.article-hero-category-more-count {
    display: inline-flex;
    flex: 0 0 auto;
    padding-inline: 0.7rem;
}

/* Top-right: 3-dot menu */
.article-hero-top-right {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 10;
}

@media (max-width: 767px) {
    .article-hero-top-left {
        top: 1rem;
        left: 1rem;
        right: 4.75rem;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .article-hero-top-left .article-meme-category-pill {
        max-width: min(13rem, calc(100vw - 8.5rem));
        min-width: 0;
    }

    .article-hero-top-left .article-meme-category-pill > span:last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .article-hero-category-more-count {
        flex: 0 0 auto;
        padding-inline: 0.7rem;
    }

    .article-hero-top-right {
        top: 1rem;
        right: 1rem;
    }
}

/* Bottom overlay row */
.article-hero-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1.25rem;
}

.article-hero-bottom-left {
    flex: 1;
    min-width: 0;
}

/* Title */
.article-hero-title {
    font-size: 1.375rem;
    font-weight: 900;
    line-height: 1.2;
    color: #ffffff;
    margin: 0 0 0.625rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

@media (min-width: 640px) {
    .article-hero-title {
        font-size: 1.75rem;
    }
}

@media (min-width: 768px) {
    .article-hero-title {
        font-size: 2.125rem;
    }
}

/* Date + read time row */
.article-hero-meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #d1d5db;
    font-size: 0.8125rem;
    font-weight: 500;
}

.article-hero-meta-icon {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
    color: #d1d5db;
}

.article-hero-meta-dot {
    color: #6b7280;
}

/* Views — bottom right */
.article-hero-views {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}

.article-hero-views svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* --- Image post: trivia-style scroll cards + embedded gallery reader --- */
.article-image-post-banner-is-portrait .article-quiz-banner-image {
    max-height: min(70vh, 520px);
    width: 100%;
    object-fit: contain;
    background: #0b0b10;
}

.article-image-post-gallery {
    background: #14141a;
    border: 1px solid #374151;
    border-radius: 0.75rem;
    padding: 0.75rem 0.75rem 1rem;
}

.article-image-gallery-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: nowrap;
}

.article-image-gallery-post-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: #ffffff;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

@media (min-width: 640px) {
    .article-image-gallery-post-title {
        font-size: 1.125rem;
    }
}

.article-image-gallery-count {
    flex: 0 0 auto;
    margin-left: 0;
    min-width: 3.5rem;
    text-align: center;
    padding: 0.2rem 0.5rem;
    background: #0f0f13;
    color: #fff;
    border: 1px solid #4b5563;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.875rem;
}

.article-image-gallery-stage {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
}

.article-image-gallery-nav {
    flex: 0 0 auto;
    align-self: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.375rem;
    border: 1px solid #4b5563;
    background: #1c1c24;
    color: #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.article-image-gallery-nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.article-image-gallery-nav svg {
    width: 1.1rem;
    height: 1.1rem;
}

.article-image-gallery-viewport {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    overflow: hidden;
    background: #0b0b10;
    border: 1px solid #374151;
    border-radius: 0.375rem 0.375rem 0 0;
    height: min(52vh, 460px);
}

.article-image-gallery-zoom-controls {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 5;
    display: flex;
    gap: 0.35rem;
    align-items: center;
    background: rgba(12, 15, 24, 0.85);
    border: 1px solid #4b5563;
    border-radius: 999px;
    padding: 0.2rem 0.35rem;
}

.article-image-gallery-zoom-btn {
    border: 1px solid #4b5563;
    background: #1a1f2b;
    color: #e5e7eb;
    min-width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.35rem;
    line-height: 1;
}

.article-image-gallery-zoom-btn.article-image-gallery-zoom-btn-reset {
    min-width: 3.1rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.article-image-gallery-zoom-btn:hover {
    color: #fff;
    border-color: #22d3ee;
}

.article-image-gallery-track {
    display: flex;
    height: 100%;
    transition: transform 0.35s ease;
    will-change: transform;
}

.article-image-gallery-slide {
    flex: 0 0 100%;
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    box-sizing: border-box;
}

.article-image-gallery-slide-visual {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.article-image-gallery-slide-visual img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.article-image-gallery-slide.is-portrait .article-image-gallery-slide-visual img {
    max-height: 100%;
}

.article-image-gallery-caption {
    margin-top: 0.75rem;
    padding: 0.75rem 0.25rem 0;
    border-top: 1px solid #2d2d38;
}

.article-image-gallery-caption-main {
    margin-bottom: 0.65rem;
}

.article-image-gallery-caption-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    /* Stable height while sliding: up to two title lines at 1.05rem / 1.3 */
    min-height: calc(1.05rem * 1.3 * 2);
}

.article-image-gallery-caption-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.article-image-gallery-caption-badge:empty {
    display: none;
}

.article-image-gallery-caption-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.article-image-gallery-caption-desc-wrap {
    position: relative;
}

/* Inner clips long text; "Read more" stays outside this box */
.article-image-gallery-caption-desc-inner {
    min-width: 0;
}

/* Collapsed: fixed slot (3 lines) so height does not jump between slides */
.article-image-gallery-caption-desc-wrap:not(.is-expanded) .article-image-gallery-caption-desc-inner {
    min-height: calc(0.9rem * 1.45 * 3);
    max-height: calc(0.9rem * 1.45 * 3);
    overflow: hidden;
}

.article-image-gallery-caption-desc-wrap.is-expanded .article-image-gallery-caption-desc-inner {
    min-height: 0;
    max-height: none;
    overflow: visible;
}

.article-image-gallery-caption-desc {
    margin: 0;
    font-size: 0.9rem;
    color: #d1d5db;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.article-image-gallery-read-more {
    margin-top: 0.35rem;
    padding: 0;
    border: none;
    background: none;
    color: #00ff88;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    min-height: 1.35rem;
    line-height: 1.35rem;
}

/* Keep layout height when link is hidden (no "jump" between slides) */
.article-image-gallery-read-more[hidden] {
    display: block !important;
    visibility: hidden;
    pointer-events: none;
    user-select: none;
}

.article-image-gallery-read-more:hover {
    color: #4ade80;
}

.article-image-gallery-caption-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 4.25rem;
    align-items: stretch;
}

.article-image-gallery-meta-chip {
    flex: 1 1 140px;
    background: #1c1c1c;
    border-radius: 0.5rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid #333;
    font-size: 0.75rem;
    color: #9ca3af;
}

.article-image-gallery-meta-chip span {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.2rem;
}

.article-image-gallery-meta-chip strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #e5e7eb;
    word-break: break-word;
}

.article-image-gallery-meta-link {
    color: #60a5fa;
    text-decoration: underline;
}

.article-image-gallery-thumbs-wrap {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.65rem;
}

.article-image-gallery-thumb-nav {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 0.35rem;
    border: 1px solid #4b5563;
    background: #1c1c24;
    color: #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.article-image-gallery-thumb-nav svg {
    width: 1rem;
    height: 1rem;
}

.article-image-gallery-thumbs {
    flex: 1 1 auto;
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 0.2rem 0;
    scrollbar-width: thin;
}

.article-image-gallery-thumb {
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.35rem;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    background: #111;
}

.article-image-gallery-thumb.active {
    border-color: #00ff88;
}

.article-image-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ─── Open List View ──────────────────────────────────────────────────────── */

.ol-empty-state {
    padding: 2rem 1rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.9rem;
    background: #1a1a2e;
    border: 1px dashed #374151;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
}

.ol-container {
    font-family: inherit;
    color: #fff;
    margin-bottom: 1.5rem;
}

/* Header card */
.ol-header-card {
    background: #1a1a2e;
    border: 1px solid #2a2a3e;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 0.5rem;
}

.ol-header-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0;
}

.ol-header-text {
    flex: 1 1 auto;
    min-width: 0;
}

.ol-header-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.3rem;
    line-height: 1.3;
}

.ol-header-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0;
}

.ol-header-date {
    font-size: 0.75rem;
    color: #9ca3af;
}

.ol-header-badge {
    font-size: 0.7rem;
    font-weight: 600;
    background: #7c3aed;
    color: #fff;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    letter-spacing: 0.02em;
}

.ol-page-counter {
    font-size: 0.75rem;
    color: #6b7280;
    white-space: nowrap;
    align-self: center;
}

.ol-page-size-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ol-page-size-label {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-right: 0.15rem;
}

.ol-page-size-btn {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.3rem;
    border: 1px solid #374151;
    background: transparent;
    color: #d1d5db;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ol-page-size-btn:hover {
    border-color: #00ff88;
    color: #00ff88;
}

.ol-page-size-btn.active {
    background: #00ff88;
    border-color: #00ff88;
    color: #111;
    font-weight: 700;
}

/* List items */
.ol-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ol-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: #1a1a2e;
    border: 1px solid #2a2a3e;
    border-top: none;
    cursor: pointer;
    transition: background 0.15s;
    outline: none;
}

.ol-item:first-child {
    border-top: 1px solid #2a2a3e;
    border-radius: 0.75rem 0.75rem 0 0;
}

.ol-item:last-child {
    border-radius: 0 0 0.75rem 0.75rem;
}

.ol-item:only-child {
    border-radius: 0.75rem;
}

.ol-item:hover,
.ol-item:focus {
    background: #212140;
}

.ol-rank {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background: #00ff88;
    color: #111;
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ol-item-thumb {
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.5rem;
    object-fit: cover;
    background: #2a2a3e;
}

.ol-item-thumb-placeholder {
    background: #2a2a3e;
}

.ol-item-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ol-item-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ol-item-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: #00ff88;
}

.ol-item-subtitle {
    font-size: 0.75rem;
    color: #9ca3af;
}

.ol-item-source {
    font-size: 0.72rem;
    color: #6b7280;
}

.ol-item-short-desc {
    font-size: 0.75rem;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ol-item-chevron {
    flex: 0 0 auto;
    color: #4b5563;
    transition: color 0.15s;
}

.ol-item:hover .ol-item-chevron,
.ol-item:focus .ol-item-chevron {
    color: #00ff88;
}

/* Pagination */
.ol-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.ol-prev-btn,
.ol-next-btn,
.ol-detail-prev-btn,
.ol-detail-next-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.9rem;
    border-radius: 0.45rem;
    border: 1px solid #374151;
    background: transparent;
    color: #d1d5db;
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
}

.ol-prev-btn:hover:not(:disabled),
.ol-next-btn:hover:not(:disabled),
.ol-detail-prev-btn:hover:not(:disabled),
.ol-detail-next-btn:hover:not(:disabled) {
    border-color: #00ff88;
    color: #00ff88;
}

.ol-prev-btn:disabled,
.ol-next-btn:disabled,
.ol-detail-prev-btn:disabled,
.ol-detail-next-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.ol-page-dots {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: center;
}

.ol-page-dot {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 9999px;
    border: 1px solid #374151;
    background: transparent;
    color: #9ca3af;
    font-size: 0.72rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ol-page-dot:hover {
    border-color: #00ff88;
    color: #00ff88;
}

.ol-page-dot.active {
    background: #00ff88;
    border-color: #00ff88;
    color: #111;
    font-weight: 700;
}

.ol-showing-label {
    font-size: 0.75rem;
    color: #6b7280;
    text-align: center;
    margin: 0.35rem 0 0;
}

/* Detail view */
.ol-detail {
    border: 1px solid #2a2a3e;
    border-radius: 0.75rem;
    overflow: hidden;
}

.ol-detail-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    background: #1a1a2e;
    border-bottom: 1px solid #2a2a3e;
}

.ol-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0.55rem 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #2a2a3e;
    border-radius: 0.65rem;
    color: #d1d5db;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.ol-back-btn:hover,
.ol-back-btn:focus {
    background: rgba(0, 255, 136, 0.08);
    border-color: rgba(0, 255, 136, 0.45);
    color: #00ff88;
}

.ol-detail-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.25rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid #2a2a3e;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.03);
    color: #d1d5db;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
}

.ol-detail-card {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1rem;
    background: #1a1a2e;
    flex-wrap: wrap;
}

.ol-detail-img-wrap {
    flex: 0 0 auto;
    position: relative;
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 0.6rem;
    overflow: hidden;
}

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

.ol-detail-rank {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    bottom: auto;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.45rem;
    border-radius: 9999px;
    background: #00ff88;
    color: #111;
    font-size: 0.95rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    z-index: 2;
}

.ol-detail-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ol-detail-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

.ol-detail-subtitle {
    font-size: 0.82rem;
    color: #9ca3af;
    margin: 0;
}

.ol-detail-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: #00ff88;
    margin: 0.25rem 0 0;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ol-detail-value-label {
    font-size: 0.72rem;
    font-weight: 400;
    color: #6b7280;
}

.ol-detail-description {
    font-size: 0.82rem;
    color: #d1d5db;
    margin: 0.25rem 0 0;
    line-height: 1.5;
}

.ol-detail-meta-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.ol-meta-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.45rem 0.7rem;
    background: #14141a;
    border: 1px solid #2a2a3e;
    border-radius: 0.5rem;
    min-width: 5.5rem;
}

.ol-meta-chip svg {
    color: #6b7280;
}

.ol-meta-label {
    font-size: 0.68rem;
    color: #6b7280;
}

.ol-meta-value {
    font-size: 0.78rem;
    color: #fff;
    font-weight: 600;
}

.ol-meta-chip--textarea {
    flex: 1 1 100%;
    width: 100%;
    padding: 0.8rem 0.95rem;
}

.ol-meta-chip--textarea .ol-meta-label {
    font-size: 0.8rem;
}

.ol-meta-chip--textarea .ol-meta-value {
    font-size: 1rem;
    line-height: 1.55;
    font-weight: 500;
    white-space: pre-wrap;
}

.ol-detail-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #1a1a2e;
    border-top: 1px solid #2a2a3e;
}

.ol-detail-next-btn--gated {
    opacity: 0.45;
    cursor: not-allowed;
}

.ol-detail-card--ad.ol-detail-card--ad-gated {
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.35);
}

/* ─── Card templates: wealth (Forbes) + food ─────────────────────────────── */

.ol-schema-wealth .ol-list,
.ol-schema-food .ol-list,
.ol-schema-custom .ol-list {
    gap: 0.65rem;
}

.ol-schema-wealth .ol-item,
.ol-schema-wealth .ol-item--card,
.ol-schema-wealth .ol-item--wealth,
.ol-schema-food .ol-item,
.ol-schema-food .ol-item--card,
.ol-schema-custom .ol-item,
.ol-schema-custom .ol-item--card {
    border-top: 1px solid #2a2a3e;
}

.ol-schema-wealth .ol-item--card,
.ol-schema-wealth .ol-item--wealth,
.ol-schema-food .ol-item--card,
.ol-schema-custom .ol-item--card {
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 0.75rem;
    border: 1px solid #2a2a3e;
    margin-bottom: 0;
}

.ol-schema-wealth .ol-item--card:not(:last-child),
.ol-schema-wealth .ol-item--wealth:not(:last-child),
.ol-schema-food .ol-item--card:not(:last-child),
.ol-schema-custom .ol-item--card:not(:last-child) {
    margin-bottom: 0.65rem;
}

.ol-schema-wealth .ol-item--card:first-child,
.ol-schema-wealth .ol-item--card:last-child,
.ol-schema-wealth .ol-item--card:only-child,
.ol-schema-wealth .ol-item--wealth:first-child,
.ol-schema-wealth .ol-item--wealth:last-child,
.ol-schema-wealth .ol-item--wealth:only-child,
.ol-schema-food .ol-item--card:first-child,
.ol-schema-food .ol-item--card:last-child,
.ol-schema-food .ol-item--card:only-child,
.ol-schema-custom .ol-item--card:first-child,
.ol-schema-custom .ol-item--card:last-child,
.ol-schema-custom .ol-item--card:only-child {
    border-radius: 0.75rem;
}

.ol-item-media {
    position: relative;
    flex: 0 0 auto;
}

.ol-schema-wealth .ol-item-media,
.ol-schema-food .ol-item-media,
.ol-schema-custom .ol-item-media {
    width: 5.75rem;
    height: 5.75rem;
}

.ol-schema-wealth .ol-item-thumb,
.ol-schema-food .ol-item-thumb,
.ol-schema-custom .ol-item-thumb {
    width: 5.75rem;
    height: 5.75rem;
    border-radius: 0.6rem;
}

.ol-item-rank-badge,
.ol-detail-rank {
    position: absolute;
    bottom: 0.4rem;
    left: 0.4rem;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.45rem;
    border-radius: 9999px;
    background: #00ff88;
    color: #111;
    font-size: 0.95rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.ol-schema-wealth .ol-item-title,
.ol-schema-food .ol-item-title,
.ol-schema-custom .ol-item-title {
    font-size: 1.15rem;
    font-weight: 700;
    white-space: normal;
    line-height: 1.25;
}

.ol-schema-wealth .ol-item-value,
.ol-schema-food .ol-item-value {
    font-size: 1.05rem;
    font-weight: 800;
    color: #00ff88;
}

.ol-schema-wealth .ol-item-subtitle,
.ol-schema-food .ol-item-subtitle {
    font-size: 0.95rem;
    color: #d1d5db;
}

.ol-schema-food .ol-item-field-k,
.ol-schema-food .ol-detail-field-k {
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    margin-right: 0.35rem;
}

.ol-schema-food .ol-item-nutrient {
    font-size: 0.9rem;
    color: #a7f3d0;
    font-weight: 600;
}

.ol-schema-wealth .ol-item-short-desc,
.ol-schema-food .ol-item-short-desc,
.ol-schema-custom .ol-item-short-desc {
    font-size: 0.9rem;
    white-space: normal;
    line-height: 1.35;
}

.ol-schema-wealth .ol-item-info,
.ol-schema-food .ol-item-info,
.ol-schema-custom .ol-item-info {
    gap: 0.35rem;
}

/* Card detail — hero + readable overview (wealth + food) */
.ol-detail-card--card,
.ol-detail-card--wealth {
    flex-direction: column;
    padding: 0;
    gap: 0;
    overflow: visible;
}

.ol-detail-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 280px;
    background: #14141a;
}

.ol-detail-card--card .ol-detail-hero .ol-detail-img,
.ol-detail-card--wealth .ol-detail-hero .ol-detail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ol-detail-card--card .ol-detail-info,
.ol-detail-card--wealth .ol-detail-info {
    padding: 1.25rem 1.1rem 1.1rem;
    gap: 0.5rem;
}

.ol-detail-card--card .ol-detail-name,
.ol-detail-card--wealth .ol-detail-name {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
}

.ol-detail-card--card .ol-detail-subtitle,
.ol-detail-card--wealth .ol-detail-subtitle {
    font-size: 1rem;
    color: #d1d5db;
}

.ol-detail-card--card .ol-detail-value,
.ol-detail-card--wealth .ol-detail-value {
    font-size: 1.65rem;
    font-weight: 800;
    margin-top: 0.35rem;
}

.ol-detail-card--card .ol-detail-value-label,
.ol-detail-card--wealth .ol-detail-value-label {
    font-size: 0.85rem;
}

.ol-detail-overview {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #2a2a3e;
    overflow: visible;
}

.ol-detail-card--card .ol-detail-hero,
.ol-detail-card--wealth .ol-detail-hero {
    overflow: hidden;
    border-radius: 0;
}

/* Hero caption + image attribution overlay */
.ol-detail-hero-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 0.85rem 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.75) 55%, transparent 100%);
    color: #f3f4f6;
}

.ol-detail-hero-desc {
    margin: 0 0 0.45rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #e5e7eb;
}

.ol-detail-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #d1d5db;
}

.ol-hero-meta-item {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.ol-hero-meta-k {
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
}

.ol-hero-meta-sep {
    color: #6b7280;
    user-select: none;
}

.ol-detail-hero-meta .article-image-gallery-meta-link {
    color: #00ff88;
    font-weight: 600;
    text-decoration: underline;
}

.ol-detail-hero-meta .article-image-gallery-meta-link:hover {
    color: #5dffb0;
}

/* Summary callout (short description) — reference layout, dark theme */
.ol-detail-summary {
    margin-top: 0.85rem;
    padding: 1rem 1rem 1rem 1.1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid #2a2a3e;
    border-left: 4px solid #00ff88;
    border-radius: 0.5rem;
}

.ol-detail-summary-label {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #00ff88;
}

.ol-detail-summary-text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: #e5e7eb;
}

.ol-detail-section-label {
    margin: 0 0 0.65rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
}

/* Sun Editor HTML in detail view */
.ol-rich-text {
    font-size: 1rem;
    line-height: 1.65;
    color: #e5e7eb;
    word-wrap: break-word;
}

.ol-rich-text p {
    margin: 0 0 0.85rem;
}

.ol-rich-text p:last-child {
    margin-bottom: 0;
}

.ol-rich-text h1,
.ol-rich-text h2,
.ol-rich-text h3,
.ol-rich-text h4 {
    color: #fff;
    font-weight: 700;
    line-height: 1.3;
    margin: 1rem 0 0.5rem;
}

.ol-rich-text h1 { font-size: 1.35rem; }
.ol-rich-text h2 { font-size: 1.2rem; }
.ol-rich-text h3 { font-size: 1.1rem; }

.ol-rich-text ul,
.ol-rich-text ol {
    margin: 0 0 1rem;
    padding: 0 0 0 1.5rem;
    padding-inline-start: 1.5rem;
    list-style-position: outside;
}

.ol-rich-text ul {
    list-style-type: disc;
}

.ol-rich-text ol {
    list-style-type: decimal;
}

.ol-rich-text li {
    margin-bottom: 0.5rem;
    padding-left: 0.15rem;
    display: list-item;
}

.ol-rich-text li > p {
    margin: 0 0 0.35rem;
}

.ol-rich-text li > p:last-child {
    margin-bottom: 0;
}

.ol-rich-text ul ul,
.ol-rich-text ol ol,
.ol-rich-text ul ol,
.ol-rich-text ol ul {
    margin-top: 0.35rem;
    margin-bottom: 0.35rem;
}

.ol-rich-text strong,
.ol-rich-text b {
    color: #fff;
    font-weight: 700;
}

.ol-rich-text a {
    color: #00ff88;
    text-decoration: underline;
}

.ol-rich-text blockquote {
    margin: 0.75rem 0;
    padding: 0.65rem 0.85rem;
    border-left: 3px solid #00ff88;
    background: rgba(255, 255, 255, 0.04);
    color: #d1d5db;
}

.ol-rich-text img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 0.5rem 0;
}

/* Food — key nutrient highlight in detail */
.ol-detail-nutrient-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    background: rgba(0, 255, 136, 0.06);
    border: 1px solid rgba(0, 255, 136, 0.22);
    border-radius: 0.5rem;
}

.ol-detail-nutrient-cell {
    flex: 1 1 8rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ol-detail-nutrient-k {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
}

.ol-detail-nutrient-v {
    font-size: 1.05rem;
    font-weight: 700;
    color: #a7f3d0;
    line-height: 1.25;
}

@media (min-width: 640px) {
    .ol-schema-wealth .ol-item-media,
    .ol-schema-wealth .ol-item-thumb,
    .ol-schema-food .ol-item-media,
    .ol-schema-food .ol-item-thumb,
    .ol-schema-custom .ol-item-media,
    .ol-schema-custom .ol-item-thumb {
        width: 6.5rem;
        height: 6.5rem;
    }

    .ol-schema-wealth .ol-item-title,
    .ol-schema-food .ol-item-title,
    .ol-schema-custom .ol-item-title {
        font-size: 1.25rem;
    }

    .ol-detail-hero {
        max-height: 320px;
    }
}

/* Open list — advertisement on list page (inline, stream order) */
.ol-ad-list-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem 1.1rem;
    margin-bottom: 0.65rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(251, 191, 36, 0.45);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, rgba(26, 26, 46, 0.95) 50%);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.ol-ad-list-card:hover {
    border-color: rgba(251, 191, 36, 0.75);
}

.ol-ad-list-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ol-ad-list-badge {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #111;
    background: #fbbf24;
    padding: 0.2rem 0.45rem;
    border-radius: 0.25rem;
}

.ol-ad-list-kind {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fde68a;
}

.ol-ad-list-card-body {
    overflow: hidden;
    border-radius: 0.5rem;
}

.ol-ad-list-html .ol-ad-html-preview-iframe {
    min-height: 140px;
    max-height: 220px;
}

.ol-ad-list-affiliate {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.ol-ad-list-affiliate-img {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: 0.4rem;
    flex-shrink: 0;
}

.ol-ad-list-affiliate-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
    color: #e5e7eb;
    min-width: 0;
}

.ol-ad-list-affiliate-link {
    font-size: 0.8rem;
    color: #9ca3af;
    word-break: break-all;
}

/* Open list — advertisement detail step */
.ol-detail-card--ad {
    padding: 1.25rem 1.1rem 1.5rem;
    gap: 0.75rem;
}

.ol-ad-disclosure {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fbbf24;
}


.ol-ad-slot-body {
    margin-top: 0.35rem;
}

.ol-ad-slot-body ad-container {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.ol-ad-affiliate-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid #2a2a3e;
    border-radius: 0.65rem;
}

.ol-ad-affiliate-img {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 0.5rem;
}

.ol-ad-affiliate-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

.ol-ad-affiliate-desc {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #d1d5db;
}

.ol-ad-affiliate-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.35rem;
    padding: 0.65rem 1.1rem;
    background: #00ff88;
    color: #111;
    font-weight: 700;
    border-radius: 0.5rem;
    text-decoration: none;
}

.ol-ad-affiliate-cta:hover {
    opacity: 0.92;
}

.ol-ad-html-reader-preview {
    border-radius: 0.5rem;
    border: 1px solid #2a2a3e;
    background: #0f0f14;
    overflow: hidden;
}

.ol-detail-card--ad.ol-ad-engage-host {
    position: relative;
}

.ol-detail-card--ad .ol-ad-engage-capture {
    position: absolute;
    inset: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    min-height: 12rem;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ol-ad-html-reader-preview {
    width: 100%;
    position: relative;
}

.ol-ad-html-reader-preview .ol-ad-html-preview-iframe,
.ol-ad-html-preview-iframe {
    display: block;
    width: 100%;
    min-height: 200px;
    border: 0;
    background: #14141a;
}

.ol-ad-html-preview-iframe--detail {
    min-height: 280px;
    max-width: 100%;
}

.ol-detail-card--ad .ol-ad-slot-body {
    width: 100%;
}

.ol-page-dot--ad {
    min-width: 2.35rem;
    padding: 0 0.5rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.ol-page-dot--ad.active {
    background: #fbbf24;
    color: #111;
    border-color: #fbbf24;
}

.ol-ad-list-html .ol-ad-html-preview-iframe {
    min-height: 200px;
    max-height: 320px;
}

.ol-ad-empty {
    margin: 0;
    color: #9ca3af;
    font-size: 0.95rem;
}

/* Custom structured fields (review, specs table, pros & cons) */
.ol-detail-structured {
    margin-top: 1rem;
}

.ol-reader-review-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.ol-reader-review-stars {
    display: inline-flex;
    gap: 0.2rem;
}

.ol-reader-star {
    font-size: 1rem;
    color: #4b5563;
}

.ol-reader-star--filled {
    color: #ef4444;
}

.ol-reader-review-text {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f9fafb;
}

.ol-detail-custom-image {
    display: block;
    width: 100%;
    max-width: 720px;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    object-fit: cover;
}

.ol-detail-image-field .ol-detail-hero-desc {
    margin: 0.65rem 0 0.45rem;
    font-size: 1rem;
    line-height: 1.55;
    font-style: italic;
}

.ol-detail-gallery-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ol-detail-gallery-head .ol-detail-section-label {
    margin: 0;
}

.ol-detail-gallery-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.ol-detail-gallery-count {
    font-size: 0.78rem;
    font-weight: 700;
    color: #9ca3af;
}

.ol-detail-gallery-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 3.25rem;
    border: 0;
    border-radius: 0.4rem;
    background: rgba(0, 0, 0, 0.22);
    color: #f3f4f6;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    flex: 0 0 auto;
}

.ol-detail-gallery-nav:hover,
.ol-detail-gallery-nav:focus {
    background: rgba(0, 255, 136, 0.08);
    border-color: rgba(0, 255, 136, 0.45);
    color: #00ff88;
}

.ol-detail-gallery-slider {
    position: relative;
    overflow: hidden;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    background: rgba(0, 0, 0, 0.16);
}

.ol-detail-gallery-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ol-detail-gallery-track::-webkit-scrollbar {
    display: none;
}

.ol-detail-gallery-item {
    flex: 0 0 100%;
    scroll-snap-align: start;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.ol-detail-gallery-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0.35rem;
}

.ol-detail-gallery-thumbs-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.ol-detail-gallery-thumbs {
    display: flex;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.ol-detail-gallery-thumbs::-webkit-scrollbar {
    display: none;
}

.ol-detail-gallery-thumb {
    flex: 0 0 4.75rem;
    height: 3.25rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 0.35rem;
    background: transparent;
    cursor: pointer;
    opacity: 0.65;
    overflow: hidden;
    transition: border-color 0.15s, opacity 0.15s;
}

.ol-detail-gallery-thumb.active,
.ol-detail-gallery-thumb:hover,
.ol-detail-gallery-thumb:focus {
    border-color: #00ff88;
    opacity: 1;
}

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

.ol-detail-gallery-desc,
.ol-detail-video-desc {
    margin: 0.65rem 0 0.45rem;
    font-size: 1rem;
    line-height: 1.55;
    color: #e5e7eb;
    font-style: italic;
}

.ol-detail-video-frame {
    width: 100%;
    overflow: hidden;
    border-radius: 0.75rem;
    background: #000;
}

.ol-detail-video-frame iframe {
    display: block;
    width: 100%;
    min-height: 320px;
    border: 0;
}

.ol-detail-video-caution {
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
}

.ol-detail-video-caution summary {
    cursor: pointer;
    color: #00ff88;
    font-weight: 700;
}

.ol-detail-video-caution[open] summary {
    margin-bottom: 0.75rem;
}

.ol-reader-specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.ol-reader-specs-row th {
    text-align: left;
    font-weight: 700;
    color: #f3f4f6;
    padding: 0.65rem 0.85rem;
    width: 42%;
    vertical-align: top;
}

.ol-reader-specs-row td {
    padding: 0.65rem 0.85rem;
    color: #d1d5db;
    vertical-align: top;
}

.ol-reader-specs-row--alt th,
.ol-reader-specs-row--alt td {
    background: rgba(255, 255, 255, 0.04);
}

.ol-reader-pros-cons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 640px) {
    .ol-reader-pros-cons-grid {
        grid-template-columns: 1fr;
    }
}

.ol-reader-pros-list,
.ol-reader-cons-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ol-reader-pros-cons-item {
    position: relative;
    padding: 0.35rem 0 0.35rem 1.35rem;
    line-height: 1.5;
    color: #e5e7eb;
}

.ol-reader-pros-cons-item--pro::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #22c55e;
    font-weight: 700;
}

.ol-reader-pros-cons-item--con::before {
    content: '—';
    position: absolute;
    left: 0;
    color: #f87171;
    font-weight: 700;
}/* Article Reactions Component Styles */
article-reactions {
    display: block;
    margin: 0;
}

/* Outer card */
.article-reactions-card {
    display: block !important;
    background: #1a1a2e;
    border: 1px solid #2d2d4a;
    border-radius: 0.75rem;
    overflow: hidden;
    padding: 1.25rem;
}

/* Header */
.article-reactions-header {
    display: block !important;
    margin-bottom: 1.25rem;
    width: 100%;
}

.article-reactions-title {
    display: block !important;
    font-size: 1.125rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #ffffff !important;
    margin-bottom: 0.375rem;
    letter-spacing: 0.02em;
}

@media (min-width: 640px) {
    .article-reactions-title {
        font-size: 1.25rem;
    }
}

.article-reactions-subtitle {
    display: block !important;
    font-size: 0.8125rem;
    color: #9ca3af;
}

/* Reactions grid */
.article-reactions-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 0;
    transition: opacity 0.25s ease;
}

.article-reactions-grid.is-locked {
    pointer-events: none;
    opacity: 0.55;
    user-select: none;
}

.article-reaction-item.is-locked {
    filter: grayscale(0.15);
}

@media (min-width: 640px) {
    .article-reactions-grid {
        display: flex !important;
        flex-wrap: wrap;
        gap: 0.625rem;
    }
}

/* Individual reaction item */
.article-reaction-item {
    background: #111120;
    border: 1px solid #2d2d4a;
    border-radius: 0.625rem;
    padding: 0.625rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    transition: border-color 0.18s ease;
}

@media (min-width: 640px) {
    .article-reaction-item {
        padding: 0.75rem;
        flex: 0 0 auto;
        min-width: 80px;
    }
}

.article-reaction-item:hover {
    border-color: #8b5cf6;
}

/* Emoji circle — purple border */
.article-reaction-emoji {
    text-align: center;
}

.reaction-emoji-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    border: 2px solid #8b5cf6;
    border-radius: 50%;
    padding: 0.3rem;
    line-height: 1;
}

.reaction-icon-img {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
    border: 2px solid #8b5cf6;
    border-radius: 50%;
    padding: 0.25rem;
    display: block;
}

@media (min-width: 640px) {
    .reaction-emoji-icon {
        font-size: 1.75rem;
        padding: 0.4rem;
    }
    .reaction-icon-img {
        width: 2.25rem;
        height: 2.25rem;
    }
}

@media (min-width: 768px) {
    .reaction-emoji-icon {
        font-size: 2rem;
    }
    .reaction-icon-img {
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* Stats */
.article-reaction-stats {
    width: 100%;
}

/* Count — purple */
.article-reaction-count {
    text-align: center;
    color: #8b5cf6;
    font-weight: 700;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

@media (min-width: 640px) {
    .article-reaction-count {
        font-size: 0.875rem;
    }
}

.article-reaction-progress {
    width: 100%;
    background: #2d2d4a;
    border-radius: 9999px;
    height: 3px;
    overflow: hidden;
}

.article-reaction-progress-bar {
    background: #8b5cf6;
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* Label button */
.article-reaction-button {
    width: 100%;
    background: transparent;
    color: #9ca3af;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.25rem 0;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: color 0.18s ease;
    text-align: center;
}

@media (min-width: 640px) {
    .article-reaction-button {
        font-size: 0.6875rem;
        padding: 0.375rem 0;
    }
}

.article-reaction-button:hover {
    color: #8b5cf6;
}

.article-reaction-button.disabled {
    cursor: default;
    opacity: 0.6;
}

/* Footer */
.article-reactions-footer {
    display: block !important;
    width: 100%;
    margin-top: 0;
    clear: both;
}

.article-reactions-footer-divider {
    display: block;
    height: 1px;
    background: #2d2d4a;
    margin-bottom: 1rem;
    width: 100%;
}

@keyframes article-reactions-thanks-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hidden until user submits a reaction successfully */
.article-reactions-thanks:not(.is-visible) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    text-align: center;
    width: 100%;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border-width: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.45s ease, margin-top 0.35s ease, padding 0.35s ease, border-width 0.2s ease, visibility 0s linear 0.45s;
}

/* Shrink duration must stay in sync with THANKS_PANEL_MS in article-reactions.js (4.5s). */
@keyframes article-reactions-thanks-timer {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

.article-reactions-thanks-timer-wrap {
    width: 100%;
    height: 4px;
    margin-top: 0.75rem;
    background: rgba(45, 45, 74, 0.55);
    border-radius: 9999px;
    overflow: hidden;
    flex-shrink: 0;
}

.article-reactions-thanks-timer-bar {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: left center;
    transform: scaleX(1);
    background: linear-gradient(90deg, #8b5cf6, #22d3ee, #00ff88);
    border-radius: 9999px;
}

.article-reactions-thanks.is-visible .article-reactions-thanks-timer-bar {
    animation: article-reactions-thanks-timer 4.5s linear forwards;
}

.article-reactions-thanks-copy {
    width: 100%;
}

.article-reactions-thanks.is-visible {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    text-align: center;
    width: 100%;
    max-height: 18rem;
    opacity: 1;
    overflow: visible;
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid #2d2d4a;
    border-radius: 0.625rem;
    background: #111120;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.45s ease, margin-top 0.35s ease, padding 0.35s ease, border-width 0.2s ease, visibility 0s linear 0s;
    animation: article-reactions-thanks-in 0.45s ease forwards;
}

.article-reactions-heart {
    width: 1.75rem;
    height: 1.75rem;
    color: #8b5cf6;
    flex-shrink: 0;
}

.article-reactions-thanks-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.125rem;
}

.article-reactions-thanks-subtitle {
    font-size: 0.8125rem;
    color: #6b7280;
}
/* Article Author Info Component Styles (Compact) */
article-author-info {
    display: block;
    margin: 1rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid #374151;
}

.article-author-info-compact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

@media (min-width: 640px) {
    .article-author-info-compact {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.article-author-info-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .article-author-info-left {
        gap: 0.75rem;
    }
}

.article-author-avatar-container {
    position: relative;
    flex-shrink: 0;
}

.article-author-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
}

@media (min-width: 640px) {
    .article-author-avatar {
        width: 2.5rem;
        height: 2.5rem;
    }
}

.article-author-avatar-initials {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
}

@media (min-width: 640px) {
    .article-author-avatar-initials {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 0.875rem;
    }
}

.article-author-details {
    display: flex;
    flex-direction: column;
    gap: 0;
}

@media (min-width: 640px) {
    .article-author-details {
        flex-direction: row;
        align-items: center;
    }
}

.article-author-by {
    font-size: 0.75rem;
    color: #d1d5db;
}

@media (min-width: 640px) {
    .article-author-by {
        font-size: 0.875rem;
    }
}

.article-author-name {
    font-weight: 600;
    color: #ffffff;
}

.article-author-date {
    font-size: 0.75rem;
    color: #9ca3af;
}

@media (min-width: 640px) {
    .article-author-date {
        font-size: 0.875rem;
        margin-left: 0.5rem;
    }
}

.article-author-views {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #d1d5db;
}

@media (min-width: 640px) {
    .article-author-views {
        font-size: 0.875rem;
    }
}

.article-views-icon {
    width: 0.75rem;
    height: 0.75rem;
}

@media (min-width: 640px) {
    .article-views-icon {
        width: 1rem;
        height: 1rem;
    }
}

.article-views-count {
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
}







/* Article Author Info Full Component Styles */
article-author-info-full {
    display: block;
    margin: 1.5rem 0;
}

/* Outer card */
.article-author-info-full {
    background: #1a1a2e;
    border: 1px solid #2d2d4a;
    border-radius: 0.75rem;
    overflow: hidden;
}

.article-author-info-full-content {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 1.25rem;
}

/* Avatar column */
.article-author-info-full-avatar {
    flex-shrink: 0;
    position: relative;
    margin-right: 1.25rem;
}

.article-author-full-avatar-img {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

@media (min-width: 640px) {
    .article-author-full-avatar-img {
        width: 6rem;
        height: 6rem;
    }
}

.article-author-full-avatar-initials {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.5rem;
    text-transform: uppercase;
}

@media (min-width: 640px) {
    .article-author-full-avatar-initials {
        width: 6rem;
        height: 6rem;
    }
}

/* Green online dot */
.article-author-online-dot {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 0.875rem;
    height: 0.875rem;
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid #1a1a2e;
}

/* Vertical divider between avatar and details */
.article-author-vert-divider {
    width: 1px;
    align-self: stretch;
    background: #2d2d4a;
    flex-shrink: 0;
    margin-right: 1.25rem;
}

/* Details column */
.article-author-info-full-details {
    flex: 1;
    min-width: 0;
}

/* Top row: "ABOUT THE AUTHOR" badge + social icons */
.article-author-info-full-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.625rem;
    gap: 0.5rem;
}

/* Badge pill */
.article-author-info-full-label {
    display: inline-block;
    background: #111120;
    border: 1px solid #2d2d4a;
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
    padding: 0.25rem 0.625rem;
    white-space: nowrap;
}

/* Author name */
.article-author-info-full-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.375rem 0;
    line-height: 1.2;
}

@media (min-width: 640px) {
    .article-author-info-full-name {
        font-size: 1.5rem;
    }
}

/* Job title | location row */
.article-author-info-full-meta {
    font-size: 0.875rem;
    color: #9ca3af;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.article-author-meta-divider {
    color: #4b5563;
    margin: 0 0.125rem;
}

/* Bio — clamped by default, expanded on "Read more" */
.article-author-info-full-bio {
    font-size: 0.9375rem;
    color: #d1d5db;
    line-height: 1.6;
    margin: 0 0 0.375rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-author-info-full-bio.expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* "Read more ›" button */
.article-author-read-more {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: #8b5cf6;
    transition: color 0.18s ease;
}

.article-author-read-more:hover {
    color: #a78bfa;
}

/* Social icons row (top-right) */
.article-author-info-full-social {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.article-author-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: #111120;
    border: 1px solid #2d2d4a;
    color: #9ca3af;
    transition: color 0.18s ease, border-color 0.18s ease;
    flex-shrink: 0;
}

.article-author-social-link:hover {
    color: #ffffff;
    border-color: #8b5cf6;
}

.article-author-social-link svg {
    width: 1rem;
    height: 1rem;
}
/* Article Leaderboard Component Styles */
article-leaderboard {
    display: block;
    background-color: #1f2937;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
    article-leaderboard {
        padding: 1.5rem;
    }
}

.article-leaderboard-title {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    text-align: center;
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .article-leaderboard-title {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }
}

.article-leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .article-leaderboard-list {
        gap: 0.75rem;
    }
}

.article-leaderboard-item {
    background-color: #181818;
    border-radius: 0.5rem;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .article-leaderboard-item {
        padding: 0.75rem;
        gap: 0.75rem;
    }
}

.article-leaderboard-rank {
    font-size: 1.25rem;
    font-weight: 700;
    color: #d1d5db;
    flex-shrink: 0;
    width: 1.5rem;
    text-align: center;
}

@media (min-width: 640px) {
    .article-leaderboard-rank {
        font-size: 1.5rem;
        width: 2rem;
    }
}

.article-leaderboard-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.article-leaderboard-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
}

@media (min-width: 640px) {
    .article-leaderboard-avatar {
        width: 3rem;
        height: 3rem;
    }
}

.article-leaderboard-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 1rem;
    height: 1rem;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    border: 2px solid #fbbf24;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

@media (min-width: 640px) {
    .article-leaderboard-badge {
        width: 1.25rem;
        height: 1.25rem;
    }
}

.article-leaderboard-badge-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.article-leaderboard-badge-inner::before {
    content: '';
    width: 0.375rem;
    height: 0.375rem;
    background-color: #fbbf24;
    border-radius: 0.125rem;
}

@media (min-width: 640px) {
    .article-leaderboard-badge-inner::before {
        width: 0.5rem;
        height: 0.5rem;
    }
}

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

.article-leaderboard-name {
    font-weight: 700;
    color: #ffffff;
    font-size: 0.75rem;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

@media (min-width: 640px) {
    .article-leaderboard-name {
        font-size: 0.875rem;
    }
}

.article-leaderboard-xp {
    font-size: 0.75rem;
    color: #d1d5db;
    line-height: 1.2;
}







/* Article Sharing Component Styles */
article-sharing {
    display: block;
    margin: 1rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid #374151;
}

.article-sharing {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

@media (min-width: 640px) {
    .article-sharing {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }
}

.article-sharing-shares {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    color: #f3f4f6;
    font-weight: 600;
}

@media (min-width: 640px) {
    .article-sharing-shares {
        font-size: 1.125rem;
    }
}

.article-share-icon {
    width: 1.25rem;
    height: 1.25rem;
}

@media (min-width: 640px) {
    .article-share-icon {
        width: 1.5rem;
        height: 1.5rem;
    }
}

.article-share-count {
    color: #ffffff;
}

.article-share-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #d1d5db;
}

.article-sharing-buttons {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid #374151;
    border-radius: 0.5rem;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.article-share-button {
    flex: 1;
    min-width: 0;
    height: 3rem;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0 0.5rem;
    border: none;
    border-right: 1px solid #374151;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

@media (min-width: 640px) {
    .article-share-button {
        height: 3.5rem;
        font-size: 0.875rem;
        gap: 0.5rem;
        padding: 0 0.75rem;
    }
}

@media (min-width: 768px) {
    .article-share-button {
        font-size: 1rem;
        padding: 0 1rem;
    }
}

.article-share-button:last-child {
    border-right: none;
}

.article-share-button:hover {
    opacity: 0.9;
}

.article-share-button-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .article-share-button-icon {
        width: 1.25rem;
        height: 1.25rem;
    }
}

.article-share-button-text {
    display: none;
}

@media (min-width: 768px) {
    .article-share-button-text {
        display: inline;
        white-space: nowrap;
    }
}

.article-share-facebook {
    background-color: #3b5998;
    color: #ffffff;
}

.article-share-facebook:hover {
    background-color: #344e86;
}

.article-share-twitter {
    background-color: #000000;
    color: #ffffff;
}

.article-share-twitter:hover {
    background-color: #1a1a1a;
}

.article-share-instagram {
    background: linear-gradient(to right, #9333ea, #ec4899, #f97316);
    color: #ffffff;
}

.article-share-instagram:hover {
    opacity: 0.9;
}

/* Voting */
.article-voting {
    display: flex;
    align-items: stretch;
    height: 3rem;
}

@media (min-width: 640px) {
    .article-voting {
        height: 3.5rem;
    }
}

.article-vote-button {
    width: 2.5rem;
    background-color: #000000;
    border: 1px solid #374151;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

@media (min-width: 640px) {
    .article-vote-button {
        width: 3rem;
    }
}

.article-vote-button:hover {
    background-color: #1a1a1a;
}

.article-vote-button:last-of-type {
    border-left: none;
}

.article-vote-icon {
    width: 0.75rem;
    height: 0.75rem;
}

@media (min-width: 640px) {
    .article-vote-icon {
        width: 1rem;
        height: 1rem;
    }
}

.article-vote-count {
    padding: 0 0.75rem;
    background-color: #000000;
    border: 1px solid #374151;
    border-left: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
}

@media (min-width: 640px) {
    .article-vote-count {
        padding: 0 1rem;
        font-size: 1.125rem;
    }
}







/* Article Navigation Component Styles */
article-navigation {
    display: block;
    margin: 1.5rem 0;
}

/* Outer card */
.article-nav-card {
    background: #1a1a2e;
    border: 1px solid #2d2d4a;
    border-radius: 0.75rem;
    overflow: hidden;
}

/* Header row */
.article-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid #2d2d4a;
}

.article-nav-header-side {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.article-nav-header-side-right {
    flex-direction: row;
}

.article-nav-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8b5cf6;
}

/* Purple circle arrow buttons */
.article-nav-arrow-btn {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #8b5cf6;
    border: none;
    color: #ffffff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.1s ease;
}

.article-nav-arrow-btn svg {
    width: 1rem;
    height: 1rem;
}

.article-nav-arrow-btn:hover {
    background: #7c3aed;
}

.article-nav-arrow-btn:active {
    transform: scale(0.93);
}

/* Posts row */
.article-nav-posts {
    display: flex;
    align-items: stretch;
}

.article-nav-vertical-divider {
    width: 1px;
    background: #2d2d4a;
    flex-shrink: 0;
}

.article-nav-post-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background 0.18s ease;
    min-width: 0;
}

.article-nav-post-card:hover {
    background: rgba(139, 92, 246, 0.06);
}

.article-nav-post-card-right {
    flex-direction: row;
    justify-content: flex-end;
    text-align: right;
}

.article-nav-card-image {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: 0.5rem;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .article-nav-card-image {
        width: 5.5rem;
        height: 5.5rem;
    }
}

.article-nav-card-info {
    flex: 1;
    min-width: 0;
}

.article-nav-card-info-right {
    text-align: right;
}

.article-nav-card-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.35;
    margin-bottom: 0.375rem;
    transition: color 0.18s ease;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 640px) {
    .article-nav-card-title {
        font-size: 0.9375rem;
    }
}

.article-nav-prev-card:hover .article-nav-card-title,
.article-nav-next-card:hover .article-nav-card-title {
    color: #8b5cf6;
}

.article-nav-card-author {
    font-size: 0.75rem;
    color: #6b7280;
}

@media (max-width: 480px) {
    .article-nav-posts {
        flex-direction: column;
    }
    .article-nav-vertical-divider {
        width: auto;
        height: 1px;
    }
    .article-nav-post-card-right {
        flex-direction: row-reverse;
        text-align: left;
        justify-content: flex-start;
    }
    .article-nav-card-info-right {
        text-align: left;
    }
}
/* Article Compact Header Styles - Minimal CSS, using Tailwind for styling */
article-compact-header {
    display: block;
    width: 100%;
}

article-compact-header .article-compact-header-shell {
    transform: translateY(-100%);
    transition: transform 0.25s ease-in-out;
}

article-compact-header .article-compact-header-shell.is-visible {
    transform: translateY(0);
}

article-compact-header .article-compact-category-pill {
    transform: scale(0.9);
    transform-origin: left center;
    flex-shrink: 0;
    max-width: 38%;
    overflow: hidden;
}

article-compact-header .article-compact-category-pill > span:last-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 8.5rem;
}

/* Adjust for sidebar push layout - only handle transform positioning */
@media (max-width: 1023px) {
    body.sidebar-open article-compact-header .article-compact-header-shell {
        transform: translateX(16rem) translateY(-100%) !important;
    }
    
    body.sidebar-open article-compact-header .article-compact-header-shell.is-visible {
        transform: translateX(16rem) translateY(0) !important;
    }
}

@media (min-width: 1024px) {
    body.sidebar-open article-compact-header .article-compact-header-shell {
        margin-left: 16rem;
    }
    
    body.sidebar-closed article-compact-header .article-compact-header-shell {
        margin-left: 0;
    }
}

/* Tab Content Transition Animations */
@keyframes tabContentFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes tabContentFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered Slide Up Animation for List Items */
@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Post card animation classes - merged with Post Card Styles below */

.category-post-card.animate-delay-0 {
    animation-delay: 0.05s;
}

.category-post-card.animate-delay-1 {
    animation-delay: 0.1s;
}

.category-post-card.animate-delay-2 {
    animation-delay: 0.15s;
}

.category-post-card.animate-delay-3 {
    animation-delay: 0.2s;
}

.category-post-card.animate-delay-4 {
    animation-delay: 0.25s;
}

.category-post-card.animate-delay-5 {
    animation-delay: 0.3s;
}

.category-post-card.animate-delay-6 {
    animation-delay: 0.35s;
}

.category-post-card.animate-delay-7 {
    animation-delay: 0.4s;
}

.category-post-card.animate-delay-8 {
    animation-delay: 0.45s;
}

.category-post-card.animate-delay-9 {
    animation-delay: 0.5s;
}

/* Spinner Styles */
.category-spinner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    min-height: 200px;
}

.category-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(0, 255, 136, 0.2);
    border-top-color: #00ff88;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    position: relative;
}

.category-spinner::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 3px solid transparent;
    border-top-color: rgba(0, 255, 255, 0.6);
    border-radius: 50%;
    animation: spin 1.2s linear infinite reverse;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* View Category Component Styles */
viralbuzz-view-category {
    display: block;
    width: 100%;
    min-height: calc(100vh - 60px);
    transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
    box-sizing: border-box;
    margin-left: 0;
}

/* Desktop: content shifts right to make room for sidebar when open */
@media (min-width: 1024px) {
    viralbuzz-view-category {
        margin-left: 16rem;
        width: calc(100% - 16rem);
    }
    
    /* When sidebar is closed, main content expands to full width */
    body.sidebar-closed viralbuzz-view-category,
    viralbuzz-view-category.sidebar-closed {
        margin-left: 0;
        width: 100%;
    }
    
    /* When sidebar is open, ensure proper spacing */
    body.sidebar-open viralbuzz-view-category,
    viralbuzz-view-category.sidebar-open {
        margin-left: 16rem;
        width: calc(100% - 16rem);
    }
}

/* Category Page Container */
.category-page {
    width: 100%;
}

/* Tab Container */
.category-tabs-container {
    position: relative;
    transition: all 0.2s ease;
}

/* Tab Styles */
.category-tab {
    position: relative;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 2px solid transparent;
    border-radius: 0.5rem 0.5rem 0 0;
    background-color: transparent;
    transition: all 0.2s ease;
    margin-bottom: -1px; /* Overlap with border-bottom */
}

.category-tab.active {
    color: #ffffff;
    border-bottom-color: #00ff88;
    border-color: rgba(0, 255, 136, 0.3);
    border-bottom-width: 2px;
    background-color: rgba(0, 255, 136, 0.05);
    z-index: 1;
}

.category-tab:hover:not(.active) {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
}

/* Post Card Styles */
.category-post-card {
    transition: all 0.3s ease;
    position: relative;
    opacity: 0;
    animation: slideUpFadeIn 0.5s ease-out forwards;
}

.category-post-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 255, 136, 0.1);
}

/* Ensure dropdown can overflow card boundaries */
.category-post-card {
    overflow: visible !important;
}

.category-post-card .flex-1 {
    position: relative;
    z-index: 1;
    overflow: visible !important;
}

/* Ensure share buttons container allows overflow */
.category-post-card > div {
    overflow: visible !important;
}

/* Image Container */
.category-post-image {
    min-height: 200px;
}

@media (min-width: 640px) {
    .category-post-image {
        min-height: auto;
    }
}

/* Line Clamp Utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Top Story Item */
.top-story-item {
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
}

.top-story-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Top Story Number with Background */
.top-story-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.2) 0%, rgba(0, 255, 255, 0.2) 100%);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 0.5rem;
    color: #00ff88;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}

/* Load More Button */
.category-load-more-btn {
    transition: all 0.3s ease;
}

.category-load-more-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments */
@media (max-width: 1023px) {
    .category-tab {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }
}

/* Ensure proper spacing for articles list */
.category-articles-list {
    min-height: 200px;
}

.category-drawer-toggle,
.category-drawer-close {
    display: none;
}

.category-drawer-overlay {
    display: none;
}

body.category-drawer-open {
    overflow: hidden;
}

/* Left Column - Scrollable */
.category-left-column {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    position: relative;
}

/* Tab content transition states */
.category-left-column.tab-transitioning-out {
    animation: tabContentFadeOut 0.3s ease-out forwards;
    pointer-events: none;
}

.category-left-column.tab-transitioning-in {
    animation: tabContentFadeIn 0.3s ease-out forwards;
}

/* Right Sidebar - Sticky */
.category-sidebar-container {
    position: sticky;
    top: 80px;
    align-self: start;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

/* Thin auto-hide scrollbar for left column and sidebar */
.category-left-column::-webkit-scrollbar,
.category-sidebar-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    -webkit-appearance: none;
}

.category-left-column::-webkit-scrollbar-track,
.category-sidebar-container::-webkit-scrollbar-track {
    background: transparent;
    border: none;
}

.category-left-column::-webkit-scrollbar-thumb,
.category-sidebar-container::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 3px;
    transition: background-color 0.3s ease;
    -webkit-appearance: none;
}

/* Show scrollbar on hover */
.category-left-column:hover::-webkit-scrollbar-thumb,
.category-sidebar-container:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.3);
}

.category-left-column::-webkit-scrollbar-thumb:hover,
.category-sidebar-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.5);
}

/* Show scrollbar when scrolling */
.category-left-column.scrolling::-webkit-scrollbar-thumb,
.category-sidebar-container.scrolling::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.3);
}

/* Mobile: Remove sticky and scrollable behavior */
@media (max-width: 1023px) {
    .category-left-column {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .category-drawer-toggle {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        border: 1px solid rgba(168, 85, 247, 0.35);
        border-radius: 999px;
        background: rgba(168, 85, 247, 0.16);
        color: #f8fafc;
        padding: 0.5rem 0.75rem;
        font-size: 0.78rem;
        font-weight: 800;
        cursor: pointer;
    }

    .category-drawer-toggle svg {
        width: 1rem;
        height: 1rem;
    }
    
    .category-sidebar-container {
        position: fixed;
        top: 60px;
        right: 0;
        bottom: 0;
        z-index: 1002;
        width: min(380px, calc(100vw - 1.25rem));
        min-width: 0;
        max-width: min(380px, calc(100vw - 1.25rem));
        max-height: none;
        height: calc(100dvh - 60px);
        overflow-y: auto;
        overflow-x: hidden;
        padding: 4rem 0.85rem 1rem;
        background: rgba(12, 12, 16, 0.98);
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
        transform: translateX(110%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0.25s ease;
    }

    .category-sidebar-container.open {
        transform: translateX(0);
        visibility: visible;
    }

    .category-drawer-close {
        position: absolute;
        top: 0.85rem;
        right: 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.35rem;
        height: 2.35rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        color: #f8fafc;
        cursor: pointer;
    }

    .category-drawer-close svg {
        width: 1.15rem;
        height: 1.15rem;
    }

    .category-drawer-overlay {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1001;
        display: block;
        background: rgba(0, 0, 0, 0.58);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .category-drawer-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Dark theme color utilities */
.bg-dark-bg {
    background-color: #0f0f0f;
}

.bg-dark-card {
    background-color: #181818;
}

.bg-dark-surface {
    background-color: #1a1a1a;
}

.border-neon-green {
    border-color: #00ff88;
}

.text-neon-green {
    color: #00ff88;
}

/* Share Modal Animations */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes modalFadeOut {
    from {
        opacity: 1;
        visibility: visible;
    }
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes modalSlideUp {
    from {
        transform: scale(0.9) translateY(50px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes modalSlideDown {
    from {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    to {
        transform: scale(0.9) translateY(50px);
        opacity: 0;
    }
}

/* Share Modal */
.share-options-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
}

.share-options-modal.showing {
    display: flex;
    animation: modalFadeIn 0.5s ease-out forwards;
}

.share-options-modal.hidden {
    animation: modalFadeOut 0.5s ease-out forwards;
}

.share-modal-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    cursor: pointer;
    transition: background-color 0.5s ease-out, backdrop-filter 0.5s ease-out;
}

.share-options-modal.showing:not(.hidden) .share-modal-overlay {
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}


.share-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.share-modal-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: white;
    margin: 0;
}

.share-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.share-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.share-modal-body {
    padding: 0.5rem;
    max-height: 70vh;
    overflow-y: auto;
}

.share-modal-body .share-option {
    border-radius: 0.5rem;
    margin: 0.25rem 0;
}

/* No More Posts Button Style */
.category-no-more {
    transition: all 0.2s ease;
}

.category-no-more:hover {
    border-color: rgba(0, 255, 136, 0.3);
    background-color: rgba(0, 255, 136, 0.05);
}

/* Scroll detection for auto-show scrollbar */
@keyframes showScrollbar {
    from {
        background-color: transparent;
    }
    to {
        background-color: rgba(156, 163, 175, 0.3);
    }
}

/* Social Share Buttons - Match Homepage Styles */
.engagement-social-share {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.engagement-share-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.engagement-share-row .engagement-share {
    margin-left: auto;
}

.social-share-button {
    border-radius: 25px;
    padding: 0.5rem 0.75rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
}

.social-share-button:hover {
    opacity: 0.9;
}

.social-share-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.social-share-icon svg {
    width: 100%;
    height: 100%;
    color: white;
    fill: white;
}

.social-share-text {
    white-space: nowrap;
    font-weight: 500;
    color: white;
}

/* Facebook Button */
.social-share-facebook {
    background: #2d5f9a;
    border: 1px solid #2d5f9a;
    color: white;
}

.social-share-facebook:hover {
    background: #2d5f9a;
    border-color: #2d5f9a;
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.4);
}

/* Twitter Button - Black with Gray Border */
.social-share-twitter {
    background: #000000;
    border: 1px solid rgba(156, 163, 175, 0.5);
    color: white;
}

.social-share-twitter:hover {
    background: #1a1a1a;
    border-color: rgba(156, 163, 175, 0.7);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Pinterest Button */
.social-share-pinterest {
    background: #BD081C;
    border: 1px solid #BD081C;
    color: white;
}

.social-share-pinterest:hover {
    background: #A5071A;
    border-color: #A5071A;
    box-shadow: 0 4px 12px rgba(189, 8, 28, 0.4);
}

/* Share Container - Match Homepage */
.engagement-share {
    position: relative;
}

/* Share Modal Styles - Same as Homepage */
.share-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.2s ease, backdrop-filter 0.2s ease;
    pointer-events: none;
}

.share-modal-overlay.hidden {
    display: none;
}

.share-modal-overlay.show {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    pointer-events: auto;
}

.share-modal-container {
    background-color: var(--dark-card);
    border: 1px solid var(--border-gray-700);
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    transform: scale(1) translateY(0);
    opacity: 1;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.share-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-gray-700);
}

.share-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-white);
    margin: 0;
}

.share-modal-close {
    background: none;
    border: none;
    color: var(--text-gray-400);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.share-modal-close:hover {
    color: var(--text-white);
}

.share-modal-close svg {
    width: 1.5rem;
    height: 1.5rem;
}

.share-modal-content {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow-y: auto;
}

.share-modal-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.25rem;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 1rem;
    color: var(--text-white) !important;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
    border-radius: 8px;
    opacity: 1;
    transform: translateX(0);
    visibility: visible !important;
}

.share-modal-item:nth-child(1) { animation-delay: 0.05s; }
.share-modal-item:nth-child(2) { animation-delay: 0.1s; }
.share-modal-item:nth-child(3) { animation-delay: 0.15s; }
.share-modal-item:nth-child(4) { animation-delay: 0.2s; }
.share-modal-item:nth-child(5) { animation-delay: 0.25s; }
.share-modal-item:nth-child(6) { animation-delay: 0.3s; }

@keyframes slideInItem {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.share-modal-item:hover {
    background-color: var(--dark-surface);
    transform: translateX(4px);
}

.share-modal-item svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
}

.share-icon-circle {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.share-icon-facebook {
    background-color: #1877f2;
}

.share-icon-pinterest {
    background-color: #bd081c;
}

.share-icon-circle span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    display: block;
}

.share-modal-item > span:not(.share-icon-circle span) {
    flex: 1;
}


/* View Hashtag Component Styles - Using Tailwind CSS, minimal custom CSS */
viralbuzz-view-hashtag,
.viralbuzz-view-hashtag {
    display: block;
    width: 100%;
    min-height: 100vh;
    background-color: #0f0f0f; /* dark-bg from web-app */
    color: #ffffff;
    padding-top: 60px; /* Account for fixed header */
    transition: transform 0.3s ease-in-out;
}

/* Mobile: Push layout - content shifts right when sidebar is open */
@media (max-width: 1023px) {
    viralbuzz-view-hashtag,
    .viralbuzz-view-hashtag {
        transform: translateX(0);
    }
    
    body.sidebar-open viralbuzz-view-hashtag,
    body.sidebar-open .viralbuzz-view-hashtag {
        transform: translateX(16rem);
    }
    
    body.sidebar-closed viralbuzz-view-hashtag,
    body.sidebar-closed .viralbuzz-view-hashtag {
        transform: translateX(0);
    }
}

/* Desktop: content shifts right to make room for sidebar when open */
@media (min-width: 1024px) {
    viralbuzz-view-hashtag,
    .viralbuzz-view-hashtag {
        margin-left: 16rem;
        width: calc(100% - 16rem);
        transform: none;
    }
    
    body.sidebar-closed viralbuzz-view-hashtag,
    body.sidebar-closed .viralbuzz-view-hashtag {
        margin-left: 0;
        width: 100%;
    }
    
    body.sidebar-open viralbuzz-view-hashtag,
    body.sidebar-open .viralbuzz-view-hashtag {
        margin-left: 16rem;
        width: calc(100% - 16rem);
    }
}

.hashtag-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem;
}

@media (min-width: 1024px) {
    .hashtag-page {
        padding: 2rem;
    }
}

/* Header Section */
.hashtag-header-section {
    margin-bottom: 2rem;
}

.hashtag-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #9ca3af;
    overflow-x: auto;
    white-space: nowrap;
    font-family: var(--font-family);
}

.hashtag-breadcrumb-link {
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.2s ease;
    cursor: pointer;
}

.hashtag-breadcrumb-link:hover {
    color: #ffffff;
}

.hashtag-breadcrumb-separator {
    color: #6b7280;
    margin: 0 0.25rem;
}

.hashtag-breadcrumb-current {
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.hashtag-title-section {
    margin-bottom: 2rem;
}

.hashtag-title-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hashtag-page-title {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.2;
    color: #ffffff;
    margin: 0;
}

@media (min-width: 640px) {
    .hashtag-page-title {
        font-size: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .hashtag-page-title {
        font-size: 3rem;
    }
}

.hashtag-page-subtitle {
    font-size: 1rem;
    color: #9ca3af;
    margin: 0;
}

/* Main Content */
.hashtag-main-content {
    width: 100%;
}

.hashtag-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .hashtag-grid {
        flex-direction: row;
    }
}

.hashtag-articles-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Article Card */
.hashtag-article-card {
    background-color: #181818;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #2a2a2a;
}

.hashtag-article-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: #3a3a3a;
}

.hashtag-article-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: #1f1f1f;
}

.hashtag-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hashtag-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 0.875rem;
}

.hashtag-article-content {
    padding: 1.5rem;
}

.hashtag-article-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

.hashtag-article-description {
    font-size: 0.875rem;
    color: #d1d5db;
    margin: 0 0 1rem 0;
    line-height: 1.6;
}

.hashtag-article-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.75rem;
    color: #9ca3af;
}

.hashtag-article-author {
    font-weight: 500;
}

.hashtag-article-date {
    color: #6b7280;
}

/* No Articles */
.hashtag-no-articles {
    text-align: center;
    padding: 3rem 1rem;
    color: #9ca3af;
    font-size: 1.125rem;
}

/* Load More */
.hashtag-load-more-container {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    padding-top: 2rem;
}

.hashtag-load-more-btn {
    cursor: pointer;
}

/* Error State */
.hashtag-error {
    text-align: center;
    padding: 3rem 1rem;
    color: #9ca3af;
}

.hashtag-error h2 {
    color: #ef4444;
    margin-bottom: 1rem;
}

.hashtag-back-link {
    display: inline-block;
    margin-top: 1rem;
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.2s ease;
}

.hashtag-back-link:hover {
    color: #60a5fa;
}

/* Skeleton */
.hashtag-skeleton {
    text-align: center;
    padding: 3rem 1rem;
    color: #9ca3af;
}



/**
 * ViralBuzz Skeleton Loader Styles
 * Animated skeleton loading states
 */

/* Base skeleton animation - shimmer effect */
@keyframes skeleton-loading {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton-base {
    background: linear-gradient(
        90deg,
        var(--skeleton-bg, #1a1a1a) 0%,
        var(--skeleton-shine, #2a2a2a) 50%,
        var(--skeleton-bg, #1a1a1a) 100%
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* Sidebar Category Skeleton */
.skeleton-sidebar {
    padding: 0.5rem 0;
}

.skeleton-sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    margin-bottom: 0.25rem;
}

.skeleton-sidebar-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    flex-shrink: 0;
    background: #2f2f2f;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

.skeleton-sidebar-text {
    height: 16px;
    flex: 1;
    max-width: 120px;
    background: #2f2f2f;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* Post Card Skeleton */
.skeleton-post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 1rem 0;
}

.skeleton-post-card {
    background: var(--card-bg, #1e1e1e);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color, #2a2a2a);
}

.skeleton-post-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(
        90deg,
        var(--skeleton-bg, #1a1a1a) 0%,
        var(--skeleton-shine, #2a2a2a) 50%,
        var(--skeleton-bg, #1a1a1a) 100%
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-post-content {
    padding: 1rem;
}

.skeleton-post-title {
    height: 20px;
    width: 85%;
    margin-bottom: 0.75rem;
    background: linear-gradient(
        90deg,
        var(--skeleton-bg, #1a1a1a) 0%,
        var(--skeleton-shine, #2a2a2a) 50%,
        var(--skeleton-bg, #1a1a1a) 100%
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-post-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.skeleton-post-author {
    height: 14px;
    width: 80px;
    background: linear-gradient(
        90deg,
        var(--skeleton-bg, #1a1a1a) 0%,
        var(--skeleton-shine, #2a2a2a) 50%,
        var(--skeleton-bg, #1a1a1a) 100%
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-post-time {
    height: 14px;
    width: 60px;
    background: linear-gradient(
        90deg,
        var(--skeleton-bg, #1a1a1a) 0%,
        var(--skeleton-shine, #2a2a2a) 50%,
        var(--skeleton-bg, #1a1a1a) 100%
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-post-stats {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.skeleton-stat {
    height: 14px;
    width: 50px;
    background: linear-gradient(
        90deg,
        var(--skeleton-bg, #1a1a1a) 0%,
        var(--skeleton-shine, #2a2a2a) 50%,
        var(--skeleton-bg, #1a1a1a) 100%
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* Article Skeleton */
.skeleton-article {
    background: var(--card-bg, #1e1e1e);
    border-radius: 8px;
    padding: 2rem;
    border: 1px solid var(--border-color, #2a2a2a);
}

.skeleton-article-header {
    margin-bottom: 1.5rem;
}

.skeleton-article-title {
    height: 32px;
    width: 90%;
    margin-bottom: 1rem;
    @extend .skeleton-base;
}

.skeleton-article-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.skeleton-article-author {
    height: 16px;
    width: 120px;
    @extend .skeleton-base;
}

.skeleton-article-time {
    height: 16px;
    width: 100px;
    @extend .skeleton-base;
}

.skeleton-article-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1.5rem 0;
    border-radius: 8px;
    @extend .skeleton-base;
}

.skeleton-article-content {
    margin-top: 1.5rem;
}

.skeleton-line {
    height: 16px;
    width: 100%;
    margin-bottom: 0.75rem;
    @extend .skeleton-base;
}

.skeleton-line.short {
    width: 60%;
}

/* Page Skeleton */
.skeleton-page {
    background: var(--card-bg, #1e1e1e);
    border-radius: 8px;
    padding: 2rem;
    border: 1px solid var(--border-color, #2a2a2a);
}

.skeleton-page-title {
    height: 28px;
    width: 70%;
    margin-bottom: 1.5rem;
    background: linear-gradient(
        90deg,
        var(--skeleton-bg, #1a1a1a) 0%,
        var(--skeleton-shine, #2a2a2a) 50%,
        var(--skeleton-bg, #1a1a1a) 100%
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-page-content {
    margin-top: 1rem;
}

/* Featured Slider Skeleton */
.skeleton-featured-slider {
    display: flex;
    gap: 1rem;
    overflow: hidden;
    padding: 1rem 0;
}

.skeleton-slider-item {
    flex: 0 0 200px;
    height: 300px;
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        var(--skeleton-bg, #1a1a1a) 0%,
        var(--skeleton-shine, #2a2a2a) 50%,
        var(--skeleton-bg, #1a1a1a) 100%
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

/* Default Skeleton */
.skeleton-default {
    padding: 1rem 0;
}

.skeleton-default-item {
    margin-bottom: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .skeleton-post-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 1rem;
    }

    .skeleton-featured-slider {
        gap: 0.75rem;
    }

    .skeleton-slider-item {
        flex: 0 0 150px;
        height: 200px;
    }

    .skeleton-article {
        padding: 1.5rem;
    }
}







/* Auth Modal Styles */
viralbuzz-auth-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
}

.auth-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.auth-modal-overlay.hidden {
    display: none;
}

.auth-modal-container {
    background-color: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    width: 100%;
    max-width: 28rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 101;
    pointer-events: auto;
}

.auth-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: rgba(255, 255, 255, 0.6);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 10;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-modal-close:hover {
    color: white;
}

.auth-modal-close svg {
    width: 1.5rem;
    height: 1.5rem;
}

.auth-modal-view {
    padding: 1.5rem;
}

@media (min-width: 640px) {
    .auth-modal-view {
        padding: 2rem;
    }
}

.auth-modal-view.hidden {
    display: none;
}

.auth-modal-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    margin-bottom: 1.5rem;
    text-align: center;
}

@media (min-width: 640px) {
    .auth-modal-title {
        font-size: 1.875rem;
        margin-bottom: 2rem;
    }
}

.auth-modal-subtitle {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-signup-step {
    margin: -0.75rem 0 1.25rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.auth-signup-step-panel.hidden {
    display: none;
}

.auth-social-buttons.hidden,
.auth-divider.hidden,
.auth-footer-link.hidden,
#showSignupBtn.hidden,
#showSignupFromPasswordBtn.hidden,
#googleLoginBtn.hidden,
#facebookLoginBtn.hidden,
#appleLoginBtn.hidden,
.auth-input-wrapper.hidden {
    display: none !important;
}

@media (min-width: 640px) {
    .auth-modal-subtitle {
        margin-bottom: 2rem;
    }
}

.auth-back-btn {
    color: rgba(255, 255, 255, 0.6);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.3s ease;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.auth-back-btn:hover {
    color: white;
}

.auth-back-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.auth-input-group {
    margin-bottom: 1rem;
}

.auth-input {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: white;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    pointer-events: auto;
    -webkit-user-select: text;
    user-select: text;
}

.auth-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.auth-input:focus {
    outline: none;
    border-color: var(--neon-green);
}

.auth-email-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--dark-surface);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.auth-input-wrapper {
    margin-bottom: 0.75rem;
}

.auth-email-text {
    color: white;
    font-size: 0.875rem;
}

.auth-edit-btn {
    color: #9333ea;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    transition: color 0.3s ease;
}

.auth-edit-btn:hover {
    color: #a855f7;
}

.auth-password-wrapper {
    position: relative;
    margin-bottom: 0.75rem;
}

.auth-password-wrapper:last-child {
    margin-bottom: 0;
}

.auth-password-input {
    padding-right: 3rem;
}

.auth-password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-password-toggle:hover {
    color: white;
}

.auth-eye-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.auth-primary-btn {
    width: 100%;
    background: linear-gradient(to right, #9333ea, #7e22ce);
    color: white;
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 0.75rem;
}

.auth-primary-btn:hover {
    background: linear-gradient(to right, #7e22ce, #6b21a8);
    opacity: 0.9;
}

.auth-link-center {
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-link-btn {
    color: #9333ea;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    transition: color 0.3s ease;
}

.auth-link-btn:hover {
    color: #a855f7;
}

.auth-divider {
    position: relative;
    margin: 1.5rem 0;
}

.auth-divider::before {
    content: '';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.auth-divider-text {
    position: relative;
    display: flex;
    justify-content: center;
    font-size: 0.875rem;
    padding: 0 1rem;
    background-color: var(--dark-card);
    color: rgba(255, 255, 255, 0.6);
}

.auth-social-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.auth-social-btn {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-weight: 500;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.auth-social-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.auth-social-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-footer-text {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

.auth-footer-link {
    color: #9333ea;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: color 0.3s ease;
}

.auth-footer-link:hover {
    color: #a855f7;
}

.auth-form {
    display: flex;
    flex-direction: column;
}

.auth-field-label {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0.35rem;
}

.auth-country-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    color: #fff;
    padding: 0.75rem 0.9rem;
    cursor: pointer;
    text-align: left;
}

.auth-country-panel {
    margin-top: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.auth-country-panel.hidden {
    display: none;
}

.auth-country-search {
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.auth-country-list {
    max-height: 11rem;
    overflow-y: auto;
}

.auth-country-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
    text-align: left;
}

.auth-country-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.auth-country-flag {
    font-size: 1.15rem;
    line-height: 1;
}

.auth-country-name {
    flex: 1;
    font-size: 0.9rem;
}

.auth-country-code {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
}

.auth-country-empty {
    padding: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}




















































/* Search Modal Styles */
viralbuzz-search-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
}

.search-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.search-modal-overlay.hidden {
    display: none;
}

.search-modal-container {
    background-color: var(--dark-bg);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Search Header */
.search-header {
    background-color: var(--dark-card);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.search-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 1rem;
    width: 1.25rem;
    height: 1.25rem;
    color: rgba(255, 255, 255, 0.6);
    pointer-events: none;
    z-index: 1;
}

.search-input {
    width: 100%;
    background-color: var(--dark-surface);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem 0.75rem 3rem;
    color: white;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.search-input:focus {
    outline: none;
    border-color: var(--neon-green);
}

.search-clear-btn {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
    z-index: 1;
}

.search-clear-btn:hover {
    color: white;
}

.search-clear-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.search-close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.5rem;
    transition: color 0.3s ease;
    flex-shrink: 0;
}

.search-close-btn:hover {
    color: white;
}

/* Search Content */
.search-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.search-suggestions {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.search-suggestions.hidden {
    display: none;
}

.search-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.search-clear-history-btn {
    background: none;
    border: none;
    color: #9333ea;
    cursor: pointer;
    font-size: 0.875rem;
    transition: color 0.3s ease;
}

.search-clear-history-btn:hover {
    color: #a855f7;
}

/* Search History */
.search-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.search-no-history {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.875rem;
    padding: 1rem 0;
    text-align: center;
}

.search-history-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: var(--dark-surface);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
}

.search-history-item:hover,
.search-history-item:focus {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    outline: none;
}

.search-history-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.search-history-text {
    flex: 1;
    color: white;
    font-size: 0.875rem;
}

.search-history-remove {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
    flex-shrink: 0;
}

.search-history-remove:hover {
    color: rgba(255, 255, 255, 0.8);
}

.search-history-remove svg {
    width: 1rem;
    height: 1rem;
}

/* Trending Searches */
.search-trending-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.search-trending-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: var(--dark-surface);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    text-align: left;
}

.search-trending-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.search-trending-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #9333ea;
    flex-shrink: 0;
}

.search-trending-item span {
    flex: 1;
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
}

.search-trending-item small {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

/* Search Results */
.search-results {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-results.hidden {
    display: none;
}

.search-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.search-results-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.search-results-count {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.4);
}

.search-filters {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.search-filter-chip {
    flex: 0 0 auto;
    padding: 0.45rem 0.75rem;
    background-color: var(--dark-surface);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.search-filter-chip.active,
.search-filter-chip:hover {
    background-color: rgba(147, 51, 234, 0.22);
    border-color: rgba(147, 51, 234, 0.75);
    color: white;
}

.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--dark-surface);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.search-result-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.search-result-image {
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    object-fit: cover;
    flex-shrink: 0;
}

.search-result-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.search-result-hashtag-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(147, 51, 234, 0.2);
    border-radius: 0.5rem;
    color: #9333ea;
    flex-shrink: 0;
}

.search-result-type-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

.search-result-hashtag-icon svg,
.search-result-type-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-meta {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.search-result-arrow {
    width: 1.25rem;
    height: 1.25rem;
    color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

/* Empty State */
.search-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.search-inline-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
}

.search-empty-state.hidden {
    display: none;
}

.search-empty-icon {
    width: 4rem;
    height: 4rem;
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: 1rem;
}

.search-empty-text {
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.5rem;
}

.search-empty-subtext {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

.search-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 1rem;
}

.search-loading-state.hidden {
    display: none;
}

.search-loading-spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid rgba(255, 255, 255, 0.14);
    border-top-color: var(--neon-green);
    border-radius: 50%;
    animation: search-spin 0.8s linear infinite;
}

@keyframes search-spin {
    to {
        transform: rotate(360deg);
    }
}


































































viralbuzz-notifications {
    display: none;
    margin-top: 60px;
    transition: margin-left 0.3s ease-in-out;
    width: 100%;
}

.live-notification-toast-container {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 9999;
    display: grid;
    gap: 0.75rem;
    width: min(360px, calc(100vw - 2rem));
    pointer-events: none;
}

.live-notification-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(0, 255, 136, 0.4);
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), #181820);
    color: #fff;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    text-align: left;
    animation: live-notification-enter 0.22s ease-out;
}

.live-notification-toast.success {
    border-color: rgba(34, 197, 94, 0.55);
}

.live-notification-toast.warning {
    border-color: rgba(245, 158, 11, 0.55);
}

.live-notification-toast.news,
.live-notification-toast.breaking-news {
    border-color: rgba(59, 130, 246, 0.65);
}

.live-notification-toast.forum,
.live-notification-toast.forum-topic {
    border-color: rgba(168, 85, 247, 0.6);
}

.live-notification-toast.danger,
.live-notification-toast.error {
    border-color: rgba(239, 68, 68, 0.55);
}

.live-notification-toast.leaving {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.live-notification-toast-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(0, 255, 136, 0.14);
    color: #00ff88;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.live-notification-toast.news .live-notification-toast-icon,
.live-notification-toast.breaking-news .live-notification-toast-icon {
    background: rgba(59, 130, 246, 0.14);
    color: #60a5fa;
}

.live-notification-toast.forum .live-notification-toast-icon,
.live-notification-toast.forum-topic .live-notification-toast-icon {
    background: rgba(168, 85, 247, 0.16);
    color: #c084fc;
}

.live-notification-toast-body {
    display: grid;
    gap: 0.2rem;
    flex: 1;
    min-width: 0;
}

.live-notification-toast-body strong {
    font-size: 0.95rem;
    line-height: 1.25;
}

.live-notification-toast-body span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.84rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.live-notification-toast-close {
    color: rgba(255, 255, 255, 0.45);
    font-size: 1.2rem;
    line-height: 1;
}

@keyframes live-notification-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 1024px) {
    viralbuzz-notifications.sidebar-open {
        margin-left: 16rem;
        width: calc(100% - 16rem);
    }

    viralbuzz-notifications.sidebar-closed {
        margin-left: 0;
        width: 100%;
    }
}

.notifications-page {
    min-height: calc(100vh - 60px);
    background: #0f0f13;
    color: #fff;
    padding: 2rem 1rem;
}

.notifications-shell {
    max-width: 920px;
    margin: 0 auto;
}

.notifications-profile-back-row {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    cursor: pointer;
    color: #d1d5db;
}

.notifications-profile-back-row:hover {
    color: #ffffff;
}

.notifications-profile-back-btn {
    width: 3rem;
    height: 3rem;
    border: 1px solid #4b5563;
    border-radius: 0.75rem;
    background: transparent;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.notifications-profile-back-row:hover .notifications-profile-back-btn {
    border-color: #00ff88;
}

.notifications-profile-back-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

.notifications-profile-back-row span {
    font-size: 1.25rem;
    font-weight: 700;
}

.notifications-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    background: #181820;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.notifications-kicker {
    color: #00ff88;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.25rem;
}

.notifications-header h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
}

.notifications-header p {
    margin: 0.35rem 0 0;
    color: rgba(255, 255, 255, 0.65);
}

.notifications-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.notifications-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.notifications-filter-toggle input {
    width: 18px;
    height: 18px;
    accent-color: #00ff88;
}

.notifications-mark-all {
    border: 1px solid rgba(0, 255, 136, 0.55);
    background: rgba(0, 255, 136, 0.08);
    color: #00ff88;
    border-radius: 999px;
    padding: 0.65rem 1rem;
    font-weight: 700;
    cursor: pointer;
}

.notifications-mark-all:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.notifications-list {
    display: grid;
    gap: 0.75rem;
}

.notification-card {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #181820;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.notification-card:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 255, 136, 0.45);
}

.notification-card.unread {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.06), #181820);
}

.notification-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: rgba(59, 130, 246, 0.18);
    color: #60a5fa;
}

.notification-icon.success {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
}

.notification-icon.warning {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
}

.notification-icon.news,
.notification-icon.breaking-news {
    background: rgba(59, 130, 246, 0.18);
    color: #60a5fa;
}

.notification-icon.forum,
.notification-icon.forum-topic {
    background: rgba(168, 85, 247, 0.18);
    color: #c084fc;
}

.notification-icon svg {
    width: 22px;
    height: 22px;
}

.notification-body {
    flex: 1;
    min-width: 0;
}

.notification-topline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.notification-topline h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 750;
}

.notification-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #00ff88;
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.8);
}

.notification-body p {
    margin: 0.35rem 0;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.45;
}

.notification-body span {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.82rem;
}

.notification-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.notification-card-footer strong {
    color: #00ff88;
    font-size: 0.82rem;
}

.notifications-back-btn,
.notifications-content-btn,
.notifications-pagination button {
    border: 1px solid rgba(0, 255, 136, 0.45);
    background: rgba(0, 255, 136, 0.08);
    color: #00ff88;
    border-radius: 999px;
    padding: 0.65rem 1rem;
    font-weight: 800;
    cursor: pointer;
}

.notifications-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.notifications-back-btn svg {
    width: 18px;
    height: 18px;
}

.notifications-pagination button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.notification-detail-card {
    background: #181820;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    padding: 1.5rem;
}

.notification-detail-top {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.notification-detail-top h1 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 850;
}

.notification-detail-top span,
.notification-muted-text {
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.9rem;
}

.notification-detail-message {
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.65;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    padding: 1rem;
    white-space: normal;
}

.notification-detail-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

.notifications-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 700;
}

.notifications-empty {
    text-align: center;
    padding: 4rem 1rem;
    background: #181820;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
}

.notifications-empty .notification-icon {
    margin: 0 auto 1rem;
}

.notifications-empty h2 {
    margin: 0 0 0.4rem;
}

.notifications-empty p {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
}

.notifications-skeleton {
    background: linear-gradient(90deg, #1f1f29, #2a2a35, #1f1f29);
    background-size: 200% 100%;
    border-radius: 1rem;
    animation: notifications-shimmer 1.4s infinite;
}

.notifications-skeleton.title {
    height: 112px;
    margin-bottom: 1rem;
}

.notifications-skeleton.item {
    height: 86px;
    margin-bottom: 0.75rem;
}

@keyframes notifications-shimmer {
    to {
        background-position: -200% 0;
    }
}

@media (max-width: 640px) {
    .notifications-header {
        flex-direction: column;
    }

    .notifications-header-actions,
    .notifications-mark-all,
    .notifications-content-btn {
        width: 100%;
    }

    .notifications-header-actions {
        justify-content: stretch;
    }

    .notification-detail-top,
    .notification-card-footer,
    .notifications-pagination {
        align-items: flex-start;
        flex-direction: column;
    }
}
.maintenance-active {
    overflow: hidden;
}

body.maintenance-active > :not(.maintenance-overlay) {
    visibility: hidden !important;
}

.maintenance-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: radial-gradient(circle at top, rgba(168, 85, 247, 0.24), transparent 34%),
        #050505;
    color: #f9fafb;
}

.maintenance-card {
    width: min(100%, 32rem);
    padding: 2rem;
    border: 1px solid rgba(168, 85, 247, 0.42);
    border-radius: 1.5rem;
    background: rgba(24, 24, 27, 0.94);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    text-align: center;
}

.maintenance-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(168, 85, 247, 0.18);
    color: #c084fc;
    font-size: 1.7rem;
}

.maintenance-card h1 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.7rem, 5vw, 2.25rem);
}

.maintenance-card p {
    margin: 0;
    color: #d1d5db;
    line-height: 1.65;
}

.maintenance-countdown {
    margin-top: 1.5rem;
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.06);
}

.maintenance-countdown span,
.maintenance-window span {
    display: block;
    color: #9ca3af;
    font-size: 0.85rem;
}

.maintenance-countdown strong {
    display: block;
    margin-top: 0.35rem;
    font-size: 1.65rem;
    color: #ffffff;
}

.maintenance-window {
    margin-top: 1rem;
    display: grid;
    gap: 0.35rem;
}
/* Scroll to Top Button Component */

viralbuzz-scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 100;
    pointer-events: none;
}

.scroll-to-top-btn {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: linear-gradient(to right, var(--neon-pink), var(--purple-500), var(--neon-cyan));
    border: none;
    color: var(--text-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(1rem);
    pointer-events: none;
    font-family: var(--font-family);
}

.scroll-to-top-btn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.scroll-to-top-btn:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.scroll-to-top-btn:active {
    transform: translateY(0);
}

.scroll-to-top-btn svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: 2.5;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    viralbuzz-scroll-to-top {
        bottom: 1.5rem;
        right: 1.5rem;
    }

    .scroll-to-top-btn {
        width: 2.75rem;
        height: 2.75rem;
    }

    .scroll-to-top-btn svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* Adjust position when mobile actions bar is visible (quiz/story/list pages) */
@media (max-width: 1023px) {
    /* When quiz/story/list component is active, adjust scroll button position above mobile actions bar */
    body:has(viralbuzz-create-personality-quiz) viralbuzz-scroll-to-top,
    body:has(viralbuzz-create-trivia-quiz) viralbuzz-scroll-to-top,
    body:has(viralbuzz-create-poll) viralbuzz-scroll-to-top,
    body:has(viralbuzz-create-story) viralbuzz-scroll-to-top,
    body:has(viralbuzz-create-list) viralbuzz-scroll-to-top,
    body:has(viralbuzz-create-countdown) viralbuzz-scroll-to-top,
    body:has(viralbuzz-create-open-list) viralbuzz-scroll-to-top,
    body:has(viralbuzz-create-ranked-list) viralbuzz-scroll-to-top,
    body:has(viralbuzz-create-video) viralbuzz-scroll-to-top,
    body:has(viralbuzz-create-audio) viralbuzz-scroll-to-top,
    body:has(viralbuzz-create-image) viralbuzz-scroll-to-top,
    body:has(viralbuzz-create-gif) viralbuzz-scroll-to-top,
    body:has(viralbuzz-create-meme) viralbuzz-scroll-to-top {
        bottom: 7.5rem; /* Above mobile actions bar with proper clearance */
        right: 1rem; /* Slightly adjust right position to avoid button overlap */
    }
}




































































.sun-editor{width:auto;height:auto;box-sizing:border-box;font-family:Helvetica Neue;border:1px solid #dadada;background-color:#fff;color:#000;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sun-editor *{box-sizing:border-box;-webkit-user-drag:none;overflow:visible}.sun-editor-common button,.sun-editor-common input,.sun-editor-common select,.sun-editor-common textarea{font-size:14px;line-height:1.5}.sun-editor-common blockquote,.sun-editor-common body,.sun-editor-common button,.sun-editor-common code,.sun-editor-common dd,.sun-editor-common div,.sun-editor-common dl,.sun-editor-common dt,.sun-editor-common fieldset,.sun-editor-common form,.sun-editor-common h1,.sun-editor-common h2,.sun-editor-common h3,.sun-editor-common h4,.sun-editor-common h5,.sun-editor-common h6,.sun-editor-common input,.sun-editor-common legend,.sun-editor-common li,.sun-editor-common ol,.sun-editor-common p,.sun-editor-common pre,.sun-editor-common select,.sun-editor-common td,.sun-editor-common textarea,.sun-editor-common th,.sun-editor-common ul{margin:0;padding:0;border:0}.sun-editor-common dl,.sun-editor-common li,.sun-editor-common menu,.sun-editor-common ol,.sun-editor-common ul{list-style:none!important}.sun-editor-common hr{margin:6px 0!important}.sun-editor textarea{resize:none;border:0;padding:0}.sun-editor button{border:0;background-color:transparent;touch-action:manipulation;cursor:pointer;outline:none}.sun-editor button,.sun-editor input,.sun-editor select,.sun-editor textarea{vertical-align:middle}.sun-editor button span{display:block;margin:0;padding:0}.sun-editor button .txt{display:block;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sun-editor button *{pointer-events:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden}.sun-editor svg{fill:currentColor}.sun-editor .se-svg,.sun-editor button>svg{width:16px;height:16px;margin:auto;fill:currentColor;display:block;text-align:center;float:none}.sun-editor .close>svg,.sun-editor .se-dialog-close>svg{width:10px;height:10px}.sun-editor .se-btn-select>svg{float:right;width:10px;height:10px}.sun-editor .se-btn-list>.se-list-icon{display:inline-block;width:16px;height:16px;margin:-1px 10px 0 0;vertical-align:middle}.sun-editor .se-line-breaker>button>svg{width:24px;height:24px}.sun-editor button>i:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;font-size:15px;line-height:2}.sun-editor button>[class=se-icon-text]{font-size:20px;line-height:1}.sun-editor .se-arrow,.sun-editor .se-arrow:after{position:absolute;display:block;width:0;height:0;border:11px solid transparent}.sun-editor .se-arrow.se-arrow-up{top:-11px;left:20px;margin-left:-11px;border-top-width:0;border-bottom-color:#dadada}.sun-editor .se-arrow.se-arrow-up:after{top:1px;margin-left:-11px;content:" ";border-top-width:0;border-bottom-color:#fff}.sun-editor .se-toolbar .se-arrow.se-arrow-up:after{border-bottom-color:#fafafa}.sun-editor .se-arrow.se-arrow-down{top:0;left:0;margin-left:-11px;border-bottom-width:0;border-top-color:#dadada}.sun-editor .se-arrow.se-arrow-down:after{top:-12px;margin-left:-11px;content:" ";border-bottom-width:0;border-top-color:#fff}.sun-editor .se-toolbar .se-arrow.se-arrow-down:after{border-top-color:#fafafa}.sun-editor .se-container{position:relative;width:auto;height:auto}.sun-editor button{color:#000}.sun-editor .se-btn{float:left;width:34px;height:34px;border:0;border-radius:4px;margin:1px!important;padding:0;font-size:12px;line-height:27px}.sun-editor .se-btn:enabled:focus,.sun-editor .se-btn:enabled:hover{background-color:#e1e1e1;border-color:#d1d1d1;outline:0 none}.sun-editor .se-btn:enabled:active{background-color:#d1d1d1;border-color:#c1c1c1;-webkit-box-shadow:inset 0 3px 5px #c1c1c1;box-shadow:inset 0 3px 5px #c1c1c1}.sun-editor .se-btn-primary{color:#000;background-color:#c7deff;border:1px solid #80bdff;border-radius:4px}.sun-editor .se-btn-primary:focus,.sun-editor .se-btn-primary:hover{color:#000;background-color:#80bdff;border-color:#3f9dff;outline:0 none}.sun-editor .se-btn-primary:active{color:#fff;background-color:#3f9dff;border-color:#4592ff;-webkit-box-shadow:inset 0 3px 5px #4592ff;box-shadow:inset 0 3px 5px #4592ff}.sun-editor input,.sun-editor select,.sun-editor textarea{color:#000;border:1px solid #ccc;border-radius:4px}.sun-editor input:focus,.sun-editor select:focus,.sun-editor textarea:focus{border:1px solid #80bdff;outline:0;-webkit-box-shadow:0 0 0 .2rem #c7deff;box-shadow:0 0 0 .2rem #c7deff;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.sun-editor .se-btn:enabled.active{color:#4592ff;outline:0 none}.sun-editor .se-btn:enabled.active:focus,.sun-editor .se-btn:enabled.active:hover{background-color:#e1e1e1;border-color:#d1d1d1;outline:0 none}.sun-editor .se-btn:enabled.active:active{background-color:#d1d1d1;border-color:#c1c1c1;-webkit-box-shadow:inset 0 3px 5px #c1c1c1;box-shadow:inset 0 3px 5px #c1c1c1}.sun-editor .se-btn:enabled.on{background-color:#e1e1e1;border-color:#d1d1d1;outline:0 none}.sun-editor .se-btn:enabled.on:focus,.sun-editor .se-btn:enabled.on:hover{background-color:#d1d1d1;border-color:#c1c1c1;outline:0 none}.sun-editor .se-btn:enabled.on:active{background-color:#c1c1c1;border-color:#b1b1b1;-webkit-box-shadow:inset 0 3px 5px #b1b1b1;box-shadow:inset 0 3px 5px #b1b1b1}.sun-editor .se-btn-list:disabled,.sun-editor .se-btn:disabled,.sun-editor button:disabled{cursor:not-allowed;background-color:inherit;color:#bdbdbd}.sun-editor .se-loading-box{position:absolute;display:none;width:100%;height:100%;top:0;left:0;background-color:#fff;opacity:.7;filter:alpha(opacity=70);z-index:2147483647}.sun-editor .se-loading-box .se-loading-effect{position:absolute;display:block;top:50%;left:50%;height:25px;width:25px;border-top:2px solid #07d;border-right:2px solid transparent;border-radius:50%;animation:spinner .8s linear infinite;margin:-25px 0 0 -25px}.sun-editor .se-line-breaker{position:absolute;display:none;width:100%;height:1px;cursor:text;border-top:1px solid #3288ff;z-index:7}.sun-editor .se-line-breaker>button.se-btn{position:relative;display:inline-block;width:30px;height:30px;top:-15px;float:none;left:-50%;background-color:#fff;border:1px solid #0c2240;opacity:.6;cursor:pointer}.sun-editor .se-line-breaker>button.se-btn:hover{opacity:.9;background-color:#fff;border-color:#041b39}.sun-editor .se-line-breaker-component{position:absolute;display:none;width:24px;height:24px;background-color:#fff;border:1px solid #0c2240;opacity:.6;border-radius:4px;cursor:pointer;z-index:7}.sun-editor .se-line-breaker-component:hover{opacity:.9}.sun-editor .se-toolbar{display:block;position:relative;height:auto;width:100%;overflow:visible;padding:0;margin:0;background-color:#fafafa;outline:1px solid #dadada;z-index:5}.sun-editor .se-toolbar-shadow{display:block!important;height:0!important;padding:0!important;margin:0!important;background-color:transparent!important;outline:none!important;border:none!important;z-index:0!important}.sun-editor .se-toolbar-cover{position:absolute;display:none;font-size:36px;width:100%;height:100%;top:0;left:0;background-color:#fefefe;opacity:.5;filter:alpha(opacity=50);cursor:not-allowed;z-index:4}.sun-editor .se-toolbar-separator-vertical{display:inline-block;height:0;width:0;margin:0;vertical-align:top}.sun-editor .se-toolbar.se-toolbar-balloon,.sun-editor .se-toolbar.se-toolbar-inline{display:none;position:absolute;box-shadow:0 3px 9px rgba(0,0,0,.5);-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5)}.sun-editor .se-toolbar.se-toolbar-balloon{z-index:2147483647;width:auto}.sun-editor .se-toolbar.se-toolbar-sticky{position:fixed;top:0}.sun-editor .se-toolbar-sticky-dummy{display:none;position:static;z-index:-1}.sun-editor .se-btn-module{display:inline-block}.sun-editor .se-btn-module-border{border:1px solid #dadada;border-radius:4px;margin-left:1px;margin-right:1px}.sun-editor .se-btn-module-enter{display:block;width:100%;height:0;margin:0;padding:0;background-color:transparent}.sun-editor .se-toolbar-more-layer{margin:0 -3px;background-color:#fafafa}.sun-editor .se-toolbar-more-layer .se-more-layer{display:none;border-top:1px solid #dadada}.sun-editor .se-toolbar-more-layer .se-more-layer .se-more-form{display:inline-block;width:100%;height:auto;padding:4px 3px 0}.sun-editor .se-btn-module .se-btn-more.se-btn-more-text{width:auto;padding:0 4px}.sun-editor .se-btn-module .se-btn-more:focus,.sun-editor .se-btn-module .se-btn-more:hover{color:#000;background-color:#d1d1d1;border-color:#c1c1c1;outline:0 none}.sun-editor .se-btn-module .se-btn-more.on{color:#333;background-color:#d1d1d1;border-color:#c1c1c1;outline:0 none}.sun-editor .se-btn-module .se-btn-more.on:hover{color:#000;background-color:#c1c1c1;border-color:#b1b1b1;outline:0 none}.sun-editor .se-menu-list,.sun-editor .se-menu-list li{float:left;padding:0;margin:0}.sun-editor .se-menu-list li{position:relative}.sun-editor .se-btn-select{width:auto;display:flex;padding:4px 6px}.sun-editor .se-btn-select .txt{flex:auto;text-align:left}.sun-editor .se-btn-select.se-btn-tool-font{width:100px}.sun-editor .se-btn-select.se-btn-tool-format{width:82px}.sun-editor .se-btn-select.se-btn-tool-size{width:78px}.sun-editor .se-btn-tray{position:relative;width:100%;height:auto;padding:4px 3px 0;margin:0}.sun-editor .se-menu-tray{position:absolute;top:0;left:0;width:100%;height:0}.sun-editor .se-submenu{overflow-x:hidden;overflow-y:auto}.sun-editor .se-menu-container{overflow-x:unset;overflow-y:unset}.sun-editor .se-list-layer{display:none;position:absolute;top:0;left:0;height:auto;z-index:5;border:1px solid #bababa;border-radius:4px;padding:6px 0;background-color:#fff;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5);outline:0 none}.sun-editor .se-list-layer .se-list-inner{padding:0;margin:0;overflow-x:initial;overflow-y:initial;overflow:visible}.sun-editor .se-list-layer button{margin:0;width:100%}.sun-editor .se-list-inner ul{width:100%;padding:0}.sun-editor .se-list-inner li>button{min-width:100%;width:max-content}.sun-editor .se-list-inner .se-list-basic li{width:100%}.sun-editor .se-list-inner .se-list-basic li button.active{background-color:#80bdff;border:1px solid #3f9dff;border-left:0;border-right:0}.sun-editor .se-list-inner .se-list-basic li button.active:hover{background-color:#3f9dff;border:1px solid #4592ff;border-left:0;border-right:0}.sun-editor .se-list-inner .se-list-basic li button.active:active{background-color:#4592ff;border:1px solid #407dd1;border-left:0;border-right:0;-webkit-box-shadow:inset 0 3px 5px #407dd1;box-shadow:inset 0 3px 5px #407dd1}.sun-editor .se-list-inner .se-list-checked li button>.se-svg{float:left;padding:6px 6px 0 0}.sun-editor .se-list-inner .se-list-checked li button>.se-svg>svg{display:none}.sun-editor .se-list-inner .se-list-checked li button.se-checked{color:#4592ff}.sun-editor .se-list-inner .se-list-checked li button.se-checked>.se-svg>svg{display:block}.sun-editor .se-btn-list{width:100%;height:auto;min-height:32px;padding:0 14px;cursor:pointer;font-size:12px;line-height:normal;text-indent:0;text-decoration:none;text-align:left}.sun-editor .se-btn-list.default_value{background-color:#f3f3f3;border-top:1px dotted #b1b1b1;border-bottom:1px dotted #b1b1b1}.sun-editor .se-btn-list:focus,.sun-editor .se-btn-list:hover{background-color:#e1e1e1;border-color:#d1d1d1;outline:0 none}.sun-editor .se-btn-list:active{background-color:#d1d1d1;border-color:#c1c1c1;-webkit-box-shadow:inset 0 3px 5px #c1c1c1;box-shadow:inset 0 3px 5px #c1c1c1}.sun-editor .se-list-layer.se-list-font-size{min-width:140px;max-height:300px}.sun-editor .se-list-layer.se-list-font-family{min-width:156px}.sun-editor .se-list-layer.se-list-font-family .default{border-bottom:1px solid #ccc}.sun-editor .se-list-layer.se-list-line{width:125px}.sun-editor .se-list-layer.se-list-line hr{border-width:1px 0 0;height:1px}.sun-editor .se-list-layer.se-list-align .se-list-inner{left:9px}.sun-editor .se-list-layer.se-list-format{min-width:156px}.sun-editor .se-list-layer.se-list-format li{padding:0;width:100%}.sun-editor .se-list-layer.se-list-format ul .se-btn-list{line-height:100%}.sun-editor .se-list-layer.se-list-format ul .se-btn-list[data-value=h1]{height:40px}.sun-editor .se-list-layer.se-list-format ul .se-btn-list[data-value=h2]{height:34px}.sun-editor .se-list-layer.se-list-format ul p{font-size:13px}.sun-editor .se-list-layer.se-list-format ul div{font-size:13px;padding:4px 2px}.sun-editor .se-list-layer.se-list-format ul h1{font-size:2em;font-weight:700;color:#333}.sun-editor .se-list-layer.se-list-format ul h2{font-size:1.5em;font-weight:700;color:#333}.sun-editor .se-list-layer.se-list-format ul h3{font-size:1.17em;font-weight:700;color:#333}.sun-editor .se-list-layer.se-list-format ul h4{font-size:1em;font-weight:700;color:#333}.sun-editor .se-list-layer.se-list-format ul h5{font-size:.83em;font-weight:700;color:#333}.sun-editor .se-list-layer.se-list-format ul h6{font-size:.67em;font-weight:700;color:#333}.sun-editor .se-list-layer.se-list-format ul blockquote{font-size:13px;color:#999;height:22px;margin:0;background-color:transparent;line-height:1.5;border-color:#b1b1b1;padding:0 0 0 7px;border-left:5px #b1b1b1;border-style:solid}.sun-editor .se-list-layer.se-list-format ul pre{font-size:13px;color:#666;padding:4px 11px;margin:0;background-color:#f9f9f9;border:1px solid #e1e1e1;border-radius:4px}.sun-editor .se-selector-table{display:none;position:absolute;top:34px;left:1px;z-index:5;padding:5px 0;float:left;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}.sun-editor .se-selector-table .se-table-size{font-size:18px;padding:0 5px}.sun-editor .se-selector-table .se-table-size-picker{position:absolute!important;z-index:3;font-size:18px;width:10em;height:10em;cursor:pointer}.sun-editor .se-selector-table .se-table-size-highlighted{position:absolute!important;z-index:2;font-size:18px;width:1em;height:1em;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAADJmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4QTZCNzMzN0I3RUYxMUU4ODcwQ0QwMjM1NTgzRTJDNyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4QTZCNzMzNkI3RUYxMUU4ODcwQ0QwMjM1NTgzRTJDNyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0MzYyNEUxRUI3RUUxMUU4ODZGQzgwRjNBODgyNTdFOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0MzYyNEUxRkI3RUUxMUU4ODZGQzgwRjNBODgyNTdFOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pl0yAuwAAABBSURBVDhPY/wPBAxUAGCDGvdBeWSAeicIDTfIXREiQArYeR9hEBOEohyMGkQYjBpEGAxjg6ib+yFMygCVvMbAAABj0hwMTNeKJwAAAABJRU5ErkJggg==") repeat}.sun-editor .se-selector-table .se-table-size-unhighlighted{position:relative!important;z-index:1;font-size:18px;width:10em;height:10em;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIj4+Pjp6ekKlAqjAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKhmnaJzPAAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC") repeat}.sun-editor .se-selector-table .se-table-size-display{padding-left:5px}.sun-editor .se-list-layer.se-table-split{top:36px}.sun-editor .se-list-layer .se-selector-color{display:flex;width:max-content;max-width:270px;height:auto;padding:0;margin:auto}.sun-editor .se-list-layer .se-selector-color .se-color-pallet{width:100%;height:100%;padding:0}.sun-editor .se-list-layer .se-selector-color .se-color-pallet li{display:flex;float:left;position:relative;margin:0}.sun-editor .se-list-layer .se-selector-color .se-color-pallet button{display:block;cursor:default;width:30px;height:30px;text-indent:-9999px}.sun-editor .se-list-layer .se-selector-color .se-color-pallet button.active,.sun-editor .se-list-layer .se-selector-color .se-color-pallet button:focus,.sun-editor .se-list-layer .se-selector-color .se-color-pallet button:hover{border:3px solid #fff}.sun-editor .se-form-group{display:flex;width:100%;min-height:40px;height:auto;padding:4px}.sun-editor .se-form-group input{flex:auto;display:inline-block;width:auto;height:33px;font-size:12px;margin:1px 0;padding:0;border-radius:.25rem;border:1px solid #ccc}.sun-editor .se-form-group button,.sun-editor .se-submenu-form-group button{float:right;width:34px;height:34px;margin:0 2px!important}.sun-editor .se-form-group button.se-btn{border:1px solid #ccc}.sun-editor .se-form-group>div{position:relative}.sun-editor .se-form-group label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700}.sun-editor .se-form-group-label{width:100%;height:auto;padding:0 4px}.sun-editor .se-form-group-label label{font-size:13px;font-weight:700}.sun-editor .se-submenu .se-form-group input{width:auto;height:33px;color:#555}.sun-editor .se-submenu .se-form-group .se-color-input{width:72px;text-transform:uppercase;border:none;border-bottom:2px solid #b1b1b1;outline:none}.sun-editor .se-submenu .se-form-group .se-color-input:focus{border-bottom:3px solid #b1b1b1}.sun-editor .se-wrapper{position:relative!important;width:100%;height:auto;overflow:hidden;z-index:1}.sun-editor .se-wrapper .se-wrapper-inner{width:100%;height:100%;min-height:65px;overflow-y:auto;overflow-x:auto;-webkit-overflow-scrolling:touch;user-select:auto;-o-user-select:auto;-moz-user-select:auto;-khtml-user-select:auto;-webkit-user-select:auto;-ms-user-select:auto}.sun-editor .se-wrapper .se-wrapper-inner:focus{outline:none}.sun-editor .se-wrapper .se-wrapper-code{background-color:#191919;color:#fff;font-size:13px;word-break:break-all;padding:4px;margin:0;resize:none!important}.sun-editor .se-wrapper .se-wrapper-wysiwyg{display:block}.sun-editor .se-wrapper .se-wrapper-code-mirror{font-size:13px}.sun-editor .se-wrapper .se-placeholder{position:absolute;display:none;white-space:nowrap;text-overflow:ellipsis;z-index:1;color:#b1b1b1;font-size:13px;line-height:1.5;top:0;left:0;right:0;overflow:hidden;margin-top:0;padding-top:16px;padding-left:16px;margin-left:0;padding-right:16px;margin-right:0;pointer-events:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden}.sun-editor .se-resizing-bar{display:flex;width:auto;height:auto;min-height:16px;border-top:1px solid #dadada;padding:0 4px;background-color:#fafafa;cursor:ns-resize}.sun-editor .se-resizing-bar.se-resizing-none{cursor:default}.sun-editor .se-resizing-back{position:absolute;display:none;cursor:default;top:0;left:0;width:100%;height:100%;z-index:2147483647}.sun-editor .se-resizing-bar .se-navigation{flex:auto;position:relative;width:auto;height:auto;color:#666;margin:0;padding:0;font-size:10px;line-height:1.5;background:transparent}.sun-editor .se-resizing-bar .se-char-counter-wrapper{flex:none;position:relative;display:block;width:auto;height:auto;margin:0;padding:0;color:#999;font-size:13px;background:transparent}.sun-editor .se-resizing-bar .se-char-counter-wrapper.se-blink{color:#b94a48;animation:blinker .2s linear infinite}.sun-editor .se-resizing-bar .se-char-counter-wrapper .se-char-label{margin-right:4px}.sun-editor .se-dialog{position:absolute;display:none;top:0;left:0;width:100%;height:100%;z-index:2147483647}.sun-editor .se-dialog button,.sun-editor .se-dialog input,.sun-editor .se-dialog label{font-size:14px;line-height:1.5;color:#111;margin:0}.sun-editor .se-dialog .se-dialog-back{background-color:#222;opacity:.5}.sun-editor .se-dialog .se-dialog-back,.sun-editor .se-dialog .se-dialog-inner{position:absolute;width:100%;height:100%;top:0;left:0}.sun-editor .se-dialog .se-dialog-inner .se-dialog-content{position:relative;width:auto;max-width:500px;margin:1.75rem auto;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:4px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5)}@media screen and (max-width:509px){.sun-editor .se-dialog .se-dialog-inner .se-dialog-content{width:100%}}.sun-editor .se-dialog .se-dialog-inner .se-dialog-content label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700}.sun-editor .se-dialog .se-dialog-inner .se-dialog-content .se-btn-primary{display:inline-block;padding:6px 12px;margin:0 0 10px!important;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;border-radius:4px}.sun-editor .se-dialog .se-dialog-inner .se-dialog-header{height:50px;padding:6px 15px;border-bottom:1px solid #e5e5e5}.sun-editor .se-dialog .se-dialog-inner .se-dialog-header .se-dialog-close{float:right;font-weight:700;text-shadow:0 1px 0 #fff;-webkit-appearance:none;filter:alpha(opacity=100);opacity:1}.sun-editor .se-dialog .se-dialog-inner .se-dialog-header .se-modal-title{float:left;font-size:14px;font-weight:700;margin:0;padding:0;line-height:2.5}.sun-editor .se-dialog .se-dialog-inner .se-dialog-body{position:relative;padding:15px 15px 5px}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form{margin-bottom:10px}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form-footer{margin-top:10px;margin-bottom:0}.sun-editor .se-dialog .se-dialog-inner input:disabled{background-color:#f3f3f3}.sun-editor .se-dialog .se-dialog-inner .se-dialog-size-text{width:100%}.sun-editor .se-dialog .se-dialog-inner .se-dialog-size-text .size-h,.sun-editor .se-dialog .se-dialog-inner .se-dialog-size-text .size-w{width:70px;text-align:center}.sun-editor .se-dialog .se-dialog-inner .se-dialog-size-x{margin:0 8px;width:25px;text-align:center}.sun-editor .se-dialog .se-dialog-inner .se-dialog-footer{height:auto;min-height:55px;padding:10px 15px 0;text-align:right;border-top:1px solid #e5e5e5}.sun-editor .se-dialog .se-dialog-inner .se-dialog-footer>div{float:left}.sun-editor .se-dialog .se-dialog-inner .se-dialog-footer>div>label{margin:0 5px 0 0}.sun-editor .se-dialog .se-dialog-inner .se-dialog-btn-radio{margin-left:12px;margin-right:6px}.sun-editor .se-dialog .se-dialog-inner .se-dialog-btn-check{margin-left:12px;margin-right:4px}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form-footer .se-dialog-btn-check{margin-left:0;margin-right:4px}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form-footer label:first-child{margin-right:16px;margin-left:0}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-dialog-form-files{position:relative;display:flex;align-items:center}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-dialog-form-files>input{flex:auto}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-dialog-form-files .se-dialog-files-edge-button{flex:auto;opacity:.8;border:1px solid #ccc}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-dialog-form-files .se-dialog-files-edge-button.se-file-remove>svg{width:8px;height:8px}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-dialog-form-files .se-dialog-files-edge-button:hover{background-color:#f0f0f0;outline:0 none}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-dialog-form-files .se-dialog-files-edge-button:active{background-color:#e9e9e9;-webkit-box-shadow:inset 0 3px 5px #d6d6d6;box-shadow:inset 0 3px 5px #d6d6d6}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-input-select{display:inline-block;width:auto;height:34px;font-size:14px;text-align:center;line-height:1.42857143}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-input-control{display:inline-block;width:70px;height:34px;font-size:14px;text-align:center;line-height:1.42857143}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-input-form{display:block;width:100%;height:34px;font-size:14px;line-height:1.42857143;padding:0 4px}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-input-form.se-input-url{direction:ltr}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-input-form.se-input-url:disabled{text-decoration:line-through;color:#999}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-video-ratio{width:70px;margin-left:4px}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form a{color:#004cff}.sun-editor .se-dialog .se-dialog-inner .se-dialog-btn-revert{border:1px solid #ccc}.sun-editor .se-dialog .se-dialog-inner .se-dialog-btn-revert:hover{background-color:#e1e1e1;border-color:#d1d1d1;outline:0 none}.sun-editor .se-dialog .se-dialog-inner .se-dialog-btn-revert:active{background-color:#d1d1d1;border-color:#c1c1c1;-webkit-box-shadow:inset 0 3px 5px #c1c1c1;box-shadow:inset 0 3px 5px #c1c1c1}.sun-editor .se-dialog-tabs{width:100%;height:25px;border-bottom:1px solid #e5e5e5}.sun-editor .se-dialog-tabs button{background-color:#e5e5e5;border-right:1px solid #e5e5e5;float:left;outline:none;padding:2px 13px;transition:.3s}.sun-editor .se-dialog-tabs button:hover{background-color:#fff}.sun-editor .se-dialog-tabs button.active{background-color:#fff;border-bottom:0}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-input-form.se-math-exp{resize:vertical;height:14em;border:1px solid #ccc;font-size:13px;padding:4px;direction:ltr}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-input-select.se-math-size{width:6em;height:28px;margin-left:1em}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-math-preview{font-size:13px}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-math-preview>span{display:inline-block;-webkit-box-shadow:0 0 0 .1rem #c7deff;box-shadow:0 0 0 .1rem #c7deff}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-math-preview>span *{direction:ltr}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-math-preview>.se-math-katex-error{color:#b94a48;-webkit-box-shadow:0 0 0 .1rem #f2dede;box-shadow:0 0 0 .1rem #f2dede}.sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-math-preview>.se-math-katex-error svg{width:auto;height:30px;color:#b94a48}.sun-editor .se-dialog .se-dialog-inner .se-link-preview{display:block;height:auto;max-height:18px;font-size:13px;font-weight:400;font-family:inherit;color:#666;background-color:transparent;overflow:hidden;text-overflow:ellipsis;word-break:break-all;white-space:pre}.sun-editor .se-dialog .se-dialog-inner .se-anchor-preview-form{width:100%;display:flex;margin-top:4px}.sun-editor .se-dialog .se-dialog-inner .se-anchor-preview-form .se-svg.se-anchor-preview-icon{flex:unset;display:none;line-height:1.5;color:#4592ff}.sun-editor .se-dialog .se-dialog-inner .se-anchor-preview-form .se-link-preview{flex:auto;margin:0}.sun-editor .se-dialog .se-dialog-inner .se-anchor-rel{height:34px}.sun-editor .se-dialog .se-dialog-inner .se-anchor-rel-btn{width:46px;color:#3f9dff}.sun-editor .se-dialog .se-dialog-inner .se-anchor-rel-wrapper{display:flex;line-height:1.5;padding-top:6px}.sun-editor .se-dialog .se-dialog-inner .se-anchor-rel-preview{text-align:left}.sun-editor .se-controller .se-arrow.se-arrow-up{border-bottom-color:rgba(0,0,0,.25)}.sun-editor .se-controller{position:absolute;display:none;overflow:visible;z-index:6;border:1px solid rgba(0,0,0,.25);border-radius:4px;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);line-break:auto}.sun-editor .se-controller .se-btn-group{position:relative;display:flex;vertical-align:middle;padding:2px;top:0;left:0}.sun-editor .se-controller .se-btn-group .se-btn-group-sub{left:50%;min-width:auto;width:max-content;display:none}.sun-editor .se-controller .se-btn-group .se-btn-group-sub button{margin:0;min-width:72px}.sun-editor .se-controller .se-btn-group button{position:relative;min-height:34px;height:auto;border:none;border-radius:4px;margin:1px;padding:5px 10px;font-size:12px;line-height:1.5;display:inline-block;font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation}.sun-editor .se-controller .se-btn-group button:focus:enabled,.sun-editor .se-controller .se-btn-group button:hover:enabled{background-color:#e1e1e1;border-color:#d1d1d1;outline:0 none}.sun-editor .se-controller .se-btn-group button:active:enabled{background-color:#d1d1d1;border-color:#c1c1c1;-webkit-box-shadow:inset 0 3px 5px #c1c1c1;box-shadow:inset 0 3px 5px #c1c1c1}.sun-editor .se-controller .se-btn-group button span{display:block;padding:0;margin:0}.sun-editor .se-controller .se-btn-group button:enabled.active{color:#4592ff;outline:0 none}.sun-editor .se-controller .se-btn-group button:enabled.active:focus,.sun-editor .se-controller .se-btn-group button:enabled.active:hover{background-color:#e1e1e1;border-color:#d1d1d1;outline:0 none}.sun-editor .se-controller .se-btn-group button:enabled.active:active{background-color:#d1d1d1;border-color:#c1c1c1;-webkit-box-shadow:inset 0 3px 5px #c1c1c1;box-shadow:inset 0 3px 5px #c1c1c1}.sun-editor .se-controller .se-btn-group button:enabled.on{background-color:#e1e1e1;border-color:#d1d1d1;outline:0 none}.sun-editor .se-controller .se-btn-group button:enabled.on:focus,.sun-editor .se-controller .se-btn-group button:enabled.on:hover{background-color:#d1d1d1;border-color:#c1c1c1;outline:0 none}.sun-editor .se-controller .se-btn-group button:enabled.on:active{background-color:#c1c1c1;border-color:#b1b1b1;-webkit-box-shadow:inset 0 3px 5px #b1b1b1;box-shadow:inset 0 3px 5px #b1b1b1}.sun-editor .se-controller .se-form-group input{min-width:120px}.sun-editor .se-controller-resizing{margin-top:-50px!important;padding:0;font-size:14px;font-style:normal;font-weight:400;line-height:1.42857143}.sun-editor .se-controller-resizing .se-btn-group .se-btn-group-sub.se-resizing-align-list{width:74px}.sun-editor .se-resizing-container{position:absolute;display:none;outline:1px solid #3f9dff;background-color:transparent}.sun-editor .se-resizing-container .se-modal-resize{position:absolute;display:inline-block;background-color:#3f9dff;opacity:.3}.sun-editor .se-resizing-container .se-resize-dot{position:absolute;top:0;left:0;width:100%;height:100%}.sun-editor .se-resizing-container .se-resize-dot>span{position:absolute;width:7px;height:7px;background-color:#3f9dff;border:1px solid #4592ff}.sun-editor .se-resizing-container .se-resize-dot>span.tl{top:-5px;left:-5px;cursor:nw-resize}.sun-editor .se-resizing-container .se-resize-dot>span.tr{top:-5px;right:-5px;cursor:ne-resize}.sun-editor .se-resizing-container .se-resize-dot>span.bl{bottom:-5px;left:-5px;cursor:sw-resize}.sun-editor .se-resizing-container .se-resize-dot>span.br{right:-5px;bottom:-5px;cursor:se-resize}.sun-editor .se-resizing-container .se-resize-dot>span.lw{left:-7px;bottom:50%;cursor:w-resize}.sun-editor .se-resizing-container .se-resize-dot>span.th{left:50%;top:-7px;cursor:n-resize}.sun-editor .se-resizing-container .se-resize-dot>span.rw{right:-7px;bottom:50%;cursor:e-resize}.sun-editor .se-resizing-container .se-resize-dot>span.bh{right:50%;bottom:-7px;cursor:s-resize}.sun-editor .se-resizing-container .se-resize-display{position:absolute;right:0;bottom:0;padding:5px;margin:5px;font-size:12px;color:#fff;background-color:#333;border-radius:4px}.sun-editor .se-controller-table,.sun-editor .se-controller-table-cell{width:auto}.sun-editor .se-controller-link,.sun-editor .se-controller-table,.sun-editor .se-controller-table-cell{padding:0;font-size:14px;font-style:normal;font-weight:400;line-height:1.42857143}.sun-editor .se-controller-link:after,.sun-editor .se-controller-link:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.sun-editor .se-controller-link .link-content{padding:0;margin:0}.sun-editor .se-controller-link .link-content a{display:inline-block;color:#4592ff;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;margin-left:5px}.sun-editor .se-select-list{position:absolute;top:0;left:0;display:none;width:auto;max-width:100%;background-color:#fff;padding:0;margin:0;border:1px solid #bababa;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5);outline:0 none}.sun-editor .se-select-list .se-select-item{line-height:28px;min-height:28px;font-size:13px;padding:0 5px;margin:2px 0;cursor:pointer}.sun-editor .se-select-list.__se_select-menu-mouse-move .se-select-item:hover,.sun-editor .se-select-list:not(.__se_select-menu-mouse-move) .se-select-item.active{background-color:#e1e1e1}.sun-editor .se-dialog-form-files .se-select-list{width:100%}.sun-editor .se-file-browser{position:absolute;display:none;top:0;left:0;width:100%;height:100%;z-index:2147483647}.sun-editor .se-file-browser button,.sun-editor .se-file-browser input,.sun-editor .se-file-browser label{font-size:14px;line-height:1.5;color:#111;margin:0}.sun-editor .se-file-browser .se-file-browser-back{background-color:#222;opacity:.5}.sun-editor .se-file-browser .se-file-browser-back,.sun-editor .se-file-browser .se-file-browser-inner{position:absolute;display:block;width:100%;height:100%;top:0;left:0}.sun-editor .se-file-browser .se-file-browser-inner .se-file-browser-content{position:relative;width:960px;max-width:100%;margin:20px auto;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:4px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5)}.sun-editor .se-file-browser .se-file-browser-header{height:auto;min-height:50px;padding:6px 15px;border-bottom:1px solid #e5e5e5}.sun-editor .se-file-browser .se-file-browser-header .se-file-browser-close{float:right;font-weight:700;text-shadow:0 1px 0 #fff;-webkit-appearance:none;filter:alpha(opacity=100);opacity:1}.sun-editor .se-file-browser .se-file-browser-header .se-file-browser-close>svg{width:12px;height:12px}.sun-editor .se-file-browser .se-file-browser-header .se-file-browser-title{font-size:16px;font-weight:700;margin:0;padding:0;line-height:2.2}.sun-editor .se-file-browser .se-file-browser-tags{display:block;width:100%;padding:0;text-align:left;margin:0 -15px}.sun-editor .se-file-browser .se-file-browser-tags a{display:inline-block;background-color:#f5f5f5;padding:6px 12px;margin:8px 0 8px 8px;color:#333;text-decoration:none;border-radius:32px;-moz-border-radius:32px;-webkit-border-radius:32px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;cursor:pointer}.sun-editor .se-file-browser .se-file-browser-tags a:hover{background-color:#e1e1e1}.sun-editor .se-file-browser .se-file-browser-tags a:active{background-color:#d1d1d1}.sun-editor .se-file-browser .se-file-browser-tags a.on{background-color:#ebf3fe;color:#4592ff}.sun-editor .se-file-browser .se-file-browser-tags a.on:hover{background-color:#d8e8fe}.sun-editor .se-file-browser .se-file-browser-tags a.on:active{background-color:#c7deff}.sun-editor .se-file-browser .se-file-browser-body{position:relative;height:auto;min-height:350px;padding:20px;overflow-y:auto}.sun-editor .se-file-browser .se-file-browser-body .se-file-browser-list{position:relative;width:100%}@media screen and (max-width:992px){.sun-editor .se-file-browser .se-file-browser-inner .se-file-browser-content{width:748px}}@media screen and (max-width:768px){.sun-editor .se-file-browser .se-file-browser-inner .se-file-browser-content{width:600px}}.sun-editor .se-file-browser .se-file-browser-list .se-file-item-column{position:relative;display:block;height:auto;float:left}.sun-editor .se-file-browser .se-file-browser-list.se-image-list .se-file-item-column{width:calc(25% - 20px);margin:0 10px}@media screen and (max-width:992px){.sun-editor .se-file-browser .se-file-browser-list.se-image-list .se-file-item-column{width:calc(33% - 20px)}}@media screen and (max-width:768px){.sun-editor .se-file-browser .se-file-browser-list.se-image-list .se-file-item-column{width:calc(50% - 20px)}}.sun-editor .se-file-browser .se-file-browser-list.se-image-list .se-file-item-img{position:relative;display:block;cursor:pointer;width:100%;height:auto;border-radius:4px;outline:0;margin:10px 0}.sun-editor .se-file-browser .se-file-browser-list.se-image-list .se-file-item-img:hover{opacity:.8;-webkit-box-shadow:0 0 0 .2rem #3288ff;box-shadow:0 0 0 .2rem #3288ff}.sun-editor .se-file-browser .se-file-browser-list.se-image-list .se-file-item-img>img{position:relative;display:block;width:100%;border-radius:4px;outline:0;height:auto}.sun-editor .se-file-browser .se-file-browser-list.se-image-list .se-file-item-img>.se-file-img-name{position:absolute;z-index:1;font-size:13px;color:#fff;left:0;bottom:0;padding:5px 10px;background-color:transparent;width:100%;height:30px;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.sun-editor .se-file-browser .se-file-browser-list.se-image-list .se-file-item-img>.se-file-img-name.se-file-name-back{background-color:#333;opacity:.6}.sun-editor .se-notice{position:absolute;top:0;display:none;z-index:7;width:100%;height:auto;word-break:break-all;font-size:13px;color:#b94a48;background-color:#f2dede;padding:15px;margin:0;border:1px solid #eed3d7;user-select:auto;-o-user-select:auto;-moz-user-select:auto;-khtml-user-select:auto;-webkit-user-select:auto;-ms-user-select:auto}.sun-editor .se-notice button{float:right;padding:7px}.sun-editor .se-tooltip{position:relative;overflow:visible}.sun-editor .se-tooltip .se-tooltip-inner{visibility:hidden;position:absolute;display:block;width:auto;height:auto;top:120%;left:50%;background:transparent;opacity:0;z-index:1;line-height:1.5;transition:opacity .5s;margin:0;padding:0;bottom:auto;float:none;pointer-events:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden}.sun-editor .se-tooltip .se-tooltip-inner .se-tooltip-text{position:relative;display:inline-block;width:auto;height:auto;left:-50%;font-size:.9em;margin:0;padding:4px 6px;border-radius:2px;background-color:#333;color:#fff;text-align:center;line-height:unset;white-space:nowrap;cursor:auto}.sun-editor .se-tooltip .se-tooltip-inner .se-tooltip-text:after{content:"";position:absolute;bottom:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-bottom-color:#333}.sun-editor .se-tooltip:hover .se-tooltip-inner{visibility:visible;opacity:1}.sun-editor .se-tooltip .se-tooltip-inner .se-tooltip-text .se-shortcut{display:block!important}.sun-editor .se-tooltip .se-tooltip-inner .se-tooltip-text .se-shortcut>.se-shortcut-key{display:inline;font-weight:700}.sun-editor.se-rtl .se-btn-tray{direction:rtl}.sun-editor.se-rtl .se-btn-select svg{margin:auto 1px}.sun-editor.se-rtl .se-btn-select .txt{flex:auto;text-align:right;direction:rtl}.sun-editor.se-rtl .se-btn-list{text-align:right}.sun-editor.se-rtl .se-btn-list>.se-list-icon{margin:-1px 0 0 10px}.sun-editor.se-rtl .se-menu-list:not(.se-menu-dir-fix),.sun-editor.se-rtl .se-menu-list:not(.se-menu-dir-fix) li{float:right}.sun-editor.se-rtl .se-list-layer *{direction:rtl}.sun-editor.se-rtl .se-list-layer.se-list-format ul blockquote{padding:0 7px 0 0;border-right-width:5px;border-left-width:0}.sun-editor.se-rtl .se-list-layer .se-selector-color .se-color-pallet li{float:right}.sun-editor.se-rtl .se-list-inner .se-list-checked li button>.se-svg{float:right;padding:6px 0 0 6px}.sun-editor.se-rtl .se-tooltip .se-tooltip-inner .se-tooltip-text,.sun-editor.se-rtl .se-wrapper .se-placeholder{direction:rtl}.sun-editor.se-rtl .se-tooltip .se-tooltip-inner .se-tooltip-text .se-shortcut{direction:ltr}.sun-editor.se-rtl .se-dialog *{direction:rtl}.sun-editor.se-rtl .se-dialog .se-dialog-inner .se-dialog-form .se-video-ratio{margin-left:0;margin-right:4px}.sun-editor.se-rtl .se-dialog .se-dialog-inner .se-dialog-header .se-dialog-close{float:left}.sun-editor.se-rtl .se-dialog-tabs button,.sun-editor.se-rtl .se-dialog .se-dialog-inner .se-dialog-header .se-modal-title{float:right}.sun-editor.se-rtl .se-dialog .se-dialog-inner .se-dialog-size-text{padding-right:34px}.sun-editor.se-rtl .se-dialog .se-dialog-inner .se-dialog-footer .se-btn-primary{float:left}.sun-editor.se-rtl .se-dialog .se-dialog-inner .se-dialog-footer>div{float:right}.sun-editor.se-rtl .se-dialog .se-dialog-inner .se-dialog-footer>div>label{margin:0 0 0 5px}.sun-editor.se-rtl .se-dialog .se-dialog-inner .se-dialog-form-footer label:first-child{margin-left:16px;margin-right:0}.sun-editor.se-rtl .se-dialog .se-dialog-inner .se-anchor-rel-preview{margin-left:4px;text-align:right}.sun-editor.se-rtl .se-dialog .se-dialog-inner .se-anchor-rel-btn{float:right}.sun-editor.se-rtl .se-file-browser *{direction:rtl}.sun-editor.se-rtl .se-file-browser .se-file-browser-tags{text-align:right}.sun-editor.se-rtl .se-file-browser .se-file-browser-tags a{margin:8px 8px 0}.sun-editor.se-rtl .se-file-browser .se-file-browser-header .se-file-browser-close{float:left}.sun-editor.se-rtl .se-controller .se-btn-group,.sun-editor.se-rtl .se-resizing-container .se-resize-display{direction:rtl}.sun-editor .se-btn-module-border.module-float-left{float:left}.sun-editor .se-btn-module-border.module-float-right{float:right}.sun-editor .se-error{color:#d9534f}.sun-editor input.se-error:focus,select.se-error:focus,textarea.se-error:focus{border:1px solid #f2dede;outline:0;-webkit-box-shadow:0 0 0 .2rem #eed3d7;box-shadow:0 0 0 .2rem #eed3d7;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.sun-editor hr.__se__solid{border-style:solid none none}.sun-editor hr.__se__dotted{border-style:dotted none none}.sun-editor hr.__se__dashed{border-style:dashed none none}@keyframes blinker{50%{opacity:0}}@keyframes spinner{to{transform:rotate(361deg)}}.sun-editor-editable{font-family:Helvetica Neue;font-size:13px;color:#333;background-color:#fff;line-height:1.5;word-break:normal;word-wrap:break-word;padding:16px;margin:0}.sun-editor-editable *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-family:inherit;font-size:inherit;color:inherit}.sun-editor-editable.se-rtl *{direction:rtl}.sun-editor-editable .se-component>figure{direction:ltr}.sun-editor-editable audio,.sun-editor-editable figcaption,.sun-editor-editable figure,.sun-editor-editable iframe,.sun-editor-editable img,.sun-editor-editable td,.sun-editor-editable th,.sun-editor-editable video{position:relative}.sun-editor-editable span{display:inline;vertical-align:baseline;margin:0;padding:0}.sun-editor-editable span.katex{display:inline-block}.sun-editor-editable span.katex *{direction:ltr}.sun-editor-editable a{color:#004cff;text-decoration:none}.sun-editor-editable span[style~="color:"] a{color:inherit}.sun-editor-editable a:focus,.sun-editor-editable a:hover{cursor:pointer;color:#0093ff;text-decoration:underline}.sun-editor-editable a.on{color:#0093ff;background-color:#e8f7ff}.sun-editor-editable pre{display:block;padding:8px;margin:0 0 10px;font-family:monospace;color:#666;line-height:1.45;background-color:#f9f9f9;border:1px solid #e1e1e1;border-radius:2px;white-space:pre-wrap!important;word-wrap:break-word;overflow:visible}.sun-editor-editable ol{list-style-type:decimal}.sun-editor-editable ol,.sun-editor-editable ul{list-style-position:outside;display:block;margin-block-start:1em;margin-block-end:1em;margin-inline-start:0;margin-inline-end:0;padding-inline-start:40px}.sun-editor-editable ul{list-style-type:disc}.sun-editor-editable li{display:list-item;text-align:-webkit-match-parent;margin-bottom:5px}.sun-editor-editable ol ol,.sun-editor-editable ol ul,.sun-editor-editable ul ol,.sun-editor-editable ul ul{margin:0}.sun-editor-editable ol ol,.sun-editor-editable ul ol{list-style-type:lower-alpha}.sun-editor-editable ol ol ol,.sun-editor-editable ul ol ol,.sun-editor-editable ul ul ol{list-style-type:upper-roman}.sun-editor-editable ol ul,.sun-editor-editable ul ul{list-style-type:circle}.sun-editor-editable ol ol ul,.sun-editor-editable ol ul ul,.sun-editor-editable ul ul ul{list-style-type:square}.sun-editor-editable sub,.sun-editor-editable sup{font-size:75%;line-height:0}.sun-editor-editable sub{vertical-align:sub}.sun-editor-editable sup{vertical-align:super}.sun-editor-editable p{display:block;margin:0 0 10px}.sun-editor-editable div{display:block;margin:0;padding:0}.sun-editor-editable blockquote{display:block;font-family:inherit;font-size:inherit;color:#999;margin-block-start:1em;margin-block-end:1em;margin-inline-start:0;margin-inline-end:0;padding:0 5px 0 20px;border:solid #b1b1b1;border-width:0 0 0 5px}.sun-editor-editable blockquote blockquote{border-color:#c1c1c1}.sun-editor-editable blockquote blockquote blockquote{border-color:#d1d1d1}.sun-editor-editable blockquote blockquote blockquote blockquote{border-color:#e1e1e1}.sun-editor-editable.se-rtl blockquote{padding-left:5px;padding-right:20px;border-left-width:0;border-right-width:5px}.sun-editor-editable h1{font-size:2em;margin-block-start:.67em;margin-block-end:.67em}.sun-editor-editable h1,.sun-editor-editable h2{display:block;margin-inline-start:0;margin-inline-end:0;font-weight:700}.sun-editor-editable h2{font-size:1.5em;margin-block-start:.83em;margin-block-end:.83em}.sun-editor-editable h3{font-size:1.17em;margin-block-start:1em;margin-block-end:1em}.sun-editor-editable h3,.sun-editor-editable h4{display:block;margin-inline-start:0;margin-inline-end:0;font-weight:700}.sun-editor-editable h4{font-size:1em;margin-block-start:1.33em;margin-block-end:1.33em}.sun-editor-editable h5{font-size:.83em;margin-block-start:1.67em;margin-block-end:1.67em}.sun-editor-editable h5,.sun-editor-editable h6{display:block;margin-inline-start:0;margin-inline-end:0;font-weight:700}.sun-editor-editable h6{font-size:.67em;margin-block-start:2.33em;margin-block-end:2.33em}.sun-editor-editable hr{display:flex;border-width:1px 0 0;border-color:#000;border-image:initial;height:1px}.sun-editor-editable hr.__se__solid{border-style:solid none none}.sun-editor-editable hr.__se__dotted{border-style:dotted none none}.sun-editor-editable hr.__se__dashed{border-style:dashed none none}.sun-editor-editable hr.on{border-color:#4592ff;-webkit-box-shadow:0 0 0 .1rem #c7deff;box-shadow:0 0 0 .1rem #c7deff}.sun-editor-editable table{display:table;table-layout:auto!important;border:1px solid #ccc;width:100%;max-width:100%;margin:0 0 10px;background-color:transparent;border-spacing:0;border-collapse:collapse}.sun-editor-editable.se-rtl table{margin:0 0 10px auto}.sun-editor-editable table thead{border-bottom:2px solid #333}.sun-editor-editable table tr{border:1px solid #efefef}.sun-editor-editable table th{background-color:#f3f3f3}.sun-editor-editable table td,.sun-editor-editable table th{border:1px solid #e1e1e1;padding:.4em;background-clip:padding-box}.sun-editor-editable table.se-table-size-auto{width:auto!important}.sun-editor-editable table.se-table-size-100{width:100%!important}.sun-editor-editable table.se-table-layout-auto{table-layout:auto!important}.sun-editor-editable table.se-table-layout-fixed{table-layout:fixed!important}.sun-editor-editable table td.se-table-selected-cell,.sun-editor-editable table th.se-table-selected-cell{outline:1px double #4592ff}.sun-editor-editable.se-disabled *{user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sun-editor-editable .se-component{display:flex;padding:1px;margin:0 0 10px}.sun-editor-editable[contenteditable=true] .se-component{outline:1px dashed #e1e1e1}.sun-editor-editable[contenteditable=true] .se-component.se-component-copy{-webkit-box-shadow:0 0 0 .2rem #80bdff;box-shadow:0 0 0 .2rem #3f9dff;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.sun-editor-editable .__se__float-left{float:left;margin-right:4px}.sun-editor-editable .__se__float-right{float:right;margin-left:4px}.sun-editor-editable .__se__float-center{float:center}.sun-editor-editable .__se__float-none{float:none}.sun-editor-editable audio,.sun-editor-editable iframe,.sun-editor-editable img,.sun-editor-editable video{display:block;margin:0;padding:0;width:auto;height:auto;max-width:100%}.sun-editor-editable[contenteditable=true]:not(.se-read-only) figure:after{position:absolute;content:"";z-index:1;top:0;left:0;right:0;bottom:0;cursor:default;display:block;background:transparent}.sun-editor-editable[contenteditable=true] figure a,.sun-editor-editable[contenteditable=true] figure iframe,.sun-editor-editable[contenteditable=true] figure img,.sun-editor-editable[contenteditable=true] figure video{z-index:0}.sun-editor-editable[contenteditable=true] figure figcaption{display:block;z-index:2}.sun-editor-editable[contenteditable=true] figure figcaption:focus{border-color:#80bdff;outline:0;-webkit-box-shadow:0 0 0 .2rem #c7deff;box-shadow:0 0 0 .2rem #c7deff}.sun-editor-editable .se-image-container,.sun-editor-editable .se-video-container{width:auto;height:auto;max-width:100%}.sun-editor-editable figure{display:block;outline:none;padding:0;margin:0}.sun-editor-editable .__se__float-center figure,.sun-editor-editable .__se__float-left figure,.sun-editor-editable .__se__float-right figure{margin:auto!important}.sun-editor-editable figure figcaption{padding:1em .5em;margin:0;background-color:#f9f9f9;outline:none}.sun-editor-editable figure figcaption p{line-height:2;margin:0}.sun-editor-editable .se-image-container a img{padding:1px;margin:1px;outline:1px solid #4592ff}.sun-editor-editable .se-video-container iframe,.sun-editor-editable .se-video-container video{outline:1px solid #9e9e9e;position:absolute;top:0;left:0;border:0;width:100%;height:100%}.sun-editor-editable .se-video-container figure{left:0;width:100%;max-width:100%}.sun-editor-editable audio{width:300px;height:54px}.sun-editor-editable audio.active{outline:2px solid #80bdff}.sun-editor-editable.se-show-block div,.sun-editor-editable.se-show-block h1,.sun-editor-editable.se-show-block h2,.sun-editor-editable.se-show-block h3,.sun-editor-editable.se-show-block h4,.sun-editor-editable.se-show-block h5,.sun-editor-editable.se-show-block h6,.sun-editor-editable.se-show-block li,.sun-editor-editable.se-show-block ol,.sun-editor-editable.se-show-block p,.sun-editor-editable.se-show-block pre,.sun-editor-editable.se-show-block ul{border:1px dashed #3f9dff!important;padding:14px 8px 8px!important}.sun-editor-editable.se-show-block ol,.sun-editor-editable.se-show-block ul{border:1px dashed #d539ff!important}.sun-editor-editable.se-show-block pre{border:1px dashed #27c022!important}.se-show-block p{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAPAQMAAAAF7dc0AAAABlBMVEWAgID////n1o2sAAAAAnRSTlP/AOW3MEoAAAAaSURBVAjXY/j/gwGCPvxg+F4BQiAGDP1HQQByxxw0gqOzIwAAAABJRU5ErkJggg==") no-repeat}.se-show-block div{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAPAQMAAAAxlBYoAAAABlBMVEWAgID////n1o2sAAAAAnRSTlP/AOW3MEoAAAAmSURBVAjXY/j//wcDDH+8XsHwDYi/hwNx1A8w/nYLKH4XoQYJAwCXnSgcl2MOPgAAAABJRU5ErkJggg==") no-repeat}.se-show-block h1{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAPAQMAAAA4f7ZSAAAABlBMVEWAgID////n1o2sAAAAAnRSTlP/AOW3MEoAAAAfSURBVAjXY/j/v4EBhr+9B+LzEPrDeygfhI8j1CBhAEhmJGY4Rf6uAAAAAElFTkSuQmCC") no-repeat}.se-show-block h2{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAPAQMAAAA4f7ZSAAAABlBMVEWAgID////n1o2sAAAAAnRSTlP/AOW3MEoAAAAmSURBVAjXY/j/v4EBhr+dB+LtQPy9geEDEH97D8T3gbgdoQYJAwA51iPuD2haEAAAAABJRU5ErkJggg==") no-repeat}.se-show-block h3{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAPAQMAAAA4f7ZSAAAABlBMVEWAgID////n1o2sAAAAAnRSTlP/AOW3MEoAAAAiSURBVAjXY/j/v4EBhr+dB+LtQPy9geHDeQgN5p9HqEHCADeWI+69VG2MAAAAAElFTkSuQmCC") no-repeat}.se-show-block h4{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPAQMAAADTSA1RAAAABlBMVEWAgID////n1o2sAAAAAnRSTlP/AOW3MEoAAAAiSURBVAjXY/j//wADDH97DsTXIfjDdiDdDMTfIRhZHRQDAKJOJ6L+K3y7AAAAAElFTkSuQmCC") no-repeat}.se-show-block h5{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAPAQMAAAA4f7ZSAAAABlBMVEWAgID////n1o2sAAAAAnRSTlP/AOW3MEoAAAAlSURBVAjXY/j/v4EBhr+1A/F+IO5vYPiwHUh/B2IQfR6hBgkDABlWIy5uM+9GAAAAAElFTkSuQmCC") no-repeat}.se-show-block h6{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAPAQMAAAA4f7ZSAAAABlBMVEWAgID////n1o2sAAAAAnRSTlP/AOW3MEoAAAAiSURBVAjXY/j/v4EBhr+dB+LtQLy/geFDP5S9HSKOrA6KAR9GIza1ptJnAAAAAElFTkSuQmCC") no-repeat}.se-show-block li{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAA7SURBVDhPYxgFcNDQ0PAfykQBIHEYhgoRB/BpwCfHBKWpBkaggYxQGgOgBzyQD1aLLA4TGwWDGjAwAACR3RcEU9Ui+wAAAABJRU5ErkJggg==") no-repeat}.se-show-block ol{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABHSURBVDhPYxgFcNDQ0PAfhKFcFIBLHCdA1oBNM0kGEmMAPgOZoDTVANUNxAqQvURMECADRiiNAWCagDSGGhyW4DRrMAEGBgAu0SX6WpGgjAAAAABJRU5ErkJggg==") no-repeat}.se-show-block ul{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAA1SURBVDhPYxgFDA0NDf+hTBSALI5LDQgwQWmqgVEDKQcsUBoF4ItFGEBXA+QzQpmDGjAwAAA8DQ4Lni6gdAAAAABJRU5ErkJggg==") no-repeat}.sun-editor-editable .__se__p-bordered,.sun-editor .__se__p-bordered{border-top:1px solid #b1b1b1;border-bottom:1px solid #b1b1b1;padding:4px 0}.sun-editor-editable .__se__p-spaced,.sun-editor .__se__p-spaced{letter-spacing:1px}.sun-editor-editable .__se__p-neon,.sun-editor .__se__p-neon{font-weight:200;font-style:italic;background:#000;color:#fff;padding:6px 4px;border:2px solid #fff;border-radius:6px;text-transform:uppercase;animation:neonFlicker 1.5s infinite alternate}@keyframes neonFlicker{0%,19%,21%,23%,25%,54%,56%,to{text-shadow:-.2rem -.2rem 1rem #fff,.2rem .2rem 1rem #fff,0 0 2px #f40,0 0 4px #f40,0 0 6px #f40,0 0 8px #f40,0 0 10px #f40;box-shadow:0 0 .5px #fff,inset 0 0 .5px #fff,0 0 2px #08f,inset 0 0 2px #08f,0 0 4px #08f,inset 0 0 4px #08f}20%,24%,55%{text-shadow:none;box-shadow:none}}.sun-editor-editable .__se__t-shadow,.sun-editor .__se__t-shadow{text-shadow:-.2rem -.2rem 1rem #fff,.2rem .2rem 1rem #fff,0 0 .2rem #999,0 0 .4rem #888,0 0 .6rem #777,0 0 .8rem #666,0 0 1rem #555}.sun-editor-editable .__se__t-code,.sun-editor .__se__t-code{font-family:monospace;color:#666;background-color:rgba(27,31,35,.05);border-radius:6px;padding:.2em .4em}
/* ==================================================================
   ViralBuzz SunEditor Customizations — IMAGE FIX + DARK THEME
   All SunEditor CSS edits live here. No JS injection needed.

   OVERFLOW ROOT CAUSES:
   1. SunEditor CSS: .sun-editor *{overflow:visible} — overridden below
   2. contentEditable divs ignore max-height for height computation
      → fix by capping images directly (max-height:360px) and using
        high-specificity selectors to beat the wildcard override
   3. SunEditor inserts <figure style="width:Xpx"> with inline px width
      → max-width:100%!important beats inline (no !important on inline)
   ================================================================== */

/* --- 1. IMAGE OVERFLOW FIX ---
   Use .sun-editor prefix (specificity 0,2,0,0+) to beat .sun-editor *
   which has specificity 0,1,0,0. Both override inline styles without
   !important. Our !important rules also beat the non-!important wildcard. */
.sun-editor .se-wrapper .se-contents_wrap{overflow-x:hidden!important;}
.sun-editor .se-wrapper .se-contents_wrap .se-contents{width:100%!important;max-width:100%!important;overflow-x:hidden!important;box-sizing:border-box!important;}
.sun-editor .se-wrapper .se-contents_wrap .se-contents .se-image-container,
.sun-editor .se-wrapper .se-contents_wrap .se-contents figure{max-width:100%!important;box-sizing:border-box!important;display:block!important;margin:0!important;}
/* Cap image size but allow resize: only max-width/max-height so user resize works; do not force width/height to auto */
.sun-editor .se-wrapper .se-contents_wrap .se-contents img{max-width:100%!important;max-height:360px!important;display:block!important;object-fit:contain;}

/* Clip scroll area so wide images don't create horizontal scroll (default has overflow-x:auto) */
.sun-editor .se-wrapper .se-wrapper-inner{overflow-x:hidden!important;max-width:100%!important;}

/* Poll editor root must not grow with content */
viralbuzz-create-poll .sun-editor{max-width:100%!important;overflow-x:hidden!important;}
/* Resize handles must be clickable and above figure overlay */
viralbuzz-create-poll .sun-editor .se-resizing-container,.viralbuzz-create-poll .sun-editor .se-resizing-container *{pointer-events:auto!important;z-index:10!important;}

/* --- 2. DARK THEME — editor elements ---
   Scoped to viralbuzz-create-poll so only poll editors get dark theme.
   .sun-editor is a child of viralbuzz-create-poll in the DOM. */
viralbuzz-create-poll .sun-editor{border-color:#374151!important;background-color:#181818!important;}
viralbuzz-create-poll .sun-editor .se-toolbar{background-color:#181818!important;border-color:#374151!important;outline:none!important;}
viralbuzz-create-poll .sun-editor .se-btn{color:#e5e7eb!important;}
viralbuzz-create-poll .sun-editor button:hover,viralbuzz-create-poll .sun-editor button:focus{background-color:#374151!important;outline:none!important;}
viralbuzz-create-poll .sun-editor .se-btn.active,viralbuzz-create-poll .sun-editor .se-btn-selected{color:#22c55e!important;background-color:#1a2e1a!important;}
viralbuzz-create-poll .sun-editor .se-wrapper,viralbuzz-create-poll .sun-editor .se-wrapper .se-contents_wrap{background-color:#121212!important;}
viralbuzz-create-poll .sun-editor .se-wrapper .se-contents_wrap .se-contents{background-color:#121212!important;color:#ffffff!important;padding:0!important;font-family:var(--font-family), 'Questrial', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif!important;}
viralbuzz-create-poll .sun-editor .se-wrapper .se-contents_wrap .se-contents *{font-family:inherit!important;}
viralbuzz-create-poll .sun-editor .se-toolbar,viralbuzz-create-poll .sun-editor .se-toolbar *{font-family:var(--font-family), 'Questrial', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif!important;}
/* Placeholder: same origin as editable content (padding lives on .sun-editor-editable = 4px 12px) — use inset, not extra padding-top */
viralbuzz-create-poll .sun-editor .se-wrapper .se-placeholder{
  color:#6b7280!important;
  font-family:var(--font-family), 'Questrial', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif!important;
  font-size:1rem!important;
  line-height:1.6!important;
  top:4px!important;
  left:12px!important;
  right:12px!important;
  padding:0!important;
  margin:0!important;
  box-sizing:border-box!important;
}
viralbuzz-create-poll .sun-editor .se-counter{color:#9ca3af!important;background-color:#181818!important;border-color:#374151!important;}
viralbuzz-create-poll .sun-editor .se-contents p,
viralbuzz-create-poll .sun-editor .se-contents div,
viralbuzz-create-poll .sun-editor .se-contents span,
viralbuzz-create-poll .sun-editor .se-contents li,
viralbuzz-create-poll .sun-editor .se-contents a{color:#ffffff!important;}
viralbuzz-create-poll .sun-editor .se-toolbar .se-toolbar-separator-vertical{background-color:#374151!important;}

/* --- 2b. Inset + no double stack ---
   Div-mode SunEditor uses ONE node: .se-wrapper-inner.se-wrapper-wysiwyg.sun-editor-editable (no .se-contents).
   Pad that node only; kill flex/top gap from .se-component. */
viralbuzz-create-poll .sun-editor .se-wrapper .se-wrapper-inner.sun-editor-editable{
  padding:4px 12px 12px!important;
  margin:0!important;
  box-sizing:border-box!important;
}
viralbuzz-create-poll .sun-editor .se-wrapper .se-wrapper-inner:not(.sun-editor-editable){padding:0!important;}
viralbuzz-create-poll .sun-editor .se-wrapper .se-contents_wrap .se-contents.sun-editor-editable,
viralbuzz-create-poll .sun-editor .se-contents.sun-editor-editable{
  padding:4px 12px 12px!important;
  margin:0!important;
  box-sizing:border-box!important;
}
viralbuzz-create-poll .sun-editor .sun-editor-editable > .se-component:first-child,
viralbuzz-create-poll .sun-editor .sun-editor-editable > p:first-child{
  margin-top:0!important;
  margin-block-start:0!important;
}
viralbuzz-create-poll .sun-editor .sun-editor-editable .se-component{
  display:block!important;
  margin-top:0!important;
  margin-block-start:0!important;
}
viralbuzz-create-poll .sun-editor .sun-editor-editable .se-component:not(:last-child){margin-bottom:8px!important;}
/* First block: no extra inset (library uses .se-component { padding:1px }) — was shifting text vs placeholder */
viralbuzz-create-poll .sun-editor .sun-editor-editable > .se-component:first-child{padding:0!important;}
viralbuzz-create-poll .sun-editor .sun-editor-editable > .se-component:first-child > p:first-child,
viralbuzz-create-poll .sun-editor .sun-editor-editable > p:first-child{
  margin:0!important;
  padding:0!important;
}

/* --- 3. DROPDOWNS (render inside .sun-editor — scoped + global fallback) --- */
viralbuzz-create-poll .sun-editor .se-list-layer,.se-list-layer{background-color:#181818!important;border-color:#374151!important;}
viralbuzz-create-poll .sun-editor .se-list-layer *,.se-list-layer *{color:#ffffff!important;}
viralbuzz-create-poll .sun-editor .se-list-item,.se-list-item{color:#ffffff!important;background-color:transparent!important;}
viralbuzz-create-poll .sun-editor .se-list-item:hover,viralbuzz-create-poll .sun-editor .se-list-item:focus,.se-list-item:hover,.se-list-item:focus{background-color:#374151!important;color:#ffffff!important;}
viralbuzz-create-poll .sun-editor .se-btn-select-label,viralbuzz-create-poll .sun-editor .se-btn-select,.se-btn-select-label,.se-btn-select{color:#ffffff!important;}
viralbuzz-create-poll .sun-editor .se-submenu,viralbuzz-create-poll .sun-editor .se-selector,.se-submenu,.se-selector{background-color:#181818!important;border-color:#374151!important;color:#ffffff!important;}
viralbuzz-create-poll .sun-editor .se-submenu *,viralbuzz-create-poll .sun-editor .se-selector *,.se-submenu *,.se-selector *{color:#ffffff!important;}

/* --- 4. DIALOGS (render at body level — global scope required) --- */
.se-dialog-background{background:rgba(0,0,0,0.7)!important;}
.se-dialog,.se-dialog .se-dialog-content,.se-dialog .se-dialog-form,.se-dialog .se-dialog-body{background-color:#121212!important;color:#ffffff!important;border-color:#374151!important;}
.se-dialog .se-dialog-title,.se-dialog label,.se-dialog .se-label{color:#e5e7eb!important;}
.se-dialog input:not([type=file]),.se-dialog input[type=text],.se-dialog input[type=url],.se-dialog textarea,.se-dialog select{background-color:#1f1f1f!important;color:#ffffff!important;border-color:#374151!important;}
.se-dialog input::placeholder,.se-dialog textarea::placeholder{color:#9ca3af!important;}
.se-dialog .se-btn-primary,.se-dialog button[type=submit]{background-color:#22c55e!important;color:#000000!important;border:none!important;}
/* Hide file upload — URL-only image insert mode */
.se-dialog input[type=file]{display:none!important;width:0!important;height:0!important;opacity:0!important;position:absolute!important;pointer-events:none!important;}
.se-dialog div:has(>input[type=file]),.se-dialog .se-form-group:has(input[type=file]){display:none!important;}
.se-dialog label:has(+input[type=file]),.se-dialog label[for]:has(+input[type=file]){display:none!important;}
viralbuzz-forum {
    display: block;
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px;
    background: #0b0b0d;
    color: #ffffff;
    transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
    box-sizing: border-box;
}

.forum-gallery-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.forum-gallery-images-container {
    display: grid;
    gap: 1.15rem;
}

.forum-gallery-image-item {
    border: 1px solid rgba(168, 85, 247, 0.28);
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.55);
    padding: 1.25rem;
}

.forum-gallery-image-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.forum-gallery-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(90deg, #f000ff, #00d4ff);
    font-weight: 800;
}

.forum-gallery-image-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-left: auto;
}

.forum-gallery-move-btn {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    color: #d8b4fe;
    background: rgba(255, 255, 255, 0.04);
    padding: 0.35rem 0.65rem;
    cursor: pointer;
}

.forum-gallery-image-grid {
    display: grid;
    grid-template-columns: minmax(240px, 0.9fr) minmax(320px, 1.1fr);
    gap: 1.25rem;
    align-items: start;
}

.forum-gallery-fields-col {
    gap: 0.95rem;
}

.forum-gallery-inline-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.forum-gallery-image-item .forum-topic-image-field > input,
.forum-gallery-image-item .forum-topic-image-field textarea,
.forum-gallery-image-item .forum-topic-url-group input {
    box-sizing: border-box;
    min-height: 2.75rem;
    background: #111116;
    color: #f8fafc;
}

.forum-gallery-image-item .forum-topic-image-field textarea {
    min-height: 6.5rem;
    line-height: 1.5;
}

.forum-gallery-image-item .forum-topic-image-field label {
    margin-bottom: 0.1rem;
}

.forum-gallery-preview {
    min-height: 17rem;
}

.forum-topic-gallery {
    margin: 1.5rem 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    background: #09090b;
    overflow: hidden;
}

.article-image-gallery-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.article-image-gallery-post-title {
    margin: 0;
    color: #fff;
    font-size: 1.05rem;
}

.article-image-gallery-count {
    color: #c4b5fd;
    font-weight: 700;
}

.article-image-gallery-stage {
    position: relative;
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
}

.article-image-gallery-viewport {
    overflow: hidden;
    border-radius: 1rem;
    background: #020617;
}

.article-image-gallery-track {
    display: flex;
    transition: transform 0.25s ease;
}

.article-image-gallery-slide {
    min-width: 100%;
}

.article-image-gallery-slide-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 26rem;
    max-height: 70vh;
}

.article-image-gallery-slide-visual img {
    width: 100%;
    height: 100%;
    max-height: 70vh;
    object-fit: contain;
}

.article-image-gallery-nav,
.article-image-gallery-thumb-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: #fff;
    background: rgba(15, 23, 42, 0.85);
    width: 2.4rem;
    height: 2.4rem;
    cursor: pointer;
}

.article-image-gallery-nav svg,
.article-image-gallery-thumb-nav svg {
    width: 1.1rem;
    height: 1.1rem;
}

.article-image-gallery-caption {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.85rem 1.1rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.article-image-gallery-caption-title {
    margin: 0 0 0.4rem;
    color: #fff;
}

.article-image-gallery-caption-desc {
    margin: 0;
    color: #cbd5e1;
    line-height: 1.6;
}

.article-image-gallery-caption-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.forum-gallery-meta-toggle {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid rgba(168, 85, 247, 0.35);
    border-radius: 999px;
    background: rgba(168, 85, 247, 0.1);
    color: #d8b4fe;
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.forum-gallery-meta-toggle svg {
    width: 0.9rem;
    height: 0.9rem;
    transition: transform 0.2s ease;
}

.forum-gallery-meta-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.forum-gallery-meta-collapse[hidden] {
    display: none;
}

.article-image-gallery-meta-chip {
    min-width: 7rem;
    padding: 0.65rem 0.8rem;
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.05);
}

.article-image-gallery-meta-chip span {
    display: block;
    color: #94a3b8;
    font-size: 0.72rem;
}

.article-image-gallery-meta-chip strong,
.article-image-gallery-meta-chip a {
    color: #f8fafc;
}

.article-image-gallery-thumbs-wrap {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) 2rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem 0.85rem;
}

.article-image-gallery-thumbs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.article-image-gallery-thumbs::-webkit-scrollbar {
    display: none;
}

.article-image-gallery-thumb {
    flex: 0 0 5rem;
    height: 3.75rem;
    border: 2px solid transparent;
    border-radius: 0.65rem;
    overflow: hidden;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.article-image-gallery-thumb.active {
    border-color: #c084fc;
}

.article-image-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .forum-gallery-image-grid,
    .forum-gallery-inline-fields,
    .article-image-gallery-caption {
        grid-template-columns: 1fr;
    }

    .article-image-gallery-stage {
        grid-template-columns: 1fr;
    }

    .article-image-gallery-nav {
        display: none;
    }
}

@media (min-width: 1024px) {
    viralbuzz-forum {
        margin-left: 16rem;
        width: calc(100% - 16rem);
    }

    body.sidebar-closed viralbuzz-forum,
    viralbuzz-forum.sidebar-closed {
        margin-left: 0;
        width: 100%;
    }

    body.sidebar-open viralbuzz-forum,
    viralbuzz-forum.sidebar-open {
        margin-left: 16rem;
        width: calc(100% - 16rem);
    }

    body.sidebar-minimized viralbuzz-forum {
        margin-left: 4rem;
        width: calc(100% - 4rem);
    }
}

.forum-page {
    min-height: calc(100vh - 60px);
    background:
        radial-gradient(circle at 15% 0%, rgba(124, 58, 237, 0.12), transparent 32rem),
        radial-gradient(circle at 95% 12%, rgba(6, 182, 212, 0.08), transparent 26rem),
        #0b0b0d;
}

.forum-shell {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0.75rem 0.75rem 3.5rem;
    box-sizing: border-box;
}

@media (max-width: 1023px) {
    .forum-shell {
        padding-bottom: calc(6rem + env(safe-area-inset-bottom));
    }
}

.forum-hashtag-section {
    position: sticky;
    top: 60px;
    z-index: 35;
    width: 100%;
    max-width: 100vw;
    background: var(--dark-surface, #121212);
    border-bottom: 1px solid var(--border-gray-700, #1f2937);
    overflow: hidden;
}

.forum-hashtag-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid rgba(0, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(10, 10, 12, 0.88);
    color: #f8fafc;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    transform: translateY(-50%);
    cursor: pointer;
    transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.forum-hashtag-nav.prev {
    left: 0.45rem;
}

.forum-hashtag-nav.next {
    right: 0.45rem;
}

.forum-hashtag-nav svg {
    width: 1rem;
    height: 1rem;
}

.forum-hashtag-nav:disabled {
    opacity: 0.28;
    pointer-events: none;
}

.forum-hashtag-nav:hover:not(:disabled) {
    border-color: rgba(0, 255, 255, 0.6);
    background: rgba(0, 255, 255, 0.14);
}

.forum-hashtag-section::before,
.forum-hashtag-section::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 4rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.forum-hashtag-section::before {
    left: 0;
    background: linear-gradient(90deg, var(--dark-surface, #121212), rgba(18, 18, 18, 0));
}

.forum-hashtag-section::after {
    right: 0;
    background: linear-gradient(270deg, var(--dark-surface, #121212), rgba(18, 18, 18, 0));
}

.forum-hashtag-section.has-overflow::before,
.forum-hashtag-section.has-overflow::after {
    opacity: 1;
}

.forum-hashtag-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
}

.forum-hashtag-scroll::-webkit-scrollbar {
    display: none;
}

.forum-hashtag-container {
    display: flex;
    gap: 0.5rem;
    width: max-content;
    min-width: 100%;
    padding: 0.75rem 3rem;
}

.forum-hashtag-item {
    flex-shrink: 0;
    touch-action: pan-x;
    border: 1px solid transparent;
    border-radius: 999px;
    background-color: var(--dark-card, #1b1b21);
    color: var(--text-white, #fff);
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

@media (max-width: 767px) {
    .forum-hashtag-section {
        top: 56px;
    }

    .forum-hashtag-container {
        padding: 0.45rem 2.75rem;
    }

    .forum-hashtag-nav {
        display: none !important;
    }

    .forum-hashtag-section::before,
    .forum-hashtag-section::after {
        width: 2rem;
    }
}

.forum-hashtag-item:hover {
    background-color: var(--gray-700, #374151);
    transform: translateY(-1px);
}

.forum-hashtag-item.active {
    border-color: rgba(168, 85, 247, 0.72);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.95), rgba(6, 182, 212, 0.7));
    box-shadow: 0 0 18px rgba(168, 85, 247, 0.32);
    color: #ffffff;
}

.forum-hashtag-item.active::before {
    content: '✓';
    margin-right: 0.35rem;
    font-weight: 900;
}

.forum-create-btn,
.forum-secondary-btn {
    border: 0;
    border-radius: 0.6rem;
    font-weight: 700;
    min-height: 2.5rem;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}

.forum-create-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    color: #ffffff;
    background: linear-gradient(90deg, #f000ff, #00d4ff);
    box-shadow: 0 0 22px rgba(240, 0, 255, 0.22);
}

.forum-create-btn:hover,
.forum-secondary-btn:hover {
    transform: translateY(-1px);
    opacity: 0.92;
}

.forum-secondary-btn {
    padding: 0.5rem 1rem;
    color: #c084fc;
    background: rgba(124, 58, 237, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.35);
}

.forum-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    margin-bottom: 0;
    border-bottom: 2px solid var(--border-gray-700, #374151);
    background: var(--dark-card, #1a1a1f);
    border-radius: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    flex-shrink: 0;
}

.forum-tabs::-webkit-scrollbar {
    display: none;
}

.forum-tab {
    position: relative;
    flex: 1 1 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-gray-400, #9ca3af);
    min-width: 0;
    min-height: 3rem;
    padding: 0.875rem 0;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.forum-tab:last-child {
    border-right: 0;
}

.forum-tab:first-child,
.forum-tab:last-child {
    border-radius: 0 !important;
}

.forum-tab:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.025);
}

.forum-tab svg {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
}

.forum-tab.active {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.045);
}

.forum-tab.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: #7c3aed;
    z-index: 25;
}

.forum-mobile-active-filter {
    display: none;
}

.forum-drawer-toggle,
.forum-drawer-close {
    display: none;
}

.forum-drawer-overlay {
    display: none;
}

.forum-category-chips {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.forum-category-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    cursor: pointer;
}

.forum-category-chip.active {
    color: #ffffff;
    border-color: rgba(168, 85, 247, 0.75);
    background: rgba(168, 85, 247, 0.18);
}

.forum-category-browser {
    padding: 1rem;
    display: grid;
    gap: 0.9rem;
}

.forum-category-browser-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.forum-category-browser-header h3 {
    margin: 0;
    color: #f8fafc;
    font-size: 1rem;
}

.forum-category-browser-header p {
    margin: 0.25rem 0 0;
    color: #9ca3af;
    font-size: 0.78rem;
}

.forum-category-view-toggle {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.65rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
}

.forum-category-view-toggle button {
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: #9ca3af;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 800;
}

.forum-category-view-toggle button:last-child {
    border-right: 0;
}

.forum-category-view-toggle button.active {
    color: #ffffff;
    background: rgba(168, 85, 247, 0.22);
}

.forum-category-browser-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

.forum-category-browser-tools > span {
    flex: 0 0 auto;
    color: #8b94a7;
    font-size: 0.75rem;
    font-weight: 700;
}

.forum-category-search {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    padding: 0.65rem 0.75rem;
}

.forum-category-search svg {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: #8b94a7;
}

.forum-category-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #f8fafc;
    font-size: 0.9rem;
}

.forum-category-search input::placeholder {
    color: #6b7280;
}

.forum-category-list {
    display: grid;
    gap: 0.6rem;
}

.forum-category-list.grid {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

.forum-category-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.035);
    color: #cbd5e1;
    padding: 0.75rem;
    text-align: left;
    cursor: pointer;
}

.forum-category-card.active {
    border-color: rgba(168, 85, 247, 0.75);
    background: rgba(168, 85, 247, 0.16);
}

.forum-category-card.is-hidden {
    display: none;
}

.forum-category-card strong,
.forum-category-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-category-card strong {
    color: #f8fafc;
    font-size: 0.86rem;
}

.forum-category-card small {
    color: #9ca3af;
    font-size: 0.72rem;
    margin-top: 0.15rem;
}

.forum-category-card-image.all {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    color: #ffffff;
    font-size: 0.58rem;
    font-weight: 900;
    background: linear-gradient(135deg, #a855f7, #06b6d4);
}

.forum-category-empty {
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 0.85rem;
    color: #9ca3af;
    padding: 1rem;
    text-align: center;
    font-size: 0.86rem;
}

.forum-category-empty.hidden {
    display: none;
}

.forum-selected-category-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.025);
}

.forum-category-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: #f8fafc;
    padding: 0.45rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.forum-category-back-btn svg {
    width: 0.95rem;
    height: 0.95rem;
}

.forum-selected-category-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    color: #f8fafc;
    text-align: right;
}

.forum-selected-category-title span {
    min-width: 0;
}

.forum-selected-category-title strong,
.forum-selected-category-title small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-selected-category-title strong {
    font-size: 0.9rem;
}

.forum-selected-category-title small {
    margin-top: 0.1rem;
    color: #9ca3af;
    font-size: 0.72rem;
}

.forum-category-chip-image {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
}

.forum-category-chip-image.fallback {
    display: inline-grid;
    place-items: center;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    background: linear-gradient(135deg, #a855f7, #06b6d4);
}

.forum-content-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.forum-content-left,
.forum-content-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.forum-content-left {
    flex: 1 1 auto;
}

.forum-content-actions {
    flex: 0 0 auto;
}

.forum-search-form {
    position: relative;
    flex: 1 1 18rem;
    max-width: 24rem;
}

.forum-search-form svg {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    transform: translateY(-50%);
    color: #7c8597;
}

.forum-search-form input {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.045);
    color: #f8fafc;
    padding: 0.7rem 0.9rem 0.7rem 2.35rem;
    outline: none;
}

.forum-search-form input:focus {
    border-color: rgba(168, 85, 247, 0.65);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12);
}

.forum-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(168, 85, 247, 0.35);
    border-radius: 0.6rem;
    color: #c084fc;
    background: rgba(124, 58, 237, 0.12);
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.forum-icon-btn:hover {
    transform: translateY(-1px);
    opacity: 0.92;
}

.forum-icon-btn svg {
    width: 1.1rem;
    height: 1.1rem;
}

.forum-pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
}

.forum-page-btn,
.forum-page-arrow {
    min-width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.04);
    color: #9ca3af;
    cursor: pointer;
}

.forum-page-btn.active {
    color: #ffffff;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    border-color: transparent;
}

.forum-page-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.forum-page-gap {
    color: #6b7280;
}

.forum-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 1.5rem;
    align-items: start;
    max-width: auto;
    margin: 0 auto;
    position: relative;
    min-height: 100vh;
}

.forum-list-card,
.forum-side-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(20, 20, 24, 0.86);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}

.forum-list-card {
    min-height: 500px;
    border-radius: 8px;
    overflow: hidden;
}

.forum-list-card::after {
    content: '';
    display: none;
}

.forum-create-page {
    padding-top: 0.75rem;
}

.forum-create-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.5rem;
    align-items: start;
}

.forum-create-card,
.forum-create-side .forum-side-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    background: rgba(20, 20, 24, 0.92);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}

.forum-create-card {
    padding: 1.5rem;
}

.forum-create-side {
    position: sticky;
    top: 7.25rem;
    display: grid;
    gap: 1rem;
}

.forum-create-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.35rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.forum-create-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.forum-create-icon {
    display: inline-grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.65rem;
    color: #22d3ee;
    background: rgba(34, 211, 238, 0.12);
    border: 1px solid rgba(34, 211, 238, 0.22);
}

.forum-create-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.forum-create-header h1 {
    margin: 0;
    color: #f8fafc;
    font-size: 1.2rem;
}

.forum-create-header p {
    margin: 0.25rem 0 0;
    color: #8b94a7;
    font-size: 0.85rem;
}

.forum-guidelines-btn {
    border: 0;
    background: transparent;
    color: #a1a1aa;
    cursor: pointer;
    font-weight: 600;
}

.forum-create-form {
    display: grid;
    gap: 1.25rem;
}

.forum-create-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.forum-create-field label {
    display: block;
    color: #d1d5db;
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.forum-create-field input,
.forum-create-field select,
.forum-create-field textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.25rem;
    background: #111116;
    color: #f8fafc;
    padding: 0.95rem 1rem;
    box-sizing: border-box;
    outline: none;
}

.forum-create-field input:focus,
.forum-create-field select:focus,
.forum-create-field textarea:focus {
    border-color: rgba(168, 85, 247, 0.65);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12);
}

.forum-create-field select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.forum-category-dropdown {
    position: relative;
}

.forum-category-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 3.15rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.25rem;
    background: #111116;
    color: #f8fafc;
    padding: 0.75rem 1rem;
    cursor: pointer;
    text-align: left;
}

.forum-category-dropdown-toggle:focus {
    border-color: rgba(168, 85, 247, 0.65);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12);
    outline: none;
}

.forum-category-dropdown.disabled .forum-category-dropdown-toggle {
    opacity: 0.55;
    cursor: not-allowed;
}

.forum-category-dropdown-selected,
.forum-category-dropdown-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.forum-category-dropdown-selected span:last-child,
.forum-category-dropdown-option span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-category-dropdown-toggle svg {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: #8b94a7;
    transition: transform 0.2s ease;
}

.forum-category-dropdown.open .forum-category-dropdown-toggle svg {
    transform: rotate(180deg);
}

.forum-category-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    z-index: 30;
    display: none;
    max-height: 16rem;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    background: #17171d;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
    padding: 0.35rem;
}

.forum-category-dropdown.open .forum-category-dropdown-menu {
    display: block;
}

.forum-category-dropdown-option {
    width: 100%;
    border: 0;
    border-radius: 0.4rem;
    background: transparent;
    color: #d1d5db;
    padding: 0.65rem 0.7rem;
    cursor: pointer;
    text-align: left;
}

.forum-category-dropdown-option:hover,
.forum-category-dropdown-option.selected {
    background: rgba(168, 85, 247, 0.16);
    color: #ffffff;
}

.forum-category-dropdown-empty {
    color: #8b94a7;
    padding: 0.75rem;
    font-size: 0.85rem;
}

.forum-tags-input-container {
    width: 100%;
}

.forum-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 2rem;
    margin-top: 0.75rem;
}

.forum-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.16);
    color: #f8fafc;
    padding: 0.35rem 0.7rem;
    font-size: 0.84rem;
    font-weight: 700;
}

.forum-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #a1a1aa;
    cursor: pointer;
    padding: 0;
}

.forum-tag-remove:hover {
    color: #ffffff;
}

.forum-tag-remove svg {
    width: 0.85rem;
    height: 0.85rem;
}

.forum-topic-editor,
.forum-create-card .sun-editor,
.forum-create-card .se-wrapper,
.forum-create-card .se-wrapper-inner,
.forum-create-card .se-wrapper-wysiwyg {
    background: #111116 !important;
    color: #f8fafc !important;
}

.forum-topic-editor {
    min-height: 280px;
    border-radius: 0.35rem;
    overflow: hidden;
}

.forum-media-accordion {
    border: 1px solid rgba(168, 85, 247, 0.22);
    border-radius: 1rem;
    overflow: hidden;
    background: rgba(17, 17, 22, 0.6);
}

.forum-media-accordion-toggle {
    width: 100%;
    border: 0;
    background: rgba(168, 85, 247, 0.08);
    color: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    cursor: pointer;
    text-align: left;
}

.forum-media-accordion-toggle span {
    display: grid;
    gap: 0.25rem;
}

.forum-media-accordion-toggle small {
    color: #9ca3af;
    font-size: 0.78rem;
}

.forum-media-accordion-toggle svg {
    width: 1.1rem;
    height: 1.1rem;
    transition: transform 0.2s ease;
}

.forum-media-accordion-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.forum-media-accordion-panel {
    display: none;
    padding: 1rem;
    gap: 1rem;
}

.forum-media-accordion-panel.open {
    display: grid;
}

.forum-topic-image-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.forum-topic-image-preview-col,
.forum-topic-image-fields-col,
.forum-topic-image-preview-block {
    display: grid;
    gap: 0.75rem;
}

.forum-topic-image-preview-block + .forum-topic-image-preview-block {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.forum-topic-image-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.forum-topic-image-label-row span {
    color: #f8fafc;
    font-size: 0.9rem;
    font-weight: 800;
}

.forum-topic-image-label-row small {
    color: #9ca3af;
    font-size: 0.75rem;
}

.forum-topic-url-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.forum-topic-url-group input {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    background: #111116;
    color: #f8fafc;
    padding: 0.75rem;
}

.forum-topic-url-group button {
    flex: 0 0 auto;
    border: 1px solid rgba(34, 197, 94, 0.45);
    border-radius: 0.45rem;
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    min-height: 2.35rem;
    padding: 0 0.8rem;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.forum-topic-url-group button.icon-only {
    width: 2.35rem;
    padding: 0;
}

.forum-topic-image-picker {
    display: block;
    cursor: pointer;
}

.forum-topic-image-preview {
    aspect-ratio: 16 / 9;
    min-height: 7rem;
    border: 1px dashed rgba(156, 163, 175, 0.45);
    border-radius: 0.5rem;
    background: #18181f;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.forum-topic-image-preview.thumbnail {
    min-height: 6.5rem;
}

.forum-topic-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.forum-topic-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: #8b94a7;
    text-align: center;
    padding: 1rem;
}

.forum-topic-image-placeholder svg {
    width: 2.4rem;
    height: 2.4rem;
}

.forum-topic-image-placeholder span {
    color: #f8fafc;
    font-weight: 800;
}

.forum-topic-image-remove {
    justify-self: start;
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 999px;
    background: rgba(248, 113, 113, 0.08);
    color: #fecaca;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 800;
}

.forum-topic-image-field {
    display: grid;
    gap: 0.45rem;
}

.forum-topic-image-field label {
    color: #cbd5e1;
    font-size: 0.82rem;
    font-weight: 700;
}

.forum-topic-image-field > input,
.forum-topic-image-field textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    background: #111116;
    color: #f8fafc;
    padding: 0.85rem;
}

.forum-topic-image-field textarea {
    min-height: 7.75rem;
    resize: vertical;
}

.forum-source-link-modal {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 1rem;
}

.forum-source-link-modal.active {
    display: flex;
}

.forum-source-link-modal-content {
    width: min(460px, 100%);
    background: #171721;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.75rem;
    overflow: hidden;
}

.forum-source-link-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.forum-source-link-modal-header h3 {
    margin: 0;
    color: #f8fafc;
    font-size: 1rem;
}

.forum-source-link-modal-close {
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.35rem;
    background: #21212b;
    color: #d1d5db;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.forum-source-link-modal-close svg {
    width: 1rem;
    height: 1rem;
}

.forum-source-link-modal-body {
    padding: 1rem;
}

.forum-source-link-modal-body label {
    display: block;
    margin-bottom: 0.45rem;
    color: #d1d5db;
    font-size: 0.86rem;
    font-weight: 700;
}

.forum-source-link-modal-body input {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    background: #111116;
    color: #f8fafc;
    padding: 0.85rem;
}

.forum-source-link-modal-hint {
    margin-top: 0.4rem;
    color: #6b7280;
    font-size: 0.75rem;
}

.forum-source-link-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.8rem 1rem 1rem;
}

.forum-source-link-cancel,
.forum-source-link-save {
    border-radius: 0.5rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #21212b;
    color: #d1d5db;
    cursor: pointer;
    font-weight: 700;
}

.forum-source-link-save {
    border-color: #0f5132;
    background: #064e3b;
    color: #a7f3d0;
}

.forum-create-card .sun-editor {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.forum-create-card .se-toolbar {
    background: #17171d !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.forum-editor-fallback {
    min-height: 280px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.35rem;
    background: #111116;
    color: #f8fafc;
    padding: 1rem;
    outline: none;
}

.forum-settings-list {
    display: grid;
    gap: 1rem;
}

.forum-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.forum-switch-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.forum-switch-row > div {
    display: grid;
    gap: 0.25rem;
}

.forum-switch-label {
    color: #f8fafc;
    font-size: 0.86rem;
    font-weight: 700;
}

.forum-switch-row span {
    color: #8b94a7;
    font-size: 0.76rem;
    line-height: 1.35;
}

.forum-switch {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    width: 2.8rem;
    height: 1.45rem;
}

.forum-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.forum-switch span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #374151;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.forum-switch span::before {
    content: '';
    position: absolute;
    width: 1.05rem;
    height: 1.05rem;
    left: 0.2rem;
    top: 0.2rem;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.2s ease;
}

.forum-switch input:checked + span {
    background: #2563eb;
}

.forum-switch input:checked + span::before {
    transform: translateX(1.35rem);
}

.forum-create-actions {
    display: grid;
    gap: 0.75rem;
}

.forum-create-actions button {
    width: 100%;
}

.forum-topic-row {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr) 7.5rem;
    gap: 1rem;
    padding: 1.05rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.forum-topic-main {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

.forum-topic-row.has-thumbnail .forum-topic-main {
    grid-template-columns: minmax(0, 1fr) 8.5rem;
    align-items: start;
}

.forum-topic-thumbnail-wrap {
    width: 8.5rem;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.forum-topic-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.forum-topic-summary {
    min-width: 0;
}

.forum-topic-detail-thumbnail {
    margin: 0 0 1rem;
}

.forum-topic-detail-thumbnail img {
    width: 100%;
    max-height: 28rem;
    object-fit: cover;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.forum-topic-detail-thumbnail.banner img {
    max-height: 24rem;
}

.forum-topic-detail-thumbnail figcaption {
    display: grid;
    gap: 0.25rem;
    color: #9ca3af;
    font-size: 0.8rem;
    margin-top: 0.55rem;
}

.forum-topic-detail-thumbnail a {
    color: #c084fc;
}

.forum-topic-row:hover,
.forum-topic-row:focus-visible {
    background: rgba(255, 255, 255, 0.025);
    outline: none;
}

.forum-topic-row:last-child {
    border-bottom: 0;
}

.forum-news-panel {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.forum-news-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.forum-news-header h2 {
    margin: 0;
    color: #f8fafc;
    font-size: 1.1rem;
}

.forum-news-header p {
    margin: 0.25rem 0 0;
    color: #9ca3af;
    font-size: 0.82rem;
}

.forum-news-header > span {
    color: #c4b5fd;
    border: 1px solid rgba(168, 85, 247, 0.32);
    background: rgba(168, 85, 247, 0.12);
    border-radius: 999px;
    padding: 0.3rem 0.65rem;
    font-size: 0.76rem;
    font-weight: 800;
    flex-shrink: 0;
}

.forum-news-login,
.forum-news-form {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.035);
    padding: 1rem;
}

.forum-news-login {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #cbd5e1;
}

.forum-news-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.forum-news-form label {
    display: grid;
    gap: 0.4rem;
}

.forum-news-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.forum-news-counter {
    color: #8b94a7;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.forum-news-counter.at-limit {
    color: #f87171;
}

.forum-news-form label.wide {
    grid-column: 1 / -1;
}

.forum-news-form label.hidden {
    display: none;
}

.forum-news-form label span {
    color: #d1d5db;
    font-size: 0.82rem;
    font-weight: 800;
}

.forum-news-form label strong {
    color: #f87171;
}

.forum-news-form input,
.forum-news-form select,
.forum-news-form textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.55rem;
    background: #111116;
    color: #f8fafc;
    padding: 0.8rem;
}

.forum-news-form textarea {
    resize: vertical;
}

.forum-news-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.9rem;
    gap: 0.75rem;
}

.forum-news-list {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.9rem;
    overflow: hidden;
}

.forum-news-table-header,
.forum-news-row {
    display: grid;
    grid-template-columns: minmax(12rem, 0.72fr) minmax(0, 1.65fr) minmax(12rem, 0.8fr) 2.5rem;
    gap: 0.85rem;
}

.forum-news-table-header {
    align-items: center;
    padding: 0.55rem 1rem;
    color: #7c8597;
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.forum-news-table-header span:last-child {
    text-align: right;
}

.forum-news-row {
    align-items: center;
    padding: 0.72rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    cursor: pointer;
}

.forum-news-row:last-child {
    border-bottom: 0;
}

.forum-news-row:hover {
    background: rgba(255, 255, 255, 0.025);
}

.forum-news-meta-cell {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    overflow: hidden;
}

.forum-news-date {
    color: #cbd5e1;
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
}

.forum-news-type-badge {
    justify-self: start;
    max-width: 7.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid rgba(34, 197, 94, 0.42);
    border-radius: 0.4rem;
    color: #86efac;
    background: rgba(34, 197, 94, 0.08);
    padding: 0.18rem 0.45rem;
    font-size: 0.66rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.forum-news-type-badge.type-article {
    color: #c4b5fd;
    border-color: rgba(168, 85, 247, 0.42);
    background: rgba(168, 85, 247, 0.12);
}

.forum-news-type-badge.type-news {
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.42);
    background: rgba(34, 197, 94, 0.1);
}

.forum-news-type-badge.type-docs {
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.42);
    background: rgba(59, 130, 246, 0.11);
}

.forum-news-type-badge.type-twitter-space {
    color: #67e8f9;
    border-color: rgba(6, 182, 212, 0.42);
    background: rgba(6, 182, 212, 0.1);
}

.forum-news-type-badge.type-podcast {
    color: #f0abfc;
    border-color: rgba(217, 70, 239, 0.42);
    background: rgba(217, 70, 239, 0.1);
}

.forum-news-type-badge.type-video {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.42);
    background: rgba(239, 68, 68, 0.1);
}

.forum-news-type-badge.type-report {
    color: #fdba74;
    border-color: rgba(249, 115, 22, 0.42);
    background: rgba(249, 115, 22, 0.1);
}

.forum-news-type-badge.type-other,
.forum-news-type-badge.type-custom {
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.42);
    background: rgba(245, 158, 11, 0.1);
}

.forum-news-main,
.forum-news-summary,
.forum-news-byline {
    min-width: 0;
}

.forum-news-main h3 {
    margin: 0;
    color: #f8fafc;
    font-size: 0.86rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-news-summary {
    margin: 0;
    color: #a1a1aa;
    font-size: 0.8rem;
    line-height: 1.35;
    display: none;
}

.forum-news-summary.empty {
    color: #6b7280;
    font-style: italic;
}

.forum-news-row.expanded {
    align-items: start;
}

.forum-news-row.expanded .forum-news-summary {
    display: block;
    grid-column: 2 / 4;
}

.forum-news-row.expanded .forum-news-main h3 {
    white-space: normal;
    overflow: visible;
}

.forum-news-byline {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #8b94a7;
    font-size: 0.72rem;
}

.forum-news-byline span,
.forum-news-byline small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-news-byline span {
    flex: 0 1 auto;
}

.forum-news-byline small {
    flex: 1 1 auto;
    color: #a78bfa;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.forum-news-source {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.45rem;
    color: #f59e0b;
    text-decoration: none;
    justify-self: end;
}

.forum-news-source:hover {
    background: rgba(245, 158, 11, 0.12);
}

.forum-news-source svg {
    width: 1rem;
    height: 1rem;
}

.forum-topic-avatar-wrap {
    position: relative;
}

.forum-topic-avatar,
.forum-topic-avatar.initials {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    object-fit: cover;
}

.forum-topic-avatar.initials {
    display: grid;
    place-items: center;
    font-weight: 800;
    background: linear-gradient(135deg, #a855f7, #06b6d4);
}

.forum-topic-status {
    position: absolute;
    right: 0.25rem;
    top: 0.1rem;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #141418;
}

.forum-topic-title-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.forum-topic-main h2 {
    margin: 0;
    color: #f8fafc;
    font-size: 1rem;
    line-height: 1.35;
}

.forum-topic-main p {
    margin: 0.35rem 0 0;
    color: #a1a1aa;
    font-size: 0.86rem;
    line-height: 1.45;
}

.forum-topic-pill {
    border-radius: 999px;
    padding: 0.15rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
}

.forum-topic-pill.pinned {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.14);
}

.forum-topic-pill.answered {
    color: #34d399;
    background: rgba(52, 211, 153, 0.12);
}

.forum-topic-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.45rem;
    color: #6b7280;
    font-size: 0.75rem;
}

.forum-topic-meta.detail {
    margin-top: 0.65rem;
}

.forum-topic-author {
    color: #e5e7eb;
    font-weight: 600;
}

.forum-author-profile-trigger {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 0;
    cursor: pointer;
}

.forum-author-profile-trigger:hover,
.forum-author-profile-trigger:focus-visible {
    color: #22d3ee;
    text-decoration: underline;
}

.forum-author-avatar-trigger,
.forum-thread-author-avatar-trigger {
    display: inline-flex;
    text-decoration: none !important;
}

.forum-thread-author-name-trigger {
    color: #f8fafc;
}

.forum-author-popover {
    position: absolute;
    z-index: 10000;
    width: min(280px, calc(100vw - 24px));
    padding: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.98);
    color: #f8fafc;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.forum-author-popover.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.forum-author-popover-top {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.9rem;
}

.forum-author-popover-avatar img,
.forum-author-popover-avatar span {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
}

.forum-author-popover-avatar img {
    object-fit: cover;
}

.forum-author-popover-avatar span {
    display: grid;
    place-items: center;
    color: #0f172a;
    background: linear-gradient(135deg, #22d3ee, #a855f7);
    font-weight: 900;
}

.forum-author-popover-top > div > strong,
.forum-author-popover-top > div > span {
    display: block;
}

.forum-author-popover-top > div > span {
    color: #94a3b8;
    font-size: 0.82rem;
}

.forum-author-popover dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.forum-author-popover dt {
    color: #94a3b8;
    font-size: 0.72rem;
}

.forum-author-popover dd {
    margin: 0.12rem 0 0;
    color: #f8fafc;
    font-size: 0.86rem;
    font-weight: 700;
}

.forum-author-popover button {
    width: 100%;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    color: #020617;
    padding: 0.65rem 1rem;
    font-weight: 800;
    cursor: pointer;
}

@media (max-width: 767px) {
    .forum-author-popover {
        position: fixed;
        top: auto !important;
        right: 0.85rem;
        bottom: calc(0.85rem + env(safe-area-inset-bottom));
        left: 0.85rem !important;
        width: auto;
        max-width: none;
        z-index: 30080;
        transform: translateY(1rem);
    }

    .forum-author-popover.visible {
        transform: translateY(0);
    }
}

.forum-topic-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid rgba(168, 85, 247, 0.28);
    border-radius: 999px;
    background: rgba(168, 85, 247, 0.11);
    color: #ddd6fe;
    padding: 0.18rem 0.55rem 0.18rem 0.25rem;
    font-weight: 700;
}

.forum-topic-category-badge .forum-category-chip-image {
    width: 1rem;
    height: 1rem;
}

.forum-topic-time {
    color: #7c8597;
}

.forum-topic-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.65rem;
}

.forum-topic-tags span {
    color: #c4b5fd;
    border: 1px solid rgba(168, 85, 247, 0.22);
    background: rgba(168, 85, 247, 0.08);
    border-radius: 999px;
    padding: 0.22rem 0.55rem;
    font-size: 0.72rem;
}

.forum-topic-stats {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.6rem;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    padding-left: 1rem;
}

.forum-reply-count {
    color: #a855f7;
    background: rgba(124, 58, 237, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.12);
    border-radius: 0.4rem;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 800;
    padding: 0.55rem 0.4rem;
}

.forum-stat-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: #9ca3af;
    font-size: 0.75rem;
}

.forum-stat-line svg {
    width: 0.85rem;
    height: 0.85rem;
}

.forum-side-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 8rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: calc(100vh - 8rem);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.forum-drawer-open {
    overflow: hidden;
}

.forum-side-stack::-webkit-scrollbar {
    display: none;
}

.forum-side-card {
    border-radius: 0.65rem;
    padding: 1rem;
}

.forum-side-card h3 {
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

.forum-side-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.forum-side-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 0;
    background: transparent;
    color: #d1d5db;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font-size: 0.8rem;
}

.forum-side-category strong {
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 0.12rem 0.45rem;
    font-size: 0.72rem;
}

.forum-side-category > span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.forum-view-all {
    border: 0;
    background: transparent;
    color: #a855f7;
    margin-top: 1rem;
    padding: 0;
    cursor: pointer;
}

.forum-poll-question,
.forum-poll-footnote,
.forum-muted {
    color: #9ca3af;
    font-size: 0.78rem;
}

.forum-poll-option {
    margin-top: 0.8rem;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    background: transparent;
    padding: 0.35rem;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.forum-poll-option:not(:disabled):hover,
.forum-poll-option.selected {
    border-color: rgba(168, 85, 247, 0.45);
    background: rgba(168, 85, 247, 0.08);
}

.forum-poll-option:disabled {
    cursor: default;
}

.forum-poll-option > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #d1d5db;
    font-size: 0.78rem;
}

.forum-poll-option > div:first-child span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.forum-poll-radio {
    width: 0.78rem;
    height: 0.78rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.forum-poll-option.selected .forum-poll-radio {
    border-color: #a855f7;
    background: radial-gradient(circle, #a855f7 42%, transparent 45%);
}

.forum-poll-track {
    height: 0.35rem;
    margin-top: 0.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.forum-poll-track span {
    display: block;
    height: 100%;
}

.forum-poll-track .purple { background: #a855f7; }
.forum-poll-track .cyan { background: #06b6d4; }
.forum-poll-track .orange { background: #f97316; }

.forum-poll-vote-btn,
.forum-poll-login-btn {
    width: 100%;
    border: 1px solid rgba(168, 85, 247, 0.55);
    border-radius: 0.8rem;
    background: rgba(168, 85, 247, 0.14);
    color: #e9d5ff;
    padding: 0.55rem 0.75rem;
    margin-top: 0.85rem;
    font-weight: 800;
    cursor: pointer;
}

.forum-poll-vote-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.forum-contributor {
    display: grid;
    grid-template-columns: 1rem 2rem minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    margin-top: 0.85rem;
}

.forum-contributor-rank {
    color: #ffffff;
    font-weight: 700;
}

.forum-contributor img,
.forum-contributor-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.forum-contributor-avatar {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    font-size: 0.72rem;
    font-weight: 800;
}

.forum-contributor strong,
.forum-contributor span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-contributor strong {
    color: #ffffff;
    font-size: 0.8rem;
}

.forum-contributor span {
    color: #9ca3af;
    font-size: 0.72rem;
}

.forum-empty {
    padding: 4rem 1rem;
    text-align: center;
}

.forum-empty h3 {
    margin: 0 0 0.5rem;
}

.forum-empty p {
    color: #9ca3af;
}

.forum-topic-view-page {
    padding-top: 0.75rem;
}

.forum-topic-top-nav {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.forum-topic-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid rgba(168, 85, 247, 0.34);
    border-radius: 999px;
    background: rgba(168, 85, 247, 0.12);
    color: #e9d5ff;
    padding: 0.55rem 0.85rem;
    cursor: pointer;
    font-weight: 800;
    font-size: 0.84rem;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.forum-topic-back-btn:hover,
.forum-topic-back-btn:focus-visible {
    border-color: rgba(168, 85, 247, 0.68);
    background: rgba(168, 85, 247, 0.2);
    outline: none;
    transform: translateX(-2px);
}

.forum-topic-back-btn svg {
    width: 1rem;
    height: 1rem;
}

.forum-topic-nav-category {
    color: #8b94a7;
    font-size: 0.82rem;
    font-weight: 700;
}

.forum-topic-view-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    background: rgba(20, 20, 24, 0.9);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}

.forum-topic-view-header h1 {
    margin: 0 0 0.65rem;
    color: #f8fafc;
    font-size: clamp(1.45rem, 2.4vw, 2.15rem);
    line-height: 1.18;
}

.forum-topic-view-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: 0 0 auto;
}

.forum-topic-drawer-toggle {
    display: none;
}

.forum-topic-view-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.5rem;
    align-items: start;
}

.forum-topic-thread {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.forum-topic-view-page .forum-topic-thread::after {
    content: '';
    display: block;
    height: calc(5.5rem + env(safe-area-inset-bottom));
}

.forum-thread-post {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    min-height: 220px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    background: rgba(20, 20, 24, 0.92);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.forum-thread-post.reply {
    min-height: 150px;
}

.forum-thread-author-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 1.25rem 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.025);
    text-align: center;
}

.forum-thread-author-avatar img,
.forum-thread-author-avatar span {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
}

.forum-thread-author-avatar img {
    object-fit: cover;
}

.forum-thread-author-avatar span {
    display: grid;
    place-items: center;
    color: #0f172a;
    background: linear-gradient(135deg, #22d3ee, #a855f7);
    font-size: 1.6rem;
    font-weight: 900;
}

.forum-thread-author-card strong {
    color: #f8fafc;
    font-size: 0.95rem;
    line-height: 1.25;
}

.forum-thread-author-card > span {
    color: #8b94a7;
    font-size: 0.76rem;
}

.forum-thread-author-stats {
    display: grid;
    gap: 0.45rem;
    width: 100%;
    margin: 0.8rem 0 0;
}

.forum-thread-author-stats div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.35rem;
    background: rgba(0, 0, 0, 0.12);
}

.forum-thread-author-stats dt,
.forum-thread-author-stats dd {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.25;
}

.forum-thread-author-stats dt {
    color: #8b94a7;
}

.forum-thread-author-stats dd {
    color: #e5e7eb;
    font-weight: 700;
    text-align: right;
}

.forum-thread-post-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.1rem 1.25rem 1.25rem;
}

.forum-thread-post-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    color: #8b94a7;
    font-size: 0.78rem;
}

.forum-thread-post-top-right {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.forum-post-number {
    color: #c4b5fd;
    font-weight: 800;
}

.forum-thread-post-body > p {
    margin: 0;
    color: #d1d5db;
    line-height: 1.7;
    white-space: pre-wrap;
}

.forum-reply-quote {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-left: 3px solid rgba(34, 211, 238, 0.65);
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.035);
}

.forum-reply-quote div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.4rem;
}

.forum-reply-quote strong {
    color: #f8fafc;
    font-size: 0.82rem;
}

.forum-reply-quote span {
    color: #8b94a7;
    font-size: 0.76rem;
}

.forum-reply-quote p {
    margin: 0;
    color: #b8c0ce;
    font-size: 0.86rem;
    line-height: 1.55;
}

.forum-reply-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    justify-content: flex-end;
    margin-top: 0.8rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.forum-reply-footer-spacer {
    flex: 1 1 auto;
}

.forum-reply-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    color: #a1a1aa;
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.forum-reply-action-btn svg {
    width: 0.95rem;
    height: 0.95rem;
}

.forum-reply-action-btn:hover,
.forum-reply-action-btn.active {
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.12);
    color: #86efac;
}

.forum-reply-action-btn.dislike,
.forum-reply-action-btn[data-reply-reaction="Dislike"]:hover {
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
}

.forum-reply-action-btn.reply:hover {
    border-color: rgba(168, 85, 247, 0.45);
    background: rgba(168, 85, 247, 0.12);
    color: #d8b4fe;
}

.forum-reply-action-btn.bookmark.active,
.forum-reply-action-btn.bookmark:hover {
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(96, 165, 250, 0.12);
    color: #93c5fd;
}

.forum-reply-action-btn.report:hover {
    border-color: rgba(251, 191, 36, 0.45);
    background: rgba(251, 191, 36, 0.12);
    color: #fde68a;
}

.forum-reply-action-btn.mention:hover {
    border-color: rgba(45, 212, 191, 0.45);
    background: rgba(45, 212, 191, 0.12);
    color: #99f6e4;
}

.forum-reply-liked-by {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1rem;
    padding: 0.55rem 0.75rem;
    border-left: 3px solid rgba(34, 211, 238, 0.65);
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.035);
    color: #b8c0ce;
    font-size: 0.8rem;
}

.forum-thread-replies {
    display: grid;
    gap: 1rem;
}

.forum-thread-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.25rem 0;
}

.forum-thread-section-title h2 {
    margin: 0;
    color: #f8fafc;
    font-size: 1rem;
}

.forum-thread-section-title span,
.forum-no-replies {
    color: #8b94a7;
    font-size: 0.84rem;
}

.forum-topic-reply-card {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    background: rgba(20, 20, 24, 0.92);
}

.forum-replying-to-banner .forum-reply-quote {
    margin-bottom: 0.25rem;
}

.forum-replying-to-label {
    color: #22d3ee;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    margin-bottom: 0.45rem;
}

.forum-topic-reply-card label {
    color: #f8fafc;
    font-weight: 800;
}

.forum-reply-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.forum-reply-char-counter {
    color: #8b94a7;
    font-size: 0.78rem;
    font-weight: 700;
}

.forum-reply-char-counter.at-limit {
    color: #f87171;
}

.forum-reply-suneditor,
.forum-topic-reply-card .sun-editor,
.forum-topic-reply-card .se-wrapper,
.forum-topic-reply-card .se-wrapper-inner,
.forum-topic-reply-card .se-wrapper-wysiwyg {
    background: #111116 !important;
    color: #f8fafc !important;
}

.forum-reply-suneditor {
    width: 100%;
    max-width: 100%;
    min-height: 180px;
    border-radius: 0.6rem;
    overflow: hidden;
}

.forum-topic-reply-card .sun-editor {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    border-color: rgba(168, 85, 247, 0.45) !important;
    border-radius: 0.6rem;
}

.forum-topic-reply-card .se-container,
.forum-topic-reply-card .se-wrapper,
.forum-topic-reply-card .se-wrapper-inner,
.forum-topic-reply-card .se-toolbar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.forum-topic-reply-card .se-toolbar {
    background: #17171d !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.forum-reply-composer-tools {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.forum-emoji-toggle {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    color: #d1d5db;
    cursor: pointer;
    padding: 0.45rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 800;
}

.forum-emoji-toggle:hover {
    border-color: rgba(168, 85, 247, 0.45);
    color: #ffffff;
}

.forum-emoji-picker {
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.6rem);
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(2rem, 2rem));
    justify-content: start;
    gap: 0.35rem;
    width: min(100%, 18rem);
    max-width: calc(100vw - 2rem);
    max-height: 14rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    background: #17171d;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

.forum-emoji-picker.hidden {
    display: none;
}

.forum-emoji-btn {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.045);
    cursor: pointer;
    font-size: 1.15rem;
}

.forum-emoji-btn:hover {
    background: rgba(168, 85, 247, 0.18);
}

.forum-topic-reply-card textarea {
    width: 100%;
    resize: vertical;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 0.6rem;
    background: #111116;
    color: #f8fafc;
    padding: 0.9rem 1rem;
    box-sizing: border-box;
    outline: none;
}

.forum-topic-reply-card textarea:focus {
    border-color: rgba(168, 85, 247, 0.65);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12);
}

.forum-topic-reply-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.forum-topic-reply-actions .forum-create-btn,
.forum-topic-reply-actions .forum-secondary-btn {
    min-height: 2.35rem;
    padding: 0.55rem 0.95rem;
    font-size: 0.82rem;
    line-height: 1;
}

.forum-topic-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.forum-topic-stat-grid div {
    display: grid;
    gap: 0.15rem;
    padding: 0.7rem 0.45rem;
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.045);
    text-align: center;
}

.forum-topic-stat-grid strong {
    color: #ffffff;
    font-size: 1rem;
}

.forum-topic-stat-grid span {
    color: #8b94a7;
    font-size: 0.72rem;
}

.forum-topic-state-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.9rem;
}

.forum-topic-pill.locked {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.12);
}

.forum-topic-pill.new {
    color: #ffffff;
    border-color: rgba(245, 158, 11, 0.55);
    background: #d97706;
}

.forum-topic-view-loading {
    display: grid;
    gap: 1rem;
}

.forum-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.74);
    backdrop-filter: blur(12px);
}

.forum-modal-overlay.hidden {
    display: none;
}

.forum-topic-modal,
.forum-detail-modal {
    width: min(620px, 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    background: #151519;
    padding: 1.35rem;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.forum-detail-modal {
    width: min(820px, 100%);
    max-height: min(88vh, 860px);
    overflow-y: auto;
}

.forum-modal-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.forum-modal-header h2 {
    margin: 0;
}

.forum-modal-header p {
    margin: 0.3rem 0 0;
    color: #9ca3af;
}

.forum-modal-header button {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
}

.forum-topic-modal label {
    display: block;
    color: #d1d5db;
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 1rem;
}

.forum-topic-modal input,
.forum-topic-modal select,
.forum-topic-modal textarea {
    width: 100%;
    margin-top: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.65rem;
    background: #0f0f12;
    color: #ffffff;
    padding: 0.85rem 0.95rem;
    box-sizing: border-box;
}

.forum-topic-modal textarea {
    resize: vertical;
}

.forum-detail-loading,
.forum-detail-content,
.forum-reply-locked {
    color: #d1d5db;
    line-height: 1.65;
}

.forum-detail-content {
    margin: 0.75rem 0 0;
}

.forum-detail-content p,
.forum-detail-content ul,
.forum-detail-content ol,
.forum-detail-content blockquote,
.forum-detail-content pre {
    margin: 0 0 0.85rem;
}

.forum-detail-content a {
    color: #22d3ee;
}

.forum-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: #8b94a7;
    font-size: 0.85rem;
}

.forum-replies {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 1.2rem;
    padding-top: 1rem;
}

.forum-replies h3 {
    margin: 0 0 1rem;
    font-size: 1rem;
}

.forum-reply {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.8rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.forum-reply-avatar img,
.forum-reply-avatar span {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
}

.forum-reply-avatar img {
    object-fit: cover;
}

.forum-reply-avatar span {
    display: grid;
    place-items: center;
    color: #ffffff;
    font-weight: 800;
    background: linear-gradient(135deg, #a855f7, #06b6d4);
}

.forum-reply-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: #8b94a7;
    font-size: 0.78rem;
}

.forum-reply-meta strong {
    color: #f8fafc;
}

.forum-reply p {
    margin: 0.35rem 0 0;
    color: #d1d5db;
    line-height: 1.55;
    white-space: pre-wrap;
}

.forum-reply-form {
    display: grid;
    gap: 0.8rem;
    margin-top: 1rem;
}

.forum-reply-form textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.65rem;
    background: #0f0f12;
    color: #ffffff;
    padding: 0.85rem 0.95rem;
    resize: vertical;
    box-sizing: border-box;
}

.forum-reply-form button {
    justify-self: end;
}

.forum-reply-locked {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.035);
    padding: 1rem;
}

.detail-tags {
    margin-top: 1rem;
}

.forum-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.2rem;
}

.forum-modal-actions button:first-child {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.6rem;
    color: #d1d5db;
    background: transparent;
    padding: 0.8rem 1rem;
    cursor: pointer;
}

.forum-skeleton {
    border-radius: 0.65rem;
    background: linear-gradient(90deg, #17171c 25%, #22222a 50%, #17171c 75%);
    background-size: 200% 100%;
    animation: forumSkeleton 1.2s infinite;
}

.forum-skeleton-tabs {
    height: 2.5rem;
    margin-bottom: 1rem;
}

.forum-skeleton-row {
    height: 6.4rem;
    margin: 1rem;
}

.forum-skeleton-side {
    height: 13rem;
}

@keyframes forumSkeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (max-width: 1400px) {
    .forum-layout {
        grid-template-columns: 1fr;
    }

    .forum-layout > .forum-side-stack {
        position: fixed;
        top: 60px;
        right: 0;
        bottom: 0;
        z-index: 1002;
        width: min(380px, calc(100vw - 1.25rem));
        min-width: 0;
        max-width: min(380px, calc(100vw - 1.25rem));
        height: calc(100dvh - 60px);
        padding: 4rem 0.85rem 1rem;
        overflow-y: auto;
        background: rgba(12, 12, 16, 0.98);
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
        transform: translateX(110%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0.25s ease;
    }

    .forum-layout > .forum-side-stack.open {
        transform: translateX(0);
        visibility: visible;
    }

    .forum-mobile-active-filter {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.55rem 0.75rem 0.55rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        color: #f8fafc;
        font-size: 0.85rem;
        font-weight: 800;
        background: rgba(255, 255, 255, 0.025);
    }

    .forum-drawer-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        border: 1px solid rgba(168, 85, 247, 0.38);
        border-radius: 999px;
        background: rgba(168, 85, 247, 0.16);
        color: #f8fafc;
        padding: 0.55rem 0.85rem;
        font-size: 0.82rem;
        font-weight: 800;
        box-shadow: 0 0 18px rgba(168, 85, 247, 0.16);
        cursor: pointer;
    }

    .forum-drawer-toggle svg {
        width: 1rem;
        height: 1rem;
    }

    .forum-drawer-close {
        position: absolute;
        top: 0.85rem;
        right: 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.35rem;
        height: 2.35rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        color: #f8fafc;
        cursor: pointer;
    }

    .forum-drawer-close svg {
        width: 1.15rem;
        height: 1.15rem;
    }

    .forum-drawer-overlay {
        position: fixed;
        inset: 0;
        z-index: 1001;
        display: block;
        background: rgba(0, 0, 0, 0.58);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .forum-drawer-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .forum-topic-view-layout {
        grid-template-columns: 1fr;
    }

    .forum-topic-view-layout > .forum-side-stack {
        position: fixed;
        top: 60px;
        right: 0;
        bottom: 0;
        z-index: 1002;
        width: min(380px, calc(100vw - 1.25rem));
        min-width: 0;
        max-width: min(380px, calc(100vw - 1.25rem));
        height: calc(100dvh - 60px);
        padding: 4rem 0.85rem 1rem;
        overflow-y: auto;
        background: rgba(12, 12, 16, 0.98);
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
        transform: translateX(110%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0.25s ease;
    }

    .forum-topic-view-layout > .forum-side-stack.open {
        transform: translateX(0);
        visibility: visible;
    }

    .forum-topic-drawer-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        border: 1px solid rgba(168, 85, 247, 0.38);
        border-radius: 999px;
        background: rgba(168, 85, 247, 0.16);
        color: #f8fafc;
        padding: 0.55rem 0.85rem;
        font-size: 0.82rem;
        font-weight: 800;
        box-shadow: 0 0 18px rgba(168, 85, 247, 0.16);
        cursor: pointer;
    }

    .forum-topic-drawer-toggle svg {
        width: 1rem;
        height: 1rem;
    }

    .forum-topic-view-page .forum-drawer-close {
        position: absolute;
        top: 0.85rem;
        right: 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.35rem;
        height: 2.35rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        color: #f8fafc;
        cursor: pointer;
    }

    .forum-topic-view-page .forum-drawer-close svg {
        width: 1.15rem;
        height: 1.15rem;
    }

    .forum-topic-view-page .forum-drawer-overlay {
        position: fixed;
        inset: 0;
        z-index: 1001;
        display: block;
        background: rgba(0, 0, 0, 0.58);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .forum-topic-view-page .forum-drawer-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 1023px) {
    .forum-layout,
    .forum-topic-view-layout {
        grid-template-columns: 1fr;
    }

    .forum-list-card::after {
        display: block;
        height: calc(6rem + env(safe-area-inset-bottom));
    }

    .forum-create-layout {
        grid-template-columns: 1fr;
    }

    .forum-layout > .forum-side-stack {
        position: fixed;
        top: 60px;
        right: 0;
        bottom: 0;
        z-index: 1002;
        width: min(380px, calc(100vw - 1.25rem));
        min-width: 0;
        max-width: min(380px, calc(100vw - 1.25rem));
        height: calc(100dvh - 60px);
        padding: 4rem 0.85rem 1rem;
        overflow-y: auto;
        background: rgba(12, 12, 16, 0.98);
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
        transform: translateX(110%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0.25s ease;
    }

    .forum-layout > .forum-side-stack.open {
        transform: translateX(0);
        visibility: visible;
    }

    .forum-drawer-close {
        position: absolute;
        top: 0.85rem;
        right: 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.35rem;
        height: 2.35rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        color: #f8fafc;
        cursor: pointer;
    }

    .forum-drawer-close svg {
        width: 1.15rem;
        height: 1.15rem;
    }

    .forum-drawer-overlay {
        position: fixed;
        inset: 0;
        z-index: 1001;
        display: block;
        background: rgba(0, 0, 0, 0.58);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .forum-drawer-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .forum-create-side {
        position: static;
    }
}

@media (max-width: 720px) {
    .forum-shell {
        padding: 0.85rem 0.55rem calc(7rem + env(safe-area-inset-bottom));
    }

    .forum-list-card {
        border-left: 0;
        border-right: 0;
        border-radius: 0.9rem;
        box-shadow: none;
    }

    .forum-tabs {
        display: grid;
        grid-template-columns: repeat(7, minmax(2.65rem, 1fr));
        overflow: visible;
        border-bottom-width: 1px;
    }

    .forum-tab {
        min-height: 3.35rem;
        padding: 0;
        gap: 0;
    }

    .forum-tab span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .forum-tab svg {
        width: 1.15rem;
        height: 1.15rem;
    }

    .forum-tab.active {
        color: #ffffff;
        background: linear-gradient(135deg, rgba(124, 58, 237, 0.85), rgba(168, 85, 247, 0.85));
    }

    .forum-mobile-active-filter {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.55rem 0.75rem 0.55rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        color: #f8fafc;
        font-size: 0.85rem;
        font-weight: 800;
        background: rgba(255, 255, 255, 0.025);
    }

    .forum-drawer-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        border: 1px solid rgba(168, 85, 247, 0.32);
        border-radius: 999px;
        background: rgba(168, 85, 247, 0.14);
        color: #f8fafc;
        padding: 0.4rem 0.7rem;
        font-size: 0.75rem;
        font-weight: 800;
        cursor: pointer;
    }

    .forum-drawer-toggle svg {
        width: 1rem;
        height: 1rem;
    }

    .forum-topic-image-grid {
        grid-template-columns: 1fr;
    }

    .forum-topic-view-header {
        flex-direction: column;
    }

    .forum-topic-view-actions {
        width: 100%;
        justify-content: space-between;
    }

    .forum-thread-post {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .forum-thread-author-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "avatar name"
            "avatar role";
        align-items: center;
        column-gap: 0.75rem;
        row-gap: 0.15rem;
        padding: 0.85rem 1rem;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        text-align: left;
    }

    .forum-thread-author-avatar-trigger {
        grid-area: avatar;
    }

    .forum-thread-author-name-trigger {
        grid-area: name;
        min-width: 0;
        justify-self: start;
        width: 100%;
        text-align: left;
    }

    .forum-thread-author-name-trigger strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .forum-thread-author-card > span {
        grid-area: role;
        font-size: 0.72rem;
        justify-self: start;
    }

    .forum-thread-author-stats {
        display: none;
    }

    .forum-thread-author-avatar img,
    .forum-thread-author-avatar span {
        width: 2.65rem;
        height: 2.65rem;
        font-size: 1rem;
    }

    .forum-thread-post-body {
        padding: 0.9rem 1rem 1rem;
    }

    .forum-thread-post-top {
        margin-bottom: 0.75rem;
    }

    .forum-content-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .forum-category-browser-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .forum-category-browser {
        padding: 0.8rem 0.7rem;
        gap: 0.75rem;
    }

    .forum-category-browser-tools {
        align-items: stretch;
        flex-direction: column;
        gap: 0.5rem;
    }

    .forum-category-browser-tools > span {
        align-self: flex-start;
        font-size: 0.7rem;
    }

    .forum-category-view-toggle {
        width: 100%;
    }

    .forum-category-view-toggle button {
        flex: 1;
    }

    .forum-category-list.grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .forum-category-list.grid .forum-category-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.55rem;
        min-height: 6.4rem;
        padding: 0.7rem;
    }

    .forum-category-list.grid .forum-category-chip-image {
        width: 1.75rem;
        height: 1.75rem;
    }

    .forum-selected-category-bar {
        align-items: flex-start;
        flex-direction: column;
        padding: 0.75rem;
    }

    .forum-selected-category-title {
        width: 100%;
        text-align: left;
    }

    .forum-news-header,
    .forum-news-login {
        align-items: stretch;
        flex-direction: column;
    }

    .forum-news-table-header {
        display: none;
    }

    .forum-news-form-grid,
    .forum-news-row {
        grid-template-columns: 1fr;
    }

    .forum-news-source {
        justify-self: end;
    }

    .forum-create-card {
        padding: 1rem;
    }

    .forum-create-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .forum-create-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .forum-content-left,
    .forum-content-actions {
        width: 100%;
        align-items: stretch;
    }

    .forum-content-left {
        flex-direction: column;
    }

    .forum-search-form {
        max-width: none;
        flex-basis: auto;
    }

    .forum-topic-row {
        grid-template-columns: 2.45rem minmax(0, 1fr);
        gap: 0.7rem;
        padding: 0.85rem 0.75rem;
        align-items: start;
    }

    .forum-topic-row.has-thumbnail .forum-topic-main {
        grid-template-columns: minmax(0, 1fr) 5.75rem;
        gap: 0.65rem;
    }

    .forum-topic-thumbnail-wrap {
        width: 5.75rem;
        border-radius: 0.55rem;
    }

    .forum-topic-avatar,
    .forum-topic-avatar.initials {
        width: 2.35rem;
        height: 2.35rem;
        font-size: 0.82rem;
    }

    .forum-topic-status {
        right: 0.15rem;
        top: 0.05rem;
    }

    .forum-topic-title-line {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .forum-topic-main {
        gap: 0.5rem;
    }

    .forum-topic-main h2 {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.96rem;
        line-height: 1.3;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .forum-topic-main p {
        display: -webkit-box;
        overflow: hidden;
        margin-top: 0.3rem;
        font-size: 0.8rem;
        line-height: 1.4;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .forum-topic-meta {
        gap: 0.35rem;
        margin-top: 0.4rem;
        font-size: 0.7rem;
    }

    .forum-topic-category-badge {
        max-width: 9.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .forum-topic-tags {
        max-height: 1.65rem;
        overflow: hidden;
        gap: 0.25rem;
        margin-top: 0.5rem;
    }

    .forum-topic-tags span {
        padding: 0.17rem 0.45rem;
        font-size: 0.68rem;
    }

    .forum-topic-stats {
        grid-column: 2 / -1;
        flex-direction: row;
        align-items: center;
        border-left: 0;
        border-top: 0;
        justify-content: flex-start;
        gap: 0.4rem;
        padding: 0.1rem 0 0;
    }

    .forum-reply-count {
        min-width: auto;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.3rem 0.5rem;
        font-size: 0.78rem;
    }

    .forum-reply-count::after {
        content: "replies";
        color: #d8b4fe;
        font-size: 0.68rem;
        font-weight: 700;
    }

    .forum-stat-line {
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.035);
        padding: 0.28rem 0.5rem;
        font-size: 0.7rem;
    }

    .forum-reply-locked {
        align-items: stretch;
        flex-direction: column;
    }
}
/* Profile View Styles */
viralbuzz-view-profile {
    display: none;
    margin-top: 60px; /* Below fixed header */
    transition: margin-left 0.3s ease-in-out, transform 0.3s ease-in-out;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    width: 100%;
    margin-left: 0;
}

/* Mobile: Push layout - content shifts right when sidebar is open */
@media (max-width: 1023px) {
    viralbuzz-view-profile {
        margin-left: 0;
        width: 100%;
        transition: transform 0.3s ease-in-out;
    }
    
    /* When sidebar is open on mobile, shift content right */
    viralbuzz-view-profile.sidebar-open {
        transform: translateX(16rem);
    }
    
    /* When sidebar is closed, content is centered */
    viralbuzz-view-profile.sidebar-closed {
        transform: translateX(0);
    }
}

/* Desktop: content shifts right to make room for sidebar when open */
@media (min-width: 1024px) {
    viralbuzz-view-profile {
        margin-left: 16rem;
        width: calc(100% - 16rem);
        transform: none;
    }
    
    /* When sidebar is closed, main content expands to full width */
    viralbuzz-view-profile.sidebar-closed {
        margin-left: 0;
        width: 100%;
    }
    
    /* When sidebar is open, ensure proper spacing */
    viralbuzz-view-profile.sidebar-open {
        margin-left: 16rem;
        width: calc(100% - 16rem);
    }
}

.profile-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

.profile-action-btn {
    min-height: 2.75rem;
}

.profile-private-layout {
    display: grid;
    grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.profile-private-main {
    min-width: 0;
}

.profile-private-side-nav {
    position: sticky;
    top: 76px;
    display: grid;
    gap: 0.65rem;
    padding: 0.9rem;
    background: var(--dark-card, #1a1a1a);
    border: 1px solid var(--border-gray-700, #374151);
    border-radius: 1rem;
}

.profile-private-side-eyebrow {
    margin: 0 0 0.2rem;
    color: #9ca3af;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-private-side-link {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.025);
    color: #f8fafc;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.profile-private-side-link:hover,
.profile-private-side-link.active {
    border-color: rgba(0, 255, 255, 0.42);
    background: rgba(0, 255, 255, 0.08);
}

.profile-private-side-link svg {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--neon-cyan, #00ffff);
}

.profile-private-side-link strong,
.profile-private-side-link small {
    display: block;
    min-width: 0;
}

.profile-private-side-link strong {
    font-size: 0.9rem;
}

.profile-private-side-link small {
    color: #9ca3af;
    font-size: 0.74rem;
    line-height: 1.25;
}

.profile-private-bio {
    line-height: 1.6;
}

.profile-private-bio.is-collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.profile-private-bio-toggle {
    margin-top: 0.35rem;
    color: var(--neon-cyan, #00ffff);
    font-size: 0.85rem;
    font-weight: 800;
}

.profile-private-main > div:has([data-accordion="recent-articles"]),
.profile-private-main > div:has([data-accordion="top-posts"]),
.profile-private-main > div:has([data-accordion="top-referrers"]),
.profile-private-main > div:has([data-accordion="top-search-terms"]) {
    display: none;
}

.profile-forum-replies-modal {
    top: 60px;
}

@media (min-width: 1024px) {
    .profile-container {
        padding: 0 2rem;
    }
}

@media (max-width: 1023px) {
    .profile-private-layout {
        grid-template-columns: 1fr;
    }

    .profile-private-side-nav {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 0.65rem;
    }

    .profile-private-side-eyebrow {
        grid-column: 1 / -1;
    }

    .profile-private-side-link {
        align-content: start;
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding: 0.7rem 0.45rem;
    }

    .profile-private-side-link small {
        display: none;
    }
}

@media (max-width: 767px) {
    viralbuzz-view-profile {
        margin-top: 56px;
    }

    .profile-forum-replies-modal {
        top: 56px;
    }

    .profile-container {
        padding: 0 0.35rem;
    }

    .profile-container > .p-4.mb-6.pt-8 {
        padding: 0.7rem 0.45rem 0.85rem !important;
        margin-bottom: 0.7rem !important;
    }

    .profile-header-top {
        align-items: stretch !important;
        flex-direction: column;
        gap: 0.85rem;
    }

    .profile-page-title {
        font-size: 1.35rem !important;
        line-height: 1.2;
    }

    .profile-action-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem !important;
        width: 100%;
    }

    .profile-action-btn {
        width: 100%;
        justify-content: center;
        min-width: 0;
        min-height: 3.05rem;
        padding: 0.7rem 0.75rem !important;
        border-radius: 0.85rem !important;
        font-size: 0.9rem;
        line-height: 1.15;
        text-align: center;
        white-space: normal;
    }

    .profile-action-btn svg {
        width: 1.05rem;
        height: 1.05rem;
        flex-shrink: 0;
    }

    .profile-logout-btn {
        grid-column: 1 / -1;
        min-height: 2.85rem;
    }

    .profile-summary-row {
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    .profile-summary-row > div:first-child {
        width: 5.25rem !important;
        height: 5.25rem !important;
    }

    .profile-summary-row h1 {
        font-size: 1.55rem !important;
        line-height: 1.15;
    }

    .profile-summary-row .flex.items-center.gap-6 {
        gap: 1rem !important;
        flex-wrap: wrap;
    }

    .profile-private-side-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.45rem;
        padding: 0.45rem;
        overflow: visible;
    }

    .profile-private-side-nav::-webkit-scrollbar {
        display: none;
    }

    .profile-private-side-eyebrow {
        display: none;
    }

    .profile-private-side-link {
        min-width: 0;
        min-height: 4.1rem;
        padding: 0.55rem 0.35rem;
        border-radius: 0.75rem;
        font-size: 0.82rem;
    }

    .profile-private-side-link svg {
        width: 1rem;
        height: 1rem;
    }

    .profile-private-layout {
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 0.7rem;
    }

    .profile-private-main > .px-4 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 0.75rem !important;
    }

    .profile-private-main .analytics-tab {
        padding: 0.85rem 1rem !important;
        font-size: 0.78rem !important;
    }

    .profile-private-main .analytics-tab-content {
        padding: 1rem 0.65rem !important;
    }

    .profile-private-main .timeframe-btn {
        padding: 0.55rem 0.75rem !important;
        font-size: 0.8rem !important;
    }

    .profile-private-main select {
        min-width: 0;
    }
}

.stat-card {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 255, 255, 0.1) 100%);
    border: 1px solid rgba(0, 255, 136, 0.2);
}

.auto-hide-scrollbar {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(156, 163, 175, 0.2) transparent !important;
}

.auto-hide-scrollbar::-webkit-scrollbar {
    width: 3px !important;
    height: 3px !important;
}

.auto-hide-scrollbar::-webkit-scrollbar-track {
    background: transparent !important;
}

.auto-hide-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2) !important;
    border-radius: 3px !important;
}

.auto-hide-scrollbar:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4) !important;
}

/* Accordion Styles */
.accordion-header {
    transition: all 0.2s ease;
}

.accordion-header:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.accordion-icon {
    transition: transform 0.3s ease;
}

.accordion-content {
    transition: all 0.3s ease;
}

/* Compact Article Item */
.article-item {
    transition: all 0.2s ease;
}

.article-item:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Analytics Tabs */
.analytics-tab {
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
}

.analytics-tab:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.analytics-tab.active {
    color: #ffffff;
    border-bottom-color: #00ff88;
}

.analytics-tab-content {
    min-height: 400px;
}

.analytics-tab-content.hidden {
    display: none;
}

/* Error Container - Centers the error alert */
.error-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 60px); /* Full height minus header */
    width: 100%;
    padding: 2rem 1rem;
}

@media (min-width: 1024px) {
    .error-container {
        padding: 2rem;
    }
}

/* Error Alert Animations */
@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.5));
    }
    50% {
        opacity: 0.8;
        filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.8));
    }
}

.animate-slide-in {
    animation: slide-in 1s ease-out;
}

.error-alert {
    box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.1), 0 2px 4px -1px rgba(239, 68, 68, 0.06);
    max-width: 500px;
    width: 100%;
}

.error-icon-wrapper {
    animation: pulse-glow 3s ease-in-out infinite;
}

.retry-btn {
    min-width: 120px;
}

.retry-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.retry-btn:not(:disabled):hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

/* Post Analytics Styles */
.post-analytics-item {
    transition: all 0.3s ease;
}

.post-analytics-item:hover {
    transform: translateY(-2px);
}

.forum-analytics-item {
    transition: all 0.3s ease;
}

.forum-analytics-item:hover {
    transform: translateY(-2px);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
    opacity: 0;
}

#post-analytics-loading .spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid rgba(0, 255, 136, 0.2);
    border-top-color: #00ff88;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* My Posts - dark theme, matches profile */
viralbuzz-my-posts {
    display: none;
    width: 100%;
    min-height: 100vh;
    background: var(--dark-bg, #0f0f0f);
    box-sizing: border-box;
    overflow-x: hidden;
}

.my-posts-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 1rem clamp(1rem, 2vw, 2rem) 2rem;
}

.my-posts-header {
    margin-bottom: 1rem;
}

.my-posts-title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.my-posts-title-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.my-posts-search {
    position: relative;
    min-width: min(320px, 42vw);
}

.my-posts-search input {
    width: 100%;
    padding: 0.65rem 0.9rem 0.65rem 2.25rem;
    border: 1px solid var(--border-gray-700, #374151);
    border-radius: 0.5rem;
    background: var(--dark-card, #1a1a1a);
    color: #fff;
    font-size: 0.875rem;
    outline: none;
}

.my-posts-search input:focus {
    border-color: var(--neon-cyan, #00ffff);
    box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.08);
}

.my-posts-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    transform: translateY(-50%);
    color: var(--text-gray-400, #9ca3af);
    pointer-events: none;
}

.my-posts-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.25rem 0;
}

.my-posts-subtitle {
    font-size: 0.875rem;
    color: var(--text-gray-400, #9ca3af);
    margin: 0;
}

.my-posts-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.my-posts-sidebar {
    background: var(--dark-card, #1a1a1a);
    border: 1px solid var(--border-gray-700, #374151);
    border-radius: 0.75rem;
    padding: 0.6rem;
    display: grid;
    gap: 0.5rem;
}

.my-posts-sidebar-item {
    width: 100%;
    text-align: left;
    padding: 0.85rem;
    border: 1px solid transparent;
    border-radius: 0.6rem;
    background: transparent;
    color: #e5e7eb;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.my-posts-sidebar-item span {
    display: block;
    font-weight: 800;
    margin-bottom: 0.2rem;
}

.my-posts-sidebar-item small {
    color: var(--text-gray-400, #9ca3af);
    font-size: 0.75rem;
}

.my-posts-sidebar-item.active,
.my-posts-sidebar-item:hover {
    border-color: rgba(0, 255, 255, 0.45);
    background: rgba(0, 255, 255, 0.08);
    color: #fff;
}

.my-posts-main {
    min-width: 0;
}

.my-posts-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.95rem;
    border: 1px solid var(--border-gray-700, #374151);
    border-radius: 0.5rem;
    background: var(--dark-card, #1a1a1a);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, opacity 0.2s;
}

.my-posts-refresh-btn:hover,
.my-posts-refresh-btn:focus {
    border-color: var(--neon-cyan, #00ffff);
    color: var(--neon-cyan, #00ffff);
}

.my-posts-refresh-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.my-posts-refresh-btn:disabled .my-posts-refresh-icon {
    animation: my-posts-spin 0.8s linear infinite;
}

.my-posts-refresh-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.my-posts-loading,
.my-posts-empty {
    padding: 1rem;
    margin-bottom: 1rem;
    text-align: center;
    color: var(--text-gray-400, #9ca3af);
    background: var(--dark-card, #1a1a1a);
    border: 1px solid var(--border-gray-700, #374151);
    border-radius: 0.5rem;
}

.my-posts-loading .spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: var(--neon-green, #00ff88);
    border-radius: 50%;
    animation: my-posts-spin 0.8s linear infinite;
    margin-right: 0.5rem;
    vertical-align: middle;
}

@keyframes my-posts-spin {
    to { transform: rotate(360deg); }
}

.my-posts-table-wrap {
    background: var(--dark-card, #1a1a1a);
    border: 1px solid var(--border-gray-700, #374151);
    border-radius: 0.5rem;
    overflow: visible;
}

.my-posts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    table-layout: fixed;
}

.my-posts-table-articles colgroup col:nth-child(1) {
    width: 66px;
}

.my-posts-table-articles colgroup col:nth-child(2) {
    width: auto;
}

.my-posts-table-articles colgroup col:nth-child(3) {
    width: 160px;
}

.my-posts-table-articles colgroup col:nth-child(4) {
    width: 150px;
}

.my-posts-table-articles colgroup col:nth-child(5) {
    width: 150px;
}

.my-posts-table-forum colgroup col:nth-child(1) {
    width: 66px;
}

.my-posts-table-forum colgroup col:nth-child(2) {
    width: auto;
}

.my-posts-table-forum colgroup col:nth-child(3) {
    width: 190px;
}

.my-posts-table-forum colgroup col:nth-child(4) {
    width: 132px;
}

.my-posts-table th {
    text-align: left;
    padding: 0.75rem 0.7rem;
    color: var(--text-gray-400, #9ca3af);
    font-weight: 600;
    border-bottom: 1px solid var(--border-gray-700, #374151);
    white-space: nowrap;
}

.my-posts-table td {
    padding: 0.75rem 0.7rem;
    border-bottom: 1px solid var(--border-gray-700, #374151);
    color: #e5e7eb;
    vertical-align: top;
}

.my-posts-table tbody tr:last-child td {
    border-bottom: none;
}

.my-posts-table tbody tr:hover {
    background: rgba(255,255,255,0.03);
}

.my-posts-thumb-col {
    width: 66px;
}

.my-posts-cell-thumb {
    width: 66px;
    padding: 0.5rem !important;
    vertical-align: middle;
}

.my-posts-thumb {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 0.25rem;
    display: block;
    background: var(--dark-surface, #121212);
}

.my-posts-thumb-placeholder {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: var(--text-gray-400, #9ca3af);
    font-size: 0.75rem;
    background: var(--dark-surface, #121212);
    border-radius: 0.25rem;
}

.my-posts-cell-title {
    overflow: hidden;
    white-space: normal;
}

.my-posts-title-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-posts-row-subtitle {
    display: block;
    margin-top: 0.2rem;
    color: var(--text-gray-400, #9ca3af);
    font-size: 0.75rem;
}

.my-posts-title-meta {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-top: 0.32rem;
}

.my-posts-cell-type {
    font-size: 0.8125rem;
    color: var(--text-gray-400, #9ca3af);
    white-space: nowrap;
}

.my-posts-type-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(168, 85, 247, 0.16);
    color: #c084fc;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
}

.my-posts-engagement {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--text-gray-400, #9ca3af);
    font-size: 0.75rem;
    line-height: 1;
}

.my-posts-engagement-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.my-posts-engagement-item svg {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
}

.my-posts-cell-categories {
    font-size: 0.8125rem;
    color: var(--text-gray-400, #9ca3af);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-posts-status {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.my-posts-details-col {
    width: 150px;
}

.my-posts-cell-details {
    white-space: nowrap;
}

.my-posts-date-line {
    display: block;
    margin-top: 0.2rem;
    color: var(--text-gray-400, #9ca3af);
    font-size: 0.7rem;
    line-height: 1.2;
}

.my-posts-metric-line {
    display: block;
    color: #e5e7eb;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: normal;
    line-height: 1.25;
}

.my-posts-status-published {
    background: rgba(0, 255, 136, 0.15);
    color: var(--neon-green, #00ff88);
}

.my-posts-status-scheduled {
    background: rgba(0, 255, 255, 0.15);
    color: var(--neon-cyan, #00ffff);
}

.my-posts-status-draft {
    background: rgba(156, 163, 175, 0.2);
    color: #9ca3af;
}

.my-posts-status-unpublished {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.my-posts-actions-col {
    width: 150px;
    white-space: nowrap;
}

/* Keep td as normal table cell so row height and borders align; flex is on inner wrap */
.my-posts-actions-cell {
    vertical-align: top;
    background: var(--dark-card, #1a1a1a);
}

.my-posts-actions-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.35rem;
    align-items: center;
    justify-content: flex-start;
}

.my-posts-btn {
    padding: 0.35rem 0.6rem;
    border: none;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, background 0.2s;
}

.my-posts-btn-icon {
    padding: 0.42rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.my-posts-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.my-posts-no-rows {
    text-align: center;
    color: var(--text-gray-400, #9ca3af);
    padding: 2rem 1rem !important;
    font-size: 0.875rem;
}

.my-posts-btn-view {
    background: rgba(0, 255, 255, 0.15);
    color: var(--neon-cyan, #00ffff);
}

.my-posts-btn-view:hover {
    background: rgba(0, 255, 255, 0.25);
}

.my-posts-btn-edit {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
}

.my-posts-btn-edit:hover {
    background: rgba(168, 85, 247, 0.35);
}

.my-posts-btn-status {
    background: rgba(0, 255, 136, 0.15);
    color: var(--neon-green, #00ff88);
}

.my-posts-btn-status:hover {
    background: rgba(0, 255, 136, 0.25);
}

.my-posts-btn-delete {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.my-posts-btn-delete:hover {
    background: rgba(239, 68, 68, 0.25);
}

.my-posts-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.my-posts-page-btn {
    padding: 0.5rem 1rem;
    background: var(--dark-card, #1a1a1a);
    border: 1px solid var(--border-gray-700, #374151);
    border-radius: 0.375rem;
    color: #e5e7eb;
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.my-posts-page-btn:hover {
    border-color: var(--neon-cyan, #00ffff);
    background: rgba(0, 255, 255, 0.05);
}

.my-posts-page-info {
    color: var(--text-gray-400, #9ca3af);
    font-size: 0.875rem;
}

.hidden {
    display: none !important;
}

@media (max-width: 900px) {
    .my-posts-layout {
        grid-template-columns: 1fr;
    }

    .my-posts-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .my-posts-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .my-posts-title-actions {
        width: 100%;
        justify-content: space-between;
    }

    .my-posts-search {
        flex: 1 1 220px;
        min-width: 0;
    }

}

@media (max-width: 760px) {
    .my-posts-table-articles th:nth-child(3),
    .my-posts-table-articles td:nth-child(3) {
        display: none;
    }

    .my-posts-actions-col {
        width: 132px;
    }

    .my-posts-actions-wrap {
        gap: 0.25rem;
    }
}
viralbuzz-profile-activity {
    display: none;
    width: 100%;
    min-height: 100vh;
    background: var(--dark-bg, #0f0f0f);
    box-sizing: border-box;
}

.profile-activity-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem 2rem;
}

.profile-activity-back-row {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
    color: #d1d5db;
    cursor: pointer;
    font-weight: 700;
}

.profile-activity-back-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-gray-700, #374151);
    border-radius: 0.65rem;
    color: #d1d5db;
    background: transparent;
}

.profile-activity-back-btn svg {
    width: 1.35rem;
    height: 1.35rem;
}

.profile-activity-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.profile-activity-header h1 {
    margin: 0 0 0.25rem;
    color: #fff;
    font-size: 1.85rem;
    font-weight: 800;
}

.profile-activity-header p {
    margin: 0;
    color: var(--text-gray-400, #9ca3af);
}

.profile-activity-header-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.profile-activity-refresh-btn,
.profile-activity-drawer-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px solid rgba(0, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(0, 255, 255, 0.08);
    color: var(--neon-cyan, #00ffff);
    padding: 0.55rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.profile-activity-refresh-btn svg,
.profile-activity-drawer-toggle svg {
    width: 1rem;
    height: 1rem;
}

.profile-activity-refresh-btn.loading svg {
    animation: profile-activity-spin 0.8s linear infinite;
}

.profile-activity-drawer-toggle {
    display: none;
}

.profile-activity-loading,
.profile-activity-empty {
    padding: 1rem;
    color: var(--text-gray-400, #9ca3af);
    background: var(--dark-card, #1a1a1a);
    border: 1px solid var(--border-gray-700, #374151);
    border-radius: 0.75rem;
}

.profile-activity-loading .spinner {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--neon-green, #00ff88);
    border-radius: 50%;
    animation: profile-activity-spin 0.8s linear infinite;
    margin-right: 0.5rem;
    vertical-align: middle;
}

@keyframes profile-activity-spin {
    to { transform: rotate(360deg); }
}

.profile-activity-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.profile-activity-stat,
.profile-activity-card {
    background: var(--dark-card, #1a1a1a);
    border: 1px solid var(--border-gray-700, #374151);
    border-radius: 0.9rem;
}

.profile-activity-stat {
    padding: 1rem;
}

.profile-activity-stat strong {
    display: block;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
}

.profile-activity-stat span {
    color: var(--text-gray-400, #9ca3af);
    font-size: 0.8rem;
}

.profile-activity-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    gap: 1rem;
    align-items: start;
}

.profile-activity-main {
    min-width: 0;
}

.profile-activity-side-stack {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.profile-activity-drawer-close,
.profile-activity-drawer-overlay {
    display: none;
}

.profile-activity-timeline-card {
    margin-bottom: 1rem;
}

.profile-activity-timeline {
    display: grid;
    gap: 0.75rem;
}

.profile-activity-timeline-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid rgba(55, 65, 81, 0.72);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.025);
    cursor: pointer;
}

.profile-activity-timeline-icon {
    width: 2.15rem;
    height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(0, 255, 255, 0.09);
    border: 1px solid rgba(0, 255, 255, 0.22);
    color: var(--neon-cyan, #00ffff);
    font-size: 0.8rem;
    font-weight: 900;
}

.profile-activity-timeline-body {
    min-width: 0;
}

.profile-activity-timeline-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.profile-activity-timeline-top h3 {
    margin: 0;
    color: #fff;
    font-size: 0.95rem;
}

.profile-activity-timeline-top time,
.profile-activity-timeline-body span {
    color: var(--text-gray-400, #9ca3af);
    font-size: 0.78rem;
    white-space: nowrap;
}

.profile-activity-timeline-body p {
    margin: 0.25rem 0 0.1rem;
    color: #d1d5db;
    font-size: 0.85rem;
    line-height: 1.45;
}

.profile-activity-card {
    padding: 1rem;
}

.profile-activity-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.profile-activity-card-head h2 {
    margin: 0;
    color: #fff;
    font-size: 1.05rem;
}

.profile-activity-card-head button {
    border: 1px solid rgba(0, 255, 255, 0.4);
    color: var(--neon-cyan, #00ffff);
    background: rgba(0, 255, 255, 0.08);
    border-radius: 0.45rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.profile-activity-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-top: 1px solid rgba(55, 65, 81, 0.75);
    cursor: pointer;
}

.profile-activity-item h3 {
    color: #fff;
    font-size: 0.95rem;
    margin: 0 0 0.2rem;
}

.profile-activity-item p,
.profile-activity-item span {
    margin: 0;
    color: var(--text-gray-400, #9ca3af);
    font-size: 0.8rem;
}

.profile-activity-item.muted h3 {
    color: #e5e7eb;
}

.profile-activity-divider {
    height: 1px;
    background: rgba(0, 255, 255, 0.18);
    margin: 0.35rem 0;
}

.hidden {
    display: none !important;
}

@media (max-width: 900px) {
    .profile-activity-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-activity-container {
        padding: 0.85rem 0.75rem calc(5rem + env(safe-area-inset-bottom));
    }

    .profile-activity-timeline-top {
        flex-direction: column;
        gap: 0.15rem;
    }

    .profile-activity-timeline-top time {
        white-space: normal;
    }
}

@media (max-width: 1023px) {
    .profile-activity-header {
        flex-direction: column;
    }

    .profile-activity-header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .profile-activity-drawer-toggle {
        display: inline-flex;
    }

    .profile-activity-layout {
        grid-template-columns: 1fr;
    }

    .profile-activity-side-stack {
        position: fixed;
        top: 60px;
        right: 0;
        bottom: 0;
        z-index: 1002;
        width: min(380px, calc(100vw - 1.25rem));
        height: calc(100dvh - 60px);
        padding: 4rem 0.85rem 1rem;
        overflow-y: auto;
        background: rgba(12, 12, 16, 0.98);
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
        transform: translateX(110%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0.25s ease;
    }

    .profile-activity-side-stack.open {
        transform: translateX(0);
        visibility: visible;
    }

    .profile-activity-drawer-close {
        position: absolute;
        top: 0.85rem;
        right: 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.35rem;
        height: 2.35rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        color: #f8fafc;
        cursor: pointer;
    }

    .profile-activity-drawer-close svg {
        width: 1.15rem;
        height: 1.15rem;
    }

    .profile-activity-drawer-overlay {
        position: fixed;
        inset: 0;
        z-index: 1001;
        display: block;
        background: rgba(0, 0, 0, 0.58);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .profile-activity-drawer-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 520px) {
    .profile-activity-stats {
        grid-template-columns: 1fr;
    }

    .profile-activity-header-actions {
        align-items: stretch;
    }

    .profile-activity-refresh-btn,
    .profile-activity-drawer-toggle {
        flex: 1 1 0;
    }
}
/* Edit Profile Styles */
viralbuzz-edit-profile {
    display: none;
    margin-top: 60px; /* Below fixed header */
    transition: margin-left 0.3s ease-in-out, transform 0.3s ease-in-out;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    width: 100%;
    margin-left: 0;
}

/* Mobile: Push layout - content shifts right when sidebar is open */
@media (max-width: 1023px) {
    viralbuzz-edit-profile {
        margin-left: 0;
        width: 100%;
        transition: transform 0.3s ease-in-out;
    }
    
    /* When sidebar is open on mobile, shift content right */
    viralbuzz-edit-profile.sidebar-open {
        transform: translateX(16rem);
    }
    
    /* When sidebar is closed, content is centered */
    viralbuzz-edit-profile.sidebar-closed {
        transform: translateX(0);
    }
}

/* Desktop: content shifts right to make room for sidebar when open */
@media (min-width: 1024px) {
    viralbuzz-edit-profile {
        margin-left: 16rem;
        width: calc(100% - 16rem);
        transform: none;
    }
    
    /* When sidebar is closed, main content expands to full width */
    viralbuzz-edit-profile.sidebar-closed {
        margin-left: 0;
        width: 100%;
    }
    
    /* When sidebar is open, ensure proper spacing */
    viralbuzz-edit-profile.sidebar-open {
        margin-left: 16rem;
        width: calc(100% - 16rem);
    }
}

.edit-profile-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 1024px) {
    .edit-profile-container {
        padding: 0 2rem;
    }
}

.tab-btn {
    transition: all 0.2s ease;
}

.tab-btn.active {
    background: rgba(0, 255, 136, 0.1);
    border-color: #00ff88;
    color: #00ff88;
}

.tab-content {
    display: block;
}

.tab-content.hidden {
    display: none;
}

.edit-profile-mobile-settings-row,
.edit-profile-settings-overlay,
.edit-profile-settings-header {
    display: none;
}

body.edit-profile-settings-drawer-open {
    overflow: hidden;
}

.edit-profile-settings-toggle {
    width: 100%;
    border: 1px solid rgba(168, 85, 247, 0.45);
    border-radius: 0.95rem;
    background: rgba(24, 24, 24, 0.92);
    color: #ffffff;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.edit-profile-settings-toggle span {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.edit-profile-settings-toggle svg {
    width: 1.2rem;
    height: 1.2rem;
}

.edit-profile-settings-toggle strong {
    color: #00ff88;
    font-size: 0.82rem;
    white-space: nowrap;
}

.profile-pic-upload {
    position: relative;
    display: inline-block;
}

.profile-pic-upload input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.follow-action-btn.following {
    position: relative;
    overflow: hidden;
}

.follow-action-btn.following .follow-action-label {
    display: inline-block;
    transition: opacity 0.2s ease;
}

.follow-action-btn.following:hover .follow-action-label {
    opacity: 0;
}

.follow-action-btn.following::after {
    content: 'Unfollow';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    white-space: nowrap;
}

.follow-action-btn.following:hover::after {
    opacity: 1;
}

.preference-user-section {
    border: 1px solid #374151;
    border-radius: 0.75rem;
    background: rgba(15, 15, 15, 0.45);
    padding: 1rem;
}

.preference-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid #374151;
    border-radius: 0.75rem;
    background: #121212;
    padding: 0.85rem;
}

.preference-user-avatar {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    padding: 2px;
    background: linear-gradient(135deg, #ff00ff, #9333ea, #00ffff);
}

.preference-user-avatar img,
.preference-user-avatar span {
    width: 100%;
    height: 100%;
    border-radius: 999px;
}

.preference-user-avatar img {
    object-fit: cover;
}

.preference-user-avatar span {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #181818;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
}

.preference-user-avatar span.hidden {
    display: none;
}

.preference-user-action {
    flex: 0 0 auto;
    border: 1px solid rgba(168, 85, 247, 0.5);
    border-radius: 0.65rem;
    background: rgba(168, 85, 247, 0.14);
    color: #f5f3ff;
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.preference-user-action:hover {
    border-color: rgba(168, 85, 247, 0.85);
    background: rgba(168, 85, 247, 0.25);
}

@media (max-width: 640px) {
    .preference-user-row {
        align-items: stretch;
        flex-direction: column;
    }

    .preference-user-action {
        width: 100%;
    }
}

@media (max-width: 1023px) {
    .edit-profile-mobile-settings-row {
        display: block;
        margin: -0.5rem 0 1rem;
    }

    .edit-profile-settings-shell {
        position: fixed;
        top: 56px;
        right: 0;
        bottom: 0;
        z-index: 10040;
        width: min(22rem, 88vw);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.24s ease, visibility 0.24s ease;
    }

    .edit-profile-settings-shell.open {
        transform: translateX(0);
        visibility: visible;
    }

    .edit-profile-settings-panel {
        height: 100%;
        overflow-y: auto;
        border-radius: 1rem 0 0 1rem !important;
        border-right: none !important;
        padding: 1rem !important;
        box-shadow: -20px 0 60px rgba(0, 0, 0, 0.48);
    }

    .edit-profile-settings-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .edit-profile-settings-back,
    .edit-profile-settings-close {
        border: 1px solid rgba(148, 163, 184, 0.35);
        background: rgba(255, 255, 255, 0.06);
        color: #f8fafc;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        min-height: 2.35rem;
        padding: 0 0.85rem;
        font-weight: 800;
    }

    .edit-profile-settings-close {
        width: 2.35rem;
        padding: 0;
    }

    .edit-profile-settings-back svg,
    .edit-profile-settings-close svg {
        width: 1rem;
        height: 1rem;
    }

    .edit-profile-settings-overlay {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10039;
        display: block;
        background: rgba(0, 0, 0, 0.62);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    body.edit-profile-settings-drawer-open .edit-profile-settings-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    viralbuzz-edit-profile .tab-content > .bg-dark-card {
        padding: 1rem !important;
    }
}

@media (max-width: 767px) {
    viralbuzz-edit-profile {
        margin-top: 56px;
    }

    .edit-profile-container {
        padding: 0 0.75rem;
    }
}

/*!
 * Cropper.js v1.4.1
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2018-07-15T09:54:43.167Z
 */

.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cropper-container img {
  display: block;
  height: 100%;
  image-orientation: 0deg;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100%;
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  opacity: .5;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline-color: rgba(51, 153, 255, 0.75);
  outline: 1px solid #39f;
  overflow: hidden;
  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: .5;
  position: absolute;
}

.cropper-dashed.dashed-h {
  border-bottom-width: 1px;
  border-top-width: 1px;
  height: calc(100% / 3);
  left: 0;
  top: calc(100% / 3);
  width: 100%;
}

.cropper-dashed.dashed-v {
  border-left-width: 1px;
  border-right-width: 1px;
  height: 100%;
  left: calc(100% / 3);
  top: 0;
  width: calc(100% / 3);
}

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: .75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-center:before,
.cropper-center:after {
  background-color: #eee;
  content: ' ';
  display: block;
  position: absolute;
}

.cropper-center:before {
  height: 1px;
  left: -3px;
  top: 0;
  width: 7px;
}

.cropper-center:after {
  height: 7px;
  left: 0;
  top: -3px;
  width: 1px;
}

.cropper-face,
.cropper-line,
.cropper-point {
  display: block;
  height: 100%;
  opacity: .1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: #39f;
}

.cropper-line.line-e {
  cursor: ew-resize;
  right: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-n {
  cursor: ns-resize;
  height: 5px;
  left: 0;
  top: -3px;
}

.cropper-line.line-w {
  cursor: ew-resize;
  left: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-s {
  bottom: -3px;
  cursor: ns-resize;
  height: 5px;
  left: 0;
}

.cropper-point {
  background-color: #39f;
  height: 5px;
  opacity: .75;
  width: 5px;
}

.cropper-point.point-e {
  cursor: ew-resize;
  margin-top: -3px;
  right: -3px;
  top: 50%;
}

.cropper-point.point-n {
  cursor: ns-resize;
  left: 50%;
  margin-left: -3px;
  top: -3px;
}

.cropper-point.point-w {
  cursor: ew-resize;
  left: -3px;
  margin-top: -3px;
  top: 50%;
}

.cropper-point.point-s {
  bottom: -3px;
  cursor: s-resize;
  left: 50%;
  margin-left: -3px;
}

.cropper-point.point-ne {
  cursor: nesw-resize;
  right: -3px;
  top: -3px;
}

.cropper-point.point-nw {
  cursor: nwse-resize;
  left: -3px;
  top: -3px;
}

.cropper-point.point-sw {
  bottom: -3px;
  cursor: nesw-resize;
  left: -3px;
}

.cropper-point.point-se {
  bottom: -3px;
  cursor: nwse-resize;
  height: 20px;
  opacity: 1;
  right: -3px;
  width: 20px;
}

@media (min-width: 768px) {
  .cropper-point.point-se {
    height: 15px;
    width: 15px;
  }
}

@media (min-width: 992px) {
  .cropper-point.point-se {
    height: 10px;
    width: 10px;
  }
}

@media (min-width: 1200px) {
  .cropper-point.point-se {
    height: 5px;
    opacity: .75;
    width: 5px;
  }
}

.cropper-point.point-se:before {
  background-color: #39f;
  bottom: -50%;
  content: ' ';
  display: block;
  height: 200%;
  opacity: 0;
  position: absolute;
  right: -50%;
  width: 200%;
}

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}/* Cropper Modal Styles */
viralbuzz-cropper-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.cropper-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.cropper-modal-overlay.hidden {
    display: none;
}

.cropper-modal-container {
    background-color: #181818;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    width: 100%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

/* Modal Size Variants */
.cropper-modal-md {
    max-width: min(90vw, 45rem);
}

.cropper-modal-lg {
    max-width: min(90vw, 56rem);
}

.cropper-modal-xl {
    max-width: min(95vw, 72rem);
}

/* Header */
.cropper-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cropper-modal-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: white;
    margin: 0;
}

.cropper-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.cropper-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Body */
.cropper-modal-body {
    flex: 1;
    overflow: auto;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    width: 100%;
}

.cropper-image-container {
    overflow: hidden;
    position: relative;
    background-color: #121212;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* After cropper initializes, lock the width to prevent shrinking */
.cropper-image-container.cropper-initialized {
    /* Width will be set inline via JavaScript */
    position: relative;
}

/* Before cropper initializes - let image size naturally */
.cropper-image-container > img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* After cropper initializes, the container manages everything */
.cropper-image-container .cropper-container {
    width: 100%;
    max-width: 100%;
}

/* Action Controls */
.cropper-modal-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(0, 0, 0, 0.2);
}

.cropper-action-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    min-width: 44px;
    min-height: 44px;
}

.cropper-action-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
}

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

.cropper-action-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Footer */
.cropper-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
}

.cropper-btn-cancel,
.cropper-btn-confirm {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    min-width: 100px;
}

.cropper-btn-cancel {
    background-color: #27292f;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cropper-btn-cancel:hover {
    background-color: #32353d;
    color: white;
}

.cropper-btn-confirm {
    background: linear-gradient(to right, #ff00ff, #9333ea, #00ffff);
    color: white;
}

.cropper-btn-confirm:hover {
    opacity: 0.9;
}

.cropper-btn-cancel:disabled,
.cropper-btn-confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Cropper.js v2 Web Components styling */
cropper-canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 400px;
}

cropper-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

/* Ensure selection is visible */
cropper-selection {
    display: block !important;
}

/* Prevent selection from being resized when resizable=false */
cropper-selection[resizable="false"] cropper-handle[action$="-resize"] {
    display: none !important;
}

/* Twitter-style: fixed center selector, image can be panned */
cropper-canvas {
    cursor: grab !important;
}

cropper-canvas:active {
    cursor: grabbing !important;
}

/* Selection is locked in center, not draggable */
cropper-selection {
    cursor: default !important;
    pointer-events: none !important;
}

/* Allow interaction with image only, not selection */
cropper-selection cropper-handle[action="move"] {
    display: none !important;
}

/* Image can be panned/zoomed */
cropper-image {
    cursor: grab !important;
}

cropper-image:active {
    cursor: grabbing !important;
}

/* Ensure selection never gets hidden */
cropper-selection[hidden] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .cropper-modal-container {
        max-width: 100%;
        margin: 0.5rem;
        max-height: 95vh;
    }

    .cropper-modal-body {
        padding: 1rem;
        min-height: 250px;
    }

    .cropper-image-container {
        max-height: 50vh;
    }

    .cropper-modal-actions {
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }

    .cropper-action-btn {
        padding: 0.5rem;
        min-width: 40px;
        min-height: 40px;
    }

    .cropper-action-btn svg {
        width: 1rem;
        height: 1rem;
    }

    .cropper-modal-footer {
        flex-direction: column;
        gap: 0.75rem;
    }

    .cropper-btn-cancel,
    .cropper-btn-confirm {
        width: 100%;
    }
}

/* Confirmation Modal Styles */
viralbuzz-confirmation-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
}

.confirmation-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.confirmation-modal-overlay.hidden {
    display: none;
}

.confirmation-modal-container {
    background-color: #181818;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    width: 100%;
    max-width: 28rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 201;
}

.confirmation-modal-content {
    padding: 2rem;
    text-align: center;
}

.confirmation-modal-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.confirmation-modal-icon.icon-info {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.confirmation-modal-icon.icon-warning {
    background-color: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

.confirmation-modal-icon.icon-success {
    background-color: rgba(0, 255, 136, 0.1);
    color: #00ff88;
}

.confirmation-modal-icon.icon-error {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.confirmation-modal-icon svg {
    width: 2rem;
    height: 2rem;
}

.confirmation-modal-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    margin-bottom: 1rem;
}

.confirmation-modal-message {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
    line-height: 1.5;
}

.confirmation-modal-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.confirmation-btn-cancel,
.confirmation-btn-confirm {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    min-width: 100px;
}

.confirmation-btn-cancel {
    background-color: #27292f;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.confirmation-btn-cancel:hover {
    background-color: #32353d;
    color: white;
}

.confirmation-btn-confirm {
    background: linear-gradient(to right, #ff00ff, #9333ea, #00ffff);
    color: white;
}

.confirmation-btn-confirm:hover {
    opacity: 0.9;
}

.confirmation-btn-cancel:disabled,
.confirmation-btn-confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Spinner */
.confirmation-modal-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

.confirmation-modal-spinner.hidden {
    display: none;
}

.spinner {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #00ff88;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.spinner-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

/* Success Animation */
.confirmation-modal-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

.confirmation-modal-success.hidden {
    display: none;
}

.success-checkmark {
    width: 4rem;
    height: 4rem;
}

.success-checkmark-circle {
    stroke: #00ff88;
    stroke-width: 2;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.success-checkmark-check {
    stroke: #00ff88;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

.success-text {
    color: #00ff88;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

/* Error Modal Styles */
viralbuzz-error-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
}

.error-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.error-modal-overlay.hidden {
    display: none;
}

.error-modal-container {
    background-color: #181818;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    width: 100%;
    max-width: 28rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 301;
    animation: errorModalSlideIn 0.3s ease-out;
}

@keyframes errorModalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.error-modal-content {
    padding: 2rem;
    text-align: center;
}

.error-modal-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.error-modal-icon.success-icon {
    background-color: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.error-modal-icon.loading-icon {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--neon-green, #00ff88);
}

.error-modal-spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: errorModalSpin 0.8s linear infinite;
}

@keyframes errorModalSpin {
    to { transform: rotate(360deg); }
}

.error-modal-icon svg {
    width: 2rem;
    height: 2rem;
}

.error-modal-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    margin-bottom: 1rem;
}

.error-modal-message {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-line;
}

.error-modal-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.error-btn-ok {
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    min-width: 100px;
    background: linear-gradient(to right, #ff00ff, #9333ea, #00ffff);
    color: white;
}

.error-btn-ok:hover {
    opacity: 0.9;
}

.error-btn-ok:active {
    transform: scale(0.98);
}

.error-btn-ok:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* Followers Modal Styles */
viralbuzz-followers-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
}

.followers-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.followers-modal-overlay.hidden {
    display: none;
}

.followers-modal-container {
    background-color: #181818;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 301;
    display: flex;
    flex-direction: column;
    animation: followersModalSlideIn 0.3s ease-out;
}

@keyframes followersModalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.followers-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.followers-modal-close {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
}

.followers-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.followers-modal-close svg {
    width: 1.5rem;
    height: 1.5rem;
}

.followers-modal-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: white;
    margin: 0;
    flex: 1;
    text-align: center;
}

.followers-modal-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.followers-tab-btn {
    flex: 1;
    padding: 1rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
}

.followers-tab-btn:hover {
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.05);
}

.followers-tab-btn.active {
    color: #ffffff;
}

.followers-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, #ff00ff, #9333ea, #00ffff);
}

.followers-tab-count {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    font-weight: 400;
}

.followers-tab-btn.active .followers-tab-count {
    color: rgba(255, 255, 255, 0.7);
}

.followers-modal-content {
    flex: 1;
    overflow-y: auto;
    max-height: calc(90vh - 140px);
    padding: 1rem;
}

.followers-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.followers-list.hidden {
    display: none;
}

.followers-user-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background-color: #1f1f1f;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.followers-user-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background-color: #252525;
}

.followers-user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-w-0;
}

.followers-user-avatar,
.followers-user-avatar-initials {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.followers-user-avatar-initials {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
}

.followers-user-details {
    flex: 1;
    min-w-0;
}

.followers-user-name {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.followers-user-handle {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.25rem;
}

.followers-user-bio {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.followers-action-btn {
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
    white-space: nowrap;
    position: relative;
}

.followers-action-btn.follow {
    background-color: #00ff88;
    color: #000000;
    border-color: transparent;
    position: relative;
    overflow: hidden;
}

.followers-action-btn.follow:hover {
    background-color: #00e677;
    opacity: 1;
}

.followers-action-btn.follow .followers-btn-text {
    position: relative;
    display: inline-block;
    transition: opacity 0.2s ease;
}

/* Follow Back button - no hover effect */
.followers-action-btn.follow.follow-back {
    background-color: #00ff88;
    color: #000000;
    border-color: transparent;
}

.followers-action-btn.follow.follow-back:hover {
    background-color: #00e677;
    border-color: transparent;
}

.followers-action-btn.following {
    background-color: #27292f;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

.followers-action-btn.following:hover {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
}

.followers-action-btn.following {
    position: relative;
    overflow: hidden;
}

.followers-action-btn.following .followers-btn-text {
    position: relative;
    display: inline-block;
    transition: opacity 0.2s ease;
}

.followers-action-btn.following:hover .followers-btn-text {
    opacity: 0;
}

.followers-action-btn.following::after {
    content: 'Unfollow';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ef4444;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    white-space: nowrap;
}

.followers-action-btn.following:hover::after {
    opacity: 1;
}

.followers-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.followers-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 1rem;
}

.followers-loading.hidden {
    display: none;
}

.followers-loading .spinner {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #00ff88;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.followers-loading p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

.followers-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: rgba(255, 255, 255, 0.5);
}

.followers-empty.hidden {
    display: none;
}

/* Posts Modal Styles */
viralbuzz-posts-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
}

.posts-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.posts-modal-overlay.hidden {
    display: none;
}

.posts-modal-container {
    background-color: #181818;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 301;
    display: flex;
    flex-direction: column;
    animation: postsModalSlideIn 0.3s ease-out;
}

@keyframes postsModalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.posts-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.posts-modal-close {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
}

.posts-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.posts-modal-close svg {
    width: 1.5rem;
    height: 1.5rem;
}

.posts-modal-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: white;
    margin: 0;
}

.posts-modal-content {
    flex: 1;
    overflow-y: auto;
    max-height: calc(90vh - 80px);
    padding: 1.5rem;
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

@media (min-width: 640px) {
    .posts-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

.posts-grid-item {
    cursor: pointer;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #1f1f1f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.posts-grid-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 255, 136, 0.2);
    border-color: #00ff88;
}

.posts-grid-item-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #27292f;
}

.posts-grid-item-image img,
.posts-grid-item-image > div {
    width: 100%;
    height: 100%;
}

.posts-grid-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0.75rem;
}

.posts-grid-item:hover .posts-grid-item-overlay {
    opacity: 1;
}

.posts-grid-item-likes {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
}

.posts-grid-item-likes svg {
    width: 1rem;
    height: 1rem;
    color: #ef4444;
}

.posts-grid-item-title {
    padding: 0.75rem;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.posts-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 1rem;
}

.posts-loading.hidden {
    display: none;
}

.posts-loading .spinner {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #00ff88;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.posts-loading p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

.posts-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: rgba(255, 255, 255, 0.5);
}

.posts-empty.hidden {
    display: none;
}

.posts-pagination {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.posts-pagination.hidden {
    display: none;
}

.posts-pagination-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.posts-pagination-pages {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.posts-pagination-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #27292f;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.posts-pagination-btn:hover:not(:disabled) {
    background-color: #00ff88;
    border-color: #00ff88;
    color: #000000;
}

.posts-pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.posts-pagination-page {
    min-width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    background-color: #27292f;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.posts-pagination-page:hover {
    background-color: rgba(0, 255, 136, 0.1);
    border-color: #00ff88;
}

.posts-pagination-page.active {
    background-color: #00ff88;
    border-color: #00ff88;
    color: #000000;
}

.posts-pagination-ellipsis {
    color: rgba(255, 255, 255, 0.5);
    padding: 0 0.25rem;
}

/* Post Analytics Modal Styles */
viralbuzz-post-analytics-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
}

.post-analytics-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.3s ease-out;
}

.post-analytics-modal-overlay.hidden {
    display: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.post-analytics-modal-container {
    background-color: #181818;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 301;
    display: flex;
    flex-direction: column;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.animate-slide-up {
    animation: slideUp 0.3s ease-out;
}

.post-analytics-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.post-analytics-modal-close {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
}

.post-analytics-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.post-analytics-modal-close svg {
    width: 1.5rem;
    height: 1.5rem;
}

.post-analytics-modal-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: white;
    margin: 0;
}

.post-analytics-modal-content {
    flex: 1;
    overflow-y: auto;
    max-height: calc(90vh - 80px);
    padding: 1.5rem;
    /* Thin auto-hide scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.post-analytics-modal-content::-webkit-scrollbar {
    width: 6px;
}

.post-analytics-modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.post-analytics-modal-content::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.post-analytics-modal-content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.post-analytics-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 1rem;
}

.post-analytics-loading .spinner {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #00ff88;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.post-analytics-loading p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

.post-analytics-content.hidden {
    display: none;
}

.post-analytics-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.post-analytics-stat-card {
    background-color: #1f1f1f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    padding: 1rem;
    transition: all 0.2s ease;
}

.post-analytics-stat-card:hover {
    border-color: #00ff88;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 255, 136, 0.2);
}

.post-analytics-stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.post-analytics-stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    font-weight: 500;
}

.post-analytics-stat-value {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: bold;
}

.post-analytics-breakdown {
    background-color: #1f1f1f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    padding: 1.5rem;
}

.post-analytics-breakdown-item {
    background-color: #27292f;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    padding: 1rem;
    transition: all 0.2s ease;
}

.post-analytics-breakdown-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background-color: #2a2d35;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
    opacity: 0;
}

/* Info Tooltip Styles */
.post-analytics-info-tooltip {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.post-analytics-stat-header {
    position: relative;
}

/* Tippy.js Theme Styles for ViralBuzz Dark Theme */
.tippy-box[data-theme~='viralbuzz-dark'] {
    background-color: #1f1f1f;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 0.75rem 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.tippy-box[data-theme~='viralbuzz-dark'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: #1f1f1f;
}

.tippy-box[data-theme~='viralbuzz-dark'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: #1f1f1f;
}

.tippy-box[data-theme~='viralbuzz-dark'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: #1f1f1f;
}

.tippy-box[data-theme~='viralbuzz-dark'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: #1f1f1f;
}