:root{
  --k-bg:#06101b;--k-panel:#101a29;--k-panel2:#0b1522;--k-line:#26384f;
  --k-text:#f5f8ff;--k-muted:#8d9db3;--k-cyan:#27d8ff;--k-blue:#3989ff;
  --k-gold:#ffbf16;--k-orange:#ff7a17;--k-purple:#8c5cff;--k-pink:#ff37a1;
  --k-green:#26f19b;--k-red:#ff5f63;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Rajdhani:wght@600;700&display=swap');
*{box-sizing:border-box}
html,body{background:#06101b!important}
body{
 margin:0!important;color:var(--k-text)!important;font-family:Inter,Arial,sans-serif!important;
 background:radial-gradient(circle at 50% -15%,rgba(140,92,255,.18),transparent 35%),linear-gradient(#06101a,#07111e 60%,#050c14)!important;
 min-height:100vh
}
a{color:inherit;text-decoration:none}
.topbar{
 min-height:78px!important;padding:0 28px!important;display:grid!important;grid-template-columns:260px 1fr auto!important;align-items:center!important;
 background:#050a10!important;border-bottom:1px solid rgba(255,191,22,.65)!important;position:sticky!important;top:0!important;z-index:50!important
}
.topbar .brand{display:flex!important;align-items:center!important;gap:10px!important}.topbar .brand img{width:40px!important;height:40px!important;object-fit:contain!important}
.topbar .brand strong{font:800 28px Rajdhani,sans-serif!important}.topbar .brand span{display:block!important;font-size:7px!important;color:#8899ad!important;letter-spacing:1.5px!important}
.topbar nav{display:flex!important;justify-content:center!important;height:100%!important}
.topbar nav a{display:flex!important;align-items:center!important;padding:0 20px!important;font:700 13px Rajdhani,sans-serif!important;color:#d5dce8!important;border-bottom:3px solid transparent!important}
.topbar nav a.active{background:linear-gradient(180deg,rgba(255,191,22,.1),transparent)!important;border-bottom-color:var(--k-gold)!important;color:#fff!important}
.account{display:flex!important;align-items:center!important;gap:9px!important;color:#97a8bc!important;font-size:9px!important}
.account a{padding:9px 11px!important;border:1px solid #344961!important;border-radius:8px!important;color:var(--k-cyan)!important}

.login-page{
 min-height:calc(100vh - 78px)!important;display:grid!important;place-items:center!important;padding:30px!important;
 background:linear-gradient(rgba(4,10,17,.70),rgba(4,10,17,.90)),url('/assets/img/kings4fun-hero.jpg') center/cover!important
}
.login-card{
 width:min(620px,100%)!important;padding:46px!important;text-align:center!important;border:1px solid #2e4964!important;border-radius:18px!important;
 background:rgba(8,18,30,.90)!important;box-shadow:0 30px 80px rgba(0,0,0,.4)!important;backdrop-filter:blur(10px)!important
}
.login-card h1{font:700 43px Rajdhani,sans-serif!important}.login-card p{color:#a2b1c4!important;line-height:1.6!important}
.steam-login{display:inline-block!important;margin-top:16px!important;padding:14px 22px!important;border-radius:9px!important;background:linear-gradient(135deg,var(--k-gold),var(--k-orange))!important;color:#101722!important;font:800 14px Rajdhani,sans-serif!important;box-shadow:0 0 24px rgba(255,175,20,.28)!important}
.login-card small{display:block!important;margin-top:12px!important;color:#788aa0!important}

.hero{
 width:min(1500px,calc(100% - 30px))!important;margin:18px auto 0!important;padding:28px 32px!important;border:1px solid #28435e!important;border-radius:16px!important;
 background:linear-gradient(90deg,rgba(5,13,23,.88),rgba(8,17,31,.64)),url('/assets/img/kings4fun-hero.jpg') center 46%/cover!important
}
.hero>span{font-size:9px!important;letter-spacing:2.6px!important;color:var(--k-cyan)!important}.hero h1{margin:4px 0 0!important;font:700 44px Rajdhani,sans-serif!important}.hero h1 b{color:var(--k-gold)!important}.hero p{margin:3px 0 0!important;color:#9fb0c3!important;font-size:9px!important;letter-spacing:1.5px!important}
.tabs{width:min(1500px,calc(100% - 30px))!important;margin:10px auto 14px!important;display:flex!important;gap:8px!important;background:transparent!important}
.tabs a{padding:11px 15px!important;border:1px solid #293f57!important;border-radius:9px!important;background:#0c1725!important;color:#aebed0!important;font:700 11px Rajdhani,sans-serif!important}
.tabs a.active{border-color:var(--k-cyan)!important;color:#fff!important;background:linear-gradient(135deg,rgba(39,216,255,.12),rgba(140,92,255,.10))!important;box-shadow:0 0 18px rgba(39,216,255,.08)!important}

.three-col,.two-col{
 width:min(1500px,calc(100% - 30px))!important;margin:0 auto 22px!important;gap:12px!important
}
.three-col{display:grid!important;grid-template-columns:250px 1fr 360px!important}.two-col{display:grid!important;grid-template-columns:1fr 410px!important}
.side-list,.browser,.preview{
 background:linear-gradient(180deg,#101b2b,#0a1421)!important;border:1px solid #293e55!important;border-radius:13px!important;box-shadow:0 16px 36px rgba(0,0,0,.18)!important
}
.side-list{padding:10px!important}.side-list>div{max-height:650px!important;overflow:auto!important}.side-list a{display:flex!important;align-items:center!important;gap:9px!important;padding:8px!important;border-radius:8px!important;color:#b4c0d1!important}
.side-list a:hover,.side-list a.selected{background:rgba(39,216,255,.08)!important;color:#fff!important}.side-list a.selected{box-shadow:inset 3px 0 var(--k-cyan)!important}
.side-list img{width:45px!important;height:28px!important;object-fit:contain!important}
.search{background:#091421!important;color:#fff!important;border:1px solid #2a415a!important;border-radius:8px!important;padding:10px 11px!important;outline:none!important}
.search:focus{border-color:var(--k-cyan)!important;box-shadow:0 0 0 3px rgba(39,216,255,.07)!important}
.browser{padding:14px!important}.browser-head{display:flex!important;align-items:center!important;justify-content:space-between!important;padding-bottom:12px!important;border-bottom:1px solid #253a50!important}.browser-head h2{font:700 22px Rajdhani,sans-serif!important;margin:0!important}.browser-head p{color:#8394aa!important;font-size:9px!important}
.grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(145px,1fr))!important;gap:9px!important;margin-top:12px!important}
.item-card{min-height:145px!important;padding:10px!important;background:#0c1725!important;border:1px solid #263b52!important;border-radius:9px!important;text-align:center!important}
.item-card:hover{border-color:#4a6b8c!important;transform:translateY(-2px)!important}.item-card.selected{border-color:var(--k-cyan)!important;box-shadow:0 0 18px rgba(39,216,255,.10)!important;background:linear-gradient(180deg,rgba(39,216,255,.06),#0c1725)!important}
.item-card img{width:100%!important;height:92px!important;object-fit:contain!important}.item-card strong{display:block!important;margin-top:7px!important;font-size:9px!important;color:#dbe5f2!important}
.preview{padding:16px!important;position:sticky!important;top:92px!important;height:max-content!important}.preview h2{font:700 20px Rajdhani,sans-serif!important;margin:0 0 12px!important}.preview-img{width:100%!important;max-height:240px!important;object-fit:contain!important;background:#09131f!important;border:1px solid #25394f!important;border-radius:10px!important}
.preview form{margin-top:12px!important}.preview label{display:block!important;margin:9px 0 5px!important;color:#8293a8!important;font-size:8px!important}.preview input[type=number],.preview select{width:100%!important;background:#091421!important;color:#fff!important;border:1px solid #2a415a!important;border-radius:8px!important;padding:10px!important}
.preview button,button{width:100%!important;margin-top:12px!important;padding:12px!important;border:0!important;border-radius:8px!important;background:linear-gradient(135deg,var(--k-gold),var(--k-orange))!important;color:#111722!important;font:800 13px Rajdhani,sans-serif!important;cursor:pointer!important}
.mini-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:7px!important;margin-top:10px!important;max-height:270px!important;overflow:auto!important}.mini-grid a{padding:6px!important;border:1px solid #263b52!important;border-radius:8px!important;background:#0c1725!important}.mini-grid a.selected{border-color:var(--k-cyan)!important}.mini-grid img{width:100%!important;height:62px!important;object-fit:contain!important}.mini-grid span{display:block!important;font-size:7px!important;color:#9babc0!important;text-align:center!important}
@media(max-width:1050px){.topbar nav{display:none!important}.three-col{grid-template-columns:220px 1fr!important}.three-col .preview{grid-column:1/-1!important;position:static!important}.two-col{grid-template-columns:1fr!important}.preview{position:static!important}}
@media(max-width:700px){.topbar{grid-template-columns:1fr auto!important;padding:0 12px!important}.three-col{grid-template-columns:1fr!important}.side-list>div{max-height:260px!important}.grid{grid-template-columns:repeat(2,1fr)!important}.tabs{overflow:auto!important}.hero{padding:22px!important}}


/* ==========================================================
   KINGS - WEAPON PAINTS HERO COMPACTO
   ========================================================== */

body .hero {
    min-height: 0 !important;
    height: 210px !important;
    padding: 34px 20px !important;

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

    background:
        linear-gradient(
            90deg,
            rgba(5,13,23,.90),
            rgba(8,17,31,.66),
            rgba(5,13,23,.90)
        ),
        url('/assets/img/kings4fun-hero.jpg')
        center 43% / cover no-repeat !important;

    overflow: hidden !important;
}

body .hero > span {
    font-size: 9px !important;
}

body .hero h1 {
    font-size: 38px !important;
    margin: 4px 0 !important;
    line-height: 1 !important;
}

body .hero p {
    margin: 5px 0 0 !important;
}


/* CELULAR */

@media (max-width:700px) {

    body .hero {
        height: 155px !important;
        padding: 22px 12px !important;
        background-position: center 42% !important;
    }

    body .hero h1 {
        font-size: 30px !important;
    }

    body .hero p {
        font-size: 8px !important;
    }
}