/* SOS KEY — glass skin for the platform auth page. Active only while html.sk-auth-on (set by auth-glass.js). */
html.sk-auth-on, html.sk-auth-on body { background: radial-gradient(120% 80% at 50% 0%, #0b1a3d 0%, #050a18 55%, #020409 100%) fixed; }
html.sk-auth-on #root { position: relative; z-index: 1; }

/* background effects: moving light streaks + floating glass orbs */
.sk-fx { display: none; position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
html.sk-auth-on .sk-fx { display: block; }
.sk-fx .streak { position: absolute; left: -40%; width: 180%; height: 2px; border-radius: 2px; opacity: .7;
  background: linear-gradient(90deg, transparent, rgba(21, 137, 252, 0) 20%, #4d8dff 50%, rgba(21, 137, 252, 0) 80%, transparent);
  box-shadow: 0 0 14px 2px rgba(21, 137, 252, .5); animation: skSweep 7s linear infinite; }
.sk-fx .s1 { top: 14%; transform: rotate(-24deg); }
.sk-fx .s2 { top: 58%; transform: rotate(-16deg); animation-duration: 9s; animation-delay: -3s; opacity: .45; }
.sk-fx .s3 { top: 88%; transform: rotate(-30deg); animation-duration: 11s; animation-delay: -6s; opacity: .35; }
@keyframes skSweep { from { translate: -35% 0; } to { translate: 35% 0; } }
.sk-fx .orb { position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .55), rgba(120, 180, 255, .18) 30%, rgba(10, 75, 240, .08) 60%, transparent 72%);
  box-shadow: inset 0 0 18px rgba(120, 180, 255, .25), 0 0 30px rgba(21, 137, 252, .15); animation: skFloat 9s ease-in-out infinite; }
.sk-fx .o1 { width: 130px; height: 130px; top: 8%; left: -40px; }
.sk-fx .o2 { width: 80px; height: 80px; top: 62%; right: -14px; animation-duration: 11s; animation-delay: -4s; }
.sk-fx .o3 { width: 180px; height: 180px; bottom: -70px; left: 8%; animation-duration: 13s; animation-delay: -7s; opacity: .7; }
@keyframes skFloat { 50% { transform: translate(14px, -22px); } }

/* page wrapper */
.sk-auth { background: transparent !important; color: #eaf2ff; }
.sk-auth > .pointer-events-none { background: radial-gradient(ellipse at 15% 20%, rgba(21, 137, 252, .14), transparent 55%) !important; }
.sk-auth .text-brand { color: #4d8dff !important; text-shadow: 0 0 18px rgba(21, 137, 252, .55); }
.sk-auth aside a[aria-label="SOS KEY"] svg, .sk-auth section a[aria-label="SOS KEY"] svg { display: none; }
.sk-auth aside a[aria-label="SOS KEY"] { width: 96px; height: 96px; background: url(brand/sos-logo.png) center / contain no-repeat; filter: drop-shadow(0 0 22px rgba(21, 137, 252, .55)); animation: skLogoIn .9s cubic-bezier(.2, .9, .25, 1.15) both; }
.sk-auth section a[aria-label="SOS KEY"] { display: block; width: 40px; height: 40px; background: url(brand/sos-logo.png) center / contain no-repeat; filter: drop-shadow(0 0 10px rgba(21, 137, 252, .6)); }
.sk-auth aside > * { animation: skRise .7s ease both; }
.sk-auth aside > :nth-child(2) { animation-delay: .2s; } .sk-auth aside > :nth-child(3) { animation-delay: .3s; }
.sk-auth aside > :nth-child(4) { animation-delay: .4s; } .sk-auth aside > :nth-child(5) { animation-delay: .5s; }

/* glass card */
@property --sk-spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.sk-auth section { position: relative; overflow: visible !important; color: #eaf2ff;
  background: linear-gradient(160deg, rgba(40, 70, 130, .34), rgba(8, 14, 32, .6)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 0 0 1px rgba(120, 170, 255, .18) inset, 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(21, 137, 252, .18) !important;
  animation: skCardIn .9s cubic-bezier(.2, .9, .25, 1) .15s both; }
.sk-auth section::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--sk-spin), transparent 0 55%, #4d8dff 70%, #b9dcff 75%, #4d8dff 80%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: skSpin 5s linear infinite; }
.sk-auth section::after { content: ""; position: absolute; inset: -9px; pointer-events: none; border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(120, 180, 255, .6), rgba(21, 137, 252, .15) 50%, transparent 50%) top left / 48px 48px no-repeat,
    linear-gradient(315deg, rgba(120, 180, 255, .6), rgba(21, 137, 252, .15) 50%, transparent 50%) bottom right / 48px 48px no-repeat;
  filter: drop-shadow(0 0 10px rgba(21, 137, 252, .55)); animation: skFade .6s ease .8s both; }
@keyframes skSpin { to { --sk-spin: 360deg; } }
@keyframes skCardIn { from { opacity: 0; transform: translateY(28px) scale(.95); filter: blur(8px); } }
@keyframes skRise { from { opacity: 0; transform: translateY(12px); } }
@keyframes skFade { from { opacity: 0; transform: scale(.96); } }
@keyframes skLogoIn { from { opacity: 0; transform: scale(.6) rotate(-18deg); filter: blur(10px); } }

/* card header (logo + language) */
.sk-auth section > div:first-child { border-color: rgba(120, 170, 255, .14) !important; }
.sk-auth section select { background: rgba(4, 9, 22, .6) !important; color: #eaf2ff; border-color: rgba(120, 170, 255, .25) !important; }
.sk-auth section select option { background: #0b1430; color: #eaf2ff; }

/* text */
.sk-auth section h1, .sk-auth section h2, .sk-auth section h3 { color: #fff !important; }
.sk-auth section .text-ink { color: #eaf2ff !important; }
.sk-auth section .text-neutral-700 { color: #c7d6f2 !important; }
.sk-auth section .text-neutral-600, .sk-auth section .text-neutral-500 { color: #8da3c7 !important; }
.sk-auth section .text-neutral-400 { color: #6c80a6 !important; }
.sk-auth section .border-neutral-100, .sk-auth section .border-neutral-200 { border-color: rgba(120, 170, 255, .14) !important; }
.sk-auth section button.underline, .sk-auth section a:not([aria-label]) { color: #6ea2ff !important; }
.sk-auth section button.underline:hover, .sk-auth section a:not([aria-label]):hover { color: #b9dcff !important; }

/* staggered entrance of the form content (replays on every mode switch) */
.sk-auth section > div:last-child > * { animation: skRise .6s ease both; }
.sk-auth section > div:last-child > :nth-child(1) { animation-delay: .35s; }
.sk-auth section > div:last-child > :nth-child(2) { animation-delay: .45s; }
.sk-auth section > div:last-child > :nth-child(3) { animation-delay: .55s; }
.sk-auth section > div:last-child > :nth-child(4) { animation-delay: .65s; }
.sk-auth section > div:last-child > :nth-child(5) { animation-delay: .75s; }
.sk-auth section fieldset > * { animation: skRise .55s ease both; }
.sk-auth section fieldset > :nth-child(1) { animation-delay: .5s; } .sk-auth section fieldset > :nth-child(2) { animation-delay: .58s; }
.sk-auth section fieldset > :nth-child(3) { animation-delay: .66s; } .sk-auth section fieldset > :nth-child(4) { animation-delay: .74s; }
.sk-auth section fieldset > :nth-child(5) { animation-delay: .82s; } .sk-auth section fieldset > :nth-child(6) { animation-delay: .9s; }

/* inputs */
.sk-auth section input:not([type="checkbox"]):not([type="radio"]) {
  background: rgba(4, 9, 22, .55) !important; color: #eaf2ff !important; border-color: rgba(120, 170, 255, .22) !important;
  transition: border-color .25s, box-shadow .25s, background .25s; }
.sk-auth section input::placeholder { color: #5b6d8f !important; }
.sk-auth section input:not([type="checkbox"]):not([type="radio"]):focus {
  border-color: #4d8dff !important; background: rgba(6, 14, 34, .72) !important;
  box-shadow: 0 0 0 4px rgba(21, 137, 252, .18), 0 0 22px rgba(21, 137, 252, .32) !important; }
.sk-auth section input:-webkit-autofill { -webkit-text-fill-color: #eaf2ff; -webkit-box-shadow: 0 0 0 40px #07102a inset !important; caret-color: #eaf2ff; }
.sk-auth section #auth-code { letter-spacing: .5em; text-align: center; font-size: 1.25rem; }
.sk-auth section .relative > button[type="button"] { color: #8da3c7 !important; }
.sk-auth section .relative > button[aria-pressed="true"] { color: #4d8dff !important; }

/* primary button */
.sk-auth section button[type="submit"] { position: relative; overflow: hidden; color: #fff !important;
  background: linear-gradient(90deg, #1589fc, #0a4bf0) !important;
  box-shadow: 0 10px 30px rgba(10, 75, 240, .45), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .15s, box-shadow .25s; }
.sk-auth section button[type="submit"]:hover { box-shadow: 0 12px 38px rgba(21, 137, 252, .6), inset 0 1px 0 rgba(255, 255, 255, .25); }
.sk-auth section button[type="submit"]:active { transform: scale(.98); }
.sk-auth section button[type="submit"]::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); animation: skShine 3.2s ease-in-out 1.4s infinite; }
@keyframes skShine { 0% { left: -60%; } 40%, 100% { left: 130%; } }
.sk-auth section button[type="submit"]:focus-visible { outline-color: #b9dcff !important; }

/* messages */
.sk-auth section .bg-red-50 { background: rgba(220, 38, 38, .14) !important; border-color: rgba(248, 113, 113, .35) !important; color: #fecaca !important; animation: skShake .45s ease; }
.sk-auth section .text-red-700 { color: #fecaca !important; }
.sk-auth section .bg-amber-50 { background: rgba(245, 158, 11, .14) !important; color: #fde68a !important; }
.sk-auth section .bg-green-50, .sk-auth section .bg-emerald-50 { background: rgba(34, 197, 94, .14) !important; color: #bbf7d0 !important; }
.sk-auth section [class*="text-green-"], .sk-auth section [class*="text-emerald-"] { color: #86efac !important; }
@keyframes skShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

@media (prefers-reduced-motion: reduce) {
  .sk-fx *, .sk-auth, .sk-auth *, .sk-auth section::before, .sk-auth section::after { animation: none !important; }
}

/* step progress + password-strength bars */
.sk-auth section .h-1.rounded-full.bg-brand, .sk-auth section .h-1.rounded-full.bg-ink {
  background: linear-gradient(90deg, #1589fc, #4d8dff) !important; box-shadow: 0 0 10px rgba(21, 137, 252, .6); }
.sk-auth section .h-1.rounded-full.bg-neutral-200 { background: rgba(120, 170, 255, .16) !important; }
.sk-auth section .bg-brand:not(button) { background-color: #1589fc !important; }