/* ==========================================================================
   THEME TOKENS
   ========================================================================== */
:root{
    --primary-color:#22c55e;
    --primary-light:#4ade80;
    --primary-dark:#16a34a;

    --secondary-color:#0b1324;
    --secondary-light:#24324b;
    --secondary-dark:#060a14;

    --background-light:#0a1020;
    --background-dark:#050812;

    --text-light:#f2f7ff;
    --text-dark:#b7c6da;

    --error-color:#ef4444;
    --success-color:#22c55e;
    --warning-color:#f59e0b;

    --border-radius:14px;
    --box-shadow:0 10px 22px rgba(0,0,0,.35);
    --transition:all .28s ease;

    --links-hover:var(--primary-light);

    --rarity-consumer-rgb:148,163,184;
    --rarity-industrial-rgb:96,165,250;
    --rarity-milspec-rgb:59,130,246;
    --rarity-restricted-rgb:147,51,234;
    --rarity-classified-rgb:236,72,153;
    --rarity-covert-rgb:239,68,68;
    --rarity-exotic-rgb:196,69,255;
    --rarity-extraordinary-rgb:250,204,21;
    --rarity-base-rgb:255,255,255;
    --rarity-other-rgb:255,255,255;
}

/* ==========================================================================
   BASE / RESET
   ========================================================================== */
[hidden]{display:none!important;}
*{margin:0;padding:0;box-sizing:border-box;}

input[type=number]{-moz-appearance:textfield;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}

body{
    font-family:'Roboto',sans-serif;
    line-height:1.6;
    color:var(--text-light);
    background:
        radial-gradient(900px 520px at 20% 10%, rgba(34,197,94,.10), transparent 60%),
        radial-gradient(860px 480px at 85% 0%, rgba(56,189,248,.08), transparent 62%),
        linear-gradient(180deg, var(--background-dark), var(--secondary-dark));
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.05;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/></filter><rect width='200' height='200' filter='url(%23noise)'/></svg>");
    z-index:-1;
}

h1,h2,h3,h4,h5,h6{
    font-family:'Oxanium',sans-serif;
    font-weight:650;
    color:var(--text-light);
}

.container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header{
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
        rgba(6,10,20,.88);
    color:var(--text-light);
    padding:14px 0;
    box-shadow:var(--box-shadow);
    position:sticky;
    top:0;
    z-index:100;
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,.06);
}

.main-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    font-family:'Oxanium',sans-serif;
    font-size:24px;
    font-weight:800;
    color:var(--text-light);
    text-decoration:none;
    max-height:52px;
    letter-spacing:.2px;
}
.logo img{height:50px;}

.nav-links{
    display:flex;
    gap:28px;
    align-items:center;
    margin-right:auto;
    margin-left:40px;
}

.nav-links a{
    color:rgba(242,247,255,.92);
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 0;
    position:relative;
    font-weight:560;
    transition:color .2s ease, transform .2s ease;
}

.nav-links a:has(.nav-soon){
    pointer-events:none;
    opacity:.6;
    cursor:not-allowed;
}

.nav-links a:hover{
    color:var(--primary-light);
    transform:translateY(-1px);
}

.nav-links a.active{
    color:var(--primary-color);
}

.nav-links a.active::after{
    content:"";
    position:absolute;
    bottom:-4px;
    left:0;
    width:100%;
    height:2px;
    background:linear-gradient(90deg, var(--primary-color), rgba(56,189,248,.85));
    border-radius:2px;
}

.nav-soon{
    background:linear-gradient(90deg, var(--primary-color), rgba(56,189,248,.9));
    color:#061018;
    padding:1px 7px;
    border-radius:8px;
    font-size:10px;
    font-weight:800;
    display:inline-block;
    margin-left:4px;
    text-transform:uppercase;
    letter-spacing:.35px;
    opacity:.95;
}

.nav-links a:hover .nav-soon{
    filter:saturate(1.05) brightness(1.02);
    opacity:1;
}

.nav-links a i{
    font-size:14px;
    opacity:.9;
    transition:opacity .2s ease;
}
.nav-links a:hover i{opacity:1;}

.nav-actions{display:flex;gap:15px;}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 20px;
    border-radius:var(--border-radius);
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
    border:2px solid transparent;
    text-decoration:none;
    transform:translateZ(0);
}

.btn-primary{
    background:
        linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)),
        linear-gradient(90deg, var(--primary-color), rgba(56,189,248,.75));
    color:#041014;
}
.btn-primary:hover{
    filter:brightness(1.03);
    box-shadow:0 0 0 3px rgba(34,197,94,.12), 0 14px 26px rgba(0,0,0,.35);
}

