@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

/*
 * Product foundation only.
 * Page components own their light and dark appearance in their page CSS.
 */

:root {
    color-scheme: light;

    --pm-green: #18c974;
    --pm-green-hover: #21d17d;
    --pm-green-pressed: #12ad64;
    --pm-green-soft: rgba(24, 201, 116, .11);
    --pm-green-soft-hover: rgba(24, 201, 116, .16);
    --pm-green-border: rgba(24, 201, 116, .28);

    --pm-red: #e44f55;
    --pm-red-hover: #ea6065;
    --pm-red-soft: rgba(228, 79, 85, .10);
    --pm-red-border: rgba(228, 79, 85, .22);
    --pm-amber: #e8b341;
    --pm-blue: #4e8ee8;

    --pm-page-bg: #ffffff;
    --pm-surface: #ffffff;
    --pm-surface-subtle: #f6f7f7;
    --pm-surface-raised: #ffffff;
    --pm-surface-hover: #f3f5f4;
    --pm-control-bg: #f5f6f6;
    --pm-popover-bg: #ffffff;

    --pm-text: #171b1e;
    --pm-text-secondary: #596168;
    --pm-text-muted: #818990;
    --pm-text-disabled: #a8afb4;
    --pm-text-on-brand: #052114;

    --pm-line: rgba(20, 27, 31, .10);
    --pm-line-soft: rgba(20, 27, 31, .065);
    --pm-line-strong: rgba(20, 27, 31, .16);

    --pm-shadow-card: 0 1px 2px rgba(16, 24, 20, .025);
    --pm-shadow-popover: 0 16px 42px rgba(16, 24, 20, .13);
    --pm-shadow-modal: 0 26px 72px rgba(10, 18, 14, .20);

    --pm-radius-xs: 6px;
    --pm-radius-sm: 8px;
    --pm-radius-md: 12px;
    --pm-radius-lg: 16px;
    --pm-radius-xl: 20px;
    --pm-radius-pill: 999px;

    --pm-space-1: 4px;
    --pm-space-2: 8px;
    --pm-space-3: 12px;
    --pm-space-4: 16px;
    --pm-space-5: 20px;
    --pm-space-6: 24px;
    --pm-space-8: 32px;
    --pm-space-10: 40px;

    --pm-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --pm-font-xs: 12px;
    --pm-font-sm: 13px;
    --pm-font-md: 15px;
    --pm-font-lg: 17px;
    --pm-font-xl: 22px;
    --pm-font-2xl: 28px;
    --pm-font-3xl: 34px;

    --pm-weight-regular: 400;
    --pm-weight-medium: 500;
    --pm-weight-semibold: 600;
    --pm-weight-bold: 700;

    --pm-ease-standard: cubic-bezier(.2, .75, .2, 1);
    --pm-ease-emphasized: cubic-bezier(.16, 1, .3, 1);
    --pm-duration-fast: 120ms;
    --pm-duration-normal: 190ms;
    --pm-duration-slow: 320ms;

    --pm-shell-width: 1302px;
    --pm-shell-gutter: 32px;

    --pm-z-header: 1000;
    --pm-z-fab: 1200;
    --pm-z-widget: 8000;
    --pm-z-modal: 8500;
    --pm-z-auth: 9200;
    --pm-z-toast: 9600;

    /* Compatibility aliases used by older page styles during migration. */
    --pm-page-text: var(--pm-text);
    --pm-page-muted: var(--pm-text-secondary);
    --pm-page-soft: var(--pm-surface-subtle);
    --pm-surface-elevated: var(--pm-surface-raised);
    --pm-border: var(--pm-line);
    --pm-border-soft: var(--pm-line-soft);
    --pm-shadow-tight: var(--pm-shadow-card);
    --pm-shadow-pop: var(--pm-shadow-popover);
    --pm-green-deep: var(--pm-green-pressed);
    --pm-green-bright: var(--pm-green-hover);
}

