/* ── Global neon section helpers ──
         Reusable building blocks for separating dense sections on long pages
         (subscribe, docs, articles, dashboard hubs).  Use as utility classes
         on existing elements without restructuring markup. */
      .fxmd-section-divider {
        height: 1px;
        border: 0;
        margin: 3rem 0;
        background: linear-gradient(90deg,
          transparent 0%,
          rgba(76, 194, 255, 0.0) 5%,
          rgba(76, 194, 255, 0.45) 50%,
          rgba(0, 255, 156, 0.0) 95%,
          transparent 100%);
      }
      .fxmd-section-title {
        position: relative;
        padding-bottom: 0.6rem;
        color: #f0f6fc;
        font-weight: 800;
      }
      .fxmd-section-title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 3.25rem;
        height: 3px;
        border-radius: 2px;
        background: linear-gradient(90deg, #4cc2ff 0%, #00e5ff 60%, #00ff9c 100%);
        box-shadow: 0 0 14px rgba(0, 229, 255, 0.45);
      }
      .fxmd-section-title.fxmd-section-title--center {
        display: inline-block;
      }
      .fxmd-section-title.fxmd-section-title--center::after {
        left: 50%;
        transform: translateX(-50%);
      }
      .fxmd-card-neon {
        background: linear-gradient(180deg, rgba(22, 27, 34, 0.95), rgba(13, 17, 23, 0.92));
        border: 1px solid rgba(48, 54, 61, 0.9);
        border-radius: 1rem;
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
        transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
      }
      .fxmd-card-neon:hover {
        border-color: rgba(0, 229, 255, 0.45);
        box-shadow: 0 18px 44px rgba(0, 229, 255, 0.14), 0 0 0 1px rgba(0, 229, 255, 0.2);
      }

      /* ── Site footer (dark + neon) ── */
      .fxmd-footer {
        background:
          radial-gradient(circle at 0% 0%, rgba(0, 229, 255, 0.06), transparent 28%),
          radial-gradient(circle at 100% 0%, rgba(0, 255, 156, 0.04), transparent 26%),
          linear-gradient(180deg, #0d1117 0%, #0a0f17 100%);
        border-top: 1px solid #30363d;
      }
      .fxmd-footer h3 { color: #f0f6fc !important; font-weight: 700; }
      .fxmd-footer ul.opacity-80 { opacity: 1; }
      .fxmd-footer a {
        color: #94a3b8;
        text-decoration: none !important;
        transition: color 150ms ease;
      }
      .fxmd-footer a:hover {
        color: #00e5ff;
        text-decoration: none !important;
      }
      .fxmd-footer .border-white\/20 { border-color: rgba(48, 54, 61, 0.9); }

      /* ── Docs pages: dark retheme overrides (MT/NT/QS/Pine/Changelog/Index) ── */

      /* Sticky section nav bars across docs pages */
      body .mt-nav,
      body .nt-nav,
      body .qs-nav {
        background: rgba(13, 17, 23, 0.95) !important;
        border-bottom: 1px solid #30363d !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
      }
      body .mt-nav a,
      body .nt-nav a,
      body .qs-nav a {
        color: #cdd9e5 !important;
        border-bottom: 2px solid transparent !important;
      }
      body .mt-nav a:hover,
      body .mt-nav a.active {
        color: #00e5ff !important;
        border-bottom-color: #00e5ff !important;
      }
      body .nt-nav a:hover,
      body .nt-nav a.active {
        color: #c586c0 !important;
        border-bottom-color: #c586c0 !important;
      }
      body .qs-nav a:hover,
      body .qs-nav a.active {
        color: #00ff9c !important;
        border-bottom-color: #00ff9c !important;
      }
      body .mt-nav .border-slate-200,
      body .nt-nav .border-slate-200,
      body .qs-nav .border-slate-200 {
        border-color: #30363d !important;
      }

      /* Hero cards on docs sub-pages */
      body .docs-hero,
      body .mt-hero,
      body .nt-hero,
      body .qs-hero {
        background:
          radial-gradient(circle at top right, rgba(0, 229, 255, 0.10), transparent 38%),
          radial-gradient(circle at bottom left, rgba(0, 255, 156, 0.035), transparent 28%),
          linear-gradient(180deg, #161b22 0%, #0f141a 100%) !important;
        border: 1px solid rgba(48, 54, 61, 0.95) !important;
        box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
      }

      /* Download / info cards inside docs pages */
      body .mt-dl-card,
      body .nt-dl-card {
        background: #161b22 !important;
        border: 1px solid #30363d !important;
      }
      body .mt-dl-card:hover {
        border-color: rgba(0, 229, 255, 0.45) !important;
        box-shadow: 0 10px 28px rgba(0, 229, 255, 0.12) !important;
      }
      body .nt-dl-card:hover {
        border-color: rgba(197, 134, 192, 0.55) !important;
        box-shadow: 0 10px 28px rgba(197, 134, 192, 0.15) !important;
      }

      /* Badge pills on docs pages */
      body .mt-badge,
      body .nt-badge {
        background: rgba(22, 27, 34, 0.9) !important;
        border: 1px solid #30363d !important;
      }
      body .mt-badge-live,
      body .nt-badge-live {
        color: #00ff9c !important;
        border-color: rgba(0, 255, 156, 0.35) !important;
        background: rgba(0, 255, 156, 0.08) !important;
      }
      body .mt-badge-mt4,
      body .mt-badge-mt5 {
        color: #4cc2ff !important;
        border-color: rgba(76, 194, 255, 0.35) !important;
        background: rgba(76, 194, 255, 0.08) !important;
      }
      body .nt-badge-nt8,
      body .nt-badge-cs {
        color: #c586c0 !important;
        border-color: rgba(197, 134, 192, 0.35) !important;
        background: rgba(197, 134, 192, 0.10) !important;
      }
      body .mt-badge-free,
      body .nt-badge-free {
        color: #ffd60a !important;
        border-color: rgba(255, 214, 10, 0.35) !important;
        background: rgba(255, 214, 10, 0.08) !important;
      }

      /* Tailwind opacity-white backdrops used on docs (bg-white/80, /92, /95) */
      body .bg-white\/80,
      body .bg-white\/92,
      body .bg-white\/95 {
        background-color: rgba(22, 27, 34, 0.9) !important;
      }

      /* Docs amber/blue/slate callout boxes */
      body .bg-amber-50 {
        background-color: rgba(255, 214, 10, 0.08) !important;
        color: #ffd60a !important;
      }
      body .border-amber-200 { border-color: rgba(255, 214, 10, 0.3) !important; }
      body .text-amber-800 { color: #ffd60a !important; }

      body .bg-blue-50 {
        background-color: rgba(76, 194, 255, 0.10) !important;
      }
      body .border-blue-200 { border-color: rgba(76, 194, 255, 0.32) !important; }
      body .hover\:bg-blue-100:hover { background-color: rgba(76, 194, 255, 0.18) !important; }

      body .bg-slate-50 {
        background-color: rgba(22, 27, 34, 0.65) !important;
      }
      body .hover\:bg-slate-50:hover { background-color: rgba(48, 54, 61, 0.55) !important; }
      body .bg-slate-100 {
        background-color: rgba(48, 54, 61, 0.6) !important;
        color: #e6edf3 !important;
      }
      body .divide-slate-100 > * + * { border-color: rgba(48, 54, 61, 0.75) !important; }
      body .divide-slate-100\/80 > * + * { border-color: rgba(48, 54, 61, 0.6) !important; }
      body .border-slate-100,
      body .border-slate-200,
      body .border-slate-300 {
        border-color: #30363d !important;
      }

      /* Highlighted accent text used on docs — keep it neon instead of brand-blue */
      body .text-finance-blue,
      body .text-accent-blue {
        color: #4cc2ff !important;
      }

      /* Mono eyebrow / inline code on dark — brighter */
      body .font-mono.text-slate-500,
      body .font-mono.text-slate-600 {
        color: #94a3b8 !important;
      }
      body code.text-cyan-700 { color: #00e5ff !important; }

      /* Changelog timeline card */
      body .release-card {
        background: #161b22 !important;
        border: 1px solid #30363d !important;
        box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35) !important;
      }
      body .release-card-header {
        background: rgba(13, 17, 23, 0.6) !important;
        border-bottom: 1px solid #30363d !important;
      }
      body .release-card-header .font-mono { color: #cdd9e5 !important; }
      body .timeline-dot {
        background: #00ff9c !important;
        border-color: #0d1117 !important;
        box-shadow: 0 0 0 2px rgba(0, 255, 156, 0.35) !important;
      }

      /* Endpoint card method / required / auth chips */
      body .badge-method {
        background: #21262d !important;
        color: #00e5ff !important;
        border: 1px solid rgba(0, 229, 255, 0.25);
      }
      body .badge-required {
        background: rgba(255, 77, 157, 0.14) !important;
        color: #ff4d9d !important;
      }

      /* Param tables on docs endpoint pages */
      body .param-table {
        background: #0d1117 !important;
        color: #cdd9e5 !important;
      }
      body .param-table thead th {
        background: #161b22 !important;
        color: #94a3b8 !important;
        border-bottom: 1px solid #30363d !important;
      }
      body .param-table tbody td {
        border-top: 1px solid rgba(48, 54, 61, 0.7) !important;
      }

      /* ── Techy font — use mono for eyebrow/badge style labels across the site ── */
      body .font-mono {
        font-family: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
        font-feature-settings: 'ss01', 'ss02', 'cv01', 'cv02';
      }

      /* ── Data releases / calendar currency filter chips ── */
      body .currency-chip-upcoming,
      body .currency-chip-past {
        background: #161b22 !important;
        border: 1px solid #30363d !important;
        color: #cdd9e5 !important;
        font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
        letter-spacing: 0.04em;
        transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
      }
      body .currency-chip-upcoming:hover,
      body .currency-chip-past:hover {
        border-color: rgba(0, 229, 255, 0.55) !important;
        color: #00e5ff !important;
        background: rgba(0, 229, 255, 0.08) !important;
        box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.18), 0 8px 22px rgba(0, 229, 255, 0.12);
      }
      body .currency-chip-upcoming.active,
      body .currency-chip-past.active {
        background: linear-gradient(135deg, #4cc2ff 0%, #00e5ff 50%, #00ff9c 100%) !important;
        border-color: transparent !important;
        color: #0a0f17 !important;
        font-weight: 700 !important;
        box-shadow: 0 10px 28px rgba(0, 229, 255, 0.3), 0 0 0 1px rgba(0, 255, 156, 0.35) !important;
      }
      body .currency-chip-upcoming.active span,
      body .currency-chip-past.active span {
        color: rgba(10, 15, 23, 0.72) !important;
      }

      .interactive-lift {
        transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
      }

      .interactive-lift:hover {
        transform: translateY(-3px);
      }

      .interactive-press:active {
        transform: scale(0.98);
      }

      /* Custom Colors — dark mode remapped */
      .text-finance-blue { color: #00e5ff; }
      .bg-finance-blue { background-color: #00e5ff; color: #061014; }
      .text-accent-blue { color: #00e5ff; }
      .bg-accent-blue { background-color: #00e5ff; color: #061014; }
      .hover\:bg-blue-700:hover { background-color: #00ff9c; color: #061014; }
      .text-light-blue { color: #00e5ff; }
      .text-danger-red { color: #ff4d9d; }
      .bg-danger-red { background-color: #da3633; }
      .hover\:bg-red-700:hover { background-color: #b91c1c; }
      .text-success-green { color: #00ff9c; }
      .bg-success-green { background-color: #238636; }
      .hover\:bg-green-700:hover { background-color: #2ea043; }
      .focus\:ring-accent-blue:focus { --tw-ring-color: #00e5ff; }
      .border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }
      .bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }

      /* Gradient background */
      .gradient-bg {
        background:
          radial-gradient(circle at 10% 0%, rgba(0, 229, 255, 0.10), transparent 28%),
          radial-gradient(circle at 90% 10%, rgba(255, 77, 157, 0.025), transparent 24%),
          linear-gradient(135deg, #0d1117 0%, #0b1117 54%, #11161d 100%);
      }
      .glass-effect {
        background: rgba(33, 38, 45, 0.72);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(139, 148, 158, 0.32);
      }
      .feature-card:hover {
        transform: translateY(-4px);
        transition: all 0.3s ease;
      }
      summary::-webkit-details-marker { display: none; }


      /* Modal overlay styling */
        [hidden],
        .auth-view.hidden,
        #auth-modal.hidden {
          display: none !important;
        }

      .modal-overlay {
          background-color: rgba(0, 0, 0, 0.8);
          transition: opacity 0.3s ease-in-out;
      }

      .auth-provider-button {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          width: 100%;
          min-height: 3.5rem;
          padding: 0.75rem;
          border: 1px solid #30363d;
          border-radius: 1rem;
          color: #e6edf3;
          font-size: 0.9375rem;
          font-weight: 700;
          line-height: 1.25rem;
          box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
          transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
      }

      .auth-provider-button--google {
          background: #21262d;
      }

      .auth-provider-button--github {
          background: #0d1117;
      }

      .auth-provider-button:hover {
          transform: translateY(-1px);
          border-color: #444c56;
          box-shadow: 0 16px 30px rgba(0, 0, 0, 0.4);
      }

      .auth-provider-button--google:hover,
      .auth-provider-button--github:hover {
          background: #2d333b;
      }

      .auth-provider-icon,
      .auth-provider-spacer {
          flex: 0 0 2.5rem;
          width: 2.5rem;
          height: 2.5rem;
      }

      .auth-provider-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #30363d;
          border-radius: 0.75rem;
          background: #161b22;
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
      }

      .auth-provider-text {
          min-width: 0;
          flex: 1 1 auto;
          text-align: center;
          white-space: normal;
      }

      /* Auth form animation */
      .auth-view {
          animation: fadeIn 0.3s ease-in;
      }

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

      /* Full screen loader for checkout redirection */
      #checkout-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(13, 17, 23, 0.97);
        z-index: 9999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease;
      }

      #checkout-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
      }

      /* ── Dashboard left navigation sidebar ── */
      .dashboard-sidebar {
        min-height: 100%;
      }
      .sidebar-nav-item {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.625rem 0.75rem;
        border-radius: 0.5rem;
        font-size: 0.8125rem;
        font-weight: 500;
        color: #8d96a0;
        text-decoration: none;
        transition: background 0.15s, color 0.15s;
        white-space: nowrap;
      }
      .sidebar-nav-item:hover {
        background: rgba(0, 229, 255, 0.1);
        color: #e6edf3;
      }
      .sidebar-nav-active {
        background: rgba(0, 229, 255, 0.12);
        color: #00e5ff;
        font-weight: 600;
      }
      .sidebar-nav-active:hover {
        background: rgba(0, 255, 156, 0.14);
        color: #6bc0ff;
      }
      .sidebar-nav-icon {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
      }
      /* Mobile horizontal tab strip */
      .mobile-tab-strip {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.5rem 1rem;
        background: rgba(22, 27, 34, 0.95);
        border-bottom: 1px solid rgba(48, 54, 61, 0.8);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      .mobile-tab-item {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.4rem 0.875rem;
        border-radius: 9999px;
        font-size: 0.8125rem;
        font-weight: 500;
        color: #8b949e;
        text-decoration: none;
        white-space: nowrap;
        transition: background 0.15s, color 0.15s;
        flex-shrink: 0;
      }
      .mobile-tab-item:hover {
        background: rgba(0, 229, 255, 0.1);
        color: #e6edf3;
      }
      .mobile-tab-active {
        background: rgba(0, 229, 255, 0.12);
        color: #00e5ff;
        font-weight: 600;
      }
      .mobile-tab-icon {
        width: 0.875rem;
        height: 0.875rem;
        flex-shrink: 0;
      }

      .dashboard-tab-select {
        display: none;
      }

      .dashboard-mobile-bar {
        display: none;
      }

      .dashboard-mobile-more-panel {
        display: none;
      }

      .fxmd-mobile-install-chip {
        display: none;
      }

      .dashboard-mobile-pull-refresh,
      .dashboard-mobile-connection-chip,
      .dashboard-mobile-command-overlay {
        display: none;
      }

      @media (max-width: 767px) {
        .site-main {
          padding-bottom: 1.75rem;
        }

        body.site-section-dashboard .site-main {
          padding-bottom: calc(5.8rem + env(safe-area-inset-bottom, 0px));
        }

        body.site-section-dashboard .fxmd-global-share {
          bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
        }

        .fxmd-mobile-install-chip {
          position: fixed;
          left: 0.9rem;
          bottom: calc(5.35rem + env(safe-area-inset-bottom, 0px));
          z-index: 82;
          display: inline-flex;
          align-items: center;
          gap: 0.35rem;
          border: 1px solid rgba(0, 229, 255, 0.25);
          border-radius: 999px;
          background: rgba(13, 17, 23, 0.96);
          box-shadow: 0 16px 32px rgba(0, 0, 0, 0.42);
          padding: 0.28rem;
          backdrop-filter: blur(16px);
        }

        .fxmd-install-action,
        .fxmd-install-dismiss {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border: 0;
          color: #061014;
          cursor: pointer;
          font-weight: 850;
          -webkit-tap-highlight-color: transparent;
        }

        .fxmd-install-action {
          gap: 0.35rem;
          min-height: 2rem;
          border-radius: 999px;
          background: linear-gradient(135deg, #00e5ff, #00ff9c);
          font-size: 0.78rem;
          padding: 0.38rem 0.7rem;
        }

        .fxmd-install-action svg {
          width: 0.95rem;
          height: 0.95rem;
          flex: 0 0 auto;
        }

        .fxmd-install-dismiss {
          width: 2rem;
          min-height: 2rem;
          border-radius: 999px;
          background: #21262d;
          color: #8d96a0;
          font-size: 1rem;
          line-height: 1;
        }

        .dashboard-page-shell {
          padding: 1rem 1rem 0;
        }

        .dashboard-nav-header {
          flex-direction: column;
          align-items: flex-start;
          margin-bottom: 0.75rem;
        }

        .dashboard-tab-row {
          display: none;
        }

        .dashboard-tab-select {
          display: block;
          width: 100%;
          padding: 0.6rem 0.9rem;
          border-radius: 999px;
          border: 1px solid rgba(0, 229, 255, 0.45);
          background: linear-gradient(180deg, #11161d 0%, #0b1117 100%);
          color: #e6edf3;
          font-size: 0.9rem;
          font-weight: 700;
          appearance: none;
          -webkit-appearance: none;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300e5ff' stroke-width='2.5' 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 0.9rem center;
          padding-right: 2.5rem;
          cursor: pointer;
          min-height: 2.75rem;
          box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.08), 0 4px 14px rgba(0, 0, 0, 0.5);
        }
        .dashboard-tab-select:focus,
        .dashboard-tab-select:hover {
          outline: none;
          border-color: rgba(0, 229, 255, 0.85);
          box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.25), 0 4px 18px rgba(0, 0, 0, 0.55);
        }
        /* Native <option> rendering: Chromium/Edge/Firefox respect background-color
           and color on <option>, so force the neon-dark palette to match the closed
           control. Without this the open dropdown falls back to the OS light theme
           (white background, gray text) and becomes nearly unreadable. */
        .dashboard-tab-select option {
          background-color: #0b1117;
          color: #e6edf3;
          font-weight: 600;
        }
        .dashboard-tab-select option:checked,
        .dashboard-tab-select option:hover {
          background: linear-gradient(90deg, rgba(0, 229, 255, 0.22), rgba(0, 255, 156, 0.18));
          color: #ffffff;
        }

        .dashboard-mobile-bar {
          position: fixed;
          right: 0.7rem;
          bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
          left: 0.7rem;
          z-index: 80;
          display: grid;
          grid-template-columns: repeat(5, minmax(0, 1fr));
          gap: 0.25rem;
          border: 1px solid rgba(0, 229, 255, 0.22);
          border-radius: 1.15rem;
          background: rgba(13, 17, 23, 0.94);
          box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);
          backdrop-filter: blur(18px);
          padding: 0.38rem;
        }

        .dashboard-mobile-tab {
          display: inline-flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 0.17rem;
          min-width: 0;
          min-height: 3.05rem;
          border: 1px solid transparent;
          border-radius: 0.9rem;
          color: #8d96a0;
          font-size: 0.66rem;
          font-weight: 800;
          line-height: 1;
          text-decoration: none;
          white-space: nowrap;
          -webkit-tap-highlight-color: transparent;
        }

        .dashboard-mobile-tab:hover,
        .dashboard-mobile-tab-active,
        .dashboard-mobile-more-active > .dashboard-mobile-tab {
          border-color: rgba(0, 229, 255, 0.28);
          background: linear-gradient(180deg, rgba(0, 229, 255, 0.14), rgba(0, 255, 156, 0.08));
          color: #00e5ff;
        }

        .dashboard-mobile-icon {
          width: 1.05rem;
          height: 1.05rem;
          flex: 0 0 auto;
        }

        .dashboard-mobile-more {
          position: relative;
          min-width: 0;
        }

        .dashboard-mobile-more summary {
          cursor: pointer;
          list-style: none;
        }

        .dashboard-mobile-more summary::-webkit-details-marker {
          display: none;
        }

        .dashboard-mobile-more[open] .dashboard-mobile-more-panel {
          position: absolute;
          right: 0;
          bottom: calc(100% + 0.55rem);
          display: grid;
          min-width: min(78vw, 18rem);
          max-height: min(62vh, 25rem);
          overflow-y: auto;
          gap: 0.25rem;
          border: 1px solid rgba(0, 229, 255, 0.22);
          border-radius: 1rem;
          background: rgba(13, 17, 23, 0.98);
          box-shadow: 0 20px 44px rgba(0, 0, 0, 0.48);
          padding: 0.5rem;
        }

        .dashboard-mobile-more-panel a {
          display: flex;
          align-items: center;
          min-height: 2.45rem;
          border-radius: 0.72rem;
          color: #cdd9e5;
          font-size: 0.85rem;
          font-weight: 750;
          padding: 0.55rem 0.7rem;
          text-decoration: none;
        }

        .dashboard-mobile-more-actions {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 0.35rem;
          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
          margin-bottom: 0.25rem;
          padding-bottom: 0.5rem;
        }

        .dashboard-mobile-more-actions button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 0.35rem;
          min-width: 0;
          min-height: 2.55rem;
          border: 1px solid rgba(0, 229, 255, 0.2);
          border-radius: 0.75rem;
          background: rgba(0, 229, 255, 0.08);
          color: #dff9ff;
          cursor: pointer;
          font: inherit;
          font-size: 0.78rem;
          font-weight: 800;
          -webkit-tap-highlight-color: transparent;
        }

        .dashboard-mobile-more-actions button[hidden] {
          display: none;
        }

        .dashboard-mobile-more-actions button.is-active {
          border-color: rgba(0, 255, 156, 0.38);
          background: rgba(0, 255, 156, 0.12);
          color: #00ff9c;
        }

        body.fxmd-mobile-compact .dashboard-page-shell {
          padding-top: 0.65rem;
        }

        body.fxmd-mobile-compact .dashboard-nav-shell {
          margin-bottom: 0.55rem;
        }

        body.fxmd-mobile-compact .dashboard-conversion-strip {
          padding: 0.55rem 0.65rem;
        }

        body.fxmd-mobile-compact .dashboard-conversion-text {
          display: none;
        }

        body.fxmd-mobile-compact .rc-hero-inner,
        body.fxmd-mobile-compact .rc-panel-inner,
        body.fxmd-mobile-compact .wl-card-head,
        body.fxmd-mobile-compact .wl-card-body,
        body.fxmd-mobile-compact .wl-stat,
        body.fxmd-mobile-compact .wl-note {
          padding: 0.72rem;
        }

        body.fxmd-mobile-compact .wl-summary,
        body.fxmd-mobile-compact .wl-grid,
        body.fxmd-mobile-compact .rc-shell,
        body.fxmd-mobile-compact .rc-grid {
          gap: 0.55rem;
        }

        body.fxmd-mobile-compact .wl-subtitle,
        body.fxmd-mobile-compact .rc-subtitle,
        body.fxmd-mobile-compact .rc-panel-copy {
          display: none;
        }

        .dashboard-mobile-action-icon {
          width: 0.95rem;
          height: 0.95rem;
          flex: 0 0 auto;
        }

        .dashboard-mobile-recent {
          display: grid;
          gap: 0.25rem;
          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
          margin-bottom: 0.25rem;
          padding-bottom: 0.5rem;
        }

        .dashboard-mobile-recent[hidden] {
          display: none;
        }

        .dashboard-mobile-recent-title {
          color: #8d96a0;
          font-size: 0.66rem;
          font-weight: 850;
          letter-spacing: 0.09em;
          padding: 0.12rem 0.2rem;
          text-transform: uppercase;
        }

        .dashboard-mobile-more-panel a:hover,
        .dashboard-mobile-more-panel a.is-active {
          background: rgba(0, 229, 255, 0.12);
          color: #00e5ff;
        }

        .dashboard-mobile-pull-refresh {
          position: fixed;
          top: calc(0.75rem + env(safe-area-inset-top, 0px));
          left: 50%;
          z-index: 84;
          display: inline-flex;
          align-items: center;
          gap: 0.45rem;
          min-height: 2.35rem;
          border: 1px solid rgba(0, 229, 255, 0.24);
          border-radius: 999px;
          background: rgba(13, 17, 23, 0.94);
          box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36);
          color: #dff9ff;
          font-size: 0.78rem;
          font-weight: 850;
          opacity: 0;
          padding: 0.44rem 0.75rem;
          pointer-events: none;
          transform: translate(-50%, -0.9rem);
          transition: opacity 160ms ease, transform 160ms ease;
        }

        .dashboard-mobile-pull-refresh.is-visible {
          opacity: 1;
          transform: translate(-50%, 0);
        }

        .dashboard-mobile-pull-refresh.is-ready {
          border-color: rgba(0, 255, 156, 0.4);
          color: #00ff9c;
        }

        .dashboard-mobile-pull-refresh svg {
          width: 1rem;
          height: 1rem;
          flex: 0 0 auto;
        }

        .dashboard-mobile-connection-chip {
          position: fixed;
          right: 0.9rem;
          bottom: calc(5.35rem + env(safe-area-inset-bottom, 0px));
          left: 0.9rem;
          z-index: 81;
          display: none;
          border: 1px solid rgba(0, 229, 255, 0.22);
          border-radius: 0.9rem;
          background: rgba(13, 17, 23, 0.96);
          box-shadow: 0 16px 32px rgba(0, 0, 0, 0.42);
          color: #cdd9e5;
          font-size: 0.78rem;
          font-weight: 720;
          line-height: 1.35;
          padding: 0.68rem 0.78rem;
          backdrop-filter: blur(16px);
        }

        .dashboard-mobile-connection-chip.is-visible {
          display: block;
        }

        .dashboard-mobile-command-overlay {
          position: fixed;
          inset: 0;
          z-index: 95;
          display: none;
          align-items: flex-end;
          background: rgba(0, 0, 0, 0.48);
          padding: 0.7rem;
          padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
        }

        .dashboard-mobile-command-overlay.is-open {
          display: flex;
        }

        .dashboard-mobile-command-sheet {
          display: grid;
          width: 100%;
          max-height: min(82vh, 44rem);
          overflow: hidden;
          border: 1px solid rgba(0, 229, 255, 0.24);
          border-radius: 1.1rem;
          background: rgba(13, 17, 23, 0.98);
          box-shadow: 0 26px 56px rgba(0, 0, 0, 0.52);
          backdrop-filter: blur(18px);
        }

        .dashboard-mobile-command-head {
          display: grid;
          grid-template-columns: minmax(0, 1fr) auto;
          gap: 0.55rem;
          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
          padding: 0.72rem;
        }

        .dashboard-mobile-command-head input {
          min-height: 2.75rem;
          border: 1px solid rgba(0, 229, 255, 0.26);
          border-radius: 0.8rem;
          background: #0b1117;
          color: #e6edf3;
          font-size: 0.95rem;
          font-weight: 720;
          padding: 0.65rem 0.78rem;
        }

        .dashboard-mobile-command-close {
          min-width: 2.75rem;
          min-height: 2.75rem;
          border: 1px solid rgba(255, 255, 255, 0.12);
          border-radius: 0.8rem;
          background: rgba(255, 255, 255, 0.06);
          color: #cdd9e5;
          cursor: pointer;
          font-size: 1.15rem;
          font-weight: 850;
        }

        .dashboard-mobile-command-results {
          display: grid;
          gap: 0.28rem;
          max-height: calc(min(82vh, 44rem) - 4.4rem);
          overflow-y: auto;
          padding: 0.55rem;
        }

        .dashboard-mobile-command-item {
          display: grid;
          gap: 0.16rem;
          min-height: 3.25rem;
          border: 1px solid transparent;
          border-radius: 0.82rem;
          background: rgba(255, 255, 255, 0.035);
          color: #e6edf3;
          cursor: pointer;
          font: inherit;
          padding: 0.62rem 0.72rem;
          text-align: left;
          text-decoration: none;
        }

        .dashboard-mobile-command-item:focus,
        .dashboard-mobile-command-item:hover {
          border-color: rgba(0, 229, 255, 0.28);
          background: rgba(0, 229, 255, 0.1);
          outline: none;
        }

        .dashboard-mobile-command-title {
          color: #f0f6fc;
          font-size: 0.88rem;
          font-weight: 850;
        }

        .dashboard-mobile-command-meta {
          color: #8d96a0;
          font-size: 0.72rem;
          font-weight: 720;
        }

        .dashboard-mobile-command-empty {
          color: #8d96a0;
          font-size: 0.82rem;
          padding: 1rem 0.7rem;
          text-align: center;
        }
      }

      /* ═══════════════════════════════════════════════════════════════
         DARK MODE GLOBAL TAILWIND UTILITY OVERRIDES
         The inline <style> block loads after tailwind-built.css, so
         these body-scoped rules win specificity without !important.
         ═══════════════════════════════════════════════════════════════ */

      /* White/near-white backgrounds → dark surfaces */
      body .bg-white,
      body [class~="bg-white"] { background-color: #161b22; }
      body .bg-white\/70  { background-color: rgba(22, 27, 34, 0.70); }
      body .bg-white\/80  { background-color: rgba(22, 27, 34, 0.80); }
      body .bg-white\/85  { background-color: rgba(22, 27, 34, 0.85); }
      body .bg-white\/86  { background-color: rgba(22, 27, 34, 0.86); }
      body .bg-white\/90  { background-color: rgba(22, 27, 34, 0.90); }
      body .bg-white\/92  { background-color: rgba(22, 27, 34, 0.92); }
      body .bg-white\/95  { background-color: rgba(22, 27, 34, 0.95); }
      body .bg-white\/96  { background-color: rgba(22, 27, 34, 0.96); }
      body [class~="bg-white/70"]  { background-color: rgba(22, 27, 34, 0.70); }
      body [class~="bg-white/80"]  { background-color: rgba(22, 27, 34, 0.80); }
      body [class~="bg-white/85"]  { background-color: rgba(22, 27, 34, 0.85); }
      body [class~="bg-white/86"]  { background-color: rgba(22, 27, 34, 0.86); }
      body [class~="bg-white/90"]  { background-color: rgba(22, 27, 34, 0.90); }
      body [class~="bg-white/92"]  { background-color: rgba(22, 27, 34, 0.92); }
      body [class~="bg-white/95"]  { background-color: rgba(22, 27, 34, 0.95); }
      body [class~="bg-white/96"]  { background-color: rgba(22, 27, 34, 0.96); }
      body .bg-slate-50  { background-color: #21262d; }
      body [class~="bg-slate-50/75"] { background-color: rgba(33, 38, 45, 0.75); }
      body .bg-slate-100 { background-color: #2d333b; }
      body .bg-slate-200 { background-color: #373e47; }
      body .bg-gray-50   { background-color: #21262d; }
      body .bg-gray-100  { background-color: #2d333b; }

      /* Light-mode arbitrary background values → dark */
      body [class~="bg-[#f7fbff]"],
      body [class~="bg-[#eef7ff]"],
      body [class~="bg-[#edf7ff]"] { background-color: #0d1117; }

      /* Text → dark palette */
      body .text-slate-950 { color: #f0f6fc; }
      body .text-slate-900 { color: #f0f6fc; }
      body .text-slate-800 { color: #e6edf3; }
      body .text-slate-700 { color: #cdd9e5; }
      body .text-slate-600 { color: #adbac7; }
      body .text-slate-500 { color: #94a3b8; }
      body .text-slate-400 { color: #94a3b8; }
      body .text-gray-900  { color: #f0f6fc; }
      body .text-gray-800  { color: #e6edf3; }
      body .text-gray-700  { color: #cdd9e5; }
      body .text-gray-600  { color: #adbac7; }
      body .text-gray-500  { color: #94a3b8; }
      body .text-gray-400  { color: #94a3b8; }

      /* Borders → dark */
      body .border-slate-200  { border-color: #30363d; }
      body [class~="border-slate-200/80"] { border-color: rgba(48, 54, 61, 0.8); }
      body [class~="border-slate-200/90"] { border-color: rgba(48, 54, 61, 0.9); }
      body .border-gray-200  { border-color: #30363d; }
      body .border-gray-100  { border-color: #30363d; }
      body .border-gray-300  { border-color: #373e47; }
      body .border-blue-100  { border-color: rgba(0, 229, 255, 0.24); }
      body .border-blue-200  { border-color: rgba(0, 229, 255, 0.34); }
      body .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #30363d; }
      body [class~="border-[#dbe3ef]"] { border-color: #30363d; }

      /* Hover states — comprehensive dark mode */
      body .hover\:bg-slate-50:hover { background-color: #21262d; }
      body [class~="hover:bg-[#eef7ff]"]:hover { background-color: rgba(33, 38, 45, 0.8); }
      body [class~="hover:bg-slate-50"]:hover { background-color: #21262d; }
      body .hover\:border-slate-300:hover { border-color: #444c56; }
      body .hover\:bg-slate-50:hover { background-color: #21262d; }
      body .hover\:text-slate-700:hover { color: #adbac7; }

      /* Divider lines */
      body .bg-slate-200 { background-color: #30363d; }
      body .divide-slate-200 > * + * { border-color: #30363d; }

      /* Input fields */
      body input[class*="bg-white"],
      body textarea[class*="bg-white"],
      body select[class*="bg-white"] {
        background-color: #0d1117;
        color: #e6edf3;
        border-color: #30363d;
      }
      body input::placeholder,
      body textarea::placeholder { color: #768390; }

      /* Focus rings on dark */
      body input:focus,
      body textarea:focus,
      body select:focus {
        outline-color: #00e5ff;
        border-color: #00e5ff;
      }

      /* Recents articles sidebar panel */
      body .recent-articles-panel h3 { color: #00e5ff; }
      body .recent-articles-panel a p { color: #cdd9e5; }
      body .recent-articles-panel a:hover p { color: #00e5ff; }

      /* Tailwind ring overrides for focus */
      body .focus\:ring-accent-blue\/10:focus { --tw-ring-color: rgba(0, 229, 255, 0.16); }

      /* Gradient sections — replace light gradients with dark equivalents */
      body section[style*="rgba(239,246,255"],
      body section[style*="rgba(239, 246, 255"],
      body div[style*="rgba(239,246,255"],
      body div[style*="rgba(239, 246, 255"] {
        background: #0d1117 !important;
      }

      /* Cyan/emerald tags on dark bg */
      body .bg-cyan-50  { background-color: rgba(41, 184, 219, 0.1); }
      body .text-cyan-700 { color: #29b8db; }
      body .text-cyan-800 { color: #29b8db; }
      body .border-cyan-100 { border-color: rgba(41, 184, 219, 0.18); }
      body .border-cyan-200 { border-color: rgba(41, 184, 219, 0.25); }
      body .border-cyan-300 { border-color: rgba(41, 184, 219, 0.35); }
      body .hover\:border-cyan-300:hover { border-color: rgba(41, 184, 219, 0.45); }
      body .bg-emerald-50 { background-color: rgba(0, 255, 156, 0.1); }
      body .bg-emerald-100 { background-color: rgba(0, 255, 156, 0.15); }
      body .text-emerald-700 { color: #00ff9c; }
      body .text-emerald-800 { color: #8fffd2; }
      body .border-emerald-200 { border-color: rgba(0, 255, 156, 0.25); }
      body .border-emerald-300 { border-color: rgba(0, 255, 156, 0.35); }
      body .hover\:bg-emerald-100:hover { background-color: rgba(0, 255, 156, 0.18); }

      /* Amber / warning card overrides → dark */
      body .bg-amber-50  { background-color: rgba(245, 158, 11, 0.08); }
      body .bg-amber-100 { background-color: rgba(245, 158, 11, 0.14); }
      body .border-amber-200 { border-color: rgba(245, 158, 11, 0.3); }
      body .text-amber-900 { color: #fbbf24; }
      body .text-amber-800 { color: #fcd34d; }
      body .text-amber-700 { color: #f59e0b; }
      body .text-amber-500 { color: #f59e0b; }

      /* Yellow info boxes → dark */
      body .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.08); }
      body .border-yellow-200 { border-color: rgba(234, 179, 8, 0.3); }
      body .text-yellow-900 { color: #fde047; }
      body .text-yellow-800 { color: #facc15; }

      /* Sky / light-blue overrides → dark */
      body [class~="text-sky-700/80"] { color: #00e5ff; }
      body .text-sky-700 { color: #00e5ff; }
      body .text-sky-800 { color: #00e5ff; }
      body .border-sky-200 { border-color: rgba(56, 189, 248, 0.3); }
      body .border-sky-300 { border-color: rgba(56, 189, 248, 0.4); }
      body .hover\:border-sky-200:hover { border-color: rgba(56, 189, 248, 0.4); }
      body .hover\:border-sky-300:hover { border-color: rgba(56, 189, 248, 0.5); }
      body .bg-sky-50 { background-color: rgba(56, 189, 248, 0.08); }

      /* Blue palette → dark */
      body .bg-blue-50 { background-color: rgba(0, 229, 255, 0.08); }
      body [class~="bg-blue-50/50"] { background-color: rgba(0, 229, 255, 0.05); }
      body .bg-blue-100 { background-color: rgba(0, 229, 255, 0.12); }
      body .hover\:bg-blue-50:hover { background-color: rgba(0, 229, 255, 0.12); }
      body .hover\:bg-blue-100:hover { background-color: rgba(0, 255, 156, 0.14); }
      body .text-blue-600 { color: #00e5ff; }
      body .text-blue-900 { color: #6bc0ff; }
      body .text-blue-800 { color: #6bc0ff; }

      /* Red palette → dark */
      body .bg-red-50 { background-color: rgba(255, 77, 157, 0.08); }
      body .bg-red-100 { background-color: rgba(255, 77, 157, 0.14); }
      body .border-red-200 { border-color: rgba(255, 77, 157, 0.3); }
      body .border-red-300 { border-color: rgba(255, 77, 157, 0.4); }
      body .text-red-600 { color: #ff4d9d; }
      body .text-red-700 { color: #ff4d9d; }
      body .text-red-800 { color: #ff7b72; }
      body .text-red-900 { color: #ff7b72; }
      body .hover\:bg-red-100:hover { background-color: rgba(255, 77, 157, 0.18); }
      body .hover\:border-red-300:hover { border-color: rgba(255, 77, 157, 0.5); }

      /* Indigo accents → dark */
      body .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.1); }
      body .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.14); }
      body .text-indigo-600 { color: #a5b4fc; }
      body .text-indigo-800 { color: #a5b4fc; }

      /* Purple / violet accents → dark */
      body .text-purple-600 { color: #c4b5fd; }
      body .text-purple-700 { color: #c4b5fd; }
      body .text-violet-600 { color: #c4b5fd; }

      /* Green info → dark */
      body .bg-green-50 { background-color: rgba(0, 255, 156, 0.08); }
      body .bg-green-100 { background-color: rgba(0, 255, 156, 0.14); }
      body .text-green-600 { color: #00ff9c; }
      body .text-green-700 { color: #00ff9c; }
      body .text-green-800 { color: #8fffd2; }
      body .text-green-900 { color: #00ff9c; }

      /* Additional -100 shades for coverage badges → dark */
      body .bg-cyan-100  { background-color: rgba(41, 184, 219, 0.14); }
      body .bg-violet-100 { background-color: rgba(139, 92, 246, 0.14); }
      body .text-violet-700 { color: #c4b5fd; }

      /* Blue-700 used as text in badges/buttons → readable on dark */
      body .text-blue-700 { color: #00e5ff; }
      body .text-blue-400 { color: #00e5ff; }

      /* Inline style overrides — pro/free badge in docs */
      body .badge-pro-required[style] { background: rgba(234, 179, 8, 0.12) !important; color: #fde047 !important; }

      /* Slate-100 borders → dark */
      body .border-slate-100 { border-color: #30363d; }
      body .border-slate-300 { border-color: #444c56; }

      /* Hover states — comprehensive dark mode */
      body .hover\:bg-white:hover { background-color: #21262d; }
      body .hover\:text-blue-700:hover { color: #6bc0ff; }
      body .hover\:border-blue-300:hover { border-color: rgba(0, 229, 255, 0.44); }
      body .group-hover\:text-blue-700 { color: #6bc0ff; }
      body .hover\:text-gray-700:hover { color: #adbac7; }
      body .hover\:text-gray-900:hover { color: #e6edf3; }
      body .hover\:text-slate-700:hover { color: #adbac7; }
      body .hover\:text-slate-900:hover { color: #e6edf3; }
      body .hover\:text-slate-600:hover { color: #8d96a0; }

      /* Slash-opacity bg classes not caught by simple selectors */
      body [class~="bg-slate-50/80"] { background-color: rgba(33, 38, 45, 0.80); }
      body [class~="bg-slate-50/75"] { background-color: rgba(33, 38, 45, 0.75); }

      /* Inline gradient overrides for subscribe/light gradient sections */
      body [style*="rgba(255,255,255,0.96)"],
      body [style*="rgba(240,249,255"] {
        background: linear-gradient(180deg, rgba(22, 27, 34, 0.96), rgba(13, 17, 23, 0.88)) !important;
      }
      /* Inline light info-boxes (MCP server, docs) */
      body [style*="background:#f8fafc"] {
        background: #161b22 !important;
        border-color: #30363d !important;
      }

      /* Tailwind arbitrary-value light gradient overrides (api_management, data_export, etc.) */
      body [class*="bg-[linear-gradient(180deg,#f8fbff"],
      body [class*="bg-[linear-gradient(180deg,#ffffff"],
      body [class*="bg-[linear-gradient(180deg,#fffaf0"],
      body [class*="bg-[linear-gradient(180deg,#fff6e8"],
      body [class*="bg-[linear-gradient(180deg,#fcfffd"],
      body [class*="bg-[linear-gradient(180deg,#f3fbf7"],
      body [class*="bg-[linear-gradient(180deg,rgba(239,246,255"],
      body [class*="bg-[linear-gradient(180deg,rgba(255,255,255"] {
        background: linear-gradient(180deg, #161b22 0%, #0d1117 100%) !important;
      }
      body [class*="bg-[linear-gradient(90deg,rgba(239,246,255"],
      body [class*="bg-[linear-gradient(90deg,#eff6ff"] {
        background: linear-gradient(90deg, rgba(22,27,34,0.92), rgba(13,17,23,0.98)) !important;
      }
      body [class*="bg-[radial-gradient"][class*="fcfffd"],
      body [class*="bg-[radial-gradient"][class*="f3fbf7"] {
        background: radial-gradient(circle at top right, rgba(0,229,255,0.07), transparent 26%), linear-gradient(180deg, #161b22 0%, #0d1117 100%) !important;
      }
      body [class*="bg-[radial-gradient"][class*="59,130,246"] {
        background: radial-gradient(circle at top right, rgba(0,229,255,0.10), transparent 26%), linear-gradient(180deg, #161b22 0%, #0d1117 100%) !important;
      }

      /* bg-white/85, bg-white/90 overrides for api_management nav/sections */
      body [class*="bg-white\/85"] { background-color: rgba(22, 27, 34, 0.85) !important; }
      body [class*="bg-white\/90"] { background-color: rgba(22, 27, 34, 0.90) !important; }
      body [class*="bg-white\/92"] { background-color: rgba(22, 27, 34, 0.92) !important; }

      /* Text colors in api_management plan cards (slate-500 consolidated above) */
      body .text-slate-950 { color: #e6edf3; }
      body .text-slate-900 { color: #e6edf3; }
      body .text-slate-700 { color: #adbac7; }
      body .text-slate-600 { color: #8d96a0; }

      /* Emerald badges on dark */
      body .bg-emerald-50 { background-color: rgba(0, 255, 156, 0.12); }
      body .text-emerald-700 { color: #00ff9c; }
      body .text-emerald-600 { color: #00ff9c; }
      body .border-emerald-200 { border-color: rgba(0, 255, 156, 0.3); }
      body .border-emerald-300 { border-color: rgba(0, 255, 156, 0.4); }

      /* Amber warning panels */
      body .border-amber-200 { border-color: rgba(245, 158, 11, 0.3); }
      body .bg-amber-50\/80 { background-color: rgba(245, 158, 11, 0.08); }

      /* Plan card borders/bg on dark */
      body .border-blue-200 { border-color: rgba(0, 229, 255, 0.34); }
      body .bg-blue-50 { background-color: rgba(0, 229, 255, 0.1); }
      body .border-blue-100 { border-color: rgba(0, 229, 255, 0.24); }

      /* Recent articles sidebar hover */
      body .group:hover .group-hover\:text-accent-blue { color: #00e5ff; }

      /* Inline links in text blocks — add subtle underline for non-color distinction
         (WCAG link-in-text-block). Only targets <a> tags, not spans/badges. */
      body p a.text-accent-blue,
      body li a.text-accent-blue,
      body td a.text-accent-blue,
      body p a[class*="text-blue-6"],
      body li a[class*="text-blue-6"],
      body td a[class*="text-blue-6"] {
        text-decoration: underline;
        text-decoration-color: rgba(0, 229, 255, 0.42);
        text-underline-offset: 3px;
      }
      body p a.text-accent-blue:hover,
      body li a.text-accent-blue:hover,
      body td a.text-accent-blue:hover,
      body p a[class*="text-blue-6"]:hover,
      body li a[class*="text-blue-6"]:hover,
      body td a[class*="text-blue-6"]:hover {
        text-decoration-color: rgba(0, 255, 156, 0.72);
      }

      /* ── Article prose: dark text in light-background callout boxes ──────
         Article HTML uses inline style="background:#EFF6FF" etc. without an
         explicit text colour. The global dark theme inherits white text which
         is illegible on light backgrounds. These rules force #1e293b on the
         box; child elements that already carry their own inline colour keep
         it (inline style wins over inherited CSS).
         Both upper- and lower-case hex variants are listed because article
         HTML is authored by hand and the casing is inconsistent. The partial
         [style*="background: linear-gradient(135deg, #<color>"] selectors
         intentionally match any gradient that starts with a known light hue;
         they will correctly catch new gradient stop variations without
         needing selector updates. */
      .article-content [style*="background:#EFF6FF"],
      .article-content [style*="background:#eff6ff"],
      .article-content [style*="background:#FFF7ED"],
      .article-content [style*="background:#fff7ed"],
      .article-content [style*="background:#FFFBEB"],
      .article-content [style*="background:#fffbeb"],
      .article-content [style*="background:#FDF4FF"],
      .article-content [style*="background:#fdf4ff"],
      .article-content [style*="background:#FAF5FF"],
      .article-content [style*="background:#faf5ff"],
      .article-content [style*="background:#F0FDF4"],
      .article-content [style*="background:#f0fdf4"],
      .article-content [style*="background:#F8FAFC"],
      .article-content [style*="background:#f8fafc"],
      .article-content [style*="background:#f1f5f9"],
      .article-content [style*="background:#fef2f2"],
      .article-content [style*="background: linear-gradient(135deg, #eff6ff"],
      .article-content [style*="background: linear-gradient(135deg, #fffbeb"],
      .article-content [style*="background: linear-gradient(135deg, #f5f3ff"],
      .article-content [style*="background:linear-gradient(135deg, #eff6ff"],
      .article-content [style*="background:linear-gradient(135deg, #fffbeb"],
      .article-content [style*="background:linear-gradient(135deg, #f5f3ff"] {
        color: #d4d4d4;
      }

      /* Ensure table rows with light backgrounds also show light text on the
         re-themed dark surface. */
      .article-content tr[style*="background: #f1f5f9"],
      .article-content tr[style*="background:#f1f5f9"] {
        color: #d4d4d4;
      }

      /* ── Article prose: pre/code block styling ───────────────────────── */
      .article-content pre {
        background: #161b22;
        border: 1px solid rgba(48, 54, 61, 0.8);
        border-radius: 8px;
        padding: 1rem 1.25rem;
        overflow-x: auto;
        color: #e6edf3;
        margin: 1.25rem 0;
      }
      .article-content pre code {
        background: none;
        border: none;
        padding: 0;
        font-size: 0.875rem;
        color: inherit;
      }
      .article-content :not(pre) > code {
        background: rgba(22, 27, 34, 0.7);
        border: 1px solid rgba(48, 54, 61, 0.6);
        border-radius: 4px;
        padding: 0.1em 0.4em;
        font-size: 0.875em;
        color: #e6edf3;
      }
      /* Inline code inside light-background callout boxes */
      .article-content [style*="background:#EFF6FF"] code,
      .article-content [style*="background:#eff6ff"] code,
      .article-content [style*="background:#FFF7ED"] code,
      .article-content [style*="background:#fff7ed"] code,
      .article-content [style*="background:#FFFBEB"] code,
      .article-content [style*="background:#fffbeb"] code,
      .article-content [style*="background:#FDF4FF"] code,
      .article-content [style*="background:#fdf4ff"] code,
      .article-content [style*="background:#F0FDF4"] code,
      .article-content [style*="background:#f0fdf4"] code,
      .article-content [style*="background:#F8FAFC"] code,
      .article-content [style*="background:#f8fafc"] code,
      .article-content [style*="background: linear-gradient(135deg, #eff6ff"] code,
      .article-content [style*="background: linear-gradient(135deg, #fffbeb"] code,
      .article-content [style*="background: linear-gradient(135deg, #f5f3ff"] code {
        background: rgba(156, 220, 254, 0.10);
        border-color: rgba(156, 220, 254, 0.25);
        color: #9cdcfe;
      }

      /* ── Neon cyan/mint accent override ───────────────────────────────
         Marketing surfaces should not use muted cornflower/royal blue as the
         brand accent. Bright fills use dark ink for contrast; text accents
         stay neon on dark surfaces. */
      :root {
        --line-strong: rgba(0, 229, 255, 0.36);
        --brand-navy: #00e5ff;
        --brand-blue: #00e5ff;
        --brand-cyan: #00e5ff;
        --brand-green: #00ff9c;
      }

      .site-shell {
        background:
          radial-gradient(circle at 9% 0%, rgba(0, 229, 255, 0.11), transparent 30%),
          radial-gradient(circle at 88% 8%, rgba(255, 77, 157, 0.025), transparent 26%),
          linear-gradient(180deg, #0d1117 0%, #050811 60%, #010409 100%);
      }

      .navbar-brand-mark {
        background: #02070d;
        border-color: rgba(0, 229, 255, 0.36);
        box-shadow:
          0 10px 24px rgba(0, 0, 0, 0.32),
          0 0 24px rgba(0, 229, 255, 0.20),
          inset 0 0 14px rgba(0, 255, 156, 0.05);
      }

      .navbar-brand-wordmark {
        background: linear-gradient(90deg, #00e5ff 0%, #00ff9c 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        text-shadow: 0 0 18px rgba(0, 229, 255, 0.18);
      }

      .navbar-link-pill:hover {
        background: rgba(0, 229, 255, 0.10);
        color: #00e5ff;
        box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.28), 0 8px 22px rgba(0, 0, 0, 0.22);
      }

      .navbar-primary-cta,
      body .hero-primary-cta,
      body .startup-hub-primary,
      body .subscribe-btn,
      body .dashboard-feed-button,
      body .bg-accent-blue,
      body .bg-finance-blue,
      body .bg-blue-600,
      body .bg-blue-700,
      body .bg-emerald-500,
      body .bg-emerald-600 {
        background: linear-gradient(135deg, #00e5ff 0%, #00ff9c 100%) !important;
        background-color: #00e5ff !important;
        color: #061014 !important;
        -webkit-text-fill-color: #061014 !important;
        -webkit-background-clip: border-box !important;
        background-clip: border-box !important;
        text-shadow: none !important;
        box-shadow:
          0 14px 34px rgba(0, 229, 255, 0.26),
          0 0 0 1px rgba(0, 255, 156, 0.48) inset !important;
      }

      .navbar-primary-cta *,
      body .hero-primary-cta *,
      body .startup-hub-primary *,
      body .subscribe-btn *,
      body .dashboard-feed-button *,
      body .bg-accent-blue *,
      body .bg-finance-blue *,
      body .bg-blue-600 *,
      body .bg-blue-700 *,
      body .bg-emerald-500 *,
      body .bg-emerald-600 * {
        color: #061014 !important;
        -webkit-text-fill-color: #061014 !important;
        -webkit-background-clip: border-box !important;
        background-clip: border-box !important;
        text-shadow: none !important;
      }

      .navbar-primary-cta:hover,
      .navbar-primary-cta:visited,
      .navbar-primary-cta:active,
      .navbar-primary-cta:focus-visible,
      body .hero-primary-cta:hover,
      body .hero-primary-cta:visited,
      body .hero-primary-cta:active,
      body .hero-primary-cta:focus-visible,
      body .startup-hub-primary:hover,
      body .startup-hub-primary:visited,
      body .startup-hub-primary:active,
      body .startup-hub-primary:focus-visible,
      body .subscribe-btn:hover,
      body .subscribe-btn:visited,
      body .subscribe-btn:active,
      body .subscribe-btn:focus-visible,
      body .dashboard-feed-button:hover,
      body .dashboard-feed-button:visited,
      body .dashboard-feed-button:active,
      body .dashboard-feed-button:focus-visible,
      body .bg-accent-blue:hover,
      body .bg-accent-blue:visited,
      body .bg-accent-blue:active,
      body .bg-accent-blue:focus-visible,
      body .bg-finance-blue:hover,
      body .bg-finance-blue:visited,
      body .bg-finance-blue:active,
      body .bg-finance-blue:focus-visible,
      body .bg-blue-600:hover,
      body .bg-blue-600:visited,
      body .bg-blue-600:active,
      body .bg-blue-600:focus-visible,
      body .bg-blue-700:hover,
      body .bg-blue-700:visited,
      body .bg-blue-700:active,
      body .bg-blue-700:focus-visible,
      body .bg-emerald-500:hover,
      body .bg-emerald-500:visited,
      body .bg-emerald-500:active,
      body .bg-emerald-500:focus-visible,
      body .bg-emerald-600:hover,
      body .bg-emerald-600:visited,
      body .bg-emerald-600:active,
      body .bg-emerald-600:focus-visible,
      body .hover\:bg-blue-700:hover {
        background: linear-gradient(135deg, #00ff9c 0%, #00e5ff 100%) !important;
        background-color: #00ff9c !important;
        color: #061014 !important;
        -webkit-text-fill-color: #061014 !important;
        box-shadow:
          0 18px 42px rgba(0, 255, 156, 0.26),
          0 0 0 1px rgba(0, 229, 255, 0.55) inset !important;
      }

      .navbar-primary-cta:hover *,
      .navbar-primary-cta:visited *,
      .navbar-primary-cta:active *,
      .navbar-primary-cta:focus-visible *,
      body .hero-primary-cta:hover *,
      body .hero-primary-cta:visited *,
      body .hero-primary-cta:active *,
      body .hero-primary-cta:focus-visible *,
      body .startup-hub-primary:hover *,
      body .startup-hub-primary:visited *,
      body .startup-hub-primary:active *,
      body .startup-hub-primary:focus-visible *,
      body .subscribe-btn:hover *,
      body .subscribe-btn:visited *,
      body .subscribe-btn:active *,
      body .subscribe-btn:focus-visible *,
      body .dashboard-feed-button:hover *,
      body .dashboard-feed-button:visited *,
      body .dashboard-feed-button:active *,
      body .dashboard-feed-button:focus-visible *,
      body .bg-accent-blue:hover *,
      body .bg-accent-blue:visited *,
      body .bg-accent-blue:active *,
      body .bg-accent-blue:focus-visible *,
      body .bg-finance-blue:hover *,
      body .bg-finance-blue:visited *,
      body .bg-finance-blue:active *,
      body .bg-finance-blue:focus-visible *,
      body .bg-blue-600:hover *,
      body .bg-blue-600:visited *,
      body .bg-blue-600:active *,
      body .bg-blue-600:focus-visible *,
      body .bg-blue-700:hover *,
      body .bg-blue-700:visited *,
      body .bg-blue-700:active *,
      body .bg-blue-700:focus-visible *,
      body .bg-emerald-500:hover *,
      body .bg-emerald-500:visited *,
      body .bg-emerald-500:active *,
      body .bg-emerald-500:focus-visible *,
      body .bg-emerald-600:hover *,
      body .bg-emerald-600:visited *,
      body .bg-emerald-600:active *,
      body .bg-emerald-600:focus-visible *,
      body .hover\:bg-blue-700:hover * {
        color: #061014 !important;
        -webkit-text-fill-color: #061014 !important;
        -webkit-background-clip: border-box !important;
        background-clip: border-box !important;
        text-shadow: none !important;
      }

      body .bg-accent-blue.text-white,
      body .bg-finance-blue.text-white,
      body .bg-blue-600.text-white,
      body .bg-blue-700.text-white,
      body .bg-emerald-500.text-white,
      body .bg-emerald-600.text-white,
      body .bg-accent-blue .text-white,
      body .bg-finance-blue .text-white,
      body .bg-blue-600 .text-white,
      body .bg-blue-700 .text-white,
      body .bg-emerald-500 .text-white,
      body .bg-emerald-600 .text-white {
        color: #061014 !important;
        -webkit-text-fill-color: #061014 !important;
        text-shadow: none !important;
      }

      body .text-finance-blue,
      body .text-accent-blue,
      body .text-blue-600,
      body .text-blue-700,
      body .text-blue-400,
      body [class~="text-sky-700/80"],
      body .text-sky-700,
      body .text-sky-800,
      body .group:hover .group-hover\:text-accent-blue {
        color: #00e5ff !important;
      }

      body .focus\:ring-accent-blue:focus {
        --tw-ring-color: #00e5ff;
      }

      body .focus\:ring-accent-blue\/10:focus {
        --tw-ring-color: rgba(0, 229, 255, 0.16);
      }

      .section-eyebrow {
        background: rgba(0, 229, 255, 0.11);
        color: #d8fffb;
        border-color: rgba(0, 229, 255, 0.42);
        box-shadow: 0 0 26px rgba(0, 229, 255, 0.12);
      }

      .section-eyebrow::before {
        background: linear-gradient(135deg, #00e5ff 0%, #00ff9c 100%);
        box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.16), 0 0 18px rgba(0, 255, 156, 0.44);
      }

      /* High-contrast navigation CTA: dark brand surface, light label. */
      .navbar-primary-cta,
      .navbar-primary-cta:hover,
      .navbar-primary-cta:visited,
      .navbar-primary-cta:active,
      .navbar-primary-cta:focus-visible {
        background: #102c35 !important;
        background-color: #102c35 !important;
        border: 1px solid rgba(0, 255, 156, 0.78) !important;
        color: #f0f6fc !important;
        -webkit-text-fill-color: #f0f6fc !important;
        font-weight: 800 !important;
        letter-spacing: 0.01em;
        text-shadow: none !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32), 0 0 18px rgba(0, 255, 156, 0.16) !important;
      }

      .navbar-primary-cta:hover,
      .navbar-primary-cta:focus-visible {
        background: #16424a !important;
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38), 0 0 22px rgba(0, 255, 156, 0.28) !important;
      }

      .navbar-primary-cta {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        padding-inline: 1.1rem !important;
        background: linear-gradient(115deg, #0b2528 0%, #103b31 55%, #0b2528 100%) !important;
        background-size: 180% 100% !important;
        animation: navbar-trial-shimmer 4s ease-in-out infinite;
      }

      .navbar-primary-cta::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: 50%;
        left: 0.6rem;
        width: 0.38rem;
        height: 0.38rem;
        border-radius: 999px;
        background: #00ff9c;
        box-shadow: 0 0 0 4px rgba(0, 255, 156, 0.12), 0 0 16px rgba(0, 255, 156, 0.82);
        transform: translateY(-50%);
      }

      .navbar-primary-cta::after {
        content: "↗";
        display: inline-block;
        margin-inline-start: 0.45rem;
        color: #00ff9c;
        font-size: 1rem;
        line-height: 1;
        transition: transform 180ms ease;
      }

      .navbar-primary-cta:hover::after,
      .navbar-primary-cta:focus-visible::after {
        transform: translate(0.13rem, -0.13rem);
      }

      @keyframes navbar-trial-shimmer {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
      }

      /* Match the high-visibility homepage trial action in the navbar. */
      .navbar-primary-cta,
      .navbar-primary-cta:hover,
      .navbar-primary-cta:visited,
      .navbar-primary-cta:active,
      .navbar-primary-cta:focus-visible {
        min-width: 12.75rem;
        padding-inline: 1.15rem 3.35rem !important;
        background: linear-gradient(115deg, #49dceb 0%, #14e1ca 46%, #00e99f 100%) !important;
        border: 1px solid rgba(224, 255, 250, 0.7) !important;
        color: #04151a !important;
        -webkit-text-fill-color: #04151a !important;
        animation: none !important;
        box-shadow: 0 12px 30px rgba(0, 229, 255, 0.25), 0 0 0 1px rgba(0, 255, 156, 0.34) inset !important;
      }

      .navbar-primary-cta::before {
        left: auto;
        right: 0.48rem;
        z-index: 0;
        width: 2.15rem;
        height: 2.15rem;
        background: rgba(3, 103, 102, 0.16);
        border: 1px solid rgba(3, 103, 102, 0.16);
        box-shadow: none;
      }

      .navbar-primary-cta::after {
        position: absolute;
        z-index: 1;
        top: 50%;
        right: 1.12rem;
        margin: 0;
        color: #04151a;
        font-size: 1.25rem;
        font-weight: 900;
        transform: translateY(-50%);
      }

      .navbar-primary-cta:hover,
      .navbar-primary-cta:focus-visible {
        background: linear-gradient(115deg, #67e9f2 0%, #22edcf 46%, #11f0ad 100%) !important;
        box-shadow: 0 16px 36px rgba(0, 229, 255, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.52) inset !important;
      }

      .navbar-primary-cta:hover::after,
      .navbar-primary-cta:focus-visible::after {
        transform: translate(0.12rem, -50%);
      }