/**
 * PURPOSE: Single source for the shared .lolga-black foundation tokens.
 * OWNS: The 16 base custom properties, plus background, color, font-family and .font-sans on .lolga-black.
 * MUST NOT: Use :root, body, or universal selectors. Do not add colors, rename variables, or replace hardcoded brand colors.
 * RELATED JS: none
 * RELATED DOC: docs/standards/css-page-ownership.md, docs/standards/ui-design-system.md
 * DESIGN SOURCE: existing home-shell.css and app-black.css token block, values unchanged
 */

/* LOLGA black theme tokens — scoped, never on :root */

.lolga-black {
    --bg: #101010;
    --panel-2: #181818;
    --nav: #202020;
    --panel: #202020;
    --panel-hover: #2a2a2a;
    --line: #323232;
    --text: #bbbbbb;
    --muted: #888888;
    --white: #ffffff;
    --green: #45d42f;
    --green-bright: #55ef3f;
    --yellow: #f6b204;
    --fail: #ff5b5b;
    --cta-ink: #081207;
    --max: 1180px;
    --font-lolga: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-lolga);
}

.lolga-black.font-sans,
.lolga-black .font-sans {
    font-family: var(--font-lolga);
}

/* LOLGA black Shared Shell — canonical Header, Footer and Cart source. */

.lolga-black,
.lolga-black body {
    --header-h: 70px;
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}

/* Shared low-contrast background: paint once per page surface, not on cards.
 * The base stays #101010; a slight top highlight adds depth without tinting
 * commerce controls or causing a scroll-linked gradient repaint. */

html.lolga-black,
body.lolga-black {
    --lolga-page-gradient: linear-gradient(240deg, #0d0d0d 0%, #171717 340px, #121212 720px, #101010 1150px);
    background: var(--lolga-page-gradient) no-repeat #101010;
    color: var(--text, #bbbbbb);
}

/* Full-page wrappers should share the same canvas instead of covering the
 * body gradient with the old flat #101010 from app-black.css. */

.lolga-black body :is(.catalog-page, .pdp-page, .checkout-page, .db-shell, .news-page, .track-page, .thanks-page, .points-shop-page) {
    background: var(--lolga-page-gradient) no-repeat #101010;
}

body.lolga-black.lock {
    overflow: hidden;
}

.lolga-black [x-cloak],
.lolga-black [data-auth-guest][hidden],
.lolga-black [data-auth-user][hidden],
.lolga-black [data-game-empty][hidden],
.lolga-black [data-game-name][hidden] {
    display: none !important;
}

.lolga-black .site-header a,
.lolga-black .mobile-menu a,
.lolga-black .footer-v14 a,
.lolga-black .cart-drawer a,
.lolga-black .account-menu a {
    color: inherit;
    text-decoration: none;
}

.lolga-black .overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: rgba(0, 0, 0, 0.66);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.lolga-black .overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.lolga-black .lolga-shell-header {
    z-index: 1600;
}

.lolga-black .site-header {
    position: relative;
    z-index: 1600;
    background: #111111;
    overflow: visible;
}

/* One in-flow sticky Header for every page and viewport size.
 * The wrapper (not the child .site-header) must own the positioning:
 * no fixed-header spacer, scroll listener or content jump. */

.lolga-black .lolga-shell-header.is-sticky {
    position: sticky;
    top: 0;
    z-index: 1600;
}

.lolga-black .lolga-cart-anchor {
    position: absolute;
    right: 28px;
    top: 35px;
    width: 1px;
    height: 1px;
}

.lolga-black .desk-head {
    width: 100%;
    min-height: 70px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.lolga-black .head-left,
.lolga-black .head-right,
.lolga-black .nav-links,
.lolga-black .logo,
.lolga-black .head-btn,
.lolga-black .head-link {
    display: flex;
    align-items: center;
}

.lolga-black .head-left {
    gap: 26px;
    min-width: 0;
    flex: 0 1 auto;
}

.lolga-black .head-right {
    gap: 13px;
    min-width: 0;
    flex: 1;
    justify-content: flex-end;
}

.lolga-black .logo {
    flex: 0 0 auto;
}

.lolga-black .logo img {
    display: block;
    width: 180px;
    height: auto;
}

.lolga-black .nav-links {
    gap: 10px;
    white-space: nowrap;
    letter-spacing: 0;
    word-spacing: 0.08em;
}

.lolga-black .nav-links a,
.lolga-black .games-trigger,
.lolga-black .header-type-trigger {
    border: 0;
    background: transparent;
    color: #fff;
    min-height: 42px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.lolga-black .nav-links a:hover,
.lolga-black .games-trigger:hover,
.lolga-black .games-trigger[aria-expanded="true"],
.lolga-black .header-type-trigger:hover,
.lolga-black .header-type-trigger[aria-expanded="true"] {
    background: #292929;
}

.lolga-black .games-trigger[aria-expanded="true"] {
    box-shadow: inset 0 -2px 0 var(--green);
}

.lolga-black .games-trigger .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px rgba(69, 212, 47, 0.55);
}

.lolga-black .header-type-trigger {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 9px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #fff;
    font-size: 15px;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
}

.lolga-black .header-type-trigger:hover,
.lolga-black .header-type-trigger.is-route-active,
.lolga-black .header-type-trigger[aria-expanded="true"] {
    background: #292929;
    color: #fff;
}

.lolga-black .header-type-trigger.is-route-active {
    box-shadow: inset 0 -2px 0 rgba(69, 212, 47, .55);
}

/* Desktop mega-menu: active trigger and the shared dropdown form one surface.
   Only the currently expanded Items/Currency/Accounts trigger is connected.
   The header is 70px high and the 42px trigger is vertically centered; the
   bridge fills the 14px between the trigger bottom and the fixed mega panel.
   Keep this desktop-only so the mobile drawer retains its own styling. */

@media (min-width: 1367px) {
    .lolga-black .header-type-trigger[aria-expanded="true"] {
        position: relative;
        z-index: 1;
        background: #181818;
        border-radius: 6px 6px 0 0;
        box-shadow: none;
    }

    .lolga-black .header-type-trigger[aria-expanded="true"]::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: max(0px, calc((var(--header-h, 70px) - 42px) / 2));
        background: #181818;
        pointer-events: none;
    }
}

.lolga-black .header-type-trigger[aria-expanded="true"] {
    box-shadow: none;
}

.lolga-black .header-type-trigger svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform .18s ease;
}

.lolga-black .header-type-trigger[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.lolga-black .search-shell {
    position: relative;
    flex: 1;
    max-width: 420px;
    min-width: 180px;
}

.lolga-black .search-box {
    height: 43px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 15px;
    border-radius: 12px;
    background: #181818;
    color: #8d8d8d;
}

.lolga-black .search-box svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.lolga-black .search-box input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font-size: 13px;
}

.lolga-black .head-btn,
.lolga-black .head-link {
    height: 42px;
    gap: 7px;
    border: 0;
    background: transparent;
    color: #fff!important;
    border-radius: 9px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
}

.lolga-black .head-btn:hover,
.lolga-black .head-link:hover,
.lolga-black .head-btn[aria-expanded="true"] {
    background: #292929;
}

.lolga-black .head-svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lolga-black .chev-svg,
.lolga-black .account-chevron,
.lolga-black .m-currency-chev {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform 0.18s;
}

.lolga-black .head-btn[aria-expanded="true"] .chev-svg,
.lolga-black .account-trigger[aria-expanded="true"] .account-chevron {
    transform: rotate(180deg);
}

.lolga-black .cart-trigger {
    position: relative;
}

.lolga-black .cart-badge {
    position: absolute;
    right: -5px;
    top: -7px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--green);
    color: #071006;
    font-size: 12px;
    font-weight: 800;
    display: grid;
    place-items: center;
}

/* Cart count is always visible; empty cart is represented by 0. */

.lolga-black .cart-badge[hidden] {
    display: grid !important;
}

.lolga-black .shared-drop {
    display: none;
    position: fixed;
    top: var(--drop-top, 70px);
    left: var(--drop-left, 12px);
    right: auto;
    z-index: 1750;
    width: 250px;
    max-width: calc(100vw - 24px);
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #202020;
    box-shadow: var(--shadow);
}

.lolga-black .shared-drop.open {
    display: block;
}

.lolga-black .drop-option {
    width: 100%;
    min-height: 56px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0;
    border-radius: 15px;
    background: transparent;
    color: #c7c7c7;
    font-size: 16px;
    font-weight: 650;
    text-align: left;
}

.lolga-black .drop-option:hover,
.lolga-black .drop-option.active {
    background: #2a2a2a;
    color: #fff;
}

.lolga-black .drop-option img {
    display: none;
}

.lolga-black .shared-choice-code {
    margin-left: auto;
    color: #bdbdbd;
    font-weight: 780;
}

.lolga-black .drop-option.active .shared-choice-code {
    color: var(--green);
}

.lolga-black .mega {
    display: none;
    position: fixed;
    left: var(--mega-left, 4px);
    top: var(--mega-top, 70px);
    width: var(--mega-width, min(1000px, calc(100vw - 20px)));
    z-index: 1650;
    height: 446px;
    max-height: min(446px, calc(100vh - var(--mega-top, 70px) - 12px));
    overflow: hidden;
    border: 0;
    border-radius: 0 0 10px 10px;
    background: #181818;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .42);
}

.lolga-black .mega.open {
    display: block;
}

.lolga-black .header-type-mega {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr);
    height: 100%;
    min-height: 0;
    max-height: 100%;
    color: #f5f5f5;
}

.lolga-black .header-type-popular,
.lolga-black .header-type-all {
    min-width: 0;
    padding: 28px 30px 26px;
}

.lolga-black .header-type-popular {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #858893 transparent;
    background: #181818;
}

.lolga-black .header-type-popular::-webkit-scrollbar {
    width: 6px;
}

.lolga-black .header-type-popular::-webkit-scrollbar-track {
    background: transparent;
}

.lolga-black .header-type-popular::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #858893;
}

.lolga-black .header-type-all {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: #242424;
    border-left: 1px solid #393939;
}

.lolga-black .header-type-section-title {
    flex: 0 0 auto;
    margin: 0 0 18px;
    color: #fff;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 750;
}

.lolga-black .header-type-recent {
    margin-bottom: 20px;
}

.lolga-black .header-type-recent[hidden] {
    display: none !important;
}

.lolga-black .header-type-recent-grid,
.lolga-black .header-type-popular-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    -moz-column-gap: 28px;
         column-gap: 28px;
    row-gap: 7px;
}

.lolga-black .header-type-popular.has-recent {
    padding: 24px 30px 20px;
}

.lolga-black .header-type-popular.has-recent .header-type-recent .header-type-section-title {
    margin-bottom: 16px;
}

.lolga-black .header-type-popular.has-recent > .header-type-section-title {
    margin-bottom: 14px;
}

.lolga-black .header-type-popular.has-recent .header-type-game-row {
    min-height: 39px;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 13px;
}

.lolga-black .header-type-popular.has-recent .header-type-game-row .game-icon {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px;
}

.lolga-black .header-type-game-row,
.lolga-black .header-type-all-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 7px;
    color: #f3f3f5;
    text-decoration: none;
}

.lolga-black .header-type-game-row .game-icon,
.lolga-black .header-type-all-row .game-icon {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px;
    border-radius: 7px;
}

.lolga-black .header-type-game-row {
    min-height: 49px;
    padding: 5px 7px;
    font-size: 14px;
}

.lolga-black .header-type-all-row {
    min-height: 47px;
    padding: 5px 6px;
    font-size: 13px;
}

.lolga-black .header-type-game-row:hover,
.lolga-black .header-type-all-row:hover {
    background: #363636;
}

.lolga-black .header-type-game-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lolga-black .header-type-search {
    flex: 0 0 auto;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    margin-bottom: 16px;
    border: 1px solid #484848;
    border-radius: 8px;
    background: #383838;
    color: #a8aab3;
}

.lolga-black .header-type-search:focus-within {
    border-color: #777;
    box-shadow: 0 0 0 1px #5b84ff;
}

.lolga-black .header-type-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font-size: 14px;
}

.lolga-black .header-type-all-list {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    list-style: none;
    margin: 0;
    padding: 0 6px 0 0;
    scrollbar-width: thin;
    scrollbar-color: #858893 transparent;
}

.lolga-black .header-type-all-list::-webkit-scrollbar {
    width: 6px;
}

.lolga-black .header-type-all-list::-webkit-scrollbar-track {
    background: transparent;
}

.lolga-black .header-type-all-list::-webkit-scrollbar-thumb {
    min-height: 40px;
    border-radius: 999px;
    background: #858893;
}

.lolga-black .header-type-all-list::-webkit-scrollbar-thumb:hover {
    background: #a0a3ad;
}

.lolga-black .header-type-all-list li {
    margin: 0;
    padding: 0;
}

.lolga-black .header-type-empty {
    padding: 18px 8px;
    color: #8d8e96;
}

.lolga-black [data-header-type-menu][data-header-searching] [data-header-all-mount],
.lolga-black [data-header-type-menu][data-header-searching] [data-header-all-empty],
.lolga-black [data-header-search-mount][hidden],
.lolga-black [data-mobile-header-search-mount][hidden] {
    display: none !important;
}

.lolga-black .header-type-panel-empty,
.lolga-black .mobile-header-panel-empty {
    max-width: 360px;
    margin: 2px 0 0;
    padding: 14px 0;
    color: #8d8e96;
    font-size: 13px;
    line-height: 1.55;
}

.lolga-black .header-type-panel-empty[hidden],
.lolga-black .mobile-header-panel-empty[hidden] {
    display: none !important;
}

.lolga-black .mega [data-game-menu-slot="desktop"],
.lolga-black .mega .lolga-game-menu {
    display: contents;
}

.lolga-black .lolga-game-menu {
    background: transparent;
    color: var(--text);
}

.lolga-black .mega-col {
    padding: 24px;
    min-width: 0;
}

.lolga-black .mega-col + .mega-col {
    border-left: 1px solid #333;
}

.lolga-black .mega-col .mega-title,
.lolga-black .mega-col h2 {
    margin: 0 0 14px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: normal;
    word-spacing: normal;
}

.lolga-black .mega-col .mega-title .view-all-games {
    float: right;
    color: var(--green);
    font-size: 13px;
    font-weight: 600;
}

.lolga-black .game-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
}

.lolga-black .game-row,
.lolga-black .all-row,
.lolga-black .mobile-game-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px;
    border-radius: 9px;
    min-width: 0;
}

.lolga-black .game-row:hover,
.lolga-black .all-row:hover,
.lolga-black .mobile-game-row:hover {
    background: #2a2a2a;
}

.lolga-black .game-row strong,
.lolga-black .game-copy strong,
.lolga-black .all-row {
    letter-spacing: normal;
    word-spacing: normal;
}

.lolga-black .game-row strong,
.lolga-black .game-copy strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 13px;
}

.lolga-black .game-row small,
.lolga-black .game-copy small {
    display: block;
    margin-top: 2px;
    color: #818181;
    font-size: 11px;
}

.lolga-black .game-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 8px;
    -o-object-fit: cover;
       object-fit: cover;
    background: #151515;
}

.lolga-black .game-icon.fallback {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    color: var(--yellow);
    font-size: 11px;
    font-weight: 800;
}

.lolga-black .game-icon.fallback img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.lolga-black .all-search,
.lolga-black .mm-search {
    height: 46px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid #3a3a3a;
    border-radius: 10px;
    background: #171717;
    margin-bottom: 10px;
}

.lolga-black .all-search input,
.lolga-black .mm-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
}

.lolga-black .all-list {
    max-height: 300px;
    overflow: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lolga-black .all-row {
    font-size: 13px;
    color: #bbb;
}

.lolga-black .mobile-head {
    display: none;
}

.lolga-black .mobile-menu {
    display: none;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(430px, 100%);
    z-index: 1810;
    background: #202020;
    transform: translateX(100%);
    transition: transform 0.22s ease;
    overflow-x: hidden;
    overflow-y: auto;
}

.lolga-black .mobile-menu.open {
    transform: translateX(0);
}

.lolga-black .mm-head {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding: 13px 16px;
    border-bottom: 1px solid #333;
    background: #202020;
}

.lolga-black .mm-head .mm-menu-title {
    margin: 0;
    color: #fff;
    font-size: 22px;
}

.lolga-black .close {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border: 0;
    border-radius: 12px;
    background: #181818;
    color: #fff;
    display: grid;
    place-items: center;
}

.lolga-black .close svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lolga-black .lolga-shell-header.is-mobile-open #mobileMenuBtn {
    visibility: hidden;
    pointer-events: none;
}

.lolga-black .mm-body {
    min-width: 0;
    max-width: 100%;
    padding: 16px;
}

.lolga-black .mm-title {
    margin: 18px 0 8px;
    color: #888;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.lolga-black .mobile-menu .lolga-game-menu {
    display: flex;
    flex-direction: column;
}

.lolga-black .mobile-menu .mega-col:first-child {
    display: none;
}

.lolga-black .mobile-menu .game-grid,
.lolga-black .mobile-menu .all-list {
    display: flex;
    flex-direction: column;
    max-height: none;
}

.lolga-black .mobile-menu .mega-col + .mega-col {
    border-left: 0;
    padding-left: 0;
    padding-right: 0;
}

.lolga-black .mobile-menu .mega-col {
    padding: 8px 0 16px;
}

.lolga-black .mobile-header-type-menu {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.lolga-black .mobile-header-type-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

.lolga-black .mobile-header-type-trigger {
    min-width: 0;
    min-height: 46px;
    padding: 9px 12px;
    border: 1px solid #34353c;
    border-radius: 10px;
    background: #18191f;
    color: #c7c7cc;
    font-size: 14px;
    font-weight: 720;
}

.lolga-black .mobile-header-type-trigger:hover,
.lolga-black .mobile-header-type-trigger.is-route-active,
.lolga-black .mobile-header-type-trigger[aria-pressed="true"] {
    border-color: #4a4b55;
    background: #292a32;
    color: #fff;
}

.lolga-black .mobile-header-type-trigger[aria-pressed="true"] {
    box-shadow: inset 0 -2px 0 var(--green);
}

.lolga-black .mobile-header-type-search {
    min-width: 0;
    max-width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid #3b3c44;
    border-radius: 10px;
    background: #17181d;
    color: #8e9098;
}

.lolga-black .mobile-header-type-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
}

.lolga-black .mobile-header-type-title {
    min-width: 0;
    max-width: 100%;
    margin-top: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 760;
}

.lolga-black .mobile-header-recent {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    min-width: 0;
    max-width: 100%;
}

.lolga-black .mobile-header-recent[hidden] {
    display: none !important;
}

.lolga-black [data-mobile-header-type-menu][data-mobile-header-searching] [data-mobile-header-search-hide] {
    display: none !important;
}

.lolga-black .mobile-header-recent-list,
.lolga-black .mobile-header-popular-list,
.lolga-black .mobile-header-all-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    max-width: 100%;
}

.lolga-black .mobile-header-game-row {
    min-width: 0;
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 8px;
    border-radius: 9px;
    color: #eeeef0;
    text-decoration: none;
}

.lolga-black .mobile-header-game-row:hover {
    background: #292a31;
}

.lolga-black .mobile-header-game-row[hidden] {
    display: none !important;
}

.lolga-black .mobile-header-type-empty {
    padding: 10px 8px 14px;
    color: #888a92;
    font-size: 13px;
}

.lolga-black .mm-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
    padding-bottom: 100px;
}

.lolga-black .mm-quick a {
    padding: 11px;
    border-radius: 9px;
    background: #171717;
    text-align: center;
    font-size: 12px;
    color: #ddd;
}

.lolga-black .account-wrap {
    position: relative;
}

.lolga-black .account-trigger {
    height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 650;
}

.lolga-black .account-trigger:hover,
.lolga-black .account-trigger[aria-expanded="true"] {
    background: #292929;
}

.lolga-black .account-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #333;
    color: #fff;
}

.lolga-black .account-avatar svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.lolga-black .account-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lolga-black .account-menu {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 320px;
    max-width: calc(100vw - 24px);
    z-index: 1760;
    padding: 14px;
    border: 1px solid #3a3a3a;
    border-radius: 22px;
    background: #202020;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.52);
}

.lolga-black .account-menu.open {
    display: block;
}

.lolga-black .account-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 8px 14px;
}

.lolga-black .account-profile .account-avatar {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
    border-radius: 12px;
}

.lolga-black .account-profile-copy strong {
    display: block;
    color: #fff;
    font-size: 17px;
}

.lolga-black .account-profile-copy a {
    display: inline-block;
    margin-top: 5px;
    color: #bbb;
    font-size: 13px;
}

.lolga-black .account-profile-copy a:hover {
    color: var(--green);
}

.lolga-black .account-divider {
    height: 1px;
    background: #3a3a3a;
    margin: 5px 6px;
}

.lolga-black .account-row,
.lolga-black .account-signout {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    background: transparent;
    color: #d5d5d5;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 650;
    text-align: left;
}

.lolga-black .account-row:hover,
.lolga-black .account-signout:hover {
    background: #2a2a2a;
    color: #fff;
}

/*
 * Shared Cart Drawer V11: single site-wide component style owner.
 * Markup/behavior: resources/js/lolga-black/modules/cart-drawer.js
 * All regular carts use layouts/app.blade.php. Points redemption cart is separate.
 */

.lolga-black lolga-cart-drawer.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1820;
    width: min(470px, 100vw);
    max-width: 100%;
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid #303030;
    background: #181818;
    color: #bbb;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(100%, 0, 0);
    transition:
        transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.34s;
    will-change: transform;
}

.lolga-black lolga-cart-drawer.cart-drawer.open {
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition:
        transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0s;
}

.lolga-black .cart-drawer .cart-head {
    flex: 0 0 auto;
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #303030;
    background: #202020;
}

.lolga-black .cart-drawer .cart-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.lolga-black .cart-drawer .cart-title strong {
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
}

.lolga-black .cart-drawer .cart-count-pill {
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    background: #45d42f;
    color: #071006;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
}

.lolga-black .cart-drawer .cart-count-pill.is-empty {
    background: #303030;
    color: #bbb;
}

.lolga-black .cart-drawer .close {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #161616;
    color: #fff;
    cursor: pointer;
}

.lolga-black .cart-drawer .close svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.lolga-black .cart-drawer .cart-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px;
    background: #181818;
}

.lolga-black .cart-drawer .cart-scroll.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lolga-black .cart-drawer .cart-scroll ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lolga-black .cart-drawer .cart-empty {
    width: 100%;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-align: center;
    color: #888;
}

.lolga-black .cart-drawer .cart-empty-description {
    margin: 0;
    color: #888;
    font-size: 14px;
    line-height: 1.5;
}

.lolga-black .cart-drawer .cart-empty .cart-shop-now {
    width: min(100%, 240px);
    min-height: 52px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: #45d42f;
    color: #081207;
    font-size: 16px;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.lolga-black .cart-drawer .cart-empty strong {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
}

.lolga-black .cart-drawer .cart-empty-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 8px;
    color: #f2f2f2;
}

.lolga-black .cart-drawer .cart-empty-icon .cart-empty-mark {
    fill: #ff463b;
    stroke: #ff463b;
}

.lolga-black .cart-drawer .cart-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 16px 0;
    border-bottom: 1px solid #303030;
    background: transparent;
}

.lolga-black .cart-drawer .cart-row img {
    display: block;
    width: 84px;
    height: 84px;
    padding: 5px;
    border-radius: 9px;
    background: #101010;
    -o-object-fit: contain;
       object-fit: contain;
}

.lolga-black .cart-drawer .cart-row .cart-product-name {
    margin: 0 0 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.lolga-black .cart-drawer .cart-price {
    padding-top: 2px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.lolga-black .cart-drawer .cart-qty {
    width: 70px;
    height: 36px;
    margin-right: 8px;
    padding: 0 8px;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    background: #202020;
    color: #fff;
    text-align: center;
}

.lolga-black .cart-drawer .cart-remove {
    padding: 0;
    border: 0;
    background: transparent;
    color: #aaa;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.lolga-black .cart-drawer .cart-remove:hover {
    color: #45d42f;
}

.lolga-black .cart-drawer .cart-total {
    flex: 0 0 auto;
    padding: 16px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #303030;
    background: #202020;
}

.lolga-black .cart-drawer .cart-summary-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: #aaa;
    font-size: 13px;
}

.lolga-black .cart-drawer .cart-summary-line strong {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.lolga-black .cart-drawer .cart-summary-line.total {
    margin: 9px 0 14px;
}

.lolga-black .cart-drawer .cart-summary-line.total strong {
    font-size: 25px;
    font-weight: 900;
}

.lolga-black .cart-drawer .checkout {
    width: 100%;
    min-height: 52px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: #45d42f;
    color: #081207;
    font-size: 16px;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.lolga-black .cart-drawer .cart-total.is-empty .checkout-disabled {
    background: #286b27;
    color: #081207;
    cursor: not-allowed;
    opacity: 1;
}

.lolga-black .cart-drawer .cart-continue {
    margin: 12px 0 0;
    text-align: center;
    color: #888;
    font-size: 13px;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .lolga-black lolga-cart-drawer.cart-drawer,
    .lolga-black lolga-cart-drawer.cart-drawer.open {
        transition-duration: 0.01ms, 0s;
    }
}

/**
 * PURPOSE: Shared Footer V15, matching the 4-column LOLGA home reference.
 * OWNS: Footer layout, individual social/payment/security images and responsive flow.
 * MUST NOT: Change database data, checkout/payment capabilities or other shell components.
 * RELATED DOC: docs/standards/css-files/shared-and-app.md
 * DESIGN SOURCE: Uploaded reference screenshot #2 and index.html footer.
 */

.lolga-black .footer-v15 {
    padding: 0;
    background: #181818;
    border-top: 1px solid #303030;
    color: #b8b8b8;
}

.lolga-black .footer-v15 .footer-v14-wrap {
    width: min(1440px, calc(100% - 40px));
    margin: 0 auto;
}

.lolga-black .footer-v15 .footer-main-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) minmax(120px, .9fr) minmax(140px, .8fr) minmax(200px, .9fr);
    gap: 36px;
    align-items: start;
    padding: 32px 0 28px;
    border-bottom: 0;
}

.lolga-black .footer-v15 .footer-brand-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
}

.lolga-black .footer-v15 .footer-brand-logo {
    display: inline-flex;
    align-items: center;
    min-height: 63px;
}

.lolga-black .footer-v15 .footer-brand-logo img {
    display: block;
    width: 238px;
    height: auto;
    max-width: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.lolga-black .footer-v15 .footer-brand-copy {
    max-width: 590px;
    margin: 14px 0 16px;
    font-size: 14px;
    line-height: 1.45;
    color: #b7b7b7;
}

.lolga-black .footer-v15 .footer-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin: 0 0 18px;
}

.lolga-black .footer-v15 .footer-social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    transition: transform .15s ease, filter .15s ease;
}

.lolga-black .footer-v15 .footer-social-links a:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
}

.lolga-black .footer-v15 .footer-social-icon,
.lolga-black .footer-v15 .footer-social-fallback {
    display: block;
    width: 30px;
    height: 30px;
    -o-object-fit: contain;
       object-fit: contain;
}

.lolga-black .footer-v15 .footer-preferred {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
}

.lolga-black .footer-v15 .footer-preferred img {
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
}

.lolga-black .footer-v15 .footer-v14-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 10px;
    padding-top: 3px;
    list-style: none;
}

.lolga-black .footer-v15 .footer-v14-col a,
.lolga-black .footer-v15 .footer-contact-text {
    display: inline-block;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 0;
    margin: 0;
    color: #b8b8b8;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.35;
}

.lolga-black .footer-v15 .footer-v14-col a:hover,
.lolga-black .footer-v15 .footer-legal a:hover {
    color: var(--green, #45d42f);
}

.lolga-black .footer-v15 .footer-v14-col a::before { content: none; }

.lolga-black .footer-v15 .footer-contact-col {
    gap: 10px;
    padding-top: 0;
}

.lolga-black .footer-v15 .footer-trust-safe {
    width: 100%;
    max-width: 275px;
    min-height: 51px;
    margin: 0 0 2px;
}

.lolga-black .footer-v15 .footer-trust-safe .lolga-web-safe {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lolga-black .footer-v15 .footer-trust-safe .lolga-web-safe > li {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    background: transparent;
}

.lolga-black .footer-v15 .footer-trust-safe .trustpilot-widget {
    width: 100%;
    min-height: 50px;
    background: transparent;
}

.lolga-black .footer-v15 .footer-payments {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 24px 0 ;
}

.lolga-black .footer-v15 .footer-pay-item {
    width: 72px;
    height: 38px;
    padding: 0 8px;
    background: #202020;
    border-radius: 6px;
    display: inline-flex;
    flex: 0 0 72px;
    justify-content: center;
    align-items: center;
}

.lolga-black .footer-v15 .footer-pay-item img {
    display: block;
    width: 52px;
    height: 24px;
    -o-object-fit: contain;
       object-fit: contain;
}

.lolga-black .footer-v15 .footer-pay-more {
    width: auto;
    flex: 0 0 auto;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: #b6b6b6;
}

.lolga-black .footer-v15 .footer-bottom {
    border-top: 1px solid #303030;
    padding: 23px 0 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    text-align: center;
}

.lolga-black .footer-v15 .footer-copyright {
    border: 0;
    padding: 0;
    color: #929292;
    font-size: 13px;
    line-height: 1.5;
}

.lolga-black .footer-v15 .footer-legal {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #929292;
}

.lolga-black .footer-v15 .footer-legal a {
    text-decoration: none;
    color: inherit;
}

.lolga-black .footer-v15 .footer-security .lolga-web-safe {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 3px 0 0;
}

.lolga-black .footer-v15 .footer-security .lolga-web-safe li {
    background: #202020;
    width: 138px;
    height: 56px;
    flex: 0 0 138px;
    padding: 6px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}

.lolga-black .footer-v15 .footer-security .lolga-web-safe img {
    display: block;
    width: 112px;
    height: 40px;
    -o-object-fit: contain;
       object-fit: contain;
}

.lolga-black .lolga-top {
    position: fixed;
    z-index: 40;
    right: 20px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #202020;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.lolga-black .lolga-top svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Prevent laptop-width overflow from four min-width columns. */

/* Shared compact Header breakpoint: phones and iPad (including 1366px landscape). */

@media (max-width: 1366px) {
    /* The compact drawer keeps its original stacking level; the Header
     * itself now stays in normal flow on every route. */
    .lolga-black .lolga-shell-header.is-sticky {
        z-index: 1800;
    }

    .lolga-black .desk-head {
        display: none;
    }

    .lolga-black .mobile-head {
        display: block;
        min-height: 64px;
        padding: 8px 10px;
    }

    .lolga-black .mobile-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .lolga-black .m-left,
    .lolga-black .m-right,
    .lolga-black .m-logo,
    .lolga-black .m-btn {
        display: flex;
        align-items: center;
    }

    .lolga-black .m-left {
        min-width: 0;
        flex: 0 0 auto;
        gap: 6px;
    }

    .lolga-black .m-right {
        flex: 0 0 auto;
        gap: 5px;
    }

    .lolga-black .m-logo { flex: 0 0 auto; }

    .lolga-black .m-logo img {
        display: block;
        width: 110px;
        height: auto;
        max-width: none;
        -o-object-fit: contain;
           object-fit: contain;
        /* Intrinsic ratio preserves the wordmark without stretch. */
        aspect-ratio: auto;
    }

    .lolga-black .m-btn {
        position: relative;
        height: 48px;
        min-width: 48px;
        justify-content: center;
        gap: 4px;
        border: 0;
        background: transparent;
        color: #fff;
        border-radius: 12px;
        padding: 0 8px;
        font-weight: 800;
    }

    .lolga-black #mCurrencyBtn {
        width: auto;
        font-size: 18px;
        font-weight: 800;
        white-space: nowrap;
    }

    .lolga-black .m-btn:hover,
    .lolga-black .m-btn[aria-expanded="true"] {
        background: #292929;
    }

    .lolga-black .m-btn > svg:not(.m-currency-chev) {
        width: 32px;
        height: 32px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .lolga-black .mobile-menu {
        display: block;
    }

    .lolga-black .mega {
        display: none !important;
    }

    .lolga-black .shared-drop {
        position: fixed;
        top: var(--drop-top, 70px);
        left: var(--drop-left, 12px);
        right: auto;
        width: min(250px, calc(100vw - 24px));
        z-index: 1830;
    }

    .lolga-black .account-menu {
        position: fixed;
        top: calc(var(--drop-top, 70px));
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }




    .lolga-black .mobile-head,
    .lolga-black .m-btn,
    .lolga-black .m-currency-chev {
        color: #fff;
    }

    .lolga-black .mobile-top { min-width: 0; }

    /* iPad/mobile: reserve header space within the actual visual viewport.
       An explicit height prevents the checkout footer falling below the screen. */
    .lolga-black lolga-cart-drawer.cart-drawer {
        top: 64px;
        bottom: auto;
        width: 100vw;
        height: calc(100vh - 64px);
        height: calc(100dvh - 64px);
        min-height: 0;
    }

    .lolga-black .cart-drawer .cart-scroll {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
    }

    .lolga-black .cart-drawer .cart-total {
        flex: 0 0 auto;
        /*padding-bottom: 210px;*/
    }

    .lolga-black .lolga-top {
        right: 12px;
        bottom: 80px;
        width: 40px;
        height: 40px;
    }
}

/* Footer retains its original narrower breakpoint independently of Header. */

@media (max-width: 820px) {
    .popular-grid{ grid-template-columns:1fr !important;}
    .lolga-black .footer-v15 .footer-brand-col,
    .lolga-black .footer-v15 .footer-contact-col {
        grid-column: 1 / 2;
    }

    .lolga-black .footer-v15 .footer-v14-col a,
    .lolga-black .footer-v15 .footer-contact-text {
        font-size: 14px;
    }

    .lolga-black .footer-v15 .footer-brand-copy {
        font-size: 14px;
        margin: 12px 0 18px;
    }

    .lolga-black .footer-v15 .footer-payments {
        padding: 0 0 20px;
    }

}

@media (max-width: 600px) {
    /* Hot Games and Help remain side by side below the full-width brand. */
    .lolga-black .footer-v15 .footer-main-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 16px;
    }

    .lolga-black .footer-v15 .footer-brand-logo img {
        width: 200px;
    }

    .lolga-black .footer-v15 .footer-brand-copy {
        max-width: 500px;
    }

    .lolga-black .footer-v15 .footer-social-links {
        margin-bottom: 24px;
    }

    .lolga-black .footer-v15 .footer-v14-col {
        gap: 12px;
    }
    .lolga-black .footer-v15 .footer-contact-col {
        gap: 12px;
    }

    .lolga-black .footer-v15 .footer-copyright,
    .lolga-black .footer-v15 .footer-legal {
        font-size: 11px;
    }

    .lolga-black .footer-v15 .footer-pay-item {
        width: 64px;
        flex-basis: 64px;
    }

    .lolga-black .footer-v15 .footer-security .lolga-web-safe li {
        width: 120px;
        flex-basis: 120px;
    }
}

@media (max-width: 430px) {
    .lolga-black .cart-drawer .cart-row {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        gap: 10px;
    }
    .lolga-black .cart-drawer .cart-row img {
        width: 64px;
        height: 64px;
    }
    .lolga-black .cart-drawer .cart-scroll,
    .lolga-black .cart-drawer .cart-total {
        padding-left: 16px;
        padding-right: 16px;
    }

    .lolga-black .mobile-head { padding-inline: 8px; }
    .lolga-black .mobile-top { gap: 4px; }
    .lolga-black .m-left { gap: 4px; }

    .lolga-black .m-btn {
        width: 36px;
        min-width: 36px;
        height: 40px;
        padding: 0;
    }

    .lolga-black #mCurrencyBtn {
        width: auto;
        min-width: 60px;
        padding: 0 4px;
    }

    .lolga-black .m-logo img {
        width: clamp(78px, 32vw, 124px);
        height: auto;
        aspect-ratio: auto;
    }
}

@media (max-width: 360px) {
    .lolga-black .mobile-head { padding-inline: 6px; }
    .lolga-black .m-btn {
        width: 32px;
        min-width: 32px;
    }
    .lolga-black .m-btn > svg:not(.m-currency-chev) {
        width: 24px;
        height: 24px;
    }
    .lolga-black #mCurrencyBtn {
        min-width: 54px;
        font-size: 12px;
    }
    .lolga-black .m-logo img { width: 78px; }
}

/* Used by the lightweight Home bundle (inner pages also ship Tailwind's helper). */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Site-wide successful Add to Cart feedback (formerly ITEM-only).
 * Single shared CSS owner: built into both Home and app CSS bundles.
 * Applies to every /cart_add UI; provider payment and cart state are untouched.
 */

.lolga-black .product-cart-toast {
  position: fixed;
  top: 92px;
  right: 28px;
  z-index: 2900;
  width: min(390px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(69, 212, 47, .78);
  border-radius: 14px;
  background: #202020;
  color: #fff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .44);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(18px, -6px, 0) scale(.985);
  transition:
    opacity .2s ease,
    transform .24s cubic-bezier(.2,.8,.2,1);
}

.lolga-black .product-cart-toast.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.lolga-black .product-cart-toast.is-leaving {
  opacity: 0;
  transform: translate3d(12px, -4px, 0) scale(.99);
}

.lolga-black .product-cart-toast__head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.lolga-black .product-cart-toast__icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #45d42f;
  color: #071006;
  box-shadow: 0 0 0 4px rgba(69, 212, 47, .06);
  transform: scale(.88);
  transition: transform .26s cubic-bezier(.2,.9,.25,1.3);
}

.lolga-black .product-cart-toast.is-visible .product-cart-toast__icon {
  transform: scale(1);
}

.lolga-black .product-cart-toast__icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lolga-black .product-cart-toast__title {
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 800;
}

.lolga-black .product-cart-toast__item {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  align-items: start;
  gap: 11px;
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.07);
}

.lolga-black .product-cart-toast__item.no-image {
  grid-template-columns: minmax(0,1fr);
}

.lolga-black .product-cart-toast__image {
  width: 48px;
  height: 48px;
  display: block;
  padding: 4px;
  border-radius: 9px;
  background: #151515;
  -o-object-fit: contain;
     object-fit: contain;
}

.lolga-black .product-cart-toast__detail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lolga-black .product-cart-toast__name {
  display: block;
  color: #f4f4f4;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 760;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.lolga-black .product-cart-toast__message {
  color: #929292;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
}

/* Gold and other quantity-based items: unit amount is not cart item count. */

