@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --reg-bg:#020b18;
  --reg-deep:#03142d;
  --reg-card:#061a36;
  --reg-card-2:#0a254a;
  --reg-line:rgba(65,120,190,.48);
  --reg-text:#f7faff;
  --reg-muted:#91a5c1;
  --reg-neon:#b6ff00;
  --reg-blue:#2f7cff;
  --reg-danger:#ff6978;
}

html,body{
  min-height:100%;
  background:var(--reg-bg)!important;
}

body{
  overflow-x:hidden;
}

.cnc-register-page,
.cnc-register-page *{
  box-sizing:border-box;
}

.cnc-register-page{
  position:relative;
  min-height:100vh;
  padding:24px 14px;
  overflow:hidden;
  color:var(--reg-text);
  font-family:Manrope,Arial,sans-serif;
  background:
    radial-gradient(circle at 50% 5%,rgba(19,80,164,.34),transparent 28%),
    radial-gradient(circle at 88% 18%,rgba(182,255,0,.06),transparent 22%),
    linear-gradient(180deg,#04152e,#020b18 58%,#020815);
}

.cnc-register-page::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.013) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(#000,transparent 72%);
}

.cnc-register-court{
  position:absolute;
  inset:0 0 auto;
  height:570px;
  overflow:hidden;
  pointer-events:none;
  opacity:.88;
}

.cnc-register-court::before,
.cnc-register-court::after{
  content:"";
  position:absolute;
  top:105px;
  bottom:35px;
  width:39%;
  border:1px solid rgba(103,154,215,.18);
  background:
    repeating-linear-gradient(90deg,rgba(89,135,191,.10) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(0deg,rgba(89,135,191,.08) 0 1px,transparent 1px 28px);
}

.cnc-register-court::before{
  left:-9%;
  transform:perspective(520px) rotateY(28deg) skewY(4deg);
}

.cnc-register-court::after{
  right:-9%;
  transform:perspective(520px) rotateY(-28deg) skewY(-4deg);
}

.register-net{
  position:absolute;
  left:5%;
  right:5%;
  top:370px;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(131,170,220,.44),transparent);
}

.register-court-line{
  position:absolute;
  top:410px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(147,188,239,.40),transparent);
  transform-origin:center;
}

.register-line-left{left:-4%;width:60%;transform:rotate(-8deg)}
.register-line-right{right:-4%;width:60%;transform:rotate(8deg)}
.register-line-center{left:50%;top:373px;width:1px;height:170px;background:linear-gradient(rgba(147,188,239,.34),transparent)}

.register-court-glow{
  position:absolute;
  left:50%;
  top:245px;
  width:650px;
  height:330px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(19,91,181,.25),transparent 66%);
  filter:blur(20px);
}

