:root {
        --bg-body: #0b0b0b;
        --bg-panel: rgba(255, 255, 255, 0.045);
        /* Raised surface: opaque, one step above the body. Modals/drawers use it
           so they read as elevated (and stay readable over the blurred backdrop). */
        --bg-raised: #151515;
        --bg-sidebar: #0b0b0b;
        --bg-input: #0e0e0e;
        --bg-hover: rgba(255, 255, 255, 0.045);
        --bg-active: rgba(245, 180, 0, 0.11);
        --sidebar-hover-bg: rgba(255, 255, 255, 0.055);
        --sidebar-active-bg: rgba(245, 180, 0, 0.14);
        --sidebar-active-text: #ffffff;
        --sidebar-active-icon-bg: rgba(245, 180, 0, 0.10);
        --sidebar-active-dot: #f5b400;
        --select-trigger-bg: #101010;
        --select-menu-bg: #141414;
        --select-menu-border: rgba(245, 180, 0, 0.22);
        --select-menu-shadow: none;
        --select-option-active-bg: rgba(245, 180, 0, 0.13);
        --text-primary: #ffffff;
        --text-secondary: rgba(232, 241, 247, 0.72);
        --text-muted: rgba(232, 241, 247, 0.62);
        --border-color: rgba(255, 255, 255, 0.105);
        --accent-color: #f5b400;
        --accent-hover: #ffc533;
        --accent-alt: #c98a00;
        --accent-blue: #f5b400;
        --accent-warning: #f59e0b;
        --accent-danger: #ef4444;
        --radius-sm: 6px;
        --radius-md: 8px;
        --radius-lg: 10px;
        --shadow-panel: none;
        --panel-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.055), 0 12px 28px rgba(0, 0, 0, 0.24);
        /* Semantic surface/border/text tokens (Glass: dark keeps translucent look) */
        --glass-03: rgba(255, 255, 255, 0.03);
        --glass-06: rgba(255, 255, 255, 0.06);
        --hairline-07: rgba(255, 255, 255, 0.07);
        --hairline-08: rgba(255, 255, 255, 0.08);
        --tx-muted-35: rgba(255, 255, 255, 0.35);
        --tx-sec-55: rgba(255, 255, 255, 0.55);
        /* Status colors (dark). Light values overridden in body.light-mode below.
           Using these tokens instead of raw hex lets the theme switch without the
           body.light-mode [style*="color:#..."] override hacks further down. */
        --status-success: #3ecf8e;
        --status-warning: #feb019;
        --status-danger: #ff4560;
        --status-info: #f5b400;
        --status-purple: #f5b400;
        /* Badge tint/border strength per theme. Light bumps these to fight wash-out. */
        --badge-tint: 12%;
        --badge-bd: 20%;
        /* Semantic z-index scale. Never use arbitrary 9999/200000 again. */
        --z-dropdown: 4000;
        --z-drawer: 5000;
        --z-modal: 6000;
        --z-toast: 7000;
        /* Type scale (rem-based so it respects the user's browser font size).
           Base = 16px. 13px floor on body text for legibility/accessibility.
           Replaces the raw 11/12px numeric fontSize values scattered in js_dist. */
        --text-xs: 0.8125rem; /* 13px - body/table floor (was 11/12) */
        --text-sm: 0.875rem; /* 14px - default body */
        --text-base: 0.9375rem; /* 15px - emphasised body */
        --text-md: 1rem; /* 16px - section labels */
        --text-lg: 1.125rem; /* 18px */
        --text-xl: 1.375rem; /* 22px */
        --text-2xl: 1.625rem; /* 26px - page/KPI headings */
        --line-tight: 1.25;
        --line-normal: 1.5;
        /* Spacing scale (4px base). Use instead of raw padding/gap/margin numbers
           so vertical rhythm stays consistent and the theme is maintainable. */
        --space-1: 4px;
        --space-2: 8px;
        --space-3: 12px;
        --space-4: 16px;
        --space-5: 20px;
        --space-6: 24px;
        --space-8: 32px;
        --space-10: 40px;
      }

      /* body.light-mode removed for performance - SPA is dark-only */

      /* Light Mode Font Rendering & Contrast Polish */
      body.light-mode,
      body.light-mode button,
      body.light-mode input,
      body.light-mode textarea,
      body.light-mode select {
        -webkit-font-smoothing: subpixel-antialiased !important;
        -moz-osx-font-smoothing: auto !important;
        text-rendering: optimizeLegibility !important;
      }

      /* Premium Typography & Spacing for Light Mode */
      body.light-mode h1,
      body.light-mode h2,
      body.light-mode h3,
      body.light-mode h4,
      body.light-mode h5,
      body.light-mode h6 {
        font-weight: 700 !important;
        color: #090d16 !important;
        letter-spacing: -0.025em !important;
      }

      body.light-mode table th {
        font-weight: 700 !important;
        color: #334155 !important;
        letter-spacing: 0.05em !important;
        background: #f8fafc !important;
      }

      body.light-mode table td {
        font-weight: 500 !important;
        color: #111827 !important;
      }

      body.light-mode input,
      body.light-mode select,
      body.light-mode textarea {
        font-weight: 500 !important;
        color: #090d16 !important;
      }

      body.light-mode .pl-card p,
      body.light-mode .pl-stats__card p,
      body.light-mode .pl-lead,
      body.light-mode .pl-list,
      body.light-mode .pl-textLabel,
      body.light-mode .pl-legalMeta,
      body.light-mode .pl-reviewQuote {
        font-weight: 500 !important;
      }

      /* Prevent faded texts inside dashboard cards/panels */
      body.light-mode
        :where(.dashboard-page, .content-area, main, section, article)
        [style*="var(--text-"],
      body.light-mode
        :where(.dashboard-page, .content-area, main, section, article)
        [style*="color:"] {
        opacity: 1 !important;
        text-shadow: none !important;
      }

      /* Light-mode neon-remap hacks removed. Status colors now use the
         --status-success / --status-warning / --status-danger / --status-info
         tokens (defined in :root with accessible light values in body.light-mode),
         so the theme switches cleanly without [style*="color:#..."] !important
         overrides. Inline usages were migrated to var(--status-*) and
         rgb(from var(--status-*) r g b / a). */

      /* Login button text stays dark on accent background */
      body.light-mode .login-btn {
        color: #ffffff !important;
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        background: var(--bg-body);
        color: var(--text-primary);
        font-family:
          "DM Sans",
          -apple-system,
          sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        overflow-x: hidden;
        transition:
          background 0.3s,
          color 0.3s;
      }

      button,
      input,
      textarea,
      select {
        font: inherit;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
      }

      ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }

      /* Sidebar nav: scroll funcional mas sem barra vis�vel */
      .ps-sidebar-nav {
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .ps-sidebar-nav::-webkit-scrollbar {
        display: none;
      }

      ::-webkit-scrollbar-track {
        background: transparent;
      }

      ::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 10px;
      }

      ::-webkit-scrollbar-thumb:hover {
        background: var(--text-muted);
      }

      ::selection {
        background: var(--bg-active);
        color: var(--text-primary);
      }

      input,
      button,
      select {
        font-family: inherit;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      /* Typography: even heading line-breaks, fewer prose orphans. */
      h1,
      h2,
      h3 {
        text-wrap: balance;
      }

      p {
        text-wrap: pretty;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-muted);
        padding: 12px 14px;
        text-align: left;
        vertical-align: middle;
        line-height: 1.25;
        font-weight: 600;
        border-bottom: 1px solid var(--border-color);
      }

      td {
        font-size: 13px;
        padding: 12px 14px;
        vertical-align: middle;
        line-height: 1.35;
        border-bottom: 1px solid var(--border-color);
        color: var(--text-secondary);
        /* Constant-width digits so numeric columns line up cleanly. */
        font-variant-numeric: tabular-nums;
      }

      tr:hover td {
        background: var(--bg-hover);
      }

      /* Skeleton loading placeholders (shared by ServerTable and any list/card
         that loads async). Shimmer respects reduced-motion and the light theme. */
      @keyframes plShimmer {
        0% {
          background-position: -200% 0;
        }
        100% {
          background-position: 200% 0;
        }
      }
      .pl-skeleton {
        background: linear-gradient(
          90deg,
          var(--glass-06) 25%,
          var(--glass-03) 37%,
          var(--glass-06) 63%
        );
        background-size: 200% 100%;
        animation: plShimmer 1.4s ease-in-out infinite;
        border-radius: 4px;
      }
      body.light-mode .pl-skeleton {
        background: linear-gradient(
          90deg,
          #e7edea 25%,
          #f2f6f4 37%,
          #e7edea 63%
        );
        background-size: 200% 100%;
      }
      @media (prefers-reduced-motion: reduce) {
        .pl-skeleton {
          animation: none;
        }
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(6px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes slideIn {
        from {
          transform: translateX(100%);
          opacity: 0;
        }

        to {
          transform: translateX(0);
          opacity: 1;
        }
      }

      @keyframes pulseGlow {
        0%,
        100% {
          opacity: 0.9;
        }

        50% {
          opacity: 1;
        }
      }

      .fade-in {
        animation: fadeIn 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
        will-change: opacity, transform;
      }

      .fade-in > * {
        animation: fadeIn 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
      }

      .fade-in > *:nth-child(1) {
        animation-delay: 0ms;
      }

      .fade-in > *:nth-child(2) {
        animation-delay: 45ms;
      }

      .fade-in > *:nth-child(3) {
        animation-delay: 90ms;
      }

      .fade-in > *:nth-child(4) {
        animation-delay: 135ms;
      }

      .fade-in > *:nth-child(n + 5) {
        animation-delay: 170ms;
      }

      @keyframes modalSpringEnter {
        0% {
          opacity: 0;
          transform: scale(0.96) translateY(8px);
        }
        100% {
          opacity: 1;
          transform: scale(1) translateY(0);
        }
      }

      .drawer-enter, .modal-enter {
        animation: modalSpringEnter 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
      }

      @keyframes dashSpringEnter {
        0% {
          opacity: 0;
          transform: translateY(8px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes dashRowEnter {
        from {
          opacity: 0;
          transform: translateY(6px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes dashValuePop {
        0% {
          opacity: 0;
          transform: translateY(3px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes dashBarGrow {
        from {
          transform: scaleX(0);
        }
        to {
          transform: scaleX(1);
        }
      }

      @keyframes dashSoftPulse {
        0%,
        100% {
          transform: scale(1);
          opacity: 0.9;
        }
        50% {
          transform: scale(1.04);
          opacity: 1;
        }
      }

      .dash-motion-card {
        position: relative;
        overflow: hidden;
        opacity: 1;
        transition:
          transform 0.18s ease,
          border-color 0.18s ease,
          background-color 0.18s ease,
          box-shadow 0.18s ease;
      }

      .dash-motion-card:hover {
        transform: translateY(-2px) !important;
        border-color: rgba(245, 180, 0, 0.42);
      }

      .dash-motion-value {
        font-variant-numeric: tabular-nums;
      }

      .dash-icon-breath {
        animation: none;
      }

      .dash-motion-fill {
        transform-origin: left center;
        transform: scaleX(0);
        animation: dashBarGrow 0.64s cubic-bezier(0.2, 0.8, 0.2, 1) both;
        animation-delay: calc(var(--dash-delay, 0ms) + 150ms);
        transition: transform 0.24s ease;
      }

      .dash-motion-row {
        opacity: 0;
        animation: dashRowEnter 0.38s ease-out both;
        animation-delay: var(--dash-delay, 0ms);
      }

      .dash-chart-stage {
        opacity: 1;
      }

      .dash-status-card {
        animation-duration: 0.35s;
      }

      .dash-panel {
        animation-duration: 0.45s;
      }

      /* Mobile overrides */
      @media (max-width: 767px) {
        /* Ensure tables scroll horizontally on small screens */
        .table-scroll-wrap {
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
        }

        /* Larger tap targets (WCAG 2.5.5: min 44x44px) */
        button {
          min-height: 44px;
        }

        /* Prevent text size adjustment on iOS */
        body {
          -webkit-text-size-adjust: 100%;
        }
      }

      @keyframes slideUp {
        from {
          transform: translateY(100%);
          opacity: 0;
        }

        to {
          transform: translateY(0);
          opacity: 1;
        }
      }

      /* Cookie banner */
      .pl-cookie {
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: 16px;
        z-index: 60;
      }

      .pl-cookie[hidden] {
        display: none !important;
      }

      .pl-cookie__inner {
        max-width: 980px;
        margin: 0 auto;
        border: 1px solid var(--border-color);
        background: rgba(10, 12, 16, 0.78);
        backdrop-filter: blur(12px);
        border-radius: 16px;
        padding: 14px 14px;
        display: flex;
        gap: 14px;
        align-items: center;
        justify-content: space-between;
      }

      body.light-mode .pl-cookie__inner {
        background: rgba(255, 255, 255, 0.88);
      }

      .pl-cookie__copy {
        min-width: 0;
      }

      .pl-cookie__title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 700;
        letter-spacing: -0.02em;
        font-size: 13px;
      }

      .pl-cookie__titleIcon {
        width: 28px;
        height: 28px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(245, 180, 0, 0.08);
        border: 1px solid rgba(245, 180, 0, 0.18);
        color: rgba(245, 180, 0, 0.92);
        flex: 0 0 auto;
      }

      .pl-cookie__text {
        margin-top: 4px;
        color: var(--text-secondary);
        font-size: 12px;
        line-height: 1.5;
        max-width: 96ch;
      }

      .pl-cookie__links {
        margin-top: 6px;
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 600;
      }

      .pl-cookie__links a {
        color: rgba(255, 255, 255, 0.55);
        text-decoration: none;
      }

      body.light-mode .pl-cookie__links a {
        color: rgba(13, 13, 13, 0.6);
      }

      .pl-cookie__links a:hover {
        text-decoration: underline;
      }

      .pl-cookie__actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
        flex: 0 0 auto;
      }

      .pl-cookie__btn {
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.03);
        color: var(--text-primary);
        font-weight: 700;
        font-size: 13px;
        padding: 10px 14px;
        cursor: pointer;
        transition:
          transform 0.12s ease,
          opacity 0.12s ease,
          background 0.12s ease;
      }

      body.light-mode .pl-cookie__btn {
        border-color: rgba(0, 0, 0, 0.1);
        background: rgba(0, 0, 0, 0.04);
      }

      .pl-cookie__btn:hover {
        background: rgba(255, 255, 255, 0.05);
      }

      body.light-mode .pl-cookie__btn:hover {
        background: rgba(0, 0, 0, 0.06);
      }

      .pl-cookie__btn:active {
        transform: translateY(1px);
      }

      .pl-cookie__btn--primary {
        border: none;
        background: linear-gradient(135deg, #193b33, #193b33);
        color: #ffffff;
      }

      .pl-cookie__btn--ghost {
        background: transparent;
      }

      /* Light mode hardening: neutral surfaces, dark readable text, visible structure. */
      body.light-mode {
        color-scheme: light;
      }

      body.light-mode input,
      body.light-mode textarea,
      body.light-mode select {
        background: var(--bg-panel) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
      }

      body.light-mode input::placeholder,
      body.light-mode textarea::placeholder {
        color: var(--text-muted) !important;
        opacity: 1;
      }

      body.light-mode table {
        color: var(--text-primary) !important;
      }

      body.light-mode th {
        color: var(--text-secondary) !important;
        border-bottom-color: var(--border-color) !important;
        background: var(--bg-hover) !important;
      }

      body.light-mode td {
        color: var(--text-secondary) !important;
        border-bottom-color: var(--border-color) !important;
      }

      body.light-mode tr:hover td {
        background: #f1f5f9 !important;
      }

      body.light-mode .pl-cookie__inner,
      body.light-mode .pl-mobilemenu__panel,
      body.light-mode .reg-dropdown,
      body.light-mode .reg-ct-dd {
        background: var(--bg-panel) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
      }

      body.light-mode .reg-dd-item,
      body.light-mode .reg-dd-item:hover {
        color: var(--text-primary) !important;
      }

      /* Surface override removed: now handled by --glass-* tokens */

      /* Text overrides removed: now handled by --tx-muted-35 / --tx-sec-55 tokens */

      /* Border override removed: now handled by --hairline-* tokens */

      body.light-mode .pl-section-header-icon {
        background: #f1f5f9 !important;
        border: 1px solid #dbe3ee !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
      }

      body.light-mode .pl-section-header-icon svg,
      body.light-mode .pl-section-header-icon i {
        color: #475569 !important;
        stroke: #475569 !important;
      }

      body.light-mode .pl-ui-btn--primary {
        background: var(--accent-color) !important;
        border: 1px solid var(--accent-color) !important;
        color: #ffffff !important;
        box-shadow: 0 8px 18px rgba(245, 180, 0, 0.18) !important;
      }

      body.light-mode .pl-ui-btn--primary:hover {
        background: var(--accent-hover) !important;
        border-color: var(--accent-hover) !important;
        color: #ffffff !important;
      }

      body.light-mode .pl-ui-btn--primary svg,
      body.light-mode .pl-ui-btn--primary i {
        color: #ffffff !important;
        stroke: #ffffff !important;
      }

      body.light-mode .pl-ui-btn:not(.pl-ui-btn--primary) {
        background: #ffffff !important;
        border-color: #cbd5e1 !important;
        color: #1f2937 !important;
      }

      .pl-ui-btn--primary:hover,
      .pl-btn--primary:hover {
        background: var(--accent-hover, #ffc533) !important;
        border-color: var(--accent-hover, #ffc533) !important;
        color: #ffffff !important;
      }

      .pl-ui-btn--primary svg,
      .pl-ui-btn--primary i,
      .pl-btn--primary svg,
      .pl-btn--primary i {
        color: #ffffff !important;
        stroke: #ffffff !important;
      }

      .pl-filter-chip {
        color: var(--text-primary) !important;
      }

      .pl-filter-chip svg,
      .pl-filter-chip i {
        color: var(--text-primary) !important;
        stroke: var(--text-primary) !important;
      }

      body.light-mode .pl-filter-chip {
        color: #0f172a !important;
      }

      body.light-mode .pl-filter-chip svg,
      body.light-mode .pl-filter-chip i {
        color: #0f172a !important;
        stroke: #0f172a !important;
      }

      /* Admin light mode: force table/funnel copy to dark ink, while dark mode remains untouched. */
      body.light-mode table th,
      body.light-mode table td {
        color: #0f172a !important;
      }

      body.light-mode table th :where(span, div, code, strong, small, a),
      body.light-mode table td :where(span, div, code, strong, small, a) {
        color: #0f172a !important;
      }

      body.light-mode table td span[style*="background"],
      body.light-mode table td code {
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        color: #0f172a !important;
      }

      body.light-mode .pl-conversion-funnel,
      body.light-mode .pl-conversion-funnel span,
      body.light-mode .pl-conversion-funnel div {
        color: #0f172a !important;
      }

      body.light-mode .pl-footer,
      body.light-mode .pl-footer__bottom,
      body.light-mode .pl-footer__meta,
      body.light-mode .pl-footer__col h4,
      body.light-mode .pl-footer__link,
      body.light-mode .pl-footer__simpleLinks .pl-footer__link,
      body.light-mode .pl-footer__simpleCopy {
        color: var(--text-secondary) !important;
        border-color: var(--border-color) !important;
      }

      body.light-mode .pl-footer {
        background: linear-gradient(
          180deg,
          rgba(245, 247, 250, 0),
          rgba(255, 255, 255, 0.92)
        ) !important;
      }

      body.light-mode .pl-card,
      body.light-mode .pl-stats__card,
      body.light-mode .pl-whyus__card,
      body.light-mode .pl-teamCard,
      body.light-mode .pl-markets__card,
      body.light-mode .pl-faq__item,
      body.light-mode .pl-advantage__card,
      body.light-mode .pl-copyBtn,
      body.light-mode .pl-btn,
      body.light-mode .pl-nav {
        background: var(--bg-panel) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
      }

      body.light-mode .pl-navlink,
      body.light-mode .pl-card p,
      body.light-mode .pl-lead,
      body.light-mode .pl-list,
      body.light-mode .pl-textLabel,
      body.light-mode .pl-legalMeta,
      body.light-mode .pl-reviewQuote {
        color: var(--text-secondary) !important;
      }

      body.light-mode
        :where(.dashboard-page, .content-area, main, section, article)
        [style*="var(--text-secondary)"],
      body.light-mode
        :where(.dashboard-page, .content-area, main, section, article)
        [style*="var(--text-muted)"] {
        opacity: 1 !important;
        text-shadow: none !important;
      }

      body.light-mode .pl-navlink:hover,
      body.light-mode .pl-navlink--active,
      body.light-mode .pl-faq__q:hover {
        background: var(--bg-hover) !important;
        color: var(--text-primary) !important;
      }

      @media (max-width: 720px) {
        .pl-cookie__inner {
          flex-direction: column;
          align-items: stretch;
        }

        .pl-cookie__actions {
          justify-content: stretch;
        }

        .pl-cookie__btn {
          width: 100%;
        }
      }

      /* Dashboard background (only when logged in) */
      .pl-dashboard-vanta {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(
          180deg,
          #0b0b0b 0%,
          #070707 54%,
          #050505 100%
        );
        filter: none;
      }

      body.light-mode .pl-dashboard-vanta {
        background: linear-gradient(180deg, #050505 0%, #070707 100%);
        filter: none;
      }

      .pl-dashboard-vanta .vanta-canvas,
      .pl-dashboard-vanta canvas {
        pointer-events: none;
      }

      /* Boot loader (BlinkBlur-inspired) */
      #root {
        transition:
          opacity 0.25s ease,
          transform 0.25s ease;
      }

      body.pl-booting {
        overflow: hidden;
      }

      body.pl-booting #root {
        opacity: 0;
        transform: translateY(6px);
        pointer-events: none;
      }

      .pl-boot {
        position: fixed;
        inset: 0;
        z-index: 30000;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
          radial-gradient(
            820px 520px at 50% 12%,
            rgba(245, 180, 0, 0.08),
            transparent 62%
          ),
          linear-gradient(180deg, var(--bg-body) 0%, var(--bg-body) 100%);
      }

      body.light-mode .pl-boot {
        background:
          radial-gradient(
            820px 520px at 50% 12%,
            rgba(245, 180, 0, 0.08),
            transparent 62%
          ),
          linear-gradient(180deg, var(--bg-body) 0%, var(--bg-body) 100%);
      }

      .pl-boot.pl-boot--hide {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
      }

      /* Cube loader (Uiverse by codingzemigle) */
      .loader {
        width: auto;
        height: auto;
        border: 0;
        border-radius: 0;
        background: none;
        display: grid;
        grid-template-columns: repeat(2, 50px);
        grid-template-rows: repeat(2, 50px);
        gap: 30px;
        perspective: 1000px;
        animation: none;
      }

      .loader .pl-cube {
        width: 50px;
        height: 50px;
        background-color: var(--accent-color, #ffc01d);
        border-radius: 5px;
        transform-style: preserve-3d;
        animation: plCubeRotate 1.8s cubic-bezier(0.68, -0.55, 0.27, 1.55)
          infinite;
      }

      .loader .pl-cube:nth-child(1) {
        animation-delay: 0s;
      }
      .loader .pl-cube:nth-child(2) {
        animation-delay: 0.2s;
      }
      .loader .pl-cube:nth-child(3) {
        animation-delay: 0.4s;
      }
      .loader .pl-cube:nth-child(4) {
        animation-delay: 0.6s;
      }

      @keyframes plCubeRotate {
        0% {
          transform: rotateX(0deg) rotateY(0deg);
        }
        100% {
          transform: rotateX(360deg) rotateY(360deg);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        #root {
          transition: none;
        }

        .pl-boot,
        .pl-boot.pl-boot--hide {
          transition: none;
        }

        .loader .pl-cube {
          animation: none;
        }

        .dash-motion-card,
        .dash-motion-card:hover::after,
        .dash-motion-value,
        .dash-icon-breath,
        .dash-motion-fill,
        .dash-motion-row,
        .dash-chart-stage,
        .fade-in,
        .fade-in > * {
          animation: none !important;
          transition: none !important;
          transform: none !important;
          filter: none !important;
        }
      }

      /* Scroll Reveal Animations */
      .pl-reveal {
        opacity: 0 !important;
        transform: translateY(48px);
        transition:
          opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
          transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
          filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: opacity, transform, filter;
      }

      .pl-reveal.pl-reveal--in {
        opacity: 1 !important;
        transform: translateY(0) translateX(0) scale(1) perspective(800px)
          rotateY(0deg) !important;
        filter: blur(0) !important;
      }

      .pl-reveal[data-reveal-dir="left"] {
        transform: translateX(-80px);
      }

      .pl-reveal[data-reveal-dir="right"] {
        transform: translateX(80px);
      }

      .pl-reveal[data-reveal-dir="up"] {
        transform: translateY(48px);
      }

      .pl-reveal[data-reveal-dir="down"] {
        transform: translateY(-48px);
      }

      .pl-reveal[data-reveal-dir="scale"] {
        transform: scale(0.8);
      }

      .pl-reveal[data-reveal-dir="blur"] {
        filter: blur(12px);
        transform: translateY(20px);
      }

      .pl-reveal[data-reveal-dir="zoom"] {
        transform: scale(0.7);
        filter: blur(6px);
      }

      .pl-reveal[data-reveal-dir="flip"] {
        transform: perspective(800px) rotateY(15deg) translateX(-40px);
      }

      .pl-reveal[data-reveal-dir="slide-up"] {
        transform: translateY(100px);
      }

      /* Stagger children inside grids */
      .pl-grid > .pl-reveal:nth-child(1),
      .pl-whyus__cards > .pl-reveal:nth-child(1),
      .pl-advantage__grid > .pl-reveal:nth-child(1),
      .pl-faq > .pl-reveal:nth-child(1),
      .pl-stats__grid > .pl-reveal:nth-child(1),
      .pl-mini > .pl-reveal:nth-child(1) {
        transition-delay: 0ms !important;
      }

      .pl-grid > .pl-reveal:nth-child(2),
      .pl-whyus__cards > .pl-reveal:nth-child(2),
      .pl-advantage__grid > .pl-reveal:nth-child(2),
      .pl-faq > .pl-reveal:nth-child(2),
      .pl-stats__grid > .pl-reveal:nth-child(2),
      .pl-mini > .pl-reveal:nth-child(2) {
        transition-delay: 100ms !important;
      }

      .pl-grid > .pl-reveal:nth-child(3),
      .pl-whyus__cards > .pl-reveal:nth-child(3),
      .pl-advantage__grid > .pl-reveal:nth-child(3),
      .pl-faq > .pl-reveal:nth-child(3),
      .pl-stats__grid > .pl-reveal:nth-child(3),
      .pl-mini > .pl-reveal:nth-child(3) {
        transition-delay: 200ms !important;
      }

      .pl-grid > .pl-reveal:nth-child(4),
      .pl-faq > .pl-reveal:nth-child(4) {
        transition-delay: 300ms !important;
      }

      .pl-grid > .pl-reveal:nth-child(5),
      .pl-faq > .pl-reveal:nth-child(5) {
        transition-delay: 400ms !important;
      }

      .pl-grid > .pl-reveal:nth-child(6),
      .pl-faq > .pl-reveal:nth-child(6) {
        transition-delay: 500ms !important;
      }

      .pl-grid > .pl-reveal:nth-child(7),
      .pl-faq > .pl-reveal:nth-child(7) {
        transition-delay: 550ms !important;
      }

      .pl-grid > .pl-reveal:nth-child(8),
      .pl-faq > .pl-reveal:nth-child(8) {
        transition-delay: 600ms !important;
      }

      .pl-grid > .pl-reveal:nth-child(9),
      .pl-faq > .pl-reveal:nth-child(9) {
        transition-delay: 650ms !important;
      }

      .pl-grid > .pl-reveal:nth-child(n + 10) {
        transition-delay: 700ms !important;
      }

      /* Register / Login form enhancements */
      select option {
        background: var(--bg-panel, #1a1d24);
        color: var(--text-primary, #e8e8e8);
      }

      select:focus {
        border-color: var(--accent-color) !important;
      }

      @media (max-width: 600px) {
        .reg-grid-2 {
          grid-template-columns: 1fr !important;
        }
      }

      /* Commissions Section */
      .pl-commissions {
        padding: 80px 0;
        background: var(--bg-body);
      }

      .pl-commissions__header {
        text-align: center;
        margin-bottom: 48px;
      }

      .pl-commissions__eyebrow {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--accent-color);
        font-weight: 700;
        margin-bottom: 12px;
      }

      .pl-commissions__title {
        font-size: 36px;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--text-primary);
        margin-bottom: 12px;
      }

      .pl-commissions__subtitle {
        font-size: 16px;
        color: var(--text-secondary);
        max-width: 600px;
        margin: 0 auto;
      }

      .pl-commissions__cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-bottom: 48px;
      }

      .pl-commissions__card {
        background: var(--bg-panel);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 32px 24px;
        text-align: center;
        transition:
          transform 0.2s ease,
          border-color 0.2s ease,
          background 0.2s ease;
      }

      .pl-commissions__card:hover {
        transform: translateY(-2px);
        border-color: rgba(245, 180, 0, 0.28);
      }

      .pl-commissions__cardTitle {
        font-size: 18px;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 16px;
      }

      .pl-commissions__label {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-muted);
        margin-bottom: 8px;
      }

      .pl-commissions__value {
        font-size: 42px;
        font-weight: 700;
        color: var(--accent-color);
        letter-spacing: -0.02em;
        margin-bottom: 16px;
        line-height: 1;
      }

      .pl-commissions__desc {
        font-size: 14px;
        color: var(--text-secondary);
        line-height: 1.6;
      }

      .pl-commissions__traffic {
        background: var(--bg-panel);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 24px;
      }

      .pl-commissions__trafficTitle {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 16px;
        text-align: center;
      }

      .pl-commissions__trafficTags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        align-items: center;
      }

      .pl-commissions__tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        background: rgba(245, 180, 0, 0.08);
        border: 1px solid rgba(245, 180, 0, 0.18);
        border-radius: 8px;
        font-size: 13px;
        font-weight: 700;
        color: var(--text-primary);
        transition: all 0.2s ease;
      }

      .pl-commissions__tag:hover {
        background: rgba(245, 180, 0, 0.12);
        border-color: rgba(245, 180, 0, 0.3);
      }

      .pl-commissions__tagIcon {
        width: 16px;
        height: 16px;
        color: var(--accent-color);
      }

      @media (max-width: 992px) {
        .pl-commissions__cards {
          grid-template-columns: 1fr;
          gap: 16px;
        }

        .pl-commissions__title {
          font-size: 28px;
        }

        .pl-commissions__value {
          font-size: 36px;
        }
      }

      /* Market flags border-radius */
      .pl-markets__cardHead .fi {
        border-radius: 20%;
      }

      /* Broader selector for all flag icons */
      .fi {
        border-radius: 20% !important;
      }

      /* Tier 2: accessible keyboard focus rings (keyboard only, mouse clicks stay clean) */
      :where(
        button,
        [role="button"],
        .pl-btn,
        .pl-ui-btn,
        a,
        summary,
        [tabindex="0"]
      ):focus-visible {
        outline: 2px solid var(--accent-hover);
        outline-offset: 2px;
      }

      :where(input, textarea, select):focus-visible,
      :where(input, textarea, select):focus {
        box-shadow: 0 0 0 3px rgba(245, 180, 0, 0.10);
      }

      body.light-mode :where(input, textarea, select):focus-visible,
      body.light-mode :where(input, textarea, select):focus {
        box-shadow: 0 0 0 3px rgba(245, 180, 0, 0.08);
      }

      :where(button, [role="button"], .pl-btn, .pl-ui-btn):focus:not(
          :focus-visible
        ) {
        outline: none;
      }

/* ── Dashboard card reveal/zoom on page mount (matches the public site's reveal).
   Pure CSS: the keyframe runs once when the page (and its cards) mount, and does
   NOT replay on in-place data refresh. Off for reduced-motion. ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes psCardIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
  .psdash .kpi,
  .psdash .dash-kpi-card,
  .psdash .dash-status-card,
  .psdash .dash-scope-card,
  .psdash .dash-panel,
  .psdash .dash-motion-card,
  .pl-main .kpi,
  .pl-main .card,
  .pl-main .panel {
    animation: psCardIn .55s cubic-bezier(.22, 1, .36, 1) both;
  }
  /* staggered cascade for the KPI grid (known-safe: fixed widget count, not table rows) */
  .psdash .dash-stagger-grid > * { animation: psCardIn .55s cubic-bezier(.22, 1, .36, 1) both; }
  .psdash .dash-stagger-grid > *:nth-child(2) { animation-delay: .06s; }
  .psdash .dash-stagger-grid > *:nth-child(3) { animation-delay: .12s; }
  .psdash .dash-stagger-grid > *:nth-child(4) { animation-delay: .18s; }
  .psdash .dash-stagger-grid > *:nth-child(5) { animation-delay: .24s; }
  .psdash .dash-stagger-grid > *:nth-child(6) { animation-delay: .30s; }
  .psdash .dash-stagger-grid > *:nth-child(n+7) { animation-delay: .36s; }
}