/* ==========================================================================
   BotPulse V20 — premium live-streaming SaaS surface
   Loaded after botpulse.css. Design tokens, shell, controls and navigation.
   ========================================================================== */

:root {
    color-scheme: dark;
    --bp-bg: #070a18;
    --bp-bg-secondary: #0b1022;
    --bp-surface: #11182d;
    --bp-surface-raised: #17203a;
    --bp-surface-hover: #1c2743;
    --bp-primary: #7c3aed;
    --bp-primary-hover: #6d28d9;
    --bp-accent: #a78bfa;
    --bp-blue: #3b82f6;
    --bp-text: #f8fafc;
    --bp-text-muted: #a7b1c5;
    --bp-border: #26304a;
    --bp-border-strong: #34405f;
    --bp-success: #22c55e;
    --bp-warning: #f59e0b;
    --bp-error: #ef4444;
    --bp-gradient: linear-gradient(112deg, #7c3aed 0%, #6d28d9 44%, #3b82f6 100%);
    --bp-radius-card: 20px;
    --bp-radius-control: 12px;
    --bp-shadow: 0 28px 80px rgb(0 0 0 / 28%);
    --bp-shadow-soft: 0 18px 46px rgb(0 0 0 / 18%);
    --bp-container: 1240px;
    --bp-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
    background: var(--bp-bg);
    scroll-padding-top: 96px;
}

body.bp-body {
    min-width: 320px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--bp-text);
    background:
        radial-gradient(ellipse 80% 42% at 50% -12%, rgb(124 58 237 / 15%), transparent 68%),
        radial-gradient(ellipse 42% 30% at 98% 6%, rgb(59 130 246 / 8%), transparent 70%),
        linear-gradient(180deg, #080b1b 0%, var(--bp-bg) 42%, #080b19 100%);
}

body.bp-body ::selection {
    color: #fff;
    background: rgb(124 58 237 / 62%);
}

.bp-container {
    width: min(100% - 48px, var(--bp-container));
}

.bp-main {
    padding-block: 68px 104px;
}

.bp-main:has(.bp-hero) {
    padding-top: 40px;
    padding-bottom: 104px;
}

.bp-main:focus {
    outline: none;
}

.bp-skip-link {
    z-index: 200;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 12px;
    background: var(--bp-surface-raised);
}

/* ---------- Shared type and controls ---------- */

.bp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #b9a7ff;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .16em;
    line-height: 1.35;
    text-transform: uppercase;
}

.bp-eyebrow .bp-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--bp-success);
    box-shadow: 0 0 0 4px rgb(34 197 94 / 10%), 0 0 16px rgb(34 197 94 / 45%);
}

.bp-button {
    min-height: 46px;
    padding: 0 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -.01em;
    text-decoration: none;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.bp-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bp-button--primary {
    border-color: rgb(167 139 250 / 42%);
    background: var(--bp-gradient);
    box-shadow: 0 10px 30px rgb(79 70 229 / 26%), inset 0 1px 0 rgb(255 255 255 / 18%);
}

.bp-button--primary:hover {
    background: linear-gradient(112deg, #8b5cf6 0%, #7c3aed 44%, #4f8ef7 100%);
    box-shadow: 0 14px 38px rgb(79 70 229 / 34%), inset 0 1px 0 rgb(255 255 255 / 20%);
}

.bp-button--secondary {
    border-color: var(--bp-border);
    background: linear-gradient(180deg, #17203a, #11182d);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

.bp-button--secondary:hover {
    border-color: #3b4a6d;
    background: linear-gradient(180deg, #1c2743, #141d34);
}

.bp-button--quiet {
    border-color: transparent;
    background: transparent;
    color: #dbe3f2;
}

.bp-button--quiet:hover {
    border-color: var(--bp-border);
    background: rgb(28 39 67 / 55%);
}

.bp-button--lg {
    min-height: 52px;
    padding-inline: 24px;
    font-size: 14.5px;
}

.bp-button--full {
    width: 100%;
}

.bp-button[disabled],
.bp-button[aria-disabled="true"],
.bp-button.is-loading {
    cursor: wait;
    opacity: .66;
    transform: none;
    box-shadow: none;
}

.bp-button.is-loading {
    pointer-events: none;
}

.bp-text-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #c4b5fd;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}

.bp-text-link:hover {
    color: #ddd6fe;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.bp-link-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 2px;
    border: 0;
    color: #c4b5fd;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}

.bp-link-button:hover {
    color: #ede9fe;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.bp-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    color: #8390aa;
    font-size: 12px;
}

.bp-breadcrumbs a {
    color: #a7b1c5;
    text-decoration: none;
}

.bp-breadcrumbs a:hover {
    color: #fff;
}

.bp-breadcrumbs [aria-current="page"] {
    color: #dbe3f2;
}

.bp-page-heading {
    max-width: 760px;
    margin-bottom: 32px;
}

.bp-page-heading h1,
.bp-catalog-heading h1 {
    margin: 0 0 12px;
    color: var(--bp-text);
    font-family: var(--bp-font-display);
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 750;
    letter-spacing: -.045em;
    line-height: 1.08;
}

.bp-page-heading p,
.bp-catalog-heading p {
    max-width: 680px;
    margin: 0;
    color: var(--bp-text-muted);
    font-size: 15px;
    line-height: 1.65;
}

.bp-page-heading--row {
    display: flex;
    max-width: none;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.bp-page-heading__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bp-page-heading--center {
    margin-inline: auto;
    text-align: center;
}

.bp-page-heading--center p {
    margin-inline: auto;
}

.bp-catalog-heading {
    margin-bottom: 28px;
}

.bp-catalog-heading h1 {
    font-size: clamp(30px, 3.6vw, 42px);
}

.bp-section {
    margin-top: 96px;
}

.bp-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.bp-section__head h2 {
    margin: 0;
    color: var(--bp-text);
    font-family: var(--bp-font-display);
    font-size: clamp(28px, 3.2vw, 38px);
    font-weight: 750;
    letter-spacing: -.04em;
    line-height: 1.12;
}

.bp-section__head p {
    max-width: 680px;
    margin: 10px 0 0;
    color: var(--bp-text-muted);
    font-size: 14.5px;
    line-height: 1.65;
}

.bp-section__head--center {
    justify-content: center;
    text-align: center;
}

.bp-section__head--center p {
    margin-inline: auto;
}

.bp-panel {
    padding: 26px;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-card);
    background: linear-gradient(180deg, rgb(17 24 45 / 96%), rgb(13 19 37 / 96%));
    box-shadow: var(--bp-shadow-soft);
}

.bp-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.bp-panel__head h2,
.bp-panel__head h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.025em;
}

.bp-panel__head p {
    margin: 6px 0 0;
    color: var(--bp-text-muted);
    font-size: 13px;
}

.bp-muted {
    color: var(--bp-text-muted);
}

.bp-count-pill {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    padding-inline: 6px;
    place-items: center;
    border-radius: 999px;
    color: #f5f3ff;
    background: var(--bp-primary);
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
}

.bp-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--bp-success);
}

.bp-alert,
.bp-flash {
    padding: 14px 16px;
    border: 1px solid #33405f;
    border-radius: 13px;
    color: #dbe3f2;
    background: #11182d;
    font-size: 13px;
    line-height: 1.55;
}

.bp-alert--warning {
    border-color: rgb(245 158 11 / 32%);
    background: rgb(245 158 11 / 8%);
    color: #fde68a;
}

.bp-alert--danger {
    border-color: rgb(239 68 68 / 34%);
    background: rgb(239 68 68 / 9%);
    color: #fecaca;
}

.bp-alert--info {
    border-color: rgb(59 130 246 / 32%);
    background: rgb(59 130 246 / 8%);
    color: #bfdbfe;
}

.bp-flash {
    margin-bottom: 24px;
    border-color: rgb(34 197 94 / 30%);
    color: #bbf7d0;
    background: rgb(34 197 94 / 8%);
}

/* ---------- Header and navigation ---------- */

.bp-header {
    position: sticky;
    top: 0;
    z-index: var(--bp-z-header);
    border-bottom: 1px solid rgb(38 48 74 / 76%);
    background: rgb(7 10 24 / 84%);
    box-shadow: 0 10px 36px rgb(2 5 16 / 18%);
    backdrop-filter: blur(20px) saturate(150%);
}

.bp-header__inner {
    display: flex;
    min-height: 78px;
    align-items: center;
    gap: 28px;
}

.bp-brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    color: var(--bp-text);
    text-decoration: none;
}

.bp-brand__mark {
    position: relative;
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 1px solid rgb(167 139 250 / 40%);
    border-radius: 12px;
    background: linear-gradient(145deg, #1c2743, #0e1428);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 8px 22px rgb(124 58 237 / 20%);
}

.bp-brand__mark i {
    display: block;
    width: 3px;
    border-radius: 99px;
    background: linear-gradient(180deg, #c4b5fd, #3b82f6);
}

.bp-brand__mark i:nth-child(1) { height: 9px; }
.bp-brand__mark i:nth-child(2) { height: 18px; }
.bp-brand__mark i:nth-child(3) { height: 12px; }

.bp-brand__copy {
    display: grid;
    gap: 1px;
    line-height: 1;
}

.bp-brand__copy strong {
    font-size: 16px;
    font-weight: 750;
    letter-spacing: -.035em;
}

.bp-brand__copy small {
    color: #7f8ca8;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: .14em;
}

.bp-desktop-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.bp-desktop-nav > a,
.bp-desktop-nav > details > summary,
.bp-platform-menu > summary {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 6px;
    padding: 0 11px;
    border-radius: 9px;
    color: #aeb8cc;
    font-size: 13px;
    font-weight: 550;
    text-decoration: none;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease;
}

.bp-desktop-nav > a:hover,
.bp-desktop-nav > details > summary:hover,
.bp-platform-menu > summary:hover,
.bp-desktop-nav > a[aria-current="page"] {
    color: #fff;
    background: rgb(28 39 67 / 62%);
}

.bp-desktop-nav > a[aria-current="page"] {
    box-shadow: inset 0 -2px 0 #8b5cf6;
}

.bp-desktop-nav summary {
    list-style: none;
}

.bp-desktop-nav summary::-webkit-details-marker,
.bp-platform-menu summary::-webkit-details-marker {
    display: none;
}

.bp-platform-menu {
    position: relative;
}

.bp-platform-menu > summary svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    transition: transform 160ms ease;
}

.bp-platform-menu[open] > summary svg {
    transform: rotate(180deg);
}

.bp-platform-menu__panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    display: grid;
    width: 264px;
    padding: 12px;
    border: 1px solid var(--bp-border);
    border-radius: 16px;
    background: #11182d;
    box-shadow: 0 24px 60px rgb(0 0 0 / 38%);
    transform: translateX(-50%);
    animation: bp-pop 160ms ease both;
}

.bp-menu-label {
    padding: 6px 10px 10px;
    color: #7f8ca8;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .04em;
}

.bp-platform-menu__panel a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    border-radius: 9px;
    color: #dbe3f2;
    font-size: 12.5px;
    font-weight: 550;
    text-decoration: none;
}

.bp-platform-menu__panel a:hover {
    background: var(--bp-surface-hover);
}

.bp-platform-menu__panel .bp-platform-mark {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 8px;
    font-size: 12px;
}

.bp-header__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.bp-icon-button {
    position: relative;
    display: inline-grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #c3ccde;
    background: transparent;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.bp-icon-button:hover {
    border-color: var(--bp-border);
    color: #fff;
    background: rgb(28 39 67 / 60%);
}

.bp-icon-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bp-notification-dot {
    position: absolute;
    top: 3px;
    right: 2px;
    display: grid;
    min-width: 16px;
    height: 16px;
    padding-inline: 4px;
    place-items: center;
    border: 2px solid #070a18;
    border-radius: 999px;
    color: #fff;
    background: #7c3aed;
    font-size: 8px;
    font-weight: 750;
}

.bp-cart-count {
    position: absolute;
    top: 2px;
    right: 1px;
    display: grid;
    min-width: 17px;
    height: 17px;
    padding-inline: 4px;
    place-items: center;
    border: 2px solid #070a18;
    border-radius: 999px;
    color: #fff;
    background: #3b82f6;
    font-size: 8px;
    font-weight: 750;
}

.bp-cart-count[hidden] {
    display: none;
}

.bp-header__signup {
    min-height: 38px;
    padding-inline: 15px;
    font-size: 12.5px;
}

.bp-login {
    min-height: 38px;
    padding-inline: 12px;
    font-size: 12.5px;
}

.bp-menu-trigger {
    display: none;
}

.bp-account-trigger {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 9px;
    padding: 4px 8px 4px 5px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--bp-text);
    cursor: pointer;
    list-style: none;
}

.bp-account-trigger::-webkit-details-marker {
    display: none;
}

.bp-account-trigger:hover {
    border-color: var(--bp-border);
    background: rgb(28 39 67 / 55%);
}

.bp-account-trigger > svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #8f9db8;
    stroke-width: 1.8;
}