.btn-outline{
    background:rgba(255,255,255,.03);
    color:var(--text-light);
    border:2px solid rgba(255,255,255,.22);
    padding:9px 18px;
    border-radius:var(--border-radius);
    cursor:pointer;
    transition:all .25s ease;
    position:relative;
    overflow:hidden;
    backdrop-filter:blur(6px);
}

.btn-outline::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(34,197,94,.22), rgba(56,189,248,.10));
    opacity:0;
    transition:opacity .25s ease;
}

.btn-outline:hover::before{opacity:1;}
.btn-outline:hover{
    border-color:rgba(34,197,94,.6);
    color:#fff;
    box-shadow:0 0 16px rgba(34,197,94,.18), 0 0 18px rgba(56,189,248,.12);
}

.btn-block{width:100%;display:block;}
.btn-disabled{background-color:rgba(36,50,75,.65);color:rgba(183,198,218,.8);cursor:not-allowed;}

/* ==========================================================================
   PAGE LAYOUT
   ========================================================================== */
.main-content{padding:42px 0;}
.page-title{
    margin-bottom:30px;
    font-size:34px;
    color:var(--text-light);
    text-align:center;
    letter-spacing:.2px;
}

.marketplace-grid{
    display:grid;
    grid-template-columns:250px 1fr;
    gap:30px;
}

/* ==========================================================================
   FILTERS SIDEBAR
   ========================================================================== */
.filters-sidebar{
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
        rgba(11,19,36,.78);
    border-radius:calc(var(--border-radius) + 2px);
    padding:20px;
    box-shadow:var(--box-shadow);
    height:fit-content;
    border:1px solid rgba(255,255,255,.06);
    backdrop-filter:blur(10px);
}

.filter-section{margin-bottom:25px;}

.filter-section .filter-title{
    margin-bottom:10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
}

.filter-section .filter-title h3{
    font-size:18px;
    color:var(--text-light);
}

.filter-section .filter-title i{
    font-size:18px;
    opacity:.28;
    transition:var(--transition);
}

.filter-section.active .filter-title i{transform:rotate(180deg);}

.filter-section .filter-items{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .35s ease, opacity .3s ease;
}
.filter-section.active .filter-items{
    max-height:520px;
    opacity:1;
}

.price-range{margin-bottom:20px;}
.price-inputs{display:flex;gap:15px;}
.price-input{flex:1;}

.price-input label{
    display:block;
    margin-bottom:5px;
    font-size:14px;
    color:var(--text-dark);
}

.filter-section input{
    width:100%;
    padding:9px 12px;
    border:1px solid rgba(36,50,75,.9);
    border-radius:12px;
    font-size:14px;
    background:rgba(6,10,20,.85);
    color:var(--text-light);
    transition:border-color .2s ease, box-shadow .2s ease;
}
.filter-section input:focus{
    outline:none;
    border-color:rgba(34,197,94,.75);
    box-shadow:0 0 0 3px rgba(34,197,94,.12);
}

/* ==========================================================================
   CHECKBOX
   ========================================================================== */
.checkbox-container{
    display:block;
    position:relative;
    padding-left:30px;
    margin-bottom:12px;
    cursor:pointer;
    user-select:none;
    color:var(--text-light);
}

.checkbox-container input{
    position:absolute;
    opacity:0;
    cursor:pointer;
    height:0;
    width:0;
}

.checkmark{
    position:absolute;
    top:0;
    left:0;
    height:20px;
    width:20px;
    background:rgba(6,10,20,.9);
    border:2px solid rgba(36,50,75,.9);
    border-radius:6px;
    transition:var(--transition);
}

.checkbox-container:hover input ~ .checkmark{border-color:rgba(34,197,94,.75);}
.checkbox-container input:checked ~ .checkmark{
    background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)), var(--primary-color);
    border-color:rgba(34,197,94,.85);
}

