/* CustomeZ WarZ / Bloody Red live redesign — presentation only.
   Transparent SVG logo, no page-background bitmap; old login + API logic untouched. */
:root {--cz-blood:#ed2432;--cz-edge:#b62936;--cz-ember:#ff6051;--cz-ink:#0d141d}
body.login-page,body.app-page{font-family:"Kanit","Segoe UI",Tahoma,sans-serif}
body.login-page .login-shell{
  box-sizing:border-box;width:min(100%,530px)!important;max-width:530px!important;
  padding-top:clamp(16px,3.3vh,33px)!important;
  align-items:center!important;overflow:visible!important;
}
body.login-page .login-shell:before{top:30px;opacity:.35}
body.login-page .cz-login-kicker{
  color:#e0d4d9!important;
  letter-spacing:4.5px!important;
  font-family:"Rajdhani","Segoe UI",Tahoma,sans-serif!important;
  font-weight:800!important;font-size:11px!important;
  margin:0 auto 5px!important;text-shadow:0 0 9px rgba(245,75,71,.32);
}
body.login-page .cz-login-kicker span{
  width:29px!important;background:linear-gradient(90deg,transparent,#f02736)!important
}
/* Transparent vector logo; independent of the form width and deliberately no background. */
body.login-page .brand.login-brand.cz-war-brand{
  position:relative!important;
  left:50%!important;top:auto!important;
  transform:translateX(-50%)!important;
  display:block!important;
  box-sizing:border-box!important;
  flex:none!important;
  width:min(760px,calc(100vw - 24px))!important;
  max-width:none!important;
  min-height:0!important;
  margin:0 0 3px!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  text-align:center!important;
  overflow:visible!important;
}
body.login-page .cz-war-brand .cz-warz-art{
  display:block!important;width:100%!important;height:auto!important;
  max-width:none!important;
  filter:drop-shadow(0 5px 14px rgba(12,0,1,.55)) drop-shadow(0 0 13px rgba(176,16,24,.15));
  image-rendering:auto;
}
/* Live status: red-edged steel badge, genuine green online count */
body.login-page #cz-login-online.cz-war-online{
  display:flex!important;justify-content:center!important;align-items:center!important;
  position:relative!important;isolation:isolate;
  width:max-content!important;max-width:calc(100vw - 34px)!important;
  min-height:53px!important;height:auto!important;
  gap:12px!important;
  padding:8px 23px 8px 19px!important;
  margin:0 auto 12px!important;
  border:2px solid rgba(229,47,59,.82)!important;
  border-radius:3px!important;
  clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%)!important;
  background:linear-gradient(115deg,rgba(27,31,38,.99),rgba(13,19,27,.99) 55%,rgba(33,21,27,.99))!important;
  box-shadow:inset 0 1px 0 rgba(255,95,91,.16),0 0 20px rgba(229,29,45,.16)!important;
}
body.login-page #cz-login-online.cz-war-online:before{
  content:none!important;display:none!important;
}
body.login-page #cz-login-online.cz-war-online .cz-live-icon{
  flex:0 0 auto!important;display:grid!important;place-items:center!important;
  width:31px!important;height:31px!important;
  border:0!important;background:transparent!important;color:#17ee72!important;
  box-shadow:none!important;font-size:24px!important;
}
body.login-page #cz-login-online.cz-war-online .cz-live-main{
  display:flex!important;flex-direction:row!important;align-items:center!important;
  justify-content:center!important;gap:11px!important;
}
body.login-page #cz-login-online.cz-war-online .cz-live-overline{
  color:#ebedf3!important;font-size:13px!important;font-weight:700!important;
  letter-spacing:0!important;white-space:nowrap!important;
}
body.login-page #cz-login-online.cz-war-online .cz-login-online-dot{display:none!important}
body.login-page #cz-login-online.cz-war-online .cz-live-subtext{display:none!important}
body.login-page #cz-login-online.cz-war-online .cz-live-meter{
  display:flex!important;flex-direction:row!important;align-items:baseline!important;
  padding:0 0 0 11px!important;margin:0!important;gap:5px!important;
  min-width:0!important;border-left:1px solid rgba(208,218,224,.5)!important;
}
body.login-page #cz-login-online.cz-war-online .cz-live-meter strong{
  font-family:"Rajdhani","Segoe UI",Tahoma,sans-serif!important;
  color:#00f16c!important;font-size:30px!important;line-height:1!important;
  font-weight:800!important;text-shadow:0 0 10px rgba(21,233,112,.32)!important;
}
body.login-page #cz-login-online.cz-war-online .cz-live-meter em{
  display:inline!important;color:#f0f3f2!important;font-size:12px!important;
}
body.login-page #cz-login-online.cz-war-online.is-stale{
  border-color:rgba(192,91,97,.62)!important;
  background:linear-gradient(105deg,#1c1d26,#101820)!important
}
body.login-page #cz-login-online.cz-war-online.is-stale .cz-live-meter strong{color:#bac6c9!important}
body.login-page #cz-login-online.cz-war-online.is-stale .cz-live-icon{color:#a6c5bc!important}
body.login-page #cz-login-online.cz-war-online.is-stale .cz-live-overline{color:#b8c2c8!important}