.bp-avatar {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border: 1px solid rgb(167 139 250 / 30%);
    border-radius: 10px;
    color: #ede9fe;
    background: linear-gradient(145deg, #4c1d95, #1e3a8a);
    font-size: 11px;
    font-weight: 750;
}

.bp-avatar--lg {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 12px;
    font-size: 13px;
}

.bp-account-trigger__copy {
    display: grid;
    max-width: 110px;
    gap: 1px;
    text-align: left;
    line-height: 1.25;
}

.bp-account-trigger__copy strong {
    overflow: hidden;
    font-size: 11.5px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-account-trigger__copy small {
    color: #8492ad;
    font-size: 9.5px;
}

.bp-popover {
    position: relative;
}

.bp-popover > summary {
    list-style: none;
}

.bp-popover > summary::-webkit-details-marker {
    display: none;
}

.bp-popover__panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 350px;
    overflow: hidden;
    border: 1px solid var(--bp-border);
    border-radius: 16px;
    background: #11182d;
    box-shadow: 0 28px 70px rgb(0 0 0 / 42%);
    animation: bp-pop 160ms ease both;
}

@keyframes bp-pop {
    from { opacity: 0; transform: translateY(-5px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.bp-popover__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 16px;
    border-bottom: 1px solid var(--bp-border);
}

.bp-popover__head .bp-eyebrow {
    margin: 0 0 2px;
    font-size: 8px;
    letter-spacing: .14em;
}

.bp-popover__head strong {
    display: block;
    font-size: 13px;
}

.bp-popover__head > a {
    color: #c4b5fd;
    font-size: 10.5px;
    font-weight: 650;
    text-decoration: none;
}

.bp-popover__empty {
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 28px 20px;
    text-align: center;
}

.bp-popover__empty > span {
    display: grid;
    width: 36px;
    height: 36px;
    margin-bottom: 4px;
    place-items: center;
    border: 1px solid var(--bp-border);
    border-radius: 10px;
    color: #86efac;
    background: rgb(34 197 94 / 8%);
    font-size: 11px;
    font-weight: 750;
}

.bp-popover__empty strong {
    font-size: 12.5px;
}

.bp-popover__empty small {
    color: #8b98b0;
    font-size: 10.5px;
}

.bp-popover__foot {
    padding: 10px 16px;
    border-top: 1px solid var(--bp-border);
    text-align: center;
    background: #0e1528;
}

.bp-notification-item {
    display: flex;
    gap: 10px;
    padding: 12px 15px;
    border-bottom: 1px solid rgb(38 48 74 / 68%);
    color: inherit;
    text-decoration: none;
}

.bp-notification-item:hover {
    background: var(--bp-surface-hover);
}

.bp-notification-item.is-unread {
    background: rgb(124 58 237 / 5%);
}

.bp-notification-item__icon {
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    place-items: center;
    border: 1px solid #33405f;
    border-radius: 9px;
    color: #c4b5fd;
    background: #17203a;
}

.bp-notification-item__icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bp-tone--success { color: #86efac !important; border-color: rgb(34 197 94 / 25%) !important; background: rgb(34 197 94 / 8%) !important; }
.bp-tone--warning { color: #fcd34d !important; border-color: rgb(245 158 11 / 25%) !important; background: rgb(245 158 11 / 8%) !important; }
.bp-tone--danger { color: #fca5a5 !important; border-color: rgb(239 68 68 / 25%) !important; background: rgb(239 68 68 / 8%) !important; }
.bp-tone--info { color: #93c5fd !important; border-color: rgb(59 130 246 / 25%) !important; background: rgb(59 130 246 / 8%) !important; }

.bp-notification-item__copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.bp-notification-item__copy strong {
    overflow: hidden;
    color: #eef2f9;
    font-size: 11.5px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-notification-item__copy small {
    display: -webkit-box;
    overflow: hidden;
    color: #8b98b0;
    font-size: 10px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.bp-notification-item__copy time {
    margin-top: 2px;
    color: #687691;
    font-size: 9px;
}

.bp-account-menu__panel {
    width: 268px;
}

.bp-account-menu__head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px;
    border-bottom: 1px solid var(--bp-border);
}

.bp-account-menu__head > span:last-child {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.bp-account-menu__head strong {
    overflow: hidden;
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-account-menu__head small {
    overflow: hidden;
    color: #8b98b0;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-account-menu__panel nav {
    display: grid;
    padding: 8px;
}

.bp-account-menu__panel nav a {
    display: flex;
    min-height: 36px;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    border-radius: 8px;
    color: #cbd5e7;
    font-size: 11.5px;
    text-decoration: none;
}

.bp-account-menu__panel nav a:hover {
    color: #fff;
    background: var(--bp-surface-hover);
}

.bp-account-menu__divider {
    height: 1px;
    margin: 6px 8px;
    background: var(--bp-border);
}

.bp-account-menu__foot {
    padding: 11px 16px;
    border-top: 1px solid var(--bp-border);
    background: #0e1528;
}

/* ---------- Mobile drawer ---------- */

.bp-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--bp-z-overlay) - 1);
    background: rgb(2 5 16 / 72%);
    backdrop-filter: blur(4px);
}

.bp-drawer-backdrop[hidden] {
    display: none;
}

.bp-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--bp-z-overlay);
    width: min(90vw, 350px);
    overflow-y: auto;
    padding: 18px;
    border-left: 1px solid var(--bp-border);
    background: #0b1022;
    box-shadow: -28px 0 80px rgb(0 0 0 / 40%);
    transform: translateX(102%);
    visibility: hidden;
    transition: transform 220ms ease, visibility 220ms ease;
}

.bp-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}

.bp-drawer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bp-border);
}

.bp-drawer__account {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-block: 14px;
    padding: 11px;
    border: 1px solid var(--bp-border);
    border-radius: 12px;
    background: #11182d;
}

.bp-drawer__account > span:last-child {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.bp-drawer__account strong,
.bp-drawer__account small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-drawer__account strong {
    font-size: 12px;
}

.bp-drawer__account small {
    color: #8b98b0;
    font-size: 10px;
}

.bp-drawer__nav {
    display: grid;
    gap: 2px;
    padding-top: 10px;
}

.bp-drawer__nav > a,
.bp-drawer__nav > details > summary {
    display: flex;
    min-height: 43px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 11px;
    border-radius: 9px;
    color: #d7deec;
    font-size: 13px;
    font-weight: 550;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
}

.bp-drawer__nav > a:hover,
.bp-drawer__nav > details > summary:hover,
.bp-drawer__nav > a[aria-current="page"] {
    color: #fff;
    background: var(--bp-surface-hover);
}

.bp-drawer__nav details summary::-webkit-details-marker {
    display: none;
}

.bp-drawer__nav summary svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    transition: transform 160ms ease;
}

.bp-drawer__nav details[open] summary svg {
    transform: rotate(180deg);
}

.bp-drawer__platforms {
    display: grid;
    gap: 1px;
    padding: 4px 0 8px 12px;
}

.bp-drawer__platforms a {
    padding: 8px 10px;
    border-left: 1px solid var(--bp-border);
    color: #a7b1c5;
    font-size: 12px;
    text-decoration: none;
}

.bp-drawer__platforms a:hover {
    color: #fff;
    border-color: #8b5cf6;
}

.bp-drawer__label {
    margin-top: 14px;
    padding: 9px 11px 5px;
    color: #74819c;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.bp-drawer__logout {
    margin-top: 8px;
    padding: 9px 11px;
    border-top: 1px solid var(--bp-border);
}

.bp-bottom-nav {
    display: none;
}

/* ---------- Footer ---------- */

.bp-footer {
    margin-top: 0;
    border-top: 1px solid var(--bp-border);
    background:
        radial-gradient(ellipse 50% 70% at 50% 100%, rgb(124 58 237 / 9%), transparent 70%),
        #080c1b;
}

.bp-footer__grid {
    display: grid;
    grid-template-columns: 1.55fr repeat(3, 1fr);
    gap: 48px;
    padding-block: 56px 44px;
}

.bp-footer__brand p {
    max-width: 320px;
    margin: 16px 0;
    color: #8d9ab2;
    font-size: 12.5px;
    line-height: 1.7;
}

.bp-footer__pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgb(34 197 94 / 22%);
    border-radius: 999px;
    color: #bbf7d0;
    background: rgb(34 197 94 / 6%);
    font-size: 9.5px;
    font-weight: 600;
}

.bp-footer__pill i {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: #22c55e;
}

.bp-footer__grid > div:not(.bp-footer__brand) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}

.bp-footer__grid h2 {
    margin: 0 0 7px;
    color: #e7ecf5;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
}

.bp-footer__grid a {
    color: #8d9ab2;
    font-size: 11.5px;
    text-decoration: none;
}

.bp-footer__grid a:hover {
    color: #ede9fe;
}

.bp-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-block: 18px;
    border-top: 1px solid rgb(38 48 74 / 72%);
    color: #71809b;
    font-size: 9.5px;
}

.bp-toast-region {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: var(--bp-z-toast);
    display: grid;
    width: min(360px, calc(100vw - 40px));
    gap: 8px;
}

.bp-toast {
    padding: 13px 15px;
    border: 1px solid var(--bp-border);
    border-radius: 12px;
    color: #edf2fa;
    background: #17203a;
    box-shadow: 0 18px 40px rgb(0 0 0 / 35%);
    font-size: 12px;
}

.bp-toast--success {
    border-color: rgb(34 197 94 / 35%);
    background: #0e2a24;
}

.bp-toast--error {
    border-color: rgb(239 68 68 / 35%);
    background: #2a1118;
}

/* ---------- Focus and motion ---------- */

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid #c4b5fd;
    outline-offset: 3px;
}

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

/* ---------- Home hero ---------- */

.bp-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(400px, .97fr);
    align-items: center;
    gap: clamp(36px, 5vw, 76px);
    min-height: min(680px, calc(100vh - 150px));
    padding-block: 28px 24px;
}

.bp-hero__copy {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.bp-hero__copy h1 {
    margin: 0;
    color: #f8fafc;
    font-family: var(--bp-font-display);
    font-size: clamp(46px, 5.2vw, 72px);
    font-weight: 760;
    letter-spacing: -.055em;
    line-height: .99;
    text-wrap: balance;
}

.bp-hero__copy h1 span {
    display: block;
    width: fit-content;
    color: #c4b5fd;
    background: linear-gradient(100deg, #ddd6fe 0%, #a78bfa 36%, #60a5fa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bp-hero__subtitle {
    max-width: 560px;
    margin: 24px 0 0;
    color: #a7b1c5;
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.65;
}

.bp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.bp-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 22px;
    margin-top: 30px;
    color: #8e9bb4;
    font-size: 11.5px;
    font-weight: 550;
}

.bp-hero__trust span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.bp-hero__trust i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 9px rgb(34 197 94 / 45%);
}

.bp-hero__visual {
    position: relative;
    width: 100%;
    max-width: 570px;
    justify-self: end;
    padding: 12px 0 24px 20px;
}

.bp-hero__glow {
    position: absolute;
    inset: 6% -8% 6% 4%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 48% 42%, rgb(124 58 237 / 38%), transparent 58%),
        radial-gradient(circle at 72% 68%, rgb(59 130 246 / 20%), transparent 52%);
    filter: blur(38px);
}

.bp-hero__frame {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid #2e3956;
    border-radius: 28px;
    background: #0d1326;
    box-shadow:
        0 40px 100px rgb(0 0 0 / 45%),
        0 0 0 1px rgb(167 139 250 / 8%),
        inset 0 1px 0 rgb(255 255 255 / 8%);
    transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
}

.bp-hero__frame::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, transparent 58%, rgb(7 10 24 / 52%));
    content: "";
    pointer-events: none;
}

.bp-hero__frame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1.18;
    object-fit: cover;
}

.bp-float-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid rgb(52 64 95 / 90%);
    border-radius: 13px;
    background: rgb(17 24 45 / 94%);
    box-shadow: 0 18px 40px rgb(0 0 0 / 38%), inset 0 1px 0 rgb(255 255 255 / 7%);
    backdrop-filter: blur(10px);
}

.bp-float-card--platforms {
    top: 13%;
    right: -24px;
}

.bp-float-card--payment {
    bottom: 5%;
    left: -14px;
}

.bp-float-card__icon {
    display: grid;
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    place-items: center;
    border: 1px solid rgb(167 139 250 / 28%);
    border-radius: 9px;
    color: #c4b5fd;
    background: rgb(124 58 237 / 14%);
}

.bp-float-card__icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bp-float-card__icon--green {
    border-color: rgb(34 197 94 / 30%);
    color: #86efac;
    background: rgb(34 197 94 / 10%);
}

.bp-float-card > span:last-child {
    display: grid;
    gap: 1px;
}

.bp-float-card strong {
    color: #f1f5fb;
    font-size: 11.5px;
    font-weight: 700;
}

.bp-float-card small {
    color: #8d9ab2;
    font-size: 9.5px;
}

/* ---------- Platforms ---------- */

.bp-platforms-section {
    margin-top: 76px;
}

.bp-platform-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.bp-platform-card {
    min-height: 86px;
    gap: 11px;
    padding: 14px;
    border-color: var(--bp-border);
    border-radius: 15px;
    background: linear-gradient(150deg, rgb(23 32 58 / 82%), rgb(13 19 37 / 86%));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
}

