:root{
    --bg:#050817;
    --bg2:#080d1f;
    --panel:#0c132b;
    --panel2:#101936;
    --line:rgba(143,170,255,.14);
    --line2:rgba(103,220,255,.35);
    --text:#f7f9ff;
    --muted:#98a7c7;
    --cyan:#67ddff;
    --purple:#9d7cff;
    --green:#63e6ad;
    --danger:#ff7997;
    --radius:20px;
    --shadow:0 24px 70px rgba(0,0,0,.34);
    --tebex-legal-footer-background-color:#050817;
    --tebex-legal-footer-text-color:#7f8ca8;
    --tebex-legal-footer-border-color:rgba(143,170,255,.12);
    --tebex-legal-footer-max-width:1320px
}

*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth;
    background:var(--bg)
}

body.spm-body{
    margin:0!important;
    min-height:100vh!important;

    background:
        radial-gradient(circle at 10% -10%,rgba(45,112,255,.17),transparent 34rem),
        radial-gradient(circle at 90% 0,rgba(152,70,255,.13),transparent 35rem),
        linear-gradient(180deg,#050817,#070a17)!important;

    color:var(--text)!important;

    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif!important
}

a{
    color:inherit
}

.spm-site,
.site{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;

    overflow:visible!important;

    background:transparent!important;
    box-shadow:none!important
}


/* =========================================================
   TOP BAR
   ========================================================= */

.spm-topbar{
    position:relative;
    z-index:90;

    height:78px;

    border-bottom:1px solid var(--line);

    background:rgba(5,8,23,.92);

    backdrop-filter:blur(18px)
}

.spm-topbar-inner{
    width:min(1160px,calc(100% - 42px));
    height:100%;

    margin:auto;

    display:grid;
    grid-template-columns:210px 1fr auto;
    align-items:center;

    gap:26px
}


/* =========================================================
   BRAND
   ========================================================= */

.spm-brand{
    display:inline-flex;
    align-items:center;

    text-decoration:none;

    min-width:0
}

.spm-brand img{
    display:block;

    height:46px;
    max-width:205px;
    width:auto;

    object-fit:contain
}

.spm-wordmark{
    font-size:1.35rem;
    font-weight:950;
    letter-spacing:.15em
}

.spm-wordmark span,
.spm-mobile-nav-head span,
.spm-footer-brand strong span{
    color:var(--cyan)
}


/* =========================================================
   HEADER USER ACTIONS
   ========================================================= */

.spm-user-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;

    gap:10px;

    min-width:0
}


/* =========================================================
   BASKET PANEL
   ========================================================= */

.spm-basket-panel{
    position:relative;

    height:48px;
    min-width:130px;

    padding:0 12px;

    display:flex!important;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    border:1px solid rgba(103,221,255,.25);
    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            rgba(103,221,255,.08),
            rgba(157,124,255,.06)
        ),
        rgba(255,255,255,.025);

    color:#fff!important;

    text-decoration:none!important;

    overflow:hidden;

    transition:
        border-color .18s,
        background .18s,
        transform .18s,
        box-shadow .18s
}

.spm-basket-panel:hover{
    color:#fff!important;

    text-decoration:none!important;

    border-color:rgba(103,221,255,.55);

    background:
        linear-gradient(
            135deg,
            rgba(103,221,255,.13),
            rgba(157,124,255,.10)
        ),
        rgba(255,255,255,.035);

    box-shadow:0 8px 25px rgba(0,0,0,.20);

    transform:translateY(-1px)
}


/* =========================================================
   ACCOUNT / IGN PANEL
   ========================================================= */

.spm-account-panel{
    position:relative;

    height:48px;
    width:195px;

    padding:0 5px 0 13px;

    display:flex!important;
    align-items:center;
    justify-content:space-between;

    gap:8px;

    overflow:hidden;

    border:1px solid rgba(157,124,255,.25);
    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            rgba(157,124,255,.08),
            rgba(103,221,255,.05)
        ),
        rgba(255,255,255,.025);

    color:#fff!important;

    text-decoration:none!important;

    transition:
        border-color .18s,
        background .18s,
        transform .18s,
        box-shadow .18s
}

.spm-account-panel:hover{
    color:#fff!important;

    text-decoration:none!important;

    border-color:rgba(157,124,255,.55);

    background:
        linear-gradient(
            135deg,
            rgba(157,124,255,.14),
            rgba(103,221,255,.08)
        ),
        rgba(255,255,255,.04);

    box-shadow:0 8px 25px rgba(0,0,0,.20);

    transform:translateY(-1px)
}

