/* ============================================================
   Brand Classic — Dark Premium
   Inspired by Stripe dark mode, Linear, Vercel dashboard
   ============================================================ */

:root {
    --accent-color: #d4a017;
    --accent-text-color: #09090b;
    --accent-glow: rgba(212, 160, 23, 0.15);
    --accent-subtle: rgba(212, 160, 23, 0.08);
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    --bg-base: #09090b;
    --bg-elevated: #0f0f12;
    --bg-card: #141418;
    --bg-hover: #1a1a1f;
    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --text-tertiary: #8e8e96;
    --border-default: rgba(255, 255, 255, 0.06);
    --border-subtle: rgba(255, 255, 255, 0.04);
    --border-hover: rgba(255, 255, 255, 0.1);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --green: #34d399;
    --green-dim: rgba(52, 211, 153, 0.1);
    --red: #f87171;
    --red-dim: rgba(248, 113, 113, 0.1);
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
}

/* === Reset & base === */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-main);
    background: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: #e8b930;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

::selection {
    background: var(--accent-color);
    color: var(--accent-text-color);
}

.k16doy73ub {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}


/* === Header === */

.gbbkmrgaybjlg {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(9, 9, 11, 0.8);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid var(--border-default);
}

.cr18z6dm {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 60px;
    position: relative;
}

.g35n6tlps {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    white-space: nowrap;
    letter-spacing: -0.01em;
    /* Logo holds its size — nav links can compress to keep Register CTA visible. */
    flex-shrink: 0;
}

.g35n6tlps img {
    height: 40px;
    max-width: 200px;
    width: auto;
    object-fit: contain;
}

.k5pa1vwqfiaa0 {
    display: flex;
    gap: 4px;
    margin: 0 auto;
}

.k5pa1vwqfiaa0 a {
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    transition: color 0.2s, background 0.2s;
    position: relative;
    letter-spacing: 0.01em;
}

.k5pa1vwqfiaa0 a:hover {
    color: var(--text-primary);
}

.k5pa1vwqfiaa0 a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: var(--accent-color, #FFD700);
    border-radius: 1px;
    opacity: 0;
    transform: scaleX(0);
    transition: opacity 0.2s, transform 0.2s;
}

.k5pa1vwqfiaa0 a:hover::after,
.k5pa1vwqfiaa0 a[aria-current="page"]::after {
    opacity: 1;
    transform: scaleX(1);
}

/* Current page keeps the active-link look (desktop) — same as hover. */
.k5pa1vwqfiaa0 a[aria-current="page"] {
    color: var(--text-primary);
}

.ocdtfhinqbqnr3 {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    flex-shrink: 0;
}

.grwmx729rs {
    background: var(--accent-color);
    color: var(--accent-text-color);
    padding: 7px 20px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    transition: all var(--transition-fast);
    border: none;
    cursor: pointer;
    /* Register is the highest-priority element in the header — it never
       shrinks. Other items (nav links, Login) compress or hide first. */
    flex-shrink: 0;
}

.grwmx729rs:hover {
    color: var(--accent-text-color);
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.dlje169nf6m4x {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--green);
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    background: rgba(52, 211, 153, 0.15);
    border: none;
    transition: all var(--transition-fast);
}

.dlje169nf6m4x:hover {
    color: var(--green);
    background: rgba(52, 211, 153, 0.25);
}

.dlje169nf6m4x svg {
    flex-shrink: 0;
}

.ufmucg9kabhc,
.okmgwc7sbwsez {
    display: none;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    padding: 11px 22px;
    border: none;
    /* Mobile CTA + burger are highest priority on small screens — logo
       compresses first so the Register button is always visible. */
    flex-shrink: 0;
}

.ufmucg9kabhc {
    background: var(--accent-color);
    color: var(--accent-text-color);
}

.okmgwc7sbwsez {
    background-color: rgba(52, 211, 153, 0.15);
    color: var(--green);
}


/* CSS-drawn burger lines: top + middle + bottom.
   Middle line is rendered as the element's own background-image (a thin
   horizontal gradient strip). Top + bottom are ::before/::after.
   In `.tpicqzf1kzldu` state the top/bottom rotate into an X and the middle fades. */
.fmn4g2znmj {
    display: none;
    position: relative;
    width: 32px;
    height: 32px;
    /* Use longhand so a stray `background:` shorthand can't reset the
       transparent background-color to the default button-face gray. */
    background-color: transparent;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: center;
    background-size: 18px 2px;
    background-repeat: no-repeat;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast),
                background-size .25s ease;
}
.fmn4g2znmj::before,
.fmn4g2znmj::after {
    content: "";
    position: absolute;
    left: 7px;
    right: 7px;
    height: 2px;
    background-color: currentColor;
    transition: top .25s ease, transform .25s ease;
}
.fmn4g2znmj::before { top: 9px; }
.fmn4g2znmj::after  { top: 21px; }
.fmn4g2znmj.tpicqzf1kzldu    { background-size: 0 2px; }
.fmn4g2znmj.tpicqzf1kzldu::before { top: 15px; transform: rotate(45deg); }
.fmn4g2znmj.tpicqzf1kzldu::after  { top: 15px; transform: rotate(-45deg); }

.fmn4g2znmj svg {
    display: block;
}

.fmn4g2znmj:hover {
    color: var(--text-primary);
}


/* === Main layout === */

.b3hm20cw19p7p {
    min-height: 60vh;
}

.ti8fbr3ll0ovdi {
    padding: 0;
}
.ti8fbr3ll0ovdi + .ti8fbr3ll0ovdi {
    margin-top: 24px;
}


/* === Hero === */

.h6327bx6jludtr {
    position: relative;
    padding: 0 0 8px;
    margin-bottom: 48px;
    overflow: hidden;
    background: var(--bg-base);
}

