:root {
  color-scheme: dark;
  --background: #040408;
  --surface: rgb(12 12 22 / 0.86);
  --border: rgb(151 117 255 / 0.2);
  --text: #f5f2ff;
  --muted: #858093;
  --purple: #8d5cff;
  --purple-bright: #b18aff;
  --amber: #ffad4e;
  --danger: #ff647c;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow: hidden; color: var(--text); background: var(--background); }
button, input { font: inherit; }
.login-cosmos { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(circle at 65% 45%, #17102c 0, #07060c 26%, #030306 62%); }
.login-cosmos::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(3 3 6 / 0.28), rgb(3 3 6 / 0.05) 50%, rgb(3 3 6 / 0.38)); }
.login-stars { position: absolute; inset: -20%; opacity: 0.62; background-image: radial-gradient(circle, #fff 0 1px, transparent 1.5px), radial-gradient(circle, #9b78ff 0 1px, transparent 1.5px), radial-gradient(circle, #ffbd74 0 1px, transparent 1.5px); background-position: 0 0, 37px 61px, 91px 23px; background-size: 117px 117px, 173px 173px, 211px 211px; animation: star-drift 60s linear infinite; }
@keyframes star-drift { to { transform: translate3d(-80px, 45px, 0) rotate(2deg); } }
.login-black-hole { position: absolute; left: 67%; top: 48%; width: min(78vw, 1060px); aspect-ratio: 2.2 / 1; transform: translate(-50%, -50%) rotate(-7deg); }
.login-core { position: absolute; left: 50%; top: 49%; width: 24%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scaleY(.84); background: #000; box-shadow: 0 0 25px 12px #000; }
.login-event-horizon { position: absolute; left: 50%; top: 49%; width: 31%; aspect-ratio: 1; border: 5px solid #ffddb0; border-radius: 50%; transform: translate(-50%, -50%) scaleY(.79); box-shadow: 0 0 12px #fff3dd, 0 0 35px #ff983f, 0 0 90px rgb(119 63 255 / .8); animation: event-pulse 4.6s ease-in-out infinite; }
.login-accretion { position: absolute; left: 50%; top: 52%; width: 100%; height: 28%; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(ellipse, transparent 0 30%, #fff2c8 33%, #ffad4e 38%, #c45cff 44%, rgb(78 57 235 / .55) 51%, transparent 65%); filter: blur(1px) drop-shadow(0 0 20px rgb(255 131 51 / .75)); mix-blend-mode: screen; animation: disk-pulse 5.2s ease-in-out infinite; }
.login-accretion::after { content: ""; position: absolute; inset: 8% -3%; border-top: 2px solid rgb(255 239 205 / .75); border-bottom: 2px solid rgb(113 78 255 / .65); border-radius: 50%; }
.login-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid transparent; border-top-color: rgb(157 100 255 / .65); border-bottom-color: rgb(255 169 80 / .36); border-radius: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 0 12px rgb(115 64 255 / .55)); }
.orbit-a { width: 116%; height: 58%; animation: orbit 19s linear infinite; }
.orbit-b { width: 143%; height: 76%; opacity: .37; animation: orbit-reverse 31s linear infinite; }
@keyframes orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes orbit-reverse { to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes event-pulse { 50% { opacity: .8; transform: translate(-50%, -50%) scaleY(.81) scale(1.035); } }
@keyframes disk-pulse { 50% { opacity: .78; filter: blur(1.4px) drop-shadow(0 0 28px rgb(255 131 51 / .85)); } }

.login-shell { position: relative; z-index: 2; min-height: 100vh; display: grid; align-items: center; padding: 42px clamp(24px, 7vw, 112px); }
.login-card { width: min(430px, 100%); padding: 28px; border: 1px solid var(--border); border-radius: 22px; background: linear-gradient(145deg, rgb(15 14 27 / .88), rgb(7 7 13 / .9)); box-shadow: 0 35px 110px rgb(0 0 0 / .56), inset 0 1px 0 rgb(255 255 255 / .035); backdrop-filter: blur(22px) saturate(130%); }
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand strong { display: block; font-size: 20px; letter-spacing: -.045em; }
.login-brand small { display: block; margin-top: 2px; color: #6f697c; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.horizon-logo { position: relative; width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(from 10deg, transparent, #8054ff, #f5dfff, #a75cff, transparent 61%, #4e73ff, transparent); filter: drop-shadow(0 0 13px rgb(142 84 255 / .75)); }
.horizon-logo::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #07070d; }
.horizon-logo::after { content: ""; position: absolute; width: 50px; height: 10px; border-top: 2px solid rgb(255 218 168 / .7); border-bottom: 2px solid rgb(102 69 255 / .7); border-radius: 50%; transform: rotate(-13deg); filter: drop-shadow(0 0 7px rgb(137 76 255 / .75)); }
.horizon-logo span { position: relative; z-index: 1; width: 19px; height: 19px; border-radius: 50%; background: #000; }
.login-copy { margin-top: 40px; }
.eyebrow { margin: 0 0 8px; color: #9c79ee; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 0; font-size: clamp(28px, 4vw, 36px); font-weight: 620; letter-spacing: -.05em; }
.muted { max-width: 350px; margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.58; }
form { display: grid; gap: 16px; margin-top: 30px; }
label { display: grid; gap: 7px; color: #878193; font-size: 10px; }
.input-shell { min-height: 46px; display: grid; grid-template-columns: 19px minmax(0, 1fr); align-items: center; gap: 10px; padding: 0 13px; border: 1px solid rgb(143 118 204 / .18); border-radius: 12px; background: rgb(5 5 10 / .58); transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.input-shell:focus-within { border-color: rgb(151 104 255 / .62); background: rgb(11 9 20 / .78); box-shadow: 0 0 0 3px rgb(128 77 241 / .09), 0 0 30px rgb(110 63 215 / .08); }
.input-shell svg { width: 17px; height: 17px; fill: #655e73; transition: fill 180ms ease; }
.input-shell:focus-within svg { fill: #ad87ff; }
input { width: 100%; height: 44px; padding: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 12px; }
button { min-height: 47px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; border: 1px solid rgb(187 151 255 / .4); border-radius: 12px; color: white; background: linear-gradient(135deg, #6940d5, #975eff); box-shadow: 0 16px 38px rgb(108 62 211 / .27), inset 0 1px 0 rgb(255 255 255 / .2); cursor: pointer; font-weight: 760; font-size: 11px; transition: transform 180ms ease, box-shadow 180ms ease; }
button:hover { transform: translateY(-1px); box-shadow: 0 20px 46px rgb(108 62 211 / .38), inset 0 1px 0 rgb(255 255 255 / .24); }
button:disabled { opacity: .65; cursor: wait; transform: none; }
.error { min-height: 18px; margin: 13px 0 0; color: var(--danger); font-size: 9px; }
footer { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 22px; color: #5e5967; font-size: 8px; }
.secure-dot { width: 6px; height: 6px; border-radius: 50%; background: #3fe19a; box-shadow: 0 0 9px rgb(63 225 154 / .7); }

@media (max-width: 780px) {
  body { overflow-y: auto; }
  .login-black-hole { left: 69%; top: 23%; width: 920px; opacity: .75; }
  .login-shell { align-items: end; padding: 130px 16px 24px; }
  .login-card { margin: 0 auto; background: rgb(10 9 18 / .92); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }

/* Horizon login refinement v2 */
:root { font-family: "Open Sans", "Segoe UI", Arial, sans-serif; }
body, button, input { font-family: "Open Sans", "Segoe UI", Arial, sans-serif; }
.login-cosmos { background: #020207; }
.login-cosmos::after {
  content: "";
  position: absolute;
  inset: -5%;
  background: url('/static/assets/black-hole-violet.webp') center / cover no-repeat;
  filter: saturate(1.2) contrast(1.08) brightness(.72);
  animation: login-violet-breath 14s ease-in-out infinite alternate;
}
.login-cosmos::before { z-index: 2; background: linear-gradient(90deg, rgb(2 3 10 / .84), rgb(2 3 10 / .42) 43%, rgb(2 3 10 / .16) 72%, rgb(2 3 10 / .45)); }
.login-stars { z-index: 1; opacity: .28; }
.login-black-hole { display: none; }
@keyframes login-violet-breath { to { transform: scale(1.08) translateX(-1%); } }
.login-shell { z-index: 4; }
.login-card { width: min(455px, 100%); padding: 32px; }
.login-brand strong { font-size: 25px; font-weight: 650; }
.login-brand small { font-size: 10px; text-transform: none; }
.horizon-logo { width: 48px; height: 48px; background: transparent; filter: drop-shadow(0 0 15px rgb(137 85 255 / .9)); }
.horizon-logo::before { inset: 8px; z-index: 2; border: 2px solid rgb(246 242 255 / .98); background: #010104; box-shadow: 0 0 0 2px rgb(127 77 255 / .34), 0 0 16px 5px rgb(127 73 255 / .7), inset 0 0 10px #000; }
.horizon-logo::after { z-index: 1; width: 58px; height: 31px; border: 1px solid rgb(174 141 255 / .75); border-top-width: 2px; border-bottom-color: rgb(86 51 171 / .25); transform: rotate(-14deg); filter: drop-shadow(0 0 9px rgb(128 77 255 / .75)); }
.horizon-logo span { display: none; }
.eyebrow { font-size: 10px; }
h1 { font-size: clamp(31px, 4vw, 40px); font-weight: 650; }
.muted { font-size: 13px; }
label { font-size: 12px; }
input { font-size: 14px; }
button { font-size: 13px; }
.error { font-size: 11px; }
footer { font-size: 10px; }
.account-links { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; }
.account-links a { color: #a986ff; font-size: 12px; text-decoration: none; transition: color 160ms ease; }
.account-links a:hover { color: #e0d1ff; }
.account-note { margin: 16px 0 0; color: #8f899b; font-size: 12px; line-height: 1.55; }
.token-output { margin-top: 12px; padding: 12px; border: 1px solid rgb(151 117 255 / .24); border-radius: 10px; color: #cdb9ff; background: rgb(10 8 20 / .72); font: 11px/1.5 ui-monospace, monospace; overflow-wrap: anywhere; }
.telegram-activation { margin-top: 28px; padding: 22px; border: 1px solid rgb(102 170 255 / .28); border-radius: 16px; text-align: center; background: rgb(13 20 35 / .72); }
.telegram-activation[hidden] { display: none; }
.telegram-mark { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 50%; color: white; background: linear-gradient(145deg, #32a9e8, #1674be); box-shadow: 0 12px 30px rgb(30 145 215 / .28); font-size: 22px; }
.telegram-activation h2 { margin: 0; font-size: 20px; }
.telegram-activation p { color: var(--muted); font-size: 12px; line-height: 1.55; }
.telegram-button { min-height: 44px; display: flex; align-items: center; justify-content: center; margin-top: 16px; border: 1px solid rgb(113 203 255 / .45); border-radius: 11px; color: white; background: linear-gradient(135deg, #168bd0, #32a9e8); text-decoration: none; font-size: 13px; font-weight: 700; }
.telegram-status { margin-bottom: 0; color: #9fcff2 !important; }