/* Экран входа: стеклянная карточка в серверном коридоре */

.login-page { overflow: hidden; min-height: 100vh; min-height: 100dvh; }
.login-veil {
  background:
    radial-gradient(60% 55% at 50% 50%, rgba(6, 11, 19, 0), rgba(6, 11, 19, .55)),
    linear-gradient(180deg, rgba(6, 11, 19, .35), rgba(6, 11, 19, .45));
}

.login-wrap {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: 24px 16px;
}

/* ── Карточка ────────────────────────────────────────────────────────────── */
.login-card {
  position: relative; isolation: isolate;
  width: min(420px, 100%);
  padding: 34px 34px 26px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03) 38%, rgba(255, 255, 255, .05)),
    rgba(18, 34, 52, .38);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(200, 232, 255, .28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 0 0 1px rgba(255, 255, 255, .04),
    inset 0 -30px 60px -40px rgba(120, 200, 255, .25),
    0 0 0 1px rgba(0, 0, 0, .2),
    0 0 60px -10px rgba(62, 166, 255, .35),
    0 40px 80px -30px rgba(0, 0, 0, .8);
  view-transition-name: hero;
  animation: card-in .9s cubic-bezier(.2, .8, .2, 1) .15s both;
}
/* Грань стекла: светится сверху и по бокам */
.login-card::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(160deg, rgba(190, 235, 255, .8), rgba(120, 190, 255, .15) 30%, rgba(120, 190, 255, .05) 60%, rgba(143, 214, 255, .55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* Мягкий блик-отражение в верхней части */
.login-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(120% 60% at 50% -8%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 62%);
  pointer-events: none; z-index: -1;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(18px) scale(.965); filter: blur(10px); }
}

.login-card > * { animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; }
.login-head { animation-delay: .35s; }
.login-card form { animation-delay: .45s; }
.login-foot { animation-delay: .55s; }

