/* Auth UI - Modern Professional Design with Light Colors */
:root {
  --primary: #667eea;
  --primary-2: #764ba2;
  --primary-3: #f093fb;
  --text: #2d3748;
  --muted: #718096;
  --border: #e2e8f0;
  --glass: rgba(255,255,255,0.95);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #2d3748; }

/* Scene background - Light gradient */
.auth-wrap { 
  position: relative; 
  min-height: 100vh; 
  min-height: 100dvh; 
  overflow: hidden; 
  display: grid; 
  place-items: center; 
  padding: clamp(16px, 3vw, 32px); 
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e9f2 100%);
}

/* Animated SVG Background */
.background-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}

.wave {
  animation: wave-animation 15s ease-in-out infinite;
  transform-origin: center;
}

.wave1 {
  animation-delay: 0s;
  animation-duration: 20s;
}

.wave2 {
  animation-delay: -5s;
  animation-duration: 25s;
}

@keyframes wave-animation {
  0%, 100% {
    transform: translateX(0) translateY(0) scale(1);
  }
  25% {
    transform: translateX(-5%) translateY(-3%) scale(1.02);
  }
  50% {
    transform: translateX(5%) translateY(3%) scale(0.98);
  }
  75% {
    transform: translateX(-3%) translateY(5%) scale(1.01);
  }
}

/* Respect notches on iPhone/Samsung */
@supports(padding:max(0px)){
  .auth-wrap{
    padding-left: max(clamp(16px, 3vw, 32px), env(safe-area-inset-left));
    padding-right: max(clamp(16px, 3vw, 32px), env(safe-area-inset-right));
    padding-top: max(clamp(16px, 3vw, 32px), env(safe-area-inset-top));
    padding-bottom: max(clamp(16px, 3vw, 32px), env(safe-area-inset-bottom));
  }
}

/* Animations */
@keyframes float1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px, -10px) scale(1.04); } }
@keyframes float2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-16px, 12px) scale(1.03); } }
@keyframes fadeIn { from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none;} }

/* Responsive */
@media (max-width: 480px){ 
  .brand-badge{ width:56px; height:56px } 
}

/* Cube login form - Light theme */
.form{ 
  width:min(92vw, 460px); 
  padding:32px 28px 28px; 
  margin:0 auto; 
  position:relative; 
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(102, 126, 234, 0.15), 0 0 1px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.8);
  transform-style:preserve-3d; 
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease; 
  will-change: transform;
  z-index: 10;
}

.form .control{ 
  margin:0 0 18px; 
  position:relative; 
  z-index:1; 
  text-align:center; 
}

.form h1, .login-title { 
  font-size:28px; 
  margin:0 0 8px; 
  letter-spacing:.02em; 
  color: #2d3748;
  font-weight: 700;
}

.brand-badge{ 
  width:72px; 
  height:72px; 
  border-radius:18px; 
  display:grid; 
  place-items:center; 
  margin:0 auto 16px; 
  color:#fff; 
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
  box-shadow: 0 12px 28px rgba(102, 126, 234, 0.25);
}

.brand-badge i{ 
  color:#fff; 
  font-size:32px; 
  text-shadow:0 2px 4px rgba(0,0,0,.1); 
}

.form .sub{ 
  color:#718096; 
  font-size:14px; 
  margin-top:4px; 
  font-weight: 500;
}

.form .meta{ 
  display:flex; 
  flex-wrap:wrap; 
  gap:8px; 
  margin-top:8px; 
  justify-content:center; 
}

.form .meta span{ 
  display:inline-flex; 
  align-items:center; 
  gap:5px; 
  font-size:11px; 
  font-weight:600; 
  color:#667eea; 
  background: rgba(102, 126, 234, 0.08); 
  border:1px solid rgba(102, 126, 234, 0.2); 
  padding:5px 10px; 
  border-radius:10px; 
}

.form .control input{ 
  width:100%; 
  padding:14px 18px; 
  border:0; 
  background:transparent; 
  color:#2d3748; 
  font-family: 'Inter', sans-serif; 
  letter-spacing:.02em; 
  font-size:15px;
  font-weight: 500;
}

