/* ═══════════════════════════════════════════════
   T-seven — Bold Youth Auth
   ═══════════════════════════════════════════════ */

@keyframes meshMove1 {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(80px,-60px) scale(1.15); }
  66%  { transform: translate(-40px,40px) scale(0.9); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes meshMove2 {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(-70px,50px) scale(1.1); }
  66%  { transform: translate(50px,-30px) scale(0.95); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes meshMove3 {
  0%   { transform: translate(0,0) scale(1) rotate(0deg); }
  50%  { transform: translate(40px,60px) scale(1.2) rotate(180deg); }
  100% { transform: translate(0,0) scale(1) rotate(360deg); }
}
@keyframes meshMove4 {
  0%   { transform: translate(0,0); opacity:.4; }
  50%  { transform: translate(-60px,-40px); opacity:.7; }
  100% { transform: translate(0,0); opacity:.4; }
}

@keyframes floatUp {
  0%   { transform: translateY(110vh) rotate(0deg); opacity:0; }
  8%   { opacity:1; }
  92%  { opacity:1; }
  100% { transform: translateY(-10vh) rotate(360deg); opacity:0; }
}

@keyframes cardIn {
  from { opacity:0; transform: translateY(40px) scale(0.94); filter: blur(8px); }
  to   { opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes logoSlam {
  0%   { opacity:0; transform: scale(0) rotate(-30deg); }
  50%  { opacity:1; transform: scale(1.15) rotate(5deg); }
  65%  { transform: scale(0.92) rotate(-2deg); }
  80%  { transform: scale(1.04) rotate(1deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes logoPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,60,120,0.35), 0 8px 30px rgba(0,0,0,0.4); }
  50%     { box-shadow: 0 0 0 14px rgba(255,60,120,0), 0 14px 40px rgba(0,0,0,0.5); }
}

@keyframes letterDrop {
  0%   { opacity:0; transform: translateY(-25px) scale(1.3); filter: blur(6px); }
  60%  { opacity:1; transform: translateY(3px) scale(0.98); filter: blur(0); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}

@keyframes neonFlicker {
  0%,19%,21%,53%,55%,100% { opacity:1; }
  20%,54% { opacity:0.4; }
}

@keyframes btnGlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes shimmerSlide {
  0%   { left: -100%; }
  100% { left: 200%; }
}

@keyframes shakeHard {
  0%,100% { transform: translateX(0) rotate(0); }
  10% { transform: translateX(-12px) rotate(-2deg); }
  20% { transform: translateX(10px) rotate(1.5deg); }
  30% { transform: translateX(-8px) rotate(-1deg); }
  40% { transform: translateX(6px) rotate(0.5deg); }
  50% { transform: translateX(-4px); }
  60% { transform: translateX(2px); }
}

@keyframes successBoom {
  0%   { box-shadow: 0 0 0 0 rgba(0,255,136,0.6); border-color: #00ff88; }
  50%  { box-shadow: 0 0 0 16px rgba(0,255,136,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,255,136,0); }
}

@keyframes dotBounce {
  0%,80%,100% { transform: scale(0.5); opacity:0.3; }
  40% { transform: scale(1.4); opacity:1; }
}

@keyframes exitBlast {
  0%   { opacity:1; transform: scale(1); }
  100% { opacity:0; transform: scale(1.1); filter: blur(12px); }
}

@keyframes scanline {
  0%   { top: -4px; }
  100% { top: 100%; }
}

@keyframes tagFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}

/* ── Overlay ── */
#diia-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #08080c;
  font-family: 'e-Ukraine', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
  touch-action: none;
}
#diia-auth-overlay.exit {
  animation: exitBlast 0.7s cubic-bezier(0.4,0,0.2,1) forwards;
  pointer-events: none;
}

/* ── Mesh gradient blobs — VIVID ── */
.auth-aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  will-change: transform;
  mix-blend-mode: screen;
}
.auth-aurora--1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(255,60,120,0.22) 0%, rgba(255,120,50,0.08) 50%, transparent 70%);
  top: -18%; right: -12%;
  animation: meshMove1 16s ease-in-out infinite;
}
.auth-aurora--2 {
  width: 450px; height: 450px;
  background: radial-gradient(circle, rgba(100,80,255,0.2) 0%, rgba(200,60,255,0.06) 50%, transparent 70%);
  bottom: -14%; left: -10%;
  animation: meshMove2 22s ease-in-out infinite;
}
.auth-aurora--3 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(0,200,255,0.15) 0%, rgba(0,255,170,0.05) 50%, transparent 70%);
  top: 35%; left: 50%; margin-left: -175px;
  animation: meshMove3 18s ease-in-out infinite;
}
.auth-aurora--4 {
  width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(255,220,0,0.1) 0%, transparent 70%);
  top: 10%; left: 15%;
  animation: meshMove4 14s ease-in-out infinite;
}

