:root {
      --alt-overlay-bg: rgba(148, 24, 12, 0.96);
      --alt-text: #fff;
      --transition-curtain-bg: #94180c;
      --transition-orb-bg: #94180c;
  }

  /* Prevent accidental horizontal scrolling caused by large decorative elements */
  html, body {
      overflow-x: hidden;
  }

  nav.alt-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: var(--header-height, 80px);
      display: flex;
      align-items: center;
      padding: 0 var(--space-3xl, 40px);
      z-index: 9999;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      transition: height 0.3s ease, padding 0.3s ease;
  }

  @media (max-width: 767px) {
      nav.alt-header {
          height: var(--header-height-mobile, 60px);
          padding: 0 var(--space-md, 20px);
      }
      /* Ensure main content clears the fixed header on mobile */
      main { padding-top: var(--header-height-mobile, 60px); }
      header { padding-top: var(--header-height-mobile, 60px); }
  }

  .alt-logo {
      display: flex;
      align-items: center;
      gap: 12px;
  }

  .alt-menu {
      margin-left: auto;
  }

  .alt-menu .alt-btn {
      background: transparent;
      border: 0;
      color: var(--alt-text);
      font-size: 18px;
      padding: 8px;
  }

  /* Overlay becomes a right-side sliding panel that occupies max 25% of screen */
  #altOverlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.25);
      opacity: 0;
      pointer-events: none;
      transition: opacity .22s ease;
      z-index: 10000;
  }

  #altOverlay.open {
      opacity: 1;
      pointer-events: auto;
  }

  .alt-panel {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: min(25%, var(--sidebar-width-expanded, 360px));
      max-width: var(--sidebar-width-expanded, 360px);
      background: var(--alt-overlay-bg);
      box-shadow: -8px 0 24px rgba(0, 0, 0, 0.2);
      transform: translateX(100%);
      transition: transform .28s ease;
      display: flex;
      flex-direction: column;
      overflow: hidden;
  }

  #altOverlay.open .alt-panel {
      transform: translateX(0);
  }

  .alt-panel {
      --spot-x: 50%;
      --spot-y: 50%;
  }

  .alt-panel::before {
      /* subtle grid pattern */
      content: '';
      position: absolute;
      inset: 0;
      background-image:
          linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
      background-size: 24px 24px, 24px 24px;
      mix-blend-mode: overlay;
      pointer-events: none;
      opacity: 0.9;
  }

  .alt-panel::after {
      /* spotlight that follows pointer */
      content: '';
      position: absolute;
      width: 700px;
      height: 700px;
      left: calc(var(--spot-x) - 350px);
      top: calc(var(--spot-y) - 350px);
      pointer-events: none;
      background: radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 25%, transparent 50%);
      transition: left 0.05s linear, top 0.05s linear;
  }

  .alt-panel nav {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: var(--space-2xl, 32px);
      padding-top: calc(var(--header-height, 80px) * 0.6);
      /* allow only vertical scrolling; prevent horizontal scrollbars */
      overflow-y: auto;
      overflow-x: hidden;
      margin-top: 56px;
  }

  /* Hide visual scrollbar in the side panel while preserving scroll functionality */
  .alt-panel nav {
      -ms-overflow-style: none; /* IE and Edge */
      scrollbar-width: none; /* Firefox */
  }

  .alt-panel nav::-webkit-scrollbar {
      width: 0px;
      height: 0px;
      background: transparent;
  }

  .alt-panel a {
      color: var(--alt-text);
      font-size: 18px;
      text-decoration: none;
      /* ensure long link text wraps instead of causing horizontal overflow */
      word-wrap: break-word;
      white-space: normal;
  }

  .alt-panel .panel-footer {
      margin-top: auto;
      padding: 20px;
      display: flex;
      gap: 10px;
      justify-content: center;
      z-index: 2;
  }

  .btn-alt {
      padding: 10px 14px;
      /* border-radius: 8px; */
      font-weight: 600;
      border: 2px solid rgba(255, 255, 255, 0.12);
  }

  .btn-login {
      background: transparent;
      color: var(--alt-text);
  }

  .btn-signup {
      background: #fff;
      color: var(--alt-overlay-bg);
  }

  /* Ensure sign-up button text overrides the general anchor color inside panel */
  .alt-panel .panel-footer .btn-signup {
      color: var(--alt-overlay-bg);
  }

  .alt-hamburger {
      width: 36px;
      height: 24px;
      display: inline-flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
  }

  .alt-hamburger span {
      display: block;
      width: 100%;
      height: 3px;
      background: var(--alt-text);
      border-radius: 2px;
      transform-origin: center;
      transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .2s ease, background-color .2s ease;
  }

  /* Active -> X */
  .alt-hamburger.active span:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
      background-color: #fff;
  }

  .alt-hamburger.active span:nth-child(2) {
      opacity: 0;
      transform: scaleX(0);
  }

  .alt-hamburger.active span:nth-child(3) {
      transform: translateY(-12px) rotate(-45deg);
      background-color: #fff;
  }

  /* Small screens: make the panel open from the top (slide down) */
  @media (max-width: 767px) {
      .alt-panel {
          left: 0;
          right: 0;
          top: 0;
          height: auto;
          width: 100%;
          max-width: 100vh;
          max-height: 85vh;
          transform: translateY(-100%);
          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
          border-radius: 0;
      }

      /* When overlay is open, panel slides down into view */
      #altOverlay.open .alt-panel {
          transform: translateY(0);
      }

      /* Hide the large spotlight effect on small devices for performance
         and avoid clipping issues */
      .alt-panel::after {
          display: none;
      }

      .alt-panel nav {
          margin-top: 12px;
          padding: 20px 20px 12px 20px;
      }

      .alt-panel .panel-footer {
          padding: 12px 16px;
          justify-content: flex-start;
          gap: 10px;
      }

      /* Make overlay background a bit stronger on mobile to focus content */
      #altOverlay {
          background: rgba(0, 0, 0, 0.45);
      }
  }

  /* Notification UI inside sidebar */
  .alt-panel-top {
      position: relative;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 18px 20px 6px 20px;
      gap: 12px;
  }

  .notif-btn {
      position: relative;
      background: transparent;
      border: none;
      color: var(--alt-text);
      font-size: 18px;
      width: 44px;
      height: 44px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform .18s ease, background .18s ease;
  }

  .notif-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,0.03); }

  .notif-count {
      position: absolute;
      top: 6px;
      right: 6px;
      background: #ef4444;
      color: #fff;
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 999px;
      font-weight:700;
      line-height:1;
  }

  /* Popup: occupies full sidebar width and half viewport height */
  .notif-popup {
      position: absolute;
      top: var(--header-height, 80px);
      right: 0;
      left: 0;
      width: 100%;
      max-height: 0;
      overflow: hidden;
      background: rgba(148, 24, 12, 1);
      border-top: 1px solid rgba(255,255,255,0.1);
      transform-origin: top center;
      opacity: 0;
      transition: max-height .36s ease, opacity .24s ease, transform .28s cubic-bezier(.2,.9,.2,1);
      box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  }

  /* When open, allow half viewport height */
  .notif-popup.open {
      max-height: 50vh;
      opacity: 1;
      transform: translateY(0);
  }

  .notif-popup-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(0,0,0,0.2); background: rgba(0,0,0,0.1); }
  .notif-popup-header strong { color: #fff; font-size: 15px; font-weight: 600; }
  .notif-popup .notif-items { padding: 0; overflow:auto; max-height: calc(50vh - 56px); }
  .notif-item:hover { background: rgba(0,0,0,0.25) !important; }
  .notif-item { padding:10px 8px; border-radius:8px; background: rgba(255,255,255,0.03); margin-bottom:8px; cursor: pointer; transition: background .18s ease; }
  .notif-item:hover { background: rgba(255,255,255,0.08); }
    .notif-item.unread {
            box-shadow: inset 2px 0 0 #ffffff;
            background: rgba(255,255,255,0.08);
    }
  .notif-main { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
  .notif-title { font-size:14px; color:#fff; font-weight:500; line-height:1.4; }
  .notif-meta { font-size:12px; color:rgba(255,255,255,0.65); margin-top:4px; }
  .notif-detail {
      max-height: 0;
      overflow: hidden;
      padding: 0 8px;
      color: rgba(255,255,255,0.9);
      font-size: 13px;
      line-height: 1.5;
      transition: max-height .28s ease, padding .2s ease;
  }
  .notif-item.open .notif-detail {
      max-height: 160px;
      padding: 8px 8px 12px 8px;
  }
  .notif-clear { background: transparent; border: none; color: rgba(255,255,255,0.8); cursor:pointer; font-size:14px; padding:4px 8px; }
  .notif-clear:hover { color: #fff; }

    /* Global page transition curtain */
    #transition-curtain {
            position: fixed;
            inset: 0;
            z-index: 20000;
            pointer-events: none;
            transform: translateY(-100%);
            opacity: 1;
            background:
                linear-gradient(165deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 45%),
                linear-gradient(35deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 55%),
                var(--transition-curtain-bg);
            will-change: transform;
    }

            #transition-orb {
                position: fixed;
                left: 0;
                top: 0;
                width: 24px;
                height: 24px;
                border-radius: 9999px;
                z-index: 20001;
                pointer-events: none;
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.001);
                background:
                radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 44%),
                linear-gradient(150deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 50%),
                var(--transition-orb-bg);
                will-change: transform, opacity;
            }

    @media (prefers-reduced-motion: reduce) {
            #transition-curtain {
                    transition: none !important;
                    animation: none !important;
            }

                #transition-orb {
                    transition: none !important;
                    animation: none !important;
                }
    }