/* Access card — distressed gunmetal / glowing warning edges like the reference */
body.login-page .cz-auth-panel{
  position:relative!important;overflow:hidden!important;
  width:100%!important;
  border:1px solid rgba(225,60,72,.87)!important;
  border-radius:19px!important;
  background:linear-gradient(145deg,rgba(29,34,44,.99),rgba(14,21,30,.99) 68%,rgba(23,23,32,.99))!important;
  box-shadow:inset 0 1px 0 rgba(246,102,97,.16),inset 0 0 0 1px rgba(255,255,255,.035),
    0 0 0 1px rgba(80,19,27,.25),0 18px 48px rgba(0,0,0,.37),0 0 18px rgba(189,23,35,.16)!important;
}
body.login-page .cz-auth-panel:before{
  content:"";position:absolute;z-index:1;top:0;left:10%;right:10%;height:2px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,#9e1a27,#ff4c4a,#ae1527,transparent);
  box-shadow:0 0 12px rgba(251,34,50,.48);
}
body.login-page .cz-auth-topline{height:2px!important;background:transparent!important}
body.login-page .cz-auth-heading{
  padding:19px 31px 14px!important;text-align:left!important;
  background:radial-gradient(ellipse 55% 140% at 0 0,rgba(198,27,44,.13),transparent 85%)!important;
  border-bottom:1px solid rgba(94,113,130,.30)!important;
}
body.login-page .cz-auth-eyebrow{
  font:800 11px/1.3 "Rajdhani","Segoe UI",Tahoma,sans-serif!important;
  color:#ff5260!important;letter-spacing:1.15px!important
}
body.login-page .cz-auth-heading h1{
  margin:4px 0 3px!important;text-align:left!important;
  font:800 30px/1.18 "Kanit","Segoe UI",Tahoma,sans-serif!important;
  color:#f7f8fc!important;text-shadow:0 2px 14px rgba(0,0,0,.5);
}
body.login-page .cz-auth-heading p{
  max-width:100%!important;margin:0!important;color:#bac0ce!important;
  font-size:11px!important;line-height:1.65!important;text-align:left!important
}
body.login-page .cz-auth-content{padding:18px 31px 22px!important}
body.login-page .cz-auth-field{margin:0 0 14px!important}
body.login-page .cz-auth-field label{
  display:block!important;text-align:left!important;margin:0 0 6px!important;
  color:#f1f2f4!important;font:600 13px/1.45 "Kanit","Segoe UI",Tahoma,sans-serif!important;
}
body.login-page .cz-auth-control input{
  width:100%!important;height:48px!important;box-sizing:border-box!important;
  padding:0 47px 0 59px!important;
  border:1px solid rgba(179,62,79,.75)!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,#0a141d,#101922)!important;
  color:#f0f4fb!important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.20)!important;
  text-align:left!important;text-align-last:left!important;
  font-size:13px!important;font-family:"Kanit","Segoe UI",Tahoma,sans-serif!important;
  transform:none!important;
}
body.login-page .cz-auth-control input:focus{
  border-color:#ff6670!important;transform:none!important;
  box-shadow:0 0 0 3px rgba(218,37,51,.13),0 0 15px rgba(237,27,48,.12)!important;
}
body.login-page .cz-auth-field-icon{
  left:7px!important;width:35px!important;height:35px!important;
  border-radius:9px!important;
  background:linear-gradient(145deg,#293c50,#1b2937)!important;
  border:1px solid rgba(113,136,164,.38)!important;color:#c6d5e1!important;
}
body.login-page .cz-auth-submit{
  box-sizing:border-box!important;
  height:53px!important;margin:6px auto 0!important;
  border:2px solid #ff494a!important;border-radius:4px!important;
  color:#fff!important;clip-path:polygon(2.5% 0,97.5% 0,100% 17%,100% 83%,97.5% 100%,2.5% 100%,0 83%,0 17%)!important;
  font:800 17px/1.2 "Kanit","Segoe UI",Tahoma,sans-serif!important;
  background:linear-gradient(175deg,#fe3439 0%,#b70b13 30%,#df1c24 72%,#980b19 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,210,205,.21),0 5px 18px rgba(234,22,38,.25)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
  overflow:hidden;
}
body.login-page .cz-auth-submit:after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background:
    repeating-linear-gradient(126deg,transparent 0 24px,rgba(20,0,0,.18) 25px,transparent 27px),
    linear-gradient(115deg,transparent 10%,rgba(254,193,182,.17) 30%,transparent 33%);
}
body.login-page .cz-auth-submit:hover{filter:brightness(1.13)!important;transform:translateY(-1px)!important}
body.login-page .cz-login-safe-note{margin:10px 0 0!important;color:#a1b0c0!important;font-size:10px!important}
body.login-page .cz-login-safe-note i{color:#ff535c!important}
body.login-page footer{margin:9px auto 0!important;opacity:.7!important}

/* Authenticated portal — same war theme, adjusted for denser sidebar and header. */
body.app-page .sidebar{
  background:linear-gradient(180deg,#151b24 0%,#0d121b 70%)!important;
  border-right:1px solid rgba(194,49,58,.43)!important;
}
body.app-page .sidebar:before{
  background:linear-gradient(90deg,#670914,#f13236,#5f0711)!important;
  height:3px!important;box-shadow:0 0 16px rgba(230,26,39,.25)
}
body.app-page .sidebar .brand.cz-app-brand{
  box-sizing:border-box;
  width:100%!important;max-width:100%!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:13px 8px 8px!important;margin:0!important;
  background:radial-gradient(ellipse at 50% 40%,rgba(189,22,39,.14),transparent 76%)!important;
  border-bottom:1px solid rgba(151,52,58,.16);
}
body.app-page .sidebar .cz-warz-mini{
  display:block;width:100%;max-width:248px;height:auto;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.58));
}
body.app-page .topbar{
  border-bottom:1px solid rgba(190,41,53,.38)!important;
  background:linear-gradient(115deg,#10151d,#101820 65%,#15151e)!important;
}
body.app-page .topbar .crumb-minor{
  color:#f2e6e8!important;
  font:800 14px/1 "Rajdhani","Segoe UI",Tahoma,sans-serif!important;
  letter-spacing:1px;text-shadow:0 0 7px rgba(244,46,57,.2)
}
body.app-page .topbar .crumb-minor:after{
  content:"";display:inline-block;width:5px;height:5px;background:#fa343e;
  margin-left:4px;transform:skew(-20deg);box-shadow:0 0 7px rgba(243,46,49,.47);
}
body.app-page .online-player-pill{
  border:1px solid rgba(236,43,56,.55)!important;border-radius:8px!important;
  background:linear-gradient(118deg,#1c222b,#111921)!important;
  box-shadow:inset 0 1px rgba(251,126,123,.05),0 0 12px rgba(222,24,48,.08)!important
}
body.app-page .online-player-pill .cz-player-icon{
  color:#45f098!important;background:rgba(9,78,46,.36)!important
}
body.app-page .online-player-pill .online-player-copy strong{color:#20ec78!important}
body.app-page .online-player-pill .online-player-copy small{color:#ced8dc!important}
body.app-page .section-eyebrow .line-red{
  background:#ff4343!important;box-shadow:0 0 10px rgba(241,47,49,.35)
}
body.app-page .sidebar .nav-link.active{
  border-color:rgba(245,56,69,.48)!important;
  box-shadow:inset 3px 0 0 #ef3441,0 4px 17px rgba(0,0,0,.13)!important;
}
@media(max-width:600px){
 body.login-page .login-shell{width:min(100%,530px)!important;padding-top:15px!important}
 body.login-page .brand.login-brand.cz-war-brand{
   width:calc(100vw - 28px)!important;
   max-width:100%!important;
   left:auto!important;
   transform:none!important;
   margin:0 auto 1px!important;
 }
 body.login-page .login-shell{
   width:calc(100vw - 26px)!important;
   max-width:530px!important;
 }
 body.login-page .cz-auth-panel{
   width:100%!important;
   min-width:0!important;
 }
 body.login-page .cz-war-brand .cz-warz-art{
   width:100%!important;
   max-width:100%!important;
 }
 body.login-page .cz-login-kicker{font-size:9px!important;letter-spacing:2.3px!important}
 body.login-page #cz-login-online.cz-war-online{
   padding:6px 17px!important;gap:7px!important;min-height:45px!important
 }
 body.login-page #cz-login-online.cz-war-online .cz-live-overline{font-size:11px!important}
 body.login-page #cz-login-online.cz-war-online .cz-live-meter strong{font-size:25px!important}
 body.login-page .cz-auth-heading{padding:18px 19px 13px!important}
 body.login-page .cz-auth-heading h1{font-size:25px!important}
 body.login-page .cz-auth-content{padding:17px 20px 22px!important}
 body.login-page .cz-auth-control input{height:47px!important}
}
@media(max-width:350px){
 body.login-page #cz-login-online.cz-war-online{gap:4px!important;padding:5px 10px!important}
 body.login-page #cz-login-online.cz-war-online .cz-live-icon{font-size:18px!important}
 body.login-page #cz-login-online.cz-war-online .cz-live-overline{font-size:9px!important}
 body.login-page #cz-login-online.cz-war-online .cz-live-meter strong{font-size:23px!important}
}
@media(prefers-reduced-motion:reduce){
 body.login-page .cz-auth-submit{transition:none!important}
}