
/* ============================================================
   CLASTIE NETWORK V5 — full site skin
   Visual direction: premium Minecraft network / Skyblock-like
   ============================================================ */
:root{
 --v5-bg:#070a0f;--v5-bg2:#0a0f16;--v5-panel:#0d131c;--v5-panel2:#111925;
 --v5-border:rgba(255,255,255,.085);--v5-soft:rgba(255,255,255,.045);
 --v5-text:#f7f8fb;--v5-muted:#8c98a9;--v5-orange:#ff7a18;--v5-orange2:#ffab57;
 --v5-blue:#2394e8;--v5-discord:#5865f2;--v5-shadow:0 18px 55px rgba(0,0,0,.28);
}

/* SKYBLOCK.TC-like readable pixel typography across entire website */
html,body,button,input,textarea,select,a,p,span,div,label,table,th,td,h1,h2,h3,h4,h5,h6,strong,b,small{
 font-family:'Pixelify Sans','Oxanium','Poppins',sans-serif!important;
}
body{font-size:16px!important;letter-spacing:.005em}
p,.prose,.ck-content{font-size:16px!important;line-height:1.65!important}
h1,h2,h3,h4,h5,h6{letter-spacing:-.015em!important;font-weight:700!important}
input,textarea,select,button{font-size:15px!important}
.cl-nav-link,.cl-login-btn,.cl-register-btn{font-size:15px!important}
.cl-brand-text b{font-size:20px!important}.cl-brand-text small{font-size:11px!important}

