/* Минимальный неон-стайл */ 
:root{
  --bg:#0d1027;
  --bg-2:#14183b;
  --text:#e6e6ff;
  --muted:#a6a8d3;
  --brand:#8a5cff;
  --brand-2:#26d0ff;
  --ok:#3bd28f;
  --shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 40px rgba(138,92,255,.15);
}
    .card__header{padding:20px 24px 0}
.card__title{margin:0 0 6px; font-size:28px; line-height:1.2}
.account-badge{display:flex; gap:8px; align-items:center; color:#92a0c6}
.account-badge__name{font-weight:600; color:#cfd8ff}
.dot{opacity:.6}
.auth {
    display: flex;
    /*min-height: 50vh; */
    align-items: center;
    justify-content: center;
    padding:0 20px;
}

.auth__title{margin-top:0px};
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 20% -10%, rgba(138,92,255,.25), transparent 60%),
              radial-gradient(900px 900px at 90% 10%, rgba(38,208,255,.18), transparent 60%),
              linear-gradient(180deg,var(--bg),var(--bg-2) 80%);
  color:var(--text);
  font:16px/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;
  letter-spacing:.1px;
}

.wrap{max-width:800px;margin:0 auto;padding:0 20px}

.site-header{
  position:sticky;top:0;z-index:10;
  background: rgba(13,16,39,.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px}
.brand__logo{width:28px;height:28px;filter:drop-shadow(0 0 8px rgba(138,92,255,.7))}
.brand__name{font-weight:700;letter-spacing:.4px}
.nav__link{color:var(--muted);text-decoration:none;margin-left:18px}
.nav__link--cta{padding:10px 14px;border:1px solid rgba(255,255,255,.15);border-radius:10px}

.hero{padding:24px 0 24px;text-align:center}
.hero__title{font-size:36px;margin:0 0 10px;font-weight:800}
.hero__subtitle{color:var(--muted);margin:0 0 10px}

.card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 26px;
  box-shadow: var(--shadow);
}

.card.login {
  margin-top: 50px;
}

.card__title{margin:0 0 14px;font-size:22px}
.auth__card {
    width: 100%;
    max-width: 420px
}
.ghost-input {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0
}
.form{display:grid;gap:16px}
.form__row {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 12px;
}
.loader {
  text-align: center;
  margin-top: 20px;
  display: none;
}

.loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.input.error {
  border-color: #ff4444;
  box-shadow: 0 0 0 2px rgba(255, 68, 68, 0.2);
}

.error-message {
  color: #ff4444;
  font-size: 14px;
  margin-top: 5px;
}
.wave {
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg,var(--brand),var(--brand-2));
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.form__label{color:var(--muted);font-size:14px}
.input{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:var(--text); padding:12px 14px; border-radius:12px; outline:none;
}
.input:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(138,92,255,.25)}

/* Стилизация выпадающего списка */
select.input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a6a8d3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
  cursor: pointer;
}

select.input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(138,92,255,.25);
}

/* Стили для опций */
select.input option {
  background-color: var(--bg-2);
  color: var(--text);
  padding: 10px;
}

.banks{display:flex;gap:12px;flex-wrap:wrap}
.bank{display:inline-flex;align-items:center}
.bank input{position:absolute;opacity:0;pointer-events:none}
.bank__vis{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  cursor:pointer; transition: .2s ease;
}
.bank__vis img{width:22px;height:22px}
.bank input:checked + .bank__vis{
  border-color: var(--brand); box-shadow:0 0 0 3px rgba(138,92,255,.25), inset 0 0 18px rgba(138,92,255,.12);
}

.btn{
  appearance:none; border:0; padding:12px 18px; border-radius:12px;
  font-weight:700; letter-spacing:.3px; cursor:pointer;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:white; box-shadow:var(--shadow);
}
.btn--ghost{background:transparent;border:1px solid rgba(255,255,255,.18)}

.hint{color:var(--muted);font-size:13px;margin:6px 0 0}

.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:28px 0}
.tile{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:16px;min-height:120px}

.site-footer{margin:36px 0 20px;color:var(--muted)}
.site-footer .wrap{display:flex;align-items:center;justify-content:space-between;justify-content: center;}

.modal{position:fixed;inset:0;background:rgba(7,7,20,.6);display:none;align-items:center;justify-content:center;padding:20px}
.modal[aria-hidden="false"]{display:flex}
.modal__window{background:rgba(19,22,52,.98);border:1px solid rgba(255,255,255,.12);border-radius:16px;max-width:520px;width:100%;padding:22px;box-shadow:var(--shadow)}
.modal__close{position:absolute;right:18px;top:10px;background:transparent;border:0;color:var(--muted);font-size:26px;cursor:pointer}
.link{color:var(--brand-2)}
@media (max-width:600px){
  .hero__title{font-size:28px}
  .wave{height:44px}
}