/* ==========================================================================
       AI MATCHER AMBIENT ENVIRONMENT (WHEN IN AI MATCHER)
       ========================================================================== */
    body.ai-dimension-mode {
      background-color: #030407;
      background-image: 
        radial-gradient(circle at 50% 25%, rgba(120, 150, 220, 0.12) 0%, rgba(10, 12, 20, 0.6) 50%, #030407 100%),
        radial-gradient(circle at 20% 80%, rgba(80, 110, 180, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(160, 180, 240, 0.06) 0%, transparent 50%);
    }

    body.ai-dimension-mode .site-footer {
      display: none;
    }

    /* ==========================================================================
       TOP LIQUID GLASS NAVBAR (WITH MORPHING AI MATCHER STATE)
       ========================================================================== */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 72px;
      padding: 0 var(--container-pad);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      z-index: 900;
      transition: all 0.4s var(--ease-netflix);
      background: linear-gradient(180deg, rgba(7, 8, 11, 0.9) 0%, rgba(7, 8, 11, 0.2) 80%, transparent 100%);
    }

    .navbar.scrolled {
      background: rgba(10, 12, 18, 0.88);
      backdrop-filter: var(--blur-strength) saturate(180%);
      -webkit-backdrop-filter: var(--blur-strength) saturate(180%);
      border-bottom: 1px solid var(--glass-border);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .nav-left {
      display: flex;
      align-items: center;
      gap: 24px;
      flex-shrink: 0;
    }

    .nav-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 19px;
      font-weight: 900;
      letter-spacing: -0.5px;
      cursor: pointer;
      user-select: none;
      flex-shrink: 0;
    }

    .brand-mark {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.04) 100%);
      border: 1px solid rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3);
      flex-shrink: 0;
      transition: all 0.3s ease;
    }

    .brand-mark svg {
      width: 18px;
      height: 18px;
      fill: var(--text-main);
    }

    body.ai-dimension-mode .brand-mark {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(160, 180, 255, 0.15) 100%);
      border-color: rgba(255, 255, 255, 0.45);
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 1px 2px #fff;
    }

    .brand-text {
      display: inline-block !important;
      background: linear-gradient(180deg, #ffffff 0%, #b0b5c0 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      white-space: nowrap;
    }

    .ai-portal-tag {
      display: none;
      align-items: center;
      gap: 6px;
      padding: 4px 11px;
      border-radius: var(--radius-full);
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.28);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: #fff;
      box-shadow: 0 0 14px rgba(255, 255, 255, 0.2);
    }

    body.ai-dimension-mode .ai-portal-tag {
      display: inline-flex;
    }

    /* Main Navigation Switcher */
    .nav-main-switch {
      display: flex;
      align-items: center;
      gap: 4px;
      background: rgba(255, 255, 255, 0.04);
      padding: 4px;
      border-radius: var(--radius-full);
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(16px);
      transition: opacity 0.3s, transform 0.3s;
    }

    body.ai-dimension-mode .nav-main-switch {
      display: none !important;
    }

    .nav-tab-btn {
      padding: 6px 15px;
      border-radius: var(--radius-full);
      font-size: 13px;
      font-weight: 700;
      color: var(--text-muted);
      transition: all 0.25s var(--ease-netflix);
      cursor: pointer;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 6px;
    }

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

    .nav-tab-btn.active {
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.25);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
    }

    .nav-tab-btn svg { width: 14px; height: 14px; }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    /* Glass Search Box */
    .search-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      transition: opacity 0.3s;
    }

    body.ai-dimension-mode .search-wrapper,
    body.ai-dimension-mode #navWatchlistBtn {
      display: none !important;
    }

    .search-input-box {
      width: 180px;
      height: 38px;
      padding: 0 34px 0 38px;
      border-radius: var(--radius-full);
      background: var(--glass-base);
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      color: var(--text-main);
      font-size: 13px;
      outline: none;
      transition: all 0.3s var(--ease-netflix);
    }

    .search-input-box::placeholder {
      color: rgba(255, 255, 255, 0.28);
    }

    .search-input-box:focus {
      width: 240px;
      background: rgba(255, 255, 255, 0.08);
      border-color: var(--glass-border-hover);
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.3);
    }

    .search-icon-btn {
      position: absolute;
      left: 12px;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
    }

    .search-icon-btn svg { width: 15px; height: 15px; }

    .search-clear-btn {
      position: absolute;
      right: 9px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      display: none;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      transition: all 0.2s;
    }

    .search-clear-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      color: var(--text-main);
    }

    .search-clear-btn svg { width: 10px; height: 10px; }

    .nav-btn {
      height: 38px;
      padding: 0 14px;
      border-radius: var(--radius-full);
      background: var(--glass-base);
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(16px);
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      transition: all 0.25s;
      white-space: nowrap;
    }

    .nav-btn:hover, .nav-btn.active {
      background: var(--glass-hover);
      border-color: var(--glass-border-hover);
      color: var(--text-main);
    }

    .nav-btn svg { width: 15px; height: 15px; }

    .nav-badge {
      background: rgba(255, 255, 255, 0.15);
      font-size: 10px;
      font-weight: 800;
      padding: 1px 6px;
      border-radius: 10px;
      color: #fff;
      transition: transform 0.2s;
    }

    /* AI Matcher Exit / Back Button */
    .ai-exit-btn {
      display: none;
      align-items: center;
      gap: 8px;
      height: 40px;
      padding: 0 18px;
      border-radius: var(--radius-full);
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.22);
      backdrop-filter: blur(20px);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.25s var(--ease-netflix);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    }

    body.ai-dimension-mode .ai-exit-btn {
      display: inline-flex;
    }

    .ai-exit-btn:hover {
      background: rgba(255, 255, 255, 0.18);
      border-color: rgba(255, 255, 255, 0.4);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
    }

    .ai-exit-btn svg { width: 15px; height: 15px; }