/*
  КАРТОЧКА ВХОДА (оператор 07.10, образ — 21st.dev «sign-in-card-2»): стеклянная тёмная карточка, по краю
  медленно идёт луч света, карточка чуть наклоняется за курсором (≤ 4°, только мышь на широком экране), поля
  со значками и одним скруглённым кольцом фокуса, глаз у пароля, кнопка со стрелкой и ожиданием внутри.
  Без framer-motion: CSS + `auth-card.js` (луч на паузе вне экрана и на скрытой вкладке, наклон).
  Только токены PayPage (`--pay-*`), один акцент. Вход — клиент (сайт), партнёр (сайт), трейдер.

  Сцена: архитектурный кадр слева (правило оператора 06.10) и «сцена карточки» справа — карточке нужен
  фон, на котором стекло читается, поэтому за ней тихое пятно акцента; на телефоне кадр — полоса сверху.
*/
@property --ac-angle{syntax:'<angle>';inherits:false;initial-value:0deg}

.ac-scene{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:640px;background:var(--pay-bg-inset);border-color:var(--pay-line);box-shadow:none}
.ac-scene .capital-auth-art{background-color:var(--pay-line-strong)}
.ac-scene .capital-auth-art span{font-family:var(--font);font-weight:600}
.ac-stage{position:relative;display:grid;place-items:center;padding:48px 32px;overflow:hidden;isolation:isolate;perspective:1200px;
  background:
    radial-gradient(60% 45% at 70% 18%,color-mix(in srgb,var(--pay-accent) 13%,transparent),transparent 70%),
    var(--pay-bg-inset)}

.ac-card{position:relative;width:100%;max-width:420px;box-sizing:border-box;padding:32px 28px 24px;border-radius:20px;
  border:1px solid color-mix(in srgb,var(--pay-line-strong) 55%,transparent);
  background:color-mix(in srgb,var(--pay-surface) 74%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:0 1px 0 color-mix(in srgb,var(--pay-white) 6%,transparent) inset,0 24px 48px -32px color-mix(in srgb,var(--pay-black) 70%,transparent);
  transform:rotateX(var(--ac-rx,0deg)) rotateY(var(--ac-ry,0deg));transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ac-card.ac-tilting{transition:transform .12s linear}
:root[data-theme=light] .ac-card{background:color-mix(in srgb,var(--pay-surface) 82%,transparent);box-shadow:0 1px 0 var(--pay-white) inset,0 20px 44px -32px color-mix(in srgb,var(--pay-text) 28%,transparent)}

/* Луч: тонкое кольцо коническим градиентом, видимое только по краю (маска «рамка минус содержимое»). */
.ac-beam{position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--ac-angle),transparent 0deg,transparent 286deg,color-mix(in srgb,var(--pay-accent) 30%,transparent) 318deg,color-mix(in srgb,var(--pay-accent-hover) 85%,transparent) 344deg,transparent 360deg);
  -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);
  animation:ac-beam 9s linear infinite}
.ac-card.ac-still .ac-beam,.ac-card:focus-within .ac-beam{animation-play-state:paused}
/* Луч — только на широком экране с мышью: на телефоне вечная перерисовка конуса над размытым стеклом стоит
   батареи и ничего не говорит; там карточка без луча. Без @property угол не анимируется — луча нет (auth-card.js). */
@media not ((hover:hover) and (min-width:1024px)){.ac-beam{display:none}}
:root.ac-no-beam .ac-beam{display:none}
/* Светлая тема: луч не должен быть самым насыщенным на карточке. */
:root[data-theme=light] .ac-beam{opacity:.6}
@keyframes ac-beam{to{--ac-angle:360deg}}

.ac-title{margin:0;font-size:var(--pay-type-title);font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--pay-text)}
.ac-sub{margin:6px 0 24px;font-size:var(--pay-type-body);line-height:1.5;color:var(--pay-text-muted)}
.ac-form{margin:0}
.ac-label{display:block;margin:16px 0 6px;font-size:var(--pay-type-small);font-weight:500;color:var(--pay-text-muted)}
.ac-label:first-child{margin-top:0}
.ac-label .ac-opt{font-weight:400;color:var(--pay-text-quiet)}

/* Поле: значок слева, ввод, необязательный глаз справа. Кольцо фокуса — ОДНО, на рамке поля: у самого ввода
   контура нет, иначе внутри скруглённого поля вставал второй, квадратный («кубы», снимок оператора 07.10). */
.ac-field{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 4px 0 14px;box-sizing:border-box;
  border:1px solid var(--pay-line-strong);border-radius:12px;background:color-mix(in srgb,var(--pay-bg-inset) 80%,transparent);
  transition:border-color .15s ease-out,box-shadow .15s ease-out,background-color .15s ease-out}