.bp-platform-card:hover {
    border-color: rgb(167 139 250 / 50%);
    background: linear-gradient(150deg, #1c2743, #11182d);
    box-shadow: 0 16px 34px rgb(0 0 0 / 18%), inset 0 1px 0 rgb(255 255 255 / 6%);
}

.bp-platform-card__mark {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 800;
}

.bp-platform-card__copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.bp-platform-card__copy strong {
    overflow: hidden;
    color: #eef2f9;
    font-size: 12.5px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-platform-card__copy small {
    overflow: hidden;
    color: #7f8ca8;
    font-size: 9.5px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-platform-card__arrow {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    margin-left: auto;
    fill: none;
    stroke: #67758f;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 160ms ease, stroke 160ms ease;
}

.bp-platform-card:hover .bp-platform-card__arrow {
    stroke: #c4b5fd;
    transform: translateX(2px);
}

.bp-platform-mark {
    border-radius: 11px;
}

.bp-platform-mark--twitch { color: #c4b5fd; background: rgb(145 70 255 / 14%); }
.bp-platform-mark--youtube { color: #fca5a5; background: rgb(255 0 0 / 10%); }
.bp-platform-mark--kick { color: #86efac; background: rgb(83 252 24 / 8%); }
.bp-platform-mark--facebook { color: #93c5fd; background: rgb(24 119 242 / 12%); }
.bp-platform-mark--tiktok { color: #f9a8d4; background: rgb(238 29 82 / 10%); }
.bp-platform-mark--trovo { color: #86efac; background: rgb(34 197 94 / 10%); }
.bp-platform-mark--nimo { color: #fcd34d; background: rgb(245 158 11 / 10%); }
.bp-platform-mark--rumble { color: #fca5a5; background: rgb(239 68 68 / 9%); }
.bp-platform-mark--other { color: #cbd5e1; background: rgb(148 163 184 / 10%); }

/* ---------- Benefits ---------- */

.bp-benefits-section {
    padding: 48px 38px 38px;
    border: 1px solid var(--bp-border);
    border-radius: 26px;
    background:
        radial-gradient(ellipse 60% 80% at 50% -10%, rgb(124 58 237 / 10%), transparent 62%),
        linear-gradient(180deg, rgb(17 24 45 / 72%), rgb(11 16 34 / 70%));
}

.bp-benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.bp-benefit-card {
    padding: 21px 19px;
    border: 1px solid #26304a;
    border-radius: 16px;
    background: linear-gradient(155deg, rgb(23 32 58 / 84%), rgb(13 19 37 / 86%));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
}

.bp-benefit-card__icon {
    display: grid;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    place-items: center;
    border: 1px solid rgb(167 139 250 / 26%);
    border-radius: 12px;
    color: #c4b5fd;
    background: linear-gradient(145deg, rgb(124 58 237 / 18%), rgb(59 130 246 / 8%));
}

.bp-benefit-card__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bp-benefit-card h3 {
    margin: 0 0 7px;
    color: #f1f5fb;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.bp-benefit-card p {
    margin: 0;
    color: #8d9ab2;
    font-size: 12.5px;
    line-height: 1.65;
}

/* ---------- Catalog cards ---------- */

.bp-catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.bp-catalog-card {
    display: flex;
    min-width: 0;
    min-height: 248px;
    flex-direction: column;
    padding: 20px;
    border: 1px solid var(--bp-border);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgb(23 32 58 / 76%), rgb(12 18 35 / 94%));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.bp-catalog-card:hover {
    border-color: rgb(167 139 250 / 40%);
    box-shadow: 0 22px 46px rgb(0 0 0 / 22%), inset 0 1px 0 rgb(255 255 255 / 6%);
    transform: translateY(-3px);
}

.bp-catalog-card__top {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 16px;
}

.bp-catalog-card__mark {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
}

.bp-catalog-card__platform,
.bp-catalog-card__category {
    padding: 4px 7px;
    border: 1px solid #2c3752;
    border-radius: 6px;
    color: #aeb8cc;
    background: #11182d;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.bp-catalog-card__category {
    overflow: hidden;
    color: #8390aa;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-catalog-card h2 {
    margin: 0 0 8px;
    color: #f1f5fb;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.3;
}

.bp-catalog-card h2 a {
    color: inherit;
    text-decoration: none;
}

.bp-catalog-card h2 a::after {
    position: absolute;
    inset: 0;
}

.bp-catalog-card {
    position: relative;
}

.bp-catalog-card p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 18px;
    color: #8d9ab2;
    font-size: 11.5px;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.bp-catalog-card__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid rgb(38 48 74 / 76%);
}

.bp-price-block {
    display: grid;
    gap: 1px;
}

.bp-price-block strong {
    color: #f8fafc;
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -.03em;
}

.bp-price-block small {
    color: #7f8ca8;
    font-size: 9.5px;
}

.bp-catalog-card__bottom .bp-button {
    position: relative;
    z-index: 1;
    min-height: 34px;
    padding-inline: 10px;
    border-radius: 8px;
    font-size: 10.5px;
}

.bp-catalog-bottom-link {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

/* ---------- Home steps and final CTA ---------- */

.bp-step-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.bp-step-card {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border: 1px solid var(--bp-border);
    border-radius: 20px;
    background: linear-gradient(155deg, rgb(20 29 52 / 82%), rgb(11 16 34 / 90%));
}

.bp-step-card__number {
    position: absolute;
    top: 20px;
    right: 20px;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgb(167 139 250 / 24%);
    border-radius: 9px;
    color: #c4b5fd;
    background: rgb(124 58 237 / 8%);
    font-size: 10px;
    font-weight: 750;
}

.bp-step-card__art {
    display: grid;
    min-height: 160px;
    margin-bottom: 22px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgb(38 48 74 / 72%);
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 40%, rgb(124 58 237 / 14%), transparent 58%),
        #0b1022;
}

.bp-step-card__art img {
    display: block;
    width: min(100%, 230px);
    height: auto;
}

.bp-step-card h3 {
    margin: 0 0 8px;
    color: #f1f5fb;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.025em;
}

.bp-step-card p {
    margin: 0;
    color: #8d9ab2;
    font-size: 12.5px;
    line-height: 1.65;
}

.bp-final-cta {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    margin-top: 96px;
    padding: 44px 46px;
    border: 1px solid rgb(91 75 156 / 38%);
    border-radius: 26px;
    background:
        radial-gradient(ellipse 50% 110% at 100% 50%, rgb(59 130 246 / 18%), transparent 60%),
        linear-gradient(112deg, #17112e 0%, #131a36 52%, #101a31 100%);
    box-shadow: 0 30px 80px rgb(0 0 0 / 28%), inset 0 1px 0 rgb(255 255 255 / 6%);
}

.bp-final-cta__glow {
    position: absolute;
    top: -100px;
    right: 8%;
    width: 420px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(124 58 237 / 28%), transparent 68%);
    filter: blur(28px);
    pointer-events: none;
}

.bp-final-cta__copy {
    position: relative;
    z-index: 1;
    max-width: 620px;
}

.bp-final-cta__copy h2 {
    margin: 0 0 10px;
    color: #fff;
    font-family: var(--bp-font-display);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 750;
    letter-spacing: -.04em;
    line-height: 1.14;
}

.bp-final-cta__copy p {
    margin: 0;
    color: #b5bfd2;
    font-size: 13.5px;
}

.bp-final-cta__actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 10px;
}

/* ---------- Empty states ---------- */

.bp-empty-panel {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 24px 26px;
    border: 1px dashed #33405f;
    border-radius: 18px;
    background: rgb(17 24 45 / 52%);
}

.bp-empty-panel .bp-empty-illustration {
    display: grid;
    width: 110px;
    flex: 0 0 110px;
    place-items: center;
}

.bp-empty-panel .bp-empty-illustration img {
    display: block;
    width: 100%;
    height: auto;
}

.bp-empty-panel h3 {
    margin: 0 0 5px;
    font-size: 15px;
    font-weight: 700;
}

.bp-empty-panel p {
    max-width: 620px;
    margin: 0;
    color: var(--bp-text-muted);
    font-size: 12px;
    line-height: 1.6;
}

.bp-empty-panel > .bp-button {
    margin-left: auto;
    flex: 0 0 auto;
}

.bp-empty-state {
    display: grid;
    justify-items: center;
    padding: 54px 24px;
    border: 1px dashed #33405f;
    border-radius: 20px;
    text-align: center;
    background: rgb(17 24 45 / 44%);
}

.bp-empty-state img,
.bp-empty-state .bp-empty-icon {
    display: block;
    width: 140px;
    max-width: 100%;
    height: auto;
    margin-bottom: 16px;
    opacity: .95;
}

.bp-empty-state h2,
.bp-empty-state h3 {
    margin: 0 0 7px;
    font-size: 18px;
    letter-spacing: -.02em;
}

.bp-empty-state p {
    max-width: 480px;
    margin: 0 0 18px;
    color: var(--bp-text-muted);
    font-size: 12.5px;
}

.bp-empty-inline {
    padding: 18px;
    border: 1px dashed #33405f;
    border-radius: 13px;
    color: #8d9ab2;
    font-size: 12px;
}

/* ---------- Platform directory and catalog page ---------- */

.bp-platform-directory {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.bp-directory-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px;
    border: 1px solid var(--bp-border);
    border-radius: 16px;
    color: inherit;
    background: linear-gradient(150deg, #141d34, #0e1528);
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.bp-directory-card:hover {
    border-color: rgb(167 139 250 / 42%);
    background: linear-gradient(150deg, #1c2743, #11182d);
    transform: translateY(-2px);
}

.bp-directory-card > .bp-platform-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    font-size: 15px;
}

.bp-directory-card__body {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.bp-directory-card__body strong {
    color: #eef2f9;
    font-size: 13px;
    font-weight: 650;
}

.bp-directory-card__body small {
    color: #8390aa;
    font-size: 10px;
}

.bp-directory-card > svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin-left: auto;
    fill: none;
    stroke: #67758f;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bp-catalog-disclaimer,
.bp-shop-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 820px;
    margin: 20px 0 0;
    color: #7f8ca8;
    font-size: 10.5px;
    line-height: 1.6;
}

.bp-catalog-disclaimer svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    margin-top: 1px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

.bp-filter-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--bp-border);
    border-radius: 16px;
    background: rgb(17 24 45 / 74%);
}

.bp-search-field {
    position: relative;
    display: flex;
    min-width: 220px;
    flex: 1 1 300px;
    align-items: center;
}

.bp-search-field svg {
    position: absolute;
    left: 13px;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #7f8ca8;
    stroke-width: 1.7;
    stroke-linecap: round;
    pointer-events: none;
}

.bp-search-field input {
    width: 100%;
    min-height: 44px;
    padding: 0 13px 0 39px;
    border: 1px solid #303b58;
    border-radius: 10px;
    color: #eef2f9;
    background: #0b1022;
    font: inherit;
    font-size: 12.5px;
}

.bp-filter-control {
    display: grid;
    min-width: 150px;
    flex: 0 1 180px;
    gap: 5px;
}

.bp-filter-control > span {
    color: #8d9ab2;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.bp-filter-control select {
    min-height: 44px;
    padding: 0 11px;
    border: 1px solid #303b58;
    border-radius: 10px;
    color: #eef2f9;
    background: #0b1022;
    font: inherit;
    font-size: 12px;
}

.bp-filter-actions {
    display: flex;
    gap: 8px;
}

.bp-filter-actions .bp-button {
    min-height: 44px;
    font-size: 12px;
}

.bp-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 20px;
}

.bp-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border: 1px solid #33405f;
    border-radius: 999px;
    color: #cbd5e7;
    background: #11182d;
    font-size: 10px;
    text-decoration: none;
}

.bp-filter-chip:hover {
    border-color: #8b5cf6;
    color: #fff;
}

.bp-results-count {
    color: #8390aa;
    font-size: 11px;
}

.bp-catalog-area__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.bp-catalog-area__heading h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.bp-catalog-empty {
    display: grid;
    justify-items: center;
    padding: 54px 24px;
    border: 1px dashed #33405f;
    border-radius: 20px;
    text-align: center;
    background: rgb(17 24 45 / 44%);
}

.bp-catalog-empty img {
    width: 130px;
    height: auto;
    margin-bottom: 14px;
}

.bp-catalog-empty h2 {
    margin: 0 0 6px;
    font-size: 17px;
}

.bp-catalog-empty p {
    margin: 0 0 18px;
    color: var(--bp-text-muted);
    font-size: 12px;
}

.bp-pagination {
    margin-top: 26px;
}

.bp-pagination nav {
    display: flex;
    justify-content: center;
}

/* ---------- Service configurator ---------- */

.bp-quick-order {
    max-width: 1160px;
}

.bp-quick-order__heading {
    align-items: flex-start;
    margin-bottom: 24px;
}

.bp-quick-order__heading h1 {
    margin: 0 0 10px;
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 750;
    letter-spacing: -.045em;
    line-height: 1.08;
}

.bp-quick-order__heading p {
    max-width: 680px;
    color: #97a4bb;
    font-size: 13.5px;
    line-height: 1.65;
}

.bp-quick-order__trust {
    margin-top: 7px;
    border-color: rgb(34 197 94 / 26%);
    background: rgb(34 197 94 / 7%);
    font-size: 10px;
}

.bp-service-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
}

.bp-service-tags > span:not(.bp-platform-mark) {
    padding: 5px 9px;
    border: 1px solid #2c3752;
    border-radius: 7px;
    color: #aeb8cc;
    background: #11182d;
    font-size: 10px;
    font-weight: 600;
}

.bp-service-tags .bp-platform-mark {
    width: 28px;
    height: 28px;
    font-size: 11px;
}

.bp-platform-selector {
    display: flex;
    gap: 6px;
    margin-bottom: 22px;
    padding-bottom: 10px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.bp-platform-tab {
    display: inline-flex;
    min-height: 40px;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    padding: 5px 10px 5px 5px;
    border: 1px solid #26304a;
    border-radius: 10px;
    color: #aeb8cc;
    background: #0e1528;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.bp-platform-tab .bp-platform-mark {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: 11px;
}

.bp-platform-tab:hover,
.bp-platform-tab.is-active {
    border-color: rgb(167 139 250 / 50%);
    color: #fff;
    background: #17203a;
}

.bp-platform-tab.is-active {
    box-shadow: inset 0 -2px 0 #8b5cf6;
}

.bp-platform-tab.is-unavailable {
    opacity: .55;
}

.bp-quick-order__grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr);
    gap: 16px;
}

.bp-quick-order__form {
    gap: 12px;
}

.bp-config-card {
    padding: 20px;
    border: 1px solid var(--bp-border);
    border-radius: 17px;
    background: linear-gradient(180deg, #11182d, #0d1427);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
}

.bp-config-step {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 15px;
}

.bp-config-step > span {
    display: grid;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    place-items: center;
    border: 1px solid rgb(167 139 250 / 28%);
    border-radius: 8px;
    color: #c4b5fd;
    background: rgb(124 58 237 / 10%);
    font-size: 9px;
    font-weight: 750;
}

.bp-config-step h2 {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.015em;
}

.bp-config-step p {
    margin: 0;
    color: #8390aa;
    font-size: 10.5px;
}

.bp-shop-field {
    display: grid;
    gap: 6px;
    color: #c4ccdc;
    font-size: 11px;
    font-weight: 600;
}

.bp-shop-field > span:not(.sr-only) {
    color: #aeb8cc;
}

.bp-shop-field input,
.bp-shop-field select,
.bp-shop-field textarea {
    width: 100%;
    min-height: 45px;
    padding: 0 12px;
    border: 1px solid #303b58;
    border-radius: 10px;
    color: #f1f5fb;
    background: #090e1e;
    font: inherit;
    font-size: 12.5px;
    font-weight: 450;
}

.bp-shop-field textarea {
    min-height: 120px;
    padding-block: 11px;
    resize: vertical;
}

.bp-shop-field input::placeholder,
.bp-shop-field textarea::placeholder {
    color: #64718c;
}

.bp-shop-field input:focus,
.bp-shop-field select:focus,
.bp-shop-field textarea:focus {
    border-color: #8b5cf6;
    outline: none;
    box-shadow: 0 0 0 3px rgb(139 92 246 / 14%);
}

.bp-config-card .bp-shop-field input,
.bp-config-card .bp-shop-field select {
    min-height: 46px;
}

.bp-service-detail {
    margin: 12px 0 0;
    color: #8d9ab2;
    font-size: 11.5px;
    line-height: 1.65;
}

.bp-service-bounds {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.bp-service-bounds span {
    padding: 5px 8px;
    border: 1px solid #2c3752;
    border-radius: 6px;
    color: #8390aa;
    background: #0b1022;
    font-size: 9.5px;
}

.bp-service-bounds strong {
    color: #dbe3f2;
    font-weight: 650;
}

.bp-field-hint {
    margin: 7px 0 0;
    color: #74819c;
    font-size: 10px;
    line-height: 1.5;
}

.bp-field-hint:empty {
    display: none;
}

.bp-quantity-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bp-quantity-control button {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid #303b58;
    border-radius: 10px;
    color: #dbe3f2;
    background: #11182d;
    font: inherit;
    font-size: 17px;
    cursor: pointer;
}

.bp-quantity-control button:hover {
    border-color: #8b5cf6;
    background: #17203a;
}

.bp-quantity-control label {
    flex: 1;
}

.bp-quantity-control input {
    width: 100%;
    min-height: 42px;
    border: 1px solid #303b58;
    border-radius: 10px;
    color: #fff;
    background: #090e1e;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    text-align: center;
}

.bp-quantity-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.bp-quantity-presets button {
    padding: 6px 10px;
    border: 1px solid #2c3752;
    border-radius: 7px;
    color: #aeb8cc;
    background: #11182d;
    font: inherit;
    font-size: 10px;
    cursor: pointer;
}

.bp-quantity-presets button:hover {
    border-color: #8b5cf6;
    color: #fff;
}

.bp-duration-unavailable {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 11px 13px;
    border: 1px solid rgb(245 158 11 / 20%);
    border-radius: 10px;
    color: #d6b779;
    background: rgb(245 158 11 / 5%);
    font-size: 10.5px;
    line-height: 1.55;
}

.bp-duration-unavailable > span {
    flex: 0 0 auto;
    color: #fcd34d;
}

.bp-quick-order__side {
    top: 96px;
    gap: 12px;
}

.bp-live-preview {
    overflow: hidden;
    border: 1px solid var(--bp-border);
    border-radius: 17px;
    background: #0e1528;
}

.bp-live-preview__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--bp-border);
}

.bp-live-preview__top .bp-eyebrow {
    margin: 0;
    font-size: 8px;
}

.bp-live-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #8d9ab2;
    font-size: 9px;
    font-weight: 600;
}

.bp-live-status i {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: #64748b;
}

.bp-live-player {
    position: relative;
    display: grid;
    aspect-ratio: 16 / 9;
    place-items: center;
    background:
        radial-gradient(circle at 50% 40%, rgb(124 58 237 / 16%), transparent 58%),
        #090e1e;
}

.bp-live-player iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.bp-live-player__placeholder {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 20px;
    text-align: center;
}

.bp-live-player__placeholder > span {
    display: grid;
    width: 42px;
    height: 42px;
    margin-bottom: 6px;
    place-items: center;
    border: 1px solid #33405f;
    border-radius: 11px;
    color: #a78bfa;
    background: #11182d;
    font-size: 14px;
}

.bp-live-player__placeholder strong {
    font-size: 11.5px;
}

.bp-live-player__placeholder small {
    max-width: 240px;
    color: #74819c;
    font-size: 9.5px;
    line-height: 1.45;
}

.bp-live-metadata {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--bp-border);
    color: #74819c;
    font-size: 9px;
}

.bp-live-metadata span:first-child {
    color: #c4b5fd;
    font-weight: 650;
}

.bp-price-summary {
    padding: 20px;
    border: 1px solid var(--bp-border);
    border-radius: 17px;
    background: linear-gradient(180deg, #141d34, #0d1427);
    box-shadow: 0 20px 46px rgb(0 0 0 / 18%);
}

.bp-price-summary .bp-eyebrow {
    margin-bottom: 6px;
    font-size: 8px;
}

.bp-price-summary h2 {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.025em;
}

.bp-summary-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid rgb(38 48 74 / 70%);
    color: #8d9ab2;
    font-size: 11px;
}

.bp-summary-row strong {
    max-width: 62%;
    color: #dbe3f2;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

.bp-summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 10px;
    padding: 13px 0 4px;
    border-top: 1px solid #33405f;
}

.bp-summary-total span {
    color: #cbd5e7;
    font-size: 11.5px;
    font-weight: 600;
}

.bp-summary-total strong {
    color: #fff;
    font-size: 23px;
    font-weight: 750;
    letter-spacing: -.035em;
}

.bp-summary-note {
    margin: 10px 0 15px;
    color: #74819c;
    font-size: 9.5px;
    line-height: 1.55;
}

.bp-price-summary form .bp-button {
    width: 100%;
    min-height: 48px;
}

.bp-shop-message {
    min-height: 0;
    margin: 8px 0 0;
    color: #fca5a5;
    font-size: 10.5px;
    line-height: 1.5;
}

.bp-shop-message:empty {
    display: none;
}

.bp-shop-message.is-success {
    color: #86efac;
}

.bp-quick-order__footnote {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid #2c3752;
    border-radius: 10px;
    color: #74819c;
    background: rgb(11 16 34 / 60%);
    font-size: 9.5px;
    line-height: 1.55;
}

.bp-quick-order__footnote strong {
    margin-right: 6px;
    color: #aeb8cc;
}

/* ---------- Cart ---------- */

.bp-cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 16px;
}

.bp-cart-items {
    display: grid;
    gap: 10px;
}

.bp-cart-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px;
    border: 1px solid var(--bp-border);
    border-radius: 16px;
    background: linear-gradient(150deg, #141d34, #0e1528);
}

.bp-cart-line__details {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.bp-cart-line__details .bp-eyebrow {
    margin: 0;
    font-size: 8px;
}

.bp-cart-line__details h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -.02em;
}

.bp-cart-line__details h2 a {
    color: #eef2f9;
    text-decoration: none;
}

.bp-cart-line__details > span:not(.bp-eyebrow) {
    color: #8390aa;
    font-size: 10px;
    overflow-wrap: anywhere;
}

.bp-cart-line__target {
    max-width: 520px;
    color: #74819c !important;
}

.bp-cart-line__controls {
    display: grid;
    flex: 0 0 auto;
    justify-items: end;
    gap: 5px;
}

.bp-cart-line__controls strong {
    color: #fff;
    font-size: 16px;
    font-weight: 750;
    letter-spacing: -.025em;
}

.bp-remove-item {
    padding: 3px 0;
    border: 0;
    color: #fca5a5;
    background: transparent;
    font: inherit;
    font-size: 9.5px;
    cursor: pointer;
}

.bp-remove-item:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bp-cart-summary {
    position: sticky;
    top: 96px;
    padding: 22px;
    border: 1px solid var(--bp-border);
    border-radius: 18px;
    background: linear-gradient(180deg, #151e37, #0e1528);
    box-shadow: var(--bp-shadow-soft);
}

.bp-cart-summary h2 {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.025em;
}

.bp-cart-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
    border-block: 1px solid #33405f;
}

.bp-cart-total span {
    color: #aeb8cc;
    font-size: 11px;
    font-weight: 600;
}

.bp-cart-total strong {
    color: #fff;
    font-size: 24px;
    font-weight: 750;
    letter-spacing: -.035em;
}

.bp-cart-summary > p {
    margin: 12px 0 16px;
    color: #74819c;
    font-size: 10px;
    line-height: 1.55;
}

.bp-cart-summary > .bp-button {
    width: 100%;
}

.bp-detail-faq {
    display: block;
    margin-top: 12px;
    color: #a7b1c5;
    font-size: 11px;
    text-align: center;
    text-decoration: none;
}

.bp-detail-faq:hover {
    color: #fff;
}

/* ---------- Checkout ---------- */

.bp-checkout-steps {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.bp-checkout-steps li {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border: 1px solid #26304a;
    border-radius: 12px;
    color: #74819c;
    background: rgb(14 21 40 / 72%);
}

.bp-checkout-steps li > span {
    display: grid;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    place-items: center;
    border: 1px solid #33405f;
    border-radius: 8px;
    color: #8d9ab2;
    font-size: 9.5px;
    font-weight: 750;
}

.bp-checkout-steps li > div {
    display: grid;
    gap: 1px;
}

.bp-checkout-steps strong {
    color: #aeb8cc;
    font-size: 11px;
    font-weight: 650;
}

.bp-checkout-steps small {
    font-size: 9px;
}

.bp-checkout-steps li.is-active {
    border-color: rgb(167 139 250 / 36%);
    background: rgb(124 58 237 / 7%);
}

.bp-checkout-steps li.is-active > span {
    border-color: #8b5cf6;
    color: #fff;
    background: #7c3aed;
}

.bp-checkout-steps li.is-active strong {
    color: #ede9fe;
}

.bp-checkout-steps li.is-done > span {
    border-color: rgb(34 197 94 / 35%);
    color: #86efac;
    background: rgb(34 197 94 / 9%);
}

.bp-checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: start;
    gap: 16px;
}

.bp-checkout-main {
    display: grid;
    gap: 14px;
}

.bp-checkout-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid rgb(38 48 74 / 70%);
}

.bp-checkout-item:first-child {
    padding-top: 0;
}

.bp-checkout-item:last-child {
    border-bottom: 0;
}

.bp-checkout-item__mark {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border: 1px solid rgb(167 139 250 / 28%);
    border-radius: 10px;
    color: #c4b5fd;
    background: rgb(124 58 237 / 10%);
    font-size: 13px;
    font-weight: 750;
}

.bp-checkout-item__copy {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 2px;
}

.bp-checkout-item__copy .bp-eyebrow {
    margin: 0;
    font-size: 8px;
}

.bp-checkout-item__copy h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -.015em;
}

.bp-checkout-item__target {
    overflow: hidden;
    color: #74819c;
    font-size: 9.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-checkout-item__copy small {
    color: #8390aa;
    font-size: 9px;
}

.bp-checkout-item__amount {
    flex: 0 0 auto;
    color: #f1f5fb;
    font-size: 14px;
    font-weight: 750;
    letter-spacing: -.02em;
}

.bp-checkout-subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid #33405f;
    color: #aeb8cc;
    font-size: 11px;
}

.bp-checkout-subtotal strong {
    color: #fff;
    font-size: 18px;
    font-weight: 750;
    letter-spacing: -.025em;
}

.bp-payment-methods {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    border: 0;
}

.bp-payment-methods legend {
    margin-bottom: 9px;
    color: #aeb8cc;
    font-size: 11px;
    font-weight: 650;
}

.bp-payment-choice {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid #303b58;
    border-radius: 13px;
    color: inherit;
    background: #0b1022;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}

.bp-payment-choice:hover {
    border-color: #46557a;
    background: #0e1528;
}

.bp-payment-choice.is-selected {
    border-color: rgb(167 139 250 / 62%);
    background: rgb(124 58 237 / 7%);
    box-shadow: 0 0 0 1px rgb(124 58 237 / 25%) inset;
}

.bp-payment-choice.has-warning:not(.is-selected) {
    border-color: rgb(245 158 11 / 25%);
}

.bp-payment-choice__icon {
    display: grid;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    place-items: center;
    border: 1px solid #33405f;
    border-radius: 10px;
    color: #c4b5fd;
    background: #141d34;
}

.bp-payment-choice__icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bp-payment-choice > span:nth-child(2) {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 2px;
}

.bp-payment-choice strong {
    color: #eef2f9;
    font-size: 12.5px;
    font-weight: 650;
}

.bp-payment-choice small {
    color: #8390aa;
    font-size: 10px;
    line-height: 1.45;
}

.bp-payment-choice__check {
    display: grid;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    place-items: center;
    border: 1px solid #46557a;
    border-radius: 99px;
    color: transparent;
    background: #0b1022;
    font-size: 9px;
    font-weight: 750;
}

.bp-payment-choice.is-selected .bp-payment-choice__check {
    border-color: #8b5cf6;
    color: #fff;
    background: #7c3aed;
}

.bp-inline-warning {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 10px;
    padding: 11px 12px;
    border: 1px solid rgb(245 158 11 / 28%);
    border-radius: 10px;
    color: #d6b779;
    background: rgb(245 158 11 / 6%);
    font-size: 10.5px;
}

.bp-inline-warning > span {
    flex: 0 0 auto;
    color: #fcd34d;
}

.bp-inline-warning p {
    flex: 1;
    margin: 0;
    line-height: 1.55;
}

.bp-inline-warning a {
    flex: 0 0 auto;
    color: #fcd34d;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bp-checkout-notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 13px 0;
    padding: 11px 12px;
    border: 1px solid #2c3752;
    border-radius: 10px;
    color: #8d9ab2;
    background: rgb(11 16 34 / 58%);
    font-size: 10px;
    line-height: 1.55;
}

.bp-checkout-notice > span {
    flex: 0 0 auto;
    color: #93c5fd;
}

.bp-checkout-notice p {
    margin: 0;
}

.bp-checkout-summary .bp-panel__head {
    margin-bottom: 14px;
}

.bp-summary-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.bp-summary-list > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid rgb(38 48 74 / 66%);
}

.bp-summary-list dt {
    color: #8390aa;
    font-size: 10.5px;
}

.bp-summary-list dd {
    max-width: 62%;
    margin: 0;
    color: #dbe3f2;
    font-size: 10.5px;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

.bp-summary-list > .is-total {
    margin-top: 4px;
    padding-top: 13px;
    border-top: 1px solid #33405f;
    border-bottom: 0;
}

.bp-summary-list > .is-total dt {
    color: #cbd5e7;
    font-size: 11px;
    font-weight: 600;
}

.bp-summary-list > .is-total dd {
    color: #fff;
    font-size: 19px;
    font-weight: 750;
    letter-spacing: -.025em;
}

.bp-checkout-trust {
    display: grid;
    gap: 7px;
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid rgb(38 48 74 / 66%);
}

.bp-checkout-trust span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #8390aa;
    font-size: 9.5px;
}

.bp-checkout-trust i {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 99px;
    background: #22c55e;
}

.bp-checkout-login {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bp-checkout-login__icon {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    border: 1px solid rgb(167 139 250 / 28%);
    border-radius: 12px;
    color: #c4b5fd;
    background: rgb(124 58 237 / 10%);
}

.bp-checkout-login__icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bp-checkout-login > div {
    min-width: 0;
    flex: 1;
}

.bp-checkout-login h2 {
    margin: 0 0 3px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.bp-checkout-login p {
    margin: 0;
    color: #8d9ab2;
    font-size: 11px;
}

.bp-checkout-login__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
}

.bp-checkout-login__actions .bp-button {
    min-height: 40px;
    font-size: 11.5px;
}

/* ---------- Payment methods and forms ---------- */

.bp-payment-options {
    display: grid;
    gap: 8px;
}

.bp-payment-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 13px;
    border: 1px solid #303b58;
    border-radius: 12px;
    background: #0b1022;
    cursor: pointer;
}

.bp-payment-option.is-selected,
.bp-payment-option:has(input:checked) {
    border-color: rgb(167 139 250 / 60%);
    background: rgb(124 58 237 / 7%);
}

.bp-payment-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.bp-payment-option__icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border: 1px solid #33405f;
    border-radius: 9px;
    color: #c4b5fd;
    background: #141d34;
}