html.is-dark,
body.is-dark {
    color-scheme: dark;

    --pm-page-bg: #121619;
    --pm-surface: #1a1f23;
    --pm-surface-subtle: #171c20;
    --pm-surface-raised: #20262b;
    --pm-surface-hover: #20262a;
    --pm-control-bg: #20262b;
    --pm-popover-bg: #22282d;

    --pm-text: #e5e8e7;
    --pm-text-secondary: #a7afad;
    --pm-text-muted: #7e8886;
    --pm-text-disabled: #5f6866;
    --pm-text-on-brand: #041b10;

    --pm-line: rgba(229, 232, 231, .075);
    --pm-line-soft: rgba(229, 232, 231, .045);
    --pm-line-strong: rgba(229, 232, 231, .13);

    --pm-shadow-card: 0 1px 0 rgba(255, 255, 255, .018);
    --pm-shadow-popover: 0 20px 48px rgba(0, 0, 0, .32);
    --pm-shadow-modal: 0 30px 86px rgba(0, 0, 0, .46);

    --pm-page-text: var(--pm-text);
    --pm-page-muted: var(--pm-text-secondary);
    --pm-page-soft: var(--pm-surface-subtle);
    --pm-surface-elevated: var(--pm-surface-raised);
    --pm-border: var(--pm-line);
    --pm-border-soft: var(--pm-line-soft);

    --pm-header-bg: rgba(18, 22, 25, .92);
    --pm-header-bg-solid: #121619;
    --pm-header-text: var(--pm-text);
    --pm-header-muted: var(--pm-text-secondary);
    --pm-header-soft: var(--pm-text-muted);
    --pm-header-line: var(--pm-line-soft);
    --pm-header-field: var(--pm-control-bg);
    --pm-header-field-hover: var(--pm-surface-raised);
    --pm-header-shadow: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--pm-page-bg);
    scrollbar-gutter: stable;
}

body {
    min-height: 100%;
    margin: 0;
    background: var(--pm-page-bg);
    color: var(--pm-text);
    font-family: var(--pm-font);
    font-size: var(--pm-font-md);
    font-weight: var(--pm-weight-regular);
    line-height: 1.45;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition: background-color var(--pm-duration-normal) ease,
                color var(--pm-duration-normal) ease,
                opacity var(--pm-duration-fast) ease;
}

button,
input,
select,
textarea {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
}

button,
[role="button"] {
    -webkit-tap-highlight-color: transparent;
}

img,
svg {
    max-width: 100%;
}

a {
    color: inherit;
}

::selection {
    background: rgba(24, 201, 116, .24);
    color: var(--pm-text);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid rgba(24, 201, 116, .62);
    outline-offset: 2px;
}

:where(.pm-header__balance-value, .amg-team-pct, .amg-mini-pct, .amg-binary-pct,
       .amg-row__pct, .amg-ring__pct, .pe-row__pct, .pe-price-box strong,
       .pp-profit-value, .pp-stat strong, .pc-balance, .rf-stats strong,
       .lb-row__metric, .payment-modal__amount-input) {
    font-variant-numeric: tabular-nums;
}

:where(.amg-section, .btc-hero, .pe-section, .pe-page, .pp-page, .pc-page,
       .ps-page, .px-page, .events-page, .payment-modal, .auth-modal,
       .support-widget) {
    font-family: inherit;
}

html.pm-shell-ready body {
    animation: pmPageReveal var(--pm-duration-slow) var(--pm-ease-emphasized) both;
}

html.pm-page-leaving body {
    opacity: .72;
    pointer-events: none;
}

@keyframes pmPageReveal {
    from { opacity: .72; }
    to { opacity: 1; }
}

.pm-back-to-top {
    position: fixed;
    right: 22px;
    bottom: 92px;
    z-index: var(--pm-z-fab);
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-radius-pill);
    background: color-mix(in srgb, var(--pm-popover-bg) 94%, transparent);
    color: var(--pm-text-secondary);
    box-shadow: var(--pm-shadow-popover);
    font-size: var(--pm-font-sm);
    font-weight: var(--pm-weight-semibold);
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px) scale(.97);
    pointer-events: none;
    transition: opacity var(--pm-duration-normal) var(--pm-ease-standard),
                transform var(--pm-duration-normal) var(--pm-ease-emphasized),
                color var(--pm-duration-fast) ease,
                border-color var(--pm-duration-fast) ease;
}

.pm-back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.pm-back-to-top:hover {
    border-color: var(--pm-green-border);
    color: var(--pm-green);
    transform: translateY(-1px);
}

@media (max-width: 760px) {
    :root {
        --pm-shell-gutter: 20px;
    }

    body { padding-bottom: 64px; }

    .pm-back-to-top {
        left: 50%;
        right: auto;
        bottom: 82px;
        transform: translateX(-50%) translateY(10px) scale(.97);
    }

    .pm-back-to-top.is-visible {
        transform: translateX(-50%) translateY(0) scale(1);
    }

    .pm-back-to-top:hover {
        transform: translateX(-50%) translateY(-1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}