.ac-field:hover{border-color:var(--pay-text-quiet)}
/* Кольцо — 2 px акцентом (≥ 6.7:1 к карточке в обеих темах, WCAG 1.4.11), мягкое свечение снаружи — только украшение. */
.ac-field:focus-within{border-color:var(--pay-accent);background:var(--pay-bg-inset);box-shadow:0 0 0 1px var(--pay-accent),0 0 0 5px color-mix(in srgb,var(--pay-accent) 16%,transparent)}
.ac-field:has([aria-invalid=true]){border-color:var(--pay-red)}
.ac-field:has([aria-invalid=true]):focus-within{border-color:var(--pay-red);box-shadow:0 0 0 1px var(--pay-red),0 0 0 5px color-mix(in srgb,var(--pay-red) 16%,transparent)}
.ac-ic{flex:none;width:18px;height:18px;color:var(--pay-icon-muted);transition:color .15s ease-out}
.ac-field:focus-within .ac-ic{color:var(--pay-accent)}
.ac-field input{flex:1;min-width:0;min-height:46px;padding:0 10px 0 0;border:0;background:none;color:var(--pay-text);font:inherit;font-size:16px;outline:none}
.ac-field input:focus-visible{outline:none}
.ac-field input::placeholder{color:var(--pay-text-quiet);opacity:1}
.ac-field input:-webkit-autofill{-webkit-text-fill-color:var(--pay-text);-webkit-box-shadow:0 0 0 40px var(--pay-bg-inset) inset;caret-color:var(--pay-text)}
.ac-eye{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:none;color:var(--pay-icon-muted);cursor:pointer}
.ac-eye:hover{color:var(--pay-text)}
.ac-eye:focus-visible{outline:2px solid var(--pay-focus);outline-offset:-6px}
.ac-eye svg{width:18px;height:18px}
.ac-eye .ac-eye-off,.ac-eye[aria-pressed=true] .ac-eye-on{display:none}
.ac-eye[aria-pressed=true] .ac-eye-off{display:block}

/* Кнопка: стрелка уезжает на наведении, в ожидании — кольцо вместо стрелки, подпись остаётся. */
.ac-submit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin-top:24px;padding:0 20px;border:0;border-radius:12px;
  background:var(--pay-accent-fill);color:var(--pay-accent-ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  transition:background-color .15s ease-out,transform .15s ease-out}
.ac-submit:hover:not(:disabled){background:var(--pay-accent-fill-hover)}
.ac-submit:active:not(:disabled){transform:scale(.99)}
.ac-submit:disabled{cursor:not-allowed;opacity:.6}
.ac-submit[aria-busy=true]{opacity:1;cursor:wait}
.ac-submit:focus-visible{outline:2px solid var(--pay-focus);outline-offset:3px}
.ac-arrow{width:18px;height:18px;transition:transform .2s ease-out}
.ac-submit:hover:not(:disabled) .ac-arrow{transform:translateX(3px)}
.ac-spin{display:none;width:16px;height:16px;box-sizing:border-box;border:2px solid color-mix(in srgb,currentColor 35%,transparent);border-top-color:currentColor;border-radius:50%;animation:ac-spin .7s linear infinite}
.ac-submit[aria-busy=true] .ac-arrow{display:none}
.ac-submit[aria-busy=true] .ac-spin{display:block}
@keyframes ac-spin{to{transform:rotate(360deg)}}

.ac-result{margin:12px 0 0;font-size:var(--pay-type-body);line-height:1.5;min-height:0}
/* Живая область остаётся в дереве и пустой: скрытая `display:none` до первого текста, она молчит в VoiceOver. */
.ac-result:empty{margin:0}
.ac-result .line{margin:0;font-size:inherit}
.ac-result.ok,.ac-result .ok{color:var(--pay-mint)}
.ac-result.bad,.ac-result .bad{color:var(--pay-red)}
.ac-note{margin:14px 0 0;font-size:var(--pay-type-small);line-height:1.55;color:var(--pay-text-quiet)}
.ac-note a{color:var(--pay-accent)}
/* Ссылка в строке текста — 15 px высотой; на касании цель добирается до 44 px без сдвига строки. */
@media (pointer:coarse){.ac-note a{display:inline-block;padding:14px 0;margin:-14px 0}}
.ac-divider{height:1px;margin:24px 0 8px;border:0;background:linear-gradient(90deg,transparent,var(--pay-line),transparent)}
.ac-alt{margin:0;text-align:center;font-size:var(--pay-type-body);color:var(--pay-text-muted)}
.ac-alt+.ac-alt{margin-top:-6px}
.ac-alt a,.ac-alt .btn-link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--pay-accent);font-weight:600;text-decoration:none}
.ac-alt a:hover{color:var(--pay-accent-hover)}
/* Второстепенный переход (вход другой роли) — тише основного «Зарегистрироваться / Войти». */
.ac-alt-quiet a{color:var(--pay-text-muted);font-weight:500}
.ac-alt-quiet a:hover{color:var(--pay-text)}
.ac-alt a:focus-visible{outline:2px solid var(--pay-focus);outline-offset:0;border-radius:6px}
.ac-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

@media (max-width:900px){.ac-scene{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}}
@media (max-width:720px){
  /* Телефон: кадр — полосой сверху, карточка под ним — одна рамка, а не карточка в рамке сцены. */
  .ac-scene{grid-template-columns:1fr;min-height:0;border:0;border-radius:0;background:transparent;overflow:visible}
  .capital-auth-host>.ac-scene{width:calc(100% - 32px)}
  .ac-scene .capital-auth-art{border-radius:16px;height:112px}
  .ac-stage{padding:16px 0 8px;background:none;overflow:visible}
  .ac-card{padding:24px 18px 16px;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .ac-beam{display:none}
  .ac-card,.ac-card.ac-tilting{transform:none;transition:none}
  .ac-arrow,.ac-submit,.ac-field{transition:none}
  .ac-spin{animation-duration:1.6s}
}
@media (prefers-reduced-transparency:reduce){.ac-card{background:var(--pay-surface);-webkit-backdrop-filter:none;backdrop-filter:none}}