.spm-account-panel.is-logged-in{
    border-color:rgba(99,230,173,.28)
}

.spm-account-panel.is-logged-in:hover{
    border-color:rgba(99,230,173,.55)
}


/* =========================================================
   PANEL TEXT
   ========================================================= */

.spm-panel-text{
    display:flex;
    flex-direction:column;
    justify-content:center;

    min-width:0;

    line-height:1
}

.spm-panel-text small{
    display:block;

    margin-bottom:4px;

    color:var(--muted);

    font-size:7px;
    font-weight:850;
    letter-spacing:.11em;
    line-height:1;

    text-transform:uppercase;

    white-space:nowrap
}

.spm-panel-text strong{
    display:block;

    max-width:122px;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:#fff;

    font-size:10px;
    font-weight:950;
    letter-spacing:.03em;
    line-height:1.15;

    text-decoration:none!important;
    text-transform:uppercase
}


/* =========================================================
   BASKET NUMBER
   ========================================================= */

.spm-panel-count{
    min-width:23px;
    height:23px;

    padding:0 6px;

    display:grid;
    place-items:center;

    flex-shrink:0;

    border:1px solid rgba(103,221,255,.25);
    border-radius:8px;

    background:
        linear-gradient(
            135deg,
            rgba(103,221,255,.15),
            rgba(157,124,255,.18)
        );

    color:var(--cyan);

    font-size:9px;
    font-weight:950
}


/* =========================================================
   PLAYER SKIN
   ========================================================= */

.spm-skin-preview{
    position:relative;

    width:43px;
    height:48px;

    display:flex;
    align-items:flex-end;
    justify-content:center;

    flex:0 0 43px;

    overflow:hidden;

    border-left:1px solid rgba(255,255,255,.05)
}

.spm-skin-preview img{
    display:block!important;

    width:auto!important;
    height:44px!important;

    max-width:42px!important;
    max-height:44px!important;

    margin:0!important;
    padding:0!important;

    object-fit:contain;
    object-position:center bottom;

    image-rendering:pixelated
}


/* =========================================================
   ACCOUNT GLOW
   ========================================================= */

.spm-account-panel:after{
    content:"";

    position:absolute;

    right:-25px;
    bottom:-45px;

    width:85px;
    height:85px;

    border-radius:50%;

    background:rgba(157,124,255,.11);

    pointer-events:none
}

.spm-account-panel.is-logged-in:after{
    background:rgba(99,230,173,.09)
}

.spm-account-panel > *{
    position:relative;
    z-index:2
}


/* =========================================================
   OLD LOGIN STYLING
   Kept for compatibility elsewhere
   ========================================================= */

.spm-login{
    display:inline-flex;
    align-items:center;

    gap:7px;

    height:40px;

    padding:0 14px;

    border:1px solid var(--line);
    border-radius:12px;

    text-decoration:none;

    color:#d9e2f7;

    font-size:.82rem;
    font-weight:800;

    background:rgba(255,255,255,.025)
}

.spm-login:hover{
    border-color:var(--line2)
}

.spm-online-dot{
    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--green);

    box-shadow:0 0 10px var(--green)
}


/* =========================================================
   OLD BASKET STYLING
   Kept for compatibility elsewhere
   ========================================================= */

.spm-basket{
    height:42px!important;

    min-width:122px!important;

    padding:0 12px!important;

    border:1px solid rgba(103,221,255,.34)!important;
    border-radius:12px!important;

    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;

    gap:8px!important;

    background:
        linear-gradient(
            135deg,
            #6adfff,
            #9d80ff
        )!important;

    color:#06101d!important;

    font-weight:900!important
}

.spm-basket-count{
    min-width:21px;
    height:21px;

    padding:0 6px;

    border-radius:999px;

    display:grid;
    place-items:center;

    background:#fff;

    color:#09111f;

    font-size:.72rem;
    font-weight:950
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.spm-menu-button{
    display:none!important;

    width:42px;
    height:42px;

    border:1px solid var(--line);
    border-radius:11px;

    background:rgba(255,255,255,.035);

    padding:10px
}

.spm-menu-button span{
    display:block;

    height:2px;

    margin:4px 0;

    border-radius:2px;

    background:#eef4ff
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.spm-navigation{
    display:block!important;

    position:relative!important;

    z-index:95!important;

    background:transparent!important;

    border:0!important;

    margin:0!important;
    padding:0!important
}

.spm-mobile-nav-head{
    display:none
}

.spm-nav-list{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    gap:2px!important;

    list-style:none!important;

    margin:0!important;
    padding:0!important
}

.spm-nav-list>li{
    position:relative;

    display:flex;
    align-items:center
}

.spm-nav-list>li>a{
    height:46px;

    display:inline-flex;
    align-items:center;

    padding:0 13px;

    border-radius:10px;

    text-decoration:none;

    color:#99a7c8;

    font-size:.8rem;
    font-weight:850;

    transition:.18s
}

.spm-nav-list>li>a:hover,
.spm-nav-list>li.active>a{
    color:#fff;

    background:rgba(103,221,255,.07)
}

.spm-nav-list>li.active>a:after{
    content:"";

    position:absolute;

    left:18px;
    right:18px;
    bottom:-16px;

    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--purple)
        );

    box-shadow:
        0 0 12px rgba(103,221,255,.7)
}