.register-light{
  position:absolute;
  top:90px;
  width:7px;
  height:190px;
  background:linear-gradient(#6c88ad,transparent);
  opacity:.42;
}

.register-light::before{
  content:"";
  position:absolute;
  top:-2px;
  left:-18px;
  width:43px;
  height:22px;
  border-radius:5px;
  background:linear-gradient(135deg,#d8e7ff,#607da4);
  box-shadow:0 0 38px rgba(202,227,255,.48);
}

.register-light-1{left:8%;transform:rotate(-8deg)}
.register-light-2{left:28%;top:150px;transform:scale(.65)}
.register-light-3{right:28%;top:150px;transform:scale(.65)}
.register-light-4{right:8%;transform:rotate(8deg)}

.cnc-register-shell{
  position:relative;
  z-index:2;
  width:min(100%,900px);
  min-height:calc(100vh - 48px);
  margin:0 auto;
  padding:48px 70px 50px;
  overflow:hidden;
  border:1px solid rgba(79,130,194,.62);
  border-radius:34px;
  background:
    linear-gradient(180deg,rgba(4,17,40,.66),rgba(2,11,27,.95)),
    radial-gradient(circle at 50% 0,rgba(32,92,175,.12),transparent 40%);
  box-shadow:0 35px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.cnc-register-shell::before{
  content:attr(data-brand);
  position:absolute;
  top:38px;
  left:50%;
  transform:translateX(-50%);
  color:rgba(42,93,157,.06);
  font-size:240px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.08em;
  pointer-events:none;
}

.cnc-register-hero{
  position:relative;
  z-index:2;
  text-align:center;
}

.cnc-register-logo{
  width:230px;
  max-height:115px;
  object-fit:contain;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.48));
}

.cnc-register-eyebrow{
  margin:0 0 11px;
  color:var(--reg-neon);
  font-size:11px;
  font-weight:800;
  letter-spacing:.28em;
}

.cnc-register-hero h1{
  margin:0;
  color:#fff;
  font-size:31px;
  line-height:1.1;
  font-weight:800;
}

.cnc-register-hero h1 span{
  color:var(--reg-neon);
}

.cnc-register-hero>p:last-of-type{
  margin:10px 0 26px;
  color:#afbdd1;
  font-size:15px;
}

.cnc-register-ball{
  position:absolute;
  top:33px;
  right:13%;
  width:30px;
  height:30px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#efffa8 0 8%,#c8ff16 25%,#7bd600 72%,#3f8b00);
  box-shadow:0 0 22px rgba(182,255,0,.80),-48px 25px 40px rgba(182,255,0,.16);
  animation:registerBallFloat 4.2s ease-in-out infinite;
}

.cnc-register-ball::before,
.cnc-register-ball::after{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:50%;
  transform:rotate(42deg);
}

.cnc-register-ball::after{transform:rotate(-42deg)}

@keyframes registerBallFloat{
  50%{transform:translateY(-8px) translateX(5px)}
}

.cnc-register-card{
  position:relative;
  z-index:3;
  width:min(100%,650px);
  margin:0 auto;
  padding:27px 38px 30px;
  border:1px solid rgba(53,112,181,.65);
  border-radius:27px;
  background:
    radial-gradient(circle at 24% 9%,rgba(47,124,255,.10),transparent 28%),
    linear-gradient(145deg,rgba(7,28,59,.97),rgba(4,17,38,.97));
  box-shadow:0 24px 60px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.025);
}

.cnc-register-error{
  min-height:44px;
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 18px;
  padding:10px 13px;
  border:1px solid rgba(255,105,120,.42);
  border-radius:13px;
  background:rgba(255,105,120,.09);
  color:#ffadb6;
  font-size:12px;
  font-weight:700;
}

.cnc-register-error>span{
  width:22px;
  height:22px;
  flex:0 0 22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--reg-danger);
  color:#fff;
  font-weight:800;
}

.cnc-register-field{
  display:block;
  margin-bottom:16px;
}

.cnc-register-field>span,
.cnc-register-upload>span:first-child{
  display:block;
  margin:0 0 8px;
  color:#eef3fa;
  font-size:12px;
  font-weight:700;
}

.cnc-register-field>small{
  display:block;
  margin:6px 0 0;
  color:#778eae;
  font-size:9px;
}

.cnc-register-input{
  position:relative;
  height:54px;
  display:flex;
  align-items:center;
  border:1px solid rgba(61,109,168,.58);
  border-radius:14px;
  background:rgba(4,18,41,.78);
  transition:.2s ease;
}

.cnc-register-input:focus-within{
  border-color:rgba(182,255,0,.66);
  box-shadow:0 0 0 3px rgba(182,255,0,.07),0 12px 28px rgba(0,0,0,.16);
}

.cnc-register-input>i{
  width:49px;
  flex:0 0 49px;
  display:grid;
  place-items:center;
  color:var(--reg-neon);
}

.cnc-register-input svg,
.cnc-register-submit svg,
.cnc-upload-icon svg,
.cnc-register-password-toggle svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.cnc-register-input>i svg{width:20px;height:20px}

.cnc-register-input>b{
  color:#fff;
  font-size:14px;
  font-weight:700;
}

.cnc-register-input>em{
  width:1px;
  height:24px;
  margin:0 12px;
  background:rgba(89,127,176,.28);
}

.cnc-register-input input{
  min-width:0;
  width:100%;
  height:100%;
  padding:0 15px 0 0;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  font:600 14px Manrope,Arial,sans-serif;
}