.checkmark:after{content:"";position:absolute;display:none;}
.checkbox-container input:checked ~ .checkmark:after{display:block;}
.checkbox-container .checkmark:after{
    left:6px;
    top:2px;
    width:5px;
    height:10px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

/* ==========================================================================
   SKINS GRID
   ========================================================================== */
.skins-grid{
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
        rgba(11,19,36,.78);
    border-radius:calc(var(--border-radius) + 2px);
    padding:20px;
    box-shadow:var(--box-shadow);
    display:flex;
    flex-direction:column;
    border:1px solid rgba(255,255,255,.06);
    backdrop-filter:blur(10px);
}

.skins-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.results-count{color:var(--text-dark);font-size:14px;}
.results-count i{color:rgba(56,189,248,.9);}

.sort-options select{
    padding:8px 12px;
    border-radius:12px;
    border:1px solid rgba(36,50,75,.9);
    background:rgba(6,10,20,.85);
    color:var(--text-light);
    font-size:14px;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.sort-options select:focus{
    outline:none;
    border-color:rgba(34,197,94,.75);
    box-shadow:0 0 0 3px rgba(34,197,94,.12);
}

.skins-container{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
    gap:22px;
    position:relative;
    height:100%;
}

.skin-card{
    display:flex;
    flex-direction:column;
    background:
        radial-gradient(700px 260px at 30% 0%, rgba(56,189,248,.08), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
        rgba(6,10,20,.70);
    border:1px solid rgba(255,255,255,.06);
    border-radius:16px;
    overflow:hidden;
    text-decoration:none;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    backdrop-filter:blur(10px);
	max-height: 300px;
}

.skin-card:hover{
    transform:translateY(-6px);
    border-color:rgba(34,197,94,.28);
    box-shadow:0 16px 34px rgba(0,0,0,.42);
}

.skin-image{
    width:100%;
    height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    padding:10px;
    overflow:hidden;
}

.skin-image img{
    max-width:90%;
    max-height:90%;
    object-fit:contain;
    filter:drop-shadow(0 14px 14px rgba(0,0,0,.55));
    transition:transform .25s ease;
}

.skin-card:hover .skin-image img{transform:scale(1.06);}

.skin-image::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    opacity:.40;
    background-image:
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,.05) 0,
            rgba(255,255,255,.05) 1px,
            transparent 2px,
            transparent 9px
        );
}

.skin-image::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:16px;
    z-index:-1;
    opacity:.32;
    filter:blur(28px);
    transition:.3s ease;
}
.skin-card:hover .skin-image::before{
    opacity:.55;
    filter:blur(38px);
}

.skin-card.rarity-consumer .skin-image::before{
    background:radial-gradient(circle, rgba(var(--rarity-consumer-rgb), .60), transparent 70%);
}
.skin-card.rarity-industrial .skin-image::before{
    background:radial-gradient(circle, rgba(var(--rarity-industrial-rgb), .62), transparent 70%);
}
.skin-card.rarity-milspec .skin-image::before{
    background:radial-gradient(circle, rgba(var(--rarity-milspec-rgb), .62), transparent 70%);
}
.skin-card.rarity-restricted .skin-image::before{
    background:radial-gradient(circle, rgba(var(--rarity-restricted-rgb), .62), transparent 70%);
}
.skin-card.rarity-classified .skin-image::before{
    background:radial-gradient(circle, rgba(var(--rarity-classified-rgb), .62), transparent 70%);
}
.skin-card.rarity-covert .skin-image::before{
    background:radial-gradient(circle, rgba(var(--rarity-covert-rgb), .62), transparent 70%);
}
.skin-card.rarity-exotic .skin-image::before{
    background:radial-gradient(circle, rgba(var(--rarity-exotic-rgb), .62), transparent 70%);
}
.skin-card.rarity-extraordinary .skin-image::before{
    background:radial-gradient(circle, rgba(var(--rarity-extraordinary-rgb), .68), transparent 70%);
}
.skin-card.rarity-base .skin-image::before{
    background:radial-gradient(circle, rgba(var(--rarity-base-rgb), .14), transparent 70%);
}
.skin-card.rarity-other .skin-image::before{
    background:radial-gradient(circle, rgba(var(--rarity-other-rgb), .10), transparent 70%);
}