/* =========================================================
   NAVIGATION DROPDOWNS
   ========================================================= */

.spm-submenu-toggle{
    width:24px;
    height:28px;

    margin-left:-9px;

    border:0;

    background:transparent;

    color:#7f8dac;

    cursor:pointer
}

.spm-nav-list>li>ul{
    position:absolute;

    top:48px;
    left:50%;

    min-width:215px;

    margin:0;
    padding:8px;

    list-style:none;

    border:1px solid var(--line2);
    border-radius:14px;

    background:rgba(8,13,31,.98);

    box-shadow:var(--shadow);

    opacity:0;
    visibility:hidden;

    transform:translate(-50%,8px);

    transition:.16s
}

.spm-nav-list>li:hover>ul,
.spm-nav-list>li.spm-expanded>ul{
    opacity:1;
    visibility:visible;

    transform:translate(-50%,0)
}

.spm-nav-list>li>ul a{
    display:block;

    padding:10px 11px;

    border-radius:8px;

    text-decoration:none;

    color:#a8b5d0;

    font-size:.8rem;
    font-weight:750
}

.spm-nav-list>li>ul a:hover,
.spm-nav-list>li>ul .active a{
    background:rgba(103,221,255,.08);

    color:#fff
}
/* =========================================================
   ECONOMY GEM PACKAGE ARTWORK
   Faceted gem logo used only on /category/economy-gems
   ========================================================= */

.spm-gem-product-card .spm-gem-product-media{
    position:relative;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(103,221,255,.13),
            transparent 38%
        ),
        radial-gradient(
            circle at 65% 35%,
            rgba(157,124,255,.10),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(16,25,54,.98),
            rgba(10,18,39,.98)
        )!important
}

.spm-gem-product-card .spm-gem-product-media:before{
    content:"";

    position:absolute;

    width:150px;
    height:150px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(103,221,255,.11),
            transparent 66%
        );

    filter:blur(2px);

    pointer-events:none
}

.spm-gem-product-logo{
    position:relative;
    z-index:2;

    width:92px;
    height:82px;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:
        transform .2s ease,
        filter .2s ease
}

.spm-gem-product-logo svg{
    display:block;

    width:76px;
    height:auto;

    overflow:visible;

    filter:
        drop-shadow(0 0 8px rgba(103,221,255,.50))
        drop-shadow(0 8px 20px rgba(57,109,255,.28))
}

.spm-gem-product-card:hover .spm-gem-product-logo{
    transform:
        translateY(-2px)
        scale(1.06);

    filter:brightness(1.08)
}

.spm-gem-product-logo .gem-outline{
    fill:#66dcff;
    stroke:#c9f7ff;
    stroke-width:1.25;
    stroke-linejoin:round
}

.spm-gem-product-logo .gem-facet-a{
    fill:#c9f9ff
}

.spm-gem-product-logo .gem-facet-b{
    fill:#8feaff
}

.spm-gem-product-logo .gem-facet-c{
    fill:#70d7ff
}

.spm-gem-product-logo .gem-facet-d{
    fill:#899cff
}

.spm-gem-product-logo .gem-facet-e{
    fill:#4ebfff
}

.spm-gem-product-logo .gem-facet-f{
    fill:#718fff
}

.spm-gem-product-logo .gem-facet-g{
    fill:#9a78ff
}

.spm-gem-product-logo .gem-line{
    fill:none;

    stroke:rgba(235,252,255,.50);
    stroke-width:1;

    vector-effect:non-scaling-stroke
}

.spm-gem-product-logo .gem-shine{
    fill:rgba(255,255,255,.88)
}

.spm-gem-product-card .spm-product-meta>span{
    color:var(--cyan)
}

@media(max-width:700px){
    .spm-gem-product-logo{
        width:80px;
        height:72px
    }

    .spm-gem-product-logo svg{
        width:68px
    }
}