.lolga-black .product-cart-toast__unit {
  color: #bbbbbb;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  .lolga-black .product-cart-toast {
    top: max(74px, calc(54px + env(safe-area-inset-top, 0px)));
    right: max(12px, env(safe-area-inset-right, 0px));
    width: min(calc(100vw - 24px), calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 24px));
    gap: 10px;
    padding: 12px 13px;
    border-radius: 12px;
  }

  .lolga-black .product-cart-toast__icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .lolga-black .product-cart-toast__title {
    font-size: 15px;
  }

  .lolga-black .product-cart-toast__item {
    grid-template-columns: 44px minmax(0,1fr);
    gap: 10px;
    padding-top: 9px;
  }

  .lolga-black .product-cart-toast__item.no-image {
    grid-template-columns: minmax(0,1fr);
  }

  .lolga-black .product-cart-toast__image {
    width: 44px;
    height: 44px;
  }

  .lolga-black .product-cart-toast__name {
    font-size: 12.5px;
  }

  .lolga-black .product-cart-toast__message {
    font-size: 11.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lolga-black .product-cart-toast,
  .lolga-black .product-cart-toast__icon {
    transition: none;
  }
}

@keyframes lolgaCartCountBump {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.28); }
  75% { transform: scale(.94); }
}

.lolga-black [data-cart-badge].count-bump {
  animation: lolgaCartCountBump .52s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .lolga-black [data-cart-badge].count-bump { animation: none; }
}

/* Footer V15 phone layout (<=600px)
 * Shared footer only: preserves images, DB links, contacts, Trustpilot and desktop.
 * Desktop columns use the existing CSS above; mobile toggles are initialized in footer.blade.php.
 */

.lolga-black .footer-v15 .footer-mobile-toggle,
.lolga-black .footer-v15 .footer-payments-heading {
    display: none;
}

.lolga-black .footer-v15 .footer-menu-links,
.lolga-black .footer-v15 .footer-contact-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

@media (max-width: 600px) {
    .lolga-black .footer-v15 {
        background: #141414;
    }
    .lolga-black .footer-v15 .footer-v14-wrap {
        width: calc(100% - 40px);
    }
    .lolga-black .footer-v15 .footer-main-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 16px 0 0;
    }
    .lolga-black .footer-v15 .footer-brand-col {
        order: 1;
        align-items: center;
        text-align: center;
        grid-column: auto;
    }
    .lolga-black .footer-v15 .footer-brand-logo {
        min-height: 0;
        align-self: center;
        justify-content: center;
    }
    .lolga-black .footer-v15 .footer-brand-logo img {
        width: min(200px, 100%);
    }
    .lolga-black .footer-v15 .footer-brand-copy {
        max-width: 510px;
        margin: 0 auto 10px;
        font-size: 15px;
        line-height: 1.55;
        text-align: center;
    }
    .lolga-black .footer-v15 .footer-social-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: clamp(6px, 2vw, 12px);
        width: 100%;
        margin: 0 0 14px;
    }
    .lolga-black .footer-v15 .footer-social-links a {
        flex: 0 0 auto;
        width: clamp(48px, 14vw, 66px);
        height: clamp(48px, 14vw, 66px);
        background: #202020;
        border-radius: 50%;
    }
    .lolga-black .footer-v15 .footer-social-icon,
    .lolga-black .footer-v15 .footer-social-fallback {
        width: 30px;
        height: 30px;
    }
    .lolga-black .footer-v15 .footer-preferred {
        display: flex;
        width: min(200px, 100%);
        align-self: center;
        justify-content: center;
        /*margin-bottom: 16px;*/
    }
    .lolga-black .footer-v15 .footer-preferred img {
        width: 100%;
        height: auto;
        -o-object-fit: contain;
           object-fit: contain;
    }
    /* The Trustpilot embed remains the original, but appears below the brand on phones. */
    .lolga-black .footer-v15 .footer-contact-col {
        display: contents;
    }
    .lolga-black .footer-v15 .footer-trust-safe {
        order: 2;
        max-width: none;
        width: 100%;
        min-height: 50px;
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: #fff;
        overflow: hidden;
    }
    .lolga-black .footer-v15 .footer-trust-safe .trustpilot-widget {
        min-height: 50px;
    }
    .lolga-black .footer-v15 .footer-game-col { order: 3; }
    .lolga-black .footer-v15 .footer-help-col { order: 4; }
    .lolga-black .footer-v15 .footer-menu-col {
        display: block;
        padding: 0;
        border-top: 1px solid #303030;
    }
    .lolga-black .footer-v15 .footer-mobile-toggle {
        display: flex;
        width: 100%;
        min-height: 68px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 0;
        color: #fff;
        background: none;
        border: 0;
        text-align: left;
        font: inherit;
        font-size: 19px;
        font-weight: 760;
        cursor: pointer;
    }
    .lolga-black .footer-v15 .footer-mobile-toggle svg {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        stroke: #aaa;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .15s ease;
    }
    .lolga-black .footer-v15 .footer-mobile-toggle[aria-expanded="false"] svg {
        transform: rotate(180deg);
    }
    .lolga-black .footer-v15 .footer-mobile-toggle:focus-visible {
        outline: 2px solid #45d42f;
        outline-offset: -3px;
        border-radius: 4px;
    }
    .lolga-black .footer-v15 .footer-menu-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        -moz-column-gap: 16px;
             column-gap: 16px;
        row-gap: 19px;
        padding: 5px 0 24px;
    }
    .lolga-black .footer-v15 .footer-mobile-toggle[aria-expanded="false"] + .footer-menu-links {
        display: none;
    }
    .lolga-black .footer-v15 .footer-menu-links a {
        width: auto;
        min-width: 0;
        max-width: 100%;
        color: #b8b8b8;
        font-size: 16px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }
    .lolga-black .footer-v15 .footer-contact-methods {
        order: 5;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 12px 0 22px;
        border-top: 1px solid #303030;
    }
    .lolga-black .footer-v15 .footer-contact-methods > a,
    .lolga-black .footer-v15 .footer-contact-methods > .footer-contact-text {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 48px;
        padding: 13px 16px;
        color: #e5e5e5;
        background: #202020;
        border-radius: 12px;
        font-size: 15px;
        line-height: 1.35;
        text-decoration: none;
        overflow-wrap: anywhere;
    }
    .lolga-black .footer-v15 .footer-payments {
        display: grid;
        grid-template-columns: repeat(4, minmax(0,1fr));
        gap: 8px;
        padding: 0 0 28px;
        justify-content: stretch;
    }
    .lolga-black .footer-v15 .footer-payments-heading {
        display: block;
        grid-column: 1 / -1;
        margin: 0 0 4px;
        color: #a5a5a5;
        font-size: 14px;
        font-weight: 500;
    }
    .lolga-black .footer-v15 .footer-pay-item {
        width: 100%;
        min-width: 0;
        height: 48px;
        padding: 0 4px;
        border-radius: 10px;
        flex: auto;
    }
    .lolga-black .footer-v15 .footer-pay-item img {
        width: min(100%, 52px);
        height: auto;
        max-height: 26px;
        -o-object-fit: contain;
           object-fit: contain;
    }
    .lolga-black .footer-v15 .footer-pay-more {
        font-size: 13px;
        font-weight: 750;
        color: #fff;
    }
    .lolga-black .footer-v15 .footer-bottom {
        gap: 18px;
        border-top: 1px solid #303030;
        padding: 22px 0 20px;
    }
    .lolga-black .footer-v15 .footer-copyright {
        font-size: 13px;
        line-height: 1.6;
        text-align: center;
    }
    .lolga-black .footer-v15 .footer-legal {
        gap: 16px;
        font-size: 13px;
    }
    .lolga-black .footer-v15 .footer-security { width: 100%; }
    .lolga-black .footer-v15 .footer-security .lolga-web-safe {
        display: grid;
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: 8px;
        width: 100%;
        margin: 0;
        align-items: stretch;
    }
    .lolga-black .footer-v15 .footer-security .lolga-web-safe li {
        display: flex;
        width: 100%;
        min-width: 0;
        height: 56px;
        padding: 5px;
        flex: auto;
        border-radius: 10px;
    }
    .lolga-black .footer-v15 .footer-security .lolga-web-safe img {
        width: 100%;
        max-width: 112px;
        height: auto;
        max-height: 44px;
        -o-object-fit: contain;
           object-fit: contain;
    }
}

@media (max-width: 360px) {
    .lolga-black .footer-v15 .footer-social-links { gap: 6px; }
    .lolga-black .footer-v15 .footer-social-links a { width: 48px; height: 48px; }
    .lolga-black .footer-v15 .footer-payments { gap: 6px; }
    .lolga-black .footer-v15 .footer-menu-links { -moz-column-gap: 12px; column-gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .lolga-black .footer-v15 .footer-mobile-toggle svg { transition: none; }
}

/** News Richtext V10 — source owner. Design: docs/news-refactor/README.md. */

/* Long-form news reading styles; news article page only. */

.news-article-page {
    font-family: var(--font-lolga, Inter, system-ui, sans-serif);
    --news-text: #18181b;
    --news-muted: #71717a;
    --news-border: #e4e4e7;
    --news-accent: #7c3aed;
    color: var(--news-text);
}

.news-article-page--dark {
    --news-text: #f4f4f5;
    --news-muted: #a1a1aa;
    --news-border: rgba(255, 255, 255, 0.14);
    --news-accent: #a78bfa;
}

.news-ai-summary {
    margin-top: 1.5rem;
}

.news-ai-summary__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.news-ai-summary__copy {
    min-width: 0;
    flex: 1;
}

.news-ai-summary__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--news-text);
}

.news-ai-summary__desc {
    margin: 0.25rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--news-muted);
}

.news-ai-summary__actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: nowrap;
    gap: 0.5rem;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.news-ai-summary__actions::-webkit-scrollbar {
    display: none;
}

.news-ai-summary__btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0 0.9rem;
    border: 1px solid var(--news-border);
    border-radius: 999px;
    background: #fff;
    color: var(--news-text);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.news-ai-summary__btn:hover {
    border-color: currentColor;
}

.news-ai-summary__icon,
.news-ai-summary__icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

.news-article-page--dark .news-ai-summary__btn {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.news-breadcrumbs {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.news-breadcrumbs::-webkit-scrollbar {
    display: none;
}

.news-article-lead {
    background: rgba(124, 58, 237, 0.06);
    color: var(--news-text);
}

.news-article-page--dark .news-article-lead {
    background: rgba(255, 255, 255, 0.06);
}

.news-article-content {
    color: var(--news-text);
    font-size: 1.0625rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.news-article-content h2,
.news-article-content h3 {
    color: var(--news-text);
    font-weight: 700;
    letter-spacing: -0.015em;
}

.news-article-content h2 {
    margin: 2.75rem 0 1rem;
    font-size: 2rem;
    line-height: 1.25;
}

.news-article-content h3 {
    margin: 2rem 0 0.75rem;
    font-size: 1.5rem;
    line-height: 1.35;
}

.news-article-content p,
.news-article-content ul,
.news-article-content ol,
.news-article-content blockquote,
.news-article-content figure,
.news-article-content pre,
.news-article-content .news-article-table-wrap {
    margin: 1.25rem 0;
}

.news-article-content ul,
.news-article-content ol {
    padding-left: 1.5rem;
}

.news-article-content ul {
    list-style: disc;
}

.news-article-content ol {
    list-style: decimal;
}

.news-article-content li + li {
    margin-top: 0.5rem;
}

.news-article-content a {
    color: #2563eb;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.news-article-content a:hover {
    color: #7c3aed;
}

.news-article-page--dark .news-article-content a {
    color: #45d42f;
}

.news-article-page--dark .news-article-content a:hover {
    color: #55ef3f;
}

.news-article-content blockquote {
    border-left: 4px solid var(--news-accent);
    border-radius: 0 0.5rem 0.5rem 0;
    background: rgba(124, 58, 237, 0.06);
    padding: 0.85rem 1rem;
    color: var(--news-muted);
}

.news-article-page--dark .news-article-content blockquote {
    background: rgba(255, 255, 255, 0.06);
}

.news-article-content hr {
    margin: 2.5rem 0;
    border: 0;
    border-top: 1px solid var(--news-border);
}

.news-article-content img,
.news-article-content video,
.news-article-content iframe {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
}

.news-article-content iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.news-article-content figcaption {
    margin-top: 0.5rem;
    color: var(--news-muted);
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: center;
}

.news-article-content pre {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--news-border);
    border-radius: 0.75rem;
    background: rgba(24, 24, 27, 0.06);
    padding: 1rem;
}

.news-article-page--dark .news-article-content pre {
    background: rgba(0, 0, 0, 0.3);
}

.news-article-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--news-border);
    border-radius: 0.75rem;
    -webkit-overflow-scrolling: touch;
}

.news-article-content table {
    width: 100%;
    min-width: 40rem;
    border-collapse: collapse;
}

.news-article-content th,
.news-article-content td {
    border-bottom: 1px solid var(--news-border);
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: top;
}

.news-article-content th {
    background: rgba(24, 24, 27, 0.05);
    font-weight: 700;
}

.news-article-page--dark .news-article-content th {
    background: rgba(255, 255, 255, 0.08);
}

.news-toc-link {
    transition: color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}

.news-toc-link.is-active {
    border-left-color: var(--news-accent);
    color: var(--news-accent);
    opacity: 1;
}

.news-desktop-toc {
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 58, 237, 0.65) transparent;
}

@media (max-width: 767px) {
    .news-article-content {
        font-size: 1rem;
        line-height: 1.75;
    }

    .news-article-content h2 {
        margin-top: 2.25rem;
        font-size: 1.5rem;
    }

    .news-article-content h3 {
        margin-top: 1.75rem;
        font-size: 1.25rem;
    }

    .news-article-content p,
    .news-article-content ul,
    .news-article-content ol,
    .news-article-content blockquote,
    .news-article-content figure,
    .news-article-content pre,
    .news-article-content .news-article-table-wrap {
        margin: 1rem 0;
    }
}

/* LOLGA News V10: extend, never replace, Product List/PDP visual tokens.
 * Scoped so other-site News themes and historical semantic colors survive.
 * No generic child color override: editor red/green/yellow and blue badges stay meaningful.
 */

.lolga-black .news-article-page--dark {
  font-family:var(--font-lolga);
  --news-text:#f4f4f4;
  --news-muted:#a3a3a3;
  --news-border:#353535;
  --news-accent:#45d42f;
}

.lolga-black .news-article-page--dark .news-article-content {
  font-size:16px;
  line-height:1.75;
  min-width:0;
  overflow-wrap:anywhere;
}

.lolga-black .news-article-page--dark .news-article-content :is(h2,h3,h4,h5,h6) {
  color:#f4f4f4;
}

:where(.lolga-black .news-article-page--dark) .news-article-content :is(h2,h3,h4,h5,h6) {
  font-weight:750;
  line-height:1.35;
  margin:1.55em 0 .65em;
}

:where(.lolga-black .news-article-page--dark) .news-article-content h2 {font-size:1.55rem;}

:where(.lolga-black .news-article-page--dark) .news-article-content h3 {font-size:1.3rem;}

:where(.lolga-black .news-article-page--dark) .news-article-content :is(p,ul,ol,blockquote,figure,pre,.news-article-table-wrap) {
  margin:0 0 1.15em;
}

.lolga-black .news-article-page--dark .news-article-content :is(ul,ol) {
  padding-inline-start:1.7em;
  list-style-position:outside;
}

.lolga-black .news-article-page--dark .news-article-content ul {list-style-type:disc;}

.lolga-black .news-article-page--dark .news-article-content ol {list-style-type:decimal;}

.lolga-black .news-article-page--dark .news-article-content :is(.text-black,.text-gray-900,.text-gray-800,.text-gray-700,.text-gray-600) {
  color:#f4f4f4!important;
}

.lolga-black .news-article-page--dark .news-article-content a {
  text-underline-offset:3px;
}

/* Articles with scoped style keep their own link colors (already converted
 * for the dark page), so buttons such as white-on-green CTAs stay readable.
 */

.lolga-black .news-article-page--dark :where([data-news-article-page]:not([data-news-styled])) .news-article-content a,
.lolga-black .news-article-page--dark :where([data-news-article-page]:not([data-news-styled])) .news-article-content a[class*="text-blue"],
.lolga-black .news-article-page--dark :where([data-news-article-page]:not([data-news-styled])) .news-article-content a :is(span,strong,font) {
  color:#45d42f!important;
}

