:root {
  color-scheme: dark;
  font-family: "Segoe UI", Arial, sans-serif;
  color: #e9f1ff;
  background: #030916;
  font-synthesis: none;
  --muted: #8b9db7;
  --cyan: #56d9ff;
}
* { box-sizing: border-box; }
html { min-width: 280px; }
body { margin: 0; min-height: 100svh; isolation: isolate; }
button, input { font: inherit; }
button { cursor: pointer; }
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: radial-gradient(ellipse at 30% 46%, #071a38 0%, #040c1d 39%, #030916 72%); }
.ambient::before { content: ""; position: absolute; width: 900px; height: 900px; top: 50%; left: 26%;
  transform: translate(-50%, -50%); border: 1px solid #7bb9ff08; border-radius: 50%;
  box-shadow: 0 0 0 85px #76b4ff03, 0 0 0 170px #76b4ff02; }
.ambient::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(118deg, transparent 60%, #3487ff05 60.1%, transparent 80%); }
.page { width: min(1440px, 100%); min-height: 100svh; margin: 0 auto;
  padding: 38px 56px 24px; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 36px; gap: 18px; }
.wordmark { display: flex; align-items: center; gap: 13px; font-size: 16px; letter-spacing: .16em; font-weight: 650; }
.wordmark span { color: #87b2d4; font-size: 11px; letter-spacing: .24em; font-weight: 500;
  border-left: 1px solid #6c92b43b; padding-left: 13px; }
.top-caption { display: inline-flex; align-items: center; gap: 8px; color: #91a4bd; font-size: 12px; }
.top-caption svg { width: 13px; height: 13px; color: #8ec8e8; }
main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 384px;
  align-items: center; gap: 42px; padding: 60px 0 74px; }
.hero { min-width: 0; text-align: center; position: relative; overflow: hidden; }
.hero img { display: block; width: 116%; max-width: none; height: auto; margin-left: -8%;
  mix-blend-mode: screen; mask-image: radial-gradient(ellipse 68% 68% at 50% 50%, #000 38%, transparent 77%); }
.hero .trade { font-size: 15px; font-weight: 400; letter-spacing: .62em; padding-left: .62em;
  margin: -15% 0 0; color: #bacde6; position: relative; }
.hero .trade::before, .hero .trade::after { content: ""; display: inline-block; vertical-align: middle;
  width: 45px; height: 1px; margin: 0 22px 3px 12px; background: linear-gradient(90deg, transparent, #5c94bb60); }
.hero .trade::after { transform: rotate(180deg); margin: 0 12px 3px 22px; }
.panel { position: relative; width: 100%; padding: 36px 32px 34px;
  border: 1px solid #46658865; border-radius: 22px;
  background: linear-gradient(145deg, #112039ed, #081222f5 65%);
  box-shadow: 0 24px 64px #0005, inset 0 1px 0 #c8e7ff15, 0 0 70px #0b6ac608; }
.panel::before { content: ""; position: absolute; height: 1px; left: 26px; right: 26px; top: -1px;
  background: linear-gradient(90deg, transparent, #94d9ff9c, transparent); }
.overline { color: #72c9f4; font-size: 10px; letter-spacing: .18em; font-weight: 600;
  text-transform: uppercase; margin: 0 0 14px; }
h1 { margin: 0; font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
.intro { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 12px 0 28px; }
.field { margin: 0 0 20px; }
label { display: block; color: #c0cde0; font-size: 12px; font-weight: 500; margin-bottom: 9px; }
.input-wrap { position: relative; }
input { width: 100%; height: 49px; padding: 0 14px; border: 1px solid #3c57766b;
  border-radius: 9px; background: #040b17b8; color: #f1f6fd; font-size: 16px;
  box-shadow: inset 0 2px 7px #0003; transition: border-color .2s, box-shadow .2s; }
input::placeholder { color: #70839f; font-size: 13px; }
input:focus-visible { outline: none; border-color: #5fb9ed; box-shadow: 0 0 0 3px #2b9fdb1c; }
input[type="password"], .input-wrap input { padding-right: 49px; }
.eye { position: absolute; right: 3px; top: 3px; height: 43px; width: 43px; display: grid; place-items: center;
  border: 0; border-radius: 7px; background: transparent; color: #8197b4; }
.eye:hover { color: #b9e7ff; background: #5eb8ff0a; }
.eye svg { width: 19px; height: 19px; }
.primary { display: flex; align-items: center; justify-content: center; gap: 15px; width: 100%; min-height: 49px;
  margin-top: 28px; padding: 12px 18px; border: 1px solid #83d8ff8c; border-radius: 9px;
  background: linear-gradient(110deg, #2c8de4, #52c5ec); color: #041527;
  font-size: 14px; font-weight: 700; box-shadow: 0 7px 24px #169bdf20, inset 0 1px 0 #d6f6ff6b;
  transition: filter .18s, transform .18s; }
.primary:hover { filter: brightness(1.13); }
.primary:active { transform: translateY(1px); }
.primary svg { width: 19px; height: 19px; }
button:focus-visible { outline: 2px solid #8bdaff; outline-offset: 4px; }
.form-status { color: #abd3ed; font-size: 12px; line-height: 1.5; margin: 16px 0 0; }
.form-status:empty { display: none; }
footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 22px;
  padding-top: 18px; border-top: 1px solid #7799bc15; color: #7188a5; font-size: 11px; letter-spacing: .04em; }
footer .footer-brand { color: #8b9fb9; }
.maintenance .panel { padding-top: 32px; padding-bottom: 28px; }
.status-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: #8fd6f9;
  border: 1px solid #4db8f530; border-radius: 20px; background: #2489cd0b; padding: 7px 10px; margin-bottom: 22px; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: #66d2ff; box-shadow: 0 0 9px #36baff7d; }
.maintenance h1 { font-size: 31px; line-height: 1.23; }
.maintenance .intro { margin: 18px 0 24px; font-size: 14px; }
.maintenance .primary { margin-top: 0; }
.reconnect { display: flex; gap: 9px; align-items: center; margin-top: 22px; color: #8dabc8; font-size: 11px; line-height: 1.6; }
.reconnect svg { width: 15px; height: 15px; flex: none; color: #79b3d5; }
.maintenance .form-status { margin-top: 12px; }
@media (min-width: 1600px) { .page { max-width: 1520px; } main { grid-template-columns: minmax(0, 1fr) 402px; gap: 64px; } }
@media (max-width: 1100px) { .page { padding: 28px 32px 22px; } main { gap: 18px; grid-template-columns: minmax(0, 1fr) 348px; }
  .panel { padding: 30px 28px; } .hero .trade { margin-top: -15%; font-size: 12px; } }
@media (max-width: 700px) {
  .page { padding: 22px 24px 18px; }
  .wordmark { font-size: 13px; letter-spacing: .12em; gap: 9px; }
  .wordmark span { font-size: 9px; padding-left: 10px; letter-spacing: .17em; }
  .top-caption { display: none; }
  main { display: flex; flex-direction: column; justify-content: center; gap: 29px; padding: 18px 0 30px; }
  .hero { width: min(100%, 410px); }
  .hero img { width: 112%; margin-left: -6%; }
  .hero .trade { font-size: 10px; margin-top: -14%; letter-spacing: .54em; }
  .hero .trade::before, .hero .trade::after { width: 27px; margin-left: 12px; margin-right: 12px; }
  .panel { width: min(100%, 352px); padding: 26px 25px 28px; border-radius: 18px; }
  .overline { font-size: 9px; margin-bottom: 11px; }
  h1 { font-size: 27px; }
  .intro { margin: 10px 0 22px; font-size: 12px; }
  .field { margin-bottom: 18px; }
  label { margin-bottom: 8px; }
  input { height: 46px; }
  .eye { height: 40px; width: 40px; }
  .primary { min-height: 47px; margin-top: 25px; }
  footer { font-size: 10px; padding-top: 16px; }
  .maintenance .panel { padding: 27px 25px; }
  .maintenance h1 { font-size: 28px; }
  .maintenance .intro { font-size: 13px; line-height: 1.65; }
  .status-badge { margin-bottom: 19px; font-size: 10px; }
}
@media (max-width: 700px) and (max-height: 760px) {
  .page { padding-top: 15px; padding-bottom: 14px; }
  main { padding-top: 6px; gap: 17px; padding-bottom: 22px; }
  .hero { max-width: 290px; }
  .panel { padding: 22px 24px; }
  .intro { margin-bottom: 18px; }
  .primary { margin-top: 20px; }
  .field { margin-bottom: 16px; }
  footer { padding-top: 11px; }
}
@media (min-width: 701px) and (max-height: 760px) {
  .page { padding-top: 20px; padding-bottom: 16px; }
  main { padding: 28px 0; }
  .panel { padding: 27px 30px; }
}
@media (orientation: landscape) and (max-height: 500px) and (min-width: 550px) {
  .page { padding: 12px 24px; }
  .topbar { min-height: 23px; }
  .wordmark { font-size: 12px; }
  main { display: grid; grid-template-columns: minmax(0, 1fr) 280px; padding: 12px 0; gap: 22px; }
  .hero { width: 100%; max-width: 100%; }
  .hero .trade { margin-top: -15%; font-size: 9px; }
  .panel, .maintenance .panel { padding: 17px 21px; }
  .maintenance .panel { padding-top: 12px; padding-bottom: 12px; }
  h1, .maintenance h1 { font-size: 23px; }
  .overline { display: none; }
  .intro { margin: 8px 0 12px; }
  .field { margin-bottom: 10px; }
  label { margin-bottom: 5px; font-size: 11px; }
  input { height: 39px; }
  .eye { width: 33px; height: 33px; }
  .primary { min-height: 40px; margin-top: 14px; }
  footer { display: none; }
  .maintenance .intro { margin: 12px 0 16px; font-size: 12px; }
  .status-badge { margin-bottom: 14px; }
  .reconnect { margin-top: 15px; font-size: 10px; }
}
@media (max-width: 360px) {
  .page { padding-left: 18px; padding-right: 18px; }
  main { gap: 16px; }
  .hero { max-width: 230px; }
  .panel, .maintenance .panel { padding: 22px; }
  h1, .maintenance h1 { font-size: 24px; }
  .maintenance .intro { margin-top: 14px; margin-bottom: 18px; }
  .maintenance .primary { font-size: 12px; gap: 9px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

#login-form { margin-top: 28px; }
.primary { text-decoration: none; }
.form-error { color: #ffaaaa; }
@media (orientation: landscape) and (max-height:500px) { #login-form { margin-top: 14px; } }

.legal-footer { display: flex; justify-content: center; text-align: center; }
.legal-footer p { max-width: 600px; margin: 0; font-size: 10px; line-height: 1.6; }
@media (max-width: 360px) { main { padding-bottom: 14px; } }