.cnc-register-input input::placeholder{color:#697e9d}

.cnc-register-password-toggle{
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  color:#879ab5;
  cursor:pointer;
}

.cnc-register-password-toggle svg{width:20px;height:20px}
.cnc-register-password-toggle .eye-closed{display:none}
.cnc-register-password-toggle.active .eye-open{display:none}
.cnc-register-password-toggle.active .eye-closed{display:block}

.cnc-register-levels{
  margin:2px 0 17px;
  padding:0;
  border:0;
}

.cnc-register-levels legend{
  margin-bottom:8px;
  color:#eef3fa;
  font-size:12px;
  font-weight:700;
}

.cnc-level-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}

.cnc-level-option{
  position:relative;
  min-height:58px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  overflow:hidden;
  border:1px solid rgba(61,109,168,.48);
  border-radius:13px;
  background:rgba(4,18,41,.56);
  cursor:pointer;
  transition:.18s ease;
}

.cnc-level-option:hover{
  border-color:rgba(182,255,0,.35);
  transform:translateY(-1px);
}

.cnc-level-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.cnc-level-radio{
  width:19px;
  height:19px;
  flex:0 0 19px;
  border:1.5px solid #9db1cd;
  border-radius:50%;
  background:#07172f;
  box-shadow:inset 0 0 0 4px #07172f;
}

.cnc-level-option b{
  display:block;
  color:#fff;
  font-size:10.5px;
  font-weight:800;
}

.cnc-level-option small{
  display:block;
  margin-top:2px;
  color:#90a4c2;
  font-size:9px;
}

.cnc-level-option:has(input:checked){
  border-color:var(--reg-neon);
  background:linear-gradient(145deg,rgba(182,255,0,.08),rgba(8,29,60,.76));
  box-shadow:0 0 0 1px rgba(182,255,0,.08),0 12px 24px rgba(0,0,0,.12);
}

.cnc-level-option:has(input:checked) .cnc-level-radio{
  border-color:#fff;
  background:var(--reg-blue);
  box-shadow:inset 0 0 0 4px var(--reg-blue),0 0 14px rgba(47,124,255,.6);
}

.cnc-register-upload{
  display:block;
  margin-bottom:16px;
}

.cnc-register-upload>span:first-child em{
  color:#8398b7;
  font-style:normal;
  font-weight:500;
}

.cnc-upload-box{
  position:relative;
  min-height:58px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  padding:8px 11px;
  border:1px solid rgba(61,109,168,.58);
  border-radius:14px;
  background:rgba(4,18,41,.68);
  cursor:pointer;
}

.cnc-upload-box input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}

.cnc-upload-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid rgba(182,255,0,.42);
  border-radius:50%;
  color:var(--reg-neon);
  background:rgba(182,255,0,.06);
}

.cnc-upload-icon svg{width:21px;height:21px}

.cnc-upload-copy{
  min-width:0;
}

.cnc-upload-copy b{
  display:block;
  overflow:hidden;
  color:#f6f8fc;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.cnc-upload-copy small{
  display:block;
  margin-top:3px;
  color:#7f94b3;
  font-size:8px;
}

.cnc-upload-button{
  min-height:34px;
  display:flex;
  align-items:center;
  padding:0 12px;
  border:1px solid rgba(182,255,0,.66);
  border-radius:9px;
  color:#fff;
  font-size:9px;
  font-weight:800;
}

.cnc-avatar-preview{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:8px;
  padding:8px;
  border:1px solid rgba(61,109,168,.35);
  border-radius:12px;
  background:rgba(4,18,41,.5);
}

.cnc-avatar-preview[hidden]{display:none!important}

.cnc-avatar-preview img{
  width:42px;
  height:42px;
  border:2px solid var(--reg-neon);
  border-radius:50%;
  object-fit:cover;
}

.cnc-avatar-preview button{
  min-height:30px;
  padding:0 10px;
  border:1px solid rgba(255,105,120,.42);
  border-radius:8px;
  background:rgba(255,105,120,.07);
  color:#ff9da8;
  font:700 9px Manrope,Arial,sans-serif;
  cursor:pointer;
}

