/* =========================================================
   CLASTIE NETWORK V4 — Hanedan/SkyBlock inspired, original UI
   ========================================================= */
:root{
  --cl-bg:#07090d;--cl-panel:#0d1118;--cl-panel2:#111722;--cl-border:rgba(255,255,255,.09);
  --cl-text:#f7f8fb;--cl-muted:#98a2b3;--cl-orange:#ff7a1a;--cl-orange2:#ff9f45;
}
html{scroll-behavior:smooth}
body.dark,body{background:var(--cl-bg)!important;color:var(--cl-text);font-family:Poppins,system-ui,sans-serif}
.cl-v4-app{min-height:100vh;background:
radial-gradient(circle at 15% 15%,rgba(255,122,26,.08),transparent 28%),
linear-gradient(#07090d,#090c12)}
.cl-shell{width:min(1380px,calc(100% - 48px));margin:0 auto}
.cl-header{position:relative;z-index:1000;background:#080b10}
.cl-announcement{background:linear-gradient(90deg,#0b0e14,#121722,#0b0e14);border-bottom:1px solid rgba(255,122,26,.28)}
.cl-announcement-inner{min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.cl-announcement-left{display:flex;align-items:center;gap:12px;min-width:0}
.cl-announcement-left a{color:#d7dbe4;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-announcement-icon{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:rgba(255,122,26,.13);color:var(--cl-orange)}
.cl-discord-mini{display:flex;align-items:center;gap:7px;color:#aeb5c2;font-size:12px;font-weight:700}
.cl-mainnav{background:rgba(7,10,15,.97);border-bottom:1px solid var(--cl-border);box-shadow:0 16px 45px rgba(0,0,0,.28)}
.cl-nav-inner{height:84px;display:flex;align-items:center;gap:28px}
.cl-brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.cl-brand-mark{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--cl-orange),#d9480f);color:#fff;font-size:26px;font-weight:900;box-shadow:0 0 0 4px rgba(255,122,26,.09),0 8px 28px rgba(255,122,26,.22)}
.cl-brand-text{line-height:1;display:flex;flex-direction:column;gap:4px;color:#fff}
.cl-brand-text b{font-size:17px;letter-spacing:.08em}
.cl-brand-text small{font-size:9px;letter-spacing:.42em;color:var(--cl-orange2)}
.cl-desktop-nav{display:flex;align-items:stretch;justify-content:center;gap:3px;flex:1;height:100%}
.cl-nav-link{position:relative;height:100%;padding:0 13px;display:flex;align-items:center;gap:8px;color:#aeb5c2;font-size:13px;font-weight:700;border:none;background:none;transition:.2s}
.cl-nav-link:hover,.cl-nav-link.is-active{color:#fff}
.cl-nav-link.is-active:after{content:"";position:absolute;height:3px;border-radius:3px 3px 0 0;left:13px;right:13px;bottom:0;background:var(--cl-orange);box-shadow:0 0 18px rgba(255,122,26,.7)}
.cl-nav-link i{color:#727c8e}
.cl-nav-link:hover i,.cl-nav-link.is-active i{color:var(--cl-orange)}
.cl-chevron{font-size:9px!important;margin-left:2px}
.cl-nav-dd{position:relative;height:100%}
.cl-dropdown{position:absolute;top:74px;left:0;min-width:210px;padding:9px;background:#0d121a;border:1px solid var(--cl-border);border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.cl-dropdown a{display:block;padding:10px 12px;border-radius:8px;color:#aeb5c2;font-size:12px;font-weight:600}
.cl-dropdown a:hover{background:rgba(255,122,26,.09);color:#fff}
.cl-nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.cl-cart-btn{width:43px;height:43px;border:1px solid var(--cl-border);border-radius:10px;display:grid;place-items:center;color:#fff;position:relative;background:#0c1016}
.cl-cart-btn .shopping-cart-count{position:absolute;right:-5px;top:-5px;width:18px;height:18px;border-radius:99px;background:var(--cl-orange);display:grid;place-items:center;font-size:9px;color:#fff}
.cl-login-btn,.cl-register-btn{height:43px;padding:0 16px;border-radius:10px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800}
.cl-login-btn{background:#10151d;color:#fff;border:1px solid var(--cl-border)}
.cl-register-btn{background:var(--cl-orange);color:#fff;box-shadow:0 10px 24px rgba(255,122,26,.18)}
.cl-user{position:relative}
.cl-user-btn{height:54px;background:#0d1219;border:1px solid var(--cl-border);border-radius:12px;padding:6px 10px 6px 7px;display:flex;align-items:center;gap:9px;color:#fff}
.cl-user-btn img{width:38px;height:38px;border-radius:7px;image-rendering:pixelated}
.cl-user-btn span{display:flex;flex-direction:column;text-align:left;line-height:1.15;min-width:90px}
.cl-user-btn b{font-size:12px}.cl-user-btn small{font-size:9px;color:var(--cl-orange2);margin-top:4px}
.cl-user-btn>i{font-size:9px;color:#667085}
.cl-profile-drop{position:absolute;right:0;top:60px;min-width:240px;z-index:30}
.cl-mobile-toggle{display:none;width:43px;height:43px;border-radius:10px;border:1px solid var(--cl-border);background:#10151d;color:#fff}
.cl-mobile-panel{display:none;background:#0c1118;border-bottom:1px solid var(--cl-border);padding:14px 18px}
.cl-mobile-panel>a,.cl-mobile-group>a{display:flex;gap:10px;align-items:center;padding:11px 8px;color:#cbd1dc;font-size:13px;font-weight:700}
.cl-mobile-title{padding:10px 8px;color:var(--cl-orange);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}

.cl-main{position:relative;margin:0!important}
.cl-hero{min-height:670px;position:relative;background-size:cover;background-position:center;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.06)}
.cl-hero-shade{position:absolute;inset:0;background:
linear-gradient(90deg,rgba(5,7,10,.96) 0%,rgba(5,7,10,.78) 42%,rgba(5,7,10,.27) 78%,rgba(5,7,10,.58) 100%),
linear-gradient(0deg,#07090d 0%,transparent 30%)}
.cl-hero-grid{position:absolute;inset:0;opacity:.08;background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to right,#000,transparent 80%)}
.cl-hero-inner{min-height:670px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);align-items:center;gap:70px;position:relative;z-index:2;padding-top:24px;padding-bottom:70px}
.cl-hero-copy{max-width:780px}
.cl-kicker{display:flex;align-items:center;gap:10px;color:var(--cl-orange2);font-size:11px;font-weight:800;letter-spacing:.2em;margin-bottom:17px}
.cl-kicker span{width:30px;height:2px;background:var(--cl-orange)}
.cl-hero h1{font-size:clamp(44px,5.5vw,82px);line-height:.98;letter-spacing:-.04em;font-weight:900;color:#fff;max-width:900px;text-shadow:0 10px 45px rgba(0,0,0,.5);margin:0}
.cl-hero p{font-size:15px;line-height:1.8;color:#aeb6c4;max-width:650px;margin:25px 0 28px}
.cl-hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.cl-hero-actions a,.cl-hero-actions button{height:50px;padding:0 20px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:12px;font-weight:900;letter-spacing:.025em;transition:.2s}
.cl-primary{border:0;background:var(--cl-orange);color:#fff;box-shadow:0 14px 35px rgba(255,122,26,.22);cursor:pointer}
.cl-primary:hover{transform:translateY(-2px);background:#ff8c32}
.cl-secondary{background:#f6f7f9!important;color:#111827!important}
.cl-discord-btn{background:#5865f2!important;color:#fff!important}
.cl-ip-box{margin-top:28px;width:min(530px,100%);min-height:72px;border:1px solid rgba(255,255,255,.1);background:rgba(10,14,20,.72);backdrop-filter:blur(8px);border-radius:12px;padding:13px 15px 13px 18px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.cl-ip-box div{display:flex;flex-direction:column}.cl-ip-box small{color:#6f7a8c;font-size:9px;font-weight:800;letter-spacing:.15em}.cl-ip-box b{color:#fff;font-size:16px;margin-top:3px}
.cl-ip-box>span{height:40px;padding:0 13px;border-radius:8px;background:rgba(255,122,26,.1);color:var(--cl-orange2);display:flex;align-items:center;gap:7px;font-size:10px;font-weight:800}
.cl-hero-side{display:flex;align-items:center;justify-content:center;flex-direction:column}
.cl-emblem{position:relative;width:310px;height:310px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(255,122,26,.18),rgba(12,16,23,.75) 58%,rgba(0,0,0,.1));border:1px solid rgba(255,255,255,.1);box-shadow:0 0 90px rgba(255,122,26,.15)}
.cl-emblem:before,.cl-emblem:after{content:"";position:absolute;border-radius:50%;border:1px dashed rgba(255,122,26,.25);inset:18px;animation:clspin 24s linear infinite}.cl-emblem:after{inset:44px;animation-direction:reverse;animation-duration:17s}
@keyframes clspin{to{transform:rotate(360deg)}}
.cl-emblem-c{font-size:118px;line-height:.85;font-weight:950;color:#fff;text-shadow:8px 8px 0 rgba(255,122,26,.55);z-index:2}
.cl-emblem strong{z-index:2;font-size:24px;letter-spacing:.13em;margin-top:12px}.cl-emblem span{z-index:2;color:var(--cl-orange2);font-size:10px;letter-spacing:.45em;margin-left:.45em;margin-top:5px}
.cl-stat-row{display:grid;grid-template-columns:repeat(3,1fr);width:100%;margin-top:25px;border:1px solid var(--cl-border);background:rgba(9,13,18,.72);border-radius:13px;overflow:hidden;backdrop-filter:blur(8px)}
.cl-stat{padding:15px 9px;display:flex;align-items:center;flex-direction:column;border-right:1px solid var(--cl-border)}.cl-stat:last-child{border-right:0}.cl-stat i{color:var(--cl-orange);font-size:13px}.cl-stat b{font-size:16px;margin:5px 0 1px}.cl-stat span{font-size:9px;color:#7d8798;text-transform:uppercase;font-weight:700}
.cl-scroll-cue{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;color:#70798a;font-size:8px;font-weight:800;letter-spacing:.2em;gap:5px}
.cl-mode-strip{background:#090c11;border-bottom:1px solid var(--cl-border)}
.cl-mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--cl-border);border-left:1px solid var(--cl-border);border-right:1px solid var(--cl-border)}
.cl-mode-card{min-height:118px;background:#0a0e14;padding:22px 26px;display:flex;align-items:center;gap:16px;position:relative;overflow:hidden;transition:.2s}
.cl-mode-card:hover{background:#0f141c}.cl-mode-card>span{font-size:11px;color:var(--cl-orange);font-weight:900}.cl-mode-card div{display:flex;flex-direction:column;gap:4px}.cl-mode-card b{font-size:15px;color:#fff}.cl-mode-card small{font-size:10px;color:#697386}.cl-mode-card>i{margin-left:auto;font-size:30px;color:rgba(255,122,26,.16)}
/* Existing LeaderOS content restyle */
.cl-main section.container,.cl-main>.relative>section.container{position:relative}
.card{background:#0e131b!important;border:1px solid var(--cl-border)!important;box-shadow:0 16px 45px rgba(0,0,0,.16)!important}
.dark .dark\:bg-green-800{background:#0e131b!important}
.dark .dark\:text-green-300{color:#f3f4f6!important}
.dark .dark\:text-green-300\/75{color:#8f99a9!important}
.bg-green-500{background-color:var(--cl-orange)!important}
.text-green-500,.dark .dark\:text-green-300{color:var(--cl-orange)!important}
.rounded-xl{border-radius:12px!important}
footer{background:#07090d!important;border-top:1px solid var(--cl-border)!important}

@media(max-width:1180px){
 .cl-desktop-nav{display:none}.cl-mobile-toggle{display:grid;place-items:center}.cl-mobile-panel{display:block}
 .cl-hero-inner{grid-template-columns:1fr .7fr;gap:30px}.cl-emblem{width:260px;height:260px}.cl-emblem-c{font-size:95px}
}
@media(max-width:820px){
 .cl-shell{width:min(100% - 28px,1380px)}.cl-nav-inner{height:70px}.cl-login-btn,.cl-register-btn{display:none}
 .cl-brand-mark{width:40px;height:40px}.cl-brand-text b{font-size:14px}
 .cl-hero{min-height:auto}.cl-hero-inner{min-height:680px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:30px;padding:75px 0 85px}
 .cl-hero h1{font-size:48px}.cl-hero-side{width:100%}.cl-emblem{display:none}.cl-stat-row{max-width:520px}
 .cl-mode-grid{grid-template-columns:1fr}.cl-mode-card{min-height:90px}.cl-discord-mini span{display:none}
}
@media(max-width:520px){
 .cl-announcement-inner{min-height:42px}.cl-announcement-left a{font-size:11px}.cl-announcement-icon{width:27px;height:27px}
 .cl-nav-actions{gap:5px}.cl-cart-btn,.cl-mobile-toggle{width:39px;height:39px}.cl-user-btn span,.cl-user-btn>i{display:none}.cl-user-btn{padding:5px}
 .cl-hero-inner{min-height:620px;padding-top:55px}.cl-hero h1{font-size:39px}.cl-hero p{font-size:13px;line-height:1.65}
 .cl-hero-actions a,.cl-hero-actions button{width:100%}.cl-ip-box{align-items:flex-start;gap:12px;flex-direction:column}.cl-ip-box>span{height:34px}
 .cl-stat-row{grid-template-columns:1fr 1fr}.cl-stat:nth-child(3){grid-column:1/-1;border-top:1px solid var(--cl-border)}
}