/* CustomeZ 2026-10-17 · Premium player portal.
   Pure presentation; auth flow and online-player data sources are untouched. */

/* LOGIN — tactical graphite, red brand light, clear hierarchy */
body.login-page {
  background:#080d13!important;
  color:#edf3f7;
  padding:0 18px 24px!important;
}
body.login-page:before {
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(ellipse 520px 270px at 50% 6%,rgba(218,52,49,.23),transparent 75%),
    radial-gradient(ellipse 430px 500px at 5% 88%,rgba(41,76,96,.18),transparent 80%),
    radial-gradient(ellipse 520px 350px at 98% 82%,rgba(106,32,45,.14),transparent 83%),
    linear-gradient(145deg,#101720 0%,#090d13 48%,#111823 100%);
}
body.login-page:after {
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.20;z-index:-1;
  background:linear-gradient(90deg,transparent 0,rgba(236,74,69,.10) 50%,transparent 100%) top center/60% 1px no-repeat,
    linear-gradient(90deg,rgba(135,160,183,.12) 1px,transparent 1px),
    linear-gradient(rgba(135,160,183,.12) 1px,transparent 1px);
  background-size:100% 1px,56px 56px,56px 56px;
}
body.login-page .login-shell{
  box-sizing:border-box;width:min(100%,484px);max-width:484px;
  padding-top:max(32px,calc((100dvh - 665px)/2));
  padding-bottom:0;gap:0;
}
body.login-page .login-shell:before {top:40px;opacity:.9}
body.login-page .cz-login-kicker{
  display:flex;align-items:center;justify-content:center;gap:13px;
  margin:0 auto 18px;color:#8fa0af;
  font:800 10px/1.3 "Segoe UI",Tahoma,sans-serif;letter-spacing:2.5px;
}
body.login-page .cz-login-kicker span{
  display:block;width:25px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(239,80,73,.8));
}
body.login-page .cz-login-kicker span:last-child{transform:rotate(180deg)}
body.login-page .brand.login-brand{
  flex-direction:row;gap:17px;justify-content:center;
  margin:0 auto 23px;min-height:73px;
}
body.login-page .login-brand .brand-symbol{
  width:62px;height:68px;filter:drop-shadow(0 7px 17px rgba(229,55,49,.26));
  background:linear-gradient(145deg,#fa6658,#b32e33 65%,#67212d);
}
body.login-page .login-brand .brand-symbol-inner{font-size:22px}
body.login-page .login-brand-copy{text-align:left}
body.login-page .login-brand-copy strong{
  font-size:clamp(30px,5vw,39px);letter-spacing:-1.3px;
  line-height:1.02;
}
body.login-page .login-brand-copy strong span{color:#ff594e}
body.login-page .login-brand-copy small{
  color:#b0bac7;letter-spacing:3.2px;font-size:10px;
  margin-top:8px;
}

/* ONLINE STATUS — icon + live dot + count, like a premium game launcher */
body.login-page .cz-login-online{
  display:flex;justify-content:flex-start;align-items:center;gap:13px;
  box-sizing:border-box;width:100%;min-height:84px;margin:0 auto 17px;
  padding:13px 18px;border-radius:17px;
  background:linear-gradient(122deg,rgba(12,40,32,.99) 0%,rgba(9,28,29,.97) 64%,rgba(10,27,25,.96) 100%);
  border:1px solid rgba(60,194,121,.38);
  box-shadow:inset 0 1px 0 rgba(179,255,211,.09),0 14px 32px rgba(0,0,0,.24),0 0 24px rgba(24,151,92,.08);
  color:#e5fff0;position:relative;isolation:isolate;overflow:hidden;
  font-family:"Segoe UI",Tahoma,sans-serif;
}
body.login-page .cz-login-online:after{
  content:"";position:absolute;top:-45px;right:-55px;width:190px;height:190px;
  border:1px solid rgba(95,224,149,.1);border-radius:50%;
  box-shadow:0 0 0 30px rgba(74,199,130,.027),0 0 0 68px rgba(74,199,130,.018);
  pointer-events:none;z-index:-1;
}
body.login-page .cz-live-icon{
  width:51px;height:51px;flex:none;display:grid;place-items:center;
  border-radius:13px;
  background:linear-gradient(145deg,rgba(39,109,83,.62),rgba(18,68,53,.56));
  border:1px solid rgba(83,199,137,.2);
  color:#6ef2a6;font-size:21px;
}
body.login-page .cz-live-main{display:flex;flex-direction:column;gap:6px;min-width:0}
body.login-page .cz-live-overline{
  display:flex;align-items:center;gap:9px;
  color:#b7d6c4;font-size:11px;letter-spacing:.15px;font-weight:700;
}
body.login-page .cz-login-online .cz-login-online-dot{
  display:inline-block;width:7px;height:7px;flex:none;border-radius:50%;
  background:#4afa98;
  box-shadow:0 0 0 3px rgba(67,245,145,.10),0 0 12px rgba(67,245,145,.62);
}
body.login-page .cz-live-total{display:flex;gap:7px;align-items:baseline;line-height:1}
body.login-page .cz-login-online [data-online-count]{
  font:900 30px/1 "Segoe UI",Tahoma,sans-serif;
  color:#60f6a1;text-shadow:0 0 16px rgba(69,235,141,.2);
  letter-spacing:-.7px;font-variant-numeric:tabular-nums;
}
body.login-page .cz-live-total em{font-style:normal;font-size:13px;font-weight:800;color:#b5f4cf}
body.login-page .cz-live-spark{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:29px;border:1px solid rgba(67,186,121,.18);
  border-radius:20px;background:rgba(14,78,53,.19);color:#7fdaaa;
  font:900 9px/1 "Segoe UI",Tahoma,sans-serif;letter-spacing:1px;
}
body.login-page .cz-login-online.is-stale{
  border-color:rgba(144,165,169,.35);
  background:linear-gradient(120deg,#17262b,#111d25 84%);
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 10px 25px rgba(0,0,0,.18);
}
body.login-page .cz-login-online.is-stale .cz-live-icon{
  background:rgba(125,143,157,.12);border-color:rgba(125,143,157,.22);color:#9bafba;
}
body.login-page .cz-login-online.is-stale .cz-login-online-dot{
  background:#a3adb5;box-shadow:none;
}
body.login-page .cz-login-online.is-stale [data-online-count],
body.login-page .cz-login-online.is-stale .cz-live-total em{color:#a1b6c1;text-shadow:none}
body.login-page .cz-login-online.is-stale .cz-live-spark{color:#9eabb4;border-color:rgba(150,160,170,.2);background:rgba(150,160,170,.09)}

/* LOGIN FORM — typography, input feedback, polished frame */
body.login-page .cz-auth-panel{
  border-radius:19px;border:1px solid rgba(101,119,132,.48);
  background:linear-gradient(155deg,#1a2632 0%,#131e29 54%,#121923 100%);
  box-shadow:0 24px 75px rgba(0,0,0,.47),0 0 0 1px rgba(255,255,255,.025) inset;
  overflow:hidden;
}
body.login-page .cz-auth-topline{
  height:3px;background:linear-gradient(90deg,transparent,#872931 20%,#f05c4b 50%,#872931 80%,transparent);
}
body.login-page .cz-auth-heading{
  padding:25px 32px 18px;text-align:left;
  background:radial-gradient(ellipse 85% 200% at 0 -100%,rgba(244,89,76,.20),transparent 86%);
  border-bottom:1px solid rgba(134,157,173,.14);
}
body.login-page .cz-auth-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font:850 10px/1.3 "Segoe UI",Tahoma,sans-serif;
  letter-spacing:1.5px;color:#fa9d8d;
}
body.login-page .cz-auth-eyebrow i{font-size:13px}
body.login-page .cz-auth-heading h1{
  margin:8px 0 5px;color:#f7faff;font:900 26px/1.25 "Segoe UI",Tahoma,sans-serif;
  letter-spacing:0;
}
body.login-page .cz-auth-heading p{
  margin:0;max-width:none;color:#9fb0be;
  font-size:12px;line-height:1.65;
}
body.login-page .cz-auth-content{padding:24px 32px 27px}
body.login-page .cz-auth-field{margin-bottom:16px}
body.login-page .cz-auth-field label{font-size:12px;color:#d6e2ea;font-weight:750;margin-bottom:8px;text-align:left}
body.login-page .cz-auth-field-icon{
  width:38px;height:38px;left:8px;border-radius:10px;
  border:1px solid rgba(113,140,160,.30);
  background:linear-gradient(145deg,#2a3c4b,#1c2c3a);color:#acbdcc;
}
body.login-page .cz-auth-control input{
  height:52px;text-align:left!important;text-align-last:left!important;
  padding:0 50px 0 59px!important;
  background:#0c1620!important;color:#f1f5fa!important;
  border:1px solid #455b6e!important;border-radius:12px!important;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.10);
  font-size:14px;transform:none!important;
}
body.login-page .cz-auth-control input:focus{
  border-color:#f08070!important;
  box-shadow:0 0 0 3px rgba(242,111,93,.12),0 4px 22px rgba(0,0,0,.14)!important;
  background:#111d29!important;
}
body.login-page .cz-auth-control input::placeholder{color:#849bab!important;font-size:12px}
body.login-page .cz-auth-control:focus-within .cz-auth-field-icon{
  background:#472e36;border-color:#af5b54;color:#ffd7ca;
}
body.login-page .cz-auth-eye{
  right:7px!important;height:38px;width:38px;border-radius:10px;
  color:#a0b1c1;
}
body.login-page .cz-auth-eye:hover{color:#f7fafc;background:rgba(255,255,255,.06)}
body.login-page .cz-auth-submit{
  margin-top:7px;height:51px;border:1px solid rgba(255,153,135,.48);
  border-radius:11px;background:linear-gradient(105deg,#bd3536,#e44b41 56%,#c73937);
  box-shadow:0 8px 23px rgba(195,50,47,.23),inset 0 1px rgba(255,255,255,.12);
  color:white;font-size:14px;
}
body.login-page .cz-auth-submit:hover{filter:brightness(1.09);transform:translateY(-1px)}
body.login-page .cz-login-safe-note{
  display:flex;align-items:center;justify-content:center;gap:8px;
  text-align:center;font-size:11px;line-height:1.5;
  margin:17px 0 0;color:#869cac;
}
body.login-page .cz-login-safe-note i{color:#6bcf9c}
body.login-page footer{margin:15px auto 0!important;opacity:.65;font-size:11px}

/* AUTHENTICATED TOP BAR — same family, scaled for real navbar */
body.app-page .online-player-pill{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;gap:10px;align-items:center;
  height:54px;min-height:54px;padding:6px 14px 6px 8px;margin:0;
  border-radius:14px;border:1px solid rgba(68,197,126,.36);
  background:linear-gradient(120deg,rgba(13,42,32,.96),rgba(13,31,30,.98));
  box-shadow:inset 0 1px 0 rgba(169,246,197,.055),0 5px 18px rgba(0,0,0,.19);
  color:#def9e8;
  transition:border-color .2s,box-shadow .2s;
}
body.app-page .online-player-pill:after{
  content:"";position:absolute;inset:0 0 0 auto;width:45%;
  background:radial-gradient(ellipse at 100% 55%,rgba(41,160,96,.10),transparent 85%);
  pointer-events:none;z-index:-1;
}
body.app-page .cz-player-icon{
  flex:none;display:grid;place-items:center;
  width:37px;height:37px;border:1px solid rgba(83,224,151,.12);
  border-radius:11px;color:#72ebac;font-size:16px;
  background:linear-gradient(140deg,#164735,#12392d);
}
body.app-page .online-player-copy{
  display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:0;
  font-family:"Segoe UI",Tahoma,sans-serif;line-height:1.05;
}
body.app-page .online-player-copy small{
  display:flex;align-items:center;gap:6px;
  font:750 10px/1.2 "Segoe UI",Tahoma,sans-serif;
  color:#b0d1bf;letter-spacing:.2px;
}
body.app-page .online-player-copy small:before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:#53e895;box-shadow:0 0 8px rgba(83,232,149,.5);
}
body.app-page .cz-online-amount{display:flex;align-items:baseline;gap:5px}
body.app-page .online-player-copy strong{
  font:900 21px/1 "Segoe UI",Tahoma,sans-serif;
  font-variant-numeric:tabular-nums;color:#57e99a;
  letter-spacing:0;text-shadow:0 0 10px rgba(55,218,126,.17);
}
body.app-page .cz-online-amount em{
  font:750 11px/1 "Segoe UI",Tahoma,sans-serif;
  color:#b5f5d0;font-style:normal;
}
body.app-page .online-player-pill.is-stale{
  border-color:rgba(173,189,198,.29);
  background:linear-gradient(110deg,#232d34,#1b2830);box-shadow:none;
}
body.app-page .online-player-pill.is-stale .cz-player-icon{
  background:#28343d;color:#9baebc;border-color:rgba(173,189,198,.15);
}
body.app-page .online-player-pill.is-stale small:before{background:#a5b6bc;box-shadow:none}
body.app-page .online-player-pill.is-stale .cz-online-amount em{color:#a7b7c2}
body.app-page .online-player-pill.is-stale strong{color:#adbec8;text-shadow:none}
@media(max-width:970px){
 body.app-page .online-player-pill{height:46px;min-height:46px;padding:5px 10px 5px 6px;gap:8px;border-radius:12px}
 body.app-page .cz-player-icon{width:33px;height:33px}
 body.app-page .online-player-copy strong{font-size:18px}
}
@media(max-width:690px){
 body.app-page .online-player-pill{height:41px;min-height:41px;padding:4px 9px 4px 5px;gap:6px}
 body.app-page .cz-player-icon{width:30px;height:30px;font-size:13px;border-radius:9px}
 body.app-page .online-player-copy small{font-size:9px;letter-spacing:0}
 body.app-page .online-player-copy strong{font-size:16px}
 body.app-page .cz-online-amount em{font-size:10px}
}
@media(max-width:390px){
 body.app-page .cz-player-icon{display:none}
 body.app-page .online-player-pill{padding:5px 8px}
 body.app-page .online-player-copy small{font-size:8px}
 body.app-page .online-player-copy strong{font-size:15px}
}

/* Small screens: keep the login brand, count and fields aligned and fully visible */
@media(max-width:600px){
 body.login-page{padding:0 13px 18px!important}
 body.login-page .login-shell{width:min(100%,484px);padding-top:max(24px,calc((100dvh - 630px)/2))}
 body.login-page .cz-login-kicker{font-size:9px;letter-spacing:1.8px;margin-bottom:14px}
 body.login-page .brand.login-brand{gap:14px;margin-bottom:17px}
 body.login-page .login-brand .brand-symbol{width:53px;height:58px}
 body.login-page .login-brand-copy strong{font-size:31px}
 body.login-page .cz-login-online{min-height:76px;padding:11px 13px;margin-bottom:14px}
 body.login-page .cz-live-icon{width:45px;height:45px;font-size:18px}
 body.login-page .cz-login-online [data-online-count]{font-size:27px}
 body.login-page .cz-auth-heading{padding:21px 22px 16px}
 body.login-page .cz-auth-content{padding:22px 21px 24px}
 body.login-page .cz-auth-heading h1{font-size:24px}
 body.login-page .cz-auth-control input{height:51px}
}
@media(max-width:350px){
 body.login-page .login-brand-copy strong{font-size:27px}
 body.login-page .cz-live-spark{display:none}
 body.login-page .cz-auth-heading{padding:20px 18px 15px}
 body.login-page .cz-auth-content{padding:20px 15px 23px}
}
@media(max-height:550px){
 body.login-page .login-shell{padding-top:16px}
}
@media(prefers-reduced-motion:reduce){
 body.login-page .cz-auth-submit,body.app-page .online-player-pill{transition:none!important}
}

/* Login online indicator — compact centered status, 2026-10-17 revision */
body.login-page .cz-login-online {
  width:min(100%,266px);
  min-height:59px;
  height:auto;
  margin:0 auto 16px;
  padding:9px 12px;
  gap:10px;
  border-radius:15px;
  border-color:rgba(77,195,130,.34);
  background:linear-gradient(115deg,rgba(12,45,34,.98),rgba(10,32,29,.97));
  box-shadow:inset 0 1px 0 rgba(184,255,208,.065),0 8px 22px rgba(0,0,0,.18),0 0 16px rgba(31,165,99,.05);
}
body.login-page .cz-login-online:after{
  width:100px;height:100px;top:-30px;right:-35px;
  box-shadow:0 0 0 20px rgba(74,199,130,.018);
}
body.login-page .cz-live-icon{
  width:37px;height:37px;border-radius:11px;font-size:16px;
}
body.login-page .cz-live-main{gap:3px}
body.login-page .cz-live-overline{
  gap:7px;font-size:10px;letter-spacing:.06px;line-height:1.25;
}
body.login-page .cz-login-online .cz-login-online-dot{width:6px;height:6px}
body.login-page .cz-login-online [data-online-count]{
  font-size:22px;letter-spacing:-.25px;line-height:1.1;
}
body.login-page .cz-live-total{gap:5px}
body.login-page .cz-live-total em{font-size:11px}
body.login-page .cz-live-spark{display:none}
@media(max-width:600px){
  body.login-page .cz-login-online{
    width:min(100%,260px);min-height:56px;
    padding:8px 11px;margin-bottom:14px;gap:9px;
  }
  body.login-page .cz-live-icon{width:35px;height:35px;font-size:15px}
  body.login-page .cz-login-online [data-online-count]{font-size:21px}
}

/* Center the wordmark against the login page, independent of the logo.
   The shield is decorative and must not push the text off-center. */
body.login-page .brand.login-brand{
  position:relative;
  display:flex;
  width:100%;
  max-width:100%;
  min-height:73px;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  margin-right:auto;
  transform:none;
}
body.login-page .login-brand-copy{
  position:absolute;
  left:50%;
  top:50%;
  width:max-content;
  max-width:calc(100% - 84px);
  transform:translate(-50%,-50%);
  text-align:center;
}
body.login-page .login-brand-copy strong,
body.login-page .login-brand-copy small{
  display:block;
  width:100%;
  text-align:center;
}
body.login-page .login-brand .brand-symbol{
  position:absolute;
  left:auto;
  right:calc(50% + 108px);
  top:50%;
  transform:translateY(-50%);
}
@media(max-width:600px){
  body.login-page .brand.login-brand{min-height:65px;transform:none}
  body.login-page .login-brand .brand-symbol{right:calc(50% + 100px)}
}