.skin-info{
    padding:14px 16px 18px 16px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.skin-name{
    font-size:15px;
    font-weight:560;
    color:var(--text-light);
    line-height:1.4;
    min-height:40px;
}

.skin-price{
    font-size:18px;
    font-weight:800;
    color:rgba(56,189,248,.92);
    margin:0;
}

.skin-actions{
    margin-top:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.skin-actions .btn{
    padding:8px 14px;
    font-size:14px;
    border-radius:12px;
}

/* ==========================================================================
   FAQ / SUPPORT
   ========================================================================== */
.faq-container{
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
        rgba(11,19,36,.78);
    border-radius:calc(var(--border-radius) + 2px);
    padding:20px;
    box-shadow:var(--box-shadow);
    margin-bottom:30px;
    border:1px solid rgba(255,255,255,.06);
    backdrop-filter:blur(10px);
}

.faq-item{
    border-bottom:1px solid rgba(255,255,255,.10);
    padding:15px 0;
}
.faq-item:last-child{border-bottom:none;}

.faq-question{
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
}
.faq-question h3{font-size:18px;color:var(--text-light);}

.toggle-icon{transition:var(--transition);color:var(--text-light);opacity:.9;}

.faq-answer{
    overflow:hidden;
    padding-top:0;
    display:none;
}
.faq-answer p{padding-top:10px;color:var(--text-dark);}

.faq-item.active .faq-answer{max-height:220px;}
.faq-item.active .toggle-icon{transform:rotate(180deg);}

.contact-support{
    text-align:center;
    padding:30px;
    background:
        radial-gradient(820px 300px at 50% 0%, rgba(34,197,94,.10), transparent 65%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
        rgba(11,19,36,.78);
    border-radius:calc(var(--border-radius) + 2px);
    box-shadow:var(--box-shadow);
    border:1px solid rgba(255,255,255,.06);
    backdrop-filter:blur(10px);
}
.contact-support h2{color:var(--text-light);}
.contact-support p{color:var(--text-dark);}
.contact-support a{margin-top:10px;}

/* ==========================================================================
   PROFILE
   ========================================================================== */
.profile-container{
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
        rgba(11,19,36,.78);
    border-radius:calc(var(--border-radius) + 2px);
    padding:20px;
    box-shadow:var(--box-shadow);
    border:1px solid rgba(255,255,255,.06);
    backdrop-filter:blur(10px);
}

.profile-header{
    display:flex;
    align-items:center;
    gap:30px;
    padding-bottom:20px;
    border-bottom:1px solid rgba(255,255,255,.07);
    margin-bottom:20px;
}

.user-avatar{
    width:120px;
    height:120px;
    border-radius:50%;
    overflow:hidden;
    border:3px solid rgba(34,197,94,.85);
    flex-shrink:0;
    box-shadow:0 10px 20px rgba(0,0,0,.35);
}
.user-avatar img{width:100%;height:100%;object-fit:cover;}

.user-main-info{flex-grow:1;}
.user-main-info h2{font-size:24px;margin-bottom:10px;color:var(--text-light);}

.steam-id{
    display:flex;
    align-items:center;
    gap:5px;
    color:var(--text-dark);
    margin-bottom:15px;
}

.trade-url{display:flex;gap:10px;}
.trade-url input{
    flex-grow:1;
    padding:10px 15px;
    border:1px solid rgba(36,50,75,.9);
    border-radius:12px;
    font-size:14px;
    background:rgba(6,10,20,.85);
    color:var(--text-light);
    transition:border-color .2s ease, box-shadow .2s ease;
}
.trade-url input:focus{
    outline:none;
    border-color:rgba(34,197,94,.75);
    box-shadow:0 0 0 3px rgba(34,197,94,.12);
}

.trade-url-container{
    background:rgba(6,10,20,.55);
    padding:15px;
    border-radius:14px;
    width:100%;
    border:1px solid rgba(255,255,255,.06);
}
.trade-url-container h3{font-size:14px;color:var(--text-dark);margin-bottom:10px;}
.trade-url-container a{
    color:rgba(56,189,248,.95);
    opacity:.9;
    text-decoration:none;
    transition:opacity .2s ease, color .2s ease;
}
.trade-url-container a:hover{opacity:1;color:var(--primary-light);}

.profile-tabs{display:flex;gap:10px;margin-bottom:20px;}

.tab-btn{
    padding:10px 20px;
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.06);
    border-radius:14px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--text-dark);
    transition:var(--transition);
    backdrop-filter:blur(8px);
}
.tab-btn:hover{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.22);color:var(--text-light);}
.tab-btn.active{
    background:
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)),
        linear-gradient(90deg, var(--primary-color), rgba(56,189,248,.75));
    color:#041014;
    border-color:rgba(255,255,255,.10);
}

.profile-content{
    background:rgba(6,10,20,.70);
    border-radius:calc(var(--border-radius) + 2px);
    padding:20px;
    box-shadow:var(--box-shadow);
    position:relative;
    min-height:250px;
    border:1px solid rgba(255,255,255,.06);
    backdrop-filter:blur(10px);
}

.content-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}
.content-header h2{font-size:24px;color:var(--text-light);}

/* ==========================================================================
   INVENTORY
   ========================================================================== */