.bp-payment-option__icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bp-payment-option__copy {
    display: grid;
    gap: 1px;
}

.bp-payment-option__copy strong {
    font-size: 12px;
    font-weight: 650;
}

.bp-payment-option__copy small {
    color: #8390aa;
    font-size: 9.5px;
}

.bp-radio-mark {
    display: grid;
    width: 19px;
    height: 19px;
    margin-left: auto;
    flex: 0 0 19px;
    place-items: center;
    border: 1px solid #46557a;
    border-radius: 99px;
}

.bp-payment-option:has(input:checked) .bp-radio-mark {
    border-color: #8b5cf6;
}

.bp-payment-option:has(input:checked) .bp-radio-mark::after {
    width: 9px;
    height: 9px;
    border-radius: 99px;
    background: #8b5cf6;
    content: "";
}

.bp-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.bp-form-grid > .bp-shop-field:only-child,
.bp-form-grid > .bp-shop-field--full {
    grid-column: 1 / -1;
}

.bp-form-alert {
    display: grid;
    gap: 2px;
    margin-bottom: 15px;
    padding: 11px 13px;
    border: 1px solid rgb(239 68 68 / 32%);
    border-radius: 10px;
    color: #fecaca;
    background: rgb(239 68 68 / 8%);
    font-size: 11.5px;
}

.bp-form-alert strong {
    font-size: 12px;
}

.bp-form-alert--success {
    border-color: rgb(34 197 94 / 30%);
    color: #bbf7d0;
    background: rgb(34 197 94 / 8%);
}

.bp-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #9aa7bd;
    font-size: 11px;
    line-height: 1.5;
    cursor: pointer;
}

.bp-check input {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    flex: 0 0 16px;
    accent-color: #7c3aed;
}

.bp-secure-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 10px 0 0;
    color: #74819c;
    font-size: 9.5px;
    line-height: 1.55;
}

.bp-secure-note > span {
    flex: 0 0 auto;
    color: #86efac;
}

/* ---------- Order Pix ---------- */

.bp-pix-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 16px;
}

.bp-pix-main {
    display: grid;
    gap: 14px;
}

.bp-pix-card {
    overflow: hidden;
    padding: 24px;
    border: 1px solid var(--bp-border);
    border-radius: 20px;
    background: linear-gradient(180deg, #131c33, #0d1427);
    box-shadow: var(--bp-shadow-soft);
}

.bp-pix-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.bp-pix-card__head .bp-eyebrow {
    margin: 0 0 4px;
    font-size: 8px;
}

.bp-pix-card__head h2 {
    margin: 0;
    font-size: 21px;
    font-weight: 750;
    letter-spacing: -.03em;
}

.bp-pix-body {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
}

.bp-qr-frame {
    display: grid;
    width: 100%;
    max-width: 260px;
    margin-inline: auto;
    padding: 12px;
    place-items: center;
    border: 1px solid #33405f;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 40px rgb(0 0 0 / 24%);
}

.bp-qr-frame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
}

.bp-pix-instructions {
    min-width: 0;
}