.form .control input::placeholder {
  color: #a0aec0;
  font-weight: 400;
}

.form .control input:hover, 
.form .control input:focus{ 
  outline:none; 
  border:0; 
}

.form .btn{ 
  width:100%; 
  display:block; 
  padding:14px 18px; 
  background:transparent; 
  outline:none; 
  border:0; 
  color:#fff; 
  letter-spacing:.04em; 
  font-weight: 700; 
  font-family: 'Inter', sans-serif; 
  font-size:15px; 
  cursor:pointer; 
  position:relative; 
  overflow:hidden;
  transition: all 0.3s ease;
}

/* Ambient glow behind the form - subtle light effect */
.form::before{ 
  content:""; 
  position:absolute; 
  inset:-20px; 
  border-radius:24px; 
  background: radial-gradient(circle at 30% 20%, rgba(102, 126, 234, 0.1), transparent 50%), 
              radial-gradient(circle at 70% 80%, rgba(118, 75, 162, 0.08), transparent 50%); 
  filter: blur(30px); 
  z-index:-1; 
  opacity:1; 
  animation: pulseGlow 8s ease-in-out infinite; 
  pointer-events:none; 
}

@keyframes pulseGlow{ 
  0%,100%{ opacity:.6; transform: scale(1);} 
  50%{ opacity:1; transform: scale(1.05);} 
}

/* Subtle tilt on hover/focus (desktop) */
@media (hover:hover){
  .form:hover{ 
    transform: perspective(1000px) translateY(-2px); 
    box-shadow: 0 24px 70px rgba(102, 126, 234, 0.2), 0 0 1px rgba(0, 0, 0, 0.05);
  }
  .form:focus-within{ 
    transform: perspective(1000px) translateY(-2px); 
    box-shadow: 0 24px 70px rgba(102, 126, 234, 0.25), 0 0 1px rgba(0, 0, 0, 0.05);
  }
}

/* Block cube styling - Light theme */
.block-cube{ 
  position:relative; 
}

.block-cube .bg-top{ 
  position:absolute; 
  height:8px; 
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); 
  bottom:100%; 
  left:4px; 
  right:-4px; 
  transform:skew(-45deg,0); 
  margin:0; 
}

.block-cube .bg-top .bg-inner{ 
  bottom:0; 
}

.block-cube .bg{ 
  position:absolute; 
  left:0; 
  top:0; 
  right:0; 
  bottom:0; 
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); 
  border-radius: 12px;
}

.block-cube .bg-right{ 
  position:absolute; 
  background: #764ba2; 
  top:-4px; 
  z-index:0; 
  bottom:4px; 
  width:8px; 
  left:100%; 
  transform:skew(0,-45deg); 
}

.block-cube .bg-right .bg-inner{ 
  left:0; 
}

.block-cube .bg .bg-inner{ 
  transition: all .2s ease-in-out; 
}

.block-cube .bg-inner{ 
  background:#ffffff; 
  position:absolute; 
  left:2px; 
  top:2px; 
  right:2px; 
  bottom:2px; 
  border-radius: 10px;
}

.block-cube .text{ 
  position:relative; 
  z-index:2; 
}

.block-cube.block-input input{ 
  position:relative; 
  z-index:2; 
}

.block-cube.block-input{ 
  transition: transform .18s ease, filter .18s ease; 
}

.block-cube.block-input:focus-within{ 
  transform: translateY(-2px); 
  filter: drop-shadow(0 8px 16px rgba(102, 126, 234, 0.15)); 
}

/* Addon (eye toggle) */
.block-cube .addon{ 
  position:absolute; 
  right:16px; 
  top:50%; 
  transform: translateY(-50%); 
  z-index:3; 
  color:#a0aec0; 
}

.block-cube .addon button{ 
  background:none; 
  border:0; 
  color:inherit; 
  padding:6px; 
  cursor:pointer; 
  transition: color 0.2s ease;
}

.block-cube .addon button:hover{ 
  color:#667eea; 
}

.block-cube.block-input input:focus ~ .bg-right .bg-inner,
.block-cube.block-input input:focus ~ .bg-top .bg-inner,
.block-cube.block-input input:focus ~ .bg .bg-inner{ 
  top:100%; 
  background: rgba(255,255,255,0.98); 
}