.inventory-grid{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.inventory-item{
    display:flex;
    align-items:stretch;
    width:100%;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
        rgba(6,10,20,.66);
    backdrop-filter:blur(10px);
    border-radius:18px;
    border:1px solid rgba(255,255,255,.06);
    overflow:hidden;
    transition:.25s ease;
    --rarity-rgb:var(--rarity-base-rgb);
}

.inventory-item:hover{
    border-color:rgba(34,197,94,.22);
    box-shadow:0 14px 32px rgba(0,0,0,.42);
}

.item-image{
    width:110px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:6px;
    background:
        radial-gradient(circle at 50% 30%, rgba(56,189,248,.08), transparent 60%),
        radial-gradient(circle at 60% 120%, rgba(34,197,94,.12), transparent 55%),
        linear-gradient(180deg, rgba(11,19,36,.9), rgba(6,10,20,.92));
    position:relative;
    flex-shrink:0;
    overflow:hidden;
    z-index:0;
}

.item-image::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
    background-image:
        repeating-linear-gradient(
            45deg,
            rgba(var(--rarity-rgb), .07) 0px,
            rgba(var(--rarity-rgb), .07) 1px,
            transparent 2px,
            transparent 8px
        ),
        radial-gradient(
            circle at 50% 30%,
            rgba(var(--rarity-rgb), .12),
            rgba(var(--rarity-rgb), 0) 60%
        );
    background-size:auto, 100% 100%;
    background-repeat:repeat, no-repeat;
    background-position:center, center;
}

.item-image::before{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:45%;
    pointer-events:none;
    z-index:2;
    background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.22) 40%, rgba(0,0,0,.46) 100%);
}

.item-image img{
    position:relative;
    z-index:3;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    filter:drop-shadow(0 12px 14px rgba(0,0,0,.52));
    transition:.25s ease;
}
.inventory-item:hover .item-image img{transform:scale(1.06);}

.item-info{
    flex-grow:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:6px 16px;
    gap:6px;
}

.item-info h3{
    margin:0;
    font-size:17px;
    font-weight:560;
    color:var(--text-light);
    line-height:1.2;
}

.item-price{
    margin:0;
    font-size:19px;
    font-weight:850;
    color:rgba(56,189,248,.92);
}

.item-actions{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:6px 16px;
    flex-shrink:0;
    min-width:220px;
}

.item-actions .btn{
    padding:8px 14px;
    font-size:14px;
    border-radius:12px;
    white-space:nowrap;
}

.inventory-item.rarity-consumer{--rarity-rgb:var(--rarity-consumer-rgb);}
.inventory-item.rarity-industrial{--rarity-rgb:var(--rarity-industrial-rgb);}
.inventory-item.rarity-milspec{--rarity-rgb:var(--rarity-milspec-rgb);}
.inventory-item.rarity-restricted{--rarity-rgb:var(--rarity-restricted-rgb);}
.inventory-item.rarity-classified{--rarity-rgb:var(--rarity-classified-rgb);}
.inventory-item.rarity-covert{--rarity-rgb:var(--rarity-covert-rgb);}
.inventory-item.rarity-exotic{--rarity-rgb:var(--rarity-exotic-rgb);}
.inventory-item.rarity-extraordinary{--rarity-rgb:var(--rarity-extraordinary-rgb);}
.inventory-item.rarity-base{--rarity-rgb:var(--rarity-base-rgb);}
.inventory-item.rarity-other{--rarity-rgb:var(--rarity-other-rgb);}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
        rgba(6,10,20,.92);
    color:var(--text-dark);
    padding:42px 0 20px;
    border-top:1px solid rgba(255,255,255,.06);
    backdrop-filter:blur(10px);
}

.footer-content{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:30px;
    margin-bottom:30px;
}

.footer-section h4{
    font-size:18px;
    margin-bottom:15px;
    color:var(--text-light);
}

.footer-section p{
    margin-bottom:15px;
    color:var(--text-dark);
}

.footer-section ul{
    list-style:none;
    margin:0;
    padding:0;
}

.footer-section ul li{margin-bottom:10px;}

.footer-section ul li a{
    color:rgba(183,198,218,.92);
    text-decoration:none;
    font-size:15px;
    transition:color .2s ease, padding-left .2s ease;
    display:inline-block;
}

.footer-section ul li a:hover{
    color:rgba(56,189,248,.95);
    padding-left:4px;
}

.footer-payment{
    display:flex;
    align-items:center;
    gap:14px;
    opacity:.95;
}

.footer-payment img{
    height:22px;
    opacity:.52;
    transition:opacity .25s ease, transform .25s ease;
    filter:drop-shadow(0 0 0 transparent);
}

.footer-payment img:hover{
    opacity:1;
    transform:scale(1.06);
}