.bp-numbered-list {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bp-numbered-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.bp-numbered-list li > span {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    place-items: center;
    border: 1px solid #33405f;
    border-radius: 7px;
    color: #c4b5fd;
    background: #17203a;
    font-size: 9px;
    font-weight: 700;
}

.bp-numbered-list li > div {
    display: grid;
    gap: 1px;
}

.bp-numbered-list strong {
    color: #e7ecf5;
    font-size: 11.5px;
    font-weight: 650;
}

.bp-numbered-list p {
    margin: 0;
    color: #8390aa;
    font-size: 10px;
    line-height: 1.5;
}

.bp-numbered-list--compact {
    gap: 12px;
}

.bp-pix-expiry {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 14px 0 0;
    padding: 8px 10px;
    border: 1px solid rgb(245 158 11 / 24%);
    border-radius: 8px;
    color: #fcd34d;
    background: rgb(245 158 11 / 6%);
    font-size: 10px;
    font-weight: 600;
}

.bp-pix-expiry svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.bp-pix-code {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgb(38 48 74 / 80%);
}

.bp-pix-code label {
    display: block;
    margin-bottom: 6px;
    color: #c4ccdc;
    font-size: 10.5px;
    font-weight: 650;
}

.bp-pix-code > div {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.bp-pix-code textarea {
    width: 100%;
    min-height: 64px;
    padding: 10px 11px;
    border: 1px solid #303b58;
    border-radius: 9px;
    color: #aeb8cc;
    background: #090e1e;
    font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
    resize: none;
}

.bp-pix-code .bp-button {
    flex: 0 0 auto;
    min-height: 44px;
    align-self: flex-end;
    font-size: 11.5px;
}

.bp-pix-card > .bp-button--primary,
.bp-pix-card > .bp-button--quiet {
    margin-top: 12px;
}

.bp-pix-actions {
    margin-top: 12px;
}

.bp-pix-card .bp-shop-message {
    margin-top: 8px;
    color: #a7b1c5;
}

.bp-pix-actions .bp-shop-message {
    color: #8d9ab2;
}

.bp-pix-side {
    display: grid;
    gap: 12px;
}

.bp-pix-unavailable {
    display: grid;
    justify-items: center;
    padding: 40px 24px;
    text-align: center;
}

.bp-pix-unavailable .bp-unavailable-state__icon {
    display: grid;
    width: 50px;
    height: 50px;
    margin-bottom: 14px;
    place-items: center;
    border: 1px solid #33405f;
    border-radius: 13px;
    color: #c4b5fd;
    background: #17203a;
}

.bp-pix-unavailable h2 {
    margin: 0 0 6px;
    font-size: 18px;
}

.bp-pix-unavailable p {
    max-width: 460px;
    margin: 0 0 16px;
    color: #8d9ab2;
    font-size: 11.5px;
}

.bp-summary-card .bp-eyebrow {
    margin-bottom: 10px;
}

/* ---------- Payment result ---------- */

.bp-payment-result {
    display: grid;
    justify-items: center;
    padding: 44px 30px;
    border: 1px solid var(--bp-border);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 0%, rgb(124 58 237 / 10%), transparent 54%),
        linear-gradient(180deg, #11182d, #0c1225);
    text-align: center;
    box-shadow: var(--bp-shadow-soft);
}

.bp-payment-result--success {
    border-color: rgb(34 197 94 / 24%);
    background:
        radial-gradient(circle at 50% 0%, rgb(34 197 94 / 9%), transparent 54%),
        linear-gradient(180deg, #101c27, #0c1225);
}

.bp-payment-result--error {
    border-color: rgb(239 68 68 / 22%);
    background:
        radial-gradient(circle at 50% 0%, rgb(239 68 68 / 8%), transparent 54%),
        linear-gradient(180deg, #1a1320, #0c1225);
}

.bp-payment-result__icon {
    display: grid;
    width: 120px;
    height: 120px;
    margin-bottom: 10px;
    place-items: center;
}

.bp-payment-result__icon img {
    display: block;
    max-width: 100%;
    height: auto;
}

.bp-payment-result h2 {
    margin: 0 0 8px;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 750;
    letter-spacing: -.04em;
}

.bp-payment-result p {
    max-width: 480px;
    margin: 0;
    color: #9aa7bd;
    font-size: 12.5px;
    line-height: 1.65;
}

.bp-payment-result p strong {
    color: #f1f5fb;
}

.bp-payment-result__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-top: 22px;
}

.bp-unavailable-state {
    display: grid;
    justify-items: center;
    padding: 30px;
    text-align: center;
}

.bp-unavailable-state__icon {
    display: grid;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    place-items: center;
    border: 1px solid #33405f;
    border-radius: 12px;
    color: #c4b5fd;
    background: #17203a;
}

.bp-unavailable-state h2 {
    margin: 0 0 6px;
    font-size: 18px;
}

.bp-unavailable-state p {
    max-width: 520px;
    margin: 0 0 16px;
    color: #8d9ab2;
    font-size: 12px;
}

.bp-unavailable-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.bp-success-items {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bp-success-items li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 0;
    border-bottom: 1px solid rgb(38 48 74 / 66%);
}

.bp-success-items li:last-child {
    border-bottom: 0;
}

.bp-success-items li > span {
    display: grid;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    place-items: center;
    border-radius: 8px;
    color: #c4b5fd;
    background: #17203a;
    font-size: 10px;
    font-weight: 750;
}

.bp-success-items li > div {
    display: grid;
    gap: 1px;
}

.bp-success-items strong {
    font-size: 10.5px;
    font-weight: 650;
}

.bp-success-items small {
    color: #8390aa;
    font-size: 9px;
}

/* ---------- Wallet top-up ---------- */

.bp-funds-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 16px;
}

.bp-funds-main {
    display: grid;
    gap: 14px;
}

.bp-funds-side {
    display: grid;
    gap: 12px;
}

.bp-funds-form {
    display: grid;
    gap: 14px;
}

.bp-amount-input {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px;
    border: 1px solid #303b58;
    border-radius: 12px;
    background: #090e1e;
}

.bp-amount-input > span {
    color: #8390aa;
    font-size: 18px;
    font-weight: 650;
}

.bp-amount-input input {
    width: 100%;
    min-height: 58px;
    border: 0;
    color: #fff;
    background: transparent;
    font: inherit;
    font-size: 27px;
    font-weight: 750;
    letter-spacing: -.03em;
    outline: none;
}

.bp-amount-input:focus-within {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgb(139 92 246 / 14%);
}

.bp-amount-input input::placeholder {
    color: #596783;
}

.bp-balance-card {
    background:
        radial-gradient(circle at 100% 0%, rgb(59 130 246 / 14%), transparent 52%),
        linear-gradient(150deg, #17203a, #0f162b);
}

.bp-balance-card > strong {
    display: block;
    margin: 2px 0 5px;
    color: #fff;
    font-size: 30px;
    font-weight: 760;
    letter-spacing: -.045em;
    line-height: 1.1;
}

.bp-balance-card > p {
    margin: 0 0 10px;
    color: #8390aa;
    font-size: 10px;
}

.bp-pending-list {
    display: grid;
    gap: 6px;
}

.bp-pending-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid #2c3752;
    border-radius: 9px;
    color: #cbd5e7;
    background: #0e1528;
    font-size: 10px;
    text-decoration: none;
}

.bp-pending-list a:hover {
    border-color: #8b5cf6;
}

.bp-pending-list strong {
    font-size: 11px;
}

/* ---------- Account shell ---------- */

.bp-account-layout {
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
}

.bp-account-sidebar {
    position: sticky;
    top: 100px;
    display: grid;
    gap: 12px;
}

.bp-account-nav {
    display: grid;
    gap: 2px;
    padding: 10px;
    border: 1px solid var(--bp-border);
    border-radius: 16px;
    background: linear-gradient(180deg, #11182d, #0d1427);
}

.bp-account-nav__label {
    padding: 10px 9px 5px;
    color: #687691;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .14em;
}

.bp-account-nav__label:not(:first-child) {
    margin-top: 6px;
    border-top: 1px solid rgb(38 48 74 / 70%);
    padding-top: 13px;
}

.bp-account-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 9px;
    padding: 0 9px;
    border-radius: 8px;
    color: #aeb8cc;
    font-size: 11.5px;
    font-weight: 550;
    text-decoration: none;
}

.bp-account-nav a > span:first-child {
    display: grid;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    place-items: center;
    color: #7f8ca8;
}

.bp-account-nav a svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bp-account-nav a:hover {
    color: #fff;
    background: var(--bp-surface-hover);
}

.bp-account-nav a[aria-current="page"] {
    color: #f5f3ff;
    background: rgb(124 58 237 / 15%);
    box-shadow: inset 2px 0 0 #8b5cf6;
}

.bp-account-nav a[aria-current="page"] > span:first-child {
    color: #c4b5fd;
}

.bp-account-nav .bp-count-pill {
    margin-left: auto;
}

.bp-account-help {
    padding: 16px;
    border: 1px solid rgb(91 75 156 / 30%);
    border-radius: 15px;
    background:
        radial-gradient(circle at 100% 0%, rgb(124 58 237 / 18%), transparent 60%),
        #11182d;
}

.bp-account-help > span {
    display: grid;
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
    place-items: center;
    border: 1px solid rgb(167 139 250 / 26%);
    border-radius: 9px;
    color: #c4b5fd;
    background: rgb(124 58 237 / 10%);
}

.bp-account-help > span svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.bp-account-help strong {
    display: block;
    font-size: 11.5px;
    font-weight: 650;
}

.bp-account-help p {
    margin: 4px 0 11px;
    color: #8390aa;
    font-size: 10px;
    line-height: 1.55;
}

.bp-account-help a {
    color: #c4b5fd;
    font-size: 10px;
    font-weight: 650;
    text-decoration: none;
}

.bp-account-help a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bp-account-main {
    min-width: 0;
}

.bp-account-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.bp-account-heading .bp-eyebrow {
    margin-bottom: 6px;
    font-size: 8.5px;
}

.bp-account-heading h1 {
    margin: 0;
    font-family: var(--bp-font-display);
    font-size: clamp(27px, 3.2vw, 36px);
    font-weight: 750;
    letter-spacing: -.045em;
    line-height: 1.1;
}

.bp-account-heading p {
    max-width: 620px;
    margin: 7px 0 0;
    color: #8d9ab2;
    font-size: 12px;
    line-height: 1.6;
}

.bp-account-heading__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.bp-account-heading__actions .bp-button {
    min-height: 38px;
    font-size: 11.5px;
}

.bp-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border: 1px solid rgb(34 197 94 / 25%);
    border-radius: 999px;
    color: #bbf7d0;
    background: rgb(34 197 94 / 7%);
    font-size: 9.5px;
    font-weight: 650;
}

.bp-status-chip i {
    width: 5px;
    height: 5px;
    border-radius: 99px;
    background: #22c55e;
}

.bp-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 16px;
}

.bp-stat-card {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 4px;
    padding: 16px;
    border: 1px solid var(--bp-border);
    border-radius: 15px;
    background: linear-gradient(155deg, #141d34, #0d1427);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
}

.bp-stat-card__icon {
    display: grid;
    width: 31px;
    height: 31px;
    margin-bottom: 8px;
    place-items: center;
    border: 1px solid rgb(167 139 250 / 24%);
    border-radius: 8px;
    color: #c4b5fd;
    background: rgb(124 58 237 / 9%);
}

.bp-stat-card__icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bp-stat-card__label {
    color: #8390aa;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .02em;
}

.bp-stat-card strong {
    overflow: hidden;
    color: #f8fafc;
    font-size: 23px;
    font-weight: 750;
    letter-spacing: -.04em;
    line-height: 1.15;
    text-overflow: ellipsis;
}

.bp-stat-card a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    color: #c4b5fd;
    font-size: 9.5px;
    font-weight: 650;
    text-decoration: none;
}

.bp-stat-card a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bp-stat-card__hint {
    color: #74819c;
    font-size: 9px;
    line-height: 1.45;
}

.bp-stat-grid--admin .bp-stat-card {
    padding: 18px;
}

.bp-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, .75fr);
    align-items: start;
    gap: 14px;
}

.bp-dashboard-side {
    display: grid;
    gap: 12px;
}

.bp-quick-actions {
    display: grid;
    gap: 6px;
}

.bp-quick-actions > a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px;
    border: 1px solid #2c3752;
    border-radius: 10px;
    color: inherit;
    background: #0e1528;
    text-decoration: none;
    transition: border-color 150ms ease, background 150ms ease;
}

.bp-quick-actions > a:hover {
    border-color: #46557a;
    background: var(--bp-surface-hover);
}

.bp-quick-actions > a > span:first-child {
    display: grid;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    place-items: center;
    border-radius: 8px;
    color: #c4b5fd;
    background: rgb(124 58 237 / 10%);
}

.bp-quick-actions > a svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
}

.bp-quick-actions > a > span:nth-child(2) {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 1px;
}

.bp-quick-actions strong {
    font-size: 10.5px;
    font-weight: 650;
}

.bp-quick-actions small {
    color: #7f8ca8;
    font-size: 9px;
}

.bp-quick-actions b {
    color: #67758f;
    font-size: 11px;
    font-weight: 500;
}

.bp-account-summary dl {
    display: grid;
    gap: 0;
    margin: 0 0 12px;
}

.bp-account-summary dl > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid rgb(38 48 74 / 60%);
}

.bp-account-summary dt {
    color: #7f8ca8;
    font-size: 9.5px;
}

.bp-account-summary dd {
    max-width: 65%;
    margin: 0;
    color: #cbd5e7;
    font-size: 9.5px;
    text-align: right;
    overflow-wrap: anywhere;
}

.bp-account-empty {
    padding: 24px;
    border: 1px dashed #33405f;
    border-radius: 12px;
    color: #8d9ab2;
    text-align: center;
    font-size: 11px;
}

/* ---------- Tables and status ---------- */

.bp-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.bp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10.5px;
    text-align: left;
}

.bp-table th {
    padding: 8px 10px;
    border-bottom: 1px solid #33405f;
    color: #7f8ca8;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.bp-table td {
    padding: 10px;
    border-bottom: 1px solid rgb(38 48 74 / 60%);
    color: #aeb8cc;
    vertical-align: middle;
}

.bp-table tbody tr:hover {
    background: rgb(28 39 67 / 35%);
}

.bp-table td strong {
    color: #e7ecf5;
    font-weight: 650;
}

.bp-table__sub {
    display: block;
    margin-top: 1px;
    color: #74819c;
    font-size: 8.5px;
    font-weight: 400;
}

.bp-table__link {
    color: #c4b5fd;
    font-size: 9.5px;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.bp-table__link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bp-amount--credit {
    color: #86efac !important;
}

.bp-amount--debit {
    color: #fca5a5 !important;
}

.bp-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border: 1px solid #33405f;
    border-radius: 999px;
    color: #aeb8cc;
    background: #11182d;
    font-size: 8.5px;
    font-weight: 650;
    line-height: 1.35;
    white-space: nowrap;
}

.bp-status i {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 99px;
    background: currentColor;
}

.bp-status--awaiting_payment,
.bp-status--pending,
.bp-status--open,
.bp-status--customer_reply {
    border-color: rgb(245 158 11 / 28%);
    color: #fcd34d;
    background: rgb(245 158 11 / 8%);
}

.bp-status--paid,
.bp-status--approved,
.bp-status--completed,
.bp-status--answered {
    border-color: rgb(34 197 94 / 28%);
    color: #86efac;
    background: rgb(34 197 94 / 8%);
}

.bp-status--queued,
.bp-status--processing {
    border-color: rgb(59 130 246 / 30%);
    color: #93c5fd;
    background: rgb(59 130 246 / 8%);
}

.bp-status--cancelled,
.bp-status--failed,
.bp-status--rejected,
.bp-status--expired {
    border-color: rgb(239 68 68 / 28%);
    color: #fca5a5;
    background: rgb(239 68 68 / 8%);
}

.bp-status--refunded {
    border-color: rgb(167 139 250 / 28%);
    color: #c4b5fd;
    background: rgb(124 58 237 / 8%);
}

.bp-status--closed {
    color: #9aa7bd;
    background: rgb(148 163 184 / 7%);
}

.bp-filter-chips {
    margin-bottom: 16px;
}

.bp-filter-chip {
    padding: 6px 9px;
    color: #8d9ab2;
    background: transparent;
    cursor: pointer;
}

.bp-filter-chip:hover,
.bp-filter-chip.is-active {
    border-color: rgb(167 139 250 / 45%);
    color: #ede9fe;
    background: rgb(124 58 237 / 10%);
}

.bp-filter-chip b {
    display: inline-grid;
    min-width: 16px;
    height: 16px;
    padding-inline: 4px;
    place-items: center;
    border-radius: 99px;
    color: #aeb8cc;
    background: #1c2743;
    font-size: 8px;
    font-weight: 700;
}

.bp-filter-chip.is-active b {
    color: #fff;
    background: #7c3aed;
}

.bp-filter-reset {
    color: #8d9ab2;
    font-size: 10px;
    text-decoration: none;
    white-space: nowrap;
}

.bp-filter-reset:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bp-orders-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
}

.bp-orders-filter .bp-search-field {
    max-width: 430px;
}

.bp-orders-filter .bp-button {
    min-height: 44px;
    font-size: 11px;
}

/* ---------- Order detail ---------- */

.bp-order-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    align-items: start;
    gap: 14px;
}

.bp-order-main {
    display: grid;
    gap: 12px;
}

.bp-order-side {
    display: grid;
    gap: 12px;
}

.bp-timeline {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bp-timeline li {
    position: relative;
    display: flex;
    gap: 11px;
    padding-bottom: 18px;
}

.bp-timeline li:last-child {
    padding-bottom: 0;
}

.bp-timeline li::before {
    position: absolute;
    top: 20px;
    bottom: 0;
    left: 9px;
    width: 1px;
    background: #26304a;
    content: "";
}

.bp-timeline li:last-child::before {
    display: none;
}

.bp-timeline li.is-done::before {
    background: rgb(34 197 94 / 40%);
}

.bp-timeline__dot {
    position: relative;
    z-index: 1;
    display: grid;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    place-items: center;
    border: 1px solid #3a4664;
    border-radius: 99px;
    color: #22c55e;
    background: #0d1427;
    font-size: 7px;
    font-weight: 750;
}

.bp-timeline li.is-done .bp-timeline__dot {
    border-color: rgb(34 197 94 / 45%);
    background: rgb(34 197 94 / 10%);
}

.bp-timeline li.is-active .bp-timeline__dot {
    border-color: #8b5cf6;
    background: #7c3aed;
    box-shadow: 0 0 0 4px rgb(124 58 237 / 12%);
}

.bp-timeline li > div {
    display: grid;
    gap: 1px;
    padding-top: 1px;
}

.bp-timeline strong {
    color: #8390aa;
    font-size: 10.5px;
    font-weight: 600;
}

.bp-timeline li.is-done strong,
.bp-timeline li.is-active strong {
    color: #e7ecf5;
    font-weight: 650;
}

.bp-timeline small {
    color: #687691;
    font-size: 8.5px;
}

.bp-order-items {
    display: grid;
    gap: 0;
}

.bp-order-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 0;
    border-bottom: 1px solid rgb(38 48 74 / 65%);
}

.bp-order-item:first-child {
    padding-top: 0;
}

.bp-order-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.bp-order-item__mark {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border: 1px solid rgb(167 139 250 / 25%);
    border-radius: 9px;
    color: #c4b5fd;
    background: rgb(124 58 237 / 9%);
    font-size: 12px;
    font-weight: 750;
}

.bp-order-item__copy {
    min-width: 0;
    flex: 1;
}

.bp-order-item__copy .bp-eyebrow {
    margin: 0 0 2px;
    font-size: 7.5px;
}

.bp-order-item__copy h3 {
    margin: 0 0 2px;
    font-size: 11.5px;
    font-weight: 650;
}

