/* ==========================================================================
   PROPHETX HELP CENTRE - DARK THEME
   ========================================================================== */

   :root {
    --navy: #0D1117;
    --navy-dark: #090C10;
    --orange: #00D9A5;
    --orange-hover: #00B888;
    --blue: #00D9A5;
    --light-bg: #0D1117;
    --white: #161B22;
    --text-dark: #E6EDF3;
    --text-muted: #8B949E;
    --border: #30363D;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
    --radius: 12px;
    --radius-lg: 16px;
  }
  
  /* Hide Zendesk's default brand bar and elements */
  [role="banner"]:not(.site-header),
  .brand,
  #brand,
  header[data-garden-id],
  [data-brand],
  body > header:first-of-type:not(.site-header),
  body > div:first-child:not(.site-header):not(.main-content):not([class]),
  a[href*="zendesk"]:first-child,
  body > a:first-child,
  body > a[href]:first-of-type,
  a.skip-navigation,
  .skip-navigation {
    display: none !important;
  }

  /* Ensure Zendesk's injected user-nav doesn't break layout */
  .user-nav,
  [role="navigation"]:not(.header-nav) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  
  /* Hide the ProphetX link that appears outside header */
  body > a {
    display: none !important;
  }
  
  /* Hide Zendesk's default footer and powered by */
  body > footer:not(.site-footer),
  footer:not(.site-footer),
  .powered-by-zendesk,
  [data-garden-container-id] {
    display: none !important;
  }

  /* Hide Zendesk's duplicate copyright - but NOT the Zendesk widget (iframe/div) */
  .site-footer + p,
  .site-footer + footer:not(.site-footer) {
    display: none !important;
  }

  /* Chat is disabled — the theme no longer loads the Zendesk widget.
     Also hide it if it gets injected at the account level (covers both
     the classic Web Widget and the newer messaging widget). */
  iframe#launcher,
  iframe[data-product="web_widget"],
  div[data-product="web_widget"],
  #zdWidget,
  #webWidget,
  [id*="ze-snippet"],
  iframe#webWidget,
  iframe[title*="messaging window" i],
  iframe[title*="launch messaging" i],
  iframe[name="Messaging window"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    font-size: 16px;
    scroll-behavior: smooth;
  }
  
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-dark);
    background: var(--light-bg);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  a {
    color: var(--blue);
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: underline;
  }
  
  img {
    max-width: 100%;
    height: auto;
  }
  
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  /* ==========================================================================
     HEADER - Dark Navy Style like ProphetX
     ========================================================================== */
  
  .site-header {
    background: var(--navy);
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  
  .header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .header-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #FFFFFF;
    text-decoration: none;
  }
  
  .header-logo img {
    height: 22px;
    width: auto;
  }
  
  .logo-text {
    font-weight: 800;
    font-size: 20px;
    color: #FFFFFF;
  }
  
  .header-divider {
    opacity: 0.5;
    font-weight: 300;
  }
  
  .header-title {
    font-weight: 700;
    font-size: 18px;
    color: #FFFFFF;
  }

  /* Mobile header: the PROPHETX wordmark is ~9:1, so at 22px tall it is ~197px
     wide. On a 375px screen that left the row exactly at the viewport width and
     "Help Center" wrapped to two lines into the hamburger. Scale the mark down
     and keep the title on one line. */
  @media (max-width: 600px) {
    .header-logo {
      gap: 8px;
      min-width: 0;
    }
    .header-logo img {
      height: 18px;
    }
    .header-title {
      font-size: 16px;
      white-space: nowrap;
    }
  }

  /* Very narrow phones (iPhone SE / 320px): there isn't room for the wordmark
     AND the "| Help Center" suffix without colliding with the hamburger, so
     drop the suffix and keep the logo. */
  @media (max-width: 360px) {
    .header-logo img {
      height: 16px;
    }
    .header-divider,
    .header-title {
      display: none;
    }
  }
  
  .header-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px;
    list-style: none;
  }

  .header-nav li {
    display: inline-flex;
    list-style: none;
  }

  /* Override Zendesk injected user-nav styles */
  .header-nav a,
  .header-nav .nav-link {
    display: inline-flex !important;
    white-space: nowrap;
  }
  
  .nav-link {
    color: rgba(255,255,255,0.9);
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s;
  }
  
  .nav-link:hover {
    background: rgba(255,255,255,0.1);
    text-decoration: none;
  }
  
  .nav-link-accent {
    background: var(--orange);
    color: #0D1117;
  }
  
  .nav-link-accent:hover {
    background: var(--orange-hover);
  }
  
  .mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
  }
  
  .mobile-menu-btn span {
    width: 24px;
    height: 2px;
    background: #FFFFFF;
    border-radius: 2px;
  }
  
  @media (min-width: 769px) {
    .header-nav {
      display: flex !important;
      flex-direction: row !important;
    }
  }

  @media (max-width: 768px) {
    .header-nav {
      display: none !important;
    }
    .header-nav.is-open {
      display: flex !important;
      flex-direction: column !important;
      position: absolute;
      top: 64px;
      left: 0;
      right: 0;
      background: var(--navy);
      padding: 16px 20px;
      border-top: 1px solid rgba(255,255,255,0.1);
      z-index: 999;
    }
    .mobile-menu-btn {
      display: flex;
    }
  }
  
  /* ==========================================================================
     HERO SECTION - ProphetX Blue Gradient
     ========================================================================== */
  
  .hero {
    background: linear-gradient(135deg, #0D1117 0%, #161B22 50%, #1C2128 100%);
    padding: 0px 0px 0px;
    overflow: hidden;
  }
  
  .hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    gap: 40px;
    align-items: center;
  }

  /* Grid children default to min-width:auto and refuse to shrink below their
     content — pin to 0 so wide content can never widen the hero past the
     viewport again. */
  .hero-inner > * {
    min-width: 0;
  }
  
  @media (max-width: 1024px) {
    .hero-inner {
      grid-template-columns: 1fr 280px;
      gap: 30px;
    }
    .hero-banner-image {
      display: none;
    }
  }
  
  @media (max-width: 768px) {
    .hero-inner {
      grid-template-columns: 1fr;
      gap: 30px;
    }
  }
  
  /* Hero Banner Image */
  .hero-banner-image {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
  }

  .hero-banner-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      90deg,
      rgba(13, 17, 23, 0.6) 0%,
      rgba(13, 17, 23, 0) 30%,
      rgba(13, 17, 23, 0) 70%,
      rgba(13, 17, 23, 0.6) 100%
    );
    pointer-events: none;
  }

  .hero-banner-image img {
    max-width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: cover;
    border-radius: 12px;
  }
  
  .hero-center {
    text-align: center;
  }
  
  .hero-content {
    text-align: left;
  }
  
  /* NOTE: no `white-space: nowrap` here. The hero is a CSS grid, so a
     single un-wrappable title sets the column width — at 32px the title is
     ~439px wide, which blew the grid past a 375px phone viewport and (with
     `.hero { overflow: hidden }`) clipped the search bar and Contact Us box
     off the right edge. Let it wrap, and keep the size fluid. */
  .hero-title {
    font-size: clamp(24px, 6vw, 30px);
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 32px;
    line-height: 1.2;
  }
  
  .hero-title-accent {
    color: var(--orange);
    font-style: italic;
  }
  
  @media (max-width: 600px) {
    .hero-title {
      margin-bottom: 24px;
    }
  }
  
  .hero-search {
    max-width: 600px;
  }
  
  .search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }
  
  .search-icon {
    position: absolute;
    left: 20px;
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    pointer-events: none;
  }
  
  .search-input {
    width: 100%;
    padding: 18px 20px 18px 56px;
    font-size: 16px;
    border: none;
    border-radius: 50px;
    background: rgba(255,255,255,0.95);
    color: #0D1117;
    box-shadow: var(--shadow-lg);
  }

  .search-input::placeholder {
    color: #8B949E;
  }
  
  .search-input:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(0,217,165,0.3), var(--shadow-lg);
  }
  
  /* Hero Contact Box */
  .hero-contact {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: 24px;
    border: 1px solid rgba(255,255,255,0.2);
  }
  
  .contact-title {
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
  }
  
  .contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--orange);
    color: #0D1117;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s;
  }
  
  .contact-item:last-child {
    margin-bottom: 0;
  }
  
  .contact-item:hover {
    background: var(--orange-hover);
    text-decoration: none;
  }
  
  .contact-icon {
    font-size: 18px;
    flex-shrink: 0;
  }
  
  .contact-label {
    margin-left: auto;
    font-weight: 400;
    font-size: 13px;
    opacity: 0.9;
  }
  
  /* ==========================================================================
     ANNOUNCEMENTS SECTION - ProphetX Style
     ========================================================================== */
  
  .announcements {
    padding: 48px 0;
    background: var(--light-bg);
  }
  
  .announcements-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
  }
  
  .announcements-title svg {
    color: var(--orange);
  }
  
  .announcements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
  }
  
  .announcement-card {
    background: #161B22;
    border-radius: var(--radius);
    padding: 20px;
    border-left: 4px solid var(--orange);
    border: 1px solid #30363D;
    border-left: 4px solid var(--orange);
  }
  
  .announcement-icon {
    font-size: 20px;
    margin-bottom: 8px;
  }
  
  .announcement-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .announcement-card h4::before {
    content: "⚠️";
    font-size: 14px;
  }
  
  .announcement-card p {
    font-size: 14px;
    color: var(--text-dark);
    line-height: 1.5;
  }
  
  .announcement-card a {
    color: var(--orange);
    font-weight: 600;
  }
  
  /* ==========================================================================
     CATEGORIES SECTION - Card Grid like ProphetX
     ========================================================================== */
  
  .categories {
    padding: 0px 0 20px;
    background: var(--light-bg);
  }
  
  .section-title {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
    color: var(--text-dark);
  }
  
  .categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  
  @media (max-width: 1024px) {
    .categories-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  @media (max-width: 768px) {
    .categories-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (max-width: 480px) {
    .categories-grid {
      grid-template-columns: 1fr;
    }
  }
  
  .category-card {
    background: #161B22;
    border-radius: var(--radius-lg);
    padding: 32px 20px;
    text-align: center;
    text-decoration: none;
    color: var(--text-dark);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    border: 1px solid #30363D;
    transition: all 0.25s ease;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    border-color: var(--orange);
    background: #1C2128;
  }
  
  .category-icon-wrapper {
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .category-icon-wrapper svg,
  .category-icon-wrapper img {
    width: 100%;
    height: 100%;
  }
  
  .category-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
  }
  
  .category-desc {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 8px;
  }
  
  /* ==========================================================================
     CTA SECTION
     ========================================================================== */
  
  .cta {
    padding: 10px 0 60px;
    background: var(--light-bg);
  }
  
  .cta-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
  }
  
  @media (max-width: 600px) {
    .cta-card {
      flex-direction: column;
      text-align: center;
    }
  }
  
  .cta-content h3 {
    font-size: 22px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 8px;
  }
  
  .cta-content p {
    color: var(--text-muted);
  }
  
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
  }
  
  .btn-accent {
    background: var(--orange);
    color: #0D1117;
  }
  
  .btn-accent:hover {
    background: var(--orange-hover);
    color: #0D1117;
    text-decoration: none;
  }
  
  .btn-primary {
    background: var(--navy);
    color: #FFFFFF;
  }
  
  .btn-primary:hover {
    background: var(--navy-dark);
    text-decoration: none;
  }
  
  .btn-sm {
    padding: 8px 16px;
    font-size: 14px;
  }
  
  /* ==========================================================================
     FOOTER - ProphetX Style
     ========================================================================== */
  
  .site-footer {
    background: var(--navy);
    color: #FFFFFF;
    margin-top: auto;
    position: relative;
    z-index: 100;
  }
  
  /* Ensure main content fills space and pushes footer down */
  .main-content {
    flex: 1;
    min-height: 0;
  }
  
  .footer-main {
    padding: 48px 0;
  }
  
  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
  }
  
  @media (max-width: 768px) {
    .footer-grid {
      grid-template-columns: 1fr;
      gap: 32px;
    }
  }
  
  .footer-brand {
    display: flex;
    align-items: flex-start;
  }
  
  .footer-logo {
    height: 40px;
    width: auto;
  }
  
  .footer-links h4 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    color: rgba(255,255,255,0.7);
  }
  
  .footer-links ul {
    list-style: none;
  }
  
  .footer-links li {
    margin-bottom: 10px;
  }
  
  .footer-links a {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    text-decoration: none;
  }
  
  .footer-links a:hover {
    color: #FFFFFF;
    text-decoration: underline;
  }
  
  /* Footer Compliance Notice */
  .footer-responsible {
    background: var(--light-bg);
    color: var(--text-dark);
    padding: 48px 0;
    border-top: 1px solid var(--border);
  }
  
  .responsible-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
  }
  
  .must-be {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
  }
  
  .age-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--text-dark);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
  }
  
  .responsible-tagline {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
  }
  
  .responsible-description {
    font-size: 15px;
    color: var(--text-dark);
    margin-bottom: 24px;
  }
  
  .responsible-notice {
    margin-bottom: 20px;
  }

  .responsible-notice p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-dark);
  }

  .responsible-notice a {
    color: var(--blue);
    text-decoration: underline;
  }
  
  .responsible-warning {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;
    color: var(--text-dark);
    margin-bottom: 24px;
  }
  
  .responsible-links {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
  }
  
  .responsible-links a {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    text-decoration: underline;
  }
  
  .responsible-links a:hover {
    color: var(--blue);
  }
  
  .responsible-legal {
    border-top: 1px solid var(--border);
    padding-top: 20px;
  }
  
  .responsible-legal p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
    line-height: 1.6;
  }
  
  .responsible-legal p:last-child {
    margin-bottom: 0;
  }
  
  .responsible-legal a {
    color: var(--text-dark);
    text-decoration: underline;
  }
  
  /* Footer Links Section */
  .footer-links-section {
    background: var(--navy);
    padding: 48px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  .footer-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }

  @media (max-width: 768px) {
    .footer-links-grid {
      grid-template-columns: 1fr;
      gap: 32px;
    }
  }

  .footer-col h5 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    color: rgba(255,255,255,0.7);
  }

  .footer-col a {
    display: block;
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    text-decoration: none;
    margin-bottom: 10px;
    transition: color 0.2s;
  }

  .footer-col a:hover {
    color: #FFFFFF;
    text-decoration: underline;
  }

  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 20px 0;
    text-align: center;
  }
  
  .footer-bottom p {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
  }
  
  /* ==========================================================================
     PAGE STYLES - Category, Section, Article
     ========================================================================== */
  
  /* ==========================================================================
     CATEGORY PAGE
     ========================================================================== */
  
  .category-hero {
    background: linear-gradient(135deg, #0D1117 0%, #161B22 50%, #1C2128 100%);
    padding: 48px 0 56px;
  }
  
  .category-hero .breadcrumbs {
    margin-bottom: 16px;
  }
  
  .breadcrumb-sep {
    margin: 0 8px;
    opacity: 0.5;
  }
  
  .category-hero-title {
    font-size: 42px;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 12px;
  }
  
  .category-hero-desc {
    font-size: 18px;
    color: rgba(255,255,255,0.8);
    max-width: 600px;
  }
  
  .sections-list {
    padding: 48px 0 80px;
  }
  
  .sections-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .section-tile {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--white);
    padding: 24px 28px;
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text-dark);
    box-shadow: var(--shadow);
    border: 2px solid transparent;
    transition: all 0.25s ease;
  }
  
  .section-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--orange);
    text-decoration: none;
  }
  
  .section-tile-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #0D1117 0%, #161B22 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  
  .section-tile-icon svg {
    width: 28px;
    height: 28px;
    color: var(--orange);
  }
  
  .section-tile-content {
    flex: 1;
  }
  
  .section-tile-content h3 {
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 4px;
  }
  
  .section-tile-content p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
  }
  
  .section-tile-arrow {
    width: 32px;
    height: 32px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: all 0.2s;
  }
  
  .section-tile:hover .section-tile-arrow {
    color: var(--orange);
    transform: translateX(4px);
  }
  
  .page-hero {
    background: var(--navy);
    padding: 40px 0;
  }
  
  .page-hero .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .breadcrumbs {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    margin-bottom: 16px;
  }
  
  .breadcrumbs a {
    color: rgba(255,255,255,0.7);
  }
  
  .breadcrumbs a:hover {
    color: #FFFFFF;
  }
  
  /* Zendesk breadcrumbs helper styling */
  .breadcrumbs-custom {
    margin-bottom: 16px;
  }
  
  .breadcrumbs-custom ol,
  .breadcrumbs-custom ul {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
  }
  
  .breadcrumbs-custom li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
  }
  
  .breadcrumbs-custom li::after {
    content: '›';
    color: rgba(255,255,255,0.5);
  }
  
  .breadcrumbs-custom li:last-child::after {
    display: none;
  }
  
  .breadcrumbs-custom a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
  }
  
  .breadcrumbs-custom a:hover {
    color: #FFFFFF;
    text-decoration: underline;
  }
  
  /* Breadcrumbs on light background pages */
  .breadcrumb-bar .breadcrumbs-custom li::after {
    color: var(--text-muted);
  }
  
  .breadcrumb-bar .breadcrumbs-custom a {
    color: var(--text-muted);
  }
  
  .breadcrumb-bar .breadcrumbs-custom a:hover {
    color: var(--blue);
  }
  
  .breadcrumb-bar .breadcrumbs-custom li:last-child a {
    color: var(--blue);
    font-weight: 500;
  }
  
  /* Article list on section pages */
  .article-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .article-list-item {
    list-style: none;
  }
  
  .no-articles {
    list-style: none;
  }
  
  .no-sections {
    list-style: none;
  }
  
  .sections-grid {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .page-title {
    font-size: 36px;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 8px;
  }
  
  .page-description {
    color: rgba(255,255,255,0.8);
    font-size: 16px;
  }
  
  /* Sections Grid */
  .sections-section,
  .articles-section {
    padding: 48px 0;
  }
  
  .sections-section .container,
  .articles-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .section-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--white);
    padding: 20px 24px;
    border-radius: var(--radius);
    margin-bottom: 12px;
    text-decoration: none;
    color: var(--text-dark);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  
  .section-card:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
  }
  
  .section-icon {
    width: 48px;
    height: 48px;
    background: var(--light-bg);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  
  .section-icon svg {
    width: 24px;
    height: 24px;
    color: var(--orange);
  }
  
  .section-name {
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
  }
  
  .section-description {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 4px;
  }
  
  /* Articles List */
  .articles-list {
    list-style: none;
  }
  
  .articles-list li {
    margin-bottom: 8px;
  }
  
  .article-link {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--white);
    padding: 16px 20px;
    border-radius: var(--radius);
    color: var(--text-dark);
    font-weight: 500;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: all 0.2s;
  }
  
  .article-link:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    color: var(--blue);
  }
  
  .article-link::before {
    content: "📄";
  }
  
  /* Article Cards Grid */
  .articles-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .article-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--white);
    padding: 20px 24px;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-dark);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: all 0.2s;
  }
  
  .article-card:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    border-color: var(--blue);
  }
  
  .article-card-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--blue) 0%, #00B888 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  
  .article-card-icon svg {
    width: 24px;
    height: 24px;
    color: #FFFFFF;
  }
  
  .article-card-content {
    flex: 1;
  }
  
  .article-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    margin: 0;
  }
  
  .article-card-arrow {
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    flex-shrink: 0;
  }
  
  .article-card:hover .article-card-arrow {
    color: var(--blue);
  }
  
  /* Empty State */
  .empty-state {
    text-align: center;
    padding: 80px 20px;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
  }
  
  .empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: var(--light-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .empty-icon svg {
    width: 40px;
    height: 40px;
    color: var(--text-muted);
  }
  
  .empty-state h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-dark);
  }
  
  .empty-state p {
    color: var(--text-muted);
    margin-bottom: 24px;
  }
  
  /* ==========================================================================
     ARTICLE PAGE - MACQUARIE STYLE
     ========================================================================== */
  
  .breadcrumb-bar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
  }
  
  .breadcrumbs-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    flex-wrap: wrap;
  }
  
  .breadcrumbs-inline a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    text-decoration: none;
  }
  
  .breadcrumbs-inline a:hover {
    color: var(--blue);
  }
  
  .breadcrumb-arrow {
    color: var(--text-muted);
  }
  
  .breadcrumb-current {
    color: var(--blue);
    font-weight: 500;
  }
  
  /* Article Layout with Sidebar */
  .article-layout {
    padding: 40px 0 80px;
    background: var(--light-bg);
  }
  
  .article-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    align-items: start;
  }
  
  @media (max-width: 900px) {
    .article-grid {
      grid-template-columns: 1fr;
    }
  }
  
  .article-main {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
  }
  
  .article-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 24px;
    line-height: 1.3;
  }
  
  /* Author Info */
  .article-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
  }
  
  .author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
  }
  
  .author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .author-info {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  
  .author-name {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 14px;
  }
  
  .author-date {
    font-size: 13px;
    color: var(--text-muted);
  }
  
  .follow-btn {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid var(--blue);
    border-radius: 6px;
    background: var(--white);
    color: var(--blue);
    cursor: pointer;
    transition: all 0.2s;
  }
  
  .follow-btn:hover {
    background: var(--blue);
    color: #FFFFFF;
  }
  
  .article-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0 0 32px;
  }
  
  /* Article Body */
  .article-body {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-dark);
  }
  
  .article-body h1,
  .article-body h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 32px 0 16px;
    color: var(--text-dark);
  }
  
  .article-body h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 24px 0 12px;
  }
  
  .article-body p {
    margin-bottom: 16px;
  }
  
  .article-body ul,
  .article-body ol {
    margin-bottom: 16px;
    padding-left: 24px;
  }
  
  .article-body li {
    margin-bottom: 8px;
  }
  
  .article-body a {
    color: var(--blue);
  }
  
  .article-body img {
    max-width: 100%;
    border-radius: 8px;
    margin: 16px 0;
  }
  
  .article-body blockquote {
    border-left: 4px solid var(--blue);
    padding-left: 20px;
    margin: 20px 0;
    color: var(--text-muted);
    font-style: italic;
  }
  
  .article-body code {
    background: var(--light-bg);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
  }
  
  .article-body pre {
    background: var(--navy);
    color: #FFFFFF;
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 20px 0;
  }
  
  /* Attachments */
  .article-attachments {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
  }
  
  .article-attachments h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
  }
  
  .article-attachments ul {
    list-style: none;
  }
  
  .article-attachments li {
    margin-bottom: 8px;
  }
  
  .article-attachments a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--blue);
  }
  
  /* Vote Section */
  .article-vote {
    margin-top: 48px;
    padding: 32px;
    background: var(--light-bg);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid var(--border);
  }
  
  .vote-question {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-dark);
  }
  
  .vote-stats {
    font-size: 14px;
    color: var(--text-muted);
  }
  
  .vote-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
  }
  
  .vote-btn {
    padding: 10px 24px;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--white);
    color: #E6EDF3;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
  }
  
  .vote-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
  }
  
  .vote-count {
    font-size: 13px;
    color: var(--text-muted);
  }
  
  /* Comments */
  .article-comments {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
  }
  
  .article-comments h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  
  .comments-list {
    list-style: none;
  }
  
  .comment {
    display: flex;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
  }
  
  .comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
  }
  
  .comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .avatar-placeholder {
    width: 100%;
    height: 100%;
    background: var(--blue);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    text-transform: uppercase;
  }
  
  .comment-content {
    flex: 1;
  }
  
  .comment-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
  }
  
  .comment-date {
    font-size: 13px;
    color: var(--text-muted);
  }
  
  .comment-body {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-dark);
  }
  
  .comment-form {
    margin-top: 24px;
  }
  
  .sign-in-prompt {
    color: var(--text-muted);
    font-size: 14px;
  }
  
  .sign-in-prompt a {
    color: var(--blue);
    font-weight: 500;
  }
  
  /* Sidebar */
  .article-sidebar {
    position: sticky;
    top: 100px;
  }
  
  .sidebar-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
  }
  
  .sidebar-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--orange);
    display: inline-block;
  }
  
  .sidebar-articles {
    list-style: none;
  }
  
  .sidebar-articles li {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  
  .sidebar-articles li:last-child {
    border-bottom: none;
  }
  
  .sidebar-articles li svg {
    color: var(--blue);
    flex-shrink: 0;
    margin-top: 2px;
  }
  
  .sidebar-articles li a {
    color: var(--text-dark);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
  }
  
  .sidebar-articles li a:hover {
    color: var(--blue);
  }
  
  .sidebar-articles li.is-current a {
    color: var(--blue);
    font-weight: 600;
  }
  
  /* Article Hero Banner */
  .article-hero-banner {
    background: linear-gradient(135deg, #0D1117 0%, #161B22 50%, #1C2128 100%);
    padding: 56px 0;
    position: relative;
    overflow: hidden;
  }
  
  .article-hero-banner::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    background: var(--orange);
  }
  
  .article-hero-banner::after {
    content: '';
    position: absolute;
    right: -100px;
    top: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0,217,165,0.15) 0%, transparent 70%);
    pointer-events: none;
  }
  
  .article-hero-banner .container {
    max-width: 1100px;
  }
  
  .article-hero-banner h1 {
    font-size: 38px;
    font-weight: 800;
    color: #FFFFFF;
    max-width: 900px;
    line-height: 1.3;
  }
  
  @media (max-width: 768px) {
    .article-hero-banner {
      padding: 40px 0;
    }
    .article-hero-banner h1 {
      font-size: 28px;
    }
  }
  
  /* Macquarie Two Column Layout */
  .article-macquarie-layout {
    padding: 48px 0 60px;
    background: var(--white);
  }
  
  .article-macquarie-layout .container {
    max-width: 1100px;
  }
  
  .article-two-col {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 60px;
    align-items: start;
  }
  
  /* When no TOC (no H2/H3 headers), make content full width */
  .article-two-col.no-toc {
    grid-template-columns: 1fr;
    max-width: 800px;
    margin: 0 auto;
  }
  
  .article-two-col.no-toc .article-content-main {
    max-width: 100%;
  }
  
  @media (max-width: 900px) {
    .article-two-col {
      grid-template-columns: 1fr;
    }
    .article-toc-sidebar {
      display: none;
    }
  }
  
  /* Left TOC Sidebar */
  .article-toc-sidebar {
    position: sticky;
    top: 100px;
    background: var(--light-bg);
    border-radius: var(--radius);
    padding: 20px 0;
  }
  
  .toc-nav {
    display: flex;
    flex-direction: column;
  }
  
  .toc-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 20px 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
  }
  
  .toc-link {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 12px 20px;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    border-left: 3px solid transparent;
    transition: all 0.2s;
  }
  
  .toc-link:hover {
    color: var(--blue);
    background: rgba(0, 91, 187, 0.05);
    text-decoration: none;
  }
  
  .toc-link.is-active {
    color: var(--blue);
    border-left-color: var(--blue);
    background: rgba(0, 91, 187, 0.08);
    font-weight: 600;
  }
  
  .toc-link-sub {
    padding-left: 32px;
    font-size: 13px;
  }
  
  /* Article Content Main */
  .article-content-main {
    max-width: 100%;
  }
  
  .article-content-main .article-body {
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-dark);
  }
  
  .article-content-main .article-body h2,
  .article-content-main .article-body h3 {
    scroll-margin-top: 100px;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 40px 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
  }
  
  .article-content-main .article-body h3 {
    font-size: 22px;
    border-bottom: none;
  }
  
  .article-content-main .article-body p {
    margin-bottom: 20px;
  }
  
  .article-content-main .article-body ul,
  .article-content-main .article-body ol {
    margin-bottom: 20px;
    padding-left: 28px;
  }
  
  .article-content-main .article-body li {
    margin-bottom: 12px;
    line-height: 1.7;
  }
  
  .article-content-main .article-body a {
    color: var(--blue);
    text-decoration: underline;
  }
  
  .article-content-main .article-body a:hover {
    color: var(--orange-hover);
  }

  .article-content-main .article-body strong {
    font-weight: 700;
    color: #FFFFFF;
  }
  
  .article-content-main .article-body blockquote {
    margin: 24px 0;
    padding: 20px 24px;
    background: var(--light-bg);
    border-left: 4px solid var(--orange);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: normal;
  }
  
  .article-content-main .article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin: 24px 0;
    box-shadow: var(--shadow);
  }
  
  .article-content-main .article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
  }
  
  .article-content-main .article-body th,
  .article-content-main .article-body td {
    padding: 12px 16px;
    text-align: left;
    border: 1px solid var(--border);
  }
  
  .article-content-main .article-body th {
    background: var(--light-bg);
    font-weight: 600;
  }
  
  /* Bottom Section - Related & Search */
  .article-bottom-section {
    padding: 60px 0;
    background: var(--light-bg);
    border-top: 1px solid var(--border);
  }
  
  .article-bottom-section .container {
    max-width: 1100px;
  }
  
  .bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }
  
  @media (max-width: 768px) {
    .bottom-grid {
      grid-template-columns: 1fr;
      gap: 40px;
    }
  }
  
  .related-articles,
  /* Match both spellings: article_page.hbs uses .search-help-center (US),
     the original CSS used .search-help-centre (UK). */
  .search-help-centre,
  .search-help-center {
    background: var(--white);
    padding: 32px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
  }

  .related-articles h3,
  .search-help-centre h3,
  .search-help-center h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border);
  }
  
  .related-articles h3 svg,
  .search-help-centre h3 svg,
  .search-help-center h3 svg {
    color: var(--orange);
  }
  
  .related-articles ul {
    list-style: none;
    margin-bottom: 20px;
  }
  
  .related-articles li {
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
  }
  
  .related-articles li:last-child {
    border-bottom: none;
  }
  
  .related-articles li a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 15px;
    padding: 14px 0;
    transition: all 0.2s;
  }
  
  .related-articles li a::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--blue);
    border-radius: 50%;
    flex-shrink: 0;
  }
  
  .related-articles li a:hover {
    color: var(--blue);
    padding-left: 8px;
  }
  
  .view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--orange);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  
  .view-all-link:hover {
    color: #E6EDF3;
    text-decoration: none;
  }
  
  /* Search Form Bottom */
  .search-form-bottom {
    display: flex;
    border: 2px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--white);
  }
  
  .search-input-bottom {
    flex: 1;
    padding: 14px 16px;
    border: none;
    font-size: 15px;
    background: transparent;
    color: #E6EDF3;
  }

  .search-input-bottom::placeholder {
    color: var(--text-muted);
  }
  
  .search-input-bottom:focus {
    outline: none;
  }
  
  .search-btn-bottom {
    padding: 12px 16px;
    background: var(--white);
    border: none;
    border-left: 1px solid var(--border);
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s;
  }
  
  .search-btn-bottom:hover {
    background: var(--light-bg);
    color: var(--blue);
  }
  
  /* Contact Cards Section */
  .contact-cards-section {
    padding: 80px 0;
    background: #161B22;
    border-top: 1px solid var(--border);
  }
  
  .contact-cards-section .container {
    max-width: 1100px;
  }
  
  .contact-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
  }
  
  @media (max-width: 900px) {
    .contact-cards-grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  }
  
  .contact-card {
    padding: 36px 32px;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    transition: all 0.25s ease;
  }
  
  .contact-card:hover {
    border-color: var(--orange);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
  
  .contact-card h3 {
    font-size: 24px;
    font-weight: 800;
    color: #E6EDF3;
    margin-bottom: 16px;
  }
  
  .contact-card p {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 24px;
  }
  
  .contact-card-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  
  .btn-outline {
    background: transparent;
    border: 2px solid var(--border);
    color: #E6EDF3;
  }

  .btn-outline:hover {
    background: var(--orange);
    color: #0D1117;
    border-color: var(--orange);
  }
  
  .article-container {
    padding: 48px 0;
  }
  
  .article-container .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .article-title {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 16px;
    color: var(--text-dark);
  }
  
  .article-meta {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
  }
  
  .article-body {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-dark);
  }
  
  .article-body h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 32px 0 16px;
  }
  
  .article-body h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 24px 0 12px;
  }
  
  .article-body p {
    margin-bottom: 16px;
  }
  
  .article-body ul, .article-body ol {
    margin-bottom: 16px;
    padding-left: 24px;
  }
  
  .article-body li {
    margin-bottom: 8px;
  }
  
  .article-vote {
    margin-top: 48px;
    padding: 24px;
    background: var(--light-bg);
    border-radius: var(--radius);
    text-align: center;
  }
  
  .article-vote p {
    margin-bottom: 8px;
  }
  
  /* Search Page */
  .search-section {
    padding: 48px 0;
  }
  
  .search-section .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .search-result {
    background: var(--white);
    padding: 16px 20px;
    border-radius: var(--radius);
    margin-bottom: 12px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
  }
  
  .search-result a {
    font-weight: 500;
    color: var(--text-dark);
  }
  
  .search-result a:hover {
    color: var(--blue);
  }
  
  /* Error Page */
  .error-section {
    padding: 80px 0;
    text-align: center;
  }
  
  .error-section .container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .error-section h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 16px;
  }
  
  .error-section p {
    color: var(--text-muted);
    margin-bottom: 32px;
  }
  
  /* Request Pages */
  .request-form-section {
    padding: 24px 0 80px;
  }

  .request-form-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    max-width: 800px;
    margin: 0 auto;
  }

  /* SSEFE-3383 (mobile): the flat 40px card padding plus container padding
     eats ~120px of horizontal space, squeezing the topic <select> on narrow
     phones (e.g. iPhone 16 @393px) so the selected value clips far sooner than
     on a wider phone (iPhone 16 Pro Max @430px). Trim the card's horizontal
     padding on small screens to give inputs back the width. */
  @media (max-width: 600px) {
    .request-form-card {
      padding: 28px 16px;
    }
  }
  
  /* Zendesk Form Styling */
  .request-form-card form {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  
  .request-form-card label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dark);
    margin-bottom: 8px;
  }
  
  .request-form-card input[type="text"],
  .request-form-card input[type="email"],
  .request-form-card textarea,
  .request-form-card select {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text-dark);
    font-family: inherit;
    transition: border-color 0.2s;
  }
  
  .request-form-card input[type="text"]:focus,
  .request-form-card input[type="email"]:focus,
  .request-form-card textarea:focus,
  .request-form-card select:focus {
    outline: none;
    border-color: var(--blue);
  }
  
  .request-form-card textarea {
    min-height: 150px;
    resize: vertical;
  }
  
  .request-form-card input[type="submit"],
  .request-form-card button[type="submit"] {
    background: var(--orange);
    color: #0D1117;
    font-size: 16px;
    font-weight: 600;
    padding: 16px 32px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    align-self: flex-start;
  }
  
  .request-form-card input[type="submit"]:hover,
  .request-form-card button[type="submit"]:hover {
    background: var(--orange-hover);
  }
  
  /* Zendesk form field containers */
  .request-form-card .form-field {
    margin-bottom: 20px;
  }
  
  .request-form-card .nesty-input {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text-dark);
  }
  
  .request-form-card .upload-dropzone {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    background: var(--light-bg);
  }
  
  .form-note {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 24px;
  }
  
  .form-field {
    margin-bottom: 24px;
  }
  
  .form-field label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dark);
    margin-bottom: 8px;
  }
  
  .field-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
  }
  
  .form-actions {
    margin-top: 32px;
  }
  
  .ticket-form-option {
    padding: 16px;
    background: var(--light-bg);
    border-radius: 8px;
    margin-bottom: 12px;
  }
  
  .ticket-form-option a {
    font-weight: 600;
    color: var(--blue);
  }
  
  .reply-form textarea {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 16px;
    background: var(--white);
    color: var(--text-dark);
  }
  
  .reply-form textarea:focus {
    outline: none;
    border-color: var(--blue);
  }
  
  .request-section,
  .requests-section {
    padding: 48px 0 80px;
  }
  
  .request-section .container,
  .requests-section .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .requests-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .request-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--white);
    padding: 20px 24px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: all 0.2s;
  }
  
  .request-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-lg);
  }
  
  .request-item a {
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
  }
  
  .request-item a:hover {
    color: var(--blue);
  }
  
  .request-status {
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  
  .request-status.status-open,
  .request-status.status-new {
    background: #dcfce7;
    color: #166534;
  }
  
  .request-status.status-pending {
    background: #fef3c7;
    color: #92400e;
  }
  
  .request-status.status-solved,
  .request-status.status-closed {
    background: #e5e7eb;
    color: #374151;
  }
  
  /* ==========================================================================
     RECENT ACTIVITY SECTION
     ========================================================================== */
  
  .recent-activity-section {
    padding: 60px 0;
    background: var(--navy);
    border-top: 1px solid var(--border);
  }
  
  .recent-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  
  @media (max-width: 768px) {
    .recent-grid {
      grid-template-columns: 1fr;
    }
  }
  
  .recent-card {
    background: #161B22;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
  }

  .recent-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 20px;
  }

  .recent-card p {
    color: var(--text-muted);
  }
  
  .recent-list,
  .activity-list {
    list-style: none;
  }
  
  .recent-list li,
  .activity-list li {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .recent-list li:last-child,
  .activity-list li:last-child {
    border-bottom: none;
  }
  
  .recent-list li svg {
    color: var(--blue);
    flex-shrink: 0;
  }
  
  .recent-list li a,
  .activity-list li a {
    color: #E6EDF3;
    font-weight: 500;
    text-decoration: none;
  }
  
  .recent-list li a:hover,
  .activity-list li a:hover {
    color: var(--blue);
    text-decoration: underline;
  }
  
  .activity-list li {
    justify-content: space-between;
  }
  
  .activity-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .activity-meta {
    font-size: 13px;
    color: var(--text-muted);
  }
  
  .activity-comments {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 14px;
  }
  
  .no-items {
    color: var(--text-muted);
    font-style: italic;
  }
  
  /* ==========================================================================
     SOCIAL LINKS IN FOOTER - Same background as footer
     ========================================================================== */
  
  .footer-social {
    background: var(--navy);
    padding: 32px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  
  .footer-social h4 {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    position: relative;
    padding-bottom: 12px;
  }
  
  .footer-social h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--orange);
  }
  
  .social-links {
    display: flex;
    gap: 12px;
  }
  
  .social-link {
    width: 44px;
    height: 44px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    text-decoration: none;
    transition: all 0.2s;
  }
  
  .social-link:hover {
    background: var(--orange);
    color: #FFFFFF;
    border-color: var(--orange);
  }
  
  .social-link svg {
    width: 20px;
    height: 20px;
  }

  /* ==========================================================================
     ZENDESK OVERRIDES - Dark Theme Compatibility
     ========================================================================== */

  /* Ensure Zendesk injected elements get dark theme */
  .request_custom_fields label,
  .request_description label,
  .request_subject label {
    color: var(--text-dark) !important;
  }

  /* Zendesk form elements */
  .zd-form input,
  .zd-form select,
  .zd-form textarea,
  input.zd-input,
  select.zd-select {
    background: var(--white) !important;
    color: var(--text-dark) !important;
    border-color: var(--border) !important;
  }

  /* Zendesk user nav (injected elements) */
  .user-nav a,
  nav[aria-label] a {
    color: rgba(255,255,255,0.9) !important;
    text-decoration: none;
  }

  /* Zendesk pagination */
  .pagination a,
  .pagination span {
    color: var(--text-dark);
  }

  .pagination a:hover {
    color: var(--blue);
  }

  .pagination .current-page {
    color: var(--orange);
    font-weight: 700;
  }

  /* Global override: any heading in content area */
  h1, h2, h3, h4, h5, h6 {
    color: #E6EDF3;
  }

  /* Override for hero sections where headings should be white */
  .hero h1, .hero h2,
  .category-hero h1, .category-hero h2,
  .page-hero h1, .page-hero h2,
  .article-hero-banner h1, .article-hero-banner h2 {
    color: #FFFFFF;
  }

  /* Ensure all card titles are visible */
  .category-card .category-name,
  .section-card .section-name,
  .article-card .article-card-title,
  .section-tile .section-tile-content h3,
  .recent-card h3 {
    color: #FFFFFF;
  }

  /* Ensure all body content text is readable */
  p, li, span, td, th, dd, dt {
    color: inherit;
  }

  /* Zendesk community/profile pages */
  .profile-header,
  .profile-info {
    color: var(--text-dark);
  }

  /* Table styles for dark theme */
  table {
    border-color: var(--border);
  }

  th {
    background: #161B22;
    color: #E6EDF3;
  }

  td {
    background: transparent;
    color: var(--text-dark);
  }

  /* Ensure dropzone text is visible */
  .upload-dropzone span,
  .upload-dropzone p {
    color: var(--text-muted);
  }

  /* ==========================================================================
     REQUEST FORM STYLES - Dark Theme
     ========================================================================== */

  /* Info box at top of form */
  .form-note-box {
    display: flex;
    gap: 12px;
    background: rgba(0, 217, 165, 0.1);
    border: 1px solid rgba(0, 217, 165, 0.3);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 28px;
  }

  .form-note-icon {
    font-size: 20px;
    flex-shrink: 0;
  }

  .form-note-box p {
    font-size: 14px;
    line-height: 1.6;
    color: #E6EDF3;
    margin: 0;
  }

  /* Contact phone/email box under form note */
  .contact-phone-box {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(0, 217, 165, 0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 24px;
    margin-bottom: 28px;
  }

  .contact-phone-icon {
    font-size: 20px;
    flex-shrink: 0;
  }

  .contact-phone-box p {
    font-size: 14px;
    line-height: 1.6;
    color: #8B949E;
    margin: 0;
  }

  .contact-phone-box a {
    color: #00D9A5;
    text-decoration: none;
    font-weight: 600;
  }

  .contact-phone-box a:hover {
    text-decoration: underline;
  }

  /* Required/optional labels */
  .required {
    color: #f85149;
  }

  .optional {
    color: var(--text-muted);
    font-weight: 400;
  }

  /* File upload styling */
  .upload-dropzone {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 32px 24px;
    text-align: center;
    background: #0D1117;
    cursor: pointer;
    transition: border-color 0.2s;
  }

  .upload-dropzone:hover {
    border-color: var(--orange);
  }

  .file-input {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border: 2px dashed var(--border);
    border-radius: 8px;
    background: #0D1117;
    color: #E6EDF3;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s;
  }

  .file-input:hover {
    border-color: var(--orange);
  }

  .upload-label {
    cursor: pointer;
    font-size: 15px;
    color: var(--text-muted) !important;
    font-weight: 400 !important;
  }

  .upload-label span {
    color: var(--text-muted);
  }

  /* Form container */
  .request-form-card .request-form,
  .request-form-card form {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* All labels */
  .request-form-card label,
  .request-form label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: #E6EDF3 !important;
    margin-bottom: 8px;
  }

  /* All text/email inputs */
  .request-form-card input[type="text"],
  .request-form-card input[type="email"],
  .request-form-card input[type="tel"],
  .request-form-card input[type="number"],
  .request-form-card input[type="url"],
  .request-form input[type="text"],
  .request-form input[type="email"],
  .request-form input[type="tel"],
  .request-form input[type="number"] {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border: 2px solid var(--border) !important;
    border-radius: 8px;
    background: #161B22 !important;
    color: #E6EDF3 !important;
    font-family: inherit;
    transition: border-color 0.2s;
  }

  .request-form-card input:focus,
  .request-form input:focus {
    outline: none;
    border-color: var(--blue) !important;
  }

  /* Textareas */
  .request-form-card textarea,
  .request-form textarea {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border: 2px solid var(--border) !important;
    border-radius: 8px;
    background: #161B22 !important;
    color: #E6EDF3 !important;
    font-family: inherit;
    min-height: 150px;
    resize: vertical;
  }

  .request-form-card textarea:focus,
  .request-form textarea:focus {
    outline: none;
    border-color: var(--blue) !important;
  }

  /* Select dropdowns */
  .request-form-card select,
  .request-form select {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border: 2px solid var(--border) !important;
    border-radius: 8px;
    background: #161B22 !important;
    color: #E6EDF3 !important;
    font-family: inherit;
    min-height: 48px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B949E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 44px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Zendesk rich text editor (description field) */
  .request-form-card .zd-editor,
  .request-form-card .fr-box,
  .request-form-card .fr-wrapper,
  .request-form-card .fr-element {
    background: #161B22 !important;
    color: #E6EDF3 !important;
    border-color: var(--border) !important;
  }

  .request-form-card .fr-toolbar,
  .request-form-card .fr-toolbar .fr-btn {
    background: #1C2128 !important;
    color: #E6EDF3 !important;
    border-color: var(--border) !important;
  }

  .request-form-card .fr-toolbar .fr-btn:hover {
    background: #30363D !important;
  }

  .request-form-card .fr-toolbar .fr-btn svg path {
    fill: #E6EDF3 !important;
  }

  /* Zendesk nesty-input (custom dropdown) */
  .request-form-card .nesty-input,
  .request-form .nesty-input {
    background: #161B22 !important;
    color: #E6EDF3 !important;
    border: 2px solid var(--border) !important;
    border-radius: 8px;
    padding: 14px 16px;
  }

  /* Attachments upload area */
  .request-form-card .upload-dropzone,
  .request-form .upload-dropzone {
    border: 2px dashed var(--border) !important;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    background: #0D1117 !important;
    color: var(--text-muted) !important;
  }

  .request-form-card .upload-dropzone span,
  .request-form-card .upload-dropzone a {
    color: var(--blue) !important;
  }

  /* Hint/description text under fields */
  .request-form-card .hint,
  .request-form-card p.hint,
  .request-form-card .field-description,
  .request-form-card .request_description_hint {
    font-size: 13px;
    color: var(--text-muted) !important;
    margin-top: 4px;
  }

  /* Submit button */
  .request-form-card input[type="submit"],
  .request-form-card button[type="submit"],
  .request-form input[type="submit"],
  .request-form button[type="submit"] {
    background: var(--orange) !important;
    color: #0D1117 !important;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 40px;
    border: none !important;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background 0.2s;
    text-align: center;
    display: inline-block;
    width: auto;
    align-self: flex-start;
  }

  .request-form-card input[type="submit"]:hover,
  .request-form-card button[type="submit"]:hover {
    background: var(--orange-hover) !important;
  }

  /* Zendesk form field wrappers */
  .request-form-card .form-field,
  .request-form .form-field {
    margin-bottom: 20px;
  }

  /* Error messages */
  .request-form-card .notification-error,
  .request-form-card .error {
    color: #f85149 !important;
    font-size: 13px;
  }

  /* =========================================
     Copenhagen v4 React-rendered form overrides
     The renderNewRequestForm module uses Garden UI
     with styled-components (sc-* classes). We need
     broad selectors to catch all rendered elements.
     ========================================= */

  /* Ensure the form container is visible */
  #new-request-form {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
  }

  /* All elements inside the React-rendered form */
  #new-request-form * {
    visibility: visible !important;
  }

  /* Form wrapper */
  #new-request-form form {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px;
  }

  /* Labels inside rendered form */
  #new-request-form label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: #E6EDF3 !important;
    margin-bottom: 8px;
  }

  /* Text inputs rendered by Garden UI */
  #new-request-form input[type="text"],
  #new-request-form input[type="email"],
  #new-request-form input[type="tel"],
  #new-request-form input[type="number"],
  #new-request-form input[type="url"] {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    border: 2px solid #30363D !important;
    border-radius: 8px !important;
    background: #161B22 !important;
    color: #E6EDF3 !important;
    font-family: inherit;
    box-sizing: border-box;
  }

  #new-request-form input:focus {
    outline: none !important;
    border-color: #00D9A5 !important;
  }

  /* Textarea */
  #new-request-form textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    border: 2px solid #30363D !important;
    border-radius: 8px !important;
    background: #161B22 !important;
    color: #E6EDF3 !important;
    font-family: inherit;
    min-height: 150px;
    resize: vertical;
    box-sizing: border-box;
  }

  #new-request-form textarea:focus {
    outline: none !important;
    border-color: #00D9A5 !important;
  }

  /* Select dropdowns */
  /* SSEFE-3383: padding-right must reserve room for the chevron (drawn at
     right 12px, 18px wide) or the selected value renders underneath it and
     gets clipped. Use background longhands here — the shorthand would wipe
     out the chevron image. */
  #new-request-form select {
    width: 100% !important;
    padding: 12px 44px 12px 16px !important;
    font-size: 15px !important;
    border: 2px solid #30363D !important;
    border-radius: 8px !important;
    background-color: #161B22 !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B949E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 18px !important;
    color: #E6EDF3 !important;
    /* Force native arrow off (else it shows on top of our chevron) and pin the
       line-height so it can't inherit the page's 1.6 and overflow the box,
       which was clipping the selected value vertically. */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    height: 48px !important;
    min-height: 48px !important;
    line-height: normal !important;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Multi-selects render as open lists — no chevron or extra padding */
  #new-request-form select[multiple] {
    background-image: none !important;
    padding-right: 16px !important;
  }

  /* Garden UI rich text editor (WYSIWYG) */
  #new-request-form [data-garden-id],
  #new-request-form [class*="StyledTextarea"],
  #new-request-form [class*="StyledInput"],
  #new-request-form [class*="StyledField"],
  #new-request-form [class*="StyledLabel"],
  #new-request-form [class*="StyledHint"],
  #new-request-form [class*="StyledMessage"] {
    color: #E6EDF3 !important;
  }

  #new-request-form [class*="StyledTextarea"],
  #new-request-form [class*="StyledInput"] {
    background: #161B22 !important;
    border-color: #30363D !important;
  }

  /* Rich text editor toolbar */
  #new-request-form [role="toolbar"],
  #new-request-form [class*="Toolbar"] {
    background: #1C2128 !important;
    border-color: #30363D !important;
  }

  #new-request-form [role="toolbar"] button,
  #new-request-form [class*="Toolbar"] button {
    color: #E6EDF3 !important;
    background: transparent !important;
  }

  #new-request-form [role="toolbar"] button:hover {
    background: #30363D !important;
  }

  #new-request-form [role="toolbar"] svg,
  #new-request-form [role="toolbar"] svg path {
    fill: #E6EDF3 !important;
    color: #E6EDF3 !important;
  }

  /* Rich text editable area */
  #new-request-form [contenteditable="true"],
  #new-request-form [role="textbox"],
  #new-request-form .ProseMirror,
  #new-request-form [class*="EditorBox"] {
    background: #161B22 !important;
    color: #E6EDF3 !important;
    border-color: #30363D !important;
    min-height: 150px;
    padding: 12px 16px;
  }

  /* Nesty input (dropdowns) */
  /* Topic dropdown: Zendesk enhances the native <select> for tagger/nested
     fields into its "Nesty" widget — an <a class="nesty-input"> — and hides the
     real <select>. Nesty's defaults (line-height: 30px on a short box with
     overflow: hidden) sliced the selected value in half. Force block layout,
     a sane line-height and height, and single-line ellipsis so it renders like
     the other dropdowns. (This is the element users actually see, not <select>.) */
  #new-request-form .nesty-input {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 48px !important;
    height: auto !important;
    padding: 13px 44px 13px 16px !important;
    line-height: 22px !important;
    font-size: 15px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-decoration: none !important;
    background-color: #161B22 !important;
    color: #E6EDF3 !important;
    border: 2px solid #30363D !important;
    border-radius: 8px !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B949E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 18px !important;
  }

  /* Attachments / file upload */
  #new-request-form [class*="upload"],
  #new-request-form [class*="Upload"],
  #new-request-form [class*="dropzone"],
  #new-request-form [class*="Dropzone"],
  #new-request-form [class*="FileUpload"] {
    border: 2px dashed #30363D !important;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    background: #0D1117 !important;
    color: #8B949E !important;
  }

  /* Hint text / field descriptions */
  #new-request-form [class*="Hint"],
  #new-request-form [class*="hint"],
  #new-request-form [class*="description"],
  #new-request-form p[class*="Message"] {
    color: #8B949E !important;
    font-size: 13px;
  }

  /* Submit button — full-width. NB: do NOT use [class*="submit"] here; it
     matches the .form-field-submit wrapper div too and paints a green bar
     around the button. Target the button element itself. */
  #new-request-form input[type="submit"],
  #new-request-form button[type="submit"],
  #new-request-form footer button {
    display: block;
    width: 100% !important;
    background: #00D9A5 !important;
    color: #0D1117 !important;
    font-size: 16px;
    font-weight: 600;
    padding: 16px 32px !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: background 0.2s;
  }

  /* The wrapper div stays unstyled */
  #new-request-form .form-field-submit {
    background: none !important;
    padding: 0 !important;
  }

  #new-request-form input[type="submit"]:hover,
  #new-request-form button[type="submit"]:hover,
  #new-request-form footer button:hover {
    background: #00C496 !important;
  }

  /* Field wrappers */
  #new-request-form [class*="Field"],
  #new-request-form [class*="field"] {
    margin-bottom: 16px;
  }

  /* Anchor/links */
  #new-request-form a {
    color: #00D9A5 !important;
  }

  /* Error messages */
  #new-request-form [class*="error"],
  #new-request-form [class*="Error"],
  #new-request-form [class*="validation"] {
    color: #f85149 !important;
  }

  /* General text color override for all spans/divs/p inside */
  #new-request-form span,
  #new-request-form div,
  #new-request-form p {
    color: inherit;
  }

  /* ==========================================================================
     CUSTOM REQUEST FORM - Additional Dark Theme Styles
     ========================================================================== */

  /* Required star */
  .required-star {
    color: #f85149;
    font-weight: 700;
  }

  /* Field descriptions / hints */
  .form-field-description {
    font-size: 13px;
    color: var(--text-muted);
    margin: 4px 0 8px;
    line-height: 1.5;
  }

  .form-field-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 8px;
  }

  /* Field errors */
  .form-field-error {
    display: block;
    font-size: 13px;
    color: #f85149;
    margin-top: 6px;
    font-weight: 500;
  }

  .form-field-error-state input,
  .form-field-error-state textarea,
  .form-field-error-state select {
    border-color: #f85149 !important;
  }

  /* Global notification error */
  .notification-error {
    background: rgba(248, 81, 73, 0.1);
    border: 1px solid rgba(248, 81, 73, 0.4);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 24px;
    color: #f85149;
    font-size: 14px;
  }

  /* Checkbox labels */
  .checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    font-weight: 500 !important;
    cursor: pointer;
  }

  .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--orange);
    cursor: pointer;
  }

  /* Date inputs */
  .request-form-card input[type="date"],
  .request-form input[type="date"] {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border: 2px solid var(--border) !important;
    border-radius: 8px;
    background: #161B22 !important;
    color: #E6EDF3 !important;
    font-family: inherit;
    transition: border-color 0.2s;
  }

  .request-form-card input[type="date"]:focus,
  .request-form input[type="date"]:focus {
    outline: none;
    border-color: var(--blue) !important;
  }

  /* Date input calendar icon color fix for dark theme */
  .request-form-card input[type="date"]::-webkit-calendar-picker-indicator,
  .request-form input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
  }

  /* Submit button area */
  .form-field-submit {
    margin-top: 12px;
  }