.footer-bottom{text-align:center;}

/* ==========================================================================
   DOCS / PRIVACY
   ========================================================================== */
.privacy p{text-wrap:pretty;}
.privacy h2{text-align:center;}
.privacy h3{display:inline-block;}

.privacy ol li{
    line-height:1.5;
    margin-bottom:10px;
}

.privacy ol li ol{
    margin-top:10px;
    padding-left:20px;
}

.privacy ol li ul{
    padding-left:20px;
    list-style:disc;
}

.privacy ul li{list-style:disc;}

.privacy ol{
    counter-reset:item;
    list-style:none;
}

.privacy ol li:before{
    content:counters(item,".") ". ";
    counter-increment:item;
    color:var(--links-hover);
}

.privacy ol li ul li:before{display:none;}

.privacy_table{margin:20px 0;}
.privacy_table h3{display:block;text-align:center;}

.privacy_table table{width:100%;}
.privacy_table td,
.privacy_table th{
    border:1px solid rgba(242,247,255,.18);
    padding:6px 8px;
}

/* ==========================================================================
   HEADER BALANCE / SMALL UTILITIES
   ========================================================================== */
.header-balance{
    display:flex;
    align-items:center;
    gap:6px;
    background:rgba(255,255,255,.04);
    padding:8px 14px;
    border-radius:14px;
    color:var(--text-light);
    font-weight:650;
    font-size:15px;
    text-decoration:none;
    cursor:pointer;
    border:1px solid rgba(255,255,255,.10);
    transition:all .25s ease;
    backdrop-filter:blur(10px);
}

.header-balance i{
    color:rgba(56,189,248,.95);
    font-size:16px;
}

.header-balance:hover{
    border-color:rgba(34,197,94,.30);
    background:rgba(34,197,94,.08);
    box-shadow:0 0 0 3px rgba(34,197,94,.10), 0 0 14px rgba(56,189,248,.10);
}

.balance-amount{white-space:nowrap;}
.btn-w142px{width:142px;}

/* ==========================================================================
   TOPUP LAYOUT
   ========================================================================== */
.topup-layout{
    display:grid;
    grid-template-columns:1fr 300px;
    gap:30px;
    background:
        radial-gradient(900px 320px at 18% 0%, rgba(34,197,94,.10), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
        rgba(6,10,20,.72);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.06);
    border-radius:18px;
    padding:30px;
    box-shadow:0 10px 22px rgba(0,0,0,.38);
    max-width:900px;
    margin:0 auto;
}

