@import url('');
:root{color-scheme:dark;--purple:#ab91ff;--muted:#a2a6c2}*{box-sizing:border-box}html{min-height:100%}body{margin:0;min-height:100vh;background:#060713;color:#fff;font-family:'Segoe UI',Tahoma,Arial,sans-serif;overflow-x:hidden}#universe{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}.aurora{position:fixed;z-index:0;pointer-events:none;filter:blur(90px);border-radius:50%;opacity:.46;animation:float 16s ease-in-out infinite alternate}.a1{width:45vw;height:50vw;left:-12vw;top:-23vw;background:radial-gradient(circle,#5c2ec0,transparent 70%)}.a2{width:48vw;height:45vw;right:-14vw;bottom:-23vw;background:radial-gradient(circle,#1943a0,transparent 70%);animation-delay:-8s}.noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E")}.pointer-glow{position:fixed;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(131,86,255,.13),transparent 68%);pointer-events:none;z-index:1;transform:translate(-50%,-50%);left:50%;top:50%;transition:left .14s linear,top .14s linear}.topbar,.footer{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:26px 5vw;direction:ltr}.brand{font-size:18px;letter-spacing:3px;font-weight:900}.brand b{color:#bba5ff}.brand-symbol{display:inline-grid;place-items:center;width:34px;height:34px;margin-right:9px;border-radius:10px;background:linear-gradient(145deg,#9574ff,#4c2ba5);box-shadow:0 0 24px #7d56f055}.live{font-size:10px;color:#a8a9c5;letter-spacing:2px;display:flex;align-items:center;gap:9px}.live-dot,.small-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#69e7bd;box-shadow:0 0 12px #5df9b8;animation:pulse 2s infinite}.vtag{color:#847eaa;border:1px solid #34304b;padding:5px 7px;border-radius:5px}.stage{position:relative;z-index:2;min-height:calc(100vh - 165px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:35px 20px 40px;perspective:1200px}.glass{position:relative;isolation:isolate;width:min(480px,100%);padding:38px 38px 27px;border:1px solid rgba(184,157,255,.22);border-radius:28px;background:linear-gradient(135deg,rgba(32,28,60,.78),rgba(13,17,36,.85));box-shadow:0 40px 110px #0009,0 0 80px #7653de16,inset 0 1px #ffffff1c;backdrop-filter:blur(24px);text-align:center;overflow:hidden;animation:cardIn 1s cubic-bezier(.2,.8,.2,1) both;transform-style:preserve-3d;will-change:transform}.glass-shine{position:absolute;inset:-1px;z-index:-1;pointer-events:none;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(179,151,255,.16),transparent 60%)}.eyebrow{font-size:10px;letter-spacing:2.4px;color:#b7a6e9;direction:ltr;display:flex;align-items:center;justify-content:center;gap:10px}.emblem{width:172px;height:172px;margin:24px auto 14px;position:relative;display:grid;place-items:center}.orbit{position:absolute;border-radius:50%;inset:10px;border:1px solid rgba(164,136,255,.35);animation:spin 14s linear infinite}.orbit-a{border-top-color:#c6aaff;border-left-color:#7b5ee3;box-shadow:0 0 20px #815dff22}.orbit-b{inset:25px;border-style:dashed;border-color:#a18af966;animation-direction:reverse;animation-duration:20s}.orbit-c{inset:0;border-color:#8875f022;border-right-color:#e6d4ff;animation-duration:24s}.emblem-core{display:grid;place-items:center;width:78px;height:78px;border-radius:23px;background:linear-gradient(135deg,#9978ff,#51309d);transform:rotate(-12deg);box-shadow:0 0 50px #8c65fa66,inset 0 1px #ffffff66;animation:coreBreath 4s ease-in-out infinite}.emblem-core span{font-size:45px;transform:rotate(12deg)}.spark{position:absolute;width:5px;height:5px;background:#fff;border-radius:50%;box-shadow:0 0 15px #fff;animation:twinkle 3s infinite}.s1{top:18px;left:22px}.s2{right:12px;top:82px;animation-delay:1s}.s3{bottom:12px;left:75px;animation-delay:2s}.headline{font-size:clamp(27px,5vw,39px);line-height:1.5;margin:8px 0 8px;font-weight:850;letter-spacing:-1px}.gradient{background:linear-gradient(100deg,#e8d9ff,#ad90ff 50%,#75c8ff);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200%;animation:gradientMove 5s linear infinite}.sub{font-size:14px;line-height:2;color:#b0b2c8;margin:8px 0 16px}.sub strong{color:#d7c7ff}.separator{display:flex;align-items:center;gap:12px;color:#8e90a8;margin:23px 0 14px}.separator span{height:1px;background:linear-gradient(90deg,transparent,#665b8b,transparent);flex:1}.separator small{font-size:11px}.google-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:13px;position:relative;border:1px solid #ffffff70;border-radius:15px;padding:17px 16px;background:linear-gradient(110deg,#fff,#e9e5ff);color:#1b1730;font-size:15px;font-weight:750;text-decoration:none;cursor:pointer;font-family:inherit;transition:transform .25s,box-shadow .25s,background .25s;overflow:hidden}.google-btn:before{content:'';position:absolute;inset:0;transform:translateX(130%);background:linear-gradient(100deg,transparent,#fff9,transparent);transition:transform .65s}.google-btn:hover{transform:translateY(-4px);box-shadow:0 16px 42px #a486ff55}.google-btn:hover:before{transform:translateX(-130%)}.g-mark{font-size:21px;font-weight:900;color:#4285f4;font-family:Arial}.btn-arrow{position:absolute;left:19px;font-size:20px;transition:transform .25s}.google-btn:hover .btn-arrow{transform:translate(-3px,-3px)}.secure-note{font-size:11px;color:#8588a4;margin:20px 0 24px}.secure-note span{color:#80eac3}.card-bottom{display:flex;justify-content:space-between;direction:ltr;border-top:1px solid #ffffff18;padding-top:19px;font-size:9px;color:#777b9b;letter-spacing:1.3px}.stage-caption{margin-top:25px;display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:2px;color:#737592;direction:ltr}.stage-caption .line{width:28px;height:1px;background:#4b436c}.halo{position:absolute;width:min(650px,120vw);aspect-ratio:1;border:1px solid #a387ff12;border-radius:50%;pointer-events:none;animation:spin 35s linear infinite}.halo-two{width:min(850px,150vw);border-style:dashed;animation-direction:reverse;animation-duration:60s}.footer{font-size:10px;color:#777c98;letter-spacing:1px;gap:12px}.reveal{animation:reveal .8s both}.reveal:nth-child(2){animation-delay:.1s}.reveal:nth-child(3){animation-delay:.18s}.reveal:nth-child(4){animation-delay:.25s}.reveal:nth-child(5){animation-delay:.32s}.reveal:nth-child(6){animation-delay:.4s}.reveal:nth-child(7){animation-delay:.48s}.reveal:nth-child(8){animation-delay:.56s}.reveal:nth-child(9){animation-delay:.64s}.profile-ring{margin:27px auto 12px;width:110px;height:110px;border-radius:50%;padding:5px;background:conic-gradient(#a887ff,#6cdecb,#a887ff);animation:spin 12s linear infinite;box-shadow:0 0 45px #9776ff44}.avatar{width:100%;height:100%;object-fit:cover;border-radius:50%;border:4px solid #17152c;animation:spin 12s linear infinite reverse}.fallback{display:grid;place-items:center;background:#1c1938;font-size:36px}.status-pill{display:inline-block;margin:10px 0;color:#78edc0;background:#5cf1b012;border:1px solid #5cf1b03a;border-radius:99px;padding:8px 17px;font-size:12px}.identity-info{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0}.identity-info>div{background:#ffffff08;border:1px solid #ffffff14;border-radius:13px;padding:14px 8px;display:grid;gap:7px}.identity-info small{color:#9394b0;font-size:10px}.identity-info strong{font-size:12px;letter-spacing:1px}.connected{color:#7af0c3}.next-step{display:flex;align-items:center;justify-content:center;gap:12px;background:#9a7aff12;border:1px solid #9a7aff30;border-radius:14px;padding:12px;margin-bottom:16px}.next-step>span{font-size:27px;color:#ab91ff}.next-step p{font-size:12px;margin:0;line-height:1.9}.next-step small{color:#aaa7c4}.logout{background:#26223f;border-color:#5a4c80;color:#ded4ff}.status-icon.fail{width:75px;height:75px;border:2px solid #ff8797;border-radius:50%;display:grid;place-items:center;margin:35px auto;color:#ff8797;font-size:42px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes float{to{transform:translate(9vw,6vw) scale(1.2)}}@keyframes pulse{50%{opacity:.4;box-shadow:0 0 4px #5df9b8}}@keyframes twinkle{50%{opacity:.15;transform:scale(.4)}}@keyframes coreBreath{50%{box-shadow:0 0 80px #8c65faaa;transform:rotate(-12deg) scale(1.07)}}@keyframes gradientMove{to{background-position:200%}}@keyframes cardIn{from{opacity:0;transform:translateY(35px) scale(.95);filter:blur(8px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@media(max-width:620px){.topbar{padding:19px 20px}.live{font-size:8px}.vtag{display:none}.glass{padding:28px 22px 23px}.stage{min-height:calc(100vh - 130px)}.footer{flex-wrap:wrap;justify-content:center;padding:15px 18px;font-size:9px}.footer span:last-child{display:none}.emblem{margin-top:18px}.pointer-glow{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}#universe{display:none}}

/* BODKA ULTRA CINEMATIC MOTION */
@media (prefers-reduced-motion: no-preference) {
  .card {
    animation-duration: 2s !important;
  }

  .logo {
    animation-duration: 7s !important;
  }

  .logo::before {
    animation-duration: 22s !important;
  }

  .logo::after {
    animation-duration: 28s !important;
  }

  body::before {
    animation-duration: 60s !important;
  }

  .card::before {
    animation-duration: 10s !important;
  }

  .card h1,
  .card h2,
  .card p,
  .card .avatar {
    animation-duration: 1.6s !important;
  }

  .button {
    transition-duration: .5s !important;
  }
}

/* ============================================
   BODKA ID 4.0
   PRODUCT IDENTITY SYSTEM
   ============================================ */

:root {
  --bodka-bg: #090B10;
  --bodka-panel: #11141C;
  --bodka-border: #272B39;
  --bodka-primary: #A78BFA;
  --bodka-text: #F5F5FA;
  --bodka-muted: #9398AA;
}

html {
  background: var(--bodka-bg) !important;
}

body {
  min-height: 100vh !important;
  margin: 0 !important;
  background: #090B10 !important;
  color: var(--bodka-text) !important;
  font-family: "Segoe UI", Tahoma, sans-serif !important;
  perspective: none !important;
  overflow-x: hidden !important;
}

/* Completely remove the old universe */
#universe,
#pointerGlow,
#bodka-particles,
canvas {
  display: none !important;
}

body::before,
body::after {
  content: none !important;
  display: none !important;
}

.card::before,
.card::after,
#glass::before,
#glass::after {
  content: none !important;
  display: none !important;
}