.bp-order-item__copy a {
    display: block;
    overflow: hidden;
    color: #74819c;
    font-size: 9px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-order-item__copy a:hover {
    color: #c4b5fd;
}

.bp-order-item__numbers {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 12px;
    color: #7f8ca8;
    font-size: 8.5px;
    text-align: right;
}

.bp-order-item__numbers strong {
    color: #cbd5e7;
    font-weight: 650;
}

.bp-event-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bp-event-list li {
    position: relative;
    display: flex;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid rgb(38 48 74 / 55%);
}

.bp-event-list li:last-child {
    border-bottom: 0;
}

.bp-event-list__dot {
    width: 6px;
    height: 6px;
    margin-top: 5px;
    flex: 0 0 6px;
    border-radius: 99px;
    background: #8b5cf6;
}

.bp-event-list li > div {
    display: grid;
    gap: 1px;
}

.bp-event-list strong {
    color: #cbd5e7;
    font-size: 10px;
    font-weight: 600;
}

.bp-event-list small {
    color: #687691;
    font-size: 8.5px;
}

/* ---------- Wallet ---------- */

.bp-wallet-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 12px;
    margin-bottom: 14px;
}

.bp-wallet-balance {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border: 1px solid rgb(91 75 156 / 34%);
    border-radius: 18px;
    background:
        radial-gradient(ellipse 70% 100% at 100% 0%, rgb(59 130 246 / 20%), transparent 62%),
        linear-gradient(130deg, #1b1636, #111b35);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
}

.bp-wallet-balance .bp-eyebrow {
    margin-bottom: 7px;
    font-size: 8.5px;
}

.bp-wallet-balance > strong {
    display: block;
    color: #fff;
    font-size: clamp(32px, 4vw, 42px);
    font-weight: 760;
    letter-spacing: -.05em;
    line-height: 1.05;
}

.bp-wallet-balance > p {
    margin: 7px 0 16px;
    color: #a7b1c5;
    font-size: 10.5px;
}

.bp-wallet-balance .bp-button {
    min-height: 40px;
    font-size: 11px;
}

.bp-wallet-metrics {
    display: grid;
    gap: 10px;
}

.bp-wallet-metrics article {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    border: 1px solid var(--bp-border);
    border-radius: 14px;
    background: linear-gradient(150deg, #141d34, #0e1528);
}

.bp-metric-icon {
    display: grid;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    place-items: center;
    border: 1px solid rgb(167 139 250 / 22%);
    border-radius: 9px;
    color: #c4b5fd;
    background: rgb(124 58 237 / 9%);
}

.bp-metric-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.bp-wallet-metrics article > div {
    display: grid;
    gap: 1px;
}

.bp-wallet-metrics span {
    color: #8390aa;
    font-size: 8.5px;
}

.bp-wallet-metrics strong {
    color: #eef2f9;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.025em;
}

.bp-topup-list {
    display: grid;
    gap: 0;
}

.bp-topup-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 0;
    border-bottom: 1px solid rgb(38 48 74 / 62%);
}

.bp-topup-row:last-child {
    border-bottom: 0;
}

.bp-topup-row__icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border: 1px solid #33405f;
    border-radius: 8px;
    color: #c4b5fd;
    background: #17203a;
}

.bp-topup-row__icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.bp-topup-row > div {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 1px;
}

.bp-topup-row strong {
    color: #e7ecf5;
    font-size: 10.5px;
    font-weight: 650;
}

.bp-topup-row small {
    color: #74819c;
    font-size: 8.5px;
}

.bp-topup-row .bp-table__link {
    margin-left: auto;
}

/* ---------- Notifications page ---------- */

.bp-notification-list {
    display: grid;
    gap: 0;
}

.bp-notification-row {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 0;
    border-bottom: 1px solid rgb(38 48 74 / 62%);
}

.bp-notification-row:last-child {
    border-bottom: 0;
}

.bp-notification-row.is-unread {
    background: linear-gradient(90deg, rgb(124 58 237 / 5%), transparent);
}

.bp-notification-row__icon {
    display: grid;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    place-items: center;
    border: 1px solid #33405f;
    border-radius: 9px;
    color: #c4b5fd;
    background: #17203a;
}

.bp-notification-row__icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
}

.bp-notification-row__copy {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 2px;
}

.bp-notification-row__copy > div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.bp-notification-row__copy strong {
    color: #eef2f9;
    font-size: 11.5px;
    font-weight: 650;
}

.bp-notification-row__copy p {
    margin: 0;
    color: #8d9ab2;
    font-size: 10px;
    line-height: 1.55;
}

.bp-notification-row__copy small {
    color: #687691;
    font-size: 8.5px;
}

.bp-unread-dot {
    width: 5px;
    height: 5px;
    border-radius: 99px;
    background: #8b5cf6;
    box-shadow: 0 0 8px rgb(139 92 246 / 45%);
}

.bp-notification-row__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.bp-notification-row__actions .bp-button {
    min-height: 30px;
    padding-inline: 9px;
    font-size: 9.5px;
}

.bp-notification-row__actions .bp-link-button {
    font-size: 9.5px;
}

/* ---------- Profile and security ---------- */

.bp-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 14px;
}

.bp-profile-main {
    display: grid;
    gap: 12px;
}

.bp-profile-side {
    display: grid;
    gap: 12px;
}

.bp-profile-form {
    display: grid;
    gap: 13px;
}

.bp-profile-form .bp-button {
    justify-self: start;
}

.bp-security-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.bp-security-grid .bp-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.bp-security-grid .bp-panel p {
    flex: 1;
    margin: 0;
    color: #8d9ab2;
    font-size: 10.5px;
    line-height: 1.6;
}

.bp-security-grid .bp-summary-list {
    width: 100%;
}

.bp-security-grid .bp-button {
    min-height: 38px;
    font-size: 10.5px;
}

.bp-security-status {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px;
    border: 1px solid #303b58;
    border-radius: 10px;
    background: #0b1022;
}

.bp-security-status > span {
    display: grid;
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    place-items: center;
    border-radius: 8px;
    color: #c4b5fd;
    background: #17203a;
}

.bp-security-status svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.bp-security-status.is-on {
    border-color: rgb(34 197 94 / 28%);
    background: rgb(34 197 94 / 5%);
}

.bp-security-status.is-on > span {
    color: #86efac;
    background: rgb(34 197 94 / 10%);
}

.bp-security-status strong {
    display: block;
    font-size: 10.5px;
    font-weight: 650;
}

.bp-security-status p {
    margin: 1px 0 0 !important;
    color: #8390aa !important;
    font-size: 9px !important;
}

.bp-security-session-count {
    margin: 0;
    color: #aeb8cc;
    font-size: 11px;
}

.bp-security-session-count strong {
    color: #fff;
    font-size: 19px;
    font-weight: 750;
}

/* ---------- Support cards, tickets and messages ---------- */

.bp-support-card {
    position: relative;
}

.bp-support-card > span:first-child {
    display: grid;
    width: 37px;
    height: 37px;
    margin-bottom: 11px;
    place-items: center;
    border: 1px solid rgb(167 139 250 / 26%);
    border-radius: 10px;
    color: #c4b5fd;
    background: rgb(124 58 237 / 9%);
}

.bp-support-card > span:first-child svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.bp-support-card h2 {
    margin: 0 0 5px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.bp-support-card p {
    margin: 0 0 10px;
    color: #8d9ab2;
    font-size: 10.5px;
    line-height: 1.6;
}

.bp-support-card--wide {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 14px;
}

.bp-support-card--wide > span:first-child {
    margin: 0;
    flex: 0 0 37px;
}

.bp-support-card--wide > div {
    flex: 1;
}

.bp-support-card--wide h2 {
    margin-bottom: 2px;
}

.bp-support-card--wide p {
    margin: 0;
}

.bp-support-card--wide .bp-button {
    flex: 0 0 auto;
    min-height: 38px;
    font-size: 10.5px;
}

.bp-help-heading {
    max-width: 710px;
    margin-inline: auto;
    text-align: center;
}

.bp-help-heading p {
    margin-inline: auto;
}

.bp-help-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 34px;
}

.bp-help-card {
    display: flex;
    min-height: 190px;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    border: 1px solid var(--bp-border);
    border-radius: 17px;
    color: inherit;
    background: linear-gradient(155deg, #151e37, #0e1528);
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease;
}

.bp-help-card:hover {
    border-color: rgb(167 139 250 / 45%);
    transform: translateY(-2px);
}

.bp-help-card--accent {
    border-color: rgb(91 75 156 / 34%);
    background:
        radial-gradient(circle at 100% 0%, rgb(124 58 237 / 18%), transparent 58%),
        linear-gradient(155deg, #19152f, #0e1528);
}

.bp-help-card__icon {
    display: grid;
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    place-items: center;
    border: 1px solid rgb(167 139 250 / 26%);
    border-radius: 10px;
    color: #c4b5fd;
    background: rgb(124 58 237 / 9%);
}

.bp-help-card__icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
}

.bp-help-card strong {
    margin-bottom: 5px;
    color: #eef2f9;
    font-size: 13px;
    font-weight: 650;
}

.bp-help-card p {
    margin: 0 0 14px;
    color: #8d9ab2;
    font-size: 10.5px;
    line-height: 1.6;
}

.bp-help-card b {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    color: #c4b5fd;
    font-size: 9.5px;
    font-weight: 650;
}

.bp-help-faq {
    margin-top: 30px;
}

.bp-ticket-list {
    display: grid;
    gap: 0;
}

.bp-ticket-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid rgb(38 48 74 / 62%);
    color: inherit;
    text-decoration: none;
}

.bp-ticket-row:last-child {
    border-bottom: 0;
}

.bp-ticket-row:hover {
    background: rgb(28 39 67 / 28%);
}

.bp-ticket-row__icon {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border: 1px solid #33405f;
    border-radius: 9px;
    color: #c4b5fd;
    background: #17203a;
}

.bp-ticket-row__icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.bp-ticket-row > div {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 1px;
}

.bp-ticket-row strong {
    overflow: hidden;
    color: #e7ecf5;
    font-size: 11px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-ticket-row small {
    overflow: hidden;
    color: #74819c;
    font-size: 8.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-ticket-row > span[aria-hidden="true"] {
    color: #67758f;
    font-size: 11px;
}

.bp-ticket-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    align-items: start;
    gap: 14px;
}

.bp-ticket-side {
    display: grid;
    gap: 12px;
}

.bp-ticket-form {
    display: grid;
    gap: 13px;
}

.bp-ticket-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

.bp-ticket-form__actions .bp-button {
    min-height: 40px;
    font-size: 11px;
}

.bp-ticket-thread {
    min-width: 0;
}

.bp-message-list {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.bp-message {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.bp-message__avatar {
    display: grid;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    place-items: center;
    border: 1px solid #33405f;
    border-radius: 8px;
    color: #c4b5fd;
    background: #17203a;
    font-size: 8px;
    font-weight: 750;
}

.bp-message.is-staff .bp-message__avatar {
    border-color: rgb(167 139 250 / 30%);
    color: #fff;
    background: #4c1d95;
}

.bp-message__body {
    max-width: 88%;
    padding: 10px 12px;
    border: 1px solid #2c3752;
    border-radius: 0 11px 11px;
    background: #0e1528;
}

.bp-message.is-staff .bp-message__body {
    border-color: rgb(167 139 250 / 20%);
    background: rgb(124 58 237 / 6%);
}

.bp-message__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.bp-message__meta strong {
    color: #c4b5fd;
    font-size: 9px;
    font-weight: 650;
}

.bp-message__meta time {
    color: #687691;
    font-size: 8px;
}

.bp-message__body p {
    margin: 0;
    color: #cbd5e7;
    font-size: 10.5px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.bp-reply-form {
    display: grid;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid #33405f;
}

.bp-ticket-close {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgb(38 48 74 / 65%);
}

.bp-ticket-close .bp-link-button {
    color: #fca5a5;
    font-size: 9.5px;
}

.bp-closed-note {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px;
    border: 1px solid rgb(34 197 94 / 25%);
    border-radius: 10px;
    color: #bbf7d0;
    background: rgb(34 197 94 / 6%);
}

.bp-closed-note > span {
    color: #86efac;
}

.bp-closed-note p {
    flex: 1;
    margin: 0;
    font-size: 10px;
}

.bp-closed-note .bp-text-link {
    flex: 0 0 auto;
    font-size: 9.5px;
}

/* ---------- Admin overview ---------- */

.bp-admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .72fr);
    align-items: start;
    gap: 14px;
}

.bp-admin-side {
    display: grid;
    gap: 12px;
}

.bp-admin-order-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 315px;
    align-items: start;
    gap: 14px;
}

.bp-admin-order-grid > div {
    display: grid;
    gap: 12px;
}

.bp-admin-order-side {
    display: grid;
    gap: 12px;
}

.bp-admin-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 13px 15px;
    border: 1px solid #2c3752;
    border-radius: 11px;
    color: #8d9ab2;
    background: rgb(11 16 34 / 60%);
}

.bp-admin-note > span {
    flex: 0 0 auto;
    color: #93c5fd;
}

.bp-admin-note p {
    margin: 0;
    font-size: 10.5px;
    line-height: 1.6;
}

.bp-admin-note strong {
    color: #cbd5e7;
}

/* ---------- Auth ---------- */

.bp-auth-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    align-items: center;
    gap: clamp(36px, 7vw, 100px);
    max-width: 1000px;
    margin: 24px auto 40px;
}

.bp-auth-layout--single {
    grid-template-columns: minmax(0, 480px);
    justify-content: center;
}

.bp-auth-intro {
    max-width: 470px;
}

.bp-auth-intro h1 {
    margin: 0 0 12px;
    font-family: var(--bp-font-display);
    font-size: clamp(34px, 4vw, 50px);
    font-weight: 750;
    letter-spacing: -.05em;
    line-height: 1.05;
}

.bp-auth-intro > p {
    margin: 0;
    color: #97a4bb;
    font-size: 14px;
    line-height: 1.65;
}

.bp-auth-benefits {
    display: grid;
    gap: 9px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.bp-auth-benefits li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #c4ccdc;
    font-size: 11.5px;
}

.bp-auth-benefits li > span {
    display: grid;
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    place-items: center;
    border: 1px solid rgb(34 197 94 / 25%);
    border-radius: 7px;
    color: #86efac;
    background: rgb(34 197 94 / 8%);
    font-size: 8px;
}

.bp-auth-card {
    width: 100%;
    padding: 28px;
    border: 1px solid var(--bp-border);
    border-radius: 20px;
    background: linear-gradient(180deg, rgb(23 32 58 / 90%), rgb(12 18 35 / 96%));
    box-shadow: 0 30px 80px rgb(0 0 0 / 32%), inset 0 1px 0 rgb(255 255 255 / 5%);
}

.bp-auth-card--wide {
    max-width: 620px;
}

.bp-auth-card .bp-eyebrow {
    margin-bottom: 6px;
    font-size: 8.5px;
}

.bp-auth-card h1,
.bp-auth-card h2 {
    margin: 0 0 6px;
    font-family: var(--bp-font-display);
    font-size: 26px;
    font-weight: 750;
    letter-spacing: -.04em;
}

.bp-auth-card > p {
    margin: 0 0 20px;
    color: #8d9ab2;
    font-size: 11.5px;
    line-height: 1.6;
}

.bp-auth-card form {
    display: grid;
    gap: 13px;
}

.bp-auth-card .bp-form-grid {
    gap: 12px;
}

.bp-auth-card .bp-button--full {
    margin-top: 2px;
}

.bp-auth-form-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bp-auth-form-links a {
    color: #c4b5fd;
    font-size: 10.5px;
    text-decoration: none;
}

.bp-auth-form-links a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bp-auth-switch {
    margin: 18px 0 0;
    padding-top: 15px;
    border-top: 1px solid var(--bp-border);
    color: #8d9ab2;
    font-size: 10.5px;
    text-align: center;
}

.bp-auth-switch a {
    color: #c4b5fd;
    font-weight: 650;
    text-decoration: none;
}

.bp-auth-switch a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Financial success page ---------- */

.bp-success-hero {
    display: grid;
    justify-items: center;
    max-width: 760px;
    margin: 8px auto 28px;
    text-align: center;
}

.bp-success-hero__icon {
    display: grid;
    width: 130px;
    height: 130px;
    margin-bottom: 4px;
    place-items: center;
}

.bp-success-hero__icon img {
    display: block;
    max-width: 100%;
    height: auto;
}

.bp-success-hero h1 {
    margin: 0 0 9px;
    font-family: var(--bp-font-display);
    font-size: clamp(31px, 4vw, 44px);
    font-weight: 760;
    letter-spacing: -.05em;
    line-height: 1.06;
}

.bp-success-hero p {
    max-width: 550px;
    margin: 0;
    color: #9aa7bd;
    font-size: 13px;
    line-height: 1.65;
}

