:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--background); color: var(--text); }
* { box-sizing: border-box; }
body { min-height: 100svh; margin: 0; background: radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--glow-one) 82%, transparent) 0, transparent 31rem), radial-gradient(circle at 88% 88%, color-mix(in srgb, var(--glow-two) 78%, transparent) 0, transparent 33rem), radial-gradient(circle at 54% 42%, #5c228633 0, transparent 32rem), var(--background); }
.shell { min-height: 100svh; display: grid; place-items: center; padding: 24px; }
.card { width: min(100%, 760px); padding: clamp(28px, 7vw, 56px); border: 1px solid #ffffff20; border-radius: 28px; background: color-mix(in srgb, var(--surface) 93%, transparent); box-shadow: 0 24px 80px #00000055; backdrop-filter: blur(18px); }
.brand { display: flex; justify-content: flex-end; align-items: center; gap: 6px; color: color-mix(in srgb, var(--muted) 72%, var(--surface)); font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.brand-mark { color: #0b3d2e; font-size: .85rem; line-height: .7; }
.login-hero { display: grid; grid-template-columns: clamp(150px, 24vw, 210px) 1fr; align-items: end; gap: clamp(24px, 5vw, 46px); margin-top: clamp(26px, 4vw, 38px); }
.cover-frame { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border: 1px solid #ffffff1f; border-radius: 22px; box-shadow: 0 20px 45px #00000065; animation: cover-arrival 900ms cubic-bezier(.16, .86, .28, 1) 100ms both; }
.cover { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover-frame::after { position: absolute; z-index: 1; top: 4%; left: 5%; color: #fff; content: "✦"; font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1; text-shadow: 0 0 10px #fff, 0 0 20px color-mix(in srgb, var(--accent) 85%, white); pointer-events: none; animation: cover-star 12s ease-in-out 1.7s both infinite; }
.intro { margin: 0; }
.eyebrow { margin: 0 0 10px; color: var(--accent); font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2.25rem, 5.2vw, 4.2rem); line-height: .98; letter-spacing: -.065em; }
.login-title { animation: title-settle 900ms cubic-bezier(.22, 1, .36, 1) 120ms both; }
.copy { margin: 18px 0 0; color: var(--muted); line-height: 1.55; }
.login-form { display: grid; gap: 10px; margin-top: 38px; }
label { color: #d7d7e0; font-size: .88rem; font-weight: 700; }
input { width: 100%; padding: 14px 16px; border: 1px solid #ffffff2e; border-radius: 12px; outline: none; background: #0c0d14; color: inherit; font: inherit; }
input:placeholder-shown:not(:focus) { animation: password-pulse 4.2s cubic-bezier(.45, 0, .55, 1) 1.2s infinite; }
input::placeholder { color: var(--muted); opacity: .7; }
input:focus::placeholder { color: transparent; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); animation: none; }
button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; margin-top: 8px; padding: 14px 18px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-text); cursor: pointer; font: inherit; font-weight: 850; }
button:hover { filter: brightness(1.08); }
.error { min-height: 1.35em; margin: 4px 0 0; color: #ffabab; font-size: .9rem; text-align: center; }
.page-header { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 28px 0 36px; }
.page-header h1 { font-size: clamp(2.3rem, 6vw, 3.7rem); }
.hub-title { animation: hub-title-arrival 600ms cubic-bezier(.16, .86, .28, 1) 120ms both; }
.header-intro { display: block; }
.header-side { display: grid; justify-items: end; }
.hub-cover { width: 122px; aspect-ratio: 1; border: 1px solid #ffffff25; border-radius: 20px; object-fit: cover; box-shadow: 0 16px 34px #00000055; animation: hub-cover-arrival 620ms cubic-bezier(.16, .86, .28, 1) both; }
.links { display: grid; gap: 16px; perspective: 900px; }
.link-card { display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 15px; padding: 15px; border: 1px solid #ffffff1b; border-radius: 16px; background: #ffffff08; color: inherit; text-decoration: none; transform-origin: top center; transition: transform .15s ease, background .15s ease; animation: link-card-arrival 560ms cubic-bezier(.16, .86, .28, 1) var(--link-delay) both; }
.link-card:hover { transform: translateY(-2px); background: #ffffff11; }
.icon { display: grid; width: 45px; height: 45px; place-items: center; overflow: hidden; border-radius: 12px; background: var(--accent); color: var(--accent-text); font-weight: 900; }
.icon img { width: 100%; height: 100%; object-fit: cover; }
.link-card strong, .link-card small { display: block; }
.link-card small { margin-top: 3px; color: #a4a5b2; font-size: .82rem; }
.link-card b { display: grid; align-self: stretch; place-items: center; color: var(--accent); font-size: clamp(2rem, 5vw, 2.55rem); font-weight: 900; line-height: 1; }
.platform-links { display: flex; justify-content: center; gap: 16px; margin-top: 34px; }
.platform-links a { display: block; width: 54px; aspect-ratio: 1; overflow: hidden; border: 1px solid #ffffff1f; border-radius: 15px; box-shadow: 0 8px 20px #00000035; transition: transform .15s ease, box-shadow .15s ease; }
.platform-links a:hover { transform: translateY(-3px); box-shadow: 0 12px 24px #00000055; }
.platform-links img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hint { margin: 26px 0 0; color: var(--muted); font-size: .82rem; }
code { color: #cecfda; }
@keyframes cover-arrival {
  0% { opacity: 0; transform: translateY(22px) scale(.58) rotate(-720deg); filter: blur(5px) saturate(.75); }
  62% { opacity: 1; transform: translateY(-5px) scale(1.05) rotate(22deg); filter: blur(0) saturate(1.08); }
  80% { transform: translateY(2px) scale(.99) rotate(-7deg); }
  100% { transform: translateY(0) scale(1) rotate(0); filter: blur(0) saturate(1); }
}
@keyframes hub-cover-arrival {
  0% { opacity: 0; transform: translateY(-120px) rotate(14deg) scale(.86); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes hub-title-arrival {
  0% { opacity: 0; transform: translateX(-70px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes link-card-arrival {
  0% { opacity: 0; transform: translateY(-16px) rotateX(-68deg) scaleY(.82); }
  72% { opacity: 1; transform: translateY(3px) rotateX(4deg) scaleY(1.01); }
  100% { transform: translateY(0) rotateX(0) scaleY(1); }
}
@keyframes cover-star {
  0%, 3%, 10%, 22%, 34%, 47%, 56%, 68%, 78%, 92%, 100% { opacity: 0; transform: rotate(0deg) scale(.55); }
  6% { opacity: .95; transform: rotate(24deg) scale(1.18); }
  25% { opacity: .78; transform: rotate(-18deg) scale(1.05); }
  38% { opacity: 1; transform: rotate(18deg) scale(1.22); }
  60% { opacity: .72; transform: rotate(-14deg) scale(1); }
  82% { opacity: .9; transform: rotate(20deg) scale(1.15); }
}
@keyframes title-settle {
  0% { opacity: 0; transform: scale(.9); filter: blur(3px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes password-pulse {
  0%, 100% { border-color: #ffffff2e; box-shadow: 0 0 0 0 transparent, 0 0 0 transparent, inset 0 0 0 transparent; }
  50% { border-color: color-mix(in srgb, var(--accent) 72%, #ffffff2e); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 9%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 16%, transparent), inset 0 0 14px color-mix(in srgb, var(--accent) 5%, transparent); }
}
@media (max-width: 600px) { .card { border-radius: 22px; } .login-hero { grid-template-columns: 1fr; gap: 28px; margin-top: 26px; } .cover-frame { width: min(54vw, 190px); } .page-header { margin-top: 32px; display: block; } .header-intro { min-width: 0; padding-right: 86px; } .page-header h1 { font-size: clamp(1.45rem, 7.1vw, 1.72rem); letter-spacing: -.075em; white-space: nowrap; } .hub-cover { width: 70px; border-radius: 14px; } .header-side { position: absolute; top: 0; right: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }