:root{
  --bg1:#0a0f1c;
  --bg2:#0b1220;
  --bg3:#0c1528;
  --bg4:#0d172d;
  --panel:#0f1626;
  --tile:#121b2d;
  --muted:#9fb3d1;
  --text:#e9f1ff;
  --ok:#2ecc71;
  --bad:#e74c3c;
  --brd:#22314b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 40%,var(--bg3) 70%,var(--bg4) 100%);
  background-attachment:fixed;
  color:var(--text);
  font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto;
}
a{color:#cfe2ff;text-decoration:none}
a:hover{text-decoration:underline}

.h2{margin:0 0 8px}
.spacer{height:14px}
.pad10{padding:10px}

/* Общие карточки */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03));
  border:1px solid var(--brd);
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35)
}
.card.inner{margin-top:12px;padding:12px}

/* Кнопки */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--brd);
  background:rgba(255,255,255,.03);
  color:#e9f1ff;
  padding:10px 14px;border-radius:12px;
  cursor:pointer;text-decoration:none;
  transition:.2s transform,.2s background
}
.btn:hover{background:rgba(255,255,255,.07);transform:translateY(-1px)}
.btn-primary{border-color:#4158ff;background:linear-gradient(180deg,#3a55ff22,#2338ff18)}
.btn-primary:hover{background:linear-gradient(180deg,#3a55ff33,#2338ff24)}
.btn-ghost{background:transparent}
.btn-danger{border-color:#ff4d4d;background:linear-gradient(180deg,#ff4d4d22,#ff2a2a18)}
.btn-danger:hover{background:linear-gradient(180deg,#ff4d4d33,#ff2a2a24)}

/* Шапка */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:var(--panel);
  border-bottom:1px solid var(--brd);position:sticky;top:0;z-index:2
}
.brand{display:flex;align-items:center;gap:12px}
.brand-name{font-weight:700}
.ava{
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 36px;
  border: 1px solid rgba(255,255,255,.08);
}

.ava img{
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ava-fallback{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg,#1e2b44,#2b3c61);
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.muted{color:var(--muted)}
.wrap{max-width:980px;margin:0 auto;padding:20px}

/* Модальная подложка */
.modal-backdrop{
  background:
    radial-gradient(1600px 1200px at 50% -30%, rgba(66,93,255,.18), transparent 60%),
    radial-gradient(1400px 1000px at -20% 120%, rgba(0,190,255,.12), transparent 65%),
    rgba(5,10,20,.6);

  background-repeat: no-repeat;
  background-size: cover;
}
.modal-backdrop.active{display:flex}

/* Базовая модалка */
.modal{
  width:min(600px,94vw);
  border-radius:20px;border:1px solid #273a5c;
  background:linear-gradient(180deg, rgba(20,28,46,.96), rgba(12,20,38,.95));
  box-shadow: 0 30px 120px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  padding:20px 18px 16px; transform:translateY(8px);opacity:.98; animation: popIn .22s ease-out forwards;
}
.modal-head{display:flex;align-items:center;gap:10px;margin:0 0 4px}
.modal h3{margin:0;font-size:22px;font-weight:700}
.modal p{margin:0 0 6px}
.modal .lead{color:#e6edff}
.modal .fine{color:var(--muted)}
.section{margin-top:16px;padding-top:12px;border-top:1px solid var(--brd)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.center{justify-content:center}
.mt12{margin-top:12px}
.mt14{margin-top:14px}
.mb12{margin-bottom:12px}

/* Статус и спиннер */
.status{color:var(--muted);font-size:14px;margin-top:8px}
.spinner{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.25);border-top-color:#6ea8ff;
  animation:spin 1s linear infinite;display:inline-block;vertical-align:middle;margin-right:6px
}

/* Успешная авторизация — заголовок */
.success-head{
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  border:1px solid #1f2a40;border-radius:14px;
  padding:14px 16px;text-align:center;font-size:18px;font-weight:700;color:#eaf2ff;
}

/* Список причин */
.reasons{margin:8px 0 0 0;padding:0 0 0 18px;color:var(--muted)}
.reasons li{margin:4px 0}

/* Ряд Epic + кнопка */
.row-epic{display:flex;align-items:center;justify-content:space-between;gap:12px}
.row-epic .grow{flex:1 1 auto;min-width:0}

/* Адаптив */
@media (max-width: 560px){
  .wrap{padding:14px}
  header{padding:12px}
  .card{padding:12px}
  .row-epic{flex-direction:column;align-items:stretch}
  .row-epic .btn{width:100%;text-align:center}
  .modal .actions .btn{width:100%;justify-content:center}
}

/* Animations */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes popIn{from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}