.cnc-register-terms{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:4px 0 17px;
  color:#b7c4d6;
  font-size:9.5px;
  line-height:1.5;
  cursor:pointer;
}

.cnc-register-terms input{
  position:absolute;
  opacity:0;
}

.cnc-terms-box{
  width:21px;
  height:21px;
  flex:0 0 21px;
  display:grid;
  place-items:center;
  border:1px solid rgba(182,255,0,.44);
  border-radius:5px;
  background:#07172f;
  color:transparent;
  font-size:12px;
  font-weight:800;
}

.cnc-register-terms input:checked+.cnc-terms-box{
  background:linear-gradient(145deg,#d1ff24,#8fe100);
  color:#102700;
}

.cnc-register-terms b{color:var(--reg-neon)}

.cnc-register-submit{
  width:100%;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  border-radius:14px;
  background:linear-gradient(180deg,#d7ff12,#9fec00);
  color:#102200;
  box-shadow:0 14px 28px rgba(182,255,0,.14);
  font:800 15px Manrope,Arial,sans-serif;
  cursor:pointer;
}

.cnc-register-submit svg{width:23px;height:23px}
.cnc-register-submit:hover{filter:brightness(1.04);transform:translateY(-1px)}
.cnc-register-submit:disabled{opacity:.72;cursor:wait}

.cnc-register-divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin:19px 0;
  color:#8ca0bd;
  font-size:10px;
}

.cnc-register-divider::before,
.cnc-register-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(105,145,195,.42));
}

.cnc-register-divider::after{
  background:linear-gradient(90deg,rgba(105,145,195,.42),transparent);
}

.cnc-register-login-button{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(47,124,255,.58);
  border-radius:13px;
  background:rgba(47,124,255,.07);
  color:#b8c8de;
  font-size:10px;
  text-decoration:none;
}

.cnc-register-login-button b{
  margin-left:5px;
  color:var(--reg-neon);
}

.cnc-register-footer{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:24px;
}

.cnc-register-footer img{
  width:122px;
  max-height:48px;
  object-fit:contain;
  opacity:.94;
}

.cnc-register-footer span{
  margin-top:5px;
  color:#637998;
  font-size:9px;
  letter-spacing:.05em;
}

.cnc-register-racket{
  position:absolute;
  left:-25px;
  bottom:-35px;
  width:205px;
  height:205px;
  color:rgba(182,255,0,.78);
  opacity:.48;
  pointer-events:none;
}

.cnc-register-racket svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:3;
}

.cnc-register-racket .register-art-ball{
  fill:var(--reg-neon);
  stroke:#e7ff83;
  filter:drop-shadow(0 0 16px rgba(182,255,0,.55));
}

@media(max-width:760px){
  .cnc-register-page{padding:0}
  .cnc-register-shell{
    width:100%;
    min-height:100vh;
    padding:29px 17px 40px;
    border:0;
    border-radius:0;
  }
  .cnc-register-shell::before{top:34px;font-size:160px}
  .cnc-register-court{height:460px}
  .register-net{top:315px}
  .register-court-line{top:350px}
  .cnc-register-logo{width:185px;max-height:90px}
  .cnc-register-eyebrow{font-size:9px}
  .cnc-register-hero h1{font-size:25px}
  .cnc-register-hero>p:last-of-type{font-size:12px;margin-bottom:21px}
  .cnc-register-card{padding:22px 18px 25px;border-radius:22px}
  .cnc-level-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cnc-register-racket{width:145px;height:145px;left:-42px}
}

@media(max-width:430px){
  .cnc-register-shell{padding-left:13px;padding-right:13px}
  .cnc-register-ball{right:7%;top:17px;width:23px;height:23px}
  .cnc-register-logo{width:160px}
  .cnc-register-hero h1{font-size:22px}
  .cnc-register-card{padding-left:14px;padding-right:14px}
  .cnc-register-input{height:52px}
  .cnc-level-option{padding:9px;gap:8px}
  .cnc-upload-box{grid-template-columns:auto minmax(0,1fr)}
  .cnc-upload-button{display:none}
  .cnc-register-racket{display:none}
}