.login-head { text-align: center; margin-bottom: 26px; }
.login-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 30px; font-weight: 700; letter-spacing: .01em; line-height: 1.1;
}
.login-brand .i { width: 30px; height: 30px; color: #cfeaff; stroke-width: 1.6; filter: drop-shadow(0 0 8px rgba(143, 214, 255, .6)); }
.login-brand span {
  background: linear-gradient(180deg, #ffffff 20%, #b9e1ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(120, 200, 255, .45));
}
.login-sub { margin-top: 8px; color: var(--ink-2); font-size: 15px; }

.login-field { margin-bottom: 16px; }
.login-field label {
  display: block; margin-bottom: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(220, 235, 250, .82);
}

.glass-input {
  position: relative;
  display: flex; align-items: center;
  height: 50px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .05));
  border: 1px solid rgba(170, 215, 255, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 2px 8px rgba(0, 0, 0, .18), 0 0 18px -8px rgba(120, 200, 255, .4);
  transition: border-color .25s var(--ease), box-shadow .3s var(--ease), background-color .25s;
}
.glass-input:hover { border-color: rgba(190, 228, 255, .5); }
.glass-input:focus-within {
  border-color: rgba(160, 222, 255, .9);
  background-color: rgba(255, 255, 255, .04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 0 0 4px rgba(62, 166, 255, .18),
    0 0 26px -4px rgba(62, 166, 255, .6);
}
.glass-input.is-invalid { border-color: rgba(255, 130, 125, .8); box-shadow: 0 0 0 4px rgba(242, 95, 92, .16); }
.glass-input > .i { position: absolute; left: 15px; color: rgba(200, 225, 250, .65); pointer-events: none; transition: color .2s; }
.glass-input:focus-within > .i { color: var(--accent-hi); }
.glass-input input {
  width: 100%; height: 100%;
  padding: 0 48px 0 46px;
  background: transparent; border: 0; outline: none;
  color: #fff; font-size: 15.5px; letter-spacing: .01em;
  caret-color: var(--accent-hi);
}
/* Встроенный «глаз» Edge дублирует нашу кнопку показа пароля */
.glass-input input::-ms-reveal, .glass-input input::-ms-clear { display: none; }
.glass-input input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 100px rgba(20, 44, 70, 1) inset;
  border-radius: 14px;
  transition: background-color 9999s;
}
.eye {
  position: absolute; right: 7px;
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
  color: rgba(200, 225, 250, .6);
  transition: background-color .2s, color .2s, transform .3s var(--spring);
}
.eye:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.eye:active { transform: scale(.9); }

.caps { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: #ffc98a; }
.caps[hidden] { display: none; }

.field-msg, .login-error {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; padding: 11px 14px;
  border-radius: 12px;
  background: rgba(242, 95, 92, .14);
  border: 1px solid rgba(255, 130, 125, .38);
  color: #ffd0ce; font-size: 13.5px; font-weight: 500;
}
.field-msg[hidden] { display: none; }
.login-error { animation: pop .4s var(--spring) .5s both; }
.login-error .i { color: #ff8f8b; }

.login-card form .liquid-btn { margin-top: 24px; }

.login-foot {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 20px; font-size: 12.5px; color: var(--ink-3);
}

.shake { animation: shake .45s cubic-bezier(.36, .07, .19, .97) both !important; }
.has-error { animation: card-in .9s cubic-bezier(.2, .8, .2, 1) .15s both, shake .45s cubic-bezier(.36, .07, .19, .97) 1.05s both; }
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

/* ── Линейные здания по бокам ────────────────────────────────────────────── */
.city {
  position: fixed; z-index: 1; bottom: 11vh;
  width: min(30vw, 440px); height: auto;
  fill: none; stroke: rgba(175, 215, 245, .5); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(110, 190, 255, .45));
  pointer-events: none;
}
.city-left { right: calc(50% + 190px); }
.city-right { left: calc(50% + 190px); }
.city .c-dim { stroke: rgba(175, 215, 245, .28); }
.city .c-node { stroke: rgba(140, 210, 255, .7); }
.city .c-node circle { fill: rgba(140, 210, 255, .5); }
.city path, .city circle {
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  animation: draw 2.6s cubic-bezier(.45, .1, .2, 1) forwards;
}
.city .c-dim path { animation-delay: .2s; }
.city .c-node path, .city .c-node circle { animation-delay: .9s; animation-duration: 2s; }
.city .c-trace { animation-delay: 1.4s !important; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ── Голографические иконки ──────────────────────────────────────────────── */
.holo span {
  position: fixed; z-index: 1; left: var(--x); top: var(--y);
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  color: rgba(160, 215, 255, .75);
  border: 1px solid rgba(143, 214, 255, .22);
  background: rgba(62, 166, 255, .06);
  box-shadow: 0 0 18px -6px rgba(62, 166, 255, .6);
  opacity: 0;
  animation: holo-in 1s var(--ease) forwards, drift 9s ease-in-out infinite alternate;
  animation-delay: 1.2s, var(--d);
  pointer-events: none;
}
.holo .i { width: 18px; height: 18px; stroke-width: 1.5; }
@keyframes holo-in { to { opacity: .55; } }
@keyframes drift { from { translate: 0 -5px; } to { translate: 0 5px; } }

/* ── Адаптив ─────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .city { width: 26vw; opacity: .7; }
  .holo { display: none; }
}
@media (max-width: 820px) {
  .city { display: none; }
}
@media (max-width: 480px) {
  .login-card { padding: 28px 20px 22px; border-radius: 22px; }
  .login-brand { font-size: 26px; }
  .login-head { margin-bottom: 22px; }
}
@media (max-height: 640px) {
  .login-page { overflow: auto; }
  .city, .holo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .city path, .city circle { stroke-dashoffset: 0; animation: none; }
  .holo span { opacity: .55; animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Вход — светлая тема
   ════════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] .login-veil {
  background:
    radial-gradient(60% 55% at 50% 50%, rgba(246, 249, 252, 0), rgba(226, 234, 243, .5)),
    linear-gradient(180deg, rgba(246, 249, 252, .25), rgba(236, 242, 248, .35));
}
:root[data-theme="light"] .login-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .5) 40%, rgba(255, 255, 255, .6)),
    rgba(240, 246, 252, .35);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-color: rgba(255, 255, 255, .9);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -30px 60px -40px rgba(120, 180, 240, .25),
    0 0 0 1px rgba(20, 45, 80, .06),
    0 0 60px -14px rgba(62, 146, 255, .3),
    0 40px 80px -34px rgba(40, 70, 110, .45);
}
:root[data-theme="light"] .login-card::before {
  background: linear-gradient(160deg, rgba(255, 255, 255, 1), rgba(160, 205, 250, .3) 30%, rgba(255, 255, 255, .2) 60%, rgba(120, 185, 250, .5));
}
:root[data-theme="light"] .login-card::after { background: radial-gradient(120% 60% at 50% -8%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 62%); }
:root[data-theme="light"] .login-brand .i { color: #1a6fd1; filter: drop-shadow(0 2px 6px rgba(26, 111, 209, .35)); }
:root[data-theme="light"] .login-brand span {
  background: linear-gradient(180deg, #0f1f35 20%, #1f5aa0);
  -webkit-background-clip: text; background-clip: text;
  filter: none;
}
:root[data-theme="light"] .login-field label { color: var(--ink-2); }
:root[data-theme="light"] .glass-input {
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .72));
  border-color: rgba(26, 111, 209, .2);
  box-shadow: inset 0 1px 2px rgba(20, 45, 80, .08), 0 1px 0 rgba(255, 255, 255, .8);
}
:root[data-theme="light"] .glass-input:hover { border-color: rgba(26, 111, 209, .35); }
:root[data-theme="light"] .glass-input:focus-within {
  border-color: rgba(31, 122, 224, .65);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(31, 122, 224, .14), 0 0 22px -6px rgba(62, 146, 255, .45);
}
:root[data-theme="light"] .glass-input > .i { color: #6a7a8f; }
:root[data-theme="light"] .glass-input:focus-within > .i { color: #1a6fd1; }
:root[data-theme="light"] .glass-input input { color: var(--ink); caret-color: #1a6fd1; }
:root[data-theme="light"] .glass-input input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 100px #f3f8ff inset;
}
:root[data-theme="light"] .eye { color: #6a7a8f; }
:root[data-theme="light"] .eye:hover { background: rgba(20, 45, 80, .06); color: var(--ink); }
:root[data-theme="light"] .caps { color: #b86a08; }
:root[data-theme="light"] .field-msg, :root[data-theme="light"] .login-error {
  background: rgba(216, 67, 62, .08); border-color: rgba(216, 67, 62, .3); color: #a3302c;
}
:root[data-theme="light"] .login-error .i { color: #d8433e; }
:root[data-theme="light"] .city { stroke: rgba(40, 95, 160, .45); filter: drop-shadow(0 0 5px rgba(120, 180, 240, .45)); }
:root[data-theme="light"] .city .c-dim { stroke: rgba(40, 95, 160, .25); }
:root[data-theme="light"] .city .c-node { stroke: rgba(26, 111, 209, .65); }
:root[data-theme="light"] .city .c-node circle { fill: rgba(26, 111, 209, .45); }
:root[data-theme="light"] .holo span { color: #1a6fd1; border-color: rgba(26, 111, 209, .22); background: rgba(255, 255, 255, .45); box-shadow: 0 6px 18px -8px rgba(40, 90, 160, .45); }