/* ── Scanline effect ── */
.auth-scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.auth-scanline::after {
  content: '';
  position: absolute;
  left: 0; width: 100%; height: 4px;
  background: linear-gradient(90deg, transparent 20%, rgba(255,60,120,0.06) 50%, transparent 80%);
  animation: scanline 6s linear infinite;
}

/* ── Noise texture ── */
.auth-noise {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  pointer-events: none;
}

/* ── Particles ── */
.auth-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: floatUp linear infinite;
}

/* ── Card ── */
#diia-auth-card {
  position: relative;
  width: 100%;
  max-width: 390px;
  margin: 0 20px;
  padding: 44px 30px 36px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 28px;
  backdrop-filter: blur(50px) saturate(1.5);
  -webkit-backdrop-filter: blur(50px) saturate(1.5);
  box-shadow: 0 8px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.07);
  animation: cardIn 1s cubic-bezier(0.16,1,0.3,1) 0.2s both;
}
#diia-auth-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 29px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,60,120,0.25) 0%, rgba(100,80,255,0.15) 30%, transparent 50%, rgba(0,200,255,0.12) 75%, rgba(255,60,120,0.18) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── Logo ── */
#diia-auth-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
#diia-auth-logo {
  width: 76px; height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a0a20, #0a1628);
  border: 1.5px solid rgba(255,60,120,0.25);
  border-radius: 24px;
  position: relative;
  animation: logoSlam 0.9s cubic-bezier(0.16,1,0.3,1) 0.4s both, logoPulse 3.5s ease-in-out 1.5s infinite;
  overflow: hidden;
}
#diia-auth-logo::before {
  content: '';
  position: absolute;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(255,60,120,0.1) 0%, rgba(100,80,255,0.08) 50%, rgba(0,200,255,0.06) 100%);
  pointer-events: none;
}
#diia-auth-logo::after {
  content: '';
  position: absolute;
  width: 50px; height: 50px;
  background: radial-gradient(circle, rgba(255,60,120,0.2) 0%, transparent 70%);
  top: -15px; right: -15px;
  border-radius: 50%;
  pointer-events: none;
}
#diia-auth-logo svg {
  width: 40px; height: 40px;
  position: relative; z-index: 1;
  filter: drop-shadow(0 0 8px rgba(255,60,120,0.3));
}

/* ── Title ── */
#diia-auth-title {
  text-align: center;
  margin: 0 0 4px;
  line-height: 1.2;
  min-height: 36px;
}
#diia-auth-title .auth-letter {
  display: inline-block;
  font-size: 28px;
  font-weight: 700;
  animation: letterDrop 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
#diia-auth-title .auth-letter-white { color: #fff; }
#diia-auth-title .auth-letter-pink {
  background: linear-gradient(135deg, #ff3c78, #ff6b3c);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
#diia-auth-title .auth-letter-blue {
  background: linear-gradient(135deg, #6450ff, #00c8ff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Tag line ── */
#diia-auth-tag {
  text-align: center;
  margin: 6px 0 0;
  animation: authFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 1.1s both;
}
@keyframes authFadeUp {
  from { opacity:0; transform: translateY(12px); }
  to   { opacity:1; transform: translateY(0); }
}
#diia-auth-tag span {
  display: inline-block;
  padding: 3px 12px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,60,120,0.8);
  border: 1px solid rgba(255,60,120,0.15);
  border-radius: 20px;
  background: rgba(255,60,120,0.05);
  animation: tagFloat 3s ease-in-out infinite;
}

/* ── Subtitle ── */
#diia-auth-subtitle {
  color: rgba(255,255,255,0.4);
  font-size: 13.5px;
  font-weight: 300;
  text-align: center;
  margin: 20px 0 28px;
  line-height: 1.6;
  animation: authFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 1.2s both;
}