/* Global background used by EVERY page */
body,.cl-v4-app{
 background:
 radial-gradient(circle at 10% -5%,rgba(255,122,24,.10),transparent 26%),
 radial-gradient(circle at 92% 5%,rgba(35,148,232,.07),transparent 25%),
 linear-gradient(180deg,#070a0f 0%,#090d13 42%,#070a0f 100%)!important;
}
.cl-main{min-height:650px;background:transparent!important}
.cl-main:before{
 content:"";position:fixed;inset:130px 0 auto 0;height:430px;z-index:0;pointer-events:none;
 background:
 linear-gradient(180deg,rgba(7,10,15,.20),#070a0f 95%),
 url('/assets/clastie/img/header-bg.png') center 28%/cover no-repeat;
 opacity:.10;filter:saturate(.8);
 mask-image:linear-gradient(to bottom,#000,transparent);
}
.cl-main>*{position:relative;z-index:1}

/* Navigation refinement */
.cl-mainnav{background:rgba(5,8,12,.96)!important}
.cl-nav-inner{height:78px!important}
.cl-nav-link{padding:0 14px!important;color:#a9b3c2!important;text-transform:none}
.cl-nav-link.is-active,.cl-nav-link:hover{color:#fff!important}
.cl-nav-link i{font-size:14px}
.cl-login-btn,.cl-register-btn,.cl-cart-btn,.cl-user-btn{border-radius:7px!important}
.cl-register-btn{background:linear-gradient(180deg,#ff922f,#f36a08)!important;box-shadow:inset 0 -3px 0 #bd4f00,0 8px 24px rgba(255,122,24,.18)!important}

/* Inner page spacing: remove old generic 'white page' feeling */
.cl-main > .relative.z-30 > .container,
.cl-main > .container,
.cl-main section.container:not(.cl-hero):not(.cl-mode-strip){
 padding-top:34px!important;padding-bottom:46px!important;
}
.cl-main .container{max-width:1380px!important}

/* Bread crumbs */
.breadcrumb,.breadcrumb-wrapper{
 display:flex!important;align-items:center!important;gap:8px!important;
 color:#667386!important;font-size:14px!important;margin-bottom:18px!important;
}
.breadcrumb a{color:#96a2b4!important}.breadcrumb a:hover{color:var(--v5-orange2)!important}

/* Universal card language */
.card,.dark .card,
.bg-white,.dark .dark\:bg-green-800,.dark .dark\:bg-gray-800,
[class*="bg-white"][class*="rounded"],[class*="dark:bg-green-800"]{
 background:linear-gradient(145deg,rgba(15,22,32,.97),rgba(10,15,22,.98))!important;
 border:1px solid var(--v5-border)!important;
 box-shadow:var(--v5-shadow)!important;
}
.card{border-radius:10px!important;overflow:hidden}
.card:hover{border-color:rgba(255,122,24,.20)!important}

/* Generic headings inside content */
.cl-main h1{font-size:clamp(30px,3vw,42px)!important;color:#fff!important}
.cl-main h2{font-size:27px!important;color:#fff!important}
.cl-main h3{font-size:21px!important;color:#f8fafc!important}
.cl-main h4{font-size:18px!important}
.cl-main .text-gray-900,.cl-main .text-gray-800,.cl-main .text-gray-700,
.dark .dark\:text-white,.dark .dark\:text-green-100,.dark .dark\:text-green-200{
 color:#f3f6fa!important;
}
.cl-main .text-gray-400,.cl-main .text-gray-500,.cl-main .text-gray-600,
.dark .dark\:text-green-300\/75,.dark .dark\:text-gray-400{
 color:#8d99aa!important;
}

/* Forms — all pages */
.form-input,input[type=text],input[type=email],input[type=password],input[type=number],
input[type=search],input[type=url],textarea,select{
 min-height:46px!important;background:#090e15!important;border:1px solid rgba(255,255,255,.10)!important;
 color:#f5f7fa!important;border-radius:7px!important;outline:none!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important;
}
textarea{min-height:120px!important}
.form-input:focus,input:focus,textarea:focus,select:focus{
 border-color:rgba(255,122,24,.72)!important;box-shadow:0 0 0 3px rgba(255,122,24,.10)!important;
}
label{color:#d8dee8!important;font-size:14px!important;font-weight:600!important}
input::placeholder,textarea::placeholder{color:#566273!important}

/* Buttons — coherent square/pixel feel */
button,.btn,[class*="rounded-lg"][role=button]{transition:.18s ease}
.bg-green-500,.hover\:bg-green-600:hover,
button.bg-green-500,a.bg-green-500{
 background:linear-gradient(180deg,#ff8d2d,#ee6507)!important;
 color:#fff!important;border:0!important;border-radius:7px!important;
 box-shadow:inset 0 -3px 0 rgba(133,51,0,.55),0 8px 20px rgba(255,122,24,.13)!important;
}
.bg-green-500:hover,button.bg-green-500:hover,a.bg-green-500:hover{transform:translateY(-1px);filter:brightness(1.06)}
.bg-green-100,.dark .dark\:bg-green-700{background:rgba(255,122,24,.10)!important}
.text-green-500,.dark .dark\:text-green-300,.hover\:text-green-500:hover{color:var(--v5-orange2)!important}
.border-green-500{border-color:var(--v5-orange)!important}
.ring-green-500{--tw-ring-color:var(--v5-orange)!important}

/* Tabs / pills */
.tabs,.nav-tabs{border-bottom:1px solid var(--v5-border)!important}
.tabs a,.nav-tabs a,[role=tab]{
 color:#8f9bac!important;border-radius:6px!important;font-weight:600!important;
}
.tabs a.active,.nav-tabs a.active,[role=tab][aria-selected=true]{
 color:#fff!important;background:rgba(255,122,24,.10)!important;
 box-shadow:inset 0 -2px 0 var(--v5-orange)!important;
}

/* Tables & rankings & logs */
table{width:100%;border-collapse:separate!important;border-spacing:0!important}
thead th{
 background:#0a1018!important;color:#7f8da0!important;text-transform:uppercase;
 font-size:12px!important;letter-spacing:.06em!important;border-bottom:1px solid var(--v5-border)!important;
}
th,td{padding:14px 16px!important}
tbody td{color:#dce2eb!important;border-bottom:1px solid rgba(255,255,255,.055)!important}
tbody tr{background:rgba(255,255,255,.012)!important}
tbody tr:hover{background:rgba(255,122,24,.045)!important}
tbody tr:last-child td{border-bottom:0!important}

/* Dropdowns */
.dropdown-menu{
 background:#0b1119!important;border:1px solid var(--v5-border)!important;border-radius:8px!important;
 box-shadow:0 20px 60px rgba(0,0,0,.46)!important;padding:7px!important
}
.dropdown-item{border-radius:5px!important;color:#aeb7c5!important;font-size:14px!important}
.dropdown-item:hover,.dropdown-item.active{background:rgba(255,122,24,.10)!important;color:#fff!important}

/* Pagination */
.pagination a,.pagination span{
 background:#0d131c!important;border:1px solid var(--v5-border)!important;color:#9da8b7!important;border-radius:6px!important
}
.pagination .active,.pagination a:hover{background:var(--v5-orange)!important;color:#fff!important;border-color:var(--v5-orange)!important}

/* STORE: categories, product cards, cart */
.cl-route-store .card,.cl-route-store-index .card,.cl-route-store-category .card,
.cl-route-store-product .card,.cl-route-store-cart .card{
 border-radius:9px!important;
}
.cl-route-store .group.card img,.cl-route-store-index .group.card img,
.cl-route-store-category .group.card img{
 transition:transform .35s ease,filter .35s ease!important;filter:saturate(.92) contrast(1.03)
}
.cl-route-store .group.card:hover img,.cl-route-store-index .group.card:hover img,
.cl-route-store-category .group.card:hover img{transform:scale(1.035);filter:saturate(1.08)}
.cl-route-store .group.card:hover,.cl-route-store-index .group.card:hover,.cl-route-store-category .group.card:hover{
 transform:translateY(-4px)!important;box-shadow:0 22px 55px rgba(0,0,0,.34)!important
}

/* BLOG / NEWS */
.cl-route-blog .card,.cl-route-blog-index .card,.cl-route-blog-category .card{
 border-radius:9px!important
}
.cl-route-blog img,.cl-route-blog-index img{filter:saturate(.92)}
.cl-route-blog .card:hover img,.cl-route-blog-index .card:hover img{filter:saturate(1.08)}
.ck-content,.prose{color:#b9c2cf!important}
.ck-content h2,.ck-content h3,.prose h2,.prose h3{color:#fff!important}
.ck-content a,.prose a{color:var(--v5-orange2)!important}

/* LOGIN / REGISTER / AUTH */
.cl-route-login .card,.cl-route-register .card,.cl-route-auth .card,
.cl-route-forgot-password .card,.cl-route-reset-password .card{
 max-width:620px!important;margin-left:auto!important;margin-right:auto!important;
 border-top:2px solid rgba(255,122,24,.68)!important;
}
.cl-route-login .card:before,.cl-route-register .card:before{
 content:"CLASTIE NETWORK";display:block;color:var(--v5-orange2);font-size:12px;font-weight:700;
 letter-spacing:.12em;margin-bottom:8px
}

/* PROFILE / ACCOUNT */
.cl-route-account .card,.cl-route-profile .card,.cl-route-members .card{
 border-radius:9px!important
}
.cl-route-account img,.cl-route-profile img,.cl-route-members img{image-rendering:pixelated}
.cl-route-account aside .card,.cl-route-profile aside .card{
 position:sticky;top:18px
}

/* SUPPORT / TICKETS / HELP */
.cl-route-tickets .card,.cl-route-help .card,.cl-route-support .card{
 border-left:2px solid rgba(255,122,24,.32)!important
}

/* APPLICATION / DOWNLOAD / VOTE / CHANGELOG */
.cl-route-applications .card,.cl-route-download .card,.cl-route-vote .card,.cl-route-changelog .card{
 border-radius:9px!important
}

/* FORUM */
.cl-route-forum .card{border-radius:8px!important}
.cl-route-forum .card:hover{background:linear-gradient(145deg,#121b27,#0b1119)!important}

/* ALERTS */
.alert,[class*="alert-"]{border-radius:7px!important;border-width:1px!important;box-shadow:none!important}

/* Home V4 refinement to match new typography */
.cl-hero h1{font-family:'Pixelify Sans','Oxanium',sans-serif!important;font-size:clamp(52px,5.5vw,86px)!important;line-height:.90!important;letter-spacing:-.04em!important}
.cl-hero p{font-family:'Pixelify Sans','Oxanium',sans-serif!important;font-size:18px!important;line-height:1.55!important}
.cl-kicker{font-size:15px!important;letter-spacing:.08em!important}
.cl-hero-actions a,.cl-hero-actions button{font-size:16px!important;border-radius:7px!important}
.cl-ip-box small{font-size:12px!important}.cl-ip-box b{font-size:20px!important}.cl-ip-box>span{font-size:13px!important}
.cl-mode-card b{font-size:20px!important}.cl-mode-card small{font-size:14px!important}.cl-mode-card>span{font-size:14px!important}

/* FOOTER V5 */
.cl-footer-v5{
 position:relative;z-index:30;background:#06090d;border-top:1px solid var(--v5-border);overflow:hidden
}
.cl-footer-glow{
 position:absolute;width:520px;height:260px;left:-120px;top:-140px;border-radius:50%;
 background:rgba(255,122,24,.10);filter:blur(80px);pointer-events:none
}
.cl-footer-top{
 position:relative;display:grid;grid-template-columns:minmax(310px,1.7fr) repeat(3,minmax(150px,1fr));
 gap:55px;padding-top:58px;padding-bottom:45px
}
.cl-footer-logo{display:flex;align-items:center;gap:12px;width:max-content}
.cl-footer-brand p{max-width:470px;color:#778395;margin:20px 0;font-size:15px!important}
.cl-footer-ip{
 width:min(410px,100%);display:flex;align-items:center;gap:12px;background:#0c121a!important;
 border:1px solid var(--v5-border)!important;border-radius:8px!important;padding:12px 14px!important;color:#fff!important
}
.cl-footer-ip>span{width:38px;height:38px;display:grid;place-items:center;background:rgba(255,122,24,.11);color:var(--v5-orange);border-radius:6px}
.cl-footer-ip div{display:flex;flex-direction:column;text-align:left;flex:1}
.cl-footer-ip small{font-size:11px;color:#6f7b8c}.cl-footer-ip b{font-size:17px}
.cl-footer-column h4{color:#fff;font-size:17px!important;margin-bottom:14px;position:relative;padding-bottom:10px}
.cl-footer-column h4:after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;background:var(--v5-orange)}
.cl-footer-column>a{display:flex;align-items:center;gap:8px;color:#7d8999;padding:6px 0;font-size:14px!important}
.cl-footer-column>a:hover{color:#fff}.cl-footer-column>a i{color:#566172;width:15px}
.cl-socials{display:flex;gap:8px;flex-wrap:wrap}.cl-socials a{width:40px;height:40px;display:grid;place-items:center;border-radius:7px;background:#0d141d;border:1px solid var(--v5-border);color:#a5afbd}
.cl-socials a:hover{color:#fff;border-color:rgba(255,122,24,.35);background:rgba(255,122,24,.08)}
.cl-footer-bottom{min-height:68px;border-top:1px solid var(--v5-border);display:flex;align-items:center;justify-content:space-between;gap:20px;color:#626d7c;font-size:13px!important}
.cl-footer-bottom b{color:#a8b1bf}.cl-mojang-note{margin-left:8px;color:#4f5966}
.cl-footer-selects{display:flex;align-items:center;gap:10px}.cl-mini-select{background:#0c121a!important;border:1px solid var(--v5-border)!important;color:#a9b3c1!important;border-radius:6px!important;padding:7px 10px!important}
.cl-powered{opacity:.65}

/* hide old mismatched bright green accents missed by classes */
[class*="green-400"],[class*="green-500"]{--tw-text-opacity:1}
.dark .dark\:border-green-700,.border-green-200{border-color:rgba(255,255,255,.08)!important}

/* Responsive */
@media(max-width:1100px){
 .cl-footer-top{grid-template-columns:1.5fr repeat(2,1fr)}
}
@media(max-width:820px){
 body{font-size:15px!important}
 .cl-main > .relative.z-30 > .container,.cl-main > .container,.cl-main section.container:not(.cl-hero):not(.cl-mode-strip){padding-top:24px!important;padding-bottom:32px!important}
 .cl-footer-top{grid-template-columns:1fr 1fr;gap:34px;padding-top:42px}
 .cl-footer-brand{grid-column:1/-1}
 .cl-footer-bottom{padding:18px 0;flex-direction:column;align-items:flex-start}
 .cl-mojang-note{display:block;margin:5px 0 0}
}
@media(max-width:540px){
 .cl-footer-top{grid-template-columns:1fr}
 .cl-footer-brand{grid-column:auto}
 .cl-hero h1{font-size:48px!important}
 .cl-hero p{font-size:16px!important}
 .cl-nav-link{font-size:14px!important}
 th,td{padding:11px 10px!important}
 .card{border-radius:8px!important}
}