.bp-success-hero p strong {
    color: #f1f5fb;
}

.bp-success-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.bp-success-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 900px;
    margin-inline: auto;
}

.bp-success-grid .bp-text-link {
    margin-top: 12px;
    font-size: 10.5px;
}

.bp-success-note {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 900px;
    margin: 14px auto 0;
    padding: 12px 14px;
    border: 1px solid #2c3752;
    border-radius: 10px;
    color: #8d9ab2;
    background: rgb(11 16 34 / 60%);
}

.bp-success-note > span {
    flex: 0 0 auto;
    color: #93c5fd;
}

.bp-success-note p {
    flex: 1;
    margin: 0;
    font-size: 10px;
    line-height: 1.55;
}

.bp-success-note a {
    flex: 0 0 auto;
    color: #c4b5fd;
    font-size: 9.5px;
    font-weight: 650;
    text-decoration: none;
}

/* ---------- FAQ and help pages ---------- */

.bp-faq-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 28px;
    max-width: 1050px;
    margin-inline: auto;
}

.bp-faq-list {
    display: grid;
    gap: 8px;
}

.bp-faq-list details {
    overflow: hidden;
    border: 1px solid var(--bp-border);
    border-radius: 13px;
    background: rgb(17 24 45 / 72%);
}

.bp-faq-list summary {
    position: relative;
    display: flex;
    min-height: 50px;
    align-items: center;
    padding: 12px 46px 12px 16px;
    color: #e7ecf5;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.bp-faq-list summary::-webkit-details-marker {
    display: none;
}

.bp-faq-list summary > span {
    position: absolute;
    top: 50%;
    right: 15px;
    width: 18px;
    height: 18px;
    border: 1px solid #3a4664;
    border-radius: 6px;
    transform: translateY(-50%);
}

.bp-faq-list summary > span::before,
.bp-faq-list summary > span::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 1.5px;
    border-radius: 2px;
    background: #a78bfa;
    content: "";
    transform: translate(-50%, -50%);
}

.bp-faq-list summary > span::after {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform 160ms ease;
}

.bp-faq-list details[open] summary > span::after {
    transform: translate(-50%, -50%) rotate(0);
}

.bp-faq-list details[open] summary {
    border-bottom: 1px solid var(--bp-border);
    color: #fff;
}

.bp-faq-list details p {
    margin: 0;
    padding: 14px 16px;
    color: #97a4bb;
    font-size: 11.5px;
    line-height: 1.7;
}

.bp-faq-list details p strong {
    color: #dbe3f2;
}

.bp-faq-side {
    position: sticky;
    top: 100px;
    padding: 22px;
    border: 1px solid rgb(91 75 156 / 30%);
    border-radius: 17px;
    background:
        radial-gradient(circle at 100% 0%, rgb(124 58 237 / 17%), transparent 58%),
        #11182d;
}

.bp-faq-side h2 {
    margin: 0 0 7px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.025em;
}

.bp-faq-side > p {
    margin: 0 0 15px;
    color: #8d9ab2;
    font-size: 10.5px;
    line-height: 1.6;
}

.bp-faq-side .bp-button {
    width: 100%;
    margin-bottom: 9px;
    min-height: 40px;
    font-size: 10.5px;
}

.bp-faq-side .bp-detail-faq {
    margin: 0;
    font-size: 10px;
}

.bp-help-notice {
    display: grid;
    gap: 3px;
    margin-top: 14px;
    padding: 12px 13px;
    border: 1px solid rgb(59 130 246 / 24%);
    border-radius: 10px;
    color: #bfdbfe;
    background: rgb(59 130 246 / 6%);
    font-size: 10.5px;
    line-height: 1.55;
}

.bp-help-notice strong {
    color: #dbeafe;
    font-size: 11px;
}

.bp-help-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.bp-help-actions .bp-button {
    min-height: 42px;
    font-size: 11.5px;
}

/* ---------- Institutional pages ---------- */

.bp-steps-grid,
.bp-steps-grid--page {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
    margin-top: 24px;
}

.bp-step-icon {
    display: grid;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    place-items: center;
    border: 1px solid rgb(167 139 250 / 26%);
    border-radius: 11px;
    color: #c4b5fd;
    background: rgb(124 58 237 / 9%);
}

.bp-step-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bp-step-card h2 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 680;
    letter-spacing: -.02em;
}

.bp-steps-grid .bp-step-card p {
    color: #8d9ab2;
    font-size: 11.5px;
    line-height: 1.65;
}

.bp-steps-grid .bp-step-number {
    position: static;
    display: inline-grid;
    margin-bottom: 13px;
}

.bp-pricing-state {
    display: grid;
    justify-items: center;
    max-width: 820px;
    margin: 20px auto 0;
    padding: 46px 28px;
    border: 1px solid var(--bp-border);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 0%, rgb(124 58 237 / 11%), transparent 55%),
        linear-gradient(180deg, #11182d, #0c1225);
    text-align: center;
}

.bp-pricing-state .bp-empty-icon {
    display: grid;
    width: 54px;
    height: 54px;
    margin-bottom: 15px;
    place-items: center;
    border: 1px solid rgb(167 139 250 / 25%);
    border-radius: 14px;
    color: #c4b5fd;
    background: rgb(124 58 237 / 9%);
}

.bp-pricing-state .bp-empty-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
}

.bp-pricing-state h2 {
    margin: 0 0 8px;
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 720;
    letter-spacing: -.03em;
}

.bp-pricing-state > p {
    max-width: 540px;
    margin: 0 0 18px;
    color: #8d9ab2;
    font-size: 12px;
    line-height: 1.65;
}

.bp-contact-layout {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 20px;
    max-width: 980px;
    margin-inline: auto;
}

.bp-contact-info {
    padding: 26px;
    border: 1px solid var(--bp-border);
    border-radius: 18px;
    background: linear-gradient(160deg, #141d34, #0e1528);
}

.bp-contact-info__icon {
    display: grid;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    place-items: center;
    border: 1px solid rgb(167 139 250 / 24%);
    border-radius: 11px;
    color: #c4b5fd;
    background: rgb(124 58 237 / 9%);
}

.bp-contact-info__icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.bp-contact-info h2 {
    margin: 0 0 7px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.025em;
}

.bp-contact-info > p {
    margin: 0 0 12px;
    color: #8d9ab2;
    font-size: 11.5px;
    line-height: 1.65;
}

.bp-contact-info > .bp-text-link {
    margin-top: 13px;
    font-size: 10.5px;
}

.bp-contact-form {
    display: grid;
    gap: 12px;
    padding: 26px;
    border: 1px solid var(--bp-border);
    border-radius: 18px;
    background: linear-gradient(180deg, #11182d, #0d1427);
}

.bp-contact-form h2 {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.025em;
}

.bp-contact-form .bp-button {
    justify-self: start;
    min-height: 42px;
    font-size: 11.5px;
}

/* ---------- Legal pages ---------- */

.bp-policy-heading {
    max-width: 760px;
    margin: 0 auto 24px;
    text-align: center;
}

.bp-policy-heading h1 {
    margin: 0 0 8px;
    font-family: var(--bp-font-display);
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 750;
    letter-spacing: -.045em;
    line-height: 1.08;
}

.bp-policy-heading p {
    margin: 0;
    color: #8d9ab2;
    font-size: 12px;
}

.bp-policy-document {
    max-width: 820px;
    margin-inline: auto;
    padding: clamp(22px, 4vw, 42px);
    border: 1px solid var(--bp-border);
    border-radius: 20px;
    background: linear-gradient(180deg, rgb(17 24 45 / 90%), rgb(11 16 34 / 94%));
    box-shadow: var(--bp-shadow-soft);
}

.bp-policy-document h2 {
    margin: 26px 0 8px;
    color: #eef2f9;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.bp-policy-document h2:first-of-type {
    margin-top: 6px;
}

.bp-policy-document > p {
    margin: 0 0 12px;
    color: #97a4bb;
    font-size: 12px;
    line-height: 1.75;
}

.bp-policy-alert {
    display: grid;
    gap: 4px;
    margin-bottom: 22px;
    padding: 14px 15px;
    border: 1px solid rgb(245 158 11 / 28%);
    border-radius: 11px;
    color: #fde68a;
    background: rgb(245 158 11 / 6%);
    font-size: 11px;
    line-height: 1.6;
}

.bp-policy-alert strong {
    color: #fef3c7;
    font-size: 11.5px;
}

.bp-policy-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
    padding-top: 17px;
    border-top: 1px solid var(--bp-border);
}

.bp-policy-links a {
    color: #c4b5fd;
    font-size: 10.5px;
    font-weight: 600;
    text-decoration: none;
}

.bp-policy-links a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Error state ---------- */

.bp-error-state {
    display: grid;
    justify-items: center;
    max-width: 700px;
    margin: 22px auto 0;
    padding: 44px 28px;
    border: 1px solid var(--bp-border);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 0%, rgb(124 58 237 / 10%), transparent 52%),
        linear-gradient(180deg, #11182d, #0c1225);
    text-align: center;
}

.bp-error-code {
    color: #a78bfa;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
}

.bp-error-state h1 {
    margin: 0 0 9px;
    font-family: var(--bp-font-display);
    font-size: clamp(28px, 4vw, 39px);
    font-weight: 750;
    letter-spacing: -.045em;
    line-height: 1.1;
}

.bp-error-state > p {
    max-width: 510px;
    margin: 0;
    color: #97a4bb;
    font-size: 12.5px;
    line-height: 1.65;
}

.bp-error-next {
    display: grid;
    gap: 3px;
    max-width: 520px;
    margin: 20px 0 0;
    padding: 11px 14px;
    border: 1px solid #2c3752;
    border-radius: 10px;
    color: #8d9ab2;
    background: #0b1022;
    font-size: 10.5px;
    line-height: 1.55;
    text-align: left;
}

.bp-error-next strong {
    color: #cbd5e7;
    font-size: 10.5px;
}

.bp-error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-top: 20px;
}

.bp-error-state small {
    margin-top: 20px;
    color: #687691;
    font-size: 9px;
    line-height: 1.5;
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
    .bp-header__inner {
        gap: 16px;
    }

    .bp-desktop-nav {
        gap: 1px;
        margin-left: 0;
    }

    .bp-desktop-nav > a,
    .bp-desktop-nav > details > summary,
    .bp-platform-menu > summary {
        padding-inline: 8px;
        font-size: 12px;
    }

    .bp-account-trigger__copy {
        display: none;
    }

    .bp-hero {
        grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr);
        gap: 31px;
    }

    .bp-float-card--platforms {
        right: -8px;
    }

    .bp-float-card--payment {
        left: -5px;
    }

    .bp-catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1060px) {
    .bp-desktop-nav {
        display: none;
    }

    .bp-menu-trigger {
        display: inline-grid;
    }

    .bp-header__inner {
        gap: 12px;
    }

    .bp-hero {
        min-height: 0;
        gap: 26px;
    }

    .bp-hero__copy h1 {
        font-size: clamp(42px, 5.8vw, 60px);
    }

    .bp-hero__visual {
        padding-left: 8px;
    }

    .bp-hero__frame {
        transform: none;
    }

    .bp-benefit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bp-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bp-dashboard-grid,
    .bp-checkout-layout,
    .bp-pix-layout,
    .bp-cart-layout,
    .bp-admin-grid {
        grid-template-columns: minmax(0, 1fr) 290px;
    }

    .bp-order-layout,
    .bp-profile-layout,
    .bp-ticket-layout,
    .bp-admin-order-grid {
        grid-template-columns: minmax(0, 1fr) 275px;
    }

    .bp-account-layout {
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 18px;
    }
}

