:root {
  --account-ink:#1f2a25;
  --account-muted:#66736b;
  --account-line:#dce3df;
  --account-primary:#245f49;
  --account-primary-dark:#194b39;
  --account-primary-soft:#e9f2ed;
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }

.account-body {
  min-height:100vh;
  margin:0;
  position:relative;
  overflow:hidden;
  color:var(--account-ink);
  background:#f5f7f6;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.account-body::before {
  content:"";
  position:fixed;
  inset:0;
  background:linear-gradient(135deg,#f1f4f2 0%,#fbfcfb 46%,#eaf2ed 100%);
  z-index:0;
}
.account-body::after {
  content:"";
  position:fixed;
  right:6vw;
  bottom:0;
  width:420px;
  height:320px;
  background:linear-gradient(160deg,rgba(31,42,37,.08),rgba(36,95,73,.12));
  clip-path:polygon(18% 72%,47% 34%,72% 42%,100% 16%,100% 100%,0 100%);
  z-index:0;
}
.account-brand-panel {
  position:fixed;
  inset:0;
  padding:42px 48px;
  color:var(--account-ink);
  pointer-events:none;
  z-index:1;
}
.account-brand-panel::before {
  content:"";
  position:absolute;
  right:12vw;
  top:17vh;
  width:380px;
  height:220px;
  border:1px solid rgba(36,95,73,.14);
  border-radius:26px;
  background:linear-gradient(145deg,rgba(255,255,255,.45),rgba(255,255,255,.08));
  transform:rotate(-8deg);
}
.account-brand-panel::after {
  content:"";
  position:absolute;
  right:16vw;
  top:25vh;
  width:260px;
  height:150px;
  border:1px solid rgba(36,95,73,.18);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.12));
  transform:rotate(6deg);
}
.account-brand {
  position:relative;
  z-index:2;
  display:inline-flex;
  width:max-content;
  pointer-events:auto;
}
.account-brand img { height:42px; width:auto; filter:none; }
.account-promise {
  position:absolute;
  right:7vw;
  bottom:10vh;
  z-index:2;
  max-width:360px;
  padding:22px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:22px;
  background:rgba(255,255,255,.58);
  box-shadow:0 20px 55px rgba(28,47,38,.08);
  backdrop-filter:blur(14px);
}
.account-promise .eyebrow {
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:var(--account-primary-soft);
  color:var(--account-primary);
  font-size:11px;
  font-weight:800;
}
.account-promise h1 { margin:18px 0 12px; font-size:32px; line-height:1.2; }
.account-promise p { margin:0; color:#59665f; font-size:14px; line-height:1.8; }
.account-proof { display:grid; grid-template-columns:1fr; gap:9px; margin-top:22px; }
.account-proof div {
  padding:12px 14px;
  border-radius:13px;
  border:1px solid rgba(220,227,223,.92);
  background:rgba(255,255,255,.66);
}
.account-proof strong,.account-proof span { display:block; }
.account-proof strong { font-size:12px; }
.account-proof span { margin-top:3px; color:#718078; font-size:10px; }
.account-legal {
  position:fixed;
  left:50%;
  bottom:26px;
  z-index:2;
  margin:0;
  color:#738078;
  font-size:12px;
  transform:translateX(-50%);
  white-space:nowrap;
}
.account-main {
  position:relative;
  z-index:3;
  min-height:100vh;
  padding:76px 32px 70px;
  display:grid;
  place-items:center;
}
.account-card {
  width:min(500px,100%);
  padding:40px;
  border:1px solid rgba(220,227,223,.96);
  border-radius:22px;
  background:rgba(255,255,255,.97);
  box-shadow:0 30px 80px rgba(28,47,38,.11);
  backdrop-filter:blur(10px);
}
.account-card-head { margin-bottom:28px; }
.account-card-head h2 { margin:0 0 8px; font-size:31px; }
.account-card-head p { margin:0; color:var(--account-muted); font-size:14px; }
.account-form { display:grid; gap:18px; }
.field { display:grid; gap:7px; }
.field-row { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.field label,.field > span { font-size:13px; font-weight:700; color:#3c4841; }
.field input,.field select,.field textarea {
  width:100%;
  border:1px solid #cfd9d3;
  border-radius:11px;
  background:#fff;
  color:var(--account-ink);
  padding:12px 13px;
  outline:none;
  transition:.2s;
}
.field input:focus,.field select:focus,.field textarea:focus {
  border-color:var(--account-primary);
  box-shadow:0 0 0 4px rgba(36,95,73,.11);
}
.password-field { position:relative; }
.password-field input { padding-right:65px; }
.password-toggle {
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  color:var(--account-primary);
  font-size:12px;
  font-weight:700;
}
.sms-code-field { display:grid; grid-template-columns:1fr 108px; gap:10px; align-items:center; }
.sms-code-button {
  min-height:43px;
  border:1px solid #bfcfc6;
  border-radius:11px;
  background:#f6f8f7;
  color:var(--account-primary);
  font-size:12px;
  font-weight:750;
}
.sms-code-button:disabled { opacity:.62; cursor:wait; }
.form-hint { color:#87938c; font-size:11px; line-height:1.55; }
.form-line { display:flex; justify-content:space-between; align-items:center; gap:14px; font-size:12px; }
.checkbox-line { display:flex; align-items:flex-start; gap:9px; color:#5f6d65; font-size:12px; line-height:1.6; }
.checkbox-line input { margin-top:4px; }
.account-link { color:var(--account-primary); font-weight:700; }
.account-submit {
  min-height:50px;
  border:0;
  border-radius:12px;
  color:#fff;
  background:var(--account-primary);
  font-weight:750;
  box-shadow:0 12px 28px rgba(36,95,73,.20);
}
.account-submit:hover { background:var(--account-primary-dark); }
.account-submit:disabled { opacity:.6; cursor:wait; }
.form-message { padding:11px 13px; border-radius:10px; font-size:12px; line-height:1.55; }
.form-message.error { color:#9f2e38; background:#ffeaed; border:1px solid #f6cbd0; }
.form-message.success { color:#1f6f53; background:#e7f6f0; border:1px solid #c5e8da; }
.account-switch { margin:24px 0 0; text-align:center; color:var(--account-muted); font-size:13px; }
.dev-reset-link {
  display:block;
  margin-top:12px;
  padding:10px;
  border-radius:9px;
  color:#795115;
  background:#fff4df;
  font-size:12px;
  text-align:center;
}
.account-success-panel { display:grid; justify-items:center; gap:16px; text-align:center; }
.account-success-icon {
  width:78px;
  height:78px;
  display:grid;
  place-items:center;
  border:6px solid #2d8c68;
  border-radius:999px;
  color:#2d8c68;
  font-size:38px;
  font-weight:900;
}
.account-success-panel h3 { margin:4px 0 0; font-size:26px; }
.account-success-panel p { margin:0; max-width:360px; color:#66736b; font-size:13px; line-height:1.8; }
.account-success-panel .account-submit { min-width:260px; }
.account-signed-line {
  margin:-8px 0 18px;
  padding:10px 12px;
  border:1px solid #d8e5dd;
  border-radius:12px;
  background:#f4f8f5;
  color:#59665f;
  font-size:12px;
}
.account-signed-line strong { color:#334139; }

.account-auth-progress {
  display:grid;
  justify-items:center;
  gap:14px;
  padding:8px 0 4px;
  text-align:center;
}
.account-auth-progress-mark {
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:var(--account-primary-soft);
}
.account-auth-progress-mark span {
  width:30px;
  height:30px;
  border:3px solid rgba(36,95,73,.18);
  border-top-color:var(--account-primary);
  border-radius:999px;
  animation:account-auth-spin .8s linear infinite;
}
.account-auth-progress h3 { margin:4px 0 0; font-size:24px; }
.account-auth-progress p { margin:0; color:#526158; font-size:13px; line-height:1.7; }
.account-auth-progress small { color:#87938c; font-size:11px; }
.account-auth-progress-track {
  width:100%;
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:#e8eeea;
}
.account-auth-progress-track i {
  display:block;
  width:8%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#2d8c68,var(--account-primary));
  transition:width .35s ease;
}
@keyframes account-auth-spin { to { transform:rotate(360deg); } }

@media (max-width:1100px) {
  .account-promise,.account-brand-panel::before,.account-brand-panel::after,.account-body::after { display:none; }
  .account-brand-panel { padding:28px 26px; }
}
@media (max-width:760px) {
  .account-main { padding:86px 15px 42px; }
  .account-card { padding:27px 21px; border-radius:18px; }
  .field-row { grid-template-columns:1fr; }
  .sms-code-field { grid-template-columns:1fr; }
  .account-legal { display:none; }
}