/* Card-style hero */
.qqn6e9p2bosvba {
    background: var(--bg-base);
    /* Subtle dot grid pattern behind the card */
    background-image: radial-gradient(rgba(212, 160, 23, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Operator-uploaded hero image — scale to cover, no tiling, center-cropped */
.q0kpa8zn6rob {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.jbbh5jfvut {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 24px auto;
    padding: 56px 48px 48px;
    /* Overlay strength is operator-controlled per site via the
       Hero overlay slider in Site Settings — defaults to 0.55 so
       sites without a configured value still render as before. */
    background: rgba(0, 0, 0, var(--hero-overlay-opacity, 0.55));
    backdrop-filter: blur(calc(2px * var(--hero-overlay-opacity, 0.55)));
    -webkit-backdrop-filter: blur(calc(2px * var(--hero-overlay-opacity, 0.55)));
    border: 1px solid rgba(212, 160, 23, calc(0.08 * var(--hero-overlay-opacity, 0.55) / 0.55));
    border-radius: var(--radius-xl);
    text-align: center;
    overflow: hidden;
}

/* Gold glow — bottom right */
.jbbh5jfvut::before {
    content: '';
    position: absolute;
    bottom: -60px;
    right: -40px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(212, 160, 23, calc(0.15 * var(--hero-overlay-opacity, 0.55) / 0.55)) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* Subtle glow — top left */
.jbbh5jfvut::after {
    content: '';
    position: absolute;
    top: -80px;
    left: -60px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(212, 160, 23, calc(0.06 * var(--hero-overlay-opacity, 0.55) / 0.55)) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.jbbh5jfvut > * {
    position: relative;
    z-index: 1;
}

.vzh1qdnw {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.n4dhwfuc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 32px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.65;
}

.n4dhwfuc strong {
    color: var(--accent-color);
    font-weight: 700;
}

.lap55vas2b {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.ktm08c8223bqy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-color);
    color: var(--accent-text-color);
    padding: 13px 32px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: all var(--transition-base);
}

.ktm08c8223bqy:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
    color: var(--accent-text-color);
}

.y76mrbtqog9 {
    display: inline-flex;
    align-items: center;
    padding: 13px 32px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    border: 1px solid var(--border-hover);
    background: transparent;
    transition: all var(--transition-base);
}

.y76mrbtqog9:hover {
    border-color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
}


/* === Rich text content === */

.mxpgyn3s523r5z {
    margin-bottom: 32px;
}

.mxpgyn3s523r5z h1 {
    font-size: 2rem;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.mxpgyn3s523r5z h2 {
    font-size: 1.7rem;
    margin: 80px 0 8px;
    scroll-margin-top: 80px;
    padding-bottom: 8px;
}
.ti8fbr3ll0ovdi:first-child .mxpgyn3s523r5z h2:first-child {
    margin-top: 0;
}
.mxpgyn3s523r5z h2:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.mxpgyn3s523r5z h3 {
    font-size: 1.1rem;
    margin: 32px 0 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.mxpgyn3s523r5z p {
    margin-bottom: 16px;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.75;
}

.mxpgyn3s523r5z ul,
.mxpgyn3s523r5z ol {
    margin: 16px 0 16px 20px;
    color: var(--text-secondary);
}

.mxpgyn3s523r5z li {
    margin-bottom: 8px;
    font-size: 15px;
    padding-left: 4px;
}

.mxpgyn3s523r5z table {
    width: 100%;
    /* border-collapse:collapse ignores border-radius on corner cells —
       cell borders punch through the rounded outline. Use separate +
       overflow:hidden so the table can clip its corners cleanly. */
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    margin: 24px 0;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    table-layout: auto;
}
@media (max-width: 640px) {
    .mxpgyn3s523r5z table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.mxpgyn3s523r5z th,
.mxpgyn3s523r5z td {
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
    color: var(--text-secondary);
}

/* Imported old-gen tables wrap every cell text in <p>. The default
   .mxpgyn3s523r5z p { margin-bottom: 16px } pushes content to the
   top of the cell visually, breaking vertical centering. Zero margins
   on cell-level <p> so the centering applies to the actual text box. */
.mxpgyn3s523r5z td > p,
.mxpgyn3s523r5z th > p,
.mxpgyn3s523r5z td > p:last-child,
.mxpgyn3s523r5z th > p:last-child {
    margin: 0;
}

.mxpgyn3s523r5z th {
    background: var(--bg-elevated);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 45%, transparent);
}

.mxpgyn3s523r5z td:first-child {
    color: var(--text-primary);
    font-weight: 500;
}

.mxpgyn3s523r5z tr:last-child td {
    border-bottom: none;
}

.mxpgyn3s523r5z tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.mxpgyn3s523r5z img {
    border-radius: var(--radius-md);
    /* Show the image at its real (intrinsic) size — never upscale,
       only shrink if it overflows the reading column. `width: auto`
       picks the natural width from the file, `max-width: 100%` keeps
       wider images from busting the layout on narrow viewports. */
    display: block;
    margin: 24px auto;
    width: auto;
    max-width: 100%;
    height: auto;
}
/* Figures size to their image's natural width — no width:100% stretch
   inside the figure, so a 600 px image stays 600 px (not blown up to
   the figure's full width). Centered as a block. */
.mxpgyn3s523r5z figure {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 24px auto;
    padding: 0;
}
.mxpgyn3s523r5z figure img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: 0;
}
.mxpgyn3s523r5z figcaption {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 8px;
    text-align: center;
}

.mxpgyn3s523r5z blockquote {
    border-left: 2px solid var(--accent-color);
    padding: 14px 20px;
    margin: 24px 0;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.mxpgyn3s523r5z strong {
    color: var(--text-primary);
    font-weight: 600;
}


/* === Pros & Cons === */

.x3ag9etb {
    margin: 0 0 36px 0;
}

.x3ag9etb h2 {
    margin-bottom: 20px;
}

.w53ahcc4qht {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    /* Each column sizes to its own content — when one column has fewer
       items than the other, it stays shorter instead of stretching to
       match the taller column. */
    align-items: start;
}

.b9qp5zc9q,
.hvp8mtx6zp {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.ecrqk8rnwh52 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.ver0u453w {
    display: flex;
    align-items: center;
    gap: 10px;
}

.b8ob66otx2 {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.v5wxfjrrv9 {
    background: var(--green-dim);
    color: var(--green);
}
.v5wxfjrrv9::before { content: "✓"; }

.niosl226mmx {
    background: var(--red-dim);
    color: var(--red);
}
.niosl226mmx::before { content: "✕"; }

.ecrqk8rnwh52 h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.mr292sgk {
    font-size: 11px;
    color: var(--text-tertiary);
    font-family: monospace;
    letter-spacing: 0.02em;
}

.b9qp5zc9q ul,
.hvp8mtx6zp ul {
    list-style: none;
}

.b9qp5zc9q li,
.hvp8mtx6zp li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

.b9qp5zc9q li:last-child,
.hvp8mtx6zp li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.b9qp5zc9q li:first-child,
.hvp8mtx6zp li:first-child {
    padding-top: 0;
}

.i3ezlbop3zm {
    flex-shrink: 0;
    font-size: 12px;
    margin-top: 2px;
}

.aoblh8xy5 {
    color: var(--green);
}
.aoblh8xy5::before { content: "✓"; }

.q0ej3xxujs {
    color: var(--red);
}
.q0ej3xxujs::before { content: "✕"; }


/* === Info Table === */

.uw3yw6u6ik5pw5 {
    margin: 0 0 36px 0;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* The h2 title is a SIBLING right before .uw3yw6u6ik5pw5 (the template renders it
   outside the section), so the old `.uw3yw6u6ik5pw5 h2` descendant rule never
   matched and the heading sat flush against the table. Space the table card
   down from its heading via the adjacent-sibling selector instead. */
h2 + .uw3yw6u6ik5pw5 {
    margin-top: 20px;
}

.uw3yw6u6ik5pw5 table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.uw3yw6u6ik5pw5 td {
    padding: 10px 20px;
    font-size: 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--transition-fast);
}

.uw3yw6u6ik5pw5 tr:last-child td {
    border-bottom: none;
}

.uw3yw6u6ik5pw5 tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.vanzxe3n4 {
    font-weight: 600;
    color: var(--text-secondary);
    width: 40%;
    font-size: 13px;
    letter-spacing: 0.01em;
}

.q53eaau4vq {
    color: var(--text-primary);
    font-weight: 500;
}


/* === Slots Grid === */

/* === Slots Section === */

.nfzref69r43w {
    margin: 40px 0;
}

.msmtqipyev {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.msmtqipyev h2 {
    margin: 0;
    font-size: 1.3rem;
}

.n3ncrzrcl0 {
    font-size: 13px;
    color: var(--accent-color);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    white-space: nowrap;
}

.n3ncrzrcl0:hover {
    text-decoration: underline;
}

.jk9987tljq9 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    padding: 6px;
    margin: -6px;
}

.xmio3x5kj {
    margin-bottom: 32px;
}

.mkdknmehe {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    padding: 6px;
    margin: -6px;
}

.anq1ogoipxi283 {
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}


.anq1ogoipxi283:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.cxs0azbw9gzw3 {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #000;
    border-radius: 12px;
}

.cxs0azbw9gzw3 img {
    width: 102%;
    height: 102%;
    margin: -1%;
    object-fit: cover;
    display: block;
}

.qx4rs16w {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: rgba(255,255,255,.15);
    background: linear-gradient(135deg, #1e293b, #0f172a);
}

.yf7nsmuegmu {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    z-index: 2;
    pointer-events: none;
}

.qu79eo57cz3 {
    background: rgba(212, 160, 23, 0.95);
    color: #1a1a1a;
}

.yc1rwvy6j {
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a1a;
}

/* HOT — slots flagged `is_top` in admin. More vivid than the random
   gold TOP so curated picks visually pop. Slight glow so it reads as
   "highlighted" rather than another colour swatch. */
.u15xd6i9rm {
    background: linear-gradient(135deg, #ff4d2e, #ff8a2e);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255, 138, 46, 0.35), 0 4px 10px rgba(255, 77, 46, 0.25);
}

.odauac9vf {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s;
}

.anq1ogoipxi283:hover .odauac9vf {
    opacity: 1;
}

.i84ficvy8 {
    display: block;
    width: 52px;
    height: 52px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.95;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,.6));
    /* background-image is injected per-site by the builder */
}

.pbv8pn5zsn {
    padding: 8px 4px 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.z4azm4vqwk6m {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jwzczcic {
    font-size: 11px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zs4u1b70p269 {
    text-align: center;
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
/* Slots-grid CTAs:
   - .ow9r5p7lcapds (default, "Show more") = SECONDARY — accent
     outline so the in-place expand action stays visible on the very
     dark background (--bg-base #09090b) without pulling focus from
     the primary CTA.
   - .r4xvztwu50ks (override, "Play all") = PRIMARY — solid
     accent fill, dark text. This is the action that sends the player
     into the full games lobby, so it gets the strongest treatment.

   Previous version used a faint white border + tertiary grey text on
   "Show more" which was almost invisible on the dark theme —
   operator-reported. */

.ow9r5p7lcapds {
    display: inline-block;
    padding: 10px 32px;
    background: transparent;
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    color: var(--accent-color);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

.ow9r5p7lcapds:hover {
    background: rgba(212, 160, 23, 0.12);
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.r4xvztwu50ks {
    background: var(--accent-color) !important;
    border: 1px solid var(--accent-color) !important;
    /* Use --accent-text-color so the operator's 'Text on accent'
       choice (Black / White) in the Styles block applies here too,
       matching every other solid-accent CTA in the theme. */
    color: var(--accent-text-color) !important;
}
.r4xvztwu50ks:hover {
    background: #e6b21f !important;
    border-color: #e6b21f !important;
    color: var(--accent-text-color) !important;
}

/* === Slot Page === */

.mks8n0qr {
    padding-top: 20px;
    padding-bottom: 40px;
}

.b9jzu2uj4hsj5f {
    margin-bottom: 16px;
    padding-top: 12px;
}

.xc5t4hbn88s {
    color: var(--text-tertiary);
    text-decoration: none;
    font-size: 14px;
    transition: color .2s;
}

.xc5t4hbn88s:hover {
    color: var(--text-primary);
}

.xudgiswoh83flu {
    margin-bottom: 24px;
}

.qtvzomup {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

.qtvzomup iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.v9an2zs0kack9 {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0f172a;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v9an2zs0kack9 img {
    height: 100%;
    object-fit: contain;
}

.eplg6qcus8 {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    justify-content: center;
}

.j4r48cstmwx {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all .2s;
}

.j4r48cstmwx:hover {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.3);
}

.rkomm1qyjve {
    display: inline-flex;
    align-items: center;
    padding: 10px 32px;
    background: var(--accent-color);
    color: var(--accent-text-color);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: filter .2s, transform .2s;
}

.rkomm1qyjve:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.h2daxm2wemuoj {
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    margin-bottom: 24px;
}

.x3415kjvky90 {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.akeuhfl9gw51 {
    width: 120px;
    height: 160px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.akeuhfl9gw51 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hydz3yq4mt1p {
    flex: 1;
}

.hydz3yq4mt1p h1 {
    font-size: 1.4rem;
    margin-bottom: 6px;
    line-height: 1.2;
}

.bc8fcnhr8cv {
    color: var(--text-tertiary);
    font-size: 14px;
    display: block;
    margin-bottom: 6px;
}

.esqg5ute2buhwf {
    display: flex;
    gap: 24px;
}

.gt65l8tlf7w {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ko94fob716 {
    font-size: 12px;
    color: var(--text-tertiary);
}

.sw54deu6zhnco {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-color);
}

.joarzkk9ct {
    display: inline-flex;
    padding: 10px 24px;
    background: var(--accent-color);
    color: var(--accent-text-color);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    margin-top: 8px;
    transition: filter .2s, transform .2s;
}

.joarzkk9ct:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.f0p16y0qw {
    display: flex;
    gap: 12px;
}

.urruep0nvkj {
    flex: 1;
    display: inline-flex;
    justify-content: center;
    padding: 14px 36px;
    background: var(--accent-color);
    color: var(--accent-text-color);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: filter .2s, transform .2s;
}

.urruep0nvkj:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.a6xuvejc54zzgu {
    margin-bottom: 32px;
    line-height: 1.7;
    color: var(--text-secondary);
    font-size: 15px;
}

.a6xuvejc54zzgu h2 {
    font-size: 1.2rem;
    color: var(--text-primary);
    margin: 24px 0 8px;
}

.a6xuvejc54zzgu p {
    margin-bottom: 12px;
}

.utca9su9y {
    margin-top: 40px;
}

.utca9su9y h2 {
    margin-bottom: 16px;
    font-size: 1.2rem;
}

/* Mid-desktop squeeze (≥960px so we're still in desktop layout, but space
   is tight): drop the Login button and tighten nav-link padding so the
   Register CTA always has room — that button is the highest priority. */
@media (max-width: 1100px) and (min-width: 961px) {
    .k5pa1vwqfiaa0 a {
        padding: 8px 12px;
        font-size: 14px;
    }
    .dlje169nf6m4x {
        display: none;
    }
    .cr18z6dm {
        gap: 16px;
    }
}

@media (max-width: 960px) {
    .fmn4g2znmj {
        display: flex;
        order: 99;
        flex-shrink: 0;
    }
    .k5pa1vwqfiaa0 {
        display: none !important;
    }
    .ocdtfhinqbqnr3 {
        display: none;
    }
    .ufmucg9kabhc {
        display: block;
        margin-left: auto;
        margin-right: 6px;
    }
    .cr18z6dm {
        height: 56px;
    }
    .g35n6tlps {
        flex-shrink: 1;
        min-width: 100px;
        overflow: hidden;
        padding-left: 8px;
    }
    .g35n6tlps img {
        max-width: 100%;
        height: 32px;
        max-height: 32px;
    }
    /* Trim CTA padding so the logo gets a bit more horizontal space. */
    .ufmucg9kabhc,
    .okmgwc7sbwsez {
        padding: 9px 14px;
    }
    .cr18z6dm {
        gap: 12px;
    }
    .gkshupxig1 {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-elevated);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.25s, visibility 0.25s;
        overflow-y: hidden;
    }
    .gkshupxig1.tpicqzf1kzldu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

@media (max-width: 768px) {
    .x3415kjvky90 {
        gap: 14px;
    }
    .akeuhfl9gw51 {
        width: 100px;
        height: 130px;
    }
    .hydz3yq4mt1p h1 {
        font-size: 1.1rem;
    }
    .j4r48cstmwx {
        display: none;
    }
    .eplg6qcus8 {
        flex-direction: column;
    }
    .rkomm1qyjve, .j4r48cstmwx {
        justify-content: center;
    }
    .utca9su9y .jk9987tljq9 {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}



/* === Bonuses === */

.gku9f87frhtd90 {
    margin: 0 0 36px 0;
}

.gku9f87frhtd90 h2 {
    margin-bottom: 20px;
}

.b5ygk37h {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.t8buq39yjyb {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: border-color var(--transition-fast), transform var(--transition-base);
}

.t8buq39yjyb:first-child {
    border-color: rgba(212, 160, 23, 0.15);
}

.t8buq39yjyb:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.lnm5xto4m3 {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-color);
    background: var(--accent-subtle);
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 16px;
    align-self: flex-start;
}

.sj27wyoycl10 {
    font-size: 1.4em;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.tabx6hld {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
}

.jqtw5n8zkvfos6 {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}

.v8lelsvt27ek {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding: 10px 16px;
    background: var(--accent-color);
    border: 1px solid var(--accent-color);
    border-radius: var(--radius-md);
    color: var(--accent-text-color);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.v8lelsvt27ek:hover {
    background: transparent;
    color: var(--accent-color);
}


/* === Banking === */

.xfh737a89htwub {
    margin: 0 0 36px 0;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Same as info-table: the h2 is a sibling before .xfh737a89htwub, not a
   child, so the old descendant rule never applied. Space the card down from
   its heading via the adjacent-sibling selector. */
h2 + .xfh737a89htwub {
    margin-top: 20px;
}

.d1y6di1oi {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    table-layout: auto;
}
@media (max-width: 640px) {
    .d1y6di1oi {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.d1y6di1oi th,
.d1y6di1oi td {
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 14px;
    vertical-align: middle;
}

.d1y6di1oi th {
    background: var(--bg-elevated);
    color: var(--text-tertiary);
    font-weight: 600;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.d1y6di1oi td {
    color: var(--text-secondary);
}

.d1y6di1oi tr:last-child td {
    border-bottom: none;
}

.d1y6di1oi tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.wb2zne4tvkv7c {
    color: var(--text-primary);
    font-weight: 500;
}

.zlnh3p9l1tb4 {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    margin-right: 6px;
    vertical-align: middle;
}

.er21p9wyrbuwe {
    color: var(--green);
    font-weight: 600;
}


/* === Getting Started === */

.ounsw5etp07 {
    margin: 0 0 36px 0;
}

.ounsw5etp07 h2 {
    margin-bottom: 20px;
}

.jidtmz4r04r {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.svgescqa4kv7 {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 24px;
    position: relative;
    transition: border-color var(--transition-fast), transform var(--transition-base);
}

.svgescqa4kv7:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

/* Dashed connector between cards */
.svgescqa4kv7:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 36px;
    right: -8px;
    width: 8px;
    border-top: 2px dashed var(--border-hover);
    z-index: 1;
}

.guyj4m2b2yb {
    width: 36px;
    height: 36px;
    background: var(--accent-color);
    color: var(--accent-text-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 16px;
}

.svgescqa4kv7 h3 {
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.svgescqa4kv7 p {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}


/* === Safety === */

.s75tja4mb7a {
    margin: 0 0 36px 0;
}

.s75tja4mb7a h2 {
    margin-bottom: 20px;
}

.h558wy1xa {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.nukl6t2ysyf7 {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: border-color var(--transition-fast);
}

.nukl6t2ysyf7:hover {
    border-color: var(--border-hover);
}

.nukl6t2ysyf7 h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.nukl6t2ysyf7 p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}


/* === FAQ === */

.nbz9rbaeedff {
    margin: 0 0 36px 0;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.nbz9rbaeedff h2 {
    /* Match .mxpgyn3s523r5z h2 size so the FAQ title doesn't look
       lighter than other section headers, and pad it so it doesn't sit
       flush against the card edge. */
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
    padding: 24px 24px 20px;
    scroll-margin-top: 80px;
    border-bottom: 1px solid var(--border-subtle);
}

.sjjrbu34fpxr {
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--transition-fast);
}

.sjjrbu34fpxr:last-child {
    border-bottom: none;
}

.sjjrbu34fpxr:hover {
    background: rgba(255, 255, 255, 0.01);
}

.a77c7ak1j77c {
    width: 100%;
    padding: 18px 24px;
    background: transparent;
    color: var(--text-primary);
    border: none;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: inherit;
    transition: color var(--transition-fast);
    line-height: 1.5;
}

.a77c7ak1j77c:hover {
    color: var(--accent-color);
}

.a77c7ak1j77c::after {
    content: "";
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-left: 16px;
    color: var(--text-tertiary);
    /* CSS-drawn plus sign — pixel-perfect centered, no font glyph baseline drift */
    background:
        linear-gradient(currentColor, currentColor) center/12px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center/2px 12px no-repeat;
}

.sjjrbu34fpxr.tpicqzf1kzldu .a77c7ak1j77c::after {
    border-color: var(--accent-color);
    color: var(--accent-color);
    /* Open state: only the horizontal bar — minus sign */
    background: linear-gradient(currentColor, currentColor) center/12px 2px no-repeat;
}

.b9hhumlv0y {
    padding: 0 24px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.75;
}

.sjjrbu34fpxr.tpicqzf1kzldu .b9hhumlv0y {
    padding: 0 24px 20px;
    max-height: 600px;
}


/* === Article Rating === */

.fazzz7ea4s5n {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 24px 32px;
    margin: 0 0 36px 0;
    display: flex;
    align-items: center;
    gap: 24px;
}

.k8drtho0hbd51 {
    display: flex;
    align-items: baseline;
    flex-shrink: 0;
}

.xd6bcaqhmlpg0k {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--accent-color);
    line-height: 1;
}

.c95csy5ac {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-left: 2px;
}

.n68dd9r8ccfxoy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mm8t4rux6pg {
    display: flex;
    gap: 2px;
}

.otap995ao {
    color: var(--border-hover);
    font-size: 18px;
}
.otap995ao::before { content: "★"; }

.otap995ao.c6yb7w9x2 {
    color: var(--accent-color);
}

.otap995ao.z9pmob3z7nkbe3 {
    color: var(--accent-color);
    opacity: 0.5;
}

.pxclc48blx {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

.su3c9f0waxivac {
    color: var(--text-tertiary);
    font-size: 12px;
}


/* === Social Links === */

.tkdj533lh8 {
    margin: 0 0 36px 0;
    text-align: center;
}

.tkdj533lh8 h3 {
    margin-bottom: 16px;
    font-size: 15px;
    color: var(--text-secondary);
    font-weight: 600;
}

.d3m64236r {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.jdbh92c4dl0 {
    background: var(--bg-card);
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-tertiary);
    border: 1px solid var(--border-default);
    transition: all var(--transition-fast);
    font-weight: 500;
}

.jdbh92c4dl0:hover {
    border-color: var(--border-hover);
    color: var(--text-secondary);
    transform: translateY(-1px);
}


/* === Providers === */

.hwi8otrhrm {
    margin: 0 0 36px 0;
    overflow: hidden;
}

.hwi8otrhrm h2 {
    margin-bottom: 16px;
}

.qwmnvui1np6eum {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
}

.qwmnvui1np6eum::-webkit-scrollbar {
    display: none;
}

.utp0v7z8hpyktx {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color var(--transition-fast);
}

.utp0v7z8hpyktx:hover {
    border-color: var(--border-hover);
}

.utp0v7z8hpyktx img {
    height: 24px;
    width: auto;
}

.utp0v7z8hpyktx span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    white-space: nowrap;
}


/* === Table of Contents === */

.tjezsa2k24 {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    margin: 0 0 36px 0;
    /* Sticky header is 60px (.cr18z6dm height) — match the
       scroll-margin used by anchored h2/h3 elsewhere so the hero's
       "Read review" CTA (href="#contents") doesn't land the TOC card
       partially hidden under the header. */
    scroll-margin-top: 80px;
}

.kg2al5o6kmw4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    cursor: pointer;
    user-select: none;
}

.p6db6wehna {
    display: flex;
    align-items: center;
    gap: 12px;
}

.qazh2soi7h {
    font-size: 18px;
    color: var(--text-tertiary);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    transition: transform var(--transition-base);
}

.y3diubx52 .qazh2soi7h {
    transform: rotate(-90deg);
}

.y3diubx52 .agfcb6ou {
    display: none;
}

.y3diubx52 .kg2al5o6kmw4 {
    margin-bottom: 0;
}

.gt9y09a8 {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    /* Hero "Read review" CTA jumps to #contents (which is this element).
       Compensate for the sticky header so the title isn't hidden under it. */
    scroll-margin-top: 80px;
}

.eyg0yzjqkze6l {
    font-size: 12px;
    color: var(--text-tertiary);
    font-family: monospace;
}

.agfcb6ou {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.mg94aal6af {
    border-bottom: 1px solid var(--border-subtle);
}

/* Remove border under items in the last visual row.
   - Last item: always (it's the bottom-rightmost or bottom-leftmost).
   - Second-to-last item: only if its position is odd (left column),
     which happens when the total count is even and both fall in the
     last row. With an odd total the second-to-last sits in the row
     above and must keep its border. */
.mg94aal6af:last-child,
.mg94aal6af:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
}

.mg94aal6af a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.mg94aal6af a:hover {
    color: var(--accent-color);
}

.pcusz5ir5 {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mg94aal6af a:hover .pcusz5ir5 {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

@media (max-width: 640px) {
    .tjezsa2k24 {
        padding: 20px;
    }
    .agfcb6ou {
        grid-template-columns: 1fr;
    }
    .mg94aal6af:last-child {
        border-bottom: none;
    }
    .mg94aal6af a {
        padding: 12px 4px;
    }
}


/* === Footer === */

.pmurutx5opa {
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-default);
    padding: 32px 0 24px;
    margin-top: 60px;
}

/* Footer main: brand left, links right */
.vshatb0sr5v2 {
    display: flex;
    justify-content: space-between;
    gap: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border-default);
}

.fnss2do3py {
    max-width: 340px;
    flex-shrink: 0;
}

.m3u4qx2rlx {
    height: 50px;
    max-width: 220px;
    width: auto;
    object-fit: contain;
    display: block;
    margin-bottom: 14px;
}

.ppqh8saz {
    font-size: 1.2rem;
    font-weight: 700;
    display: block;
    margin-bottom: 14px;
}

.qk5jlpm0lk3lb {
    color: var(--text-tertiary);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 12px;
}

.g96l0h8r {
    color: var(--text-tertiary);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s;
    display: block;
    margin-bottom: 14px;
}

.g96l0h8r:hover {
    color: var(--text-primary);
}

.q460qr6me0ty {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.l4czwez6x {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    /* longhand — keep injected background-image visible (see scroll-top) */
    background-color: var(--bg-hover);
    border: 1px solid var(--border-default);
    color: var(--text-tertiary);
    text-decoration: none;
    transition: all var(--transition-base);
}

@media (hover: hover) {
    .l4czwez6x:hover {
        background-color: rgba(255, 255, 255, 0.1);
        border-color: var(--border-hover);
        color: var(--text-primary);
        transform: translateY(-2px);
    }
}

.l4czwez6x svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Footer nav columns */
.lo8p064qibyau0 {
    display: flex;
    gap: 48px;
}

.fpybvgr860nv {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qpnsh485b {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;
}

.fpybvgr860nv a {
    color: var(--text-tertiary);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s;
}

.fpybvgr860nv a:hover {
    color: var(--text-primary);
}

.bybmtjvtgda {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bybmtjvtgda.lq8qkns0tsl {
    color: var(--text-secondary);
}

.bybmtjvtgda img {
    border-radius: 2px;
}

/* Payment icons row */
.de2kjtcmah4xs9 {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 24px 0;
    border-bottom: 1px solid var(--border-default);
}

.a1b369hm2lanbm {
    width: 52px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.a1b369hm2lanbm img {
    max-height: 29px;
    max-width: 52px;
    width: auto;
    object-fit: contain;
    opacity: 0.75;
    transition: opacity 0.2s;
}

.a1b369hm2lanbm:hover img {
    opacity: 0.8;
}

/* RG badges row */
.okcckq87 {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-default);
}

.r8hpyl2p9ez146 {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 0.2s;
}

.r8hpyl2p9ez146 img {
    height: 48px;
    width: auto;
    object-fit: contain;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.r8hpyl2p9ez146:hover img {
    opacity: 0.8;
}

.yd6olhbwk {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-tertiary);
    opacity: 0.5;
}

/* Scroll to top button */
.thh31rhrllk {
    position: fixed;
    /* Lifts itself above the sticky widget banner when one is present —
       widget sets `--sticky-bar-height` to its measured height. */
    bottom: calc(28px + var(--sticky-bar-height, 0px));
    right: 28px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    /* IMPORTANT: use `background-color` (longhand). The `background-image`
       is injected per-site by the builder; using `background:` shorthand
       here would reset the image and the icon would disappear on hover. */
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background-color 0.2s;
    z-index: 90;
}

.thh31rhrllk.jk01jk5f5lsbbp {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hide the Scroll-to-top button while the mobile menu is open — body gets
   the `menu-open` class from main.js when the burger toggles the panel. */
body.menu-open .thh31rhrllk {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (hover: hover) {
    .thh31rhrllk:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: var(--text-primary);
    }
}

/* Copyright */
.lc0pwj3u5 {
    padding-top: 20px;
    text-align: center;
}

.dupjm44590zrg {
    display: inline-block;
    font-weight: 800;
    font-size: 14px;
    margin-left: 6px;
    vertical-align: middle;
}

.gizcxrz3el19p {
    color: var(--text-tertiary);
    font-size: 13px;
    margin-bottom: 8px;
}

.lubqxurwqs9 {
    color: var(--text-tertiary);
    font-size: 11px;
    max-width: 560px;
    margin: 0 auto;
    opacity: 0.5;
    line-height: 1.6;
}


/* Mobile menu — hidden on desktop */
.gkshupxig1 {
    display: none;
}



/* === Language Switcher === */

.dqzqsfkc {
    position: relative;
}

.bzmh7vi9m {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 5px 4px;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: color .2s;
}

.bzmh7vi9m:hover {
    color: var(--text-primary);
}

.ztjo79bshm9d9 {
    border-radius: 2px;
    object-fit: cover;
}

.sibuncnxvj {
    opacity: .6;
    transition: transform .2s;
}

.bzmh7vi9m.tpicqzf1kzldu .sibuncnxvj {
    transform: rotate(180deg);
}

.b7w3l0r96yn {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 6px 0;
    min-width: 160px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    z-index: 100;
}

.b7w3l0r96yn.tpicqzf1kzldu {
    display: block;
}

.k2oeiradfmc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    color: #e2e8f0;
    text-decoration: none;
    font-size: 14px;
    transition: background .15s;
}

.k2oeiradfmc:hover {
    background: rgba(255,255,255,.08);
}

/* === Responsive: Tablet === */

@media (max-width: 768px) {
    .jk9987tljq9 {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .mkdknmehe {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .odauac9vf { display: none; }

    .h6327bx6jludtr {
        padding: 0;
    }

    .jbbh5jfvut {
        margin: 12px;
        padding: 36px 24px 32px;
    }

    .vzh1qdnw {
        font-size: 1.4rem;
    }

    .n4dhwfuc {
        font-size: 0.88rem;
    }

    .lap55vas2b {
        flex-direction: column;
    }

    .ktm08c8223bqy,
    .y76mrbtqog9 {
        width: 100%;
        justify-content: center;
    }

    .w53ahcc4qht {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .b9qp5zc9q,
    .hvp8mtx6zp {
        padding: 20px;
    }

    .p6n8l6r2c {
        grid-template-columns: repeat(2, 1fr);
    }

    .b5ygk37h {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .t8buq39yjyb {
        padding: 20px 32px;
    }

    .fazzz7ea4s5n {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Mobile menu overlay */
    .gkshupxig1 {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        /* Slides down from BELOW the sticky header — header stays visible
           and burger animates into an X in place. Header at this breakpoint
           is 56px (.cr18z6dm) + 1px border-bottom = 57px; a larger
           offset leaves a visible gap strip between header and menu.
           z-index 90 is below header (100) so the header renders on top. */
        top: 57px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-elevated);
        z-index: 90;
        /* Pure-transform animation (no opacity) — closing slides back up
           the same way it slid down. Mixing opacity makes the element
           fade out before the transform finishes, which feels asymmetric.
           visibility hides clicks once the menu is offscreen. */
        transform: translateY(-100%);
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0s linear 0.3s;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .gkshupxig1.tpicqzf1kzldu {
        transform: translateY(0);
        visibility: visible;
        transition: transform 0.3s ease;
    }

    .aboetjw29bj {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 12px 0;
        flex: 1;
    }

    .aboetjw29bj a {
        padding: 14px 32px;
        color: var(--text-secondary);
        font-size: 18px;
        font-weight: 600;
        text-decoration: none;
        text-align: center;
        transition: all 0.2s;
    }

    .aboetjw29bj a:hover {
        background: rgba(255, 255, 255, 0.03);
        color: var(--text-primary);
    }

    .q1jyq3x6w3kp25 {
        display: block;
        margin: 8px 24px 12px;
        padding: 12px;
        background: var(--accent-color, #FFD700);
        color: var(--accent-text-color);
        text-align: center;
        font-weight: 700;
        font-size: 15px;
        border-radius: 10px;
        text-decoration: none;
        transition: opacity 0.2s;
    }

    .q1jyq3x6w3kp25:hover {
        opacity: 0.9;
    }

    .m22cpoan {
        padding: 12px 24px 16px;
        border-top: 1px solid var(--border-default);
    }

    .ywjsym62j8w8 {
        display: block;
        color: var(--text-tertiary);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 12px;
    }

    .bqi6c03vf2a1 {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .zgpqq0sq {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 6px 10px;
        color: var(--text-tertiary);
        font-size: 12px;
        text-decoration: none;
        border-radius: 8px;
        border: 1px solid var(--border-default);
        transition: all 0.2s;
    }

    .zgpqq0sq:hover,
    .zgpqq0sq.lq8qkns0tsl {
        color: var(--text-primary);
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.15);
    }

    .zgpqq0sq img {
        border-radius: 2px;
    }

    .d3m64236r {
        flex-wrap: wrap;
    }

    .vshatb0sr5v2 {
        flex-direction: column;
        gap: 32px;
        text-align: center;
    }
    .fnss2do3py {
        max-width: 100%;
    }
    .m3u4qx2rlx {
        margin: 0 auto 14px;
    }
    .q460qr6me0ty {
        justify-content: center;
    }
    .lo8p064qibyau0 {
        flex-direction: column;
        gap: 24px;
        align-items: center;
    }
    .fpybvgr860nv {
        align-items: center;
    }
    .z7nwj2p402xd6x {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    .z7nwj2p402xd6x .qpnsh485b {
        width: 100%;
        text-align: center;
        margin-bottom: 2px;
    }
    .de2kjtcmah4xs9 {
        gap: 12px;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
    }
    .de2kjtcmah4xs9::-webkit-scrollbar {
        display: none;
    }
    .a1b369hm2lanbm {
        width: 48px;
        height: 32px;
    }
    .a1b369hm2lanbm img {
        max-height: 26px;
        max-width: 48px;
    }
    .okcckq87 {
        gap: 10px;
    }
    .r8hpyl2p9ez146 img {
        height: 32px;
    }
    .yd6olhbwk {
        font-size: 24px;
    }

    .jidtmz4r04r {
        grid-template-columns: 1fr 1fr;
    }
    .svgescqa4kv7:not(:last-child)::after {
        display: none;
    }
}

/* === Responsive: Phone === */

@media (max-width: 480px) {
    .mkdknmehe {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .k16doy73ub {
        padding: 0 16px;
    }

    .h6327bx6jludtr {
        padding: 0;
    }

    .jbbh5jfvut {
        margin: 8px;
        padding: 32px 20px 28px;
    }

    .vzh1qdnw {
        font-size: 1.25rem;
    }

    .ktm08c8223bqy {
        padding: 12px 32px;
        font-size: 14px;
        width: 100%;
        justify-content: center;
    }

    .p6n8l6r2c {
        grid-template-columns: 1fr;
    }

    .uw3yw6u6ik5pw5 td {
        padding: 12px 16px;
        font-size: 13px;
    }

    .vanzxe3n4 {
        width: 45%;
    }

    .b9qp5zc9q,
    .hvp8mtx6zp {
        padding: 16px;
    }

    .jidtmz4r04r {
        grid-template-columns: 1fr;
    }

    .svgescqa4kv7 {
        padding: 20px;
        padding: 16px;
    }

    .a77c7ak1j77c {
        padding: 16px 18px;
        font-size: 13px;
    }

    .sjjrbu34fpxr.tpicqzf1kzldu .b9hhumlv0y {
        padding: 0 18px 16px;
    }

    .t8buq39yjyb {
        padding: 20px 32px;
    }

    .d1y6di1oi th,
    .d1y6di1oi td {
        padding: 10px 14px;
        font-size: 13px;
    }
}

/* ============================================================
   404 Page — centered branded error screen
   ============================================================ */
.potdk8x6 {
    text-align: center;
    padding: 80px 24px 100px;
    max-width: 640px;
    margin: 0 auto;
    position: relative;
}
.goi6g6u8m {
    font-size: clamp(120px, 22vw, 200px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.06em;
    background: linear-gradient(180deg, var(--accent-color) 0%, rgba(212, 160, 23, 0.2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 16px;
    position: relative;
}
.goi6g6u8m::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 320px;
    height: 320px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 65%);
    z-index: -1;
    pointer-events: none;
}
.potdk8x6 h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 14px;
    letter-spacing: -0.02em;
}
.potdk8x6 p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 auto 36px;
    max-width: 480px;
}
.xc8ye4c8o11ti {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.b435m56d {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.nnhpnw2q {
    background: var(--accent-color);
    color: var(--accent-text-color);
    box-shadow: 0 8px 24px -8px var(--accent-color);
}
.nnhpnw2q:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -8px var(--accent-color); }
.t00g2mnkse0 {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
}
.t00g2mnkse0:hover { background: var(--bg-hover); border-color: var(--border-hover); }
@media (max-width: 640px) {
    .potdk8x6 { padding: 50px 20px 70px; }
    .potdk8x6 h1 { font-size: 24px; }
    .potdk8x6 p { font-size: 14px; }
}

/* ============================================================
   Icon-bearing classes — base layout.
   The actual `background-image: url(...)` for each icon is appended
   per-site at build time (see builder._inject_icon_backgrounds).
   ============================================================ */

.ztjo79bshm9d9 {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    object-fit: cover;
}
.npa6v65ynuavx {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    object-fit: cover;
}
.bdcz9ibrpnp4 {
    width: 16px;
    height: 12px;
    border-radius: 2px;
    object-fit: cover;
}

.dlje169nf6m4x::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
}

.okmgwc7sbwsez {
    width: 38px;
    height: 38px;
    padding: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
}

/* Burger is now CSS-drawn (see the main `.fmn4g2znmj` rule near the top of
   this file). The old icon-style baseline used to live here. */

.thh31rhrllk {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 22px 22px;
}

.sibuncnxvj {
    display: inline-block;
    width: 10px;
    height: 6px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 4px;
    vertical-align: middle;
}

.nonnnfvm1921::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 6px;
    vertical-align: middle;
}

.l4czwez6x {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px 18px;
}


/* === Cookie banner === */
/* === Cookie Banner === */

.bmt0mw5di {
    position: fixed;
    top: 8px;
    left: 50%;
    width: 92%;
    max-width: 960px;
    transform: translateX(-50%) translateY(-120%);
    background: var(--bg-card, #141418);
    color: var(--text-primary, #fafafa);
    z-index: 10000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    border-radius: var(--radius-lg, 14px);
    border: 1px solid var(--border-default, rgba(255, 255, 255, 0.06));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

.bmt0mw5di.su0ud39gnn {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.bbvji36n0 {
    padding-top: var(--cookie-banner-height, 0px);
    transition: padding-top 0.4s ease-out;
}

.ms2di6dyxvw {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.v2f1e0ape {
    flex: 1;
    min-width: 200px;
    font-size: 13px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.5;
}

.bhf0q0ia {
    font-size: 20px;
    flex-shrink: 0;
}

.hmq7c1gkxear {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.b5zboizu361 {
    padding: 8px 18px;
    border-radius: var(--radius-sm, 6px);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.tlc86fcsvntm62,
.ipt0rgr566oxa {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-default, rgba(255, 255, 255, 0.06));
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
}

.tlc86fcsvntm62:hover,
.ipt0rgr566oxa:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-primary, #fff);
}

.czabft7bymy {
    background: var(--accent-color, #d4a017);
    color: var(--bg-base, #09090b);
}

.czabft7bymy:hover {
    filter: brightness(1.1);
}

/* === Cookie Modal === */

.jc29xs95 {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10001;
    align-items: center;
    justify-content: center;
}

.iel9h8uako5xi {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.ehwc6yqd5 {
    position: relative;
    background: var(--bg-card, #141418);
    border: 1px solid var(--border-default, rgba(255, 255, 255, 0.06));
    border-radius: var(--radius-lg, 14px);
    width: 90%;
    max-width: 460px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    color: var(--text-primary, #fafafa);
}

.k1szcn2y {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border-default, rgba(255, 255, 255, 0.06));
}

.k1szcn2y h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.uw1i9o5aq {
    background: none;
    border: none;
    color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.2s;
}
.uw1i9o5aq::before { content: "×"; }

.uw1i9o5aq:hover {
    color: var(--text-primary, #fff);
}

.j0ci4uv6vihvll {
    padding: 8px 24px;
}

.ei10oroa0ijpnc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-default, rgba(255, 255, 255, 0.06));
}

.ei10oroa0ijpnc:last-child {
    border-bottom: none;
}

.hjqfs3tlz {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 3px;
}

.kgv6lahv0o64 {
    font-size: 12px;
    color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
    line-height: 1.4;
}

/* Toggle switch */
.oe41vn0eblc {
    width: 42px;
    height: 22px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.pfkokp876axv {
    cursor: not-allowed;
    opacity: 0.5;
}

.jo2nxfqy {
    width: 100%;
    height: 100%;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.1);
    transition: background 0.2s;
}

.jo2nxfqy.lq8qkns0tsl {
    background: var(--accent-color, #d4a017);
}

.fd6kbzubo {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: left 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

.fd6kbzubo.lq8qkns0tsl {
    left: 22px;
}

/* Modal footer */
.gmul4j6ay1q5sy {
    display: flex;
    gap: 8px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--border-default, rgba(255, 255, 255, 0.06));
}

.q3itwvujv34 {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-default, rgba(255, 255, 255, 0.06));
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
}

.q3itwvujv34:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #fff);
}

.qdsdi8o5j2 {
    background: var(--accent-color, #d4a017);
    color: var(--bg-base, #09090b);
    flex: 1;
}

.qdsdi8o5j2:hover {
    filter: brightness(1.1);
}

.rqkdpzk5xyn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-default, rgba(255, 255, 255, 0.06));
    color: var(--text-primary, #fff);
}

.rqkdpzk5xyn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Mobile */
@media (max-width: 640px) {
    .bmt0mw5di {
        width: 96%;
        top: 4px;
    }
    .ms2di6dyxvw {
        padding: 12px 14px;
        gap: 10px;
    }
    .v2f1e0ape {
        font-size: 12px;
    }
    .hmq7c1gkxear {
        width: 100%;
    }
    .b5zboizu361 {
        flex: 1;
        padding: 8px 10px;
        font-size: 12px;
        text-align: center;
    }
}

:root{--bg-base:#000000;--accent-color:#f5c757;--accent-text-color:#09090b;--text-primary:#ffffff;--text-secondary:#ffffff;--hero-overlay-opacity:0.55;--font-main:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif}

.i84ficvy8{background-image:url('/static/play-arrow.svg')}
.dlje169nf6m4x::before{background-image:url('/static/profile.svg')}
.okmgwc7sbwsez{background-image:url('/static/profile.svg')}
.sibuncnxvj{background-image:url('/static/drop.svg')}
.thh31rhrllk{background-image:url('/static/top.svg')}
.nonnnfvm1921::before{background-image:url('/static/ic-fs.svg')}
.uvzg0kvu7{background-image:url('/static/ic-fb.svg')}
.wk4otocd7zdh{background-image:url('/static/x.svg')}
.aza4r40t{background-image:url('/static/x.svg')}
.lb5jq70qpr0pw{background-image:url('/static/x.svg')}
.gmpuri8rriwc84{background-image:url('/static/ic-ig.svg')}
.ns2lbbnq22gfwa{background-image:url('/static/social-tg.svg')}
.r5ccmcvnoysizg{background-image:url('/static/yt.svg')}
.e17mc47h{background-image:url('/static/in.svg')}
.czi6y95i8cq{background-image:url('/static/tiktok.svg')}
.a9sprwlbv{background-image:url('/static/dc.svg')}