.topup-left{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.topup-right{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
    border-radius:16px;
    padding:20px;
    min-width:280px;
    backdrop-filter:blur(10px);
}

.topup-summary h3{
    margin-bottom:15px;
    color:var(--text-light);
    font-size:17px;
}

.summary-table{
    width:100%;
    border-collapse:collapse;
    border-bottom:1px solid rgba(255,255,255,.10);
}

.summary-table td{
    padding:8px 0;
    font-size:15px;
    color:var(--text-dark);
}

.summary-table .total td{
    border-top:1px solid rgba(255,255,255,.10);
    padding-top:10px;
    color:var(--text-light);
}

.summary-table tr td:last-child{text-align:right;}

.topup-email{margin-top:20px;}
.topup-email label{
    display:block;
    font-size:14px;
    color:var(--text-dark);
    margin-bottom:6px;
}

.topup-email input{
    width:100%;
    padding:10px 14px;
    border-radius:12px;
    border:1px solid rgba(36,50,75,.9);
    background:rgba(6,10,20,.85);
    color:var(--text-light);
    font-size:15px;
    outline:none;
    transition:.25s;
}
.topup-email input:focus{
    border-color:rgba(34,197,94,.75);
    box-shadow:0 0 0 3px rgba(34,197,94,.12);
}

.topup-right .topup-submit{margin-top:25px;}

.topup-field label{
    display:block;
    font-size:15px;
    color:var(--text-light);
    margin-bottom:8px;
}

.topup-input-wrapper{position:relative;}

.topup-input-wrapper input{
    width:100%;
    padding:14px 45px 14px 15px;
    border-radius:14px;
    border:1px solid rgba(36,50,75,.9);
    background:rgba(6,10,20,.85);
    color:var(--text-light);
    font-size:18px;
    outline:none;
    transition:.25s;
}
.topup-input-wrapper input:focus{
    border-color:rgba(34,197,94,.75);
    box-shadow:0 0 0 3px rgba(34,197,94,.12);
}

.topup-input-wrapper .currency{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    color:rgba(183,198,218,.8);
    font-size:16px;
}

.topup-presets{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.preset-btn{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    padding:8px 14px;
    cursor:pointer;
    color:var(--text-light);
    transition:.25s ease;
    font-size:15px;
    flex:1 1 30%;
    backdrop-filter:blur(10px);
}
.preset-btn:hover{
    background:rgba(34,197,94,.12);
    border-color:rgba(34,197,94,.35);
    transform:translateY(-2px);
}

.topup-methods h3{
    margin-bottom:10px;
    color:var(--text-light);
}

.method-card{
    display:block;
    margin-bottom:12px;
    cursor:pointer;
}

.method-card input{display:none;}

.method-card-empty{
    padding:15px;
    background-color:#ef4444;
    border-radius:12px;
    text-align:center;
    color:#fff;
    font-weight:650;
}

.method-content{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    transition:.25s;
    backdrop-filter:blur(10px);
}

.method-content i{
    color:rgba(56,189,248,.95);
    font-size:18px;
}

.method-card input:checked + .method-content{
    border-color:rgba(34,197,94,.45);
    background:rgba(34,197,94,.10);
    box-shadow:0 0 0 3px rgba(34,197,94,.10);
}

.topup-submit{margin-top:20px;}
.topup-submit button{
    width:100%;
    padding:15px;
    font-size:1rem;
}

/* ==========================================================================
   ITEM PAGE
   ========================================================================== */
.item-page{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:35px;
    margin-top:25px;
    --rarity-rgb:var(--rarity-base-rgb);
}

@media (max-width:900px){
    .item-page{grid-template-columns:1fr;}
}

.item-image-box{
    background:
        radial-gradient(900px 320px at 30% 0%, rgba(56,189,248,.08), transparent 65%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
        rgba(6,10,20,.68);
    padding:25px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.06);
    backdrop-filter:blur(10px);
    overflow:hidden;
    position:relative;
}

.item-image-box::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    opacity:.45;
    background-image:repeating-linear-gradient(
        45deg,
        rgba(255,255,255,.05) 0,
        rgba(255,255,255,.05) 1px,
        transparent 2px,
        transparent 9px
    );
}

.item-main-image{
    position:relative;
    z-index:2;
    height:350px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
}

.item-main-image::before{
    content:"";
    position:absolute;
    inset:-25px;
    z-index:-1;
    border-radius:20px;
    opacity:.65;
    filter:blur(42px);
    transition:.35s ease;
    background:radial-gradient(circle, rgba(var(--rarity-rgb), .74) 0%, rgba(var(--rarity-rgb), .22) 42%, transparent 75%);
}

.item-main-image::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    opacity:.35;
    background-image:repeating-linear-gradient(
        45deg,
        rgba(255,255,255,.05) 0,
        rgba(255,255,255,.05) 1px,
        transparent 2px,
        transparent 9px
    );
}

.item-image-box:hover .item-main-image::before{
    opacity:1;
    filter:blur(58px);
}

.item-main-image img{
    max-width:100%;
    max-height:100%;
    filter:drop-shadow(0 18px 14px rgba(0,0,0,.52));
    transition:.25s ease;
}
.item-image-box:hover img{transform:scale(1.03);}