.lolga-black .news-article-page--dark :where([data-news-article-page]:not([data-news-styled])) .news-article-content a:hover {color:#55ef3f!important;}

.lolga-black .news-article-page--dark .news-article-content blockquote {
  border-inline-start:3px solid #45d42f;
  border-radius:0;
  background:#202020;
}

.lolga-black .news-article-page--dark .news-article-content :is(merlin-component,sider-code-explain) {
  display:block;
  min-width:0;
}

.lolga-black .news-article-page--dark .news-article-content :is(img,video,iframe) {
  max-width:100%;
}

.lolga-black .news-article-page--dark .news-article-content img,
.lolga-black .news-article-page--dark .news-article-content video {height:auto;}

.lolga-black .news-article-page--dark .news-article-table-wrap {
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.lolga-black .news-article-page--dark .news-article-content .news-countdown-table {
  display:table; /* preserve the countdown JS cell/row contract */
  min-width:40rem;
}

.lolga-black .news-article-page--dark .news-toc-link.is-active {
  color:#45d42f!important;
  border-left-color:#45d42f;
}

.lolga-black .news-article-page--dark .news-desktop-toc {
  scrollbar-color:rgba(69,212,47,.6) transparent;
}

.lolga-black .news-article-page--dark .news-article-lead {
  border-left-color:#45d42f!important;
  background:#181818;
}

.lolga-black .news-article-page--dark .news-back-link:hover {
  border-color:#45d42f;
  color:#45d42f;
}

.lolga-black .news-article-page--dark .news-breadcrumbs a:hover,
.lolga-black .news-article-page--dark .news-breadcrumbs a:focus-visible {
  color:#45d42f;
}

.lolga-black .news-article-page--dark .news-ai-summary__btn:hover,
.lolga-black .news-article-page--dark .news-ai-summary__btn:focus-visible {
  border-color:#45d42f;
}

@media(max-width:699px) {
  .lolga-black .news-article-page--dark .news-article-content {font-size:14px;}
  :where(.lolga-black .news-article-page--dark) .news-article-content h2 {font-size:1.4rem;}
  :where(.lolga-black .news-article-page--dark) .news-article-content h3 {font-size:1.2rem;}
}

/* Legacy Flash/embed is represented as a safe link, not executable plugin HTML. */

.lolga-black .news-article-page--dark .news-article-content .news-legacy-embed-link {display:inline-flex;align-items:center;min-height:44px;color:#45d42f;text-decoration:underline;}

/* Ensure LOLGA's inner article component uses the same dark tokens as its outer shell. */

html.lolga-black .news-article-page {
  --news-text:#f4f4f4;
  --news-muted:#a3a3a3;
  --news-border:#353535;
  --news-accent:#45d42f;
  color:var(--news-text);
  font-family:var(--font-lolga, Inter, system-ui, sans-serif)!important;
}

html.lolga-black .news-article-page :is(h1,.news-ai-summary__title,.news-article-content,.news-desktop-toc,.news-mobile-toc) {
  color:var(--news-text);
}

html.lolga-black .news-article-page .news-ai-summary__desc {color:var(--news-muted);}

html.lolga-black .news-article-page .news-toc-link {color:#cfcfcf;}

html.lolga-black .news-article-page .news-toc-link.is-active {color:#45d42f;}

@media(max-width:699px) {html.lolga-black .news-article-page .news-article-content{font-size:15px;}}

/* Legacy editorial components: behavior is trusted News JS, never CMS inline scripts. */

html.lolga-black .news-article-content .code-copy {
  display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:5px 12px;border-radius:8px;
  border:1px solid #353535;background:#282832;color:#f4f4f4;
  font-size:13px;cursor:pointer;
}

html.lolga-black .news-article-content .code-copy:hover {border-color:#45d42f;color:#45d42f;}

html.lolga-black .news-article-content .faq-q {
  cursor:pointer;color:#f4f4f4;
}

:where(html.lolga-black [data-news-article-page]:not([data-news-styled]) .news-article-content) .faq-q {
  font-weight:700;
}

:where(html.lolga-black [data-news-article-page]:not([data-news-styled]) .news-article-content) .faq-item {
  border-bottom:1px solid #353535;padding-block:12px;
}

html.lolga-black .news-article-content .faq-a[hidden],
html.lolga-black .news-article-content .faq-answer[hidden]{display:none!important;}

html.lolga-black .news-article-content .news-legacy-video {
  display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:0;border-radius:10px;
}

html.lolga-black .news-article-page .news-article-author { color:#45d42f; }

html.lolga-black .news-article-page .news-breadcrumbs a:focus-visible { color:#45d42f; }

html.lolga-black .news-article-page .news-mobile-toc summary { color:#f4f4f4; }

/* Product List V3 wide-screen content contract. */

@media(min-width:1024px) {
  html.lolga-black .news-article-page > .max-w-7xl {max-width:1440px;}
  html.lolga-black .news-article-page [data-news-article-page]:has(.news-desktop-toc) {
    display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,290px);
    gap:30px;align-items:start;
  }
  html.lolga-black .news-article-page .news-desktop-toc {
    position:sticky;top:96px;display:block;
  }
  html.lolga-black .news-article-page .news-mobile-toc {display:none;}
}

@media(max-width:1023px) {
  html.lolga-black .news-article-page .news-desktop-toc {display:none;}
}

/* News editorial "Related LOLGA Guides": compact thumbnails, not giant
   unbounded TinyMCE image/link blocks. Scoped to a recognized section only. */

:where(html.lolga-black .news-article-page .news-article-content) .news-related-guides-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:14px 0 24px;
  padding:0;
}

:where(html.lolga-black .news-article-page .news-article-content) .news-related-guide-card {
  min-width:0;
  overflow:hidden;
  border:1px solid #353535;
  border-radius:12px;
  background:#202020;
  display:flex;
  flex-direction:column;
}

html.lolga-black .news-article-page .news-article-content .news-related-guide-media {
  display:block;
  overflow:hidden;
  aspect-ratio:16/9;
  margin:0;
  background:#181818;
  line-height:0;
}

html.lolga-black .news-article-page .news-article-content .news-related-guide-media img {
  display:block;
  width:100%;
  height:100%!important;
  max-width:100%;
  max-height:100%;
  -o-object-fit:cover;
     object-fit:cover;
  border:0;
  margin:0!important;
}

html.lolga-black .news-article-page .news-article-content .news-related-guide-title {
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  padding:12px 14px 14px;
  margin:0;
  font-size:14px;
  font-weight:700;
  line-height:1.5;
  color:#f4f4f4!important;
  text-decoration:none;
  overflow-wrap:anywhere;
}

html.lolga-black .news-article-page .news-article-content .news-related-guide-title:hover,
html.lolga-black .news-article-page .news-article-content .news-related-guide-title:focus-visible {
  color:#45d42f!important;
}

html.lolga-black .news-article-page .news-article-content .news-image-unavailable {
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:44px;
  max-height:120px;
  width:100%;
  padding:12px;
  margin:8px 0;
  background:#202020;
  border:1px dashed #353535;
  border-radius:8px;
  color:#999;
  font-size:13px;
  font-weight:400;
  line-height:1.4;
  text-align:center;
}

html.lolga-black .news-article-page .news-article-content .news-related-guide-media .news-image-unavailable {
  height:100%;
  max-height:none;
  min-height:0;
  margin:0;
  border:0;
}

@media(max-width:699px) {
  html.lolga-black .news-article-page .news-article-content .news-related-guides-grid {
    grid-template-columns:minmax(0,1fr);
    gap:12px;
    margin:12px 0 20px;
  }
}

/* Editorial step cards. Native .step layout applies only when the article
 * has no scoped style (no [data-news-styled] on the page); otherwise the
 * article's own CSS owns margin, padding and grid. Dark fill and text stay
 * for every article. news-redeem-step is generated here and always uses it.
 */

:where(html.lolga-black .news-article-page .news-article-content) :is(.news-redeem-step, :where([data-news-article-page]:not([data-news-styled])) .step:has(.step-number)) {
  position:relative;
  display:block;
  min-width:0;
  padding:18px 18px 18px 58px;
  margin:18px 0 22px;
  border:1px solid #353535;
  border-radius:12px;
  overflow:hidden;
  box-shadow:none;
}

html.lolga-black .news-article-page .news-article-content :is(.news-redeem-step, .step:has(.step-number)) {
  background:#1b1b1b!important;
  color:#f4f4f4;
}

:where(html.lolga-black .news-article-page .news-article-content) :is(.news-redeem-step-number, :where([data-news-article-page]:not([data-news-styled])) .step:has(.step-number) .step-number) {
  position:absolute;
  top:18px;
  left:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  min-width:28px;
  padding:0;
  margin:0;
  border:0;
  border-radius:50%;
  font-size:14px;
  line-height:1;
  font-weight:800;
}

html.lolga-black .news-article-page .news-article-content :is(.news-redeem-step-number, .step:has(.step-number) .step-number) {
  color:#fff!important;
  background:#1fa34a!important;
}

:where(html.lolga-black .news-article-page .news-article-content) :is(.news-redeem-step, :where([data-news-article-page]:not([data-news-styled])) .step:has(.step-number)) h3 {
  margin:0 0 8px;
  font-size:18px;
  line-height:1.35;
  font-weight:750;
}

html.lolga-black .news-article-page .news-article-content :is(.news-redeem-step, .step:has(.step-number)) h3 {
  color:#f4f4f4!important;
}

:where(html.lolga-black .news-article-page .news-article-content) :is(.news-redeem-step, :where([data-news-article-page]:not([data-news-styled])) .step:has(.step-number)) p {
  margin:0 0 10px;
  font-size:15px;
  line-height:1.65;
}

html.lolga-black .news-article-page .news-article-content :is(.news-redeem-step, .step:has(.step-number)) p {
  color:#cfcfcf;
}

:where(html.lolga-black .news-article-page .news-article-content) :is(.news-redeem-step, :where([data-news-article-page]:not([data-news-styled])) .step:has(.step-number)) img {
  display:block;
  width:auto;
  height:auto;
  max-width:min(100%,500px);
  max-height:none;
  margin:8px 0 0;
  border-radius:10px;
  -o-object-fit:contain;
     object-fit:contain;
}

html.lolga-black .news-article-page .news-article-content :is(.news-redeem-step, .step:has(.step-number)) .news-image-unavailable {
  max-width:500px;
}

@media(max-width:699px) {
  :where(html.lolga-black .news-article-page .news-article-content) :is(.news-redeem-step, :where([data-news-article-page]:not([data-news-styled])) .step:has(.step-number)) {
    padding:16px 12px 16px 52px;
    margin:14px 0 18px;
  }
  :where(html.lolga-black .news-article-page .news-article-content) :is(.news-redeem-step-number, :where([data-news-article-page]:not([data-news-styled])) .step:has(.step-number) .step-number) {
    top:16px;left:14px;
  }
  :where(html.lolga-black .news-article-page .news-article-content) :is(.news-redeem-step, :where([data-news-article-page]:not([data-news-styled])) .step:has(.step-number)) h3 {
    font-size:17px;
  }
  :where(html.lolga-black .news-article-page .news-article-content) :is(.news-redeem-step, :where([data-news-article-page]:not([data-news-styled])) .step:has(.step-number)) img {
    max-width:100%;
  }
}

/* Related LOLGA Guides — match the editorial reference:
 * one horizontal image / category-title-summary row, subtle dividers,
 * never giant 800px screenshots or merged green text.
 * Keep these overrides last because older News cards used a 2-column grid.
 */

html.lolga-black .news-article-page .news-article-content .news-related-guides-heading {
  margin-top:2rem;
  margin-bottom:14px;
  font-size:24px;
  line-height:1.35;
}

html.lolga-black .news-article-page .news-article-content .news-related-guides-heading::before {
  content:"";
  display:block;
  width:60px;
  height:4px;
  background:#22a84e;
  border-radius:3px;
  margin:0 0 14px;
}

:where(html.lolga-black .news-article-page .news-article-content) .news-related-guides-grid {
  display:block;
  grid-template-columns:none;
  gap:0;
  margin:0 0 24px;
}

:where(html.lolga-black .news-article-page .news-article-content) .news-related-guide-card {
  display:grid;
  grid-template-columns:minmax(0,42%) minmax(0,1fr);
  align-items:start;
  gap:24px;
  padding:18px 0;
  margin:0;
  min-width:0;
  overflow:visible;
  box-shadow:none;
  border:0;
  border-bottom:1px solid #353535;
  border-radius:0;
}

html.lolga-black .news-article-page .news-article-content .news-related-guide-card {
  background:transparent!important;
}

:where(html.lolga-black .news-article-page .news-article-content) .news-related-guide-card:last-child {
  border-bottom:0;
}

:where(html.lolga-black .news-article-page .news-article-content) .news-related-guide-media {
  display:block;
  width:100%;
  min-width:0;
  aspect-ratio:16/9;
  line-height:0;
  margin:0;
  padding:0;
  overflow:hidden;
  border-radius:10px;
}

html.lolga-black .news-article-page .news-article-content .news-related-guide-media {
  background:#202020;
}

:where(html.lolga-black .news-article-page .news-article-content) .news-related-guide-media :is(a,p,figure) {
  display:block;
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}

:where(html.lolga-black .news-article-page .news-article-content) .news-related-guide-media img {
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  margin:0;
  padding:0;
  -o-object-fit:cover;
     object-fit:cover;
  border-radius:0;
}

:where(html.lolga-black .news-article-page .news-article-content) .news-related-guide-copy {
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:9px;
  margin:0;
  padding:0;
  line-height:1.6;
}

html.lolga-black .news-article-page .news-article-content .news-related-guide-copy {
  color:#cfcfcf!important;
  text-decoration:none!important;
}

:where(html.lolga-black .news-article-page .news-article-content) .news-related-guide-copy :is(div,span,p) {
  margin:0;
  padding:0;
}

html.lolga-black .news-article-page .news-article-content .news-related-guide-kicker {
  color:#a3adbd!important;
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:.05em;
  line-height:1.45;
  text-transform:uppercase;
}

:where(html.lolga-black .news-article-page .news-article-content) .news-related-guide-title {
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  padding:0;
  margin:0;
  font-size:19px;
  font-weight:650;
  line-height:1.5;
}

html.lolga-black .news-article-page .news-article-content .news-related-guide-title {
  color:#45d42f!important;
  text-decoration:none!important;
}

html.lolga-black .news-article-page .news-article-content .news-related-guide-description {
  display:block;
  color:#b9c0cc!important;
  font-size:15px!important;
  font-weight:400!important;
  line-height:1.65!important;
  text-decoration:none!important;
}

html.lolga-black .news-article-page .news-article-content .news-related-guide-copy:hover
.news-related-guide-title {
  color:#55ef3f!important;
}

@media(max-width:699px) {
  :where(html.lolga-black .news-article-page .news-article-content) .news-related-guide-card {
    grid-template-columns:minmax(0,1fr);
    gap:12px;
    padding:15px 0;
  }
  html.lolga-black .news-article-page .news-article-content .news-related-guide-media {
    max-height:240px;
  }
  html.lolga-black .news-article-page .news-article-content .news-related-guide-title {
    font-size:17px!important;
  }
  html.lolga-black .news-article-page .news-article-content .news-related-guide-description {
    font-size:14px!important;
  }
}

/* Historical Related LOLGA Guides rows.
 * The database keeps a.related-guide-item > img.related-guide-thumb
 * + .related-guide-meta > kicker / link / desc. Layout applies only when the
 * article has no scoped style; otherwise the article's CSS owns the row.
 * Colors apply to every article. Do not paint every span inside the link
 * with the same green.
 */

:where(html.lolga-black [data-news-article-page]:not([data-news-styled]) .news-article-content) .related-guides-list {
  display:block;
  margin:0 0 8px;
}

:where(html.lolga-black [data-news-article-page]:not([data-news-styled]) .news-article-content) a.related-guide-item {
  display:grid;
  grid-template-columns:minmax(0,42%) minmax(0,1fr);
  gap:24px;
  align-items:start;
  margin:0;
  padding:18px 0;
  border-bottom:1px solid #353535;
  color:inherit;
  text-decoration:none;
}

:where(html.lolga-black [data-news-article-page]:not([data-news-styled]) .news-article-content) .related-guides-list a.related-guide-item:last-child {
  border-bottom:0;
}

:where(html.lolga-black [data-news-article-page]:not([data-news-styled]) .news-article-content) a.related-guide-item .related-guide-thumb {
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  aspect-ratio:16/9;
  -o-object-fit:cover;
     object-fit:cover;
  border-radius:12px;
  margin:0;
}

:where(html.lolga-black [data-news-article-page]:not([data-news-styled]) .news-article-content) a.related-guide-item .related-guide-meta {
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:8px;
}

:where(html.lolga-black [data-news-article-page]:not([data-news-styled]) .news-article-content) a.related-guide-item :is(.related-guide-kicker,.related-guide-link,.related-guide-desc) {
  display:block;
  margin:0;
  text-decoration:none;
}

:where(html.lolga-black [data-news-article-page]:not([data-news-styled]) .news-article-content) a.related-guide-item .related-guide-kicker {
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  line-height:1.45;
  text-transform:uppercase;
}

html.lolga-black .news-article-page .news-article-content a.related-guide-item .related-guide-kicker {
  color:#a3adbd!important;
}

:where(html.lolga-black [data-news-article-page]:not([data-news-styled]) .news-article-content) a.related-guide-item .related-guide-link {
  font-size:19px;
  font-weight:650;
  line-height:1.45;
}

html.lolga-black .news-article-page .news-article-content a.related-guide-item .related-guide-link {
  color:#45d42f!important;
}

:where(html.lolga-black [data-news-article-page]:not([data-news-styled]) .news-article-content) a.related-guide-item .related-guide-desc {
  font-size:15px;
  font-weight:400;
  line-height:1.65;
}

html.lolga-black .news-article-page .news-article-content a.related-guide-item .related-guide-desc {
  color:#b9c0cc!important;
}

html.lolga-black .news-article-page .news-article-content a.related-guide-item:hover .related-guide-link,
html.lolga-black .news-article-page .news-article-content a.related-guide-item:focus-visible .related-guide-link {
  color:#55ef3f!important;
}

@media(max-width:699px) {
  :where(html.lolga-black [data-news-article-page]:not([data-news-styled]) .news-article-content) a.related-guide-item {
    grid-template-columns:minmax(0,1fr);
    gap:12px;
    padding:15px 0;
  }
  :where(html.lolga-black [data-news-article-page]:not([data-news-styled]) .news-article-content) a.related-guide-item .related-guide-link {
    font-size:17px;
  }
  :where(html.lolga-black [data-news-article-page]:not([data-news-styled]) .news-article-content) a.related-guide-item .related-guide-desc {
    font-size:14px;
  }
}

/**
 * News List + News Tag V10.
 * PURPOSE: Reuse global LOLGA dark colors, page widths and Product List V3 pagination visuals.
 * OWNS: News and Tag grids/cards only. Business queries, tags, page URLs belong to Laravel.
 * MUST NOT: rewrite the Product List paginator, shared shell, or News article rich text.
 * RELATED DOC: docs/news-refactor/README.md
 */

.lolga-black .news-index {background:#101010;color:#bbbbbb;}

.lolga-black .news-index__hero {
  background:#181818;
  border-bottom:1px solid #323232;
}

.lolga-black .news-index__hero-inner {
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
  padding-block:22px;
}

.lolga-black .news-index__heading {
  margin:0;
  font-size:clamp(24px,3vw,36px);
  color:#fff;
  font-weight:750;
  line-height:1.2;
}

.lolga-black .news-index__subtitle {color:#999;margin:8px 0 0;font-size:14px;}

.lolga-black .news-index__back {
  display:inline-flex;
  margin-top:12px;
  color:#45d42f;
  min-height:42px;
  align-items:center;
  text-decoration:none;
  font-size:14px;
}

.lolga-black .news-index__back:hover {color:#55ef3f;}

.lolga-black .news-index__social {
  display:flex;align-items:center;gap:18px;flex:none;
}

.lolga-black .news-index__social a {
  display:grid;justify-items:center;gap:4px;
  color:#bbb;font-size:12px;text-decoration:none;min-width:44px;
}

.lolga-black .news-index__social img {height:28px;width:28px;-o-object-fit:contain;object-fit:contain;}

.lolga-black .news-index__social a:hover {color:#fff;}

/* Cached hot-game filters on /news only. The shared /news-tag page has no game bar. */

.lolga-black .news-index__games {
  display:flex;align-items:center;gap:12px;
  margin:16px 0 0;min-width:0;position:relative;
}

.lolga-black .news-index__games-scroll {
  display:flex;align-items:center;gap:10px;
  min-width:0;flex:1;overflow-x:auto;overflow-y:hidden;
  padding:4px 0 6px;scrollbar-width:none;
}

.lolga-black .news-index__games-scroll::-webkit-scrollbar {display:none;}

.lolga-black .news-index__game-pill {
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  flex:none;min-height:48px;padding:8px 16px;
  background:#191919;border:1px solid #353535;border-radius:999px;
  color:#e5e5e5;font-size:14px;font-weight:600;
  line-height:1.2;text-decoration:none;white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}

.lolga-black .news-index__game-pill:hover {background:#262626;border-color:#515151;color:#fff;}

.lolga-black .news-index__game-pill:focus-visible,
.lolga-black .news-index__games-dropdown a:focus-visible {
  outline:2px solid #45d42f;outline-offset:3px;
}

.lolga-black .news-index__game-pill.is-active,
.lolga-black .news-index__games-more.is-active > summary {
  color: #112008;background:#45d42f;border-color:#45d42f;
}

.lolga-black .news-index__game-pill.is-active:hover,
.lolga-black .news-index__games-more.is-active > summary:hover {
  color: #0d2c0e;background:#45d42f;border-color:#45d42f;
}

.lolga-black .news-index__game-pill--all {font-weight:700;}

.lolga-black .news-index__game-pill--all svg {flex:none;}

.lolga-black .news-index__game-icon,
.lolga-black .news-index__game-initials {
  flex:none;width:28px;height:28px;border-radius:6px;
}

.lolga-black .news-index__game-icon {display:block;-o-object-fit:cover;object-fit:cover;}

.lolga-black .news-index__game-initials {
  display:inline-grid;place-items:center;background:#2b332d;
  color:#a7edac;font-size:10px;font-weight:800;
}

.lolga-black .news-index__games-more {position:relative;flex:none;}

.lolga-black .news-index__games-more > summary {cursor:pointer;list-style:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;}

.lolga-black .news-index__games-more > summary::-webkit-details-marker {display:none;}

.lolga-black .news-index__games-more > summary svg {flex:none;transition:transform .15s ease;}

.lolga-black .news-index__games-more[open] > summary svg {transform:rotate(180deg);}

.lolga-black .news-index__games-dropdown {
  position:absolute;top:calc(100% + 8px);right:0;z-index:30;
  width:-moz-max-content;
  width:max-content;min-width:230px;max-width:min(340px,calc(100vw - 32px));
  max-height:330px;overflow-y:auto;overscroll-behavior:contain;
  margin:0;padding:8px;list-style:none;
  background:#202020;border:1px solid #373737;border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}

.lolga-black .news-index__games-dropdown a {
  display:flex;align-items:center;gap:10px;min-height:44px;
  padding:7px 10px;border-radius:8px;
  text-decoration:none;color:#eee;font-size:14px;
  white-space:normal;overflow-wrap:anywhere;
}

.lolga-black .news-index__games-dropdown a:hover,
.lolga-black .news-index__games-dropdown a.is-active {
  background:#2b3b2e;color:#7ee69a;
}

@media(max-width:699px) {
  .lolga-black .news-index__games {gap:8px;margin-top:12px;}
  .lolga-black .news-index__games-scroll {gap:8px;}
  .lolga-black .news-index__game-pill {min-height:42px;padding:7px 12px;font-size:13px;gap:8px;}
  .lolga-black .news-index__game-icon,
  .lolga-black .news-index__game-initials {width:24px;height:24px;}
}

.lolga-black .news-index__filter-state {
  margin:16px 0 0;padding:10px 14px;
  background:#181818;border-left:2px solid #45d42f;
  color:#ccc;font-size:14px;overflow-wrap:anywhere;
}

.lolga-black .news-index__grid {
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  -moz-column-gap:18px;
       column-gap:18px;row-gap:22px;
  list-style:none;padding:0;margin:20px 0;
}

.lolga-black .news-index__card {
  min-width:0;overflow:hidden;
  background:#202020;border:1px solid #323232;
  border-radius:12px;display:flex;flex-direction:column;
  transition:border-color .15s ease,background .15s ease;
}

.lolga-black .news-index__card:hover {border-color:#454545;background:#252525;}

.lolga-black .news-index__media {
  position:relative;display:block;overflow:hidden;
  width:100%;aspect-ratio:16/9;background:#181818;
}

.lolga-black .news-index__media img,
.lolga-black .news-index__media iframe {
  display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border:0;
}

.lolga-black .news-index__media img.news-index__placeholder {
  -o-object-fit:contain;
     object-fit:contain;padding:20%;opacity:.65;
}

.lolga-black .news-index__body {
  padding:14px 16px 16px;display:flex;flex:1;flex-direction:column;gap:10px;
}

.lolga-black .news-index__title {margin:0;font-size:17px;font-weight:700;line-height:1.45;}

.lolga-black .news-index__title a {
  color:#fff;text-decoration:none;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;
}

.lolga-black .news-index__title a:hover,
.lolga-black .news-index__title a:focus-visible {color:#45d42f;}

.lolga-black .news-index__tags {
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  padding:0;margin:0;list-style:none;
}

.lolga-black .news-index__tags a {
  font-size:12px;text-decoration:underline;text-underline-offset:3px;
  color:#bcbcbc;overflow-wrap:anywhere;
}

.lolga-black .news-index__tags a:hover {color:#45d42f;}

.lolga-black .news-index__date {margin-top:auto;font-size:12px;color:#999;}

.lolga-black .news-index__empty {
  padding:48px 16px;text-align:center;color:#bbb;
}

.lolga-black .lolga-pagination {
  display:flex;justify-content:center;align-items:center;
  padding:28px 0 32px;margin:0;
}

.lolga-black .lolga-pagination :is(.lolga-pagination__desktop,.lolga-pagination__mobile) {
  display:flex;align-items:center;justify-content:center;
  gap:18px;min-width:0;
}

.lolga-black .lolga-pagination .page-btn {
  display:inline-grid;place-items:center;
  width:42px;min-width:42px;height:42px;padding:0;
  border:0;border-radius:999px;background:transparent;
  color:#c7c7c7;font-weight:750;font-size:14px;
  text-decoration:none;box-shadow:none;
}

.lolga-black .lolga-pagination .page-btn:hover,
.lolga-black .lolga-pagination .page-btn:focus-visible {
  background:#242424;color:#fff;
}

.lolga-black .lolga-pagination .page-btn.active,
.lolga-black .lolga-pagination .page-btn[aria-current="page"] {
  background:#45d42f;color:#081207;
  box-shadow:0 0 0 1px rgba(69,212,47,.18),0 0 18px rgba(69,212,47,.15);
}

.lolga-black .lolga-pagination .page-btn.page-nav {
  background:#282832;color:#f3f3f5;
  border:1px solid #34343f;border-radius:8px;
  font-size:24px;font-weight:500;
}

.lolga-black .lolga-pagination .page-btn.page-nav:hover {background:#30303a;color:#fff;}

.lolga-black .lolga-pagination .page-ellipsis {color:#777;font-size:14px;}

.lolga-black .lolga-pagination .lolga-pagination__mobile {display:none;}

@media(max-width:1024px) {
  .lolga-black .news-index__grid {grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(max-width:699px) {
  .lolga-black .news-index__grid {grid-template-columns:minmax(0,1fr);gap:14px;margin:14px 0;}
  .lolga-black .news-index__hero-inner {align-items:flex-start;gap:10px;padding-block:18px;}
  .lolga-black .news-index__social {gap:10px;}
  .lolga-black .news-index__heading {font-size:26px;}
  .lolga-black .news-index__body {padding:14px;}
  .lolga-black .news-index__title {font-size:16px;}
  .lolga-black .lolga-pagination :is(.lolga-pagination__desktop,.lolga-pagination__mobile) {gap:4px;}
  .lolga-black .lolga-pagination .lolga-pagination__desktop {display:none;}
  .lolga-black .lolga-pagination .lolga-pagination__mobile {display:flex;}
}

/* Laravel links follow Product List V3 page window; mobile uses real GET form. */

.lolga-black .lolga-pagination .page-nav svg {
  width:22px;height:22px;stroke:currentColor;stroke-width:2;
  fill:none;stroke-linecap:round;stroke-linejoin:round;
}

.lolga-black .lolga-pagination .page-jump {margin-left:4px;font-size:13px;color:#eaeaea;}

.lolga-black .lolga-pagination .page-jump label {display:flex;align-items:center;gap:10px;}

.lolga-black .lolga-pagination .page-jump select {
  min-width:78px;height:40px;border:1px solid #34343f;
  border-radius:8px;background:#2b2b35;color:#fff;padding:0 12px;
}

.lolga-black .lolga-pagination .is-disabled {opacity:.35;cursor:default;}

@media(max-width:767px) {
  .lolga-black .lolga-pagination .lolga-pagination__desktop {display:none;}
  .lolga-black .lolga-pagination .lolga-pagination__mobile {display:flex;gap:10px;}
  .lolga-black .lolga-pagination .lolga-pagination__mobile .page-nav {
    width:48px;min-width:48px;height:48px;border-radius:7px;
  }
  .lolga-black .lolga-pagination .lolga-pagination__mobile .page-nav svg {width:23px;height:23px;}
  .lolga-black .lolga-pagination .page-jump select {height:48px;}
}

@media(max-width:390px) {
  .lolga-black .lolga-pagination .lolga-pagination__mobile {gap:7px;}
  .lolga-black .lolga-pagination .lolga-pagination__mobile .page-nav {
    width:44px;min-width:44px;height:44px;
  }
  .lolga-black .lolga-pagination .page-jump select {min-width:64px;height:44px;}
}

/* Global Product List V3 maximum content width. */

.lolga-black .news-index .container {max-width:1440px;}

/* Help uses the same cached-game filter as News inside its article column. */

.lolga-black .lolga-help-index__content .news-index__games{margin:18px 0 20px;max-width:100%}

.lolga-black .lolga-help-index__content .news-index__games-more{z-index:20}

.lolga-black .lolga-help-index__empty{padding:22px 0;color:#999;font-size:14px}

/* Help game filters: brand green and a compact, accessible mobile select. */

.lolga-black .lolga-help-index__content .news-index__game-pill.is-active,
.lolga-black .lolga-help-index__content .news-index__games-more.is-active>summary{
 background:#45d42f;border-color:#45d42f;color:#101010;
}

.lolga-black .lolga-help-index__content .news-index__games-dropdown a.is-active{color:#5cff4f;background:#173316}

/**
 * PURPOSE: News article game shop card and Google preferred-source card in the right rail.
 * OWNS: .news-article-page .news-game-shop, .news-article-page .news-google-source
 * MUST NOT: style product lists, product detail, cart, or article body rich text.
 * RELATED JS:
 * RELATED DOC: docs/news-refactor/README.md
 * DESIGN SOURCE: news article right rail. Button uses brand green #45d42f.
 */

.news-article-page .news-game-shop {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.28);
    border-radius: 16px;
    padding: 16px;
    color: #fff;
}

.news-article-page:not(.news-article-page--dark) .news-game-shop {
    border-color: #e5e7eb;
    background: #fff;
    color: #111;
}

.news-article-page .news-game-shop__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.news-article-page .news-game-shop__icon {
    position: relative;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
}

.news-article-page .news-game-shop__icon img,
.news-article-page .news-game-shop__mark {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}

.news-article-page .news-game-shop__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #222;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.news-article-page .news-game-shop__hot {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #dc2626;
    color: #fff;
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
}

.news-article-page .news-game-shop__name {
    margin: 0;
    font-size: 22px;
    font-weight: 750;
    line-height: 1.15;
}

.news-article-page .news-game-shop__chip {
    display: inline-flex;
    margin-top: 6px;
    border-radius: 8px;
    background: rgba(69, 212, 47, 0.16);
    color: #45d42f;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.news-article-page .news-game-shop__points {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.news-article-page .news-game-shop__points li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    color: #c5c8d0;
    font-size: 15px;
    line-height: 1.3;
}

.news-article-page:not(.news-article-page--dark) .news-game-shop__points li {
    color: #3f3f46;
}

.news-article-page .news-game-shop__points svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: #45d42f;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.news-article-page .news-game-shop__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 16px;
    border-radius: 12px;
    background: #45d42f;
    color: #101010;
    font-size: 16px;
    font-weight: 750;
    text-decoration: none;
}

.news-article-page .news-game-shop__button:hover {
    background: #3ec229;
    color: #101010;
}

.news-article-page .news-game-shop__button svg {
    position: absolute;
    right: 16px;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.news-article-page .news-google-source {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.28);
    border-radius: 16px;
    padding: 16px;
    color: #fff;
}

.news-article-page:not(.news-article-page--dark) .news-google-source {
    border-color: #e5e7eb;
    background: #fff;
    color: #111;
}

.news-article-page .news-google-source__logos {
    display: flex;
    align-items: center;
    gap: 12px;
}

.news-article-page .news-google-source__logos img {
    display: block;
    height: 28px;
    width: auto;
    max-width: 120px;
    -o-object-fit: contain;
       object-fit: contain;
}

.news-article-page .news-google-source__text {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: #c5c8d0;
}

.news-article-page:not(.news-article-page--dark) .news-google-source__text {
    color: #3f3f46;
}

.news-article-page .news-google-source__button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 14px;
    border-radius: 12px;
    background: #45d42f;
    color: #101010;
    font-size: 15px;
    font-weight: 750;
    text-decoration: none;
}

.news-article-page .news-google-source__button:hover {
    background: #3ec229;
    color: #101010;
}

@media (max-width: 1023px) {
    .news-article-page .news-article-rail {
        display: contents;
    }

    .news-article-page .news-game-shop {
        order: 1;
    }

    .news-article-page .news-article-main {
        order: 2;
    }

    .news-article-page .news-google-source {
        order: 3;
        margin-top: 24px;
    }
}

@media (min-width: 1024px) {
    .news-article-page .news-game-shop + .news-google-source {
        margin-top: 16px;
    }
}

/**
 * LOLGA — Shared Game Subnav (Product List + PDP + Wiki)
 *
 * PURPOSE:
 *   Reproduce the reference game identity + attribute navigation.
 *
 * OWNS:
 *   .game-subnav, .game-identity, .game-tab across Catalog, PDP, Wiki.
 *
 * MUST NOT:
 *   - invent attribute labels/URLs
 *   - create fake tabs
 *
 * RELATED DOC:
 *   docs/product-list/design.md
 */

.lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-subnav {
  position: relative;
  z-index: 50;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.045) !important;
  background: #181818 !important;
}

.lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-subnav-inner {
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  gap: 26px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
}

/* PDP has its own content width; match Catalog's 1440px shared subnav
 * without changing the width of PDP purchase/gallery/content panels. */

.lolga-black .pdp-page .game-subnav .product-wrap.game-subnav-inner {
  width: min(1440px, calc(100% - 28px)) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

/* Desktop: a single continuous row with consistent spacing across games.
   Keep the existing DB-backed links; no per-game offsets or dummy columns. */

.lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-tabs-shell {
  display: flex;
  align-self: stretch;
  align-items: center;
  min-width: 0;
}

.lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-tabs {
  display: flex;
  align-self: stretch;
  align-items: stretch;
  gap: 28px;
  min-width: 0;
}

.lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-tabs-next {
  display: none;
}

.lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-identity {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0;
  margin-right: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
  color: #fff;
}

.lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-identity-icon {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px;
  border-radius: 7px !important;
  -o-object-fit: cover;
     object-fit: cover;
}

.lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-title {
  margin: 0 !important;
  color: #fff !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

.lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-tab {
  position: relative;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  margin-left: 0 !important;
  padding: 0 18px !important;
  flex: 0 0 auto;
  white-space: nowrap;
  border: 0 !important;
  background: transparent !important;
  color: #dadada !important;
  font-size: 16px !important;
  font-weight: 680 !important;
  text-decoration: none;
}

.lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-tab:hover {
  color: #fff !important;
}

/* Desktop and phone share the SAME active text, soft glow and 48px underline.
   The existing .game-tab-visual Blade markup is the only active indicator. */

.lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-tab.active {
  color: #22ff00 !important;
  text-shadow: 0 0 6px rgba(39,246,7,.18);
}

.lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-tab-visual {
  display: none;
}

.lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-tab.active .game-tab-visual {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}

.lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-tab.active .game-tab-visual-glow {
  position: absolute;
  width: 80px;
  height: 40px;
  bottom: 0;
  background: radial-gradient(ellipse at 50% 65%, rgba(69,212,47,.17), rgba(69,212,47,0) 74%);
}

.lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-tab.active .game-tab-visual-line {
  width: 48px;
  height: 3px;
  flex: 0 0 48px;
  border-radius: 999px;
  background: #45d42f;
  box-shadow: 0 0 8px rgba(69,212,47,.4);
}

.lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-tab-label {
  position: relative;
  z-index: 1;
}

.lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-subnav-inner::-webkit-scrollbar {
  display: none;
}

/* Shared phone game banner: identity above centered attribute tabs.
 * Applies equally to ITEM, Gold, Accounts and other existing catalog/Wiki routes.
 * No fabricated tabs or per-game link overrides.
 */

@media (max-width: 767px) {
  .lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-subnav .product-wrap.game-subnav-inner {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: stretch !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  .lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-identity {
    min-height: 60px;
    min-width: 0;
    gap: 10px !important;
    padding: 8px 4px 0 !important;
  }

  .lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-identity-icon {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px;
    border-radius: 9px !important;
  }

  .lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-title {
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* A single link duplicates the current page; keep its desktop presence, hide on mobile. */
  .lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-tabs-shell.is-single {
    display: none;
  }

  .lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-tabs-shell {
    position: relative;
    display: block;
    min-width: 0;
    max-width: 100%;
  }

  .lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-tabs {
    min-height: 44px;
    min-width: 0;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* JS only reveals this control when the real tab width exceeds the viewport. */
  .lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-tabs-next {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    display: flex;
    width: 42px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 0 0 8px;
    border: 0;
    color: #45d42f;
    background: linear-gradient(90deg, transparent, #181818 35%);
    cursor: pointer;
  }

  .lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-tabs-next[hidden] {
    display: none !important;
  }

  .lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-tabs-next:focus-visible {
    outline: 2px solid #45d42f;
    outline-offset: -2px;
    border-radius: 8px;
  }

  .lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-tabs::-webkit-scrollbar {
    display: none;
  }

  .lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-tab {
    flex: 1 0 auto;
    min-width: 0;
    height: 44px !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: center;
    isolation: isolate;
  }

  .lolga-black :is(.catalog-page, .wiki-page, .pdp-page) .game-tab-label {
    position: relative;
    z-index: 1;
  }


}

/**
 * PURPOSE: LOLGA Codes and Guide shared black-theme shell and Guide article cards.
 * OWNS: .wiki-page layout, native game-subnav width, shared Wiki sidebar, Guide cards.
 * MUST NOT: style legacy Wiki types, modify News articles or product commerce UI.
 * RELATED JS: existing Codes Blade Copy handler only.
 * RELATED DOC: docs/wiki-redesign/README.md
 * DESIGN SOURCE: existing Product List game navigation + V10 Codes/Guide design.
 */

.lolga-black .wiki-page { width:100%; min-width:0; background:#101010; color:#bbb; }

.lolga-black .wiki-page .game-subnav { width:100%; background:#181818; }

.lolga-black .wiki-page .game-subnav .game-subnav-inner.product-wrap {
  width:calc(100% - 24px); max-width:1440px; margin:0 auto;
}

.lolga-black .wiki-page .wiki-page-container {
  width:calc(100% - 24px); max-width:1440px; margin:0 auto; padding:22px 0 64px;
}

.lolga-black .wiki-page .wiki-page-heading { margin:0 0 24px; }

.lolga-black .wiki-page .wiki-page-heading h1 {
  margin:12px 0 0; padding:0; font-size:30px; line-height:1.28; font-weight:700; color:#fff;
}

.lolga-black .wiki-page .wiki-page-heading p { margin:9px 0 0; color:#bbb; font-size:14px; line-height:1.65; }

.lolga-black .wiki-page .wiki-page-heading .bg-green-600 { display:none; }

.lolga-black .wiki-page .wiki-page-layout {
  display:grid; grid-template-columns:minmax(0, 3fr) minmax(0,1fr);
  gap:30px; align-items:start;
}

.lolga-black .wiki-page .wiki-page-main { min-width:0; }

.lolga-black .wiki-page .wiki-page-sidebar { width:100%; min-width:0; }

.lolga-black .wiki-page .gag2-sidebox {
  margin:0 0 20px; padding:20px; background:#202020; border:1px solid #313131;
  border-radius:8px; box-shadow:none; color:#bbb;
}

.lolga-black .wiki-page .gag2-sidebox-title {
  margin:0 0 16px; color:#fff; font-size:17px; line-height:1.4; font-weight:600;
}

.lolga-black .wiki-page .gag2-jump { display:block; }

.lolga-black .wiki-page .lolga-news-item {
  display:flex; align-items:flex-start; gap:12px; min-width:0; padding:12px 0;
  background:none; border:0; border-top:1px solid #313131; text-decoration:none;
}

.lolga-black .wiki-page .lolga-news-item:first-child { border-top:0; padding-top:0; }

.lolga-black .wiki-page .lolga-news-rank {
  display:block; flex:0 0 28px; width:28px; padding:0;
  background:transparent; color:#888; font-size:13px; font-weight:650; line-height:21px;
}

.lolga-black .wiki-page .lolga-news-copy { min-width:0; flex:1; padding:0; }

.lolga-black .wiki-page .lolga-news-text {
  display:-webkit-box; margin:0; overflow:hidden; color:#bbb; font-size:14px; font-weight:500;
  line-height:21px; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow-wrap:anywhere;
}

.lolga-black .wiki-page .lolga-news-date { margin:5px 0 0; color:#888; font-size:12px; }

.lolga-black .wiki-page .lolga-news-item:hover .lolga-news-rank,
.lolga-black .wiki-page .lolga-news-item:hover .lolga-news-text { color:#45d42f; }

.lolga-black .wiki-page .gag2-category-list { display:block; }

.lolga-black .wiki-page .gag2-category {
  display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 0;
  color:#bbb; border-top:1px solid #313131; font-size:14px; line-height:21px; text-decoration:none;
}

.lolga-black .wiki-page .gag2-category:first-child { padding-top:0; border-top:0; }

.lolga-black .wiki-page .gag2-category-count { color:#888; font-size:12px; background:none; }

.lolga-black .wiki-page .gag2-category:hover,
.lolga-black .wiki-page .gag2-sidebox-footer-link:hover { color:#45d42f; }

.lolga-black .wiki-page .gag2-sidebox-footer {
  margin-top:12px; padding-top:16px; border-top:1px solid #313131; text-align:center;
}

.lolga-black .wiki-page .gag2-sidebox-footer-link { color:#bbb; font-size:14px; }

.lolga-black .wiki-page .wiki-popular-empty { font-size:14px; color:#888; }

.lolga-black .wiki-page .gag2-sidebar-ad {
  display:block; width:100%; overflow:hidden; margin-bottom:20px; border-radius:8px;
}

.lolga-black .wiki-page .gag2-sidebar-ad img { display:block; width:100%; height:auto; }

.lolga-black .wiki-guide-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:stretch;
}

.lolga-black .wiki-guide-card {
  min-width:0; overflow:hidden; display:flex; flex-direction:column; text-decoration:none;
  background:#202020; border:1px solid #313131; border-radius:8px;
  transition:border-color .15s ease; color:#bbb;
}

.lolga-black .wiki-guide-card:hover, .lolga-black .wiki-guide-card:focus-visible { border-color:#45d42f; }

.lolga-black .wiki-guide-media { width:100%; aspect-ratio:16 / 9; position:relative; overflow:hidden; background:#181818; }

.lolga-black .wiki-guide-media img { display:block; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; }

.lolga-black .wiki-guide-game {
  display:inline-block; max-width:100%; align-self:flex-start; color:#45d42f;
  font-size:12px; line-height:18px; font-weight:600;
}

.lolga-black .wiki-guide-game--overlay {
  position:absolute; left:12px; top:12px; max-width:calc(100% - 24px); padding:5px 8px;
  background:rgba(24,24,24,.9); border-radius:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.lolga-black .wiki-guide-body { padding:18px; display:flex; flex:1; flex-direction:column; gap:9px; min-width:0; }

.lolga-black .wiki-guide-title {
  display:-webkit-box; margin:0; color:#fff; font-size:17px; font-weight:600;
  line-height:25px; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}

.lolga-black .wiki-guide-excerpt {
  display:-webkit-box; margin:0; color:#bbb; font-size:14px; line-height:22px;
  overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3;
}

.lolga-black .wiki-guide-empty { grid-column:1 / -1; padding:24px; background:#202020; border-radius:8px; color:#bbb; }

.lolga-black .wiki-guide-pagination { margin-top:24px; }

@media (max-width:1024px) {
  .lolga-black .wiki-page .wiki-page-layout { grid-template-columns:minmax(0,1fr); gap:26px; }
}

@media (max-width:767px) {
  .lolga-black .wiki-page .wiki-page-container { padding:14px 0 40px; }
  .lolga-black .wiki-page .wiki-page-heading { margin-bottom:18px; }
  .lolga-black .wiki-page .wiki-page-heading h1 { font-size:23px; line-height:31px; margin-top:10px; }
  .lolga-black .wiki-page .game-subnav .game-subnav-inner.product-wrap { width:calc(100% - 24px) !important; }
  .lolga-black .wiki-guide-grid { grid-template-columns:minmax(0,1fr); gap:14px; }
  .lolga-black .wiki-guide-body { padding:15px; }
  .lolga-black .wiki-page .gag2-sidebox { padding:16px; margin-bottom:16px; }
  .lolga-black .wiki-page .gag2-sidebox-title { font-size:16px; }
}

/**
 * PURPOSE: Present legacy Codes rich text as readable LOLGA black-theme content.
 * OWNS: .wiki-page--codes .wiki-richtext, generated code rows, FAQ, tables.
 * MUST NOT: change Wiki placeholders, duplicate copy handler or affect News sanitizer.
 * RELATED JS: wiki/codes.blade.php existing Copy click delegation.
 * RELATED DOC: docs/wiki-redesign/README.md
 * DESIGN SOURCE: V10 Codes visual contract.
 */

.lolga-black .wiki-page--codes .wiki-richtext { font-size:15px; line-height:1.7; color:#bbb; min-width:0; }

.lolga-black .wiki-page--codes .wiki-richtext-section + .wiki-richtext-section { margin-top:22px; }

.lolga-black .wiki-page--codes .wiki-richtext :is(h1,h2,h3,h4,h5,h6) {
  color:#fff !important; font-weight:650; overflow-wrap:anywhere;
}

.lolga-black .wiki-page--codes .wiki-richtext h2 { font-size:22px; line-height:30px; margin:28px 0 14px; }

.lolga-black .wiki-page--codes .wiki-richtext h3 { font-size:18px; line-height:26px; margin:22px 0 12px; }

.lolga-black .wiki-page--codes .wiki-richtext p { color:#bbb; margin:0 0 12px; line-height:1.7; }

.lolga-black .wiki-page--codes .wiki-richtext :is(a,a:visited) { color:#45d42f !important; overflow-wrap:anywhere; }

.lolga-black .wiki-page--codes .wiki-richtext a:hover { color:#fff !important; }

.lolga-black .wiki-page--codes .wiki-richtext :is(strong,b) { color:#fff; }

.lolga-black .wiki-page--codes .wiki-richtext :is(ul,ol) { margin:12px 0 16px; padding-left:24px; }

.lolga-black .wiki-page--codes .wiki-richtext ul { list-style:disc; }

.lolga-black .wiki-page--codes .wiki-richtext ol { list-style:decimal; }

.lolga-black .wiki-page--codes .wiki-richtext li { margin-bottom:7px; color:#bbb; }

.lolga-black .wiki-page--codes .wiki-richtext img,
.lolga-black .wiki-page--codes .wiki-richtext video,
.lolga-black .wiki-page--codes .wiki-richtext iframe { max-width:100%; height:auto; }

.lolga-black .wiki-page--codes .wiki-richtext :is(table) {
  max-width:100%; border-collapse:collapse; color:#bbb; background:#202020;
}

.lolga-black .wiki-page--codes .wiki-richtext :is(td,th) { padding:10px 12px; border:1px solid #313131; }

.lolga-black .wiki-page--codes .wiki-richtext th { background:#181818; color:#fff; }

.lolga-black .wiki-page--codes .wiki-richtext .wiki-table-scroll { overflow-x:auto; max-width:100%; }

/* FAQ has one visual owner. Stored CSS is injected after this bundle, so the
 * Codes root ID wins over old game-prefixed selectors (including !important).
 * The raw details/open DOM stays untouched. */

.lolga-black .wiki-page--codes #wiki-codes-content details {
  margin:0 !important;
  padding:0 16px !important;
  overflow:hidden;
  color:#bbb !important;
  background:#202020 !important;
  border:1px solid #313131 !important;
  border-bottom:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.lolga-black .wiki-page--codes #wiki-codes-content details:first-of-type {
  border-radius:8px 8px 0 0 !important;
}

.lolga-black .wiki-page--codes #wiki-codes-content details:last-of-type {
  border-bottom:1px solid #313131 !important;
  border-radius:0 0 8px 8px !important;
}

.lolga-black .wiki-page--codes #wiki-codes-content details > summary {
  position:relative !important;
  display:block !important;
  min-height:50px;
  margin:0 !important;
  padding:14px 24px 14px 0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:600 !important;
  line-height:1.5;
  list-style:none !important;
  cursor:pointer;
}

.lolga-black .wiki-page--codes #wiki-codes-content details > summary::-webkit-details-marker {
  display:none !important;
}

.lolga-black .wiki-page--codes #wiki-codes-content details > summary::marker {
  content:"" !important;
}

/* The old templates draw a + / × with ::before or an extra ::after.
 * Remove both sources, then draw exactly ONE neutral chevron with ::after. */

.lolga-black .wiki-page--codes #wiki-codes-content details > summary::before {
  content:none !important;
  display:none !important;
}

.lolga-black .wiki-page--codes #wiki-codes-content details > summary::after {
  content:"" !important;
  position:absolute !important;
  display:block !important;
  top:50% !important;
  right:2px !important;
  bottom:auto !important;
  left:auto !important;
  width:8px !important;
  height:8px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-right:1.5px solid #888 !important;
  border-bottom:1.5px solid #888 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  opacity:1 !important;
  transform:translateY(-65%) rotate(45deg) !important;
  transition:transform .15s ease, border-color .15s ease;
  pointer-events:none;
}

.lolga-black .wiki-page--codes #wiki-codes-content details[open] > summary::after {
  border-right-color:#45d42f !important;
  border-bottom-color:#45d42f !important;
  transform:translateY(-25%) rotate(225deg) !important;
}

.lolga-black .wiki-page--codes #wiki-codes-content details[open] {
  padding-bottom:16px !important;
}

/* Remove the oversized light-template answer gap without rewriting the text. */

.lolga-black .wiki-page--codes #wiki-codes-content .gag-faq-answer {
  margin:0 !important;
  padding:0 !important;
  color:#bbb !important;
  font-size:14px;
  line-height:24px;
}

@media (max-width:767px) {
  .lolga-black .wiki-page--codes #wiki-codes-content details > summary {
    font-size:14px !important;
  }
}

.lolga-black .wiki-page--codes .wiki-richtext .gag2-codes { display:flex; flex-direction:column; gap:0; margin:12px 0 20px; }

.lolga-black .wiki-page--codes .wiki-richtext .gag2-code {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; min-width:0;
  gap:14px; padding:13px 16px; background:#202020 !important; border:1px solid #313131;
  border-bottom:0; border-radius:0; box-shadow:none !important;
}

.lolga-black .wiki-page--codes .wiki-richtext .gag2-code::before { display:none !important; }

.lolga-black .wiki-page--codes .wiki-richtext .gag2-code:first-child { border-radius:8px 8px 0 0; }

.lolga-black .wiki-page--codes .wiki-richtext .gag2-code:last-child { border-bottom:1px solid #313131; border-radius:0 0 8px 8px; }

.lolga-black .wiki-page--codes .wiki-richtext .gag2-code-line {
  display:flex; align-items:center; gap:10px; min-width:0; overflow-wrap:anywhere; white-space:normal;
}

.lolga-black .wiki-page--codes .wiki-richtext .gag2-code-name {
  flex:0 1 34%; min-width:0; padding:0; background:transparent !important; color:#45d42f !important;
  border-radius:0; font-size:15px; line-height:23px; font-weight:650; overflow-wrap:anywhere;
}

.lolga-black .wiki-page--codes .wiki-richtext .gag2-code-reward {
  flex:1; min-width:0; color:#bbb !important; font-size:14px; line-height:22px;
  overflow-wrap:anywhere; white-space:normal; text-overflow:clip;
}

.lolga-black .wiki-page--codes .wiki-richtext .gag2-new { color:#45d42f !important; background:transparent !important; font-size:11px; }

.lolga-black .wiki-page--codes .wiki-richtext .gag2-copy {
  display:inline-flex; justify-content:center; align-items:center; gap:7px;
  width:auto; min-width:88px; height:34px; margin:0; padding:0 12px; flex:none;
  color:#45d42f !important; background:#181818 !important; border:1px solid #45d42f !important;
  border-radius:6px; font-size:13px; font-weight:650; cursor:pointer; box-shadow:none !important;
}

.lolga-black .wiki-page--codes .wiki-richtext .gag2-copy:hover { background:#252525 !important; }

.lolga-black .wiki-page--codes .wiki-richtext .gag2-copy.copied { color:#45d42f !important; }

.lolga-black .wiki-page--codes .wiki-richtext .gag2-copy-icon { position:relative; display:inline-block; width:14px; height:14px; }

.lolga-black .wiki-page--codes .wiki-richtext .gag2-copy-icon::before,
.lolga-black .wiki-page--codes .wiki-richtext .gag2-copy-icon::after {
  content:""; position:absolute; width:8px; height:9px; border:1.5px solid currentColor; border-radius:1px;
}

.lolga-black .wiki-page--codes .wiki-richtext .gag2-copy-icon::before { left:1px; top:1px; }

.lolga-black .wiki-page--codes .wiki-richtext .gag2-copy-icon::after { left:5px; top:4px; }

.lolga-black .wiki-page--codes .wiki-richtext .gag2-expired { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 20px; }

.lolga-black .wiki-page--codes .wiki-richtext .gag2-expired-code { color:#888 !important; font-size:14px; text-decoration:none; }

.lolga-black .wiki-page--codes .wiki-richtext .wiki-expired-sep { color:#555; }

.lolga-black .wiki-page--codes .wiki-richtext .gag2-expired-empty { color:#888; }

@media (max-width:767px) {
  .lolga-black .wiki-page--codes .wiki-richtext { font-size:14px; line-height:1.65; }
  .lolga-black .wiki-page--codes .wiki-richtext h2 { font-size:19px; line-height:27px; margin:22px 0 12px; }
  .lolga-black .wiki-page--codes .wiki-richtext h3 { font-size:17px; line-height:24px; }
  .lolga-black .wiki-page--codes .wiki-richtext .gag2-code { padding:12px; gap:8px; }
  .lolga-black .wiki-page--codes .wiki-richtext .gag2-code-line { display:grid; grid-template-columns:minmax(0,1fr); gap:3px; }
  .lolga-black .wiki-page--codes .wiki-richtext .gag2-code-name { font-size:14px; }
  .lolga-black .wiki-page--codes .wiki-richtext .gag2-code-reward { font-size:13px; }
  .lolga-black .wiki-page--codes .wiki-richtext .gag2-copy { min-width:74px; height:36px; }
}

/**
 * PURPOSE: V9 Sell Order Detail scoped, responsive layout.
 * OWNS: [data-sell-order-detail] only, compiled into existing app-black.css.
 * MUST NOT: change Order/Cart/Payment or shared UI.
 * RELATED JS: page-only copy button in order-detail.blade.php.
 * RELATED DOC: docs/sell-to-us-refactor/sell-order-detail-v9.md
 * DESIGN SOURCE: V9 dark tokens and provided Sell Order screenshot.
 */

.lolga-black [data-sell-order-detail]{background:#101010;color:#bbb;padding-bottom:48px}

.lolga-black [data-sell-order-detail] *{box-sizing:border-box}

.lolga-black [data-sell-order-detail] .sod-shell{width:min(1180px,calc(100% - 32px));margin:auto;padding:30px 0 40px}

.lolga-black [data-sell-order-detail] h1,.lolga-black [data-sell-order-detail] h2{color:#fff;margin:0;font-weight:750}

.lolga-black [data-sell-order-detail] p{margin:0}

.lolga-black [data-sell-order-detail] .sod-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:23px;border-bottom:1px solid #333;margin-bottom:22px}

.lolga-black [data-sell-order-detail] .sod-heading{min-width:0;flex:1}

.lolga-black [data-sell-order-detail] .sod-eyebrow{color:#8cdb7e;font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:750;margin-bottom:7px}

.lolga-black [data-sell-order-detail] h1{font-size:clamp(22px,2.5vw,30px);line-height:1.3;overflow-wrap:anywhere}

.lolga-black [data-sell-order-detail] .sod-reminder{font-size:12px;color:#999;line-height:1.55;margin-top:7px}

.lolga-black [data-sell-order-detail] .sod-submitted{display:flex;align-items:center;gap:8px;flex:0 0 auto;border:1px solid #2e4f2b;background:#1c2b1a;color:#8de380;padding:9px 12px;border-radius:9px;font-weight:750;font-size:12px}

.lolga-black [data-sell-order-detail] .sod-columns{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:18px;align-items:start}

.lolga-black [data-sell-order-detail] .sod-details{min-width:0;display:grid;gap:16px}

.lolga-black [data-sell-order-detail] .sod-notice{background:#271d19;border:1px solid #51372e;border-radius:10px;padding:14px 16px;color:#e4b4a2;font-size:13px;line-height:1.6;display:flex;gap:10px}

.lolga-black [data-sell-order-detail] .sod-notice span{flex:none}

.lolga-black [data-sell-order-detail] .sod-panel,.lolga-black [data-sell-order-detail] .sod-help{background:#181818;border:1px solid #313131;border-radius:14px;padding:20px;min-width:0}

.lolga-black [data-sell-order-detail] .sod-panel h2,.lolga-black [data-sell-order-detail] .sod-help h2{font-size:18px;line-height:1.35}

.lolga-black [data-sell-order-detail] .sod-panel h2{border-bottom:1px solid #303030;padding-bottom:16px;margin-bottom:16px}

.lolga-black [data-sell-order-detail] .sod-facts{display:grid;gap:18px;margin:0}

.lolga-black [data-sell-order-detail] .sod-game{grid-template-columns:repeat(3,minmax(0,1fr))}

.lolga-black [data-sell-order-detail] .sod-user{grid-template-columns:repeat(2,minmax(0,1fr))}

.lolga-black [data-sell-order-detail] .sod-facts>div{min-width:0}

.lolga-black [data-sell-order-detail] .sod-facts dt{color:#929292;font-weight:650;font-size:11px;line-height:1.5;margin-bottom:6px}

.lolga-black [data-sell-order-detail] .sod-facts dd{margin:0;color:#eee;font-size:13px;line-height:1.55;overflow-wrap:anywhere;word-break:break-word}

.lolga-black [data-sell-order-detail] .sod-status{display:inline-block;padding:5px 9px;border:1px solid #354966;background:#233044;border-radius:6px;color:#bed1f5;font-size:12px;font-weight:750}

.lolga-black [data-sell-order-detail] .sod-help{padding:18px}

.lolga-black [data-sell-order-detail] .sod-help-list{display:grid;gap:9px;margin-top:16px}

.lolga-black [data-sell-order-detail] .sod-help-card{display:flex;align-items:center;gap:9px;min-width:0;background:#222;border:1px solid #393939;border-radius:9px;padding:11px;color:#eee;text-decoration:none}

.lolga-black [data-sell-order-detail] .sod-help-icon{display:flex;align-items:center;justify-content:center;flex:0 0 27px;height:27px;background:#35375a;border-radius:7px;color:#c9c9fb;font-size:12px;font-weight:750}

.lolga-black [data-sell-order-detail] .sod-help-card strong{color:#eee;font-size:12px}

.lolga-black [data-sell-order-detail] .sod-help-card small{display:block;margin-top:4px;font-size:11px;color:#999;line-height:1.55}

.lolga-black [data-sell-order-detail] .sod-copy{margin-left:auto;color:#ddd;background:#2c2c2c;border:1px solid #474747;border-radius:7px;padding:7px 10px;cursor:pointer;font-size:12px}

.lolga-black [data-sell-order-detail] .sod-copy-tip{color:#8de380;font-size:11px}

.lolga-black [data-sell-order-detail] .sod-copy-tip[hidden]{display:none}

.lolga-black [data-sell-order-detail] .sod-help-card:has(.sod-copy){flex-wrap:wrap}

.lolga-black [data-sell-order-detail] .sod-external{margin-left:auto;color:#aaa}

.lolga-black [data-sell-order-detail] a.sod-help-card:hover{border-color:#555;background:#282828}

@media(max-width:1023px){.lolga-black [data-sell-order-detail] .sod-columns{grid-template-columns:1fr}.lolga-black [data-sell-order-detail] .sod-help-list{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media(max-width:767px){.lolga-black [data-sell-order-detail] .sod-header{flex-direction:column;align-items:flex-start}.lolga-black [data-sell-order-detail] .sod-help-list{grid-template-columns:1fr}.lolga-black [data-sell-order-detail] .sod-panel{padding:16px}}

@media(max-width:479px){.lolga-black [data-sell-order-detail] .sod-shell{width:calc(100% - 28px);padding-top:22px}.lolga-black [data-sell-order-detail] .sod-game{grid-template-columns:repeat(2,minmax(0,1fr))}.lolga-black [data-sell-order-detail] .sod-user{grid-template-columns:1fr;gap:14px}}

/*
 * PURPOSE: LOLGA V9 Affiliate pages: /affiliate/* only.
 * OWNS: Affiliate auth, partner dashboard, orders, referral links, payouts and account UI.
 * MUST NOT: style normal /sell-to-us, shared Member pages, global forms or Cart/Checkout.
 * DESIGN SOURCE: lolga-affiliate-v9-design.html; docs/affiliate/README.md
 */

.lolga-black .affiliate-v9{--aff-bg:#101212;--aff-card:#1a1e1e;--aff-field:#151919;--aff-edge:#343c38;--aff-fg:#f5f7f5;--aff-muted:#9ba7a0;--aff-green:#45d42f;color:#cad1cb;background:#101212;min-height:58vh}

.lolga-black .affiliate-v9 *{box-sizing:border-box}

.lolga-black .affiliate-v9 .aff-container{width:min(1180px,calc(100% - 36px));margin:0 auto}

.lolga-black .affiliate-v9 a{transition:color .16s,background-color .16s}

.lolga-black .affiliate-v9 .aff-crumb{padding:29px 0 10px;font-size:12px;color:#849088}

.lolga-black .affiliate-v9 .aff-crumb a{color:#a4b0a6}

.lolga-black .affiliate-v9 .aff-crumb span{margin:0 9px;color:#626c65}

.lolga-black .affiliate-v9 .aff-crumb strong{color:#e3ece5;font-weight:650}

.lolga-black .affiliate-v9 h1,.lolga-black .affiliate-v9 h2,.lolga-black .affiliate-v9 h3{color:var(--aff-fg)}

.lolga-black .affiliate-v9 .aff-kicker{display:inline-block;color:#70e35c;border:1px solid #32523a;border-radius:30px;background:#17251a;padding:7px 12px;font-weight:820;font-size:11px;letter-spacing:.08em;text-transform:uppercase}

.lolga-black .affiliate-v9 .aff-intro{font-size:13px;color:var(--aff-muted);line-height:1.75;margin:7px 0 0}

.lolga-black .affiliate-v9 .aff-panel{background:#1a1e1e;border:1px solid #333a36;border-radius:13px;min-width:0}

.lolga-black .affiliate-v9 .aff-green-link{color:#78ed68;font-size:13px;font-weight:730;text-decoration:none}

.lolga-black .affiliate-v9 .aff-green-link:hover{text-decoration:underline}

.lolga-black .affiliate-v9 .aff-primary{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:12px 19px;border:0;border-radius:9px;background:#45d42f;color:#0c1909;font-size:13px;font-weight:880;cursor:pointer;transition:background .18s}

.lolga-black .affiliate-v9 .aff-primary:hover{background:#62ee4d}

.lolga-black .affiliate-v9 .aff-secondary{display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--aff-edge);border-radius:9px;background:#202625;color:#e6eee7;font-size:13px;font-weight:730;text-decoration:none}

.lolga-black .affiliate-v9 .aff-secondary:hover{background:#29322c}

.lolga-black .affiliate-v9 :is(input:not([type=checkbox]),select,textarea){background:var(--aff-field);border:1px solid #444c47;border-radius:8px;color:#f5f7f5;min-height:46px;padding:11px 13px;font-size:13px;max-width:100%}

.lolga-black .affiliate-v9 :is(input:not([type=checkbox]),select,textarea)::-moz-placeholder{color:#89938c}

.lolga-black .affiliate-v9 :is(input:not([type=checkbox]),select,textarea)::placeholder{color:#89938c}

.lolga-black .affiliate-v9 label{color:#e1e8e1;font-size:12px;font-weight:650;display:block;margin-bottom:8px}

.lolga-black .affiliate-v9 input[type=checkbox]{width:16px;height:16px;accent-color:#45d42f;cursor:pointer}

.lolga-black .affiliate-v9 .lolga-auth-errors{margin:0 0 20px!important;max-width:none!important;color:#ffc0bd}

.lolga-black .affiliate-v9 .aff-auth-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(360px,.94fr);gap:56px;align-items:start;padding:28px 0 78px}

.lolga-black .affiliate-v9 .aff-auth-grid--register{grid-template-columns:minmax(0,.91fr) minmax(440px,1.09fr);gap:48px}

.lolga-black .affiliate-v9 .aff-auth-story{min-width:0;padding:28px 0 0}

.lolga-black .affiliate-v9 .aff-story-title{font-size:clamp(37px,4.25vw,59px);font-weight:900;letter-spacing:-.054em;line-height:1.08;margin:23px 0 15px}

.lolga-black .affiliate-v9 .aff-story-title em{color:#57df43;font-style:normal}

.lolga-black .affiliate-v9 .aff-story-lead{max-width:515px;font-size:15px;line-height:1.75;color:#b0bcb1;margin:0 0 25px}

.lolga-black .affiliate-v9 .aff-rate-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:22px 0}

.lolga-black .affiliate-v9 .aff-rate{background:#191e1d;border:1px solid #333d36;border-radius:12px;padding:21px 22px;min-width:0}

.lolga-black .affiliate-v9 .aff-rate strong{font-size:39px;font-weight:890;line-height:1.15;color:#5ee34b;letter-spacing:-.045em}

.lolga-black .affiliate-v9 .aff-rate span{font-size:12px;color:#c9d7ca;font-weight:600;margin-left:6px}

.lolga-black .affiliate-v9 .aff-rate small{display:block;font-size:12px;color:#95a196;margin-top:10px;line-height:1.6}

.lolga-black .affiliate-v9 .aff-program-foot{display:grid;gap:13px;margin-top:24px;font-size:12px;line-height:1.7;color:#9eaba0}

.lolga-black .affiliate-v9 .aff-program-foot strong{color:#f0f5ee}

.lolga-black .affiliate-v9 .aff-program-terms{font-size:12px;line-height:1.7;color:#879589;margin:18px 0 0}

.lolga-black .affiliate-v9 .aff-auth-panel{padding:29px 31px}

.lolga-black .affiliate-v9 .aff-auth-panel h1{font-size:27px;letter-spacing:-.035em;font-weight:830;line-height:1.2;margin:0 0 6px}

.lolga-black .affiliate-v9 .aff-auth-panel .aff-intro{margin:0 0 24px}

.lolga-black .affiliate-v9 .aff-fields{display:grid;gap:18px}

.lolga-black .affiliate-v9 .aff-field{min-width:0}

.lolga-black .affiliate-v9 .aff-field :is(input:not([type=checkbox]),select){display:block;width:100%}

.lolga-black .affiliate-v9 .aff-fields--register{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}

.lolga-black .affiliate-v9 .aff-field--wide{grid-column:1/-1}

.lolga-black .affiliate-v9 .aff-form-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:19px 0 23px}

.lolga-black .affiliate-v9 .aff-remember{display:flex;gap:9px;align-items:center;margin:0!important;color:#b5bdb8!important;font-weight:520!important}

.lolga-black .affiliate-v9 .aff-error-note{margin:17px 0;padding:12px 13px;background:#25231b;border:1px solid #4d4430;border-radius:9px;font-size:12px;line-height:1.6;color:#e0c99a}

.lolga-black .affiliate-v9 .aff-bottom{font-size:12px;color:#afb9b1;text-align:center;margin:18px 0 0}

.lolga-black .affiliate-v9 .aff-login-note{display:flex;gap:12px;padding:15px;background:#1a1e1e;border:1px solid #343a37;border-radius:10px;color:#aeb8b0;font-size:12px;line-height:1.65;margin-top:14px}

.lolga-black .affiliate-v9 .aff-login-note a{color:#79e66a;text-decoration:underline}

.lolga-black .affiliate-v9 .aff-help-wrap{max-width:540px;margin:36px auto 92px;padding:0}

.lolga-black .affiliate-v9 .aff-help-heading{text-align:center;margin-bottom:24px}

.lolga-black .affiliate-v9 .aff-help-heading h1{font-size:33px;font-weight:850;letter-spacing:-.04em;line-height:1.18;margin:0 0 8px}

.lolga-black .affiliate-v9 .aff-help-icon{display:grid;place-items:center;margin:0 auto 19px;background:#1b3421;border:1px solid #325b39;border-radius:14px;color:#72e668;font-size:28px;width:58px;height:58px}

.lolga-black .affiliate-v9 .aff-help-panel{padding:28px 30px}

.lolga-black .affiliate-v9 .aff-help-panel form{display:grid;gap:17px}

.lolga-black .affiliate-v9 .aff-help-panel .aff-bottom{margin-top:21px}

.lolga-black .affiliate-v9-backoffice{padding:0 0 24px;min-height:0}

.lolga-black .affiliate-v9-backoffice main.container{width:min(1180px,calc(100% - 36px));max-width:none;padding:0}

.lolga-black .affiliate-v9-backoffice main.container > .relative{padding:30px 0 17px;border-color:#313833}

.lolga-black .affiliate-v9-backoffice main.container > .relative h1{color:#fff;font-size:clamp(25px,2.5vw,34px);letter-spacing:-.04em;font-weight:860;line-height:1.17}

.lolga-black .affiliate-v9-backoffice main.container > .relative .aff-intro{color:#98a49a;font-size:13px}

.lolga-black .affiliate-v9-backoffice main.container > section{padding:21px 0 0}

.lolga-black .affiliate-v9-backoffice main.container > section > .grid{display:grid;grid-template-columns:235px minmax(0,1fr);align-items:start;gap:24px}

.lolga-black .affiliate-v9-backoffice main.container > section > .grid > :last-child{grid-column:auto;min-width:0}

.lolga-black .affiliate-v9-backoffice .lolga-side-nav{width:100%;position:static;background:#181d1b;border:1px solid #333c34;border-radius:12px;padding:13px}

.lolga-black .affiliate-v9-backoffice .lolga-side-nav-list{display:grid;gap:4px}

.lolga-black .affiliate-v9-backoffice .lolga-side-nav-list a{display:flex;align-items:center;justify-content:space-between;padding:12px 11px;border-radius:8px;color:#aebbb1;font-size:13px;min-height:43px}

.lolga-black .affiliate-v9-backoffice .lolga-side-nav-list a b{font-size:13px;font-weight:660}

.lolga-black .affiliate-v9-backoffice .lolga-side-nav-list a.is-on,.lolga-black .affiliate-v9-backoffice .lolga-side-nav-list a:hover{color:#82eb72;background:#233625}

.lolga-black .affiliate-v9-backoffice .lolga-side-nav-contact{color:#9eaa9f;border-color:#323d36;margin-top:15px}

.lolga-black .affiliate-v9-backoffice .lolga-side-nav-contact-list a{color:#aab2ac;font-size:12px;overflow-wrap:anywhere}

.lolga-black .affiliate-v9-backoffice .aff-page-panel{background:#191e1c;border:1px solid #313a35;border-radius:12px;padding:23px;min-width:0}

.lolga-black .affiliate-v9-backoffice .aff-page-panel h2{color:#fafdfa;font-size:18px;font-weight:810;line-height:1.3}

.lolga-black .affiliate-v9-backoffice .aff-page-panel :is(p,li){line-height:1.55}

.lolga-black .affiliate-v9-backoffice .aff-page-panel .lolga-label{color:#d2ddd4}

.lolga-black .affiliate-v9-backoffice .aff-page-panel :is(.lolga-input,input:not([type=checkbox]),select){background:#141817;color:#f5faf5;border-color:#414a43}

.lolga-black .affiliate-v9-backoffice .aff-page-panel .lolga-btn{min-height:43px;padding:10px 19px;border:0;border-radius:8px;background:#45d42f;color:#0f230c;font-size:12px;font-weight:850}

.lolga-black .affiliate-v9-backoffice .aff-page-panel .lolga-btn:hover{background:#65e750}

.lolga-black .affiliate-v9-backoffice .aff-page-panel .text-blue-600{color:#71e15e!important}

.lolga-black .affiliate-v9-backoffice .aff-page-panel .text-pink-600,.lolga-black .affiliate-v9-backoffice .aff-page-panel .text-rose-500{color:#f6ca86!important}

.lolga-black .affiliate-v9-backoffice .aff-info-banner{padding:15px 17px;border:1px solid #53452a;background:#25221a!important;border-radius:10px;color:#e3cb9b;font-size:12px;line-height:1.7}

.lolga-black .affiliate-v9-backoffice .aff-home-panels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:15px}

.lolga-black .affiliate-v9-backoffice .aff-home-panels .aff-page-panel{margin:0!important;width:100%!important;padding:22px!important}

.lolga-black .affiliate-v9-backoffice .aff-home-panels .aff-page-panel .lolga-input{width:100%}

.lolga-black .affiliate-v9-backoffice .aff-home-panels .aff-program{padding:0}

.lolga-black .affiliate-v9-backoffice .aff-home-panels .aff-program .aff-story-title{font-size:20px;line-height:1.28;margin:8px 0}

.lolga-black .affiliate-v9-backoffice .aff-home-panels .aff-program .aff-story-lead{font-size:12px;margin:8px 0}

.lolga-black .affiliate-v9-backoffice .aff-home-panels .aff-program .aff-rate{padding:12px}

.lolga-black .affiliate-v9-backoffice .aff-home-panels .aff-program .aff-rate strong{font-size:28px}

.lolga-black .affiliate-v9-backoffice .aff-home-panels .aff-program .aff-rate span{display:block;margin:2px 0 0}

.lolga-black .affiliate-v9-backoffice .aff-home-panels .aff-program .aff-rate small{font-size:11px;margin:4px 0}

.lolga-black .affiliate-v9-backoffice .aff-home-panels .aff-program .aff-program-foot{font-size:11px}

.lolga-black .affiliate-v9-backoffice .aff-page-panel .promote_order > ul{border-bottom:1px solid #363e38;color:#bfc9c0;padding-top:14px;padding-bottom:14px;align-items:center;gap:9px}

.lolga-black .affiliate-v9-backoffice .aff-page-panel .promote_order > ul:hover{background:#202a22}

.lolga-black .affiliate-v9-backoffice .aff-page-panel .border-gray-200{border-color:#343e36!important}

.lolga-black .affiliate-v9-backoffice .aff-page-panel .bg-gray-50{background:#242a27!important}

.lolga-black .affiliate-v9-backoffice .aff-page-panel .promote_order input[type=checkbox]{width:17px;height:17px}

.lolga-black .affiliate-v9-backoffice .aff-page-panel .aff-refrow{border-top:1px solid #323d33;gap:11px;align-items:center;padding-top:14px;padding-bottom:14px}

.lolga-black .affiliate-v9-backoffice .aff-page-panel [data-link-list] li{overflow-wrap:anywhere}

.lolga-black .affiliate-v9-backoffice .aff-page-panel [data-link-open]{color:#78e868!important}

.lolga-black .affiliate-v9-backoffice .aff-page-panel .with_draw{min-width:155px}

.lolga-black .affiliate-v9-backoffice .aff-page-panel .aff-account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}

.lolga-black .affiliate-v9-backoffice .aff-page-panel .aff-account-grid > form{background:#1c211e;border:1px solid #39413a;border-radius:10px;padding:21px!important;min-width:0}

.lolga-black .affiliate-v9-backoffice .aff-page-panel .aff-account-grid input,.lolga-black .affiliate-v9-backoffice .aff-page-panel .aff-account-grid select{width:100%}

.lolga-black .affiliate-v9-backoffice .aff-page-panel .aff-account-grid p{line-height:1.4}

.lolga-black .affiliate-v9-backoffice .aff-program .aff-program-terms{color:#9da99e}

.lolga-black .affiliate-v9-backoffice .aff-page-panel .pagination{display:flex;gap:6px;justify-content:center;padding:17px}

.lolga-black .affiliate-v9-backoffice .aff-page-panel .pagination a,.lolga-black .affiliate-v9-backoffice .aff-page-panel .pagination span{border:1px solid #3c443c;background:#202620;color:#e7efe7;border-radius:8px}

.lolga-black .affiliate-v9-backoffice .aff-page-panel .pagination .active span{background:#45d42f;color:#152014}

@media(max-width:990px){
 .lolga-black .affiliate-v9 .aff-auth-grid,.lolga-black .affiliate-v9 .aff-auth-grid--register{grid-template-columns:minmax(0,1fr) minmax(340px,1fr);gap:22px}
 .lolga-black .affiliate-v9-backoffice main.container > section > .grid{grid-template-columns:210px minmax(0,1fr);gap:15px}
 .lolga-black .affiliate-v9-backoffice .aff-home-panels{grid-template-columns:1fr}
}

@media(max-width:760px){
 .lolga-black .affiliate-v9 .aff-container{width:min(100% - 30px,560px)}
 .lolga-black .affiliate-v9 .aff-crumb{padding:18px 0 4px}
 .lolga-black .affiliate-v9 .aff-auth-grid,.lolga-black .affiliate-v9 .aff-auth-grid--register{grid-template-columns:1fr;gap:18px;padding:14px 0 48px}
 .lolga-black .affiliate-v9 .aff-auth-story{padding:0}
 .lolga-black .affiliate-v9 .aff-story-title{font-size:31px;margin:16px 0 11px}
 .lolga-black .affiliate-v9 .aff-story-lead{font-size:13px;margin-bottom:10px}
 .lolga-black .affiliate-v9 .aff-program-foot,.lolga-black .affiliate-v9 .aff-program-terms{display:none}
 .lolga-black .affiliate-v9 .aff-rate{padding:15px}
 .lolga-black .affiliate-v9 .aff-rate strong{font-size:32px}
 .lolga-black .affiliate-v9 .aff-rate span{display:block;margin:1px 0 0}
 .lolga-black .affiliate-v9 .aff-rate small{font-size:11px;margin-top:5px}
 .lolga-black .affiliate-v9 .aff-auth-panel{padding:23px 19px}
 .lolga-black .affiliate-v9 .aff-auth-panel h1{font-size:23px}
 .lolga-black .affiliate-v9 .aff-fields--register{grid-template-columns:1fr}
 .lolga-black .affiliate-v9 .aff-form-actions{margin:15px 0 18px}
 .lolga-black .affiliate-v9 .aff-help-wrap{margin:22px auto 70px}
 .lolga-black .affiliate-v9 .aff-help-heading h1{font-size:27px}
 .lolga-black .affiliate-v9 .aff-help-panel{padding:23px 19px}
 .lolga-black .affiliate-v9-backoffice main.container{width:calc(100% - 30px)}
 .lolga-black .affiliate-v9-backoffice main.container > .relative{padding:23px 0 15px}
 .lolga-black .affiliate-v9-backoffice main.container > section > .grid{grid-template-columns:minmax(0,1fr);gap:13px}
 .lolga-black .affiliate-v9-backoffice main.container > section > .grid > :last-child{grid-column:1}
 .lolga-black .affiliate-v9-backoffice .lolga-side-nav:not(.lolga-side-nav-mobile){width:100%}
 .lolga-black .affiliate-v9-backoffice .aff-page-panel{padding:16px}
 .lolga-black .affiliate-v9-backoffice .aff-page-panel .aff-account-grid{grid-template-columns:1fr}
 .lolga-black .affiliate-v9-backoffice .aff-page-panel .aff-account-grid > form{padding:17px!important}
 .lolga-black .affiliate-v9-backoffice .aff-page-panel .promote_order > ul{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .lolga-black .affiliate-v9-backoffice .aff-page-panel .promote_order > ul > li{grid-column:1/-1}
 .lolga-black .affiliate-v9-backoffice .aff-page-panel .with_draw{width:100%}
}

@media(max-width:410px){
 .lolga-black .affiliate-v9 .aff-rate-grid{gap:8px}
 .lolga-black .affiliate-v9 .aff-rate{padding:12px}
 .lolga-black .affiliate-v9 .aff-rate strong{font-size:29px}
}

/* Affiliate backoffice: compact filters, readable records and real existing statuses. */

.lolga-black .affiliate-v9-backoffice .aff-filter-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}

.lolga-black .affiliate-v9-backoffice .aff-filter-select{width:min(330px,100%);flex:1 1 195px}

.lolga-black .affiliate-v9-backoffice .aff-filter-row .lolga-btn{min-width:100px}

.lolga-black .affiliate-v9-backoffice .aff-order-table,.lolga-black .affiliate-v9-backoffice .aff-withdraw-table{border:1px solid #373f38;border-radius:11px;overflow:hidden}

.lolga-black .affiliate-v9-backoffice .aff-order-table > ul:first-child,.lolga-black .affiliate-v9-backoffice .aff-withdraw-table > ul:first-child{background:#242c26!important;color:#e5eee7}

.lolga-black .affiliate-v9-backoffice .aff-order-table li,.lolga-black .affiliate-v9-backoffice .aff-withdraw-table li{overflow-wrap:anywhere}

.lolga-black .affiliate-v9-backoffice .aff-order-action{border-top:1px solid #323b34;padding:13px!important}

.lolga-black .affiliate-v9-backoffice .aff-withdraw-table > div{border-top:1px solid #343b35}

.lolga-black .affiliate-v9-backoffice .aff-withdraw-table > div:hover{background:#202821}

.lolga-black .affiliate-v9-backoffice .aff-withdraw-table .bg-gray-100{background:#383e39!important}

.lolga-black .affiliate-v9-backoffice .aff-withdraw-table .bg-green-600{background:#45d42f!important}

.lolga-black .affiliate-v9-backoffice .aff-page-panel .select-all{-webkit-user-select:text;-moz-user-select:text;user-select:text}

.lolga-black .affiliate-v9-backoffice .aff-page-panel .aff-info-banner svg{width:19px;height:19px;flex:0 0 auto;margin:0 9px 0 0}

.lolga-black .affiliate-v9-backoffice .aff-page-panel .aff-home-panels .aff-rate-grid{margin:14px 0}

.lolga-black .affiliate-v9-backoffice .aff-page-panel .aff-home-panels .aff-program-foot{gap:10px}

.lolga-black .affiliate-v9-backoffice .aff-page-panel [data-link-row-tpl]{display:none}

.lolga-black .affiliate-v9-backoffice .aff-page-panel [data-link-remove]{display:inline-flex;align-items:center;justify-content:center;margin-left:10px;color:#fa9b93;cursor:pointer}

.lolga-black .affiliate-v9-backoffice .aff-page-panel [data-link-remove]:hover{color:#fff}

.lolga-black .affiliate-v9-backoffice .aff-page-panel [data-link-list] a{color:#66e75a}

.lolga-black .affiliate-v9-backoffice .aff-page-panel input[readonly]{color:#bfcac1}

.lolga-black .affiliate-v9 .select2-container--default .select2-selection--single{min-height:46px;background:#151919!important;border:1px solid #444c47!important;border-radius:8px}

.lolga-black .affiliate-v9 .select2-container--default .select2-selection--single .select2-selection__rendered{height:44px!important;line-height:44px!important;color:#f5f7f5!important;font-size:13px;padding-left:13px}

.lolga-black .affiliate-v9 .select2-container--default .select2-selection--single .select2-selection__arrow{height:44px!important}

@media(max-width:760px){
 .lolga-black .affiliate-v9-backoffice .aff-filter-row{display:grid;grid-template-columns:minmax(0,1fr) auto}
 .lolga-black .affiliate-v9-backoffice .aff-filter-select{width:100%;min-width:0;max-width:none}
 .lolga-black .affiliate-v9-backoffice .aff-refrow{padding:13px 10px;gap:8px}
 .lolga-black .affiliate-v9-backoffice .aff-page-panel .aff-withdraw-table > div ul{padding:12px 13px}
}

/* Select2 search dropdown is portaled to body; namespace its dropdown explicitly. */

.lolga-black .aff-v9-select2-dropdown{background:#1b201c;border:1px solid #384238;color:#eff6ef}

.lolga-black .aff-v9-select2-dropdown .select2-results__option{color:#dfebdd}

.lolga-black .aff-v9-select2-dropdown .select2-results__option--highlighted{background:#315532;color:#fff}

.lolga-black .aff-v9-select2-dropdown .select2-search__field{background:#121713;color:#fff;border:1px solid #414c42}

/* AFF-UI-HOME-1: Only on /affiliate/home; remove extra card layers. */

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-home-content{min-width:0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-home-panels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:28px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-home-links{min-width:0;padding:3px 0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-home-links h2{font-size:20px;font-weight:820;color:#fff;margin:0 0 9px;line-height:1.3}

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-home-tip{font-size:13px;color:#aebbb1;line-height:1.65;margin:0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-home-tip strong{color:#ee61a9}

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-home-link-list{display:grid;gap:25px;margin-top:25px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-home-link-item{min-width:0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-home-link-item label{font-size:13px;color:#e3eee5;font-weight:700;margin:0 0 10px;display:block}

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-link-control{display:flex;align-items:stretch;min-width:0;border:1px solid #414a43;border-radius:10px;overflow:hidden;background:#141817}

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-link-control:focus-within{border-color:#56d743}

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-link-control .lolga-input{flex:1 1 0;display:block;width:0;min-width:0!important;max-width:none;height:47px;min-height:47px;border:0!important;border-radius:0!important;outline:none!important;box-shadow:none!important;background:transparent!important;padding:11px 12px!important;color:#d4dbd5;font-size:12px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-link-control .aff-copy-btn{flex:0 0 auto;min-width:86px;min-height:47px;padding:0 14px;margin:0;border:0;border-radius:0;background:#45d42f;color:#081b05;font-weight:850;font-size:12px;cursor:pointer}

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-link-control .aff-copy-btn:hover{background:#67ee51}

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-home-program{min-width:0;border-left:1px solid #333b35;padding:3px 0 0 28px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-home-program .aff-story-title{font-size:clamp(23px,2.2vw,29px);line-height:1.25;margin:0 0 12px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-home-program .aff-story-lead{font-size:13px;line-height:1.7;margin:0 0 18px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-home-program .aff-rate-grid{gap:18px;margin:18px 0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-home-program .aff-rate{background:transparent;border:0;border-radius:0;padding:0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-home-program .aff-rate strong{font-size:31px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-home-program .aff-rate span{display:block;margin:3px 0 0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-home-program .aff-rate small{font-size:11px;margin:5px 0 0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-home-program .aff-program-foot{font-size:11px;gap:10px;margin-top:22px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-home-program .aff-program-terms{font-size:11px;margin-top:15px}

@media(max-width:990px){
 .lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-home-panels{grid-template-columns:minmax(0,1fr);gap:0}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-home-program{border-left:0;border-top:1px solid #333b35;padding:25px 0 0;margin-top:27px}
}

@media(max-width:410px){
 .lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-link-control .lolga-input{font-size:11px;padding:10px 9px!important}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-home] .aff-link-control .aff-copy-btn{min-width:76px;padding:0 10px}
}

/*
 * AFF-UI-REFLINK-1 — Responsive referral form + long-link safe record list.
 * PURPOSE: /affiliate/reflink only; preserve all data-* hooks and server data.
 * MUST NOT: style other Affiliate pages or alter link_store / link_delete.
 * RELATED DOC: docs/affiliate/design.md and testing.md
 */

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-panel{padding:24px 26px;min-width:0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-heading h2{font-size:20px;font-weight:800;line-height:1.3;margin:0;color:#fff}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-heading .aff-intro{margin:7px 0 0;font-size:13px;line-height:1.65;color:#aab6ae}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-create{margin-top:23px;padding:21px 0 24px;border-top:1px solid #333b35;border-bottom:1px solid #333b35;min-width:0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-create h3,
.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-list-heading h3{font-size:15px;line-height:1.35;font-weight:750;color:#f4f8f4;margin:0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:17px;margin-top:17px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-field{display:flex;flex-direction:column;min-width:0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-field label{font-size:12px;font-weight:720;color:#e6eee7;margin:0 0 7px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-prefix{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;color:#90a398;margin-bottom:8px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-field .lolga-input{display:block;min-width:0;width:100%;height:44px;min-height:44px;padding:10px 12px;border-radius:8px;color:#eef5ee}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-submit{display:flex;align-items:flex-end}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-submit .lolga-btn{height:44px;min-height:44px;white-space:nowrap;border-radius:8px;padding:0 20px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-list-section{min-width:0;padding-top:22px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-list-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:13px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-list-heading > span{color:#94a499;font-size:11px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-records,
.lolga-black .affiliate-v9-backoffice[data-page-promote-link] [data-link-list]{min-width:0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-record{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(96px,.36fr);gap:18px;align-items:center;list-style:none;margin:0;padding:19px 0;border-top:1px solid #343d37;min-width:0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-record > li{min-width:0;list-style:none}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-record-label{display:block;margin-bottom:7px;color:#97a69a;font-size:11px;font-weight:690;line-height:1.4}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-url,
.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-target{display:block;min-width:0;max-width:100%;font-size:12px;line-height:1.6;overflow-wrap:anywhere;word-break:break-word}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-url{color:#60e64c;text-decoration:none;text-align:left}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-url:hover{text-decoration:underline}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-open{padding:0;border:0;border-radius:0;background:transparent;font:inherit;cursor:pointer;white-space:normal}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-target{color:#c7d2c8}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-meta .aff-reflink-record-label{margin:0 0 5px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-meta strong{font-size:15px;font-weight:730;color:#ebf5ed;line-height:1.4}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-remove{flex:0 0 auto;width:36px;height:36px;display:grid;place-items:center;padding:7px;border:1px solid #414d43;border-radius:8px;background:#202722;color:#eba19b;cursor:pointer}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-remove:hover{background:#372722;color:#ffd1c9}

.lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-remove svg{width:18px;height:18px;pointer-events:none}

@media(max-width:1090px){
 .lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-form{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-submit{grid-column:1/-1}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-submit .lolga-btn{min-width:120px}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-record{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(84px,.3fr);gap:12px}
}

@media(max-width:760px){
 .lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-panel{padding:21px 17px}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-heading h2{font-size:19px}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-create{margin-top:18px;padding:18px 0 22px}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-form{grid-template-columns:minmax(0,1fr);gap:17px}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-submit{grid-column:auto}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-submit .lolga-btn{width:100%;min-width:0}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-list-section{padding-top:20px}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-record{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:13px 12px;align-items:start;padding:17px 0}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-url-block{grid-column:1/-1}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-target-block{grid-column:1}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-meta{grid-column:2;align-self:end;justify-content:flex-end}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-list-heading > span{display:none}
}

@media(max-width:370px){
 .lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-record{grid-template-columns:minmax(0,1fr);gap:10px}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-target-block,
 .lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-meta{grid-column:1}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-link] .aff-reflink-meta{justify-content:space-between}
}

/*
 * AFF-UI-PR-1 — Profile-only layout.
 * PURPOSE: remove nested borders and present actual existing account fields.
 * MUST NOT: change submit endpoints, validation, country/pay lists or other pages.
 * RELATED DOC: docs/affiliate/design.md; docs/affiliate/testing.md
 */

.lolga-black .affiliate-v9-backoffice[data-page-promote-profile] .aff-profile-content{min-width:0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-profile] .aff-account-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:start;gap:20px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-profile] .aff-account-grid > form{min-width:0;align-self:start;padding:24px;background:#1a1e1e;border:0;border-radius:11px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-profile] .aff-profile-section-title h2{margin:0;font-size:19px;line-height:1.3;font-weight:800}

.lolga-black .affiliate-v9-backoffice[data-page-promote-profile] .aff-profile-section-title p{margin:7px 0 0;color:#9ba7a0;font-size:12px;line-height:1.6}

.lolga-black .affiliate-v9-backoffice[data-page-promote-profile] .aff-profile-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:17px;margin-top:20px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-profile] .aff-profile-fields--details{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-profile] .aff-profile-field{min-width:0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-profile] .aff-profile-field--wide{grid-column:1/-1}

.lolga-black .affiliate-v9-backoffice[data-page-promote-profile] .aff-profile-field :is(input,select){display:block;min-width:0;width:100%;height:46px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-profile] .aff-profile-group{min-width:0;border:0;border-top:1px solid #343c38;padding:17px 0 0;margin:21px 0 0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-profile] .aff-profile-group legend{color:#e5eee6;font-size:12px;font-weight:750;padding:0 10px 0 0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-profile] .aff-profile-group .aff-profile-fields{margin-top:3px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-profile] .aff-profile-actions{display:flex;justify-content:flex-start;margin-top:22px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-profile] .aff-profile-actions .lolga-btn{min-height:44px;padding:10px 25px;background:#45d42f;color:#0f230c;border:0;border-radius:8px;font-weight:800}

@media(max-width:990px){
 .lolga-black .affiliate-v9-backoffice[data-page-promote-profile] .aff-account-grid{grid-template-columns:minmax(0,1fr);gap:0}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-profile] .aff-account-grid > form{padding:22px;background:transparent;border-radius:0}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-profile] .aff-profile-details{border-top:1px solid #343c38!important}
}

@media(max-width:760px){
 .lolga-black .affiliate-v9-backoffice[data-page-promote-profile] .aff-account-grid > form{padding:20px 0}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-profile] .aff-profile-fields--details{grid-template-columns:minmax(0,1fr)}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-profile] .aff-profile-actions .lolga-btn{width:100%}
}

/*
 * AFF-UI-PR-2 — Commission Orders only.
 * PURPOSE: flat desktop grid, labeled mobile records, original withdrawal hooks.
 * MUST NOT: change order_id[], status query, pagination, eligibility or Axios.
 * RELATED DOC: docs/affiliate/design.md; docs/affiliate/testing.md
 */

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-content{min-width:0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-filter-row{display:flex;align-items:center;gap:11px;margin-bottom:17px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-filter-select{width:min(340px,100%);height:46px;flex:0 1 340px;min-width:0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .lolga-btn{display:inline-flex;justify-content:center;align-items:center;min-height:44px;padding:10px 20px;border:0;border-radius:8px;background:#45d42f;color:#0f230c;font-size:12px;font-weight:800;cursor:pointer}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-info-banner{display:flex;align-items:flex-start;margin:0;border:0;border-left:2px solid #66522e;border-radius:0 7px 7px 0;padding:12px 15px;background:#24231e!important;color:#c6baa1}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-info-banner svg{width:19px;height:19px;flex:0 0 auto;margin:0 9px 0 0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-subhead{font-size:17px;font-weight:790;margin:23px 0 12px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-table{min-width:0;background:#1a1e1e;border:0;border-radius:10px;overflow:visible}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-head,
.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-record{display:grid;grid-template-columns:46px minmax(0,1.5fr) minmax(0,.95fr) minmax(0,.95fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:10px;min-width:0;list-style:none;margin:0;padding:0 16px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-head{min-height:47px;background:#222925;color:#aab6ae;font-size:11px;font-weight:760;border-radius:10px 10px 0 0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-head li,
.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-record li{min-width:0;overflow-wrap:anywhere}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-record{padding-top:16px;padding-bottom:16px;border-bottom:1px solid #343c38;font-size:12px;line-height:1.55;color:#ccd7cf}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-record:hover{background:#202823}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-check-label{display:flex;gap:7px;align-items:center;margin:0;cursor:pointer}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-check input{width:18px;height:18px;margin:0;flex:0 0 auto}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-check input:disabled{opacity:.45;cursor:not-allowed}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-status{display:inline-block;font-weight:760;color:#60dc4c}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-commission strong{color:#f0f9f0;font-size:13px;font-weight:800}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-number .select-all,
.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-from .select-all{-webkit-user-select:text;-moz-user-select:text;user-select:text;word-break:break-word}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-mobile-label{display:none}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-empty{margin:0;padding:32px 14px;text-align:center;color:#9ba7a0;font-size:13px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-action{display:flex;justify-content:flex-end;align-items:center;padding:17px 15px;border-top:0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-pagination{min-width:0;padding:0 10px 15px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-pagination .pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;padding:8px 0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-pagination .pagination :is(a,span){border-color:#343c38;color:#d1ded4}

@media(max-width:990px){
 .lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-head{display:none}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-table{background:transparent}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-record{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin-bottom:13px;padding:17px;background:#1a1e1e;border:0;border-radius:10px;align-items:start}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-record li{display:flex;flex-direction:column;gap:4px}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-record .aff-mobile-label{display:block;color:#9ba7a0;font-size:11px;font-weight:700}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-number{grid-column:1/-1;order:1}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-state{grid-column:1;order:2}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-check{grid-column:2;order:2;align-items:flex-end}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-check .aff-order-check-label{display:flex;flex-direction:row-reverse;align-items:center;gap:9px;min-height:34px}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-price{grid-column:1;order:3}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-commission{grid-column:2;order:3}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-from{grid-column:1;order:4}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-date{grid-column:2;order:4}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-action{padding:6px 0 17px}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-pagination{padding:0 0 15px}
}

@media(max-width:760px){
 .lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-filter-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-filter-select{width:100%;max-width:none}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-action .with_draw{width:100%}
}

@media(max-width:370px){
 .lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-record{gap:12px 10px;padding:15px 12px}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-order] .aff-order-record .aff-order-date{overflow-wrap:anywhere}
}

/*
 * AFF-UI-PR-3 — Withdrawal History only.
 * PURPOSE: flat real payout records with mobile-first payment and state hierarchy.
 * MUST NOT: change audit_status, is_pay, payout query or payment info.
 * RELATED DOC: docs/affiliate/design.md; docs/affiliate/testing.md
 */

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-content{min-width:0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-title{font-size:19px;font-weight:800;line-height:1.3;margin:0 0 16px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-table{min-width:0;background:#1a1e1e;border:0;border-radius:11px;overflow:visible}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-head,
.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-details{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.55fr) minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:15px;padding:0 17px;min-width:0;list-style:none;margin:0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-head{min-height:46px;background:#222925;color:#acb9af;font-size:11px;font-weight:750;border-radius:11px 11px 0 0}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-record{padding:0;border-top:1px solid #343c38;background:transparent}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-record:hover{background:#202823}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-details{padding-top:17px;padding-bottom:12px;color:#c8d3ca;font-size:12px;line-height:1.6}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-details li{min-width:0;overflow-wrap:anywhere;word-break:break-word}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-number .select-all{-webkit-user-select:text;-moz-user-select:text;user-select:text}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-payment strong{color:#e1e9e2;font-weight:740}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-amount > strong{color:#f1f9f1;font-weight:830;font-size:13px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-status{display:inline-block;width:-moz-fit-content;width:fit-content;max-width:100%;color:#6ae058;font-size:11px;font-weight:780;line-height:1.5;overflow-wrap:anywhere}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-mobile-label{display:none}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-progress{padding:0 17px 18px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-steps{display:flex;justify-content:space-between;gap:12px;color:#9ba7a0;font-size:11px;line-height:1.45;list-style:none;padding:0;margin:0 0 9px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-steps li{min-width:0;flex:1}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-steps li:nth-child(2){text-align:center}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-steps li:last-child{text-align:right}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-steps .is-complete{color:#45d42f;font-weight:750}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-track{height:4px;background:#343c38;border-radius:99px;overflow:hidden}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-track-fill{height:100%;width:0;background:#45d42f;border-radius:99px}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-track-fill.w-1\/2{width:50%}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-track-fill.w-full{width:100%}

.lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-empty{margin:0;padding:33px 15px;text-align:center;color:#9ba7a0;font-size:13px}

@media(max-width:990px){
 .lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-table{background:transparent}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-head{display:none}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-record{background:#1a1e1e;border:0;border-radius:10px;margin-bottom:13px}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-details{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px 16px;padding:17px 16px}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-details li{display:flex;flex-direction:column;gap:4px}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-details .aff-mobile-label{display:block;color:#9ba7a0;font-size:11px;font-weight:730}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-number{order:1;grid-column:1}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-status-cell{order:2;grid-column:2}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-amount{order:3;grid-column:1}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-payment{order:4;grid-column:2}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-date{order:5;grid-column:1/-1}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-progress{padding:0 16px 17px}
}

@media(max-width:370px){
 .lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-details{gap:12px 10px;padding:15px 12px}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-progress{padding:0 12px 16px}
 .lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .aff-withdraw-steps{font-size:10px;gap:6px}
}

/* Tablet/mobile UA: side nav may be server-hidden before the 760px single-column breakpoint.
 * Span both layout tracks for the existing mobile nav and page content; no shared nav changes. */

@media(min-width:761px) and (max-width:990px){
 .lolga-black .affiliate-v9-backoffice[data-page-promote-profile] .lolga-side-nav-mobile,
 .lolga-black .affiliate-v9-backoffice[data-page-promote-profile] .lolga-side-nav-mobile + .aff-profile-content,
 .lolga-black .affiliate-v9-backoffice[data-page-promote-order] .lolga-side-nav-mobile,
 .lolga-black .affiliate-v9-backoffice[data-page-promote-order] .lolga-side-nav-mobile + .aff-order-content,
 .lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .lolga-side-nav-mobile,
 .lolga-black .affiliate-v9-backoffice[data-page-promote-withdraw] .lolga-side-nav-mobile + .aff-withdraw-content{grid-column:1/-1}
}

/*
 * AFF-UI-NAV-1 — Affiliate Promote sidebar only.
 * PURPOSE: page-only navigation links, independent logout and clickable Discord icon.
 * OWNS: .aff-promote-sidebar when included via Promote nav; desktop and mobile.
 * MUST NOT: change other .lolga-side-nav consumers, shared toggle JS or logout route.
 * RELATED DOC: docs/affiliate/design.md, docs/affiliate/testing.md
 */

.lolga-black .affiliate-v9-backoffice .aff-promote-sidebar .lolga-side-nav-list a{
 justify-content:flex-start;
 min-height:44px;
}

.lolga-black .affiliate-v9-backoffice .aff-promote-sidebar .aff-promote-logout{
 border-top:1px solid #343c38;
 margin-top:10px;
 padding-top:10px;
}

.lolga-black .affiliate-v9-backoffice .aff-promote-sidebar .aff-promote-logout a{
 display:flex;
 align-items:center;
 gap:10px;
 width:100%;
 min-height:44px;
 padding:10px 11px;
 border-radius:8px;
 font-size:13px;
 font-weight:660;
 line-height:1.4;
 color:#aebbb1;
 text-decoration:none;
}

.lolga-black .affiliate-v9-backoffice .aff-promote-sidebar .aff-promote-logout a:hover,
.lolga-black .affiliate-v9-backoffice .aff-promote-sidebar .aff-promote-logout a:focus-visible{
 color:#f5f7f5;
 background:#222925;
}

.lolga-black .affiliate-v9-backoffice .aff-promote-sidebar .aff-promote-logout svg{flex:0 0 18px}

.lolga-black .affiliate-v9-backoffice .aff-promote-sidebar .lolga-side-nav-contact{
 margin:17px 0 6px;
 padding-top:14px;
 border-top:1px solid #343c38;
 font-size:12px;
}

.lolga-black .affiliate-v9-backoffice .aff-promote-sidebar .lolga-side-nav-contact-list{
 margin:0;
 padding:0;
 list-style:none;
}

.lolga-black .affiliate-v9-backoffice .aff-promote-sidebar .lolga-side-nav-contact-list li{
 min-width:0;
 list-style:none;
}

.lolga-black .affiliate-v9-backoffice .aff-promote-sidebar .aff-discord-link{
 display:inline-flex;
 align-items:center;
 gap:9px;
 min-height:44px;
 max-width:100%;
 padding:7px 8px;
 border-radius:8px;
 color:#c5d0c8;
 font-size:12px;
 line-height:1.4;
 text-decoration:none;
 white-space:nowrap;
}

.lolga-black .affiliate-v9-backoffice .aff-promote-sidebar .aff-discord-link:hover,
.lolga-black .affiliate-v9-backoffice .aff-promote-sidebar .aff-discord-link:focus-visible{
 color:#f5f7f5;
 background:#252e27;
}

.lolga-black .affiliate-v9-backoffice .aff-promote-sidebar .aff-discord-link img{
 flex:0 0 30px;
 width:30px;
 height:30px;
 -o-object-fit:contain;
    object-fit:contain;
}

.lolga-black .affiliate-v9-backoffice .aff-promote-sidebar .aff-discord-link svg{
 flex:0 0 13px;
 opacity:.6;
}

@media(max-width:370px){
 .lolga-black .affiliate-v9-backoffice .aff-promote-sidebar .aff-discord-link{
  white-space:normal;
 }
}

/*! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
 */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
*/

html {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    border-radius: 0px;
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-shadow: 0 0 #0000;
}

[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #2563eb;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-color: #2563eb;
}

input::-moz-placeholder, textarea::-moz-placeholder {
    color: #6b7280;
    opacity: 1;
}

input::placeholder,textarea::placeholder {
    color: #6b7280;
    opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

::-webkit-date-and-time-value {
    min-height: 1.5em;
}

::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
    padding-top: 0;
    padding-bottom: 0;
}

select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-print-color-adjust: exact;
            color-adjust: exact;
}

[multiple] {
    background-image: initial;
    background-position: initial;
    background-repeat: unset;
    background-size: initial;
    padding-right: 0.75rem;
    -webkit-print-color-adjust: unset;
            color-adjust: unset;
}

[type='checkbox'],[type='radio'] {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    padding: 0;
    -webkit-print-color-adjust: exact;
            color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    color: #2563eb;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    --tw-shadow: 0 0 #0000;
}

[type='checkbox'] {
    border-radius: 0px;
}

[type='radio'] {
    border-radius: 100%;
}

[type='checkbox']:focus,[type='radio']:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #2563eb;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

[type='checkbox']:checked,[type='radio']:checked {
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

[type='checkbox']:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

[type='radio']:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
    border-color: transparent;
    background-color: currentColor;
}

[type='checkbox']:indeterminate {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
    border-color: transparent;
    background-color: currentColor;
}

[type='file'] {
    background: unset;
    border-color: inherit;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-size: unset;
    line-height: inherit;
}

[type='file']:focus {
    outline: 1px auto -webkit-focus-ring-color;
}

/*@font-face {*/

/*    font-family: helvetica;*/

/*    src: url('/fonts/helvetica/helvetica-Regular.eot');*/

/*    src: url('/fonts/helvetica/helvetica-Regular.eot?#iefix') format('embedded-opentype'),*/

/*    url('/fonts/helvetica/helvetica-Regular.woff2') format('woff2'),*/

/*    url('/fonts/helvetica/helvetica-Regular.woff') format('woff'),*/

/*    url('/fonts/helvetica/helvetica-Regular.ttf') format('truetype'),*/

/*    url('/fonts/helvetica/helvetica-Regular.svg#helvetica-Regular') format('svg');*/

/*    font-weight: normal;*/

/*    font-style: normal;*/

/*    font-display: swap;*/

/*}*/

@font-face {
        font-family: 'Inter';
        src: url('/fonts/Inter/Inter-latin.woff2') format('woff2');
        font-weight: 100 900;
        font-style: normal;
        font-display: swap;
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

@font-face {
        font-family: 'Inter';
        src: url('/fonts/Inter/Inter.woff2') format('woff2');
        font-weight: 100 900;
        font-style: normal;
        font-display: swap;
        unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
    }

textarea:focus, input:focus,[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{
        outline: none !important;
        --tw-ring-shadow: none !important;
        box-shadow: none !important;
        outline-offset: 0  !important;
        --tw-ring-inset: 0  !important;
        --tw-ring-offset-width: 0  !important;
        --tw-ring-offset-color:none  !important;
        --tw-ring-color:none  !important;
        border-color: #ccc  !important;
    }

input:-internal-autofill-selected {background: none!important }

:focus:not(:focus-visible) {
        outline: none !important;
        box-shadow: none !important;
    }

/* Compat: keep overrides on common elements */

input:focus:not(:focus-visible),
    textarea:focus:not(:focus-visible),
    select:focus:not(:focus-visible),
    button:focus:not(:focus-visible),
    a:focus:not(:focus-visible) {
        outline: none !important;
        box-shadow: none !important;
    }

*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
}

.\!container {
    width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

@media (min-width: 640px) {

    .\!container {
        max-width: 640px !important;
    }

    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {

    .\!container {
        max-width: 768px !important;
    }

    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {

    .\!container {
        max-width: 1024px !important;
    }

    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {

    .\!container {
        max-width: 1280px !important;
    }

    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {

    .\!container {
        max-width: 1536px !important;
    }

    .container {
        max-width: 1536px;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.pointer-events-none {
    pointer-events: none;
}

.pointer-events-auto {
    pointer-events: auto;
}

.\!visible {
    visibility: visible !important;
}

.visible {
    visibility: visible;
}

.collapse {
    visibility: collapse;
}

.static {
    position: static;
}

.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.\!sticky {
    position: sticky !important;
}

.sticky {
    position: sticky;
}

.inset-0 {
    inset: 0px;
}

.inset-x-1\/3 {
    left: 33.333333%;
    right: 33.333333%;
}

.inset-y-0 {
    top: 0px;
    bottom: 0px;
}

.inset-y-1\/2 {
    top: 50%;
    bottom: 50%;
}

.inset-y-3 {
    top: 0.75rem;
    bottom: 0.75rem;
}

.-left-2 {
    left: -0.5rem;
}

.-right-0 {
    right: -0px;
}

.-right-2 {
    right: -0.5rem;
}

.-top-1 {
    top: -0.25rem;
}

.-top-2 {
    top: -0.5rem;
}

.-top-5 {
    top: -1.25rem;
}

.bottom-0 {
    bottom: 0px;
}

.bottom-1 {
    bottom: 0.25rem;
}

.left-0 {
    left: 0px;
}

.left-1 {
    left: 0.25rem;
}

.left-2 {
    left: 0.5rem;
}

.left-3 {
    left: 0.75rem;
}

.right-0 {
    right: 0px;
}

.right-1 {
    right: 0.25rem;
}

.right-1\/4 {
    right: 25%;
}

.right-10 {
    right: 2.5rem;
}

.right-16 {
    right: 4rem;
}

.right-2 {
    right: 0.5rem;
}

.right-3 {
    right: 0.75rem;
}

.right-4 {
    right: 1rem;
}

.top-0 {
    top: 0px;
}

.top-1 {
    top: 0.25rem;
}

.top-1\/2 {
    top: 50%;
}

.top-11 {
    top: 2.75rem;
}

.top-16 {
    top: 4rem;
}

.top-2 {
    top: 0.5rem;
}

.top-24 {
    top: 6rem;
}

.top-3 {
    top: 0.75rem;
}

.top-4 {
    top: 1rem;
}

.top-6 {
    top: 1.5rem;
}

.top-auto {
    top: auto;
}

.top-full {
    top: 100%;
}

.isolate {
    isolation: isolate;
}

.z-0 {
    z-index: 0;
}

.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.z-30 {
    z-index: 30;
}

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}

.z-\[99999\] {
    z-index: 99999;
}

.order-2 {
    order: 2;
}

.order-last {
    order: 9999;
}

.col-span-1 {
    grid-column: span 1 / span 1;
}

.col-span-2 {
    grid-column: span 2 / span 2;
}

.col-span-3 {
    grid-column: span 3 / span 3;
}

.col-span-4 {
    grid-column: span 4 / span 4;
}

.col-span-7 {
    grid-column: span 7 / span 7;
}

.col-span-full {
    grid-column: 1 / -1;
}

.-m-2 {
    margin: -0.5rem;
}

.m-2 {
    margin: 0.5rem;
}

.m-6 {
    margin: 1.5rem;
}

.m-8 {
    margin: 2rem;
}

.-my-6 {
    margin-top: -1.5rem;
    margin-bottom: -1.5rem;
}

.mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.\!mt-2 {
    margin-top: 0.5rem !important;
}

.-ml-1 {
    margin-left: -0.25rem;
}

.-ml-px {
    margin-left: -1px;
}

.-mt-1 {
    margin-top: -0.25rem;
}

.-mt-2 {
    margin-top: -0.5rem;
}

.-mt-4 {
    margin-top: -1rem;
}

.-mt-px {
    margin-top: -1px;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-10 {
    margin-bottom: 2.5rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.me-3 {
    margin-inline-end: 0.75rem;
}

.ml-1 {
    margin-left: 0.25rem;
}

.ml-12 {
    margin-left: 3rem;
}

.ml-2 {
    margin-left: 0.5rem;
}

.ml-3 {
    margin-left: 0.75rem;
}

.ml-4 {
    margin-left: 1rem;
}

.ml-6 {
    margin-left: 1.5rem;
}

.ml-8 {
    margin-left: 2rem;
}

.mr-1 {
    margin-right: 0.25rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

.mr-3 {
    margin-right: 0.75rem;
}

.mr-4 {
    margin-right: 1rem;
}

.mt-0 {
    margin-top: 0px;
}

.mt-0\.5 {
    margin-top: 0.125rem;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-10 {
    margin-top: 2.5rem;
}

.mt-11 {
    margin-top: 2.75rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-5 {
    margin-top: 1.25rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

.mt-7 {
    margin-top: 1.75rem;
}

.mt-8 {
    margin-top: 2rem;
}

.\!block {
    display: block !important;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.inline {
    display: inline;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.table {
    display: table;
}

.\!grid {
    display: grid !important;
}

.grid {
    display: grid;
}

.contents {
    display: contents;
}

.hidden {
    display: none;
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

.h-1 {
    height: 0.25rem;
}

.h-1\.5 {
    height: 0.375rem;
}

.h-10 {
    height: 2.5rem;
}

.h-11 {
    height: 2.75rem;
}

.h-12 {
    height: 3rem;
}

.h-14 {
    height: 3.5rem;
}

.h-16 {
    height: 4rem;
}

.h-2 {
    height: 0.5rem;
}

.h-2\.5 {
    height: 0.625rem;
}

.h-20 {
    height: 5rem;
}

.h-24 {
    height: 6rem;
}

.h-28 {
    height: 7rem;
}

.h-3 {
    height: 0.75rem;
}

.h-3\.5 {
    height: 0.875rem;
}

.h-32 {
    height: 8rem;
}

.h-4 {
    height: 1rem;
}

.h-5 {
    height: 1.25rem;
}

.h-6 {
    height: 1.5rem;
}

.h-7 {
    height: 1.75rem;
}

.h-8 {
    height: 2rem;
}

.h-auto {
    height: auto;
}

.h-full {
    height: 100%;
}

.h-screen {
    height: 100vh;
}

.max-h-10 {
    max-height: 2.5rem;
}

.max-h-16 {
    max-height: 4rem;
}

.max-h-24 {
    max-height: 6rem;
}

.max-h-48 {
    max-height: 12rem;
}

.max-h-56 {
    max-height: 14rem;
}

.max-h-60 {
    max-height: 15rem;
}

.max-h-96 {
    max-height: 24rem;
}

.max-h-\[100px\] {
    max-height: 100px;
}

.max-h-full {
    max-height: 100%;
}

.max-h-img {
    max-height: 150px;
}

.min-h-\[44px\] {
    min-height: 44px;
}

.min-h-\[48px\] {
    min-height: 48px;
}

.min-h-img {
    min-height: 150px;
}

.min-h-screen {
    min-height: 100vh;
}

.w-1 {
    width: 0.25rem;
}

.w-1\.5 {
    width: 0.375rem;
}

.w-1\/2 {
    width: 50%;
}

.w-1\/3 {
    width: 33.333333%;
}

.w-10 {
    width: 2.5rem;
}

.w-12 {
    width: 3rem;
}

.w-14 {
    width: 3.5rem;
}

.w-16 {
    width: 4rem;
}

.w-2 {
    width: 0.5rem;
}

.w-2\.5 {
    width: 0.625rem;
}

.w-2\/3 {
    width: 66.666667%;
}

.w-2\/4 {
    width: 50%;
}

.w-20 {
    width: 5rem;
}

.w-24 {
    width: 6rem;
}

.w-28 {
    width: 7rem;
}

.w-3 {
    width: 0.75rem;
}

.w-3\.5 {
    width: 0.875rem;
}

.w-3\/12 {
    width: 25%;
}

.w-32 {
    width: 8rem;
}

.w-36 {
    width: 9rem;
}

.w-4 {
    width: 1rem;
}

.w-40 {
    width: 10rem;
}

.w-44 {
    width: 11rem;
}

.w-48 {
    width: 12rem;
}

.w-5 {
    width: 1.25rem;
}

.w-5\/6 {
    width: 83.333333%;
}

.w-6 {
    width: 1.5rem;
}

.w-7 {
    width: 1.75rem;
}

.w-8 {
    width: 2rem;
}

.w-9\/12 {
    width: 75%;
}

.w-\[180px\] {
    width: 180px;
}

.w-\[40px\] {
    width: 40px;
}

.w-auto {
    width: auto;
}

.w-full {
    width: 100%;
}

.w-screen {
    width: 100vw;
}

.min-w-0 {
    min-width: 0px;
}

.max-w-2xl {
    max-width: 42rem;
}

.max-w-3xl {
    max-width: 48rem;
}

.max-w-4xl {
    max-width: 56rem;
}

.max-w-6xl {
    max-width: 72rem;
}

.max-w-7xl {
    max-width: 80rem;
}

.max-w-\[15rem\] {
    max-width: 15rem;
}

.max-w-\[58vw\] {
    max-width: 58vw;
}

.max-w-full {
    max-width: 100%;
}

.max-w-md {
    max-width: 28rem;
}

.max-w-none {
    max-width: none;
}

.max-w-sm {
    max-width: 24rem;
}

.max-w-xl {
    max-width: 36rem;
}

.flex-1 {
    flex: 1 1 0%;
}

.flex-none {
    flex: none;
}

.flex-shrink {
    flex-shrink: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.shrink-0 {
    flex-shrink: 0;
}

.flex-grow {
    flex-grow: 1;
}

.grow {
    flex-grow: 1;
}

.-rotate-45 {
    --tw-rotate: -45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180 {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes pulse {

    50% {
        opacity: .5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin {

    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.cursor-default {
    cursor: default;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.cursor-pointer {
    cursor: pointer;
}

.touch-pan-x {
    --tw-pan-x: pan-x;
    touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom);
}

.touch-pan-y {
    --tw-pan-y: pan-y;
    touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom);
}

.select-none {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.select-text {
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
}

.select-all {
    -webkit-user-select: all;
       -moz-user-select: all;
            user-select: all;
}

.resize {
    resize: both;
}

.list-inside {
    list-style-position: inside;
}

.list-decimal {
    list-style-type: decimal;
}

.list-disc {
    list-style-type: disc;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.items-center {
    align-items: center;
}

.items-baseline {
    align-items: baseline;
}

.items-stretch {
    align-items: stretch;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-1\.5 {
    gap: 0.375rem;
}

.gap-12 {
    gap: 3rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-5 {
    gap: 1.25rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-x-3 {
    -moz-column-gap: 0.75rem;
         column-gap: 0.75rem;
}

.gap-x-8 {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
}

.gap-y-10 {
    row-gap: 2.5rem;
}

.gap-y-2 {
    row-gap: 0.5rem;
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-12 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.divide-x > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}

.divide-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(2px * var(--tw-divide-x-reverse));
    border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-divide-opacity));
}

.divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-divide-opacity));
}

.divide-neutral-400 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(163 163 163 / var(--tw-divide-opacity));
}

.divide-neutral-600 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(82 82 82 / var(--tw-divide-opacity));
}

.divide-zinc-500 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(113 113 122 / var(--tw-divide-opacity));
}

.divide-zinc-600 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(82 82 91 / var(--tw-divide-opacity));
}

.overflow-auto {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-x-scroll {
    overflow-x: scroll;
}

.overflow-y-scroll {
    overflow-y: scroll;
}

.scroll-smooth {
    scroll-behavior: smooth;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overflow-ellipsis {
    text-overflow: ellipsis;
}

.whitespace-nowrap {
    white-space: nowrap;
}

.break-normal {
    overflow-wrap: normal;
    word-break: normal;
}

.break-words {
    overflow-wrap: break-word;
}

.break-all {
    word-break: break-all;
}

.rounded {
    border-radius: 0.25rem;
}

.rounded-2xl {
    border-radius: 1rem;
}

.rounded-3xl {
    border-radius: 1.5rem;
}

.rounded-full {
    border-radius: 9999px;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-md {
    border-radius: 0.375rem;
}

.rounded-none {
    border-radius: 0px;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-b-3xl {
    border-bottom-right-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
}

.rounded-l-full {
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;
}

.rounded-l-lg {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.rounded-l-md {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

.rounded-r-full {
    border-top-right-radius: 9999px;
    border-bottom-right-radius: 9999px;
}

.rounded-r-lg {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.rounded-r-md {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

.rounded-t-lg {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.rounded-t-md {
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

.border {
    border-width: 1px;
}

.border-0 {
    border-width: 0px;
}

.border-2 {
    border-width: 2px;
}

.border-4 {
    border-width: 4px;
}

.border-b {
    border-bottom-width: 1px;
}

.border-b-4 {
    border-bottom-width: 4px;
}

.border-l {
    border-left-width: 1px;
}

.border-l-0 {
    border-left-width: 0px;
}

.border-l-2 {
    border-left-width: 2px;
}

.border-l-4 {
    border-left-width: 4px;
}

.border-r {
    border-right-width: 1px;
}

.border-r-0 {
    border-right-width: 0px;
}

.border-t {
    border-top-width: 1px;
}

.border-none {
    border-style: none;
}

.\!border-blue-400 {
    --tw-border-opacity: 1 !important;
    border-color: rgb(96 165 250 / var(--tw-border-opacity)) !important;
}

.border-\[\#45d42f\] {
    --tw-border-opacity: 1;
    border-color: rgb(69 212 47 / var(--tw-border-opacity));
}

.border-amber-200 {
    --tw-border-opacity: 1;
    border-color: rgb(253 230 138 / var(--tw-border-opacity));
}

.border-blue-200 {
    --tw-border-opacity: 1;
    border-color: rgb(191 219 254 / var(--tw-border-opacity));
}

.border-blue-500 {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity));
}

.border-blue-600 {
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235 / var(--tw-border-opacity));
}

.border-emerald-200 {
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity));
}

.border-gray-100 {
    --tw-border-opacity: 1;
    border-color: rgb(243 244 246 / var(--tw-border-opacity));
}

.border-gray-200 {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity));
}

.border-gray-300 {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity));
}

.border-gray-400 {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / var(--tw-border-opacity));
}

.border-green-500 {
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity));
}

.border-green-600 {
    --tw-border-opacity: 1;
    border-color: rgb(22 163 74 / var(--tw-border-opacity));
}

.border-green-800 {
    --tw-border-opacity: 1;
    border-color: rgb(22 101 52 / var(--tw-border-opacity));
}

.border-indigo-400 {
    --tw-border-opacity: 1;
    border-color: rgb(129 140 248 / var(--tw-border-opacity));
}

.border-lgreen {
    --tw-border-opacity: 1;
    border-color: rgb(193 255 0 / var(--tw-border-opacity));
}

.border-neutral-200 {
    --tw-border-opacity: 1;
    border-color: rgb(229 229 229 / var(--tw-border-opacity));
}

.border-neutral-400 {
    --tw-border-opacity: 1;
    border-color: rgb(163 163 163 / var(--tw-border-opacity));
}

.border-neutral-500 {
    --tw-border-opacity: 1;
    border-color: rgb(115 115 115 / var(--tw-border-opacity));
}

.border-neutral-600 {
    --tw-border-opacity: 1;
    border-color: rgb(82 82 82 / var(--tw-border-opacity));
}

.border-neutral-700 {
    --tw-border-opacity: 1;
    border-color: rgb(64 64 64 / var(--tw-border-opacity));
}

.border-neutral-800 {
    --tw-border-opacity: 1;
    border-color: rgb(38 38 38 / var(--tw-border-opacity));
}

.border-neutral-900 {
    --tw-border-opacity: 1;
    border-color: rgb(23 23 23 / var(--tw-border-opacity));
}

.border-orange-200 {
    --tw-border-opacity: 1;
    border-color: rgb(254 215 170 / var(--tw-border-opacity));
}

.border-orange-400 {
    --tw-border-opacity: 1;
    border-color: rgb(251 146 60 / var(--tw-border-opacity));
}

.border-orange-500 {
    --tw-border-opacity: 1;
    border-color: rgb(249 115 22 / var(--tw-border-opacity));
}

.border-red-200 {
    --tw-border-opacity: 1;
    border-color: rgb(254 202 202 / var(--tw-border-opacity));
}

.border-red-400 {
    --tw-border-opacity: 1;
    border-color: rgb(248 113 113 / var(--tw-border-opacity));
}

.border-red-600 {
    --tw-border-opacity: 1;
    border-color: rgb(220 38 38 / var(--tw-border-opacity));
}

.border-red-800 {
    --tw-border-opacity: 1;
    border-color: rgb(153 27 27 / var(--tw-border-opacity));
}

.border-slate-100 {
    --tw-border-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-border-opacity));
}

.border-slate-200 {
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity));
}

.border-slate-300 {
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity));
}

.border-transparent {
    border-color: transparent;
}

.border-white\/10 {
    border-color: rgb(255 255 255 / 0.1);
}

.border-yellow-400 {
    --tw-border-opacity: 1;
    border-color: rgb(250 204 21 / var(--tw-border-opacity));
}

.border-yellow-500 {
    --tw-border-opacity: 1;
    border-color: rgb(234 179 8 / var(--tw-border-opacity));
}

.border-zinc-400 {
    --tw-border-opacity: 1;
    border-color: rgb(161 161 170 / var(--tw-border-opacity));
}

.border-zinc-600 {
    --tw-border-opacity: 1;
    border-color: rgb(82 82 91 / var(--tw-border-opacity));
}

.\!bg-blue-400 {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(96 165 250 / var(--tw-bg-opacity)) !important;
}

.\!bg-lgreen {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(193 255 0 / var(--tw-bg-opacity)) !important;
}

.\!bg-orange-500 {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(249 115 22 / var(--tw-bg-opacity)) !important;
}

.\!bg-white {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
}

.bg-\[\#101010\] {
    --tw-bg-opacity: 1;
    background-color: rgb(16 16 16 / var(--tw-bg-opacity));
}

.bg-\[\#202020\] {
    --tw-bg-opacity: 1;
    background-color: rgb(32 32 32 / var(--tw-bg-opacity));
}

.bg-\[\#45d42f\] {
    --tw-bg-opacity: 1;
    background-color: rgb(69 212 47 / var(--tw-bg-opacity));
}

.bg-amber-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(251 191 36 / var(--tw-bg-opacity));
}

.bg-amber-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 235 / var(--tw-bg-opacity));
}

.bg-amber-500\/80 {
    background-color: rgb(245 158 11 / 0.8);
}

.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.bg-black\/20 {
    background-color: rgb(0 0 0 / 0.2);
}

.bg-blue-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}

.bg-blue-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(96 165 250 / var(--tw-bg-opacity));
}

.bg-blue-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity));
}

.bg-blue-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

.bg-blue-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

.bg-blue-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}

.bg-cyan-500\/80 {
    background-color: rgb(6 182 212 / 0.8);
}

.bg-emerald-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(52 211 153 / var(--tw-bg-opacity));
}

.bg-emerald-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity));
}

.bg-emerald-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity));
}

.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.bg-gray-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

.bg-gray-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}

.bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.bg-gray-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}

.bg-green-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity));
}

.bg-green-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity));
}

.bg-green-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}

.bg-green-500\/80 {
    background-color: rgb(34 197 94 / 0.8);
}

.bg-green-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(22 163 74 / var(--tw-bg-opacity));
}

.bg-green-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(21 128 61 / var(--tw-bg-opacity));
}

.bg-green-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(20 83 45 / var(--tw-bg-opacity));
}

.bg-indigo-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(79 70 229 / var(--tw-bg-opacity));
}

.bg-lgreen {
    --tw-bg-opacity: 1;
    background-color: rgb(193 255 0 / var(--tw-bg-opacity));
}

.bg-lime-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(101 163 13 / var(--tw-bg-opacity));
}

.bg-neutral-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity));
}

.bg-neutral-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(163 163 163 / var(--tw-bg-opacity));
}

.bg-neutral-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(250 250 250 / var(--tw-bg-opacity));
}

.bg-neutral-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(115 115 115 / var(--tw-bg-opacity));
}

.bg-neutral-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(82 82 82 / var(--tw-bg-opacity));
}

.bg-neutral-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(64 64 64 / var(--tw-bg-opacity));
}

.bg-neutral-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(38 38 38 / var(--tw-bg-opacity));
}

.bg-neutral-800\/80 {
    background-color: rgb(38 38 38 / 0.8);
}

.bg-neutral-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(23 23 23 / var(--tw-bg-opacity));
}

.bg-orange-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(251 146 60 / var(--tw-bg-opacity));
}

.bg-orange-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 247 237 / var(--tw-bg-opacity));
}

.bg-orange-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 115 22 / var(--tw-bg-opacity));
}

.bg-orange-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(234 88 12 / var(--tw-bg-opacity));
}

.bg-pink-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(253 242 248 / var(--tw-bg-opacity));
}

.bg-pink-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(219 39 119 / var(--tw-bg-opacity));
}

.bg-purple-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(147 51 234 / var(--tw-bg-opacity));
}

.bg-red-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}

.bg-red-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}

.bg-red-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}

.bg-red-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}

.bg-red-600\/90 {
    background-color: rgb(220 38 38 / 0.9);
}

.bg-rose-500\/80 {
    background-color: rgb(244 63 94 / 0.8);
}

.bg-rose-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(225 29 72 / var(--tw-bg-opacity));
}

.bg-slate-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity));
}

.bg-slate-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(148 163 184 / var(--tw-bg-opacity));
}

.bg-slate-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity));
}

.bg-transparent {
    background-color: transparent;
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-white\/90 {
    background-color: rgb(255 255 255 / 0.9);
}

.bg-yellow-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(234 179 8 / var(--tw-bg-opacity));
}

.bg-yellow-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(202 138 4 / var(--tw-bg-opacity));
}

.bg-zinc-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(63 63 70 / var(--tw-bg-opacity));
}

.bg-zinc-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(39 39 42 / var(--tw-bg-opacity));
}

.\!bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops)) !important;
}

.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-l {
    background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.\!from-indigo-600 {
    --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-\[\#0d2c3f\] {
    --tw-gradient-from: #0d2c3f var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(13 44 63 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#45d42f\] {
    --tw-gradient-from: #45d42f var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(69 212 47 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-black {
    --tw-gradient-from: #000 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-500 {
    --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-600\/80 {
    --tw-gradient-from: rgb(37 99 235 / 0.8) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gray-100 {
    --tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-400 {
    --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-500 {
    --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-lime-500 {
    --tw-gradient-from: #84cc16 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(132 204 22 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-neutral-700 {
    --tw-gradient-from: #404040 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(64 64 64 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-neutral-800 {
    --tw-gradient-from: #262626 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(38 38 38 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pink-500 {
    --tw-gradient-from: #ec4899 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-purple-800 {
    --tw-gradient-from: #6b21a8 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(107 33 168 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-white {
    --tw-gradient-from: #fff var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-indigo-300 {
    --tw-gradient-to: rgb(165 180 252 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #a5b4fc var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-white {
    --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.\!to-blue-600 {
    --tw-gradient-to: #2563eb var(--tw-gradient-to-position) !important;
}

.to-\[\#311840\] {
    --tw-gradient-to: #311840 var(--tw-gradient-to-position);
}

.to-\[\#45d42f\] {
    --tw-gradient-to: #45d42f var(--tw-gradient-to-position);
}

.to-black {
    --tw-gradient-to: #000 var(--tw-gradient-to-position);
}

.to-gray-100 {
    --tw-gradient-to: #f3f4f6 var(--tw-gradient-to-position);
}

.to-green-600 {
    --tw-gradient-to: #16a34a var(--tw-gradient-to-position);
}

.to-indigo-400 {
    --tw-gradient-to: #818cf8 var(--tw-gradient-to-position);
}

.to-indigo-500 {
    --tw-gradient-to: #6366f1 var(--tw-gradient-to-position);
}

.to-indigo-600\/80 {
    --tw-gradient-to: rgb(79 70 229 / 0.8) var(--tw-gradient-to-position);
}

.to-neutral-500 {
    --tw-gradient-to: #737373 var(--tw-gradient-to-position);
}

.to-neutral-600 {
    --tw-gradient-to: #525252 var(--tw-gradient-to-position);
}

.to-neutral-700 {
    --tw-gradient-to: #404040 var(--tw-gradient-to-position);
}

.to-neutral-800 {
    --tw-gradient-to: #262626 var(--tw-gradient-to-position);
}

.to-purple-100 {
    --tw-gradient-to: #f3e8ff var(--tw-gradient-to-position);
}

.to-purple-900 {
    --tw-gradient-to: #581c87 var(--tw-gradient-to-position);
}

.to-violet-500 {
    --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
}

.to-white {
    --tw-gradient-to: #fff var(--tw-gradient-to-position);
}

.bg-cover {
    background-size: cover;
}

.bg-clip-text {
    -webkit-background-clip: text;
            background-clip: text;
}

.bg-center {
    background-position: center;
}

.bg-left {
    background-position: left;
}

.bg-right {
    background-position: right;
}

.bg-no-repeat {
    background-repeat: no-repeat;
}

.object-contain {
    -o-object-fit: contain;
       object-fit: contain;
}

.object-cover {
    -o-object-fit: cover;
       object-fit: cover;
}

.object-center {
    -o-object-position: center;
       object-position: center;
}

.p-0 {
    padding: 0px;
}

.p-0\.5 {
    padding: 0.125rem;
}

.p-1 {
    padding: 0.25rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-3 {
    padding: 0.75rem;
}

.p-4 {
    padding: 1rem;
}

.p-5 {
    padding: 1.25rem;
}

.p-6 {
    padding: 1.5rem;
}

.p-8 {
    padding: 2rem;
}

.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
}

.py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.pb-0 {
    padding-bottom: 0px;
}

.pb-12 {
    padding-bottom: 3rem;
}

.pb-16 {
    padding-bottom: 4rem;
}

.pb-2 {
    padding-bottom: 0.5rem;
}

.pb-24 {
    padding-bottom: 6rem;
}

.pb-3 {
    padding-bottom: 0.75rem;
}

.pb-4 {
    padding-bottom: 1rem;
}

.pb-6 {
    padding-bottom: 1.5rem;
}

.pl-0 {
    padding-left: 0px;
}

.pl-12 {
    padding-left: 3rem;
}

.pl-3 {
    padding-left: 0.75rem;
}

.pl-4 {
    padding-left: 1rem;
}

.pl-9 {
    padding-left: 2.25rem;
}

.pr-10 {
    padding-right: 2.5rem;
}

.pr-2 {
    padding-right: 0.5rem;
}

.pr-4 {
    padding-right: 1rem;
}

.pr-5 {
    padding-right: 1.25rem;
}

.pt-10 {
    padding-top: 2.5rem;
}

.pt-2 {
    padding-top: 0.5rem;
}

.pt-4 {
    padding-top: 1rem;
}

.pt-6 {
    padding-top: 1.5rem;
}

.pt-8 {
    padding-top: 2rem;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.font-sans {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.text-5xl {
    font-size: 3rem;
    line-height: 1;
}

.text-9xl {
    font-size: 8rem;
    line-height: 1;
}

.text-\[1\.75rem\] {
    font-size: 1.75rem;
}

.text-\[10px\] {
    font-size: 10px;
}

.text-\[11px\] {
    font-size: 11px;
}

.text-\[14px\] {
    font-size: 14px;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.font-black {
    font-weight: 900;
}

.font-bold {
    font-weight: 700;
}

.font-extrabold {
    font-weight: 800;
}

.font-light {
    font-weight: 300;
}

.font-medium {
    font-weight: 500;
}

.font-normal {
    font-weight: 400;
}

.font-semibold {
    font-weight: 600;
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

.normal-case {
    text-transform: none;
}

.italic {
    font-style: italic;
}

.leading-3 {
    line-height: .75rem;
}

.leading-4 {
    line-height: 1rem;
}

.leading-5 {
    line-height: 1.25rem;
}

.leading-6 {
    line-height: 1.5rem;
}

.leading-7 {
    line-height: 1.75rem;
}

.leading-\[1\.2\] {
    line-height: 1.2;
}

.leading-none {
    line-height: 1;
}

.leading-normal {
    line-height: 1.5;
}

.leading-relaxed {
    line-height: 1.625;
}

.leading-tight {
    line-height: 1.25;
}

.tracking-tight {
    letter-spacing: -0.025em;
}

.tracking-wide {
    letter-spacing: 0.025em;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

.\!text-\[\#081207\] {
    --tw-text-opacity: 1 !important;
    color: rgb(8 18 7 / var(--tw-text-opacity)) !important;
}

.\!text-black {
    --tw-text-opacity: 1 !important;
    color: rgb(0 0 0 / var(--tw-text-opacity)) !important;
}

.\!text-white {
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

.text-\[\#081207\] {
    --tw-text-opacity: 1;
    color: rgb(8 18 7 / var(--tw-text-opacity));
}

.text-\[\#45d42f\] {
    --tw-text-opacity: 1;
    color: rgb(69 212 47 / var(--tw-text-opacity));
}

.text-\[\#bbbbbb\] {
    --tw-text-opacity: 1;
    color: rgb(187 187 187 / var(--tw-text-opacity));
}

.text-amber-700 {
    --tw-text-opacity: 1;
    color: rgb(180 83 9 / var(--tw-text-opacity));
}

.text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
}

.text-blue-400 {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity));
}

.text-blue-500 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity));
}

.text-blue-600 {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity));
}

.text-blue-700 {
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity));
}

.text-emerald-600 {
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity));
}

.text-emerald-700 {
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity));
}

.text-gray-200 {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity));
}

.text-gray-300 {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity));
}

.text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity));
}

.text-gray-50 {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity));
}

.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity));
}

.text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity));
}

.text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity));
}

.text-gray-800 {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity));
}

.text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity));
}

.text-green-500 {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity));
}

.text-green-600 {
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity));
}

.text-green-700 {
    --tw-text-opacity: 1;
    color: rgb(21 128 61 / var(--tw-text-opacity));
}

.text-indigo-600 {
    --tw-text-opacity: 1;
    color: rgb(79 70 229 / var(--tw-text-opacity));
}

.text-lime-400 {
    --tw-text-opacity: 1;
    color: rgb(163 230 53 / var(--tw-text-opacity));
}

.text-lime-500 {
    --tw-text-opacity: 1;
    color: rgb(132 204 22 / var(--tw-text-opacity));
}

.text-neutral-100 {
    --tw-text-opacity: 1;
    color: rgb(245 245 245 / var(--tw-text-opacity));
}

.text-neutral-200 {
    --tw-text-opacity: 1;
    color: rgb(229 229 229 / var(--tw-text-opacity));
}

.text-neutral-300 {
    --tw-text-opacity: 1;
    color: rgb(212 212 212 / var(--tw-text-opacity));
}

.text-neutral-400 {
    --tw-text-opacity: 1;
    color: rgb(163 163 163 / var(--tw-text-opacity));
}

.text-neutral-500 {
    --tw-text-opacity: 1;
    color: rgb(115 115 115 / var(--tw-text-opacity));
}

.text-neutral-600 {
    --tw-text-opacity: 1;
    color: rgb(82 82 82 / var(--tw-text-opacity));
}

.text-neutral-900 {
    --tw-text-opacity: 1;
    color: rgb(23 23 23 / var(--tw-text-opacity));
}

.text-orange-400 {
    --tw-text-opacity: 1;
    color: rgb(251 146 60 / var(--tw-text-opacity));
}

.text-orange-500 {
    --tw-text-opacity: 1;
    color: rgb(249 115 22 / var(--tw-text-opacity));
}

.text-orange-600 {
    --tw-text-opacity: 1;
    color: rgb(234 88 12 / var(--tw-text-opacity));
}

.text-orange-700 {
    --tw-text-opacity: 1;
    color: rgb(194 65 12 / var(--tw-text-opacity));
}

.text-pink-400 {
    --tw-text-opacity: 1;
    color: rgb(244 114 182 / var(--tw-text-opacity));
}

.text-pink-500 {
    --tw-text-opacity: 1;
    color: rgb(236 72 153 / var(--tw-text-opacity));
}

.text-pink-600 {
    --tw-text-opacity: 1;
    color: rgb(219 39 119 / var(--tw-text-opacity));
}

.text-red-400 {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity));
}

.text-red-500 {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity));
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity));
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: rgb(185 28 28 / var(--tw-text-opacity));
}

.text-rose-400 {
    --tw-text-opacity: 1;
    color: rgb(251 113 133 / var(--tw-text-opacity));
}

.text-rose-600 {
    --tw-text-opacity: 1;
    color: rgb(225 29 72 / var(--tw-text-opacity));
}

.text-slate-400 {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity));
}

.text-slate-500 {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity));
}

.text-slate-600 {
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity));
}

.text-slate-700 {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.text-slate-900 {
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity));
}

.text-transparent {
    color: transparent;
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.text-yellow-400 {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity));
}

.text-yellow-500 {
    --tw-text-opacity: 1;
    color: rgb(234 179 8 / var(--tw-text-opacity));
}

.text-zinc-200 {
    --tw-text-opacity: 1;
    color: rgb(228 228 231 / var(--tw-text-opacity));
}

.text-zinc-300 {
    --tw-text-opacity: 1;
    color: rgb(212 212 216 / var(--tw-text-opacity));
}

.text-zinc-400 {
    --tw-text-opacity: 1;
    color: rgb(161 161 170 / var(--tw-text-opacity));
}

.underline {
    text-decoration-line: underline;
}

.line-through {
    text-decoration-line: line-through;
}

.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

.opacity-25 {
    opacity: 0.25;
}

.opacity-40 {
    opacity: 0.4;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-60 {
    opacity: 0.6;
}

.opacity-70 {
    opacity: 0.7;
}

.opacity-75 {
    opacity: 0.75;
}

.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
    outline-style: solid;
}

.ring-1 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-4 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-black {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
}

.ring-blue-100 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(219 234 254 / var(--tw-ring-opacity));
}

.ring-emerald-100 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(209 250 229 / var(--tw-ring-opacity));
}

.ring-gray-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
}

.ring-orange-100 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(255 237 213 / var(--tw-ring-opacity));
}

.ring-red-100 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(254 226 226 / var(--tw-ring-opacity));
}

.ring-opacity-5 {
    --tw-ring-opacity: 0.05;
}

.blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.brightness-0 {
    --tw-brightness: brightness(0);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.delay-150 {
    transition-delay: 150ms;
}

.duration-150 {
    transition-duration: 150ms;
}

.duration-200 {
    transition-duration: 200ms;
}

.ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* News long-form source owner: ./news/richtext.css */

/* Shared foundation tokens live in ./foundation/tokens.css. */

/* Shared Header/Footer/Cart CSS is imported above; only page-specific styles remain here. */

/* Remaining black pages + catalog tokens */

.lolga-black .catalog-page,
.lolga-black .pdp-page,
.lolga-black .checkout-page,
.lolga-black .db-shell,
.lolga-black .news-page,
.lolga-black .track-page,
.lolga-black .thanks-page,
.lolga-black .points-shop-page {
    background: #101010;
    color: #bbbbbb;
}

.lolga-black .catalog-hero,
.lolga-black .catalog-body,
.lolga-black .container {
    color: inherit;
}

.lolga-black .catalog-hero h1 {
    color: #fff;
    font-size: clamp(28px, 3vw, 42px);
    margin: 20px 0 12px;
}

.lolga-black .game-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 14px 0;
}

.lolga-black .game-subnav-name {
    color: #fff;
    font-weight: 700;
    margin-right: 8px;
}

.lolga-black .game-subnav a {
    background: #202020;
    color: #bbb;
    padding: 8px 12px;
    border-radius: 999px;
    text-decoration: none;
}

.lolga-black .game-subnav a.active {
    background: #45d42f;
    color: #081207;
}

.lolga-black .pagination-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 20px 0 32px;
}

.lolga-black .page-btn {
    min-width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: #202020;
    color: #fff;
}

.lolga-black .page-btn.active {
    background: #45d42f;
    color: #081207;
}

.lolga-black .catalog-seo,
.lolga-black .catalog-disclaimer {
    background: #202020;
    padding: 18px;
    border-radius: 14px;
    margin: 24px 0;
}

.lolga-black .catalog-search {
    background: #181818;
    border: 1px solid #323232;
    color: #fff;
    border-radius: 10px;
}

.lolga-black .auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.lolga-black .auth-story,
.lolga-black .auth-form {
    padding: 48px 40px;
}

.lolga-black .auth-story {
    background: #181818;
}

.lolga-black .auth-page h1,
.lolga-black .auth-page h2 {
    color: #fff;
}

.lolga-black .auth-form form {
    display: grid;
    gap: 10px;
    max-width: 420px;
}

.lolga-black .auth-form input {
    background: #181818;
    border: 1px solid #323232;
    color: #fff;
    border-radius: 10px;
    padding: 12px;
}

.lolga-black .auth-submit {
    background: #45d42f;
    color: #081207;
    border: 0;
    border-radius: 10px;
    padding: 12px;
    font-weight: 700;
}

.lolga-black .db-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 24px auto 64px;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
}

.lolga-black .db-side a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    color: #bbb;
    text-decoration: none;
}

.lolga-black .db-side a.active,
.lolga-black .db-side a:hover {
    background: #202020;
    color: #fff;
}

.lolga-black .db-kicker {
    color: #45d42f;
    font-size: 12px;
    font-weight: 800;
}

.lolga-black .info-section {
    padding: 20px 0;
}

.lolga-black .info-section h2 { color: #fff; }

.lolga-black .info-section dl { display: grid; gap: 8px; }

.lolga-black .info-section dt { color: #888; }

.lolga-black .info-section dd { color: #fff; margin: 0; }

.lolga-black .article-toc {
    width: min(1180px, calc(100% - 32px));
    margin: 16px auto 0;
    background: #202020;
    padding: 16px;
    border-radius: 12px;
}

.lolga-black .article-toc a {
    display: block;
    color: #45d42f;
    margin-top: 6px;
}

.lolga-black .news-page h1,
.lolga-black .track-page h1,
.lolga-black .points-shop-page h1 {
    color: #fff;
    /*padding: 14px 0 8px;*/
}

.lolga-black .checkout-progress {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 22px 0 8px;
    color: #888;
    font-weight: 700;
}

.lolga-black .checkout-progress h1 {
    width: 100%;
    margin: 0 0 4px;
    color: #fff;
    font-size: 28px;
}

.lolga-black .checkout-progress span {
    padding-bottom: 6px;
}

.lolga-black .checkout-progress .done,
.lolga-black .checkout-progress .active {
    color: #fff;
    box-shadow: inset 0 -2px 0 #45d42f;
}

.lolga-black .checkout-page .page_checkoutCart,
.lolga-black .track-page,
.lolga-black .thanks-page,
.lolga-black .failed-page {
    color: #bbb;
}

.lolga-black .result-hero {
    padding: 28px 0 8px;
}

.lolga-black .result-kicker {
    color: #45d42f;
    font-size: 12px;
    font-weight: 800;
}

.lolga-black .result-hero h1,
.lolga-black .pdp-page h1 {
    color: #fff;
}

.lolga-black .failed-page .result-hero h1 {
    color: #ff5b5b;
}

.lolga-black .pdp-page {
    padding-bottom: 48px;
}

.lolga-black .article-toc a.active {
    color: #fff;
}

.lolga-black .buy-card {
    min-width: 0;
}

@media (max-width: 820px) {
    .lolga-black .auth-page,
    .lolga-black .db-shell {
        grid-template-columns: 1fr;
    }
}

/* Light leftover surfaces on remaining copied pages */

.lolga-black .bg-white { background-color: #202020 !important; }

.lolga-black .bg-gray-50,
.lolga-black .bg-gray-100,
.lolga-black .bg-blue-50,
.lolga-black .bg-amber-50,
.lolga-black .bg-yellow-50,
.lolga-black .bg-indigo-50 { background-color: #181818 !important; }

.lolga-black .text-gray-900,
.lolga-black .text-gray-800 { color: #ffffff !important; }

.lolga-black .text-gray-600,
.lolga-black .text-gray-500 { color: #bbbbbb !important; }

.lolga-black .border-gray-200,
.lolga-black .border-gray-300 { border-color: #323232 !important; }

.lolga-black .catalog-page [style*="background:#fff"],
.lolga-black .catalog-page [style*="background: #fff"],
.lolga-black .catalog-page [style*="background:#ffffff"],
.lolga-black .catalog-page [style*="background-color:#fff"],
.lolga-black .catalog-page [style*="background-color: #fff"],
.lolga-black .catalog-page [style*="background-color: rgb(255"] {
    background: #202020 !important;
    color: #bbbbbb !important;
}

.lolga-black .lolga-auth-errors,
.lolga-black .lolga-auth-status {
    margin-bottom: 16px;
    font-size: 14px;
}

.lolga-black .lolga-auth-errors { color: #ff5b5b; }

.lolga-black .lolga-auth-status { color: #45d42f; }

.lolga-black .lolga-auth-errors ul {
    margin: 8px 0 0;
    padding-left: 18px;
}

.lolga-black .lolga-social-auth {
    display: grid;
    gap: 8px;
    margin: 8px 0 12px;
}

.lolga-black .lolga-social-auth a {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #202020;
    color: #fff;
    border-radius: 10px;
    padding: 8px 12px;
    text-decoration: none;
}

.lolga-black .lolga-country {
    position: relative;
    width: 25%;
    min-width: 92px;
}

.lolga-black .lolga-country-act {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    background: #181818;
    border: 1px solid #323232;
    color: #fff;
    border-radius: 10px 0 0 10px;
    padding: 10px 8px;
}

.lolga-black .lolga-country-panel {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 30;
    width: min(360px, 80vw);
    background: #202020;
    border: 1px solid #323232;
}

.lolga-black .lolga-country-search {
    width: 100%;
    background: #181818;
    border: 0;
    border-bottom: 1px solid #323232;
    color: #fff;
    padding: 10px 12px;
}

.lolga-black .lolga-country-list {
    max-height: 24rem;
    overflow: auto;
    margin: 0;
    padding: 8px;
}

.lolga-black .lolga-country-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    cursor: pointer;
}

.lolga-black .lolga-country-item:hover { background: #181818; color: #45d42f; }

.lolga-black .lolga-country-item-main {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lolga-black .lolga-model {
    position: relative;
    z-index: 50;
}

.lolga-black .lolga-model-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.lolga-black .lolga-model-dialog {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100% - 32px));
    background: #202020;
    color: #bbb;
    border-radius: 12px;
    padding: 20px;
}

.lolga-black .lolga-model-dialog h3 {
    color: #fff;
    margin: 0 0 8px;
}

.lolga-black .lolga-model .close_model {
    margin-top: 16px;
    background: #45d42f;
    color: #081207;
    border: 0;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 700;
}

.lolga-black .lolga-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lolga-black .lolga-crumbs a { color: #bbb; }

.lolga-black .lolga-crumbs svg {
    width: 18px;
    height: 18px;
}

/* Shared Product List / Wiki breadcrumb skin. Legacy PDP and News remain unchanged. */

.lolga-black .lolga-crumbs--catalog {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    color: #a3a3a3;
    font-size: 13px;
    line-height: 1.5;
}

.lolga-black .lolga-crumbs--catalog::-webkit-scrollbar { display: none; }

.lolga-black .lolga-crumbs--catalog ol {
    flex-wrap: nowrap;
    gap: 8px;
}

.lolga-black .lolga-crumbs--catalog li {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    white-space: nowrap;
}

.lolga-black .lolga-crumbs--catalog li + li::before {
    content: "›";
    color: #777;
    font-size: 17px;
    line-height: 1;
}

.lolga-black .lolga-crumbs--catalog a {
    color: #a3a3a3;
    text-decoration: none;
}

.lolga-black .lolga-crumbs--catalog a:hover,
.lolga-black .lolga-crumbs--catalog a:focus-visible { color: #45d42f; }

.lolga-black .lolga-crumbs--catalog [aria-current="page"] { color: #dedede; }

.lolga-black .catalog-page .catalog-breadcrumb-wrap {
    padding-top: 10px;
    padding-bottom: 2px;
}

@media (max-width: 699px) {
    .lolga-black .catalog-page .catalog-breadcrumb-wrap {
        padding-top: 9px;
        padding-bottom: 0;
    }
    .lolga-black .lolga-crumbs--catalog { font-size: 12px; }
}

.lolga-black .lolga-web-safe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lolga-black .lolga-web-safe-trust { grid-column: 1 / -1; }

.lolga-black .lolga-icon { display: block; }

.lolga-black .lolga-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.lolga-black .lolga-form-grid label,
.lolga-black .lolga-label { color: #bbbbbb; display: block; margin-bottom: 6px; }

.lolga-black .lolga-req { color: #ff5b5b; font-weight: 700; }

.lolga-black .lolga-input,
.lolga-black textarea.lolga-input,
.lolga-black select.lolga-input {
    width: 100%;
    background: #181818;
    border: 1px solid #323232;
    color: #fff;
    border-radius: 10px;
    padding: 10px 12px;
}

.lolga-black .lolga-btn {
    background: #45d42f;
    color: #081207;
    border: 0;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 700;
    cursor: pointer;
}

.lolga-black .lolga-btn-ghost {
    background: #202020;
    color: #fff;
    border: 1px solid #323232;
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
}

.lolga-black .lolga-form-tips {
    background: #202020;
    border: 1px solid #323232;
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 16px;
    color: #bbbbbb;
}

.lolga-black .lolga-form-tips-hd {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    color: #45d42f;
    font-weight: 700;
}

.lolga-black .lolga-form-tips-title,
.lolga-black .lolga-form-tips-toggle { display: flex; align-items: center; gap: 8px; }

.lolga-black .lolga-upload {
    border: 1px dashed #323232;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.lolga-black .lolga-upload-act { color: #45d42f; cursor: pointer; display: block; }

.lolga-black .lolga-pay-title,
.lolga-black .lolga-pay-group-hd { color: #fff; font-weight: 700; display: flex; align-items: center; gap: 10px; }

.lolga-black .lolga-pay-tip { background: #202020; color: #eab308; border-radius: 10px; padding: 10px 12px; display: flex; gap: 8px; margin: 12px 0; }

.lolga-black .lolga-pay-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }

.lolga-black .lolga-pay-card { border: 2px solid #323232; border-radius: 10px; padding: 8px; cursor: pointer; background: #181818; position: relative; }

.lolga-black .lolga-pay-card.is-on { border-color: #45d42f; }

.lolga-black .lolga-pay-dot.is-on { background: #45d42f; color: #081207; border-color: #45d42f; }

.lolga-black .lolga-pay-badge { position: absolute; top: -10px; right: 0; background: #45d42f; color: #081207; font-size: 12px; border-radius: 999px; padding: 2px 8px; }

.lolga-black .lolga-empty { text-align: center; padding: 32px 12px; }

.lolga-black .lolga-empty-txt { color: #ff5b5b; font-weight: 700; margin: 8px 0 12px; }

/* One shared restock dialog for Product List, SKU variants and PDP. */

.lolga-black .lolga-notify-mask {
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 20px;
    overflow-y: auto;
    background: rgba(0, 0, 0, .78);
}

.lolga-black.lolga-notify-open { overflow: hidden; }

.lolga-black .lolga-notify {
    position: relative;
    flex: 0 1 480px;
    width: min(480px, 100%);
    max-height: calc(100dvh - 40px);
    margin: auto;
    padding: 28px;
    overflow-y: auto;
    box-sizing: border-box;
    border: 1px solid #383838;
    border-radius: 10px;
    background: #202020;
    color: #bbb;
    box-shadow: 0 24px 64px rgba(0,0,0,.55);
    font-size: 13px;
    line-height: 1.55;
}

.lolga-black .lolga-notify-close {
    position: absolute;
    top: 15px;
    right: 15px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #383838;
    border-radius: 6px;
    background: #272727;
    color: #aaa;
    cursor: pointer;
}

.lolga-black .lolga-notify-close:hover,
.lolga-black .lolga-notify-close:focus-visible {
    color: #fff;
    border-color: #5b5b5b;
}

.lolga-black .lolga-notify-close svg { width: 17px; height: 17px; }

.lolga-black .lolga-notify-hd {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 38px;
    margin-bottom: 14px;
}

.lolga-black .lolga-notify-icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid #355638;
    border-radius: 9px;
    color: #68e454;
    background: #203021;
}

.lolga-black .lolga-notify-icon svg { width: 23px; height: 23px; }

.lolga-black .lolga-notify-hd h2 {
    margin: 0;
    color: #f3f3f3;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 750;
}

.lolga-black .lolga-notify-description {
    margin: 0 0 20px;
    max-width: 38em;
    color: #b9b9b9;
    font-size: 13px;
    line-height: 1.65;
}

.lolga-black .lolga-notify-row { display: grid; gap: 9px; }

.lolga-black .lolga-notify-label {
    display: block;
    color: #dedede;
    font-size: 12px;
    font-weight: 650;
}

/* Validation stays beside its input; the global toast is for no-dialog states. */

.lolga-black .lolga-notify-feedback {
    margin: 0;
    padding: 9px 11px;
    border: 1px solid #754242;
    border-radius: 4px;
    background: #302020;
    color: #ffcece;
    font-size: 12px;
    line-height: 1.5;
}

.lolga-black .lolga-notify-feedback[hidden] { display: none; }

.lolga-black .lolga-notify .notify_email {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 13px;
    border: 1px solid #383838;
    border-radius: 4px;
    background: #171717;
    color: #f4f4f4;
    font-size: 13px;
    box-sizing: border-box;
}

.lolga-black .lolga-notify .notify_email::-moz-placeholder { color: #777; }

.lolga-black .lolga-notify .notify_email::placeholder { color: #777; }

.lolga-black .lolga-notify .notify_email:focus {
    border-color: #686868 !important;
    box-shadow: 0 0 0 2px rgba(175, 175, 175, .12) !important;
}

.lolga-black .lolga-notify .notify_email[aria-invalid="true"] {
    border-color: #ba5555 !important;
}

.lolga-black .lolga-notify .notify_email[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(186, 85, 85, .14) !important;
}

.lolga-black .lolga-notify .notify_submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin-top: 3px;
    padding: 10px 16px;
    border: 0;
    border-radius: 4px;
    background: #45d42f;
    color: #071006;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
}

.lolga-black .lolga-notify .notify_submit:hover { background: #60e34a; }

.lolga-black .lolga-notify .notify_submit:disabled { opacity: .6; cursor: wait; }

.lolga-black .lolga-notify-agree {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    color: #999;
    font-size: 12px;
    line-height: 1.55;
    cursor: pointer;
}

.lolga-black .lolga-notify-agree input[type="checkbox"] {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: #45d42f;
    cursor: pointer;
}

.lolga-black .lolga-notify-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    width: min(420px, calc(100% - 36px));
    padding: 12px 16px;
    border: 1px solid #345935;
    border-radius: 6px;
    background: #202a20;
    color: #d4f8ca;
    font-size: 13px;
    line-height: 1.5;
    box-shadow: 0 14px 38px rgba(0,0,0,.35);
    box-sizing: border-box;
}

.lolga-black .lolga-notify-toast.bg-red-600 {
    background: #302020;
    border-color: #753c3c;
    color: #ffcdcd;
}

@media (max-width: 600px) {
    .lolga-black .lolga-notify-mask { padding: 14px; }
    .lolga-black .lolga-notify {
        width: 100%;
        max-height: calc(100dvh - 28px);
        padding: 24px 20px;
    }
    .lolga-black .lolga-notify-hd h2 { font-size: 18px; }
}

.lolga-black .lolga-panel { background: #202020; border-radius: 16px; padding: 16px; margin: 16px 0; }

.lolga-black .lolga-panel-hd { display: flex; justify-content: space-between; align-items: center; color: #fff; font-weight: 700; gap: 12px; }

.lolga-black .lolga-panel-hd a { color: #45d42f; }

.lolga-black .lolga-chip-label { color: #fff; font-weight: 700; margin: 12px 0 8px; }

.lolga-black .lolga-chip-sub { background: #181818; border-radius: 12px; padding: 10px; margin-top: 8px; }

.lolga-black .lolga-chip,
.lolga-black .lolga-letter-filter li { background: #202020; color: #bbb; padding: 8px 12px; border-radius: 10px; cursor: pointer; }

.lolga-black .lolga-chip.is-on,
.lolga-black .lolga-letter-filter li.is-on,
.lolga-black .lolga-tab.is-on,
.lolga-black .lolga-attr-chip.is-on { background: #45d42f; color: #081207; }

.lolga-black .lolga-attr-chip { display: inline-flex; align-items: center; gap: 8px; background: #202020; color: #fff; border-radius: 10px; padding-right: 12px; }

.lolga-black .lolga-roblox-toggle { background: #202020; color: #fff; border: 1px solid #323232; border-radius: 10px; padding: 8px 12px; display: flex; justify-content: space-between; cursor: pointer; min-width: 200px; }

.lolga-black .lolga-roblox-panel { position: absolute; z-index: 40; background: #202020; border: 1px solid #323232; width: min(300px, 100%); }

.lolga-black .lolga-sell-nav { background: #181818; border-radius: 16px; padding: 12px; }

.lolga-black .lolga-side-nav-list { list-style: none; margin: 0; padding: 0;  border-radius: 16px; }

.lolga-black .lolga-side-nav-list a { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; color: #bbb; }

.lolga-black .lolga-side-nav-list a.is-on { background: #181818; color: #45d42f; }

.lolga-black .lolga-points-hero { display: grid; grid-template-columns: 1fr 1fr; background: #202020; border-radius: 16px; padding: 20px; text-align: center; }

.lolga-black .lolga-points-num { color: #45d42f; font-size: 40px; font-weight: 700; }

@media (max-width: 820px) {
    .lolga-black .lolga-form-grid,
    .lolga-black .lolga-pay-grid,
    .lolga-black .lolga-points-hero { grid-template-columns: 1fr; }
}

/* PDP hero: reserve a fixed box so the sibling buy-card does not stretch on image load */

.lolga-black .pdp-hero-media {
    min-height: 260px;
    width: 100%;
}

.lolga-black .pdp-hero-media .product_img {
    min-height: 260px;
    width: 100%;
}

.lolga-black .pdp-hero-media img#big_img,
.lolga-black .pdp-hero-media img.change_img {
    max-height: 260px;
    max-width: 100%;
    width: auto;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
}

/* Review stars live in app-black.css */

.lolga-black .lolga-review-tag { color: #fff; text-align: center; }

.lolga-black .lolga-review-stars {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    min-height: 20px;
}

.lolga-black .lolga-review-stars img {
    width: 21px;
    height: 20px;
    max-width: 21px;
    display: block;
}

.lolga-black .lolga-review-based { min-height: 1.25em; margin-top: 4px; }

/* PAY-PR-1: LOLGA payment-entry surfaces.
   PURPOSE: own Checkout redirect, card/Drop-in payment host, and provider jump visuals.
   MUST NOT: style third-party hosted iframes, alter Checkout /cart_index, or affect other themes.
   RELATED DOC: docs/payment-order/design.md */

.lolga-black .payment-flow {
    --payment-bg: #101010;
    --payment-card: #181818;
    --payment-control: #202020;
    --payment-border: #3a3a3a;
    --payment-muted: #bbb;
    --payment-green: #45d42f;
    width: min(100% - 40px, 1180px);
    margin: 0 auto;
    padding: 56px 0 88px;
    min-height: 62vh;
    color: #fff;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.lolga-black .payment-flow--redirect {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: min(68vh, 680px);
    padding-top: 48px;
    padding-bottom: 64px;
}

.lolga-black .payment-flow__card {
    width: min(100%, 576px);
    margin: 0 auto;
    padding: 36px 38px 40px;
    border: 1px solid var(--payment-border);
    border-radius: 16px;
    background: var(--payment-card);
    box-shadow: 0 20px 54px rgba(0,0,0,.27);
}

.lolga-black .payment-flow__card--redirect {
    width: min(100%, 610px);
    padding: 52px 46px;
    text-align: center;
}

.lolga-black .payment-flow__eyebrow {
    display: block;
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--payment-green);
}

.lolga-black .payment-flow__title {
    margin: 0;
    color: #fff;
    font-size: clamp(24px, 2.3vw, 32px);
    letter-spacing: -.035em;
    line-height: 1.18;
    font-weight: 800;
}

.lolga-black .payment-flow__description {
    margin: 14px 0 0;
    color: var(--payment-muted);
    font-size: 15px;
    line-height: 1.65;
}

.lolga-black .payment-flow__loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 26px;
    border-radius: 50%;
    color: var(--payment-green);
    background: rgba(69, 212, 47, .09);
}

.lolga-black .payment-flow__spinner {
    display: block;
    width: 42px;
    height: 42px;
    border: 3px solid rgba(69, 212, 47, .22);
    border-top-color: var(--payment-green);
    border-radius: 50%;
    animation: lolga-payment-spin .85s linear infinite;
}

.lolga-black .payment-flow__icon {
    display: block;
    width: 36px;
    height: 36px;
    stroke: currentColor;
}

.lolga-black .payment-flow__loading--danger {
    color: #ff5a5f;
    background: rgba(255, 90, 95, .09);
}

.lolga-black .payment-flow__note {
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--payment-border);
    color: #929292;
    font-size: 13px;
    line-height: 1.55;
}

.lolga-black .payment-flow__order {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 24px;
    padding: 17px 18px;
    border-radius: 10px;
    background: var(--payment-control);
    color: #aaa;
    font-size: 13px;
}

.lolga-black .payment-flow__order strong {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.lolga-black .payment-flow__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.lolga-black .payment-flow__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: var(--payment-green);
    color: #081207;
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
}

.lolga-black .payment-flow__btn--secondary {
    color: #fff;
    background: var(--payment-control);
    border-color: var(--payment-border);
}

.lolga-black .payment-flow__btn:hover { filter: brightness(1.07); }

.lolga-black .payment-flow__btn:focus-visible,
.lolga-black .payment-flow__submit:focus-visible {
    outline: 2px solid var(--payment-green);
    outline-offset: 3px;
}

.lolga-black .payment-flow__cardname:focus-visible {
    outline: 2px solid #808080;
    outline-offset: 3px;
}

.lolga-black .payment-flow__topline {
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--payment-border);
}

.lolga-black .payment-flow__facts {
    margin: 0 0 28px;
    padding: 0 0 22px;
    display: grid;
    gap: 13px;
    border-bottom: 1px solid var(--payment-border);
}

.lolga-black .payment-flow__fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 14px;
}

.lolga-black .payment-flow__fact dt {
    color: #aaa;
    font-weight: 500;
}

.lolga-black .payment-flow__fact dd {
    margin: 0;
    color: #fff;
    font-weight: 700;
    text-align: right;
    overflow-wrap: anywhere;
}

.lolga-black .payment-flow__fact--total dd {
    font-size: 20px;
    font-weight: 800;
}

.lolga-black .payment-flow__method {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 24px;
}

.lolga-black .payment-flow__method-name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 700;
}

.lolga-black .payment-flow__method-name svg {
    display: block;
    width: 30px;
    height: 24px;
    color: var(--payment-green);
}

.lolga-black .payment-flow__networks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.lolga-black .payment-flow__networks img {
    width: 34px;
    height: 24px;
    display: block;
    -o-object-fit: contain;
       object-fit: contain;
}

.lolga-black .payment-flow__fields {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.lolga-black .payment-flow__field {
    position: relative;
    min-width: 0;
}

.lolga-black .payment-flow__field > label {
    display: block;
    margin: 0 0 8px;
    color: #bdbdbd;
    font-size: 13px;
    font-weight: 600;
}

.lolga-black .payment-flow__field-row {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
}

.lolga-black .payment-flow__sdk-field,
.lolga-black .payment-flow__cardname {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 11px 12px;
    background: #fff;
    border: 1px solid #c4c8c5;
    border-radius: 8px;
    color: #131313;
    font: inherit;
    font-size: 15px;
}

.lolga-black .payment-flow__sdk-field:focus-within { border-color: #686868; box-shadow: 0 0 0 2px rgba(175,175,175,.12); }

.lolga-black .payment-flow__sdk-field iframe { max-width: 100%; }

.lolga-black .payment-flow__field-error {
    color: #ff777b;
    font-size: 12px;
    line-height: 1.4;
    margin: 5px 0 0;
    min-height: 0;
}

.lolga-black .payment-flow__submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin-top: 26px;
    border-radius: 9px;
    border: 0;
    background: var(--payment-green);
    color: #081207;
    cursor: pointer;
    font-weight: 800;
    font-size: 16px;
}

.lolga-black .payment-flow__submit:disabled { opacity: .58; cursor: not-allowed; }

.lolga-black .payment-flow__state {
    margin-top: 18px;
    color: var(--payment-muted);
    font-size: 14px;
    line-height: 1.55;
}

.lolga-black .payment-flow__state--success { color: var(--payment-green); }

.lolga-black .payment-flow__state--error { color: #ff777b; overflow-wrap: anywhere; }

.lolga-black .payment-flow__state--error:empty { display: none; }

.lolga-black .payment-flow__secure {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 24px 0 0;
    color: #a9a9a9;
    font-size: 13px;
    text-align: center;
}

.lolga-black .payment-flow__secure svg { width: 16px; height: 16px; color: var(--payment-green); flex: 0 0 16px; }

.lolga-black .payment-flow__dropin { width: 100%; min-height: 10px; display: none; }

.lolga-black .payment-flow__standalone-brand {
    margin-bottom: 24px;
    font-size: 15px;
    letter-spacing: .18em;
    color: var(--payment-green);
    font-weight: 800;
}

.lolga-black .payment-flow__provider {
    margin-top: 12px;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
}

.lolga-black.payment-standalone {
    margin: 0;
    min-height: 100vh;
    background: #101010;
    color: #fff;
}

.lolga-black .payment-flow__eyebrow--danger { color: #ff5a5f; }

.lolga-black .payment-flow__error-details { overflow-wrap: anywhere; }

@keyframes lolga-payment-spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
    .lolga-black .payment-flow { width: calc(100% - 24px); padding: 24px 0 50px; }
    .lolga-black .payment-flow--redirect { min-height: 55vh; }
    .lolga-black .payment-flow__card { padding: 26px 19px 30px; border-radius: 12px; }
    .lolga-black .payment-flow__card--redirect { padding: 36px 20px; }
    .lolga-black .payment-flow__title { font-size: 25px; }
    .lolga-black .payment-flow__field-row { gap: 10px; }
    .lolga-black .payment-flow__order { padding: 14px; }
    .lolga-black .payment-flow__actions .payment-flow__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .lolga-black .payment-flow__spinner { animation: none; border-color: var(--payment-green); }
}

/* PAY-UI-1: Airwallex Card compact spacing.
   PURPOSE / OWNS: Card-only outer space and gaps; Drop-in and redirect pages are unchanged.
   MUST NOT: resize Airwallex hosted field controls or modify payment SDK behavior.
   RELATED DOC: docs/payment-order/pay-ui-1-card-spacing.md */

.lolga-black .payment-flow--card {
    padding: 24px 0 32px;
    min-height: 0;
}

.lolga-black .payment-flow--card .payment-flow__card {
    padding: 24px 30px 26px;
}

.lolga-black .payment-flow--card .payment-flow__topline {
    padding-bottom: 16px;
    margin-bottom: 14px;
}

.lolga-black .payment-flow--card .payment-flow__description {
    margin-top: 10px;
}

.lolga-black .payment-flow--card .payment-flow__facts {
    margin-bottom: 18px;
    padding-bottom: 16px;
    gap: 10px;
}

.lolga-black .payment-flow--card .payment-flow__method {
    margin-bottom: 16px;
}

.lolga-black .payment-flow--card .payment-flow__fields {
    gap: 14px;
}

.lolga-black .payment-flow--card .payment-flow__field > label {
    margin-bottom: 6px;
}

.lolga-black .payment-flow--card .payment-flow__submit {
    margin-top: 18px;
}

.lolga-black .payment-flow--card .payment-flow__secure {
    margin-top: 16px;
}

@media (max-width: 640px) {
    .lolga-black .payment-flow--card {
        padding: 18px 0 28px;
    }
    .lolga-black .payment-flow--card .payment-flow__card {
        padding: 22px 18px 24px;
    }
}

/* PAY-PR-2: result state owner (Success / Failed / Pending / Cancel).
   PURPOSE: consistent order result visual layer in the existing LOLGA black app bundle.
   MUST NOT: alter payment/Order status semantics or Checkout fields.
   RELATED DOC: docs/payment-order/design.md */

.lolga-black .order-result-v3 {
    --result-bg:#101010;
    --result-card:#181818;
    --result-secondary:#202020;
    --result-border:#303030;
    --result-muted:#aaa;
    --result-green:#45d42f;
    --result-red:#ff5a5f;
    --result-yellow:#f6b204;
    background:var(--result-bg);
    color:#fff;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    min-height:65vh;
    padding:48px 20px 96px;
}

.lolga-black .order-result-v3 .hidden { display:none!important; }

.lolga-black .order-result-v3__container { width:min(100%,1162px); margin:auto; }

.lolga-black .order-result-v3__loading {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    color:#bbb;
    min-height:42vh;
    font-size:16px;
}

.lolga-black .order-result-v3__spinner {
    display:block;
    width:42px;
    height:42px;
    border:3px solid rgba(69,212,47,.18);
    border-top-color:var(--result-green);
    border-radius:50%;
    animation:lolga-payment-spin .9s linear infinite;
}

.lolga-black .order-result-v3__hero {
    text-align:center;
    width:min(100%,860px);
    margin:0 auto 50px;
}

.lolga-black .order-result-v3__mark {
    width:70px;
    height:70px;
    display:grid;
    place-items:center;
    margin:0 auto 18px;
    border-radius:50%;
    color:#101010;
    background:var(--result-green);
    box-shadow:0 0 0 10px rgba(69,212,47,.08),0 0 35px rgba(69,212,47,.15);
}

.lolga-black .order-result-v3__mark svg {
    display:block;
    width:36px;
    height:36px;
    stroke:currentColor;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.lolga-black .order-result-v3__mark--pending {
    background:var(--result-yellow);
    box-shadow:0 0 0 10px rgba(246,178,4,.08),0 0 35px rgba(246,178,4,.10);
}

.lolga-black .order-result-v3__mark--cancel {
    background:#bbb;
    box-shadow:0 0 0 10px rgba(187,187,187,.07);
}

.lolga-black .order-result-v3__mark--failed {
    background:var(--result-red);
    box-shadow:0 0 0 10px rgba(255,90,95,.07),0 0 35px rgba(255,90,95,.10);
}

.lolga-black .order-result-v3__kicker {
    display:block;
    color:var(--result-green);
    font-size:13px;
    font-weight:800;
    letter-spacing:.2em;
    line-height:1.4;
    margin:0 0 13px;
}

.lolga-black .order-result-v3__hero--pending .order-result-v3__kicker {color:var(--result-yellow);}

.lolga-black .order-result-v3__hero--cancel .order-result-v3__kicker {color:#bbb;}

.lolga-black .order-result-v3__hero--failed .order-result-v3__kicker {color:var(--result-red);}

.lolga-black .order-result-v3__hero h1 {
    font-size:clamp(34px,4.7vw,62px);
    font-weight:850;
    letter-spacing:-.05em;
    color:#fff;
    line-height:1.09;
    margin:0;
}

.lolga-black .order-result-v3__lead {
    max-width:690px;
    color:#b8b8b8;
    font-size:16px;
    line-height:1.7;
    margin:17px auto 29px;
}

.lolga-black .order-result-v3__facts {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    background:var(--result-card);
    text-align:left;
    margin:0 auto;
}

.lolga-black .order-result-v3__facts > div {
    min-width:0;
    padding:19px 22px;
    border-right:1px solid var(--result-border);
}

.lolga-black .order-result-v3__facts > div:last-child {border-right:0;}

.lolga-black .order-result-v3__facts span {
    display:block;
    color:#929292;
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-bottom:5px;
}

.lolga-black .order-result-v3__facts strong {
    display:block;
    color:#fff;
    font-size:17px;
    font-weight:750;
    line-height:1.35;
    overflow-wrap:anywhere;
}

.lolga-black .order-result-v3__dot {
    display:inline-block;
    width:8px;height:8px;
    background:var(--result-green);
    border-radius:50%;
    margin-right:7px;
    vertical-align:2px;
    box-shadow:0 0 9px rgba(69,212,47,.4);
}

.lolga-black .order-result-v3__actions {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin:25px 0 0;
}

.lolga-black .order-result-v3__button {
    display:inline-flex;
    gap:12px;
    align-items:center;
    justify-content:center;
    padding:14px 24px;
    min-height:50px;
    background:var(--result-green);
    color:#0d160c;
    font-size:14px;
    font-weight:800;
    text-decoration:none;
    border:0;
    border-radius:2px;
    cursor:pointer;
}

.lolga-black .order-result-v3__button--secondary {background:var(--result-secondary);color:#fff;}

.lolga-black .order-result-v3__button:hover {filter:brightness(1.08);}

.lolga-black .order-result-v3__button:focus-visible {outline:2px solid var(--result-green);outline-offset:3px;}

.lolga-black .order-result-v3__button svg {
    display:block;
    width:17px;
    height:17px;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* Single continuous track: every node shares the same grid geometry.
   Status classes control only the segment leading into the next node. */

.lolga-black .order-result-v3__progress {
    --step-size:36px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    background:var(--result-card);
    padding:26px 25px;
    margin:0 0 38px;
    min-width:0;
}

.lolga-black .order-result-v3__step {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    min-width:0;
}

.lolga-black .order-result-v3__step::after {
    position:absolute;
    content:"";
    left:calc(50% + var(--step-size) / 2);
    top:calc(var(--step-size) / 2 - 1px);
    width:calc(100% - var(--step-size));
    height:2px;
    background:#353535;
}

.lolga-black .order-result-v3__step:last-child::after {display:none;}

.lolga-black .order-result-v3__step.is-complete::after {
    background:var(--result-green);
}

.lolga-black .order-result-v3__step-dot {
    width:var(--step-size);
    height:var(--step-size);
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    background:#2c2c2c;
    border-radius:50%;
    color:#929292;
    font-weight:800;
    margin-bottom:12px;
}

.lolga-black .order-result-v3__step.is-complete .order-result-v3__step-dot,
.lolga-black .order-result-v3__step.is-current .order-result-v3__step-dot {
    background:var(--result-green);
    color:#081207;
}

.lolga-black .order-result-v3__step strong {font-size:13px;color:#fff;line-height:1.4;margin-bottom:4px;}

.lolga-black .order-result-v3__step small {font-size:12px;color:#929292;line-height:1.45;}

.lolga-black .order-result-v3__details {
    display:grid;
    grid-template-columns:minmax(0,1.93fr) minmax(305px,1fr);
    gap:26px;
    align-items:start;
    scroll-margin-top:30px;
}

.lolga-black .order-result-v3__summary,
.lolga-black .order-result-v3__delivery,
.lolga-black .order-result-v3__recovery {
    background:var(--result-card);
    min-width:0;
    padding:29px 28px 32px;
}

.lolga-black .order-result-v3__summary h2,
.lolga-black .order-result-v3__delivery h2,
.lolga-black .order-result-v3__recovery h2 {
    font-size:24px;
    font-weight:800;
    letter-spacing:-.035em;
    color:#fff;
    line-height:1.3;
    margin:0 0 18px;
}

.lolga-black .order-result-v3__products {list-style:none;margin:0;padding:0;}

.lolga-black .order-result-v3__product {
    display:grid;
    grid-template-columns:82px minmax(0,1fr) auto;
    align-items:center;
    gap:16px;
    padding:4px 0 20px;
    margin-bottom:18px;
    border-bottom:1px solid var(--result-border);
}

.lolga-black .order-result-v3__product-media {
    width:82px;height:82px;overflow:hidden;
    background:#111;
    display:flex;align-items:center;justify-content:center;
    padding:5px;
}

.lolga-black .order-result-v3__product-media img {
    min-width:0;
    max-width:100%;
    max-height:100%;
    -o-object-fit:contain;
       object-fit:contain;
}

.lolga-black .order-result-v3__product-info h3 {font-size:15px;color:#fff;font-weight:700;line-height:1.35;margin:0 0 8px;overflow-wrap:anywhere;}

.lolga-black .order-result-v3__product-info p {margin:0;color:#989898;font-size:12px;}

.lolga-black .order-result-v3__product-price {color:#fff;font-size:15px;white-space:nowrap;}

.lolga-black .order-result-v3__totals {display:grid;gap:10px;}

.lolga-black .order-result-v3__total {
    display:flex;align-items:baseline;justify-content:space-between;
    flex-wrap:wrap;gap:8px 20px;
    font-size:14px;color:#aaa;
}

.lolga-black .order-result-v3__total--final {
    border-top:1px solid var(--result-border);
    padding-top:16px;margin-top:7px;
    font-size:22px;color:#fff;
}

.lolga-black .order-result-v3__sidebar-lead {font-size:14px;color:#a6a6a6;line-height:1.65;margin:0 0 22px;}

.lolga-black .order-result-v3__delivery-list {margin:0 0 22px;}

.lolga-black .order-result-v3__delivery-list > div {
    display:flex;justify-content:space-between;align-items:baseline;
    flex-wrap:wrap;gap:5px 16px;
    padding:13px 0;
    border-bottom:1px solid var(--result-border);
    font-size:13px;
}

.lolga-black .order-result-v3__delivery-list dt {color:#999;}

.lolga-black .order-result-v3__delivery-list dd {margin:0;color:#fff;font-weight:700;overflow-wrap:anywhere;text-align:right;}

.lolga-black .order-result-v3__delivery-list a {color:var(--result-green);}

.lolga-black .order-result-v3__button--wide {width:100%;text-align:center;}

.lolga-black .order-result-v3__support {
    display:block;margin-top:16px;
    padding:20px 18px;background:#111;
    border:1px solid var(--result-border);
}

.lolga-black .order-result-v3__support strong {font-size:14px;color:#fff;}

.lolga-black .order-result-v3__support p {color:#999;font-size:13px;line-height:1.6;margin:8px 0 0;}

.lolga-black .order-result-v3__alert {
    display:flex;align-items:flex-start;gap:12px;
    padding:16px;text-align:left;
    margin:24px 0 0;
    color:#ddd;
    border:1px solid rgba(255,90,95,.25);
    background:rgba(255,90,95,.07);
    line-height:1.55;
    font-size:13px;
}

.lolga-black .order-result-v3__alert svg {flex:0 0 19px;width:19px;height:19px;stroke:var(--result-red);stroke-width:1.8;}

.lolga-black .order-result-v3__recovery {
    text-align:left;
    margin:0 0 38px;
    scroll-margin-top:30px;
}

.lolga-black .order-result-v3__recovery p {font-size:14px;line-height:1.6;color:#bbb;margin:0;}

.lolga-black .order-result-v3__success-extras {margin-top:38px;}

.lolga-black .order-result-v3__success-extras .bg-white,
.lolga-black .order-result-v3__success-extras .bg-gray-50 {
    background:var(--result-card);
    color:#fff;
}

.lolga-black .order-result-v3__success-extras .text-gray-900,
.lolga-black .order-result-v3__success-extras .text-gray-800 {color:#fff;}

.lolga-black .order-result-v3__success-extras .text-gray-600,
.lolga-black .order-result-v3__success-extras .text-gray-500,
.lolga-black .order-result-v3__success-extras .text-gray-400 {color:#b5b5b5;}

.lolga-black .order-result-v3__success-extras .border-gray-100,
.lolga-black .order-result-v3__success-extras .border-gray-200 {border-color:var(--result-border);}

.lolga-black .order-result-v3__success-extras .bg-red-600 {background:var(--result-green);color:#101010;}

.lolga-black .order-result-v3__success-extras .bg-green-600 {background:var(--result-green);color:#101010;}

.lolga-black .order-result-v3__payed-tip {
    padding:18px 22px;
    color:#cceec8;
    background:rgba(69,212,47,.08);
    border:1px solid rgba(69,212,47,.18);
}

/* PAY-PR-2-FIX-2: reusable delivery instructions inside the existing Order Result owner.
   OWNS: presentation of legacy game payed_tip, Roblox delivery cards and Hot Games only.
   MUST NOT: override SDK/order/payment status, author data, copy handlers or friend URL.
   RELATED DOC: docs/payment-order/pay-pr-2-delivery-qa.md */

.lolga-black .order-result-v3__instructions {
    margin:0 0 30px;
    padding:28px;
    border:1px solid rgba(69,212,47,.24);
    border-radius:14px;
    background:var(--result-card);
    min-width:0;
}

.lolga-black .order-result-v3__instructions-head {
    margin:0 0 23px;
}

.lolga-black .order-result-v3__instructions-head .order-result-v3__kicker {
    margin-bottom:7px;
}

.lolga-black .order-result-v3__instructions-head h2 {
    font-size:clamp(21px,2.5vw,27px);
    font-weight:800;
    letter-spacing:-.03em;
    color:#fff;
    line-height:1.25;
    margin:0 0 8px;
}

.lolga-black .order-result-v3__instructions-head p {
    color:#ababab;
    font-size:14px;
    line-height:1.55;
    margin:0;
}

.lolga-black .order-result-v3__success-extras {
    margin-top:0;
}

.lolga-black .order-result-v3__success-extras svg {
    display:inline-block;
    width:18px;
    height:18px;
    max-width:18px;
    max-height:18px;
    flex:0 0 18px;
    vertical-align:middle;
}

.lolga-black .order-result-v3__success-extras svg path {
    vector-effect:non-scaling-stroke;
}

.lolga-black .order-result-v3__delivery-methods {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    max-width:none;
    margin:0;
}

.lolga-black .order-result-v3__success-extras .order-result-v3__delivery-method {
    min-width:0;
    max-width:100%;
    padding:22px;
    display:flex;
    flex-direction:column;
    border:1px solid var(--result-border);
    border-radius:12px;
    background:var(--result-secondary);
    color:#fff;
}

.lolga-black .order-result-v3__success-extras .order-result-v3__delivery-method--recommended {
    border-color:rgba(69,212,47,.55);
}

.lolga-black .order-result-v3__delivery-method h2 {
    min-width:0;
    margin:0;
    color:#fff;
    font-size:16px;
    line-height:1.45;
    font-weight:800;
    overflow-wrap:anywhere;
}

.lolga-black .order-result-v3__delivery-method > .flex.items-center.justify-between {
    gap:12px;
}

.lolga-black .order-result-v3__delivery-method > .flex.items-center.justify-between > span {
    white-space:nowrap;
    flex:0 0 auto;
}

.lolga-black .order-result-v3__delivery-method .bg-blue-100,
.lolga-black .order-result-v3__delivery-method .bg-gray-100 {
    background:#303030;
}

.lolga-black .order-result-v3__delivery-method .text-blue-700,
.lolga-black .order-result-v3__delivery-method .text-green-700 {
    color:#8bf179;
}

.lolga-black .order-result-v3__delivery-method .text-gray-700,
.lolga-black .order-result-v3__delivery-method .text-gray-800 {
    color:#e9e9e9;
}

.lolga-black .order-result-v3__delivery-method .text-gray-600,
.lolga-black .order-result-v3__delivery-method .text-gray-500 {
    color:#bcbcbc;
}

.lolga-black .order-result-v3__delivery-method .flex.items-start {
    min-width:0;
}

.lolga-black .order-result-v3__delivery-method span,
.lolga-black .order-result-v3__delivery-method p {
    overflow-wrap:anywhere;
}

.lolga-black .order-result-v3__success-extras #copy-blox-btn,
.lolga-black .order-result-v3__success-extras a[href*="roblox.com/users/"] {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:42px;
    background:var(--result-green);
    color:#0a1608;
    font-weight:750;
    border-radius:9px;
    text-decoration:none;
    text-align:center;
}

.lolga-black .order-result-v3__success-extras #copy-blox-btn:focus-visible,
.lolga-black .order-result-v3__success-extras a[href*="roblox.com/users/"]:focus-visible {
    outline:2px solid var(--result-green);
    outline-offset:3px;
}

.lolga-black .order-result-v3__method-richtext {
    min-width:0;
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:normal;
    font-size:13px;
    line-height:1.6;
    color:#c2c2c2;
    flex:1 1 auto;
}

.lolga-black .order-result-v3__method-richtext * {
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
}

.lolga-black .order-result-v3__method-richtext img,
.lolga-black .order-result-v3__method-richtext video,
.lolga-black .order-result-v3__method-richtext iframe {
    max-width:100%;
    height:auto;
}

.lolga-black .order-result-v3__method-richtext a {
    color:var(--result-green);
    overflow-wrap:anywhere;
}

.lolga-black .order-result-v3__recommendations {
    display:none;
    min-width:0;
    margin-top:34px;
}

.lolga-black .order-result-v3[data-payment-result="success"] .order-result-v3__recommendations {
    display:block;
}

.lolga-black .order-result-v3__recommendations p.font-bold {
    font-size:22px;
    font-weight:800;
    color:#fff;
    margin:0 0 12px;
    padding:0;
}

.lolga-black .order-result-v3__recommendations ul {
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    padding:0;
    margin:0;
    list-style:none;
}

.lolga-black .order-result-v3__recommendations li {
    max-width:100%;
    border:1px solid #454545;
    background:var(--result-secondary);
    border-radius:999px;
    padding:3px 8px 3px 3px;
}

.lolga-black .order-result-v3__recommendations li a {
    display:flex;
    align-items:center;
    gap:8px;
    color:#fff;
    min-width:0;
}

.lolga-black .order-result-v3__recommendations li img {
    flex:0 0 36px;
    width:36px;
    height:36px;
    border-radius:50%;
    -o-object-fit:contain;
       object-fit:contain;
}

.lolga-black .order-result-v3__recommendations li span {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    min-width:0;
}

@media(max-width:800px) {
    .lolga-black .order-result-v3__delivery-methods {
        grid-template-columns:minmax(0,1fr);
    }
}

@media(max-width:560px) {
    .lolga-black .order-result-v3__instructions {padding:20px 15px;margin-bottom:22px;}
    .lolga-black .order-result-v3__success-extras .order-result-v3__delivery-method {padding:18px 14px;}
    .lolga-black .order-result-v3__delivery-method > .flex.items-center.justify-between {
        flex-wrap:wrap;
    }
}

/* Existing order result breakpoint rules below */

@media(max-width:800px){
    .lolga-black .order-result-v3__details {grid-template-columns:minmax(0,1fr);}
    .lolga-black .order-result-v3__facts {grid-template-columns:repeat(2,minmax(0,1fr));}
    .lolga-black .order-result-v3__facts > div:nth-child(2) {border-right:0;}
    .lolga-black .order-result-v3__facts > div:last-child {grid-column:span 2;border-top:1px solid var(--result-border);}
    .lolga-black .order-result-v3__hero {margin-bottom:30px;}
}

@media(max-width:560px){
    .lolga-black .order-result-v3 {padding:29px 12px 60px;}
    .lolga-black .order-result-v3__hero h1 {font-size:clamp(30px,9vw,42px);}
    .lolga-black .order-result-v3__lead {font-size:14px;line-height:1.6;}
    .lolga-black .order-result-v3__facts > div {padding:14px;}
    .lolga-black .order-result-v3__facts strong {font-size:14px;}
    .lolga-black .order-result-v3__actions {gap:9px;}
    .lolga-black .order-result-v3__actions .order-result-v3__button {width:100%;}
    .lolga-black .order-result-v3__progress {
        --step-size:30px;
        padding:23px 10px;
    }
    .lolga-black .order-result-v3__step-dot {
        width:var(--step-size);
        height:var(--step-size);
        margin-bottom:9px;
    }
    .lolga-black .order-result-v3__step strong {font-size:11px;overflow-wrap:anywhere;}
    .lolga-black .order-result-v3__step small {font-size:10px;overflow-wrap:anywhere;}
    .lolga-black .order-result-v3__summary,
    .lolga-black .order-result-v3__delivery,
    .lolga-black .order-result-v3__recovery {padding:22px 17px 25px;}
    .lolga-black .order-result-v3__product {grid-template-columns:66px minmax(0,1fr);gap:12px;}
    .lolga-black .order-result-v3__product-media {width:66px;height:66px;grid-row:span 2;}
    .lolga-black .order-result-v3__product-price {grid-column:2;font-size:14px;}
}

@media(prefers-reduced-motion:reduce){
    .lolga-black .order-result-v3__spinner {animation:none;border-color:var(--result-green);}
}

/* PAY-PR-3: Track Order V3. OWNERS: /search-order, order-search Blade.
   Design reference: lolga-track-order.html. Existing payment and order logic remain frozen.
   All selectors are scoped to LOLGA's Track Order page. */

.lolga-black .track-v3 {
    --track-bg:#101010;
    --track-surface:#181818;
    --track-control:#202020;
    --track-border:#343434;
    --track-muted:#aaa;
    --track-green:#45d42f;
    --track-yellow:#f6b204;
    --track-red:#ff5a5f;
    background:var(--track-bg);
    color:#fff;
    padding:54px 20px 100px;
    min-height:65vh;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.lolga-black .track-v3__container {max-width:1180px;margin:0 auto;}

.lolga-black .track-v3__hero {text-align:center;margin:0 auto 44px;max-width:720px;}

.lolga-black .track-v3__eyebrow {
    display:inline-block;color:var(--track-green);letter-spacing:.18em;text-transform:uppercase;
    font-size:12px;font-weight:800;line-height:1.4;margin-bottom:12px;
}

.lolga-black .track-v3__hero h1 {
    color:#fff;font-size:clamp(34px,4.5vw,56px);line-height:1.15;
    font-weight:850;letter-spacing:-.045em;margin:0 0 15px;
}

.lolga-black .track-v3__hero p {font-size:16px;line-height:1.7;color:#bababa;margin:0;}

.lolga-black .track-v3__layout {
    display:grid;grid-template-columns:minmax(0,1.85fr) minmax(290px,1fr);
    gap:24px;align-items:start;
}

.lolga-black .track-v3__main {min-width:0;}

.lolga-black .track-v3__search,.lolga-black .track-v3__help {
    padding:30px 30px 32px;border:1px solid var(--track-border);
    background:var(--track-surface);border-radius:14px;
}

.lolga-black .track-v3__search h2,.lolga-black .track-v3__help h2,
.lolga-black .track-v3__result-title h2 {
    margin:0;color:#fff;font-size:23px;font-weight:800;line-height:1.3;letter-spacing:-.03em;
}

.lolga-black .track-v3__subheading {color:#aaa;font-size:14px;line-height:1.6;margin:7px 0 24px;}

.lolga-black .track-v3__form label {display:block;color:#e2e2e2;font-size:13px;font-weight:700;margin:0 0 9px;}

.lolga-black .track-v3__form-row {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;}

.lolga-black .track-v3__form input {
    min-width:0;min-height:52px;width:100%;
    border:1px solid #494949;border-radius:8px;
    background:var(--track-control);color:#fff;
    font:inherit;font-size:14px;padding:13px 16px;outline:none;box-sizing:border-box;
}

.lolga-black .track-v3__form input::-moz-placeholder {color:#929292;}

.lolga-black .track-v3__form input::placeholder {color:#929292;}

.lolga-black .track-v3__form input:focus-visible {
    border-color:#686868;box-shadow:0 0 0 2px rgba(175,175,175,.12);
}

.lolga-black .track-v3__submit,.lolga-black .track-v3__button,.lolga-black .track-v3__help-cta {
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    min-height:52px;padding:12px 22px;
    font:inherit;font-weight:800;font-size:13px;text-transform:uppercase;
    border:1px solid transparent;border-radius:8px;
    background:var(--track-green);color:#0b1409;text-decoration:none;cursor:pointer;
}

.lolga-black .track-v3__submit svg,.lolga-black .track-v3__help-cta svg {width:19px;height:19px;stroke:currentColor;stroke-width:2;stroke-linecap:round;}

.lolga-black .track-v3__submit:hover,.lolga-black .track-v3__button:hover,
.lolga-black .track-v3__help-cta:hover {filter:brightness(1.08);}

.lolga-black .track-v3__submit:focus-visible,.lolga-black .track-v3__button:focus-visible,
.lolga-black .track-v3__help-cta:focus-visible {
    outline:2px solid var(--track-green);outline-offset:3px;
}

.lolga-black .track-v3__hint {display:flex;align-items:flex-start;gap:8px;color:#919191;font-size:12px;line-height:1.6;margin:14px 0 0;}

.lolga-black .track-v3__hint svg {flex:0 0 16px;width:16px;height:16px;stroke:#8c8c8c;stroke-width:1.6;}

.lolga-black .track-v3__help {padding:30px 27px;}

.lolga-black .track-v3__help-icon {display:grid;place-items:center;width:46px;height:46px;color:var(--track-green);background:rgba(69,212,47,.1);border-radius:50%;margin-bottom:18px;}

.lolga-black .track-v3__help-icon svg {width:26px;height:26px;stroke:currentColor;stroke-width:1.7;}

.lolga-black .track-v3__help > p {font-size:14px;color:#b7b7b7;line-height:1.7;margin:12px 0 24px;}

.lolga-black .track-v3__help-list {display:grid;gap:0;margin-bottom:25px;}

.lolga-black .track-v3__help-list > div {padding:14px 0;border-top:1px solid var(--track-border);}

.lolga-black .track-v3__help-list strong {display:block;color:#fff;font-size:14px;margin-bottom:6px;}

.lolga-black .track-v3__help-list span {display:block;color:#a7a7a7;font-size:13px;line-height:1.6;}

.lolga-black .track-v3__help-cta {width:100%;text-align:center;}

.lolga-black .track-v3__result {margin-top:28px;}

.lolga-black .track-v3__result-inner {min-width:0;}

.lolga-black .track-v3__result-title {margin:0 0 15px;}

.lolga-black .track-v3__result-title .track-v3__eyebrow {font-size:10px;margin-bottom:4px;}

.lolga-black .track-v3__result-title h2 {font-size:20px;}

.lolga-black .track-v3__result-title p {font-size:13px;line-height:1.5;color:#aaa;margin:7px 0 0;}

.lolga-black .track-v3__order-card {
    background:var(--track-surface);
    border:1px solid var(--track-border);
    color:#fff;
    border-radius:14px;
    margin:0;
}

.lolga-black .track-v3__order-card .bg-slate-50,
.lolga-black .track-v3__order-card .bg-white {background:var(--track-control);}

.lolga-black .track-v3__order-card .border-slate-100,
.lolga-black .track-v3__order-card .border-slate-200 {border-color:var(--track-border);}

.lolga-black .track-v3__order-card .text-slate-900,
.lolga-black .track-v3__order-card .text-slate-700,
.lolga-black .track-v3__order-card .text-slate-600 {color:#f0f0f0;}

.lolga-black .track-v3__order-card .text-slate-500,
.lolga-black .track-v3__order-card .text-slate-400 {color:#a9a9a9;}

.lolga-black .track-v3__order-card .bg-amber-50 {background:rgba(246,178,4,.11);}

.lolga-black .track-v3__order-card .bg-blue-50 {background:rgba(69,212,47,.09);}

.lolga-black .track-v3__order-card .bg-red-50 {background:rgba(255,90,95,.10);}

.lolga-black .track-v3__order-card .bg-orange-50 {background:rgba(246,178,4,.11);}

.lolga-black .track-v3__order-card .bg-emerald-50 {background:rgba(69,212,47,.09);}

.lolga-black .track-v3__order-card .bg-slate-200 {background:#4b4b4b;}

.lolga-black .track-v3__order-card .text-amber-700,
.lolga-black .track-v3__order-card .text-orange-700 {color:#f6bc39;}

.lolga-black .track-v3__order-card .text-blue-700,
.lolga-black .track-v3__order-card .text-emerald-700 {color:#8af078;}

.lolga-black .track-v3__order-card .text-red-700 {color:#ff989b;}

.lolga-black .track-v3__order-card .border-amber-200,
.lolga-black .track-v3__order-card .border-orange-200 {border-color:rgba(246,178,4,.27);}

.lolga-black .track-v3__order-card .border-blue-200,
.lolga-black .track-v3__order-card .border-emerald-200 {border-color:rgba(69,212,47,.25);}

.lolga-black .track-v3__order-card .border-red-200 {border-color:rgba(255,90,95,.24);}

.lolga-black .track-v3__order-card .bg-blue-500 {background:var(--track-green);}

.lolga-black .track-v3__order-card .ring-blue-100,
.lolga-black .track-v3__order-card .ring-emerald-100 {--tw-ring-color:rgba(69,212,47,.15);}

.lolga-black .track-v3__order-card .ring-red-100 {--tw-ring-color:rgba(255,90,95,.16);}

.lolga-black .track-v3__order-card .ring-orange-100 {--tw-ring-color:rgba(246,178,4,.14);}

.lolga-black .track-v3__order-card .text-blue-600,
.lolga-black .track-v3__order-card .text-emerald-600 {color:var(--track-green);}

.lolga-black .track-v3__order-card .text-red-600 {color:#ff777b;}

.lolga-black .track-v3__order-card .text-orange-600 {color:#ffc04b;}

.lolga-black .track-v3__order-heading .font-mono {overflow-wrap:anywhere;}

.lolga-black .track-v3__order-card img {-o-object-fit:contain;object-fit:contain;max-height:100%;max-width:100%;}

.lolga-black .track-v3__order-card .hover\:border-blue-200:hover {border-color:rgba(69,212,47,.4);}

.lolga-black .track-v3__order-card .hover\:bg-\[\#202020\]\/30:hover {background:#252525;}

.lolga-black .track-v3__order-card button.bg-indigo-600 {
    background:var(--track-green);color:#081207;
    border-radius:8px;
}

.lolga-black .track-v3__order-card a.border-indigo-400 {border-color:var(--track-border);color:#fff;}

.lolga-black .track-v3__limited {
    display:flex;align-items:flex-start;gap:13px;padding:20px 22px;
    border-bottom:1px solid var(--track-border);background:rgba(69,212,47,.035);
}

.lolga-black .track-v3__limited svg {width:21px;height:21px;flex:0 0 21px;stroke:var(--track-green);stroke-width:1.8;}

.lolga-black .track-v3__limited strong {color:#fff;font-size:14px;}

.lolga-black .track-v3__limited p {color:#aaa;line-height:1.6;font-size:13px;margin:5px 0 0;}

/* Search-order timeline: track and fill share the same four node centers. */

.lolga-black .track-v3__timeline {min-width:0;overflow-x:hidden;}

.lolga-black .track-v3__timeline-track-wrap {min-width:0;}

.lolga-black .track-v3__timeline-base,
.lolga-black .track-v3__timeline-fill {
    position:absolute;
    top:13px;
    left:12.5%;
    height:2px;
    border-radius:999px;
}

.lolga-black .track-v3__timeline-base {width:75%;background:#454545;}

.lolga-black .track-v3__timeline-fill {width:calc(75% * var(--track-progress, 0));background:var(--track-green);}

.lolga-black .track-v3__timeline-fill.bg-red-400 {background:#f87171;}

.lolga-black .track-v3__timeline-fill.bg-orange-400 {background:#fb923c;}

.lolga-black .track-v3__timeline-steps {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;min-width:0;}

.lolga-black .track-v3__timeline-steps > div {width:auto;min-width:0;}

.lolga-black .track-v3__timeline-steps span {max-width:100%;line-height:1.35;overflow-wrap:anywhere;}

.lolga-black .track-v3__timeline .bg-blue-500,
.lolga-black .track-v3__timeline .bg-emerald-500 {background-color:var(--track-green);}

.lolga-black .track-v3__timeline .ring-blue-100,
.lolga-black .track-v3__timeline .ring-emerald-100 {--tw-ring-color:rgba(69,212,47,.17);}

.lolga-black .track-v3__timeline .text-blue-600,
.lolga-black .track-v3__timeline .text-emerald-600 {color:var(--track-green);}

@media(max-width:560px) {
    .lolga-black .track-v3__timeline {padding-inline:12px;}
    .lolga-black .track-v3__timeline > .px-6 {padding-inline:0;}
    .lolga-black .track-v3__timeline-steps span {font-size:10px;}
}

.lolga-black .track-v3__not-found,.lolga-black .track-v3__empty {
    text-align:center;border:1px solid var(--track-border);
    background:var(--track-surface);padding:36px 28px;border-radius:14px;
}

.lolga-black .track-v3__not-found-icon,.lolga-black .track-v3__empty > svg {
    display:grid;place-items:center;width:56px;height:56px;
    border-radius:50%;margin:0 auto 18px;
    color:var(--track-red);background:rgba(255,90,95,.09);
}

.lolga-black .track-v3__not-found-icon svg {width:29px;height:29px;stroke:currentColor;stroke-width:2;}

.lolga-black .track-v3__empty > svg {padding:14px;box-sizing:border-box;color:var(--track-green);background:rgba(69,212,47,.09);stroke:currentColor;stroke-width:1.8;}

.lolga-black .track-v3__not-found h2,.lolga-black .track-v3__empty h2 {
    color:#fff;font-size:22px;letter-spacing:-.02em;font-weight:800;margin:0 0 10px;
}

.lolga-black .track-v3__not-found p,.lolga-black .track-v3__empty p {
    color:#b2b2b2;font-size:14px;line-height:1.7;margin:0 auto;max-width:465px;
}

.lolga-black .track-v3__not-found-actions {display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px;}

.lolga-black .track-v3__button--muted {color:#fff;background:var(--track-control);border-color:var(--track-border);}

@media(max-width:980px) {
    .lolga-black .track-v3__layout {grid-template-columns:minmax(0,1fr);}
    .lolga-black .track-v3__help {margin-top:0;}
    .lolga-black .track-v3__help-list {grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;}
    .lolga-black .track-v3__help-list > div {border-top:0;border-left:1px solid var(--track-border);padding:0 0 0 15px;}
    .lolga-black .track-v3__help-list > div:first-child {border-left:0;padding-left:0;}
}

@media(max-width:600px) {
    .lolga-black .track-v3 {padding:33px 12px 66px;}
    .lolga-black .track-v3__hero {margin-bottom:30px;}
    .lolga-black .track-v3__hero p {font-size:14px;}
    .lolga-black .track-v3__search,.lolga-black .track-v3__help {padding:24px 18px;}
    .lolga-black .track-v3__form-row {grid-template-columns:minmax(0,1fr);}
    .lolga-black .track-v3__form-row .track-v3__submit {width:100%;}
    .lolga-black .track-v3__help-list {grid-template-columns:1fr;gap:0;}
    .lolga-black .track-v3__help-list > div,.lolga-black .track-v3__help-list > div:first-child {border-left:0;border-top:1px solid var(--track-border);padding:14px 0;}
    .lolga-black .track-v3__order-heading {padding:18px 15px;}
    .lolga-black .track-v3__order-card .grid-cols-2 {grid-template-columns:repeat(2,minmax(0,1fr));}
    .lolga-black .track-v3__order-card .px-6 {padding-left:15px;padding-right:15px;}
    .lolga-black .track-v3__order-card .px-6.py-6 {padding-top:20px;padding-bottom:20px;}
    .lolga-black .track-v3__order-card .flex.items-center.justify-between {flex-wrap:wrap;gap:10px;}
    .lolga-black .track-v3__order-card .text-2xl {font-size:20px;}
    .lolga-black .track-v3__not-found,.lolga-black .track-v3__empty {padding:30px 16px;}
    .lolga-black .track-v3__not-found-actions > * {width:100%;}
}

@media(prefers-reduced-motion:reduce) {
    .lolga-black .track-v3__order-card .animate-pulse {animation:none;}
}

/* V9 Single Page + Help Center.
 * PURPOSE: News-consistent dark reading UI with CMS styles/content intact.
 * OWNS: .lolga-single-page, .lolga-single-richtext (not News/PDP/Checkout).
 * MUST NOT: remove CMS elements, data/aria/hidden state, interactions, routes.
 * RELATED DOC: docs/standards/css-page-ownership.md */

.lolga-black .lolga-single-page{color:#bbb;padding:24px 0 56px;}

.lolga-black .lolga-single-page.container,.lolga-black .lolga-single-page>.container{width:100%;max-width:1440px;margin:0 auto;padding-left:16px;padding-right:16px;min-width:0;}

/* Single Page/Help breadcrumbs: the same ordered items drive visible DOM + JSON-LD.
 * Follow News V10 hierarchy; keep CSS restricted to Single Page. */

.lolga-black .lolga-single-page__breadcrumbs {
    margin: 0 0 14px;
    color: #999;
    font-size: 13px;
    line-height: 1.5;
    overflow-x: auto;
    scrollbar-width: none;
}

.lolga-black .lolga-single-page__breadcrumbs::-webkit-scrollbar {display:none;}

.lolga-black .lolga-single-page__breadcrumbs ol {
    display:flex;flex-wrap:wrap;align-items:center;gap:8px;
    list-style:none;margin:0;padding:0;
}

.lolga-black .lolga-single-page__breadcrumbs li {
    display:inline-flex;min-width:0;max-width:100%;align-items:center;
    gap:8px;list-style:none;padding:0;margin:0;
}

.lolga-black .lolga-single-page__breadcrumbs a {color:#a3a3a3;text-decoration:none;}

.lolga-black .lolga-single-page__breadcrumbs a:is(:hover,:focus-visible) {color:#45d42f;}

.lolga-black .lolga-single-page__breadcrumbs [aria-current="page"] {color:#d1d1d1;overflow-wrap:anywhere;}

.lolga-black .lolga-single-page__crumb-separator {color:#777;}

@media(max-width:699px) {.lolga-black .lolga-single-page__breadcrumbs {margin-bottom:12px;}}

.lolga-black .lolga-single-page__hero{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 22px;min-width:0;}

.lolga-black .lolga-single-page__hero-copy{min-width:0;flex:1;}

.lolga-black .lolga-single-page__hero h1,.lolga-black .lolga-help-index .lolga-single-page__hero h2,.lolga-black .lolga-single-page__eyebrow{margin:0;color:#fff;font-size:clamp(25px,3vw,36px);font-weight:750;line-height:1.25;letter-spacing:-.025em;overflow-wrap:anywhere;}

.lolga-black .lolga-single-page__layout{display:grid;grid-template-columns:240px minmax(0,1fr);align-items:start;gap:24px;min-width:0;}

.lolga-black .lolga-single-page__layout>*,.lolga-black .lolga-single-page__content{min-width:0;max-width:100%;}

.lolga-black .lolga-single-page__layout>.lolga-side-nav{position:static;transform:none;width:100%;min-width:0;background:#181818;border-radius:12px;overflow:hidden;}

.lolga-black .lolga-single-page .lolga-side-nav-list{padding:6px 0;background:transparent;border-radius:0;}

.lolga-black .lolga-single-page .lolga-side-nav-list li+li{border-top:1px solid #303030;}

.lolga-black .lolga-single-page .lolga-side-nav-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:12px 15px;color:#ccc;font-size:14px;line-height:1.45;text-decoration:none;overflow-wrap:anywhere;}

.lolga-black .lolga-single-page .lolga-side-nav-list a b{min-width:0;font-weight:550;}

.lolga-black .lolga-single-page .lolga-side-nav-list a svg{flex:none;width:15px;height:15px;transform:rotate(-90deg);}

.lolga-black .lolga-single-page .lolga-side-nav-list a:is(:hover,:focus-visible,.is-on){background:#252525;color:#45d42f;}

.lolga-black .lolga-single-page__content{background:#1b1b1b;border-radius:12px;padding:24px 28px 28px;overflow-wrap:anywhere;}

.lolga-black .lolga-single-richtext{color:#d1d1d1;font-size:15px;line-height:1.75;min-width:0;overflow-wrap:anywhere;}

:where(.lolga-black .lolga-single-richtext) :is(h1,h2,h3,h4,h5,h6){color:#fff;line-height:1.35;font-weight:700;overflow-wrap:anywhere;}

:where(.lolga-black .lolga-single-richtext) h1{font-size:clamp(22px,2.5vw,30px);margin:0 0 16px;}

:where(.lolga-black .lolga-single-richtext) h2{font-size:clamp(19px,2vw,25px);margin:28px 0 12px;}

:where(.lolga-black .lolga-single-richtext) h3{font-size:18px;margin:22px 0 10px;}

:where(.lolga-black .lolga-single-richtext) :is(h4,h5,h6){margin:18px 0 8px;}

:where(.lolga-black .lolga-single-richtext) :is(p,ul,ol,dl,blockquote,figure,pre,table){margin-top:0;margin-bottom:15px;}

:where(.lolga-black .lolga-single-richtext) :is(ul,ol){padding-left:24px;}

:where(.lolga-black .lolga-single-richtext) ul{list-style:disc;}

:where(.lolga-black .lolga-single-richtext) ol{list-style:decimal;}

:where(.lolga-black .lolga-single-richtext) li{margin-bottom:6px;}

:where(.lolga-black .lolga-single-richtext) li>:is(ul,ol){margin-top:6px;}

:where(.lolga-black .lolga-single-richtext) a{color:#45d42f;overflow-wrap:anywhere;}

:where(.lolga-black .lolga-single-richtext) a:hover{color:#55ef3f;}

:where(.lolga-black .lolga-single-richtext) :is(img,video,iframe,svg){max-width:100%;}

:where(.lolga-black .lolga-single-richtext) img{height:auto;}

:where(.lolga-black .lolga-single-richtext) :is(iframe,video){display:block;}

:where(.lolga-black .lolga-single-richtext) table{max-width:100%;border-collapse:collapse;}

:where(.lolga-black .lolga-single-richtext) :is(th,td){border:1px solid #363636;padding:9px 12px;text-align:left;}

:where(.lolga-black .lolga-single-richtext) th{color:#fff;background:#252525;}

:where(.lolga-black .lolga-single-richtext) hr{border:0;border-top:1px solid #353535;margin:22px 0;}

:where(.lolga-black .lolga-single-richtext) blockquote{border-left:3px solid #45d42f;padding:6px 0 6px 16px;color:#ccc;}

/* News-dark-style fallback for literal legacy white/black, not a wholesale CMS color reset. */

.lolga-black .lolga-single-richtext :is(div,section,article,p,span,li,td)[style*="background: #fff"],
.lolga-black .lolga-single-richtext :is(div,section,article,p,span,li,td)[style*="background:#fff"],
.lolga-black .lolga-single-richtext :is(div,section,article,p,span,li,td)[style*="background-color: #fff"],
.lolga-black .lolga-single-richtext :is(div,section,article,p,span,li,td)[style*="background-color: rgb(255, 255, 255)"]{background-color:#252525!important;}

.lolga-black .lolga-single-richtext [style*="color: #000"],
.lolga-black .lolga-single-richtext [style*="color:#000"],
.lolga-black .lolga-single-richtext [style*="color: rgb(0, 0, 0)"]{color:#dedede!important;}

.lolga-black .lolga-single-richtext a[style*="color: #000"],.lolga-black .lolga-single-richtext a[style*="color:#000"]{color:#45d42f!important;}

/* Native or CMS FAQ accordion: never force answer display/open state. */

.lolga-black [data-single-faq] .lolga-single-richtext :is(details>summary,.faq-q,.faq-question,.faq-title,.accordion-button,.accordion-header,[data-accordion-trigger]){display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:54px;color:#eee;font-size:17px;font-weight:650;line-height:1.45;cursor:pointer;}

.lolga-black [data-single-faq] .lolga-single-richtext details{border-bottom:1px solid #343434;}

.lolga-black [data-single-faq] .lolga-single-richtext details>summary{list-style:none;}

.lolga-black [data-single-faq] .lolga-single-richtext details>summary::-webkit-details-marker{display:none;}

.lolga-black [data-single-faq] .lolga-single-richtext :is(.faq-a,.faq-answer,.accordion-body,[data-accordion-content]){color:#ccc;font-size:15px;line-height:1.75;}

.lolga-black [data-single-faq] .lolga-single-richtext [hidden]{display:none!important;}

/* Ensure visible arrows on native details and on text-only FAQ accordion triggers. */

.lolga-black [data-single-faq] .lolga-single-richtext :is(details>summary,.faq-q,.faq-question,.accordion-button,[data-accordion-trigger]):not(:has(svg))::after {
    content:"";display:block;flex:none;width:9px;height:9px;
    margin-right:4px;border-right:2px solid #999;border-bottom:2px solid #999;
    transform:rotate(45deg);transition:transform .15s ease;
}

.lolga-black [data-single-faq] .lolga-single-richtext :is(details[open]>summary,.faq-q[aria-expanded="true"],.faq-question[aria-expanded="true"],.accordion-button[aria-expanded="true"],[data-accordion-trigger][aria-expanded="true"]):not(:has(svg))::after {transform:rotate(225deg);}

.lolga-black .lolga-single-page__nav-toggle:focus-visible,
.lolga-black .lolga-single-page .lolga-side-nav-list a:focus-visible {outline:2px solid #45d42f;outline-offset:2px;}

.lolga-black .lolga-help-list-shell {background:#101010;}

.lolga-black .lolga-help-index>section {padding-top:0;padding-bottom:0;}

.lolga-black .lolga-single-feature{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 0 20px;margin:0 0 20px;border-bottom:1px solid #323232;}

.lolga-black .lolga-single-feature__copy{min-width:0;}

.lolga-black .lolga-single-feature__copy h1{margin:0 0 10px;}

.lolga-black .lolga-single-feature__copy p{margin:0;}

.lolga-black .lolga-single-feature__community{display:flex;flex:0 0 130px;align-items:center;flex-direction:column;gap:8px;text-align:center;font-size:13px;text-decoration:none;}

.lolga-black .lolga-single-feature__community img{max-width:100%;height:auto;-o-object-fit:contain;object-fit:contain;}

.lolga-black .lolga-single-feature__body{min-width:0;}

.lolga-black .lolga-help-index__list .help{border-bottom:1px solid #333;padding:0;}

.lolga-black .lolga-help-index__list .help:last-child{border-bottom:0;}

.lolga-black .lolga-help-index__list .help_title{display:flex;min-height:70px;gap:14px;align-items:center;text-decoration:none;padding:12px 4px;}

.lolga-black .lolga-help-index__list .help_title p{margin:0;color:#eee;}

.lolga-black .lolga-help-index__list .help_title:hover p{color:#45d42f;}

.lolga-black .lolga-help-index__list .help_title img{width:40px;height:40px;-o-object-fit:contain;object-fit:contain;}

.lolga-black .lolga-single-page__nav-toggle{display:none;}

@media(max-width:1023px){
.lolga-black .lolga-single-page__layout{grid-template-columns:minmax(0,1fr);gap:16px;}
.lolga-black .lolga-single-page__nav-toggle{display:flex;align-items:center;justify-content:center;gap:8px;flex:none;min-height:44px;padding:0 10px;border-radius:8px;border:1px solid #373737;background:#252525;color:#eee;font-size:13px;cursor:pointer;}
.lolga-black .lolga-single-page__layout>.lolga-side-nav:not([data-open="true"]){display:none!important;}
.lolga-black .lolga-single-page__layout>.lolga-side-nav[data-open="true"]{display:block!important;}
}

@media(max-width:699px){
.lolga-black .lolga-single-page{padding:16px 0 40px;}
.lolga-black .lolga-single-page__hero{margin-bottom:14px;}
.lolga-black .lolga-single-page__hero h1{font-size:25px;}
.lolga-black .lolga-single-page__content{padding:18px 16px 22px;}
.lolga-black .lolga-single-richtext{font-size:14px;line-height:1.7;}
.lolga-black [data-single-faq] .lolga-single-richtext :is(details>summary,.faq-q,.faq-question,.faq-title,.accordion-button,.accordion-header,[data-accordion-trigger]){font-size:15px;}
.lolga-black .lolga-single-feature{flex-wrap:wrap;gap:12px;}
.lolga-black .lolga-single-feature__community{flex-basis:auto;flex-direction:row;}
.lolga-black .lolga-single-feature__community img{width:64px;}
}

/* Single Page FAQ: historical CMS UL/LI pairs become native <details>/<summary>.
 * Only the outer FAQ list is reset; nested answer UL/OL retain bullets/steps.
 * JS lives with the trusted FAQ Blade route, never inside the CMS HTML. */

.lolga-black [data-single-faq] .lolga-single-richtext .lolga-single-faq__list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0;
}

.lolga-black [data-single-faq] .lolga-single-faq__list > .lolga-single-faq__item {
    display: block;
    list-style: none !important;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #343434;
}

.lolga-black [data-single-faq] .lolga-single-faq__item::marker {content: "";}

.lolga-black [data-single-faq] .lolga-single-faq__item > .lolga-single-faq__details {
    display: block;
    width: 100%;
    min-width: 0;
    border: 0;
}

.lolga-black [data-single-faq] .lolga-single-richtext .lolga-single-faq__details > .lolga-single-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 70px;
    padding: 16px 0;
    font-size: clamp(15px, 1.5vw, 19px);
    line-height: 1.5;
    font-weight: 650;
    color: #e6e6e6;
    cursor: pointer;
    list-style: none;
    overflow-wrap: anywhere;
}

.lolga-black [data-single-faq] .lolga-single-faq__question::-webkit-details-marker {display: none;}

.lolga-black [data-single-faq] .lolga-single-faq__question::after {
    content: "";
    display: block;
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    margin: 0 4px 4px 0;
    border-right: 2px solid #aaa;
    border-bottom: 2px solid #aaa;
    transform: rotate(45deg);
    transition: transform 150ms ease;
}

.lolga-black [data-single-faq] .lolga-single-faq__details[open] > .lolga-single-faq__question::after {
    transform: rotate(225deg);
    margin-bottom: 0;
}

.lolga-black [data-single-faq] .lolga-single-faq__question:hover,
.lolga-black [data-single-faq] .lolga-single-faq__question:focus-visible {
    color: #fff;
}

.lolga-black [data-single-faq] .lolga-single-faq__question:focus-visible {
    outline: 2px solid #45d42f;
    outline-offset: -2px;
    border-radius: 4px;
}

.lolga-black [data-single-faq] .lolga-single-faq__answer {
    min-width: 0;
    padding: 0 0 22px;
    color: #d1d1d1;
    font-size: 15px;
    line-height: 1.75;
}

.lolga-black [data-single-faq] .lolga-single-faq__answer > :is(.faq-content, .faq-answer, .faq-a, .accordion-content, .accordion-body, [x-show]) {
    display: revert !important;
}

@media(max-width:699px) {
    .lolga-black [data-single-faq] .lolga-single-richtext .lolga-single-faq__details > .lolga-single-faq__question {
        min-height: 58px;
        padding: 12px 0;
    }
    .lolga-black [data-single-faq] .lolga-single-faq__answer {font-size: 14px;}
}

/* Member Sell Orders — scoped status tabs and order detail cards.
 * Do not change general member orders or product listing tables. */

.lolga-black .member-sell-orders .sell-orders-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0;margin:16px 0}

.lolga-black .member-sell-orders .sell-orders-tabs .lolga-tab{padding:0;margin:0;list-style:none;background:transparent;color:#bcbcbc;border:0}

.lolga-black .member-sell-orders .sell-orders-tabs .lolga-tab a{display:block;padding:9px 13px;background:#222;border:1px solid #303030;border-radius:7px;color:#aaa;text-decoration:none;font-size:12px;font-weight:650}

.lolga-black .member-sell-orders .sell-orders-tabs .lolga-tab a:hover{background:#292929;color:#fff}

.lolga-black .member-sell-orders .sell-orders-tabs .lolga-tab.is-on a{background:#142513;color:#5cff4f;border-color:#45d42f}

.lolga-black .member-sell-orders .sell-orders-table-head,
.lolga-black .member-sell-orders .sell-order-summary{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr 1fr;gap:14px;list-style:none;margin:0;padding:13px 16px}

.lolga-black .member-sell-orders .sell-orders-table-head{background:#202020;border-radius:9px;color:#aaa;font-size:12px}

.lolga-black .member-sell-orders .sell-order-card{background:#181818;border:1px solid #292929;border-radius:10px;padding:16px;margin:12px 0}

.lolga-black .member-sell-orders .sell-order-card .lolga-panel-hd{padding:0 0 14px;border-bottom:1px solid #303030}

.lolga-black .member-sell-orders .sell-order-detail-toggle{display:inline-flex;align-items:center;gap:8px;flex:none;border:0;background:transparent;color:#ddd;font:inherit;cursor:pointer}

.lolga-black .member-sell-orders .sell-order-detail-toggle svg{transition:transform .18s}

.lolga-black .member-sell-orders .sell-order-detail-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

.lolga-black .member-sell-orders .sell-order-summary{padding:16px 0;color:#ccc}

.lolga-black .member-sell-orders .sell-order-summary li{min-width:0;overflow-wrap:anywhere;font-size:12px}

.lolga-black .member-sell-orders .sell-order-summary b{font-weight:650;color:#ddd}

.lolga-black .member-sell-orders .sell-order-details{padding-top:14px;border-top:1px solid #303030}

.lolga-black .member-sell-orders .sell-order-details[hidden]{display:none}

.lolga-black .member-sell-orders .sell-order-good{display:grid;grid-template-columns:minmax(0,1fr) minmax(85px,.2fr) minmax(130px,.3fr);align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid #292929}

.lolga-black .member-sell-orders .sell-order-good:last-child{border-bottom:0}

.lolga-black .member-sell-orders .sell-order-good-main{display:flex;align-items:center;gap:18px;min-width:0}

.lolga-black .member-sell-orders .sell-order-good-main img{flex:0 0 92px;width:92px;height:92px;-o-object-fit:contain;object-fit:contain}

.lolga-black .member-sell-orders .sell-order-good-text{display:flex;flex-direction:column;gap:7px;min-width:0;color:#aaa;font-size:12px}

.lolga-black .member-sell-orders .sell-order-good-text strong{color:#eee;font-size:14px;overflow-wrap:anywhere}

.lolga-black .member-sell-orders .sell-order-good-value{display:flex;flex-direction:column;gap:6px;align-items:flex-start;overflow-wrap:anywhere}

.lolga-black .member-sell-orders .sell-order-good-value small{color:#888;font-size:11px}

.lolga-black .member-sell-orders .sell-order-good-value strong{color:#eee;font-size:13px}

@media(max-width:850px){.lolga-black .member-sell-orders .sell-orders-table-head{display:none}.lolga-black .member-sell-orders .sell-order-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.lolga-black .member-sell-orders .sell-order-good{grid-template-columns:1fr 1fr}.lolga-black .member-sell-orders .sell-order-good-main{grid-column:1/-1}}

@media(max-width:480px){.lolga-black .member-sell-orders .sell-order-card{padding:12px}.lolga-black .member-sell-orders .sell-order-card .lolga-panel-hd{align-items:flex-start;flex-wrap:wrap}.lolga-black .member-sell-orders .sell-order-good-main img{flex-basis:76px;width:76px;height:76px}}

/* V11 shared information pages: flat sidebar, subtle separator, open article.
 * Applies to CMS single pages and the Help index only; preserves richtext HTML. */

@media(min-width:700px){
 .lolga-black .lolga-single-page__layout{grid-template-columns:220px minmax(0,1fr);gap:46px}
 .lolga-black .lolga-single-page__layout>.lolga-side-nav{background:transparent;border-radius:0;overflow:visible;border-right:1px solid #393939;padding-right:22px}
}

.lolga-black .lolga-single-page .lolga-side-nav-list{background:transparent;padding:0;border-radius:0}

.lolga-black .lolga-single-page .lolga-side-nav-list li+li{border:0}

.lolga-black .lolga-single-page .lolga-side-nav-list a{background:transparent;min-height:36px;padding:8px 0;border-radius:0;color:#d0d0d0;font-size:13px;line-height:1.35}

.lolga-black .lolga-single-page .lolga-side-nav-list a svg{display:none}

.lolga-black .lolga-single-page .lolga-side-nav-list a:is(:hover,:focus-visible,.is-on){background:transparent;color:#45d42f}

.lolga-black .lolga-single-page .lolga-side-nav-list a.is-on{position:relative}

.lolga-black .lolga-single-page .lolga-side-nav-list a.is-on::after{content:"";position:absolute;right:-23px;top:6px;bottom:6px;width:2px;background:#45d42f}

.lolga-black .lolga-single-page__content{background:transparent;border-radius:0;padding:0;overflow-wrap:anywhere}

.lolga-black .lolga-single-page__heading h1{font-size:clamp(25px,2.4vw,32px);font-weight:750;line-height:1.25;letter-spacing:-.025em;color:#fff;margin:0 0 18px}

.lolga-black .lolga-single-page__content .lolga-single-page__breadcrumbs{margin:0 0 18px;font-size:12px}

.lolga-black .lolga-single-page__content .lolga-single-richtext{max-width:none}

.lolga-black .lolga-single-page__hero{margin:0}

@media(max-width:699px){
 .lolga-black .lolga-single-page__layout{gap:18px}
 .lolga-black .lolga-single-page__layout>.lolga-side-nav{border:1px solid #333;border-radius:8px;padding:12px;background:#191919}
 .lolga-black .lolga-single-page .lolga-side-nav-list a.is-on::after{display:none}
 .lolga-black .lolga-single-page__heading h1{font-size:25px}
}

/* Shared mobile single-page navigation: one full-width dropdown row. */

@media(max-width:699px){
 .lolga-black .lolga-single-page__hero{width:100%;margin:0 0 14px}
 .lolga-black .lolga-single-page__nav-toggle{
  display:flex;width:100%;min-height:46px;justify-content:space-between;align-items:center;
  padding:0 14px;border-radius:9px;background:#252525;border:1px solid #383838;
  color:#eee;font-size:14px;font-weight:600;
 }
 .lolga-black .lolga-single-page__nav-toggle::after{
  content:"";display:block;flex:none;width:9px;height:9px;margin:0 3px 4px 12px;
  border-right:2px solid #aaa;border-bottom:2px solid #aaa;transform:rotate(45deg);
  transition:transform .15s ease;
 }
 .lolga-black .lolga-single-page__nav-toggle[aria-expanded="true"]::after{transform:rotate(225deg);margin-top:6px;margin-bottom:0}
}

/* Shared information pages: keep the sidebar in view while reading long content.
 * Bound the sticky menu by its own column and keep mobile Page List unchanged. */

@media (min-width:700px){
 .lolga-black .lolga-single-page__layout>.lolga-side-nav{
  position:sticky;top:96px;align-self:start;max-height:calc(100vh - 112px);

 }
}

.last\:border-b-0:last-child {
    border-bottom-width: 0px;
}

.hover\:rounded-t-lg:hover {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.hover\:border-blue-200:hover {
    --tw-border-opacity: 1;
    border-color: rgb(191 219 254 / var(--tw-border-opacity));
}

.hover\:border-green-500:hover {
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity));
}

.hover\:border-green-700:hover {
    --tw-border-opacity: 1;
    border-color: rgb(21 128 61 / var(--tw-border-opacity));
}

.hover\:border-green-800:hover {
    --tw-border-opacity: 1;
    border-color: rgb(22 101 52 / var(--tw-border-opacity));
}

.hover\:border-orange-500:hover {
    --tw-border-opacity: 1;
    border-color: rgb(249 115 22 / var(--tw-border-opacity));
}

.hover\:border-orange-700:hover {
    --tw-border-opacity: 1;
    border-color: rgb(194 65 12 / var(--tw-border-opacity));
}

.hover\:bg-\[\#202020\]\/30:hover {
    background-color: rgb(32 32 32 / 0.3);
}

.hover\:bg-\[\#45d42f\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(69 212 47 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#55ef3f\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(85 239 63 / var(--tw-bg-opacity));
}

.hover\:bg-blue-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(96 165 250 / var(--tw-bg-opacity));
}

.hover\:bg-blue-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

.hover\:bg-blue-600\/80:hover {
    background-color: rgb(37 99 235 / 0.8);
}

.hover\:bg-gray-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.hover\:bg-gray-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

.hover\:bg-gray-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.hover\:bg-gray-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}

.hover\:bg-green-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity));
}

.hover\:bg-green-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(22 163 74 / var(--tw-bg-opacity));
}

.hover\:bg-green-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(21 128 61 / var(--tw-bg-opacity));
}

.hover\:bg-green-800:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(22 101 52 / var(--tw-bg-opacity));
}

.hover\:bg-indigo-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(67 56 202 / var(--tw-bg-opacity));
}

.hover\:bg-lgreen:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(193 255 0 / var(--tw-bg-opacity));
}

.hover\:bg-neutral-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(115 115 115 / var(--tw-bg-opacity));
}

.hover\:bg-neutral-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(64 64 64 / var(--tw-bg-opacity));
}

.hover\:bg-neutral-900:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(23 23 23 / var(--tw-bg-opacity));
}

.hover\:bg-orange-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 115 22 / var(--tw-bg-opacity));
}

.hover\:bg-orange-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(234 88 12 / var(--tw-bg-opacity));
}

.hover\:bg-red-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(185 28 28 / var(--tw-bg-opacity));
}

.hover\:bg-white:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.hover\:bg-gradient-to-l:hover {
    background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

.hover\:bg-gradient-to-r:hover {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.hover\:bg-gradient-to-t:hover {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.hover\:from-\[\#45d42f\]:hover {
    --tw-gradient-from: #45d42f var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(69 212 47 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-green-400:hover {
    --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-green-600:hover {
    --tw-gradient-from: #16a34a var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:to-\[\#45d42f\]:hover {
    --tw-gradient-to: #45d42f var(--tw-gradient-to-position);
}

.hover\:to-blue-500:hover {
    --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
}

.hover\:to-lime-500:hover {
    --tw-gradient-to: #84cc16 var(--tw-gradient-to-position);
}

.hover\:\!text-white:hover {
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

.hover\:text-black:hover {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
}

.hover\:text-blue-300:hover {
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity));
}

.hover\:text-blue-600:hover {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity));
}

.hover\:text-gray-400:hover {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity));
}

.hover\:text-gray-500:hover {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity));
}

.hover\:text-gray-600:hover {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity));
}

.hover\:text-green-500:hover {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity));
}

.hover\:text-green-600:hover {
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity));
}

.hover\:text-neutral-200:hover {
    --tw-text-opacity: 1;
    color: rgb(229 229 229 / var(--tw-text-opacity));
}

.hover\:text-orange-600:hover {
    --tw-text-opacity: 1;
    color: rgb(234 88 12 / var(--tw-text-opacity));
}

.hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.hover\:opacity-100:hover {
    opacity: 1;
}

.hover\:shadow-2xl:hover {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:z-10:focus {
    z-index: 10;
}

.focus\:border-blue-300:focus {
    --tw-border-opacity: 1;
    border-color: rgb(147 197 253 / var(--tw-border-opacity));
}

.focus\:border-green-500:focus {
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity));
}

.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.focus\:ring:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-green-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity));
}

.active\:scale-95:active {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:bg-gray-100:active {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.active\:text-gray-500:active {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity));
}

.active\:text-gray-700:active {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity));
}

.group:hover .group-hover\:scale-125 {
    --tw-scale-x: 1.25;
    --tw-scale-y: 1.25;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:\!text-white {
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

.group:hover .group-hover\:text-indigo-400 {
    --tw-text-opacity: 1;
    color: rgb(129 140 248 / var(--tw-text-opacity));
}

@media (prefers-color-scheme: dark) {

    .dark\:bg-gray-900 {
        --tw-bg-opacity: 1;
        background-color: rgb(17 24 39 / var(--tw-bg-opacity));
    }
}

@media (min-width: 640px) {

    .sm\:right-14 {
        right: 3.5rem;
    }

    .sm\:col-span-3 {
        grid-column: span 3 / span 3;
    }

    .sm\:mx-6 {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }

    .sm\:mb-1 {
        margin-bottom: 0.25rem;
    }

    .sm\:ml-6 {
        margin-left: 1.5rem;
    }

    .sm\:mt-0 {
        margin-top: 0px;
    }

    .sm\:mt-10 {
        margin-top: 2.5rem;
    }

    .sm\:mt-8 {
        margin-top: 2rem;
    }

    .sm\:block {
        display: block;
    }

    .sm\:flex {
        display: flex;
    }

    .sm\:hidden {
        display: none;
    }

    .sm\:w-1\/3 {
        width: 33.333333%;
    }

    .sm\:w-2\/3 {
        width: 66.666667%;
    }

    .sm\:w-20 {
        width: 5rem;
    }

    .sm\:w-full {
        width: 100%;
    }

    .sm\:max-w-md {
        max-width: 28rem;
    }

    .sm\:flex-1 {
        flex: 1 1 0%;
    }

    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sm\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sm\:grid-cols-8 {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .sm\:flex-row {
        flex-direction: row;
    }

    .sm\:flex-wrap {
        flex-wrap: wrap;
    }

    .sm\:items-center {
        align-items: center;
    }

    .sm\:justify-start {
        justify-content: flex-start;
    }

    .sm\:justify-between {
        justify-content: space-between;
    }

    .sm\:space-x-1 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(0.25rem * var(--tw-space-x-reverse));
        margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
    }

    .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
    }

    .sm\:space-y-2 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
    }

    .sm\:p-6 {
        padding: 1.5rem;
    }

    .sm\:px-1 {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .sm\:px-24 {
        padding-left: 6rem;
        padding-right: 6rem;
    }

    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .sm\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .sm\:py-1 {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .sm\:py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .sm\:pb-8 {
        padding-bottom: 2rem;
    }

    .sm\:pl-1 {
        padding-left: 0.25rem;
    }

    .sm\:pl-5 {
        padding-left: 1.25rem;
    }

    .sm\:pl-6 {
        padding-left: 1.5rem;
    }

    .sm\:pr-5 {
        padding-right: 1.25rem;
    }

    .sm\:pt-0 {
        padding-top: 0px;
    }

    .sm\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }

    .sm\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .sm\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .sm\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}

@media (min-width: 768px) {

    .md\:visible {
        visibility: visible;
    }

    .md\:col-span-2 {
        grid-column: span 2 / span 2;
    }

    .md\:col-span-4 {
        grid-column: span 4 / span 4;
    }

    .md\:my-6 {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .md\:ml-4 {
        margin-left: 1rem;
    }

    .md\:mt-0 {
        margin-top: 0px;
    }

    .md\:mt-6 {
        margin-top: 1.5rem;
    }

    .md\:flex {
        display: flex;
    }

    .md\:min-h-screen {
        min-height: 100vh;
    }

    .md\:w-1\/2 {
        width: 50%;
    }

    .md\:w-1\/3 {
        width: 33.333333%;
    }

    .md\:w-1\/4 {
        width: 25%;
    }

    .md\:w-2\/3 {
        width: 66.666667%;
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .md\:grid-cols-8 {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .md\:gap-6 {
        gap: 1.5rem;
    }

    .md\:rounded-lg {
        border-radius: 0.5rem;
    }

    .md\:bg-\[\#202020\] {
        --tw-bg-opacity: 1;
        background-color: rgb(32 32 32 / var(--tw-bg-opacity));
    }

    .md\:pb-0 {
        padding-bottom: 0px;
    }

    .md\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }

    .md\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }

    .md\:text-indigo-800 {
        --tw-text-opacity: 1;
        color: rgb(55 48 163 / var(--tw-text-opacity));
    }
}

@media (min-width: 1024px) {

    .lg\:static {
        position: static;
    }

    .lg\:absolute {
        position: absolute;
    }

    .lg\:sticky {
        position: sticky;
    }

    .lg\:inset-x-1\/2 {
        left: 50%;
        right: 50%;
    }

    .lg\:bottom-auto {
        bottom: auto;
    }

    .lg\:left-1\/4 {
        left: 25%;
    }

    .lg\:left-4 {
        left: 1rem;
    }

    .lg\:left-full {
        left: 100%;
    }

    .lg\:right-0 {
        right: 0px;
    }

    .lg\:right-6 {
        right: 1.5rem;
    }

    .lg\:right-auto {
        right: auto;
    }

    .lg\:top-24 {
        top: 6rem;
    }

    .lg\:top-5 {
        top: 1.25rem;
    }

    .lg\:order-first {
        order: -9999;
    }

    .lg\:order-none {
        order: 0;
    }

    .lg\:col-span-1 {
        grid-column: span 1 / span 1;
    }

    .lg\:col-span-2 {
        grid-column: span 2 / span 2;
    }

    .lg\:col-span-3 {
        grid-column: span 3 / span 3;
    }

    .lg\:col-span-4 {
        grid-column: span 4 / span 4;
    }

    .lg\:col-span-5 {
        grid-column: span 5 / span 5;
    }

    .lg\:col-start-1 {
        grid-column-start: 1;
    }

    .lg\:col-start-2 {
        grid-column-start: 2;
    }

    .lg\:row-start-1 {
        grid-row-start: 1;
    }

    .lg\:m-6 {
        margin: 1.5rem;
    }

    .lg\:mx-3 {
        margin-left: 0.75rem;
        margin-right: 0.75rem;
    }

    .lg\:mx-6 {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }

    .lg\:mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

    .lg\:my-12 {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }

    .lg\:my-32 {
        margin-top: 8rem;
        margin-bottom: 8rem;
    }

    .lg\:my-4 {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .lg\:mb-0 {
        margin-bottom: 0px;
    }

    .lg\:mb-3 {
        margin-bottom: 0.75rem;
    }

    .lg\:mb-4 {
        margin-bottom: 1rem;
    }

    .lg\:ml-2 {
        margin-left: 0.5rem;
    }

    .lg\:ml-6 {
        margin-left: 1.5rem;
    }

    .lg\:mr-2 {
        margin-right: 0.5rem;
    }

    .lg\:mt-0 {
        margin-top: 0px;
    }

    .lg\:mt-10 {
        margin-top: 2.5rem;
    }

    .lg\:mt-2 {
        margin-top: 0.5rem;
    }

    .lg\:mt-4 {
        margin-top: 1rem;
    }

    .lg\:mt-6 {
        margin-top: 1.5rem;
    }

    .lg\:block {
        display: block;
    }

    .lg\:inline {
        display: inline;
    }

    .lg\:flex {
        display: flex;
    }

    .lg\:grid {
        display: grid;
    }

    .lg\:hidden {
        display: none;
    }

    .lg\:h-32 {
        height: 8rem;
    }

    .lg\:h-6 {
        height: 1.5rem;
    }

    .lg\:h-full {
        height: 100%;
    }

    .lg\:max-h-32 {
        max-height: 8rem;
    }

    .lg\:max-h-40 {
        max-height: 10rem;
    }

    .lg\:max-h-\[850px\] {
        max-height: 850px;
    }

    .lg\:max-h-\[calc\(100vh-7rem\)\] {
        max-height: calc(100vh - 7rem);
    }

    .lg\:min-h-0 {
        min-height: 0px;
    }

    .lg\:w-1\/12 {
        width: 8.333333%;
    }

    .lg\:w-1\/2 {
        width: 50%;
    }

    .lg\:w-1\/3 {
        width: 33.333333%;
    }

    .lg\:w-1\/4 {
        width: 25%;
    }

    .lg\:w-11\/12 {
        width: 91.666667%;
    }

    .lg\:w-12 {
        width: 3rem;
    }

    .lg\:w-2\/3 {
        width: 66.666667%;
    }

    .lg\:w-2\/4 {
        width: 50%;
    }

    .lg\:w-2\/5 {
        width: 40%;
    }

    .lg\:w-20 {
        width: 5rem;
    }

    .lg\:w-24 {
        width: 6rem;
    }

    .lg\:w-3\/4 {
        width: 75%;
    }

    .lg\:w-32 {
        width: 8rem;
    }

    .lg\:w-40 {
        width: 10rem;
    }

    .lg\:w-56 {
        width: 14rem;
    }

    .lg\:w-6 {
        width: 1.5rem;
    }

    .lg\:w-80 {
        width: 20rem;
    }

    .lg\:w-\[400px\] {
        width: 400px;
    }

    .lg\:w-\[420px\] {
        width: 420px;
    }

    .lg\:w-auto {
        width: auto;
    }

    .lg\:max-w-4xl {
        max-width: 56rem;
    }

    .lg\:max-w-7xl {
        max-width: 80rem;
    }

    .lg\:max-w-xl {
        max-width: 36rem;
    }

    .lg\:flex-1 {
        flex: 1 1 0%;
    }

    .lg\:skew-y-6 {
        --tw-skew-y: 6deg;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .lg\:grid-cols-10 {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }

    .lg\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .lg\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .lg\:grid-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .lg\:grid-cols-8 {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .lg\:grid-cols-9 {
        grid-template-columns: repeat(9, minmax(0, 1fr));
    }

    .lg\:grid-cols-\[minmax\(0\2c 880px\)_minmax\(300px\2c 320px\)\] {
        grid-template-columns: minmax(0,880px) minmax(300px,320px);
    }

    .lg\:grid-rows-\[auto\2c auto\2c 1fr\] {
        grid-template-rows: auto auto 1fr;
    }

    .lg\:flex-col {
        flex-direction: column;
    }

    .lg\:flex-wrap {
        flex-wrap: wrap;
    }

    .lg\:flex-nowrap {
        flex-wrap: nowrap;
    }

    .lg\:items-start {
        align-items: flex-start;
    }

    .lg\:items-center {
        align-items: center;
    }

    .lg\:justify-center {
        justify-content: center;
    }

    .lg\:gap-10 {
        gap: 2.5rem;
    }

    .lg\:gap-2 {
        gap: 0.5rem;
    }

    .lg\:gap-3 {
        gap: 0.75rem;
    }

    .lg\:gap-4 {
        gap: 1rem;
    }

    .lg\:gap-6 {
        gap: 1.5rem;
    }

    .lg\:gap-8 {
        gap: 2rem;
    }

    .lg\:gap-x-8 {
        -moz-column-gap: 2rem;
             column-gap: 2rem;
    }

    .lg\:space-x-1 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(0.25rem * var(--tw-space-x-reverse));
        margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
    }

    .lg\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
    }

    .lg\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(1rem * var(--tw-space-x-reverse));
        margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
    }

    .lg\:space-x-6 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(1.5rem * var(--tw-space-x-reverse));
        margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
    }

    .lg\:divide-x-2 > :not([hidden]) ~ :not([hidden]) {
        --tw-divide-x-reverse: 0;
        border-right-width: calc(2px * var(--tw-divide-x-reverse));
        border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
    }

    .lg\:divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
        --tw-divide-opacity: 1;
        border-color: rgb(229 231 235 / var(--tw-divide-opacity));
    }

    .lg\:self-start {
        align-self: flex-start;
    }

    .lg\:overflow-auto {
        overflow: auto;
    }

    .lg\:overflow-x-auto {
        overflow-x: auto;
    }

    .lg\:overflow-y-auto {
        overflow-y: auto;
    }

    .lg\:break-all {
        word-break: break-all;
    }

    .lg\:rounded-lg {
        border-radius: 0.5rem;
    }

    .lg\:rounded-md {
        border-radius: 0.375rem;
    }

    .lg\:rounded-l-lg {
        border-top-left-radius: 0.5rem;
        border-bottom-left-radius: 0.5rem;
    }

    .lg\:rounded-r-lg {
        border-top-right-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
    }

    .lg\:border-b {
        border-bottom-width: 1px;
    }

    .lg\:border-none {
        border-style: none;
    }

    .lg\:border-gray-300 {
        --tw-border-opacity: 1;
        border-color: rgb(209 213 219 / var(--tw-border-opacity));
    }

    .lg\:bg-black {
        --tw-bg-opacity: 1;
        background-color: rgb(0 0 0 / var(--tw-bg-opacity));
    }

    .lg\:bg-neutral-200 {
        --tw-bg-opacity: 1;
        background-color: rgb(229 229 229 / var(--tw-bg-opacity));
    }

    .lg\:p-0 {
        padding: 0px;
    }

    .lg\:p-10 {
        padding: 2.5rem;
    }

    .lg\:p-12 {
        padding: 3rem;
    }

    .lg\:p-4 {
        padding: 1rem;
    }

    .lg\:p-6 {
        padding: 1.5rem;
    }

    .lg\:p-8 {
        padding: 2rem;
    }

    .lg\:px-0 {
        padding-left: 0px;
        padding-right: 0px;
    }

    .lg\:px-2 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .lg\:px-3 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .lg\:px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .lg\:px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .lg\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .lg\:py-0 {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .lg\:py-1 {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .lg\:py-1\.5 {
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
    }

    .lg\:py-2 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .lg\:py-2\.5 {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }

    .lg\:py-3 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .lg\:py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .lg\:py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .lg\:px-12 {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .lg\:pb-0 {
        padding-bottom: 0px;
    }

    .lg\:pb-24 {
        padding-bottom: 6rem;
    }

    .lg\:pb-4 {
        padding-bottom: 1rem;
    }

    .lg\:pb-6 {
        padding-bottom: 1.5rem;
    }

    .lg\:pl-12 {
        padding-left: 3rem;
    }

    .lg\:pl-3 {
        padding-left: 0.75rem;
    }

    .lg\:pl-6 {
        padding-left: 1.5rem;
    }

    .lg\:pr-5 {
        padding-right: 1.25rem;
    }

    .lg\:pr-8 {
        padding-right: 2rem;
    }

    .lg\:ps-1 {
        padding-inline-start: 0.25rem;
    }

    .lg\:pt-0 {
        padding-top: 0px;
    }

    .lg\:pt-12 {
        padding-top: 3rem;
    }

    .lg\:pt-14 {
        padding-top: 3.5rem;
    }

    .lg\:pt-16 {
        padding-top: 4rem;
    }

    .lg\:pt-4 {
        padding-top: 1rem;
    }

    .lg\:text-center {
        text-align: center;
    }

    .lg\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .lg\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }

    .lg\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }

    .lg\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }

    .lg\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }

    .lg\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .lg\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    .lg\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .lg\:font-bold {
        font-weight: 700;
    }

    .lg\:text-white {
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity));
    }

    .lg\:shadow-none {
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }

    .lg\:shadow-sm {
        --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }

    .group:hover .lg\:group-hover\:rotate-\[6deg\] {
        --tw-rotate: 6deg;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .group:hover .lg\:group-hover\:scale-125 {
        --tw-scale-x: 1.25;
        --tw-scale-y: 1.25;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
}

@media (min-width: 1280px) {

    .xl\:col-span-7 {
        grid-column: span 7 / span 7;
    }

    .xl\:flex {
        display: flex;
    }

    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .xl\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .xl\:grid-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .xl\:grid-cols-8 {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .xl\:gap-12 {
        gap: 3rem;
    }

    .xl\:gap-4 {
        gap: 1rem;
    }

    .xl\:px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

@media (min-width: 1536px) {

    .\32xl\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .\32xl\:grid-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {

    .xs\:fixed {
        position: fixed;
    }

    .xs\:sticky {
        position: sticky;
    }

    .xs\:bottom-0 {
        bottom: 0px;
    }

    .xs\:left-0 {
        left: 0px;
    }

    .xs\:top-\[64px\] {
        top: 64px;
    }

    .xs\:z-50 {
        z-index: 50;
    }

    .xs\:z-\[998\] {
        z-index: 998;
    }

    .xs\:ml-12 {
        margin-left: 3rem;
    }

    .xs\:mt-2 {
        margin-top: 0.5rem;
    }

    .xs\:mt-4 {
        margin-top: 1rem;
    }

    .xs\:block {
        display: block;
    }

    .xs\:flex {
        display: flex;
    }

    .xs\:grid {
        display: grid;
    }

    .xs\:hidden {
        display: none;
    }

    .xs\:h-auto {
        height: auto;
    }

    .xs\:w-1\/2 {
        width: 50%;
    }

    .xs\:w-full {
        width: 100%;
    }

    .xs\:grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .xs\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xs\:grid-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .xs\:flex-wrap {
        flex-wrap: wrap;
    }

    .xs\:items-center {
        align-items: center;
    }

    .xs\:justify-between {
        justify-content: space-between;
    }

    .xs\:gap-2 {
        gap: 0.5rem;
    }

    .xs\:space-y-1 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
    }

    .xs\:bg-\[\#5865f2\] {
        --tw-bg-opacity: 1;
        background-color: rgb(88 101 242 / var(--tw-bg-opacity));
    }

    .xs\:px-0 {
        padding-left: 0px;
        padding-right: 0px;
    }

    .xs\:px-1 {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .xs\:px-2 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .xs\:px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .xs\:pb-4 {
        padding-bottom: 1rem;
    }

    .xs\:pl-1 {
        padding-left: 0.25rem;
    }

    .xs\:text-center {
        text-align: center;
    }

    .xs\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .xs\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
}