/* ── Separator ── */
#diia-auth-sep {
  width: 50px; height: 3px;
  background: linear-gradient(90deg, #ff3c78, #6450ff, #00c8ff);
  margin: 0 auto 24px;
  border-radius: 2px;
  animation: authFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 1.25s both;
}

/* ── Input ── */
#diia-auth-input-group {
  position: relative;
  margin-bottom: 10px;
  animation: authFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 1.3s both;
}
#diia-auth-input {
  width: 100%;
  padding: 15px 20px;
  font-size: 17px;
  text-align: center;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  color: #fff;
  outline: none;
  font-family: 'e-Ukraine', sans-serif;
  font-weight: 400;
  letter-spacing: 3px;
  box-sizing: border-box;
  transition: border-color .3s, background .3s, box-shadow .3s;
  appearance: none; -webkit-appearance: none;
}
#diia-auth-input:focus {
  border-color: rgba(255,60,120,0.4);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 5px rgba(255,60,120,0.06), 0 4px 20px rgba(255,60,120,0.04);
}
#diia-auth-input::placeholder {
  color: rgba(255,255,255,0.2);
  letter-spacing: 1px;
  font-weight: 300;
  font-size: 14px;
}
#diia-auth-input.shake { animation: shakeHard 0.5s ease; }
#diia-auth-input.success { animation: successBoom 0.7s ease; }

/* ── Error ── */
#diia-auth-error {
  color: #ff5c5c;
  font-size: 12.5px;
  font-weight: 300;
  text-align: center;
  min-height: 20px;
  padding: 4px 0;
  transition: opacity .3s;
}

/* ── Button ── */
#diia-auth-btn {
  width: 100%;
  padding: 16px;
  font-size: 15.5px;
  font-weight: 600;
  background: linear-gradient(135deg, #ff3c78, #ff6b3c, #ff3c78);
  background-size: 200% 200%;
  animation: authFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 1.4s both, btnGlow 4s ease infinite 2s;
  color: #fff;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  font-family: 'e-Ukraine', sans-serif;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .3s;
  box-shadow: 0 4px 24px rgba(255,60,120,0.25);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
#diia-auth-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: shimmerSlide 4s ease infinite 2.5s;
}
#diia-auth-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(255,60,120,0.35);
}
#diia-auth-btn:active { transform: scale(0.96); }
#diia-auth-btn:disabled {
  opacity: 0.4; cursor: default; transform: none; box-shadow: none;
}

/* ── Loading dots ── */
#diia-auth-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 6px 0 2px;
}
#diia-auth-dots.active { display: flex; }
#diia-auth-dots span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #ff3c78;
  animation: dotBounce 1.4s ease-in-out infinite;
}
#diia-auth-dots span:nth-child(2) { animation-delay: .15s; background: #6450ff; }
#diia-auth-dots span:nth-child(3) { animation-delay: .3s; background: #00c8ff; }

/* ── Footer ── */
#diia-auth-footer {
  text-align: center;
  margin-top: 24px;
  animation: authFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 1.5s both;
}
#diia-auth-footer span {
  color: rgba(255,255,255,0.12);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

/* ── Mobile ── */
@media (max-width: 420px) {
  #diia-auth-card { margin: 0 14px; padding: 36px 22px 30px; border-radius: 24px; }
  #diia-auth-title .auth-letter { font-size: 24px; }
  #diia-auth-logo { width: 64px; height: 64px; border-radius: 20px; }
  #diia-auth-logo svg { width: 34px; height: 34px; }
  .auth-aurora--1 { width: 300px; height: 300px; }
  .auth-aurora--2 { width: 260px; height: 260px; }
  .auth-aurora--3 { width: 200px; height: 200px; }
  .auth-aurora--4 { width: 160px; height: 160px; }
}
@media (max-height: 640px) {
  #diia-auth-card { padding: 26px 20px 22px; }
  #diia-auth-logo-wrap { margin-bottom: 14px; }
  #diia-auth-logo { width: 54px; height: 54px; }
  #diia-auth-logo svg { width: 28px; height: 28px; }
  #diia-auth-subtitle { margin: 14px 0 20px; }
  #diia-auth-sep { margin-bottom: 18px; }
}
@media (min-width: 768px) {
  #diia-auth-card { max-width: 430px; padding: 52px 44px 44px; }
  #diia-auth-title .auth-letter { font-size: 32px; }
}