.item-info-box{
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
        rgba(6,10,20,.70);
    padding:25px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.06);
    backdrop-filter:blur(10px);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.item-params{
    list-style:none;
    padding:0;
    margin:0 0 22px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.param-pill,
.item-params li{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    padding:8px 14px;
    border-radius:14px;
    font-size:14px;
    color:var(--text-light);
    white-space:nowrap;
    backdrop-filter:blur(10px);
}

.item-params li span{color:var(--text-light);}

.item-params .rarity-line{
    font-weight:750;
    border-color:rgba(var(--rarity-rgb), .35);
    background:rgba(var(--rarity-rgb), .14);
    color:rgb(var(--rarity-rgb));
}

.item-price-box{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:25px 0 35px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    padding:18px 25px;
    border-radius:18px;
    backdrop-filter:blur(10px);
    position:relative;
    overflow:hidden;
}

.item-price-box::after{
    content:"";
    position:absolute;
    inset:0;
    opacity:.35;
    z-index:-1;
    background-image:repeating-linear-gradient(
        45deg,
        rgba(255,255,255,.05) 0,
        rgba(255,255,255,.05) 1px,
        transparent 2px,
        transparent 9px
    );
}

.item-price-big{
    font-size:34px;
    font-weight:900;
    color:rgba(56,189,248,.95);
}

.item-page .item-actions .btn{
    font-size:18px;
    padding:14px 0;
}

.item-page.rarity-consumer{--rarity-rgb:var(--rarity-consumer-rgb);}
.item-page.rarity-industrial{--rarity-rgb:var(--rarity-industrial-rgb);}
.item-page.rarity-milspec{--rarity-rgb:var(--rarity-milspec-rgb);}
.item-page.rarity-restricted{--rarity-rgb:var(--rarity-restricted-rgb);}
.item-page.rarity-classified{--rarity-rgb:var(--rarity-classified-rgb);}
.item-page.rarity-covert{--rarity-rgb:var(--rarity-covert-rgb);}
.item-page.rarity-exotic{--rarity-rgb:var(--rarity-exotic-rgb);}
.item-page.rarity-extraordinary{--rarity-rgb:var(--rarity-extraordinary-rgb);}
.item-page.rarity-base{--rarity-rgb:var(--rarity-base-rgb);}
.item-page.rarity-other{--rarity-rgb:var(--rarity-other-rgb);}

/* ==========================================================================
   LOADER / EMPTY STATES
   ========================================================================== */
.loader-container{
    width:100%;
    min-height:250px;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:rgba(6,10,20,.62);
    backdrop-filter:blur(10px);
    border-radius:calc(var(--border-radius) + 2px);
    border:1px solid rgba(255,255,255,.06);
    position:absolute;
    inset:0;
    z-index:50;
    overflow:hidden;
}

.loader-container::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 50% 30%, rgba(34,197,94,.10), transparent 70%);
    z-index:0;
}

.loader-spinner{
    width:60px;
    height:60px;
    border:5px solid rgba(56,189,248,.16);
    border-top-color:rgba(34,197,94,.95);
    border-radius:50%;
    animation:loader-spin 1s linear infinite;
    z-index:1;
}

@keyframes loader-spin{to{transform:rotate(360deg);}}

.loader-text{
    margin-top:14px;
    font-size:15px;
    color:var(--text-light);
    opacity:.68;
    letter-spacing:.3px;
    z-index:1;
}

.empty-block{
    width:100%;
    min-height:250px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:rgba(6,10,20,.62);
    backdrop-filter:blur(10px);
    border-radius:calc(var(--border-radius) + 2px);
    border:1px solid rgba(255,255,255,.06);
    position:relative;
    overflow:hidden;
    text-align:center;
    padding:30px 20px;
    grid-column:1 / -1;
}

.empty-block::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 50% 30%, rgba(56,189,248,.10), transparent 70%);
    z-index:0;
}

.empty-block-icon{
    font-size:48px;
    color:rgba(56,189,248,.95);
    opacity:.9;
    margin-bottom:12px;
    z-index:1;
}

.empty-block-text{
    font-size:17px;
    font-weight:650;
    color:var(--text-light);
    opacity:.88;
    z-index:1;
}

.inventory-action{
    display:flex;
    justify-content:center;
    align-items:center;
    grid-column:1 / -1;
}

.loader-dots{display:inline-block;animation:dots-blink 1s infinite steps(3, end);}
@keyframes dots-blink{
    0%,100%{opacity:.2;transform:translateY(0);}
    50%{opacity:1;transform:translateY(-1px);}
}

/* ==========================================================================
   MODALS
   ========================================================================== */
.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.62);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:1000;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
    backdrop-filter:blur(10px);
}

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

.modal-box{
    background:
        radial-gradient(820px 300px at 30% 0%, rgba(34,197,94,.10), transparent 65%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
        rgba(11,19,36,.86);
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    padding:26px 30px;
    text-align:center;
    box-shadow:0 16px 36px rgba(0,0,0,.55);
    max-width:380px;
    width:90%;
    color:var(--text-light);
    backdrop-filter:blur(12px);
    transform:scale(.95);
    transition:transform .25s ease;
}

.modal-overlay.show .modal-box{transform:scale(1);}

.modal-actions{
    margin-top:18px;
    display:flex;
    justify-content:center;
    gap:15px;
}

.hidden{display:none!important;}

.modal-text{
    font-size:15px;
    opacity:.88;
}

.modal-header{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    margin-bottom:8px;
}

.modal-item-image{
    width:120px;
    height:120px;
    object-fit:contain;
    filter:drop-shadow(0 14px 10px rgba(0,0,0,.52));
}

.modal-item-name{
    font-size:18px;
    font-weight:750;
    color:var(--text-light);
}

body:has(.modal-overlay.show){
    overflow:hidden;
    touch-action:none;
    overscroll-behavior:contain;
}