@media (max-width: 900px) {
    .bp-main {
        padding-block: 46px 86px;
    }

    .bp-main:has(.bp-hero) {
        padding-top: 28px;
    }

    .bp-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding-bottom: 20px;
    }

    .bp-hero__copy {
        max-width: 720px;
    }

    .bp-hero__copy h1 {
        font-size: clamp(42px, 7.6vw, 64px);
    }

    .bp-hero__subtitle {
        max-width: 610px;
        margin-top: 18px;
    }

    .bp-hero__visual {
        width: min(100%, 590px);
        max-width: 590px;
        justify-self: center;
        padding: 0;
    }

    .bp-hero__frame {
        border-radius: 23px;
    }

    .bp-float-card--platforms {
        top: 9%;
        right: 2%;
    }

    .bp-float-card--payment {
        bottom: 2%;
        left: 2%;
    }

    .bp-platform-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bp-section {
        margin-top: 68px;
    }

    .bp-section__head {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
        margin-bottom: 22px;
    }

    .bp-section__head--center {
        align-items: center;
    }

    .bp-benefits-section {
        padding: 30px 22px 22px;
    }

    .bp-step-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bp-step-card {
        display: grid;
        grid-template-columns: 160px minmax(0, 1fr);
        align-items: center;
        gap: 18px;
        padding: 18px;
    }

    .bp-step-card__number {
        top: 14px;
        right: 14px;
    }

    .bp-step-card__art {
        min-height: 130px;
        margin: 0;
    }

    .bp-step-card__art img {
        max-width: 150px;
    }

    .bp-step-card h3 {
        margin-bottom: 5px;
    }

    .bp-final-cta {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
        margin-top: 68px;
        padding: 30px;
    }

    .bp-footer__grid {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 30px;
    }

    .bp-footer__grid > div:last-child {
        grid-column: 2 / -1;
    }

    .bp-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bp-platform-directory {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bp-quick-order__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bp-quick-order__side {
        position: static;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .bp-cart-layout,
    .bp-checkout-layout,
    .bp-pix-layout,
    .bp-funds-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .bp-cart-summary,
    .bp-checkout-side,
    .bp-pix-side,
    .bp-funds-side {
        position: static;
    }

    .bp-pix-side,
    .bp-checkout-side,
    .bp-funds-side {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bp-pix-body {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 18px;
    }

    .bp-account-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .bp-account-sidebar {
        position: static;
    }

    .bp-account-nav {
        display: flex;
        gap: 4px;
        overflow-x: auto;
        padding: 7px;
        scrollbar-width: thin;
    }

    .bp-account-nav__label,
    .bp-account-help {
        display: none;
    }

    .bp-account-nav a {
        min-height: 38px;
        flex: 0 0 auto;
        padding-inline: 10px;
        white-space: nowrap;
    }

    .bp-account-nav a[aria-current="page"] {
        box-shadow: inset 0 -2px 0 #8b5cf6;
    }

    .bp-dashboard-grid,
    .bp-order-layout,
    .bp-profile-layout,
    .bp-admin-grid,
    .bp-admin-order-grid,
    .bp-ticket-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .bp-dashboard-side,
    .bp-order-side,
    .bp-profile-side,
    .bp-admin-side,
    .bp-admin-order-side,
    .bp-ticket-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        display: grid;
    }

    .bp-wallet-overview {
        grid-template-columns: minmax(0, 1fr);
    }

    .bp-wallet-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bp-support-card--wide {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .bp-support-card--wide .bp-button {
        width: 100%;
    }

    .bp-auth-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        max-width: 540px;
    }

    .bp-auth-intro {
        max-width: none;
        text-align: center;
    }

    .bp-auth-benefits {
        display: none;
    }

    .bp-auth-intro h1 {
        font-size: clamp(32px, 6vw, 42px);
    }

    .bp-faq-page-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .bp-faq-side {
        position: static;
    }

    .bp-contact-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .bp-success-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bp-help-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bp-steps-grid,
    .bp-steps-grid--page {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 740px) {
    .bp-container {
        width: min(100% - 32px, var(--bp-container));
    }

    .bp-header__inner {
        min-height: 68px;
    }

    .bp-brand__mark {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .bp-brand__copy strong {
        font-size: 15px;
    }

    .bp-brand__copy small {
        font-size: 6.5px;
    }

    .bp-header__actions {
        gap: 3px;
    }

    .bp-icon-button {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .bp-login,
    .bp-header__signup,
    .bp-account-trigger {
        display: none;
    }

    .bp-notifications .bp-popover__panel {
        position: fixed;
        top: 74px;
        right: 16px;
        left: 16px;
        width: auto;
    }

    .bp-account-menu__panel {
        position: fixed;
        top: 74px;
        right: 16px;
        width: 268px;
    }

    .bp-bottom-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: var(--bp-z-bottom-nav);
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
        border-top: 1px solid rgb(38 48 74 / 86%);
        background: rgb(8 12 27 / 94%);
        box-shadow: 0 -12px 30px rgb(0 0 0 / 20%);
        backdrop-filter: blur(18px);
    }

    .bp-bottom-nav a {
        display: grid;
        min-height: 48px;
        justify-items: center;
        gap: 3px;
        padding: 5px 3px;
        border-radius: 8px;
        color: #7f8ca8;
        font-size: 8.5px;
        font-weight: 550;
        text-decoration: none;
    }

    .bp-bottom-nav a svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.65;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .bp-bottom-nav a[aria-current="page"] {
        color: #c4b5fd;
        background: rgb(124 58 237 / 8%);
    }

    .bp-main {
        padding-block: 32px 84px;
    }

    .bp-main:has(.bp-hero) {
        padding-top: 20px;
        padding-bottom: 82px;
    }

    .bp-breadcrumbs {
        margin-bottom: 20px;
        font-size: 10.5px;
    }

    .bp-eyebrow {
        font-size: 9.5px;
    }

    .bp-page-heading {
        margin-bottom: 24px;
    }

    .bp-page-heading--row {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .bp-page-heading__actions {
        width: 100%;
    }

    .bp-hero__copy h1 {
        font-size: clamp(36px, 10.2vw, 52px);
        letter-spacing: -.05em;
    }

    .bp-hero__subtitle {
        font-size: 14px;
        line-height: 1.65;
    }

    .bp-hero__actions {
        gap: 8px;
        margin-top: 24px;
    }

    .bp-hero__actions .bp-button {
        min-height: 48px;
        flex: 1 1 160px;
        font-size: 12.5px;
    }

    .bp-hero__trust {
        gap: 10px 14px;
        margin-top: 21px;
        font-size: 9.5px;
    }

    .bp-hero__visual {
        width: 100%;
    }

    .bp-float-card {
        padding: 8px 10px;
        border-radius: 10px;
    }

    .bp-float-card__icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .bp-float-card strong {
        font-size: 10px;
    }

    .bp-float-card small {
        font-size: 8.5px;
    }

    .bp-platforms-section {
        margin-top: 54px;
    }

    .bp-platform-grid {
        gap: 8px;
    }

    .bp-platform-card {
        min-height: 74px;
        gap: 8px;
        padding: 10px;
        border-radius: 12px;
    }

    .bp-platform-card__mark {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-radius: 9px;
        font-size: 13px;
    }

    .bp-platform-card__copy strong {
        font-size: 11px;
    }

    .bp-platform-card__copy small {
        font-size: 8.5px;
    }

    .bp-platform-card__arrow {
        display: none;
    }

    .bp-benefits-section {
        padding: 22px 14px 14px;
        border-radius: 20px;
    }

    .bp-benefit-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .bp-benefit-card {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 0 11px;
        align-items: center;
        padding: 14px;
    }

    .bp-benefit-card__icon {
        grid-row: 1 / 3;
        width: 38px;
        height: 38px;
        margin: 0;
    }

    .bp-benefit-card h3 {
        margin: 0;
        font-size: 13px;
    }

    .bp-benefit-card p {
        margin: 0;
        font-size: 10.5px;
        line-height: 1.55;
    }

    .bp-section {
        margin-top: 56px;
    }

    .bp-section__head h2 {
        font-size: clamp(25px, 7vw, 32px);
    }

    .bp-section__head p {
        font-size: 12px;
    }

    .bp-section__head .bp-text-link {
        font-size: 11px;
    }

    .bp-catalog-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .bp-catalog-card {
        min-height: 0;
        padding: 17px;
    }

    .bp-catalog-card p {
        -webkit-line-clamp: 2;
    }

    .bp-catalog-card__bottom .bp-button {
        min-height: 36px;
    }

    .bp-empty-panel {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        padding: 20px;
    }

    .bp-empty-panel .bp-empty-illustration {
        width: 90px;
        flex-basis: 90px;
    }

    .bp-empty-panel > .bp-button {
        width: 100%;
        margin-left: 0;
    }

    .bp-step-card {
        display: block;
        padding: 17px;
    }

    .bp-step-card__art {
        min-height: 140px;
        margin-bottom: 16px;
    }

    .bp-step-card__art img {
        max-width: 200px;
    }

    .bp-final-cta {
        margin-top: 56px;
        padding: 24px 19px;
    }

    .bp-final-cta__actions {
        width: 100%;
    }

    .bp-final-cta__actions .bp-button {
        min-height: 46px;
        flex: 1 1 150px;
        font-size: 12px;
    }

    .bp-filter-panel {
        align-items: stretch;
        flex-direction: column;
        padding: 11px;
    }

    .bp-search-field {
        min-width: 0;
        flex-basis: auto;
    }

    .bp-filter-control {
        min-width: 0;
        flex-basis: auto;
    }

    .bp-filter-actions {
        justify-content: stretch;
    }

    .bp-filter-actions .bp-button {
        flex: 1;
    }

    .bp-platform-directory {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .bp-quick-order__heading {
        gap: 12px;
    }

    .bp-quick-order__trust {
        align-self: flex-start;
    }

    .bp-quick-order__side {
        grid-template-columns: minmax(0, 1fr);
    }

    .bp-quick-order__side .bp-live-preview {
        order: 2;
    }

    .bp-config-card {
        padding: 15px;
    }

    .bp-pix-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .bp-qr-frame {
        max-width: 230px;
    }

    .bp-pix-code > div {
        flex-direction: column;
    }

    .bp-pix-code .bp-button {
        width: 100%;
        min-height: 42px;
    }

    .bp-checkout-steps {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .bp-checkout-steps li {
        justify-content: center;
        padding: 8px 5px;
    }

    .bp-checkout-steps li > div {
        display: none;
    }

    .bp-checkout-steps li.is-active > div {
        display: grid;
    }

    .bp-checkout-steps li.is-active {
        flex: 2;
        justify-content: flex-start;
        padding-inline: 9px;
    }

    .bp-checkout-steps li.is-active strong {
        font-size: 9.5px;
    }

    .bp-checkout-steps li.is-active small {
        font-size: 8px;
    }

    .bp-checkout-item {
        align-items: flex-start;
    }

    .bp-checkout-item__amount {
        font-size: 12px;
    }

    .bp-checkout-item__target {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .bp-checkout-login {
        align-items: flex-start;
        flex-direction: column;
    }

    .bp-checkout-login__actions {
        width: 100%;
    }

    .bp-checkout-login__actions .bp-button {
        flex: 1;
    }

    .bp-pix-side,
    .bp-checkout-side,
    .bp-funds-side,
    .bp-dashboard-side,
    .bp-order-side,
    .bp-profile-side,
    .bp-admin-side,
    .bp-admin-order-side,
    .bp-ticket-side {
        grid-template-columns: minmax(0, 1fr);
    }

    .bp-payment-choice {
        padding: 11px;
    }

    .bp-payment-choice__icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .bp-pix-card {
        padding: 17px;
    }

    .bp-pix-card__head {
        gap: 10px;
    }

    .bp-pix-card__head h2 {
        font-size: 18px;
    }

    .bp-payment-result {
        padding: 32px 18px;
    }

    .bp-payment-result__icon {
        width: 96px;
        height: 96px;
    }

    .bp-payment-result__actions {
        width: 100%;
    }

    .bp-payment-result__actions .bp-button {
        flex: 1 1 150px;
    }

    .bp-account-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 16px;
    }

    .bp-account-heading h1 {
        font-size: 27px;
    }

    .bp-account-heading__actions {
        width: 100%;
    }

    .bp-account-heading__actions .bp-button {
        flex: 1;
    }

    .bp-account-nav a {
        min-height: 35px;
        font-size: 10.5px;
    }

    .bp-account-nav a > span:first-child {
        display: none;
    }

    .bp-stat-grid {
        gap: 8px;
        margin-bottom: 12px;
    }

    .bp-stat-card {
        padding: 12px;
    }

    .bp-stat-card__icon {
        width: 27px;
        height: 27px;
        margin-bottom: 4px;
    }

    .bp-stat-card strong {
        font-size: 19px;
    }

    .bp-stat-card__label {
        font-size: 8.5px;
    }

    .bp-stat-card a {
        font-size: 8.5px;
    }

    .bp-panel {
        padding: 17px;
        border-radius: 16px;
    }

    .bp-panel__head {
        margin-bottom: 14px;
    }

    .bp-panel__head h2 {
        font-size: 16px;
    }

    .bp-table thead {
        display: none;
    }

    .bp-table,
    .bp-table tbody,
    .bp-table tr,
    .bp-table td {
        display: block;
        width: 100%;
    }

    .bp-table tr {
        padding: 10px 0;
        border-bottom: 1px solid rgb(38 48 74 / 62%);
    }

    .bp-table tr:last-child {
        border-bottom: 0;
    }

    .bp-table td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        padding: 3px 0;
        border: 0;
        font-size: 10px;
        text-align: right;
    }

    .bp-table td::before {
        color: #7f8ca8;
        font-size: 8px;
        font-weight: 650;
        letter-spacing: .03em;
        text-align: left;
        text-transform: uppercase;
        content: attr(data-label);
    }

    .bp-table td:last-child {
        justify-content: flex-end;
        padding-top: 6px;
    }

    .bp-table td:last-child::before {
        display: none;
    }

    .bp-orders-filter {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .bp-orders-filter .bp-search-field {
        max-width: none;
        flex: 1 1 100%;
    }

    .bp-orders-filter .bp-button {
        flex: 1;
    }

    .bp-filter-reset {
        padding: 10px 0;
        text-align: center;
    }

    .bp-filter-chips {
        gap: 5px;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }

    .bp-filter-chip {
        flex: 0 0 auto;
        font-size: 9px;
    }

    .bp-order-item {
        flex-wrap: wrap;
    }

    .bp-order-item__copy {
        flex-basis: calc(100% - 45px);
    }

    .bp-order-item__numbers {
        width: 100%;
        flex-basis: 100%;
        justify-content: space-between;
        margin-top: 5px;
        padding-left: 45px;
        text-align: left;
    }

    .bp-order-item__numbers span {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .bp-wallet-balance {
        padding: 20px;
    }

    .bp-wallet-metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    .bp-security-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bp-security-grid .bp-button {
        width: 100%;
    }

    .bp-notification-row {
        flex-wrap: wrap;
    }

    .bp-notification-row__actions {
        width: 100%;
        justify-content: flex-start;
        padding-left: 46px;
    }

    .bp-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bp-profile-form .bp-button {
        width: 100%;
    }

    .bp-ticket-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .bp-ticket-row .bp-status {
        margin-left: 42px;
    }

    .bp-message__body {
        max-width: calc(100% - 38px);
    }

    .bp-closed-note {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .bp-closed-note .bp-text-link {
        margin-left: 24px;
    }

    .bp-support-card--wide {
        flex-direction: column;
    }

    .bp-auth-card {
        padding: 21px;
        border-radius: 17px;
    }

    .bp-auth-card h1,
    .bp-auth-card h2 {
        font-size: 23px;
    }

    .bp-success-hero {
        margin-bottom: 22px;
    }

    .bp-success-hero__icon {
        width: 105px;
        height: 105px;
    }

    .bp-success-note {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .bp-success-note a {
        margin-left: 24px;
    }

    .bp-help-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bp-help-card {
        min-height: 0;
    }

    .bp-faq-page-layout {
        gap: 16px;
    }

    .bp-faq-list summary {
        min-height: 46px;
        padding: 11px 42px 11px 13px;
        font-size: 11.5px;
    }

    .bp-faq-list details p {
        padding: 12px 13px;
        font-size: 10.5px;
    }

    .bp-contact-info,
    .bp-contact-form {
        padding: 19px;
    }

    .bp-policy-document {
        padding: 20px 17px;
    }

    .bp-error-state {
        padding: 32px 18px;
    }

    .bp-error-actions {
        width: 100%;
    }

    .bp-error-actions .bp-button {
        flex: 1 1 150px;
    }

    .bp-footer {
        padding-bottom: 66px;
    }

    .bp-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 20px;
        padding-block: 38px 30px;
    }

    .bp-footer__brand {
        grid-column: 1 / -1;
    }

    .bp-footer__grid > div:last-child {
        grid-column: auto;
    }

    .bp-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
        font-size: 8.5px;
    }

    .bp-toast-region {
        right: 12px;
        bottom: 76px;
        left: 12px;
        width: auto;
    }
}

@media (max-width: 480px) {
    .bp-container {
        width: min(100% - 26px, var(--bp-container));
    }

    .bp-hero__copy h1 {
        font-size: clamp(34px, 11vw, 43px);
    }

    .bp-hero__trust span:nth-child(3) {
        display: none;
    }

    .bp-hero__frame {
        border-radius: 19px;
    }

    .bp-float-card--platforms {
        top: 5%;
        right: 0;
    }

    .bp-float-card--payment {
        bottom: -1%;
        left: 0;
    }

    .bp-float-card small {
        display: none;
    }

    .bp-platform-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .bp-platform-card__mark {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
        font-size: 11px;
    }

    .bp-platform-card__copy strong {
        font-size: 10px;
    }

    .bp-platform-card__copy small {
        font-size: 8px;
    }

    .bp-stat-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bp-stat-card {
        grid-template-columns: 30px minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 9px;
        row-gap: 0;
    }

    .bp-stat-card__icon {
        grid-row: 1 / 3;
        margin: 0;
    }

    .bp-stat-card__label {
        grid-column: 2;
    }

    .bp-stat-card strong {
        grid-column: 3;
        grid-row: 1 / 3;
        font-size: 19px;
    }

    .bp-stat-card a,
    .bp-stat-card__hint {
        grid-column: 2;
        margin: 0;
    }

    .bp-account-heading__actions .bp-button {
        width: 100%;
        flex: 0 0 100%;
    }

    .bp-account-nav a {
        font-size: 9.5px;
    }

    .bp-footer__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .bp-footer__brand {
        grid-column: auto;
    }

    .bp-section__head .bp-text-link {
        align-self: flex-start;
    }

    .bp-final-cta__actions .bp-button {
        flex: 0 0 100%;
    }

    .bp-checkout-item__mark {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .bp-checkout-item__copy h3 {
        font-size: 11.5px;
    }

    .bp-checkout-item__amount {
        font-size: 11px;
    }

    .bp-payment-methods--checkout {
        gap: 7px;
    }

    .bp-payment-choice__check {
        display: none;
    }

    .bp-payment-choice small {
        font-size: 9px;
    }

    .bp-inline-warning {
        flex-wrap: wrap;
    }

    .bp-inline-warning a {
        width: 100%;
        padding-left: 24px;
    }

    .bp-amount-input input {
        font-size: 22px;
    }

    .bp-notification-row__actions {
        padding-left: 0;
    }

    .bp-ticket-row .bp-status {
        margin-left: 0;
    }

    .bp-message__avatar {
        width: 25px;
        height: 25px;
        flex-basis: 25px;
    }

    .bp-message__body {
        max-width: calc(100% - 34px);
    }

    .bp-pix-card__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .bp-qr-frame {
        max-width: 205px;
    }

    .bp-success-hero h1 {
        font-size: 29px;
    }

    .bp-error-actions .bp-button,
    .bp-payment-result__actions .bp-button {
        flex: 0 0 100%;
    }

    .bp-faq-side {
        padding: 17px;
    }
}

@media (max-width: 360px) {
    .bp-container {
        width: min(100% - 20px, var(--bp-container));
    }

    .bp-brand__copy small {
        display: none;
    }

    .bp-header__actions {
        gap: 0;
    }

    .bp-icon-button {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .bp-hero__copy h1 {
        font-size: 32px;
    }

    .bp-hero__subtitle {
        font-size: 13px;
    }

    .bp-hero__actions .bp-button {
        flex-basis: 100%;
    }

    .bp-float-card {
        display: none;
    }

    .bp-panel {
        padding: 14px;
    }

    .bp-account-nav a {
        font-size: 9px;
    }
}

@media (min-width: 1600px) {
    .bp-hero {
        min-height: 700px;
    }

    .bp-hero__copy h1 {
        font-size: 74px;
    }

    .bp-hero__visual {
        max-width: 610px;
    }
}

/* == V20 CHUNK END == */