:root {
  color-scheme: dark;
  --bg:#0c1019;
  --panel:#171d2a;
  --panel2:#20283a;
  --gold:#efc65d;
  --text:#f3f5fb;
  --muted:#a9b3c9;
  --border:#3b465f;
  --danger:#d85b5b;
  --danger2:#9e3f3f;
  --ok:#68d39a;
}
* { box-sizing:border-box; }
body {
  margin:0;
  min-height:100vh;
  background:radial-gradient(circle at top, #171f31, var(--bg) 50%);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
}
main {
  width:min(760px, calc(100% - 28px));
  margin:0 auto;
  padding:34px 0 54px;
}
.hero { text-align:center; padding:12px 8px 22px; }
h1,h2 { color:var(--gold); }
h1 { margin:0 0 12px; font-size:clamp(28px,6vw,42px); }
h2 { margin-top:0; }
p { color:var(--muted); line-height:1.75; }
.en { direction:ltr; text-align:left; }
.card {
  background:rgba(23,29,42,.96);
  border:1px solid var(--border);
  border-radius:18px;
  padding:20px;
  margin:14px 0;
  box-shadow:0 16px 44px rgba(0,0,0,.22);
}
.hidden { display:none !important; }
label {
  display:grid;
  gap:7px;
  color:#d8deed;
  margin:12px 0;
}
input {
  width:100%;
  border:1px solid #46526e;
  background:#0f1521;
  color:var(--text);
  border-radius:11px;
  padding:13px 14px;
  font-size:16px;
  outline:none;
}
input:focus { border-color:var(--gold); }
button, .actions button {
  border:0;
  border-radius:11px;
  padding:13px 16px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}
button { width:100%; background:#6267e9; color:white; }
button:disabled { opacity:.45; cursor:not-allowed; }
.google-btn { background:#f5f5f5; color:#202020; }
.secondary-btn { background:#30394d; color:#eef2fb; }
.danger-btn { background:var(--danger); color:white; }
.danger-btn:hover { background:var(--danger2); }
.divider {
  display:flex;
  align-items:center;
  gap:10px;
  color:#77839f;
  margin:17px 0;
}
.divider:before,.divider:after {
  content:"";
  height:1px;
  background:#343d53;
  flex:1;
}
.account-info {
  display:grid;
  gap:8px;
  margin-bottom:15px;
}
.account-info > div {
  display:grid;
  grid-template-columns:80px 1fr;
  gap:10px;
  padding:10px;
  border-radius:10px;
  background:#111827;
}
.account-info span { color:#8995b1; }
.account-info strong,.account-info code {
  overflow-wrap:anywhere;
  direction:ltr;
  text-align:left;
}
.warning {
  border:1px solid #754b4b;
  background:rgba(136,55,55,.12);
  border-radius:12px;
  padding:13px 14px;
  margin:16px 0;
}
.warning strong { color:#ffaaaa; }
.actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
.status { min-height:24px; margin-bottom:0; }
.status.error { color:#ff9f9f; }
.status.ok { color:var(--ok); }
.success-card { border-color:#3c7559; }
footer {
  text-align:center;
  color:#7f8ba5;
  margin-top:26px;
}
a { color:#85c8ff; }
@media (max-width:560px) {
  .actions { grid-template-columns:1fr; }
  .account-info > div { grid-template-columns:1fr; }
}