/* Application window */
.card,
#glass {
  position: relative !important;
  width: min(480px, 92vw) !important;
  padding: 42px 38px !important;
  margin: 28px auto !important;
  background: var(--bodka-panel) !important;
  border: 1px solid var(--bodka-border) !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 75px #00000065 !important;
  backdrop-filter: none !important;
  transform: none !important;
  transition: border-color .25s ease,
              box-shadow .25s ease !important;
}

.card:hover,
#glass:hover {
  border-color: #514565 !important;
}

/* Brand identity */
.logo {
  position: relative !important;
  display: block !important;
  width: fit-content !important;
  margin: 12px auto 30px !important;
  padding: 15px 22px !important;
  color: #F5F1FF !important;
  background: #1B1828 !important;
  border: 1px solid #493A67 !important;
  border-radius: 15px !important;
  font-size: clamp(29px, 7vw, 40px) !important;
  font-weight: 850 !important;
  letter-spacing: 3px !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.logo::before,
.logo::after {
  content: none !important;
  display: none !important;
}

/* Typography */
h1 {
  color: #F7F6FC !important;
  font-size: clamp(23px, 5vw, 29px) !important;
  font-weight: 750 !important;
  line-height: 1.45 !important;
  letter-spacing: -.5px !important;
  text-shadow: none !important;
}

h2 {
  color: #F1EEFA !important;
  font-weight: 650 !important;
}

p {
  color: var(--bodka-muted) !important;
  line-height: 1.9 !important;
}

small {
  color: #767B8E !important;
}

.success {
  color: #75D7B4 !important;
  text-shadow: none !important;
}

/* Buttons */
.button,
button[type="submit"] {
  display: block !important;
  width: 100% !important;
  padding: 16px 20px !important;
  border: 1px solid #E8E5F0 !important;
  border-radius: 12px !important;
  background: #F4F2FA !important;
  color: #18151F !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-align: center !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background .2s ease,
              border-color .2s ease !important;
}

.button:hover,
button[type="submit"]:hover {
  background: #DDD4FF !important;
  border-color: #DDD4FF !important;
  transform: none !important;
  box-shadow: none !important;
}

.button:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid #A78BFA !important;
  outline-offset: 4px !important;
}

.secondary {
  background: #1D2130 !important;
  color: #F1EEFA !important;
  border-color: #353A4C !important;
}

.secondary:hover {
  background: #2A3041 !important;
  border-color: #51566B !important;
}

/* Account avatar */
.avatar {
  width: 76px !important;
  height: 76px !important;
  border-radius: 17px !important;
  border: 2px solid #514568 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Disable all old effects */
*,
*::before,
*::after {
  animation: none !important;
  scroll-behavior: auto !important;
}

@media (max-width: 520px) {
  .card,
  #glass {
    padding: 32px 22px !important;
    border-radius: 18px !important;
  }
}