    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
    
    :root {
      --black: #000000;
      --dark-grey: #0d0d0d;
      --gold: #FF9933;
      --light-grey: #CCCCCC;
      --border: var(--theme-gradient);
      --accent-color: #FF9933;
      
      /* Multi-color theme system */
      --theme-color: #FF9933;
      --theme-color-1: #FF9933;
      --theme-color-2: #FF9933;
      --theme-color-3: #FF9900;
      --theme-color-1-rgb: 255,153,51;
      --theme-color-2-rgb: 255,153,51;
      --theme-color-3-rgb: 255,153,255;
      --theme-gradient: linear-gradient(135deg, #FF9933 0%, #FF9933 50%, #FF9900 100%);
      --theme-gradient-hover: linear-gradient(135deg, #FF9900 0%, #FF9933 50%, #FF9933 100%);
      
      /* Gradient border utility - works with border-radius */
      --gradient-border-width: 2px;
    }
    
    /* Gradient border utility class - works with border-radius */
    .gradient-border {
      position: relative;
      border: var(--gradient-border-width) solid transparent;
      background: linear-gradient(var(--dark-grey), var(--dark-grey)) padding-box,
                  var(--theme-gradient) border-box;
      background-clip: padding-box, border-box;
    }
    
    /* Alternative gradient border using pseudo-element (for complex cases) */
    .gradient-border-alt {
      position: relative;
      background: var(--dark-grey);
      border-radius: inherit;
    }
    .gradient-border-alt::before {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--gradient-border-width));
      border-radius: inherit;
      padding: var(--gradient-border-width);
      background: var(--theme-gradient);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      z-index: -1;
    }
    
    /* ===================== THEMED SCROLLBARS (GLOBAL) ===================== */
    /* IMPORTANT: Default to gray to prevent flash - theme applied after CSS vars load */
    html {
        scrollbar-color: #666 #0a0a0a; /* Fallback: gray, NOT gold */
    }
    
    html.theme-loaded {
        scrollbar-color: var(--theme-color-1) #0a0a0a;
    }
    
    /* Webkit browsers (Chrome, Safari, Edge) */
    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }
    ::-webkit-scrollbar-track {
        background: #0a0a0a;
        border-radius: 6px;
    }
    ::-webkit-scrollbar-thumb {
        background: #666; /* Default gray - prevents flash */
        border-radius: 6px;
        border: 2px solid #0a0a0a;
    }
    
    /* Apply gradient after theme loads - use linear-gradient directly */
    html.theme-loaded ::-webkit-scrollbar-thumb {
        background: var(--theme-gradient, linear-gradient(135deg, var(--theme-color-1), var(--theme-color-2), var(--theme-color-3))) !important;
    }
    
    html.theme-loaded ::-webkit-scrollbar-thumb:hover {
        background: var(--theme-gradient-hover, linear-gradient(135deg, var(--theme-color-3), var(--theme-color-2), var(--theme-color-1))) !important;
        border: 2px solid #0a0a0a;
    }
    ::-webkit-scrollbar-corner {
        background: #0a0a0a;
    }
    
    /* Firefox */
    * {
        scrollbar-width: thin;
        scrollbar-color: #666 #0a0a0a; /* Default gray */
    }
    
    html.theme-loaded * {
        scrollbar-color: var(--theme-gradient, var(--theme-color-1)) #0a0a0a;
    }
    
    /* Apply to all scrollable elements */
    textarea::-webkit-scrollbar,
    .modal::-webkit-scrollbar,
    .modal-body::-webkit-scrollbar,
    .modal-content::-webkit-scrollbar,
    .auth-modal-content::-webkit-scrollbar,
    .card::-webkit-scrollbar,
    .feed::-webkit-scrollbar,
    .all-messages-container::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }
    textarea::-webkit-scrollbar-track,
    .modal::-webkit-scrollbar-track,
    .modal-body::-webkit-scrollbar-track,
    .modal-content::-webkit-scrollbar-track,
    .auth-modal-content::-webkit-scrollbar-track,
    .card::-webkit-scrollbar-track,
    .feed::-webkit-scrollbar-track,
    .all-messages-container::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 6px;
    }
    textarea::-webkit-scrollbar-thumb,
    .modal::-webkit-scrollbar-thumb,
    .modal-body::-webkit-scrollbar-thumb,
    .modal-content::-webkit-scrollbar-thumb,
    .auth-modal-content::-webkit-scrollbar-thumb,
    .card::-webkit-scrollbar-thumb,
    .feed::-webkit-scrollbar-thumb,
    .all-messages-container::-webkit-scrollbar-thumb {
        background: #666; /* Default gray - prevents flash */
        border-radius: 6px;
        border: 2px solid rgba(0, 0, 0, 0.2);
    }
    
    /* Apply gradient after theme loads */
    html.theme-loaded textarea::-webkit-scrollbar-thumb,
    html.theme-loaded .modal::-webkit-scrollbar-thumb,
    html.theme-loaded .modal-body::-webkit-scrollbar-thumb,
    html.theme-loaded .modal-content::-webkit-scrollbar-thumb,
    html.theme-loaded .auth-modal-content::-webkit-scrollbar-thumb,
    html.theme-loaded .card::-webkit-scrollbar-thumb,
    html.theme-loaded .feed::-webkit-scrollbar-thumb,
    html.theme-loaded .all-messages-container::-webkit-scrollbar-thumb {
        background: var(--theme-gradient, linear-gradient(135deg, var(--theme-color-1), var(--theme-color-2), var(--theme-color-3))) !important;
    }
    
    html.theme-loaded textarea::-webkit-scrollbar-thumb:hover,
    html.theme-loaded .modal::-webkit-scrollbar-thumb:hover,
    html.theme-loaded .modal-body::-webkit-scrollbar-thumb:hover,
    html.theme-loaded .modal-content::-webkit-scrollbar-thumb:hover,
    html.theme-loaded .auth-modal-content::-webkit-scrollbar-thumb:hover,
    html.theme-loaded .card::-webkit-scrollbar-thumb:hover,
    html.theme-loaded .feed::-webkit-scrollbar-thumb:hover,
    html.theme-loaded .all-messages-container::-webkit-scrollbar-thumb:hover {
        background: var(--theme-gradient-hover, linear-gradient(135deg, var(--theme-color-3), var(--theme-color-2), var(--theme-color-1))) !important;
        opacity: 0.9;
        border: 2px solid rgba(0, 0, 0, 0.3);
    }
    
    html, body { 
      overflow-x: hidden; 
      width: 100% !important;
      max-width: 100vw;
      background: #0d0d0d !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    
    /* ===================== CUSTOM CURSOR ===================== */
    /* Default cursor - lion paw pointer */
    *, *::before, *::after {
      cursor: url('../icons/cursor.png') 4 0, auto;
    }
    
    /* Clicked/Active state - pressed paw (with fallback) */
    *:active {
      cursor: url('../assets/icons/cursor-clicked.png') 4 0, url('../icons/cursor-clicked.png') 4 0, auto;
    }
    
    /* Pointer cursor for clickable elements (with fallback) */
    a, button, [onclick], [role="button"], 
    input[type="submit"], input[type="button"],
    .clickable, .btn, .control-btn, .card-action,
    select, label[for] {
      cursor: url('../assets/icons/cursor.png') 4 0, url('../icons/cursor.png') 4 0, pointer;
    }
    
    a:active, button:active, [onclick]:active, 
    [role="button"]:active, input[type="submit"]:active,
    input[type="button"]:active, .clickable:active,
    .btn:active, .control-btn:active, .card-action:active,
    select:active, label[for]:active {
      cursor: url('../assets/icons/cursor-clicked.png') 4 0, url('../icons/cursor-clicked.png') 4 0, pointer;
    }
    
    /* Text cursor for inputs - keep default for usability */
    input[type="text"], input[type="email"], 
    input[type="password"], input[type="search"],
    input[type="number"], input[type="tel"],
    input[type="url"], textarea {
      cursor: text;
    }
    
    /* Grab cursor for draggable elements (with fallback) */
    .draggable, [draggable="true"] {
      cursor: url('../assets/icons/cursor.png') 4 0, url('../icons/cursor.png') 4 0, grab;
    }
    
    .draggable:active, [draggable="true"]:active {
      cursor: url('../assets/icons/cursor-clicked.png') 4 0, url('../icons/cursor-clicked.png') 4 0, grabbing;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
      background: #0d0d0d !important;
      color: var(--theme-color-1);
      width: 100% !important;
      margin: 0;
      padding-top: 75px !important;
      padding-bottom: 94px !important; /* Bottom strip min-height (70px) + extra space */
    }
    
    /* ===================== HEADER ===================== */
    .rh-header {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      z-index: 10000 !important;
      background: #000000 !important;
      border-bottom: 2px solid transparent !important;
      border-image: var(--theme-gradient) 1 !important;
      box-shadow: 0 8px 32px rgba(0,0,0,.3) !important;
    }
    
    .rh-inner {
      max-width: 1340px;
      margin: 0 auto;
      padding: 16px 22px;
      display: flex !important;
      flex-direction: row !important;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    
    .rh-logo {
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 900;
      letter-spacing: .12em;
      font-size: 28px;
      text-transform: uppercase;
      text-decoration: none;
      text-shadow: 0 0 26px rgba(var(--theme-color-1-rgb),.5);
      transition: all 0.3s ease;
    }
    
    .rh-logo.active {
      text-shadow: 0 0 30px rgba(var(--theme-color-1-rgb),.6), 0 0 50px rgba(var(--theme-color-1-rgb),.4);
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      position: relative;
    }
    
    .rh-logo.active::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--theme-gradient);
      box-shadow: 0 0 10px rgba(var(--theme-color-1-rgb),.6);
    }
    
    .rh-nav { display: flex !important;
      flex-direction: row !important; align-items: center; gap: 6px; }
    
    .rh-link {
      padding: 10px 12px;
      color: #FFFFFF;
      font-weight: 800;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .12em;
      text-decoration: none;
      border-radius: 8px;
      transition: all 0.3s ease;
    }
    
    .rh-link:hover {
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      background-color: rgba(var(--theme-color-1-rgb),.1);
      
    }
    
    /* Header nav link - ACTIVE state (inverted) */
    .rh-link.active,
    .rh-nav a.active,
    header nav a.active {
      background: var(--theme-gradient) !important;
      color: #000 !important;
      border: 2px solid transparent !important;
      border-image: linear-gradient(135deg, var(--theme-color-1), var(--theme-color-2), var(--theme-color-3)) 1 !important;
      border-radius: 10px !important;
      padding: 10px 18px !important;
    }
    
    .rh-account {
      padding: 10px 12px;
      background: transparent;
      border: 2px solid transparent;
      border-image: var(--theme-gradient) 1;
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 800;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .12em;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
    }
    .rh-account::before {
      content: '';
      position: absolute;
      inset: 0;
      border: 2px solid;
      border-image: var(--theme-gradient) 1;
      border-radius: 8px;
      z-index: -1;
    }
    
    .rh-account:hover {
      background: var(--theme-gradient) !important;
      -webkit-text-fill-color: #000 !important;
      color: #000 !important;
    }
    
    .rh-burger {
      display: none;
      padding: 10px 16px;
      background: transparent;
      border: 2px solid transparent;
      border-image: var(--theme-gradient) 1;
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 800;
      font-size: 12px;
      text-transform: uppercase;
      border-radius: 8px;
      cursor: pointer;
      position: relative;
    }
    .rh-burger::before {
      content: '';
      position: absolute;
      inset: 0;
      border: 2px solid;
      border-image: var(--theme-gradient) 1;
      border-radius: 8px;
      z-index: -1;
    }
    
    @media (max-width: 768px) {
      .rh-nav { display: none !important; }
      .rh-burger { display: block !important; }
      .rh-logo { font-size: 22px; }
    }
    
    /* Viewport-based mobile menu (via viewport-handler.js) */
    .viewport-mobile .rh-nav { 
      display: none !important; 
    }
    .viewport-mobile .rh-burger { 
      display: block !important; 
    }
    
    /* ===================== MAIN CONTENT ===================== */
    .main-content {
      padding: 0 20px;
      max-width: 1400px;
      margin: 0 auto;
      text-align: center;
      background: #0d0d0d;
      transition: margin-top 0.3s ease;
      margin-bottom: 15px;  margin-bottom: 15px;
    }
    
    body.drawer-open .main-content {
      margin-top: 300px;
      transition: margin-top 0.3s ease;
      margin-bottom: 15px;
    }
    
    .content-box {
      max-width: 900px;
      margin: 15px auto 15px auto;
      padding: 60px 40px;
      background: rgba(0, 0, 0, 0.3);
      border: 2px solid transparent;
      border-image: var(--theme-gradient) 1;
      border-radius: 10px;
      position: relative;
      text-align: center;
    }
    
    .content-box h1 {
      font-size: 48px;
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 20px;
      font-weight: 900;
    }
    
    .content-box p {
      font-size: 18px;
      color: #FFFFFF;
      opacity: 0.7;
    }
    
    /* ===================== FOOTER ===================== */
    footer.siteFooter {
      background: #0d0d0d;
      padding: 0 20px 120px 20px;
      margin-top: 15px;
      margin-bottom: 0;
    }
    
    footer .footer-inner {
      padding-top: 0;
    }
    
    footer .footer-inner {
      max-width: 1400px;
      margin: 0 auto;
      display: flex !important;
        flex-direction: column !important;
      flex-direction: column;
      gap: 30px;
      padding-top: 0;
    }
    
    .footer-tiers-merch {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      align-items: start;
    }
    
    .footer-icon-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 16px;
    }
    
    .footer-icon-item {
      padding: 16px;
      text-align: center;
      min-height: 90px;
      display: flex !important;
        flex-direction: column !important;
      flex-direction: column;
      justify-content: center;
    }
    
    .footer-icon-item div:first-child {
      font-size: 32px;
      margin-bottom: 8px;
    }
    
    .footer-icon-item div:last-child {
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    
    .footer-divider {
      height: 1px;
      background: var(--theme-gradient);
      margin-bottom: 16px;
    }
    
    .footer-button {
      display: block;
      width: 100%;
      padding: 12px 20px;
      background: transparent;
      border: 2px solid transparent;
      border-image: var(--theme-gradient) 1;
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-decoration: none;
      border-radius: 8px;
      font-weight: 700;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      text-align: center;
      transition: all 0.3s;
      position: relative;
    }
    .footer-button::before {
      content: '';
      position: absolute;
      inset: 0;
      border: 2px solid;
      border-image: var(--theme-gradient) 1;
      border-radius: 8px;
      z-index: -1;
    }
    
    .footer-button:hover,
    footer button[type="submit"]:hover {
      background: var(--theme-gradient) !important;
      -webkit-text-fill-color: #000 !important;
      color: #000 !important;
    }
    
    /* Subscribe button - gradient text */
    .footer-subscribe-btn {
      background-image: var(--theme-gradient-text, var(--theme-gradient));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      position: relative;
      opacity: 1 !important;
      visibility: visible !important;
    }
    
    .footer-subscribe-btn:hover {
      background: var(--theme-gradient-hover) !important;
      -webkit-background-clip: unset !important;
      -webkit-text-fill-color: #000 !important;
      background-clip: unset !important;
      color: #000 !important;
    }
    
    /* Footer email input - themed placeholder and text */
    .footer-email-input,
    #footer-subscribe-email {
      color: var(--theme-color-1, #fff) !important;
      -webkit-text-fill-color: var(--theme-color-1, #fff) !important;
    }
    
    .footer-email-input::placeholder,
    #footer-subscribe-email::placeholder {
      color: transparent;
      background-image: var(--theme-gradient-text, var(--theme-gradient, var(--theme-color-1)));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      opacity: 0.7;
    }
    
    .footer-email-input::-webkit-input-placeholder,
    #footer-subscribe-email::-webkit-input-placeholder {
      color: transparent;
      background-image: var(--theme-gradient-text, var(--theme-gradient, var(--theme-color-1)));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      opacity: 0.7;
    }
    
    .footer-email-input::-moz-placeholder,
    #footer-subscribe-email::-moz-placeholder {
      color: transparent;
      background-image: var(--theme-gradient-text, var(--theme-gradient, var(--theme-color-1)));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      opacity: 0.7;
    }
    
    .footer-email-input:-ms-input-placeholder,
    #footer-subscribe-email:-ms-input-placeholder {
      color: transparent;
      background-image: var(--theme-gradient-text, var(--theme-gradient, var(--theme-color-1)));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      opacity: 0.7;
    }
    
    /* Footer legal links - gradient text */
    .footer-legal-link {
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
      transition: all 0.3s;
      cursor: pointer;
    }
    
    .footer-legal-link:hover {
      background: var(--theme-gradient-hover);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      opacity: 0.8;
    }
    
    .footer-bullet {
      color: var(--theme-color-2);
      opacity: 0.6;
    }
    
    .footer-powered-by {
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }
    
    .footer-genondemand-text {
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .footer-learn-more {
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-decoration: none;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .footer-learn-more:hover {
      background: var(--theme-gradient-hover);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-decoration: underline;
    }
    
    .footer-links-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
    }
    
    .site-links-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    
    .site-links-grid a {
      color: #CCCCCC;
      text-decoration: none;
      font-size: 15px;
      transition: color 0.3s;
    }
    
    .site-links-grid a:hover {
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .site-links-grid a.active {
      background: var(--theme-gradient);
      color: #000 !important;
      font-weight: 700;
      padding: 6px 12px;
      border-radius: 6px;
      text-decoration: none;
    }
    
    /* Invert icon inside active footer link */
    .site-links-grid a.active img {
      filter: invert(1);
    }
    
    /* If using SVG icons */
    .site-links-grid a.active svg {
      filter: invert(1);
    }
    
    /* If icon is a background image or emoji */
    .site-links-grid a.active .icon {
      filter: invert(1);
    }
    
    /* ===================== STICKY BOTTOM BAR ===================== */
    .sticky-bottom-bar {
      background: #000000 !important;
      position: fixed !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 12px 20px !important; /* More padding for desktop */
      background: #000000 !important;
      background-color: #000000 !important;
      border-top: 2px solid transparent;
      border-image: var(--theme-gradient) 1;
      z-index: 10001 !important; /* Above scrollbar and content */
      min-height: 70px !important; /* Bigger height for desktop */
      height: auto !important;
      box-sizing: border-box;
    }
    
    .footer-datetime-box,
    .footer-credit-box {
      padding: 12px 20px !important; /* More padding */
      background: rgba(255,153,51,.05);
      border: 1px solid transparent;
      border-image: var(--theme-gradient) 1;
      border-radius: 20px;
      position: relative;
      font-size: 13px; /* Slightly bigger font */
      color: #888;
      font-weight: 600;
      min-height: 44px; /* Ensure enough height */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    .footer-chat-box {
      position: absolute !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      right: auto !important;
      padding: 12px 24px !important; /* More padding */
      background-color: rgba(255,255,255,.1);
      border: 2px solid transparent;
      border-image: var(--theme-gradient) 1;
      border-radius: 20px;
      font-size: 13px; /* Slightly bigger font */
      color: #888;
      font-weight: 600;
      min-height: 44px; /* Ensure enough height */
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      z-index: 1;
    }
    
    .footer-chat-box span {
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 700;
    }
    
    .footer-chat-box:hover {
      background-color: rgba(var(--theme-color-1-rgb),.2);
      border: 2px solid transparent;
      border-image: var(--theme-gradient) 1;
      box-shadow: 0 0 15px rgba(var(--theme-color-1-rgb), 0.4);
    }
    
    @media (max-width: 768px) {
      body {
        padding-bottom: 120px !important; /* More space for mobile footer */
      }
      
      .sticky-bottom-bar {
        background: #000000 !important;
        flex-direction: column;
        gap: 12px !important; /* More gap between items */
        padding: 16px 15px !important; /* More padding on mobile */
        min-height: auto !important;
        height: auto !important;
      }
      
      .footer-datetime-box, 
      .footer-credit-box,
      .footer-chat-box {
        width: 100%;
        text-align: center;
        position: relative !important;
        left: auto !important;
        transform: none !important;
        padding: 14px 20px !important; /* More padding on mobile */
        min-height: 50px !important; /* Bigger buttons on mobile */
        font-size: 14px !important; /* Bigger font on mobile */
      }
      
      .footer-chat-box:hover {
        transform: none !important;
      }
    }
    
    /* ===================== NOTIFICATION ANIMATIONS ===================== */
    @keyframes slideInRight {
      from {
        opacity: 0;
        transform: translateX(100%);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    @keyframes slideOutRight {
      from {
        opacity: 1;
        transform: translateX(0);
      }
      to {
        opacity: 0;
        transform: translateX(100%);
      }
    }

    /* ===================== MOBILE DRAWER ===================== */
    .rh-drawer {
      display: none !important;
      position: fixed !important;
      top: 60px !important;
      left: 0 !important;
      right: 0 !important;
      width: 100vw !important;
      max-height: calc(100vh - 60px) !important;
      background: rgba(0,0,0,.98) !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      border-bottom: 2px solid transparent !important;
      border-image: var(--theme-gradient) 1 !important;
      flex-direction: column !important;
      padding: 0 !important;
      z-index: 100001 !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      visibility: hidden !important;
      opacity: 0 !important;
      
      transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease !important;
      pointer-events: none !important;
      box-shadow: 0 4px 20px rgba(0,0,0,.5) !important;
    }
    
    .rh-drawer.is-open,
    .rh-drawer.open {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      
    }
    
    .drawer-item {
      padding: 15px 20px;
      color: var(--light-grey);
      text-decoration: none;
      font-weight: 700;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .1em;
      border-bottom: 1px solid transparent;
      border-image: var(--theme-gradient) 1;
      transition: all 0.3s ease;
      flex-shrink: 0;
    }
    
    /* Condensed mobile menu */
    .viewport-mobile .rh-drawer {
      padding: 10px 0 !important;
      max-height: calc(100vh - 60px) !important;
    }
    
    .viewport-mobile .drawer-item {
      padding: 10px 15px !important;
      font-size: 11px !important;
      letter-spacing: 0.05em !important;
      min-height: 40px !important;
      min-height: 48px;
      display: flex !important;
        flex-direction: column !important;
      align-items: center;
    }
    
    .drawer-item:hover, .drawer-item.active { 
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      background-color: rgba(var(--theme-color-1-rgb),.1); 
    }
    
    .drawer-account-expanded {
      display: none !important;
      width: 100vw !important;
      position: fixed !important;
      top: 60px !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      height: calc(100vh - 60px) !important;
      min-height: calc(100vh - 60px) !important;
      background: rgba(0,0,0,.98) !important;
      backdrop-filter: blur(30px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
      border-top: 2px solid transparent !important;
      border-image: var(--theme-gradient) 1 !important;
      padding: 40px 20px 30px 20px !important;
      flex-direction: column !important;
      gap: 12px !important;
      z-index: 100003 !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      box-shadow: 0 4px 30px rgba(0,0,0,.9) !important;
      margin-bottom: 0 !important;
      visibility: hidden !important;
      opacity: 0 !important;
    }
    
    .drawer-account-expanded.show {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      animation: slideDown 0.3s ease !important;
      pointer-events: auto !important;
      overflow-y: auto !important;
      position: fixed !important;
      top: 60px !important;
      z-index: 100003 !important;
    }
    
    @keyframes slideDown {
      from {
        opacity: 0;
        
      }
      to {
        opacity: 1;
        
      }
    }
    
    .drawer-account-expanded a,
    .drawer-account-expanded button {
      display: block !important;
      padding: 14px 18px !important;
      color: #fff !important;
      text-decoration: none !important;
      font-weight: 600 !important;
      border-radius: 10px !important;
      margin-bottom: 10px !important;
      transition: all 0.3s !important;
      border: none !important;
      background: rgba(255,153,51,.05) !important;
      text-align: left !important;
      font-size: 15px !important;
      cursor: pointer !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      white-space: normal !important;
      word-wrap: break-word !important;
    }
    
    .drawer-account-expanded a:hover,
    .drawer-account-expanded button:hover {
      background: rgba(255,153,51,.15) !important;
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      
    }
    
    body.drawer-account-open {
      overflow: hidden !important;
      position: fixed !important;
      width: 100% !important;
    }

    /* ===================== ACCOUNT DROPDOWN (DESKTOP) ===================== */
    .account-container {
      position: relative;
      display: inline-block;
      z-index: 100003;
    }
    
    .account-dropdown {
      display: none;
      position: fixed;
      /* Position below header border line - body padding-top (75px) is the header height */
      top: 75px; /* Matches body padding-top - header total height including border */
      right: 22px; /* Match header padding */
      width: 320px;
      margin-top: 0;
      background: rgba(0, 0, 0, 0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 2px solid transparent;
      border-image: var(--theme-gradient) 1;
      border-radius: 16px;
      padding: 20px;
      z-index: 100004; /* Above header (10000) and content */
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7);
      max-height: calc(100vh - 100px);
      overflow-y: auto;
    }
    
    .account-dropdown a {
      display: block;
      padding: 12px 16px;
      color: var(--light-grey);
      text-decoration: none;
      font-weight: 600;
      border-radius: 8px;
      transition: all 0.3s ease;
      margin-bottom: 5px;
    }
    
    .account-dropdown a:hover {
      background-color: rgba(var(--theme-color-1-rgb),.1);
    }
    
    /* My Benefits link - gradient text on hover */
    .account-dropdown .dropdown-link-benefits:hover .benefits-text {
      background-image: var(--theme-gradient-text, var(--theme-gradient));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
    }
    
    /* Other dropdown links - gradient text on hover */
    .account-dropdown .dropdown-link:hover {
      background-image: var(--theme-gradient-text, var(--theme-gradient));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
    }
    
    /* Tier badge - white text by default, gradient on hover, themed border */
    .account-dropdown #membershipTierBadge,
    .account-dropdown .tier-badge-link {
      display: inline-block !important;
      visibility: visible !important;
      opacity: 1 !important;
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
      background-image: none !important;
      background-clip: border-box !important;
      -webkit-background-clip: border-box !important;
      font-weight: 700 !important;
      border: 2px solid transparent;
      border-image: var(--theme-gradient, var(--theme-color-1)) 1;
    }
    
    /* Tier badge text - white by default */
    .account-dropdown #membershipTierBadge *,
    .account-dropdown #membershipTierBadge span,
    .account-dropdown .tier-badge-link *,
    .account-dropdown .tier-badge-link span {
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
      background-image: none !important;
      background-clip: border-box !important;
      -webkit-background-clip: border-box !important;
    }
    
    /* Tier badge - gradient text and border on hover */
    .account-dropdown #membershipTierBadge:hover,
    .account-dropdown .tier-badge-link:hover,
    .account-dropdown .dropdown-link-benefits:hover #membershipTierBadge {
      background-image: var(--theme-gradient-text, var(--theme-gradient));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
      border-image: var(--theme-gradient-hover, var(--theme-gradient)) 1;
      transform: scale(1.05);
      box-shadow: 0 0 10px rgba(var(--theme-color-1-rgb), 0.5);
    }
    
    /* Tier badge text on hover - gradient */
    .account-dropdown #membershipTierBadge:hover *,
    .account-dropdown #membershipTierBadge:hover span,
    .account-dropdown .tier-badge-link:hover *,
    .account-dropdown .tier-badge-link:hover span,
    .account-dropdown .dropdown-link-benefits:hover #membershipTierBadge *,
    .account-dropdown .dropdown-link-benefits:hover #membershipTierBadge span {
      background-image: var(--theme-gradient-text, var(--theme-gradient));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
    }
    
    /* Mobile viewport - ensure dropdown stays visible */
    @media (max-width: 768px) {
      .account-dropdown {
        position: fixed;
        top: 75px;
        right: 10px;
        width: calc(100vw - 20px);
        max-width: 320px;
        z-index: 100004;
      }
      
      .account-dropdown a,
      .account-dropdown .dropdown-link-benefits,
      .account-dropdown .dropdown-link {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 14px 16px;
        font-size: 15px;
      }
      
      .account-dropdown #membershipTierBadge {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
      }
    }

    /* Member Settings Modal - Responsive grid */
    #settings-modal .settings-name-location-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
    }
    
    @media (max-width: 768px) {
      #settings-modal .settings-name-location-grid {
        grid-template-columns: 1fr;
      }
    }
    
    /* ===================== AUTH MODAL ===================== */
    .auth-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.85);
      z-index: 100002;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    
    .auth-modal-content {
      background: var(--black);
      border: 2px solid transparent;
      border-image: var(--theme-gradient) 1;
      border-radius: 20px;
      position: relative;
      padding: 40px;
      max-width: 480px;
      width: 100%;
      max-height: 85vh;
      overflow-y: auto;
      position: relative;
    }
    
    /* Themed scrollbar for auth modal */
    .auth-modal-content::-webkit-scrollbar {
      width: 8px;
    }
    .auth-modal-content::-webkit-scrollbar-track {
      background: rgba(0,0,0,0.3);
      border-radius: 4px;
    }
    .auth-modal-content::-webkit-scrollbar-thumb {
      background: var(--theme-gradient);
      border-radius: 4px;
    }
    .auth-modal-content::-webkit-scrollbar-thumb:hover {
      background: #FFED4E;
    }
    
    /* Back button matches theme */
    .modal-back-btn, .back-btn {
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      border: 2px solid transparent !important;
      margin-left: 10px; /* Add spacing from X button */
      border-image: var(--theme-gradient) 1 !important;
    }
    
    .auth-close {
      position: absolute;
      top: 15px;
      right: 15px;
      width: 32px;
      height: 32px;
      background: transparent;
      border: 2px solid transparent;
      border-image: var(--theme-gradient) 1;
      border-radius: 50%;
      color: var(--theme-color-1);
      font-size: 20px;
      cursor: pointer;
      display: flex !important;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      padding: 0;
      line-height: 1;
      margin: 0;
    }
    
    .auth-close:hover { 
      background: var(--theme-gradient) !important; 
      background-image: var(--theme-gradient) !important;
      color: #000 !important;
      -webkit-text-fill-color: #000 !important;
      border: 2px solid transparent !important;
      transform: scale(1.1);
    }
    
    .auth-form { display: none; }
    .auth-form.active { display: block !important; }
    
    .form-label {
      display: block;
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 8px;
      margin-top: 20px;
    }
    
    .form-input, .form-textarea {
      width: 100%;
      padding: 14px 16px;
      background: #1a1a1a;
      border: 2px solid var(--border);
      border-radius: 10px;
      color: var(--light-grey);
      font-size: 15px;
      transition: all 0.3s ease;
      box-sizing: border-box;
    }
    
    .form-input:focus, .form-textarea:focus {
      outline: none;
      border: 2px solid transparent;
      border-image: var(--theme-gradient) 1;
      background: #222;
      box-shadow: 0 0 15px rgba(var(--theme-color-1-rgb),.2);
    }
    
    .form-textarea { min-height: 100px; resize: vertical; }
    
    .submit-btn {
      display: block;
      width: 100%;
      padding: 16px;
      background: var(--theme-gradient);
      color: #000;
      border: none;
      border-radius: 50px;
      font-weight: 900;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      cursor: pointer;
      margin-top: 25px;
      transition: all 0.3s ease;
    }
    
    .submit-btn:hover { 
      background: var(--theme-gradient-hover);
      transform: scale(1.02); 
      box-shadow: 0 8px 25px rgba(var(--theme-color-1-rgb),.4); 
    }
    .submit-btn:disabled { background: #444; color: #888; cursor: not-allowed; }
    
    .secondary-btn {
      display: block;
      width: 100%;
      padding: 14px;
      background: transparent;
      border: 2px solid transparent;
      border-image: var(--theme-gradient) 1;
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      border-radius: 50px;
      font-weight: 700;
      font-size: 12px;
      text-transform: uppercase;
      cursor: pointer;
      margin-top: 15px;
      transition: all 0.3s ease;
      position: relative;
    }
    .secondary-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      border: 2px solid;
      border-image: var(--theme-gradient) 1;
      border-radius: 50px;
      z-index: -1;
    }
    
    .secondary-btn:hover { 
      background: rgba(var(--theme-color-1-rgb),.1);
      -webkit-text-fill-color: var(--theme-color-1);
      color: var(--theme-color-1);
    }
    
    .state-switch {
      text-align: center;
      margin-top: 25px;
      padding-top: 20px;
      border-top: 1px solid transparent;
      border-image: var(--theme-gradient) 1;
    }
    
    .switch-link {
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.3s ease;
    }
    
    .switch-link:hover { 
      background: var(--theme-gradient-hover);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-decoration: none; 
    }
    
    .honey { position: absolute; left: -9999px; }
    
    #statusMessage {
      margin-top: 20px;
      padding: 15px;
      border-radius: 10px;
      text-align: center;
      font-weight: 600;
    }

    @media (max-width: 480px) {
      .rh-drawer {
        padding: 15px !important;
      }
      .drawer-item {
        padding: 12px 15px;
        font-size: 12px;
        min-height: 44px;
      }
      .auth-modal-content {
        padding: 30px 20px;
      }
      
      /* Themed scrollbar for auth modal */
      .auth-modal-content::-webkit-scrollbar {
        width: 6px;
      }
      .auth-modal-content::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.3);
        border-radius: 3px;
      }
      .auth-modal-content::-webkit-scrollbar-thumb {
        background: var(--theme-gradient);
        border-radius: 3px;
      }
      .auth-modal-content::-webkit-scrollbar-thumb:hover {
        background: #FFED4E;
      }
      
      /* Back button matches theme */
      .modal-back-btn, .back-btn {
        background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
        border: 2px solid transparent !important;
      border-image: var(--theme-gradient) 1 !important;
      }
    }
    
    /* ===================== TOAST NOTIFICATIONS ===================== */
    #toast-container {
      position: fixed;
      top: 20px;
      
      
      z-index: 100003;
      pointer-events: none;
    }
    
    .toast {
      background: var(--theme-gradient);
      color: #000000;
      padding: 15px 30px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
      opacity: 0;
      
      transition: all 0.3s ease-out;
      pointer-events: auto;
      max-width: 400px;
      text-align: center;
    }
    
    .toast.show {
      opacity: 1;
      
    }
    
    .toast.error {
      background: #dc3545;
      color: #FFFFFF;
    }
    
    @keyframes slideDown {
      from {
        opacity: 0;
        
      }
      to {
        opacity: 1;
        
      }
    }
    
    @keyframes slideUp {
      from {
        opacity: 1;
        
      }
      to {
        opacity: 0;
        
      }
    }

  
    /* Modal Loading States */
    .modal-loading {
        text-align: center;
        padding: 40px;
    }
    
    .modal-loading .spinner {
        width: 40px;
        height: 40px;
        border: 3px solid rgba(255,255,255,0.2);
        border-top: 3px solid var(--white, #FFFFFF);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 0 auto 20px;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    .modal-result.success h2 { color: #4CAF50; }
    .modal-result.error h2 { color: #f44336; }
    .modal-result.warning h2 { color: #ff9800; }
    .modal-result.info h2 { color: #2196F3; }
    
    .modal-actions {
        margin-top: 20px;
        display: flex !important;
        flex-direction: column !important;
        flex-direction: column;
        gap: 4px;
    }
    
    .pin-input, .token-input {
        font-size: 24px;
        letter-spacing: 8px;
        text-align: center;
        padding: 15px;
        width: 200px;
        margin: 0 auto;
        display: block;
        background: #fff !important;
        color: #000 !important;
        border: 2px solid transparent !important;
        border-image: var(--theme-gradient) 1 !important;
        border-radius: 4px;
        font-weight: 700 !important;
        -webkit-text-fill-color: #000 !important;
    }
    
    .create-account-form input,
    .create-account-form textarea {
        width: 100%;
        padding: 12px;
        margin-bottom: 10px;
        background: var(--dark-grey, #1a1a2e);
        border: 1px solid rgba(255,255,255,0.3);
        background: var(--theme-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        border-radius: 4px;
        font-family: inherit;
    }
    
    .btn-link {
        background: none !important;
        border: none !important;
        color: var(--white, #FFFFFF) !important;
        cursor: pointer;
        text-decoration: none;
        padding: 5px;
        margin-top: 10px;
    }
    
    .btn-secondary {
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.3);
        background: var(--theme-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        padding: 12px 24px;
        border-radius: 8px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .btn-secondary:hover {
        background: rgba(255,255,255,0.2);
    }
    
    
    /* ===================== CHAT POPUP STYLES ===================== */
    .chat-window {
      position: fixed !important;
      bottom: 110px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      right: auto !important;
      top: auto !important;
      width: 390px;
      max-width: 95vw;
      height: 450px;
      max-height: 60vh;
      background: rgba(20, 20, 20, 0.98);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      flex-direction: column;
      z-index: 10000;
      box-shadow: 0 10px 40px rgba(0,0,0,0.5);
      display: none;
    }
    
    .chat-window.open {
      display: flex !important;
      flex-direction: column !important;
    }
    
    .chat-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      background: rgba(0, 0, 0, 0.8);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px 12px 0 0;
      flex-shrink: 0;
    }
    
    .chat-header-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      color: #fff;
      font-size: 16px;
    }
    
    .chat-header-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-left: auto;
    }
    
    .chat-header span {
        background: var(--theme-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 700;
        font-size: 16px;
    }
    
    .chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 15px;
    display: flex !important;
        flex-direction: column !important;
    flex-direction: column;
    gap: 4px;
}
    
    .chat-message {
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.15);
        margin-bottom: 6px;
        padding: 6px;
        border-radius: 8px;
        position: relative;
    }
    
    .chat-message.own-message {
        background: rgba(255,255,255,0.05);
    }
    
    .chat-message-header {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.chat-avatar {
    flex-shrink: 0;
}

.chat-username {
    flex-shrink: 0;
}

.chat-badge {
    flex-shrink: 0;
}

.chat-time,
.chat-timestamp {
    margin-left: auto;
    flex-shrink: 0;
}
    
    .chat-username {
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s;
}
    
    .chat-username:hover {
        opacity: 0.7;
    }
    
    .chat-timestamp {
        color: #999;
        font-size: 11px;
    }
    
    .chat-delete-btn {
        background: transparent;
        border: none;
        color: #ff4444;
        cursor: pointer;
        font-size: 12px;
        padding: 2px 6px;
        opacity: 0.6;
        transition: opacity 0.2s;
    }
    
    .chat-delete-btn:hover {
        opacity: 1;
    }
    
    .chat-message-content {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 8px;
    color: #CCCCCC;
    font-size: 12px;
    line-height: 1.5;
    word-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
    max-width: 100%;
}
    
    .chat-input-area {
        padding: 15px;
        border-top: 1px solid #333;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px;
        flex-shrink: 0;
    }
    
    .chat-input {
        flex: 1;
        padding: 12px 15px;
        background: #222;
        border: 1px solid #444;
        border-radius: 8px;
        color: #fff;
        font-size: 12px;
    }
    
    /* Chat Input Themed - Multi-color gradient placeholder and text */
    .chat-input-themed,
    #chatInput.chat-input-themed,
    input.chat-input-themed {
        color: var(--theme-color-1, #fff) !important;
        -webkit-text-fill-color: var(--theme-color-1, #fff) !important;
    }
    
    .chat-input-themed::placeholder {
        color: transparent;
        background-image: var(--theme-gradient-text, var(--theme-gradient, var(--theme-color-1)));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        opacity: 0.7;
    }
    
    .chat-input-themed::-webkit-input-placeholder {
        color: transparent;
        background-image: var(--theme-gradient-text, var(--theme-gradient, var(--theme-color-1)));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        opacity: 0.7;
    }
    
    .chat-input-themed::-moz-placeholder {
        color: transparent;
        background-image: var(--theme-gradient-text, var(--theme-gradient, var(--theme-color-1)));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        opacity: 0.7;
    }
    
    .chat-input-themed:-ms-input-placeholder {
        color: transparent;
        background-image: var(--theme-gradient-text, var(--theme-gradient, var(--theme-color-1)));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        opacity: 0.7;
    }
    
    .chat-send-btn {
        padding: 12px 20px;
        background: var(--theme-gradient);
        color: #000;
        border: none;
        border-radius: 8px;
        font-weight: 700;
        cursor: pointer;
        transition: opacity 0.2s;
    }
    
    .chat-send-btn:hover {
        opacity: 0.9;
    }
    
    .chat-send-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    /* Delete Confirmation Overlay */
    #chatDeleteOverlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.85);
        z-index: 100003;
        align-items: center;
        justify-content: center;
    }
    
    #chatDeleteOverlay.show {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .chat-delete-modal {
        background: #111;
        border-radius: 16px;
        padding: 30px;
        max-width: 400px;
        width: 90%;
        text-align: center;
    }
    
    .chat-delete-modal h3 {
        background: var(--theme-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 15px;
        font-size: 20px;
    }
    
    .chat-delete-modal p {
        color: #CCCCCC;
        margin-bottom: 25px;
    }
    
    .chat-delete-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px;
        justify-content: center;
    }
    
    .chat-delete-yes {
        padding: 12px 24px;
        background: #ff4444;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-weight: 700;
        cursor: pointer;
    }
    
    .chat-delete-no {
        padding: 12px 24px;
        background: transparent;
        background: var(--theme-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        border-radius: 8px;
        font-weight: 700;
        cursor: pointer;
    }
    
    /* User Profile Modal */
    #userProfileModal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.85);
        z-index: 100003;
        align-items: center;
        justify-content: center;
    }
    
    #userProfileModal.show {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .user-profile-card {
        background: #111;
        border: 2px solid transparent;
        border-image: var(--theme-gradient) 1;
        border-radius: 16px;
        padding: 30px;
        position: relative;
        max-width: 450px;
        width: 90%;
        max-height: 80vh;
        overflow-y: auto;
        position: relative;
    }
    
    .user-profile-close {
        position: absolute;
        top: 15px;
        right: 15px;
        background: transparent;
        border: none;
        color: #888;
        font-size: 24px;
        cursor: pointer;
    }
    
    .user-profile-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: var(--theme-gradient);
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        justify-content: center;
        font-size: 40px;
        margin: 0 auto 15px;
    }
    
    .user-profile-name {
        background: var(--theme-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-size: 24px;
        font-weight: 900;
        text-align: center;
        margin-bottom: 5px;
    }
    
    .user-profile-username {
        color: #999;
        text-align: center;
        margin-bottom: 20px;
    }
    
    .user-profile-badge {
        display: inline-block;
        padding: 6px 12px;
        background: rgba(255,255,255,0.1);
      border: 1px solid transparent;
      border-image: var(--theme-gradient) 1;
      border-radius: 20px;
      position: relative;
        background: var(--theme-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 20px;
    }
    
    .user-profile-stats {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 15px;
        margin-bottom: 20px;
    }
    
    .user-profile-stat {
        text-align: center;
    }
    
    .user-profile-stat-value {
        background: var(--theme-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-size: 20px;
        font-weight: 900;
    }
    
    .user-profile-stat-label {
        color: #999;
        font-size: 12px;
        margin-top: 5px;
    }
    
    .user-profile-bio {
        color: #CCCCCC;
        margin-bottom: 15px;
        line-height: 1.6;
    }
    
    .user-profile-location {
        color: #999;
        font-size: 12px;
    }
    
    @media (max-width: 768px) {
        .chat-window {
            width: calc(100vw - 20px);
            left: 10px;
            transform: none;
        }
    }
    
    
    @media (max-width: 480px) {
        .chat-window {
            bottom: 110px !important;
            left: 10px !important;
            right: 10px !important;
            transform: none !important;
            width: auto !important;
        }
    }
    /* Chat Message Styles - Match JavaScript output */
    .chat-message {
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.15);
        display: flex !important;
        flex-direction: column !important;
        gap: 4px;
        margin-bottom: 6px;
    }
    
    .chat-message.own {
        flex-direction: row-reverse;
    }
    
    .chat-message-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255,255,255,0.1);
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        flex-shrink: 0;
    }
    
    .chat-message-content {
        flex: 1;
        min-width: 0;
    }
    
    .chat-message-header {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.chat-avatar {
    flex-shrink: 0;
}

.chat-username {
    flex-shrink: 0;
}

.chat-badge {
    flex-shrink: 0;
}

.chat-time,
.chat-timestamp {
    margin-left: auto;
    flex-shrink: 0;
}
    
    .chat-message-username {
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .chat-message-username:hover {
        text-decoration: none;
    }
    
    .chat-message-tier {
        font-size: 12px;
        padding: 2px 6px;
        border-radius: 8px;
        font-weight: 700;
    }
    
    .chat-message-time {
        font-size: 12px;
        color: #666;
        margin-left: auto;
    }
    
    .chat-message-delete {
        font-size: 12px;
        color: #ff4444;
        cursor: pointer;
        padding: 2px 6px;
        border-radius: 4px;
        transition: all 0.2s ease;
        opacity: 0.7;
        font-weight: bold;
        background: transparent;
        border: none;
    }
    
    .chat-message-delete:hover {
        opacity: 1;
        background: rgba(255, 68, 68, 0.2);
    }
    
    .chat-message-text {
        font-size: 12px;
        color: #e0e0e0;
        line-height: 1.4;
        word-wrap: break-word;
        background: rgba(255,255,255,0.03);
        padding: 10px 12px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.05);
    }
    
    .chat-message.own .chat-message-text {
        background: rgba(255,255,255,0.1);
        border-color: rgba(255,255,255,0.2);
    }

    
    /* ===================== PREMIERE SYSTEM ===================== */
    /* IMPORTANT: #upcomingPanel is SEPARATE from countdown-overlay - do NOT combine selectors */
    .upcoming-panel {
      display: none;
      position: relative !important; /* NOT absolute - separate from countdown overlay */
      flex-direction: row !important; /* Horizontal layout */
      background: linear-gradient(135deg, rgba(80,60,0,0.9), rgba(0,0,0,0.9));
      border: 1px solid transparent;
      border-image: var(--theme-gradient) 1;
      border-radius: 10px;
      position: relative;
      padding: 12px 15px;
      margin: 15px auto 0;
      max-width: 500px;
      align-items: center;
      gap: 12px;
      top: auto !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
    }
    .upcoming-panel.active { 
      display: flex !important; 
      flex-direction: row !important;
      position: relative !important;
    }
    .upcoming-header { display: flex; flex-direction: column; align-items: center; min-width: 70px; }
    .upcoming-label { 
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-size: 9px; 
      text-transform: uppercase; 
      letter-spacing: 1px; 
      font-weight: 700; 
    }
    .upcoming-timer { font-size: 18px; font-weight: 700; color: #fff; font-family: monospace; }
    .upcoming-thumb { width: 80px; height: 45px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
    .upcoming-info { flex: 1; min-width: 0; }
    .upcoming-title { color: #fff; font-size: 13px; font-weight: 700; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .upcoming-tags { display: flex; flex-wrap: wrap; gap: 4px; }
    .upcoming-tag { background: rgba(255,255,255,0.1); color: #888; padding: 2px 8px; border-radius: 10px; font-size: 10px; }
    @media (max-width: 600px) {
      .upcoming-panel { flex-direction: column; text-align: center; padding: 10px; margin: 10px 10px 0; }
      .upcoming-info { text-align: center; }
      .upcoming-tags { justify-content: center; }
    }
    .premiere-badge-corner {
      position: absolute; top: 15px; right: 15px; background: #ff0000; color: #fff;
      padding: 8px 15px; border-radius: 4px; font-weight: 700; font-size: 12px;
      text-transform: uppercase; letter-spacing: 1px; z-index: 25; display: none;
      animation: pulse-badge 1.5s ease-in-out infinite; box-shadow: 0 0 15px rgba(255,0,0,0.5);
    }
    .premiere-badge-corner.active { display: block; }
    @keyframes pulse-badge { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

  
    /* ===================== COUNTDOWN OVERLAY ===================== */
    .countdown-overlay .countdown-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.3;
      filter: blur(10px);
      z-index: -1;
    }
    /* IMPORTANT: Do NOT add #upcomingPanel to this selector - they are separate elements */
    .countdown-overlay,
    #countdownOverlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.85);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 9000 !important;
      backdrop-filter: blur(5px);
    }
    .countdown-overlay.active {
      display: flex;
    }
    .countdown-overlay .countdown-label {
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 3px;
      margin-bottom: 10px;
    }
    .countdown-overlay .countdown-timer {
      font-family: 'Courier New', monospace;
      font-size: 72px;
      font-weight: bold;
      color: #fff;
      text-shadow: 0 0 30px rgba(255,153,51,0.5);
    }
    .countdown-overlay .countdown-title {
      color: #888;
      font-size: 18px;
      margin-top: 20px;
      text-align: center;
      max-width: 80%;
    }
    .countdown-overlay .countdown-desc {
      color: #aaa;
      font-size: 14px;
      margin-top: 10px;
      text-align: center;
      max-width: 70%;
      line-height: 1.4;
    }
    .countdown-overlay.final-seconds .countdown-timer {
      color: #ff0000;
      text-shadow: 0 0 30px rgba(255,0,0,0.5);
      animation: pulse-countdown 0.5s ease-in-out infinite;
    }
    @keyframes pulse-countdown {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }

  
    /* Responsive social icons */
    @media (max-width: 768px) {
      .social-icons {
        gap: 20px !important;
        margin-top: 35px !important;
      }
    }
</style>
<style>
#rhAccountBtn, #dropdownUsername { text-transform: none !important; }
</style>
  <style>
    /* Media Player Variables - LionWithAMic Theme */
    :root {
      --player-accent: var(--theme-gradient);
      --player-bg: #111;
      --player-border: var(--theme-gradient);
    }

    /* Media Panel Container */
    .media-panel {
      background: var(--player-bg);
      border: 2px solid transparent;
      border-image: var(--theme-gradient) 1;
      border-radius: 16px;
      padding: 20px;
      width: 95%;
      max-width: 1000px;
      margin: 15px auto;
      min-height: 600px;
      position: relative;
      box-shadow: 0 0 30px rgba(var(--theme-color-1-rgb), 0.3);
    }

    /* Top Controls Row */
    .top-controls-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      gap: 15px;
    }

    /* Search Bar */
        .search-container {
      flex: 1;
      position: relative;
      display: flex;
      align-items: center;
      min-width: 0;
    }

    .search-expand-btn {
      position: absolute;
      right: 10px;
      background: transparent;
      border: none;
      color: #888;
      font-size: 18px;
      cursor: pointer;
      padding: 5px;
      transition: color 0.2s;
      z-index: 10;
    }

    .search-expand-btn:hover {
      color: #fff;
    }

    .search-input {
      width: 100%;
      padding: 12px 16px;
      padding-right: 40px;
      background: #0a0a0a;
      border: 1px solid #333;
      border-radius: 8px;
      color: #fff;
      font-size: 12px;
      box-sizing: border-box;
    }

    .search-input:focus {
      outline: none;
      border: 2px solid transparent;
      border-image: var(--theme-gradient) 1;
      box-shadow: 0 0 15px rgba(var(--theme-color-1-rgb), 0.3);
    }

    .search-input::placeholder {
      color: #666;
    }

    .search-dropdown,
    #searchDropdown {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: #1a1a1a;
      border: 1px solid #333;
      border-radius: 8px;
      margin-top: 5px;
      max-height: 300px;
      overflow-y: auto;
      z-index: 9999 !important;
      display: none;
      right: 0;
      background: #1a1a1a;
      border: 1px solid #333;
      border-radius: 8px;
      margin-top: 5px;
      max-height: 300px;
      overflow-y: auto;
      z-index: 100;
      display: none;
    }
        .search-result {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      cursor: pointer;
      border-bottom: 1px solid #222;
      transition: background 0.2s;
    }

    .search-result:hover {
      background: #1a1a1a;
    }

    .search-result.empty {
      padding: 20px;
      text-align: center;
      color: #888;
      cursor: default;
    }

    .result-thumb {
      width: 60px;
      height: 34px;
      object-fit: cover;
      border-radius: 4px;
      flex-shrink: 0;
    }

    .result-title {
      font-weight: 600;
      color: #fff;
      font-size: 12px;
      white-space: nowrap;
    }

    .result-tags {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }

    .result-tag {
      background: #2a2a2a;
      color: #888;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .result-tag:hover {
      background: var(--player-accent, #fff);
      color: #000;
    }

    .result-meta {
      color: #666;
      font-size: 11px;
      margin-left: auto;
      white-space: nowrap;
    }

    /* Toggle Slider */
    .slider-toggle-container {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .slider-icon {
      font-size: 20px;
      opacity: 0.5;
      cursor: pointer;
      transition: opacity 0.2s, transform 0.2s;
    }

    .slider-icon:hover {
      transform: scale(1.15);
    }

    .slider-icon.active {
      opacity: 1;
    }

    .slider-track {
      width: 50px;
      height: 26px;
      background: var(--theme-gradient); /* Always gradient, not just when active */
      border-radius: 13px;
      position: relative;
      cursor: pointer;
      flex-shrink: 0;
      transition: all 0.2s;
      opacity: 0.5; /* Dimmed when inactive */
    }

    .slider-track.info-active {
      opacity: 1; /* Full brightness when active */
      box-shadow: 0 0 10px rgba(var(--theme-color-1-rgb), 0.5);
    }

    .slider-thumb {
      width: 22px;
      height: 22px;
      background: #000; /* Black thumb for contrast */
      border: 2px solid var(--theme-gradient);
      border-radius: 50%;
      position: absolute;
      top: 2px;
      left: 2px;
      transition: left 0.2s, border-color 0.2s;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    }

    .slider-thumb.info-active {
      left: 26px;
      background: var(--theme-gradient); /* Gradient when active */
      border-color: transparent;
    }

    /* Video Container */
    .video-container {
        position: relative;
      width: 100%;
      aspect-ratio: 16/9;
      background: var(--theme-gradient); /* Themed gradient fill */
      border: 2px solid transparent;
      border-image: var(--theme-gradient) 1;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 20px rgba(var(--theme-color-1-rgb), 0.4);
    }
    /* Video Loading Placard */
    .video-loading-placard {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 10;
      border-radius: 12px;
    }

    .video-loading-placard.active {
      display: flex;
    }

    .loading-spinner {
      width: 50px;
      height: 50px;
      border: 4px solid #333;
      border-top: 3px solid transparent;
      border-image: var(--theme-gradient) 1;
      border-radius: 50%;
      position: relative;
      animation: spin 1s linear infinite;
      margin-bottom: 15px;
    }

    .loading-text {
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-size: 16px;
      font-weight: 600;
    }

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


    .video-container video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: transparent; /* Transparent so gradient shows through */
    }
    /* Video Loading Placard */
    .video-loading-placard {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 10;
      border-radius: 12px;
    }

    .video-loading-placard.active {
      display: flex;
    }

    .loading-spinner {
      width: 50px;
      height: 50px;
      border: 4px solid #333;
      border-top: 3px solid transparent;
      border-image: var(--theme-gradient) 1;
      border-radius: 50%;
      position: relative;
      animation: spin 1s linear infinite;
      margin-bottom: 15px;
    }

    .loading-text {
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-size: 16px;
      font-weight: 600;
    }

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


    
    /* Premiere Overlay */
    .premiere-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(0,0,0,0.8), rgba(0,0,0,0.6));
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 15;
      border-radius: 12px;
      pointer-events: none;
    }
    .premiere-overlay.active {
      display: flex;
    }
    .premiere-badge {
      background: linear-gradient(135deg, #ff0000, #cc0000);
      color: #fff;
      padding: 8px 20px;
      border-radius: 4px;
      font-weight: 900;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 2px;
      animation: pulse-premiere 1.5s ease-in-out infinite;
      box-shadow: 0 0 20px rgba(255,0,0,0.5);
    }
    @keyframes pulse-premiere {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.05); opacity: 0.9; }
    }
    .premiere-title {
      color: #fff;
      font-size: 18px;
      margin-top: 15px;
      font-weight: 700;
      text-shadow: 0 2px 10px rgba(0,0,0,0.8);
    }

    .video-placeholder {
      color: #444;
      font-size: 18px;
    }

    /* Player Controls */
    .player-controls-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
    }

    .control-row {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 35px;
    }

    /* Control Buttons */
    .button-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .button-label {
      font-size: 11px;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 1px;
      cursor: pointer;
    }

    .control-btn {
      width: 120px;
      height: 85px;
      background: #1a1a1a;
      background-size: cover;
      background-position: center;
      border: 2px solid transparent;
      border-image: var(--theme-gradient) 1;
      border-radius: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.1s, box-shadow 0.2s;
      position: relative;
    }

    .control-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 0 20px rgba(var(--theme-color-1-rgb), 0.5);
    }

    .btn-icon {
      font-size: 24px;
      background: rgba(0,0,0,0.7);
      padding: 8px 12px;
      border-radius: 6px;
    }

    /* Play/Pause Button */
    .play-btn {
      width: 100px;
      height: 100px;
      background: var(--theme-gradient); /* Gradient background - always visible */
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.1s, background 0.2s, box-shadow 0.2s;
      box-shadow: 0 0 25px rgba(var(--theme-color-1-rgb), 0.5),
                  0 0 0 4px var(--theme-gradient); /* Gradient border - always visible */
      position: relative;
    }
    
    .play-btn:hover {
      transform: scale(1.08);
      background: var(--theme-gradient-hover);
      box-shadow: 0 0 30px rgba(var(--theme-color-1-rgb), 0.7),
                  0 0 0 4px var(--theme-gradient-hover);
    }

    .play-btn svg {
      width: 32px;
      height: 32px;
      fill: #000; /* Black icon for contrast on gradient */
      filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
    }

    /* Song Info Panel */
    .song-info-panel {
      display: none;
      padding: 20px 0;
    }

    .song-info-panel.active {
      display: block;
    }

    .song-info-content {
      text-align: center;
    }

    .song-info-content h3 {
      color: #fff;
      font-size: 20px;
      margin-bottom: 15px;
    }

    .platform-links {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .platform-link {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      background: #1a1a1a;
      border: 1px solid #333;
      border-radius: 20px;
      color: #fff;
      text-decoration: none;
      font-size: 12px;
      transition: border-color 0.2s;
    }

    .platform-link:hover {
      border: 1px solid transparent;
      border-image: var(--theme-gradient) 1;
    }

    .platform-icon {
      font-size: 16px;
    }

    .song-synopsis {
      margin-bottom: 15px;
    }

    .song-synopsis h4 {
      background: var(--theme-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-size: 12px;
      margin-bottom: 8px;
    }

    .song-synopsis p {
      color: #aaa;
      font-size: 12px;
      line-height: 1.5;
      max-width: 600px;
      margin: 0 auto;
    }

    .song-tags {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    .tag {
      padding: 4px 12px;
      background: #1a1a1a;
      border: 1px solid #333;
      border-radius: 15px;
      color: #888;
      font-size: 12px;
    }

    /* Responsive */
    @media (max-width: 600px) {
      .media-panel {
        margin: 20px 10px;
        padding: 15px;
      }

      .top-controls-row {
        gap: 4px;
      }

      .search-input {
        padding: 10px 12px;
      padding-right: 40px;
        font-size: 12px;
      }

      .slider-icon {
        font-size: 16px;
      }

      .slider-track {
        width: 40px;
        height: 22px;
      }

      .slider-thumb {
        width: 18px;
        height: 18px;
      }

      .slider-thumb.info-active {
        left: 20px;
      }

      .control-btn {
        width: 80px;
        height: 55px;
      }

      .play-btn {
        width: 65px;
        height: 65px;
      }

      .platform-links {
        flex-direction: column;
        align-items: center;
      }
    }
  
    /* Video Browser Modal */
            .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10000;
      align-items: center;
      justify-content: center;
    }

    .modal.active {
      display: flex;
    }

    .video-browser-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.95);
      z-index: 10000;
      padding: 20px;
      overflow-y: auto;
    }

    .video-browser-modal.open {
      display: block;
    }

    .modal.active {
      display: flex;
    }

    .modal-backdrop {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      cursor: pointer;
    }

    .modal-content {
      position: relative;
      background: #1a1a1a;
      border-radius: 12px;
      z-index: 10001;
      max-width: 90%;
      max-height: 90vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .video-browser {
      width: 90%;
      max-width: 900px;
      max-height: 80vh;
      overflow-y: auto;
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      border-bottom: 1px solid #333;
    }

    .modal-header h2 {
      margin: 0;
      color: #fff;
      font-size: 20px;
    }

    .modal-header button {
      background: transparent;
      border: none;
      color: #888;
      font-size: 24px;
      cursor: pointer;
      padding: 0;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .modal-header button:hover {
      color: #fff;
    }

        .browser-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .browser-header h2 {
      color: #fff;
      font-size: 24px;
      margin: 0;
    }

    .browser-header button {
      background: transparent;
      border: none;
      color: #888;
      font-size: 28px;
      cursor: pointer;
      padding: 0;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .browser-header button:hover {
      color: #fff;
    }

    .browser-controls {
      display: flex;
      gap: 15px;
      align-items: center;
      margin-bottom: 25px;
      flex-wrap: wrap;
    }

    .browser-controls input {
      flex: 1;
      min-width: 200px;
      padding: 12px 16px;
      background: #111;
      border: 1px solid #333;
      border-radius: 8px;
      color: #fff;
      font-size: 12px;
    }

    .browser-controls input:focus {
      outline: none;
      border-color: var(--player-accent);
    }

    .browser-controls select {
      padding: 12px 16px;
      background: #111;
      border: 1px solid #333;
      border-radius: 8px;
      color: #fff;
      font-size: 12px;
      cursor: pointer;
    }

    .browser-controls select:focus {
      outline: none;
      border-color: var(--player-accent);
    }

    .browser-stats {
      color: #666;
      font-size: 12px;
      margin-left: auto;
    }

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

    .video-card {
      background: #111;
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
      border: 1px solid #333;
    }

    .video-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.4);
      border-color: var(--player-accent);
    }

    .card-thumb {
      position: relative;
      aspect-ratio: 16/9;
      background: #0a0a0a;
    }

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

    .card-views {
      position: absolute;
      bottom: 8px;
      right: 8px;
      background: rgba(0,0,0,0.8);
      color: #fff;
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 11px;
    }

    .card-info {
      padding: 12px;
    }

    .card-title {
      font-weight: 600;
      color: #fff;
      margin-bottom: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 12px;
    }

    .card-date {
      font-size: 12px;
      color: #666;
      margin-bottom: 8px;
    }

    .card-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .card-tag {
      background: #222;
      color: #888;
      padding: 3px 10px;
      border-radius: 12px;
      font-size: 11px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .card-tag:hover {
      background: var(--player-accent);
      color: #000;
    }
    
    /* ===================== VIEWPORT HANDLER CLASSES ===================== */
    /* Applied by viewport-handler.js - detects mobile/desktop/TV */
    
    /* MOBILE VIEWPORT (< 768px OR portrait) */
    .viewport-mobile .origin-page {
      padding-top: 20px !important;
    }
    
    .viewport-mobile .origin-wrap {
      flex-direction: column;
      gap: 20px;
      margin-top: 0 !important;
    }
    
    .viewport-mobile .origin-main-panel {
      width: 100%;
      max-width: 100%;
      order: 1; /* Show first on mobile */
    }
    
    .viewport-mobile .origin-headline {
      font-size: 32px !important;
      margin-bottom: 15px !important;
      margin-top: 0 !important;
    }
    
    .viewport-mobile .origin-lead {
      font-size: 16px !important;
      margin-bottom: 20px !important;
    }
    
    .viewport-mobile .origin-side-panel {
      width: 100%;
      max-width: 100%;
      order: 2; /* Show second on mobile */
    }
    
    /* Buttons side by side on mobile */
    .viewport-mobile .origin-cta-row {
      display: flex !important;
      flex-direction: row !important;
      gap: 10px !important;
      flex-wrap: nowrap !important;
      margin-top: 20px !important;
    }
    
    .viewport-mobile .origin-btn {
      flex: 1 !important;
      min-width: 0 !important;
      padding: 12px 16px !important;
      font-size: 12px !important;
    }
    
    /* DESKTOP VIEWPORT (768px - 1920px, landscape) */
    .viewport-desktop .origin-wrap {
      display: grid;
      grid-template-columns: 1fr 480px;
      gap: 50px;
      max-width: 1400px;
      margin: 0 auto;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
    }
    
    .viewport-desktop .origin-main-panel {
      width: 100%;
      max-width: 100%;
    }
    
    .viewport-desktop .origin-side-panel {
      width: 100%;
      max-width: 480px;
    }
    
    /* TV/LARGE VIEWPORT (> 1920px OR ultra-wide) */
    .viewport-tv .origin-wrap {
      display: grid;
      grid-template-columns: 1fr 500px;
      gap: 60px;
      max-width: 2000px;
      margin: 0 auto;
      padding: 0 40px;
    }
    
    .viewport-tv .origin-main-panel {
      font-size: 1.1em;
    }
    
    .viewport-tv .origin-side-panel {
      width: 500px;
    }
    
    .viewport-tv .origin-qa-item {
      padding: 25px;
      margin-bottom: 25px;
    }
    </style>