.block-cube.block-input .bg-top,
.block-cube.block-input .bg-right,
.block-cube.block-input .bg{ 
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.6) 0%, rgba(118, 75, 162, 0.6) 50%, rgba(240, 147, 251, 0.6) 100%); 
  transition: background .2s ease-in-out; 
}

.block-cube.block-input .bg-right .bg-inner, 
.block-cube.block-input .bg-top .bg-inner{ 
  transition: all .2s ease-in-out; 
}

.block-cube.block-input:hover .bg-top,
.block-cube.block-input:hover .bg-right,
.block-cube.block-input:hover .bg,
.block-cube.block-input:focus-within .bg-top,
.block-cube.block-input:focus-within .bg-right,
.block-cube.block-input:focus-within .bg{ 
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); 
}

.block-cube.block-cube-hover:hover .bg .bg-inner,
.block-cube.block-cube-hover:focus .bg .bg-inner{ 
  top:100%; 
}

/* Button styling - Vibrant gradient */
.form .btn .bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.form .btn .bg-inner {
  background: transparent;
}

/* Button sheen/glow */
.form .btn::after{ 
  content:""; 
  position:absolute; 
  top:0; 
  left:-150%; 
  width:120%; 
  height:100%; 
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.4) 35%, transparent 70%); 
  transform: skewX(-20deg); 
  transition: left .6s ease; 
}

.form .btn:hover::after{ 
  left:130%; 
}

.form .btn:hover{ 
  filter: drop-shadow(0 12px 24px rgba(102, 126, 234, 0.3)); 
  transform: translateY(-1px);
}

.form .btn.loading{ 
  cursor: wait; 
  opacity: 0.8;
}

.form .btn.loading::before{ 
  content:""; 
  position:absolute; 
  width:18px; 
  height:18px; 
  border:2px solid rgba(255,255,255,.8); 
  border-top-color: transparent; 
  border-radius:50%; 
  right:20px; 
  top:50%; 
  transform: translateY(-50%); 
  animation: spin .8s linear infinite; 
}

@keyframes spin{ 
  to{ transform: translateY(-50%) rotate(360deg);} 
}

/* Caps lock tip */
.caps-tip{ 
  margin-top:8px; 
  font-size:13px; 
  color:#fc8181; 
  display:none; 
  font-weight: 600;
}

.caps-tip.show{ 
  display:block; 
}

/* Alert styling - Light theme */
.alert{ 
  margin: 0 0 20px; 
  padding:12px 16px; 
  border-radius:12px; 
  border:1px solid rgba(245, 101, 101, 0.3); 
  background: rgba(254, 226, 226, 0.6); 
  color:#c53030; 
  font-weight:600; 
  text-align:center; 
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.alert i {
  font-size: 16px;
}

/* Validation */
.validation-summary-errors { 
  margin-bottom: 16px; 
  padding: 12px 16px; 
  background: rgba(254, 226, 226, 0.6); 
  color:#c53030; 
  border:1px solid rgba(245, 101, 101, 0.3); 
  border-radius: 12px; 
  font-size: 13px; 
  font-weight: 600;
}

.validation-summary-errors ul { 
  margin: 6px 0 0 18px; 
}

/* Tablet (iPad) */
@media (max-width: 1024px){
  .form { 
    padding: 40px 28px 32px; 
  }
}

/* Large phones / small tablets */
@media (max-width: 768px){
  .form{ 
    width: min(94vw, 460px); 
    padding: 36px 24px 28px; 
  }
  .brand-badge{ 
    width:64px; 
    height:64px; 
  }
  .login-title {
    font-size: 24px;
  }
}

/* Phones (iPhone/Samsung) */
@media (max-width: 480px){
  .form{ 
    width: 94vw; 
    padding: 32px 20px 24px; 
  }
  .brand-badge{ 
    width:56px; 
    height:56px; 
  }
  .brand-badge i {
    font-size: 26px;
  }
  .login-title {
    font-size: 22px;
  }
  .block-cube .addon{ 
    right:12px; 
  }
  .form .meta span {
    font-size: 11px;
    padding: 5px 10px;
  }
}