/* The staging sign-in, from the owner's "Staging · Sign in" design. Inter (self-hosted) stands in for Space Grotesk,
   and the system monospace for JetBrains Mono: the sites load nothing from other hosts. */
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

body { margin: 0; background: #05050A; }
a { color: #C4B5FD; }
a:hover { color: #DDD6FE; }
input::placeholder { color: #8B8B9A; }
input:focus, button:focus-visible, a:focus-visible { outline: 2px solid #C4B5FD; outline-offset: 2px; }
[hidden] { display: none !important; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }

@keyframes drift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 40px) scale(1.15); } }
@keyframes drift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-70px, 30px) scale(1.1); } }
@keyframes ping { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes blip { from { stroke-dashoffset: 30; } to { stroke-dashoffset: -100; } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes stripes { from { background-position: 0 0; } to { background-position: 40px 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes slidein { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes sheen { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes beat { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.1); } 20% { transform: scale(0.97); } 30% { transform: scale(1.06); } 42% { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floatup { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 0.9; } 100% { transform: translateY(-560px); opacity: 0; } }
@keyframes halo { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.9); opacity: 0; } }

.a1 { animation: drift1 14s ease-in-out infinite; }
.a2 { animation: drift2 18s ease-in-out infinite; }
.ping { animation: ping 1.6s ease-out infinite; }
.blip { stroke-dasharray: 30 200; animation: blip 1.8s linear infinite; }
.blink { animation: blink 1s step-end infinite; }
.pop { animation: pop 0.4s ease-out both; }
.stripes { background-image: linear-gradient(135deg, #FBBF24 25%, #F59E0B 25%, #F59E0B 50%, #FBBF24 50%, #FBBF24 75%, #F59E0B 75%); background-size: 40px 40px; animation: stripes 1.6s linear infinite; }
.rise { animation: rise 0.7s cubic-bezier(.2, .8, .2, 1) both; }
.d1 { animation-delay: .08s; } .d2 { animation-delay: .18s; } .d3 { animation-delay: .28s; } .d4 { animation-delay: .4s; }
.d5 { animation-delay: .55s; } .d6 { animation-delay: .7s; } .d7 { animation-delay: .85s; } .d8 { animation-delay: 1s; }
.stepin { animation: slidein .45s cubic-bezier(.2, .8, .2, 1) both; }
.cardin { background-size: 300% 300%; animation: rise .7s cubic-bezier(.2, .8, .2, 1) .2s both, shimmer 5s ease-in-out infinite alternate; }
.sheen { background-image: linear-gradient(110deg, #EF4444 0%, #8B5CF6 38%, #DDD6FE 50%, #8B5CF6 62%, #EF4444 100%); background-size: 300% 100%; animation: sheen 3s ease-in-out infinite alternate; }
.shake { animation: shake .45s ease-in-out; }
.beat { animation: beat 1.6s ease-in-out infinite; }
.spin { animation: spin .8s linear infinite; }
.mote { position: absolute; bottom: -20px; width: 4px; height: 4px; border-radius: 2px; animation: floatup 9s linear infinite; }
.halo { animation: halo 1.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .a1, .a2, .ping, .blip, .blink, .pop, .stripes, .rise, .stepin, .cardin, .sheen, .shake, .beat, .spin, .mote, .halo { animation: none; }
  .ping, .mote, .halo { opacity: 0; }
  .blip { stroke-dasharray: none; }
}

.page { position: relative; overflow: hidden; background: #05050A; color: #FFFFFF; font-family: 'Inter', system-ui, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }

.banner { position: relative; z-index: 1; color: #1C1400; }
.banner-in { max-width: 1200px; margin: 0 auto; padding: 10px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; font-size: 14px; font-weight: 700; text-align: center; }
.banner-tag { letter-spacing: 0.12em; }
.banner-in span:last-child { font-weight: 500; }

.backdrop { position: absolute; inset: 0; pointer-events: none; }
.glow { position: absolute; border-radius: 50%; }
.glow-red { top: -160px; left: -140px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(239, 68, 68, 0.4), rgba(239, 68, 68, 0) 70%); filter: blur(60px); }
.glow-violet { bottom: -200px; right: -160px; width: 660px; height: 660px; background: radial-gradient(circle, rgba(139, 92, 246, 0.42), rgba(139, 92, 246, 0) 70%); filter: blur(70px); }
.grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%); }

.main { position: relative; flex: 1 1 auto; width: 100%; max-width: 1100px; box-sizing: border-box; margin: 0 auto; padding: 56px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }

.info { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.brand { display: flex; align-items: center; gap: 12px; }
.mark { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #EF4444, #8B5CF6); box-shadow: 0 0 24px rgba(239, 68, 68, 0.45); display: flex; align-items: center; justify-content: center; }
.brand-name { font-size: 24px; font-weight: 700; letter-spacing: -0.04em; }
.title { margin: 0; font-size: clamp(36px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -0.045em; font-weight: 700; }
.title-accent { background-image: linear-gradient(90deg, #FDE68A, #FCA5A5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { margin: 0; max-width: 440px; font-size: 17px; line-height: 1.6; color: #B4B4BE; }

.build { border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(10, 10, 18, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; }
.build-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 12px; color: #A1A1AA; }
.health { display: inline-flex; align-items: center; gap: 8px; color: #6EE7B7; }
.dot { position: relative; width: 8px; height: 8px; display: block; }
.dot > span { position: absolute; inset: 0; border-radius: 4px; background: #34D399; }
.build-list { margin: 0; padding: 14px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; font-size: 13px; }
.build-list dt { color: #8B8B9A; }
.build-list dd { margin: 0; color: #E4E4E7; overflow-wrap: anywhere; }
.build-list dd.env { color: #FDE68A; }
.pulse { display: block; padding: 0 16px 10px; box-sizing: border-box; }

.card { flex: 1 1 400px; min-width: 0; border-radius: 26px; padding: 1px; background-image: linear-gradient(135deg, rgba(251, 191, 36, 0.85), rgba(239, 68, 68, 0.7), rgba(139, 92, 246, 0.75), rgba(94, 234, 212, 0.6), rgba(251, 191, 36, 0.85)); }
.card-in { border-radius: 25px; padding: 36px; background: rgba(10, 10, 18, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
@media (max-width: 480px) { .card-in { padding: 24px; } }

.form { display: flex; flex-direction: column; gap: 18px; }
.heading { display: flex; flex-direction: column; gap: 6px; }
.heading h2 { margin: 0; font-size: 28px; letter-spacing: -0.03em; font-weight: 700; }
.heading p { margin: 0; font-size: 15px; color: #A1A1AA; }
.error { margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(248, 113, 113, 0.6); background: rgba(239, 68, 68, 0.12); font-size: 14px; color: #FECACA; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 14px; font-weight: 600; color: #E4E4E7; }
.field-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.field input { width: 100%; height: 52px; box-sizing: border-box; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: #FFFFFF; font-family: inherit; font-size: 16px; }
.link { min-height: 44px; padding: 0; border: 0; background: none; color: #C4B5FD; font-family: inherit; font-size: 14px; cursor: pointer; }
.password { position: relative; }
.password input { padding-right: 76px; }
.toggle { position: absolute; right: 4px; top: 4px; height: 44px; min-width: 64px; padding: 0 10px; border-radius: 8px; border: 0; background: rgba(255, 255, 255, 0.08); color: #E4E4E7; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.remember { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; color: #D4D4D8; cursor: pointer; }
.remember input { width: 18px; height: 18px; accent-color: #8B5CF6; }
.submit { height: 54px; border-radius: 12px; border: 0; box-shadow: 0 10px 30px rgba(239, 68, 68, 0.3); color: #FFFFFF; font-family: inherit; font-size: 17px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; }
.submit[aria-busy='true'] { cursor: progress; }
.spin { width: 18px; height: 18px; border-radius: 9px; border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #FFFFFF; box-sizing: border-box; display: block; }
.reset { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(196, 181, 253, 0.1); border: 1px solid rgba(196, 181, 253, 0.4); font-size: 14px; line-height: 1.5; color: #E9E3FF; }

.done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 16px 0; }
.done h2 { margin: 0; font-size: 30px; letter-spacing: -0.03em; font-weight: 700; }
.done p { margin: 0; max-width: 340px; font-size: 16px; line-height: 1.55; color: #B4B4BE; }
.tick { position: relative; width: 76px; height: 76px; display: block; }
.tick .halo { position: absolute; inset: 0; border-radius: 38px; border: 2px solid #34D399; box-sizing: border-box; display: block; }
.tick-in { position: absolute; inset: 0; border-radius: 38px; background: linear-gradient(135deg, #34D399, #8B5CF6); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 40px rgba(52, 211, 153, 0.4); }
.blink { color: #34D399; }
.reminder { width: 100%; padding: 14px 16px; box-sizing: border-box; border-radius: 12px; background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.4); font-size: 14px; line-height: 1.5; color: #FDE68A; text-align: left; }

.footer { position: relative; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.footer-in { max-width: 1100px; margin: 0 auto; padding: 22px 24px; font-size: 14px; color: #8B8B9A; }