:root {
  --ink: #172c31;
  --muted: #657378;
  --paper: #f5f2eb;
  --card: #fffdf9;
  --deep: #102c31;
  --deep-2: #183f43;
  --accent: #1d7168;
  --accent-soft: #e4f0ec;
  --gold: #ba9857;
  --line: #ddd9cf;
  --danger: #a5433d;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { min-height: 100vh; }
button, input { font: inherit; }
.hidden { display: none !important; }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, .92fr) minmax(520px, 1.08fr); }
.login-story { position: relative; display: flex; flex-direction: column; min-height: 100vh; padding: 42px 56px; overflow: hidden; color: #f5f1e8; background: linear-gradient(145deg, #0d292e 0%, #123b3e 60%, #174c47 100%); }
.login-story::before { content: ""; position: absolute; width: 520px; height: 520px; right: -260px; top: -170px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.025), 0 0 0 160px rgba(255,255,255,.018); }
.login-story::after { content: "法"; position: absolute; right: 30px; bottom: -110px; font-family: SimSun, serif; font-size: 420px; line-height: 1; color: rgba(255,255,255,.025); }
.brand-line { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(222,190,124,.58); border-radius: 11px; color: #e8c985; font: 700 22px SimSun, serif; }
.brand-line strong, .brand-line small { display: block; }
.brand-line strong { font: 700 21px SimSun, serif; letter-spacing: .12em; }
.brand-line small { margin-top: 3px; color: rgba(255,255,255,.6); font-size: 11px; }
.story-copy { position: relative; z-index: 1; margin: auto 0 54px; max-width: 600px; }
.eyebrow { margin: 0 0 12px; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .22em; }
.story-copy h1 { margin: 0; font: 500 clamp(40px, 4vw, 64px)/1.28 SimSun, serif; letter-spacing: .03em; }
.story-copy > p:last-child { max-width: 540px; margin: 28px 0 0; color: rgba(255,255,255,.68); font-size: 14px; line-height: 1.9; }
.trust-list { position: relative; z-index: 1; display: grid; gap: 14px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; }
.trust-list > div { display: flex; align-items: center; gap: 15px; }
.trust-list > div > span { color: #d0ad68; font: 600 11px Georgia, serif; }
.trust-list p { margin: 0; }
.trust-list strong, .trust-list small { display: block; }
.trust-list strong { font-size: 13px; }
.trust-list small { margin-top: 3px; color: rgba(255,255,255,.5); font-size: 10px; }
.story-foot { position: relative; z-index: 1; margin: 30px 0 0; color: rgba(255,255,255,.34); font-size: 10px; letter-spacing: .08em; }

.login-main { display: grid; align-content: center; justify-items: center; padding: 56px; background: radial-gradient(circle at 80% 10%, rgba(29,113,104,.07), transparent 32%), var(--paper); }
.login-card { width: min(440px, 100%); padding: 38px 40px 28px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,253,249,.96); box-shadow: 0 24px 60px rgba(24,44,49,.1); }
.login-card header h2 { margin: 0; font: 600 29px SimSun, serif; }
.login-card header > p:last-child { margin: 10px 0 28px; color: var(--muted); font-size: 12px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: -8px 0 22px; padding: 4px; border-radius: 10px; background: #efede7; }
.auth-tabs button { height: 36px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; font-size: 11px; font-weight: 750; }
.auth-tabs button.active { color: var(--ink); background: #fff; box-shadow: 0 3px 10px rgba(24,44,49,.08); }
.field-group { margin-top: 17px; }
.field-group label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 750; }
.field-group input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #d6d2c9; border-radius: 10px; outline: none; color: var(--ink); background: #fff; transition: .18s ease; }
.field-group input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29,113,104,.11); }
.code-row { display: grid; grid-template-columns: 1fr 112px; gap: 8px; }
.code-row button { border: 1px solid #cbd8d4; border-radius: 10px; color: var(--accent); background: var(--accent-soft); cursor: pointer; font-size: 11px; font-weight: 750; }
.code-row button:disabled { cursor: wait; opacity: .6; }
.label-row { display: flex; align-items: center; justify-content: space-between; }
.label-row span { display: flex; gap: 12px; }
.label-row button { padding: 0; border: 0; color: var(--accent); background: transparent; cursor: pointer; font-size: 11px; }
.form-note { display: flex; gap: 8px; align-items: center; margin: 15px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.lock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.error-box { margin-top: 14px; padding: 10px 12px; border: 1px solid #ebcbc7; border-radius: 9px; color: var(--danger); background: #fff3f1; font-size: 11px; line-height: 1.5; }
.error-box.success-box { border-color: #bddbd1; color: #185f58; background: #eef8f4; }
.login-button { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 50px; margin-top: 24px; padding: 0 18px; border: 0; border-radius: 10px; color: #fff; background: var(--accent); box-shadow: 0 12px 24px rgba(29,113,104,.2); cursor: pointer; font-weight: 750; }
.login-button:hover { background: #185f58; }
.login-button:disabled { cursor: wait; opacity: .66; }
.back-button { width: 100%; margin-top: 14px; padding: 8px; border: 0; color: var(--accent); background: transparent; cursor: pointer; font-size: 11px; font-weight: 750; }
.login-card footer { display: flex; justify-content: center; gap: 6px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.login-card footer strong { color: var(--ink); }
.legal-note { width: min(440px, 100%); margin: 18px 0 0; color: #899296; font-size: 9px; line-height: 1.6; text-align: center; }

.bootstrap-panel { margin-top: 20px; padding: 18px; border: 1px solid #cce0da; border-radius: 12px; background: var(--accent-soft); }
.bootstrap-heading { display: flex; align-items: center; gap: 12px; }
.bootstrap-heading strong, .bootstrap-heading small { display: block; }
.bootstrap-heading strong { font-size: 12px; }
.bootstrap-heading small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.spinner { width: 22px; height: 22px; border: 2px solid rgba(29,113,104,.2); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.bootstrap-panel ol { display: grid; gap: 7px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: steps; }
.bootstrap-panel li { color: #6a7779; font-size: 10px; }
.bootstrap-panel li::before { counter-increment: steps; content: counter(steps); display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 8px; border-radius: 50%; background: rgba(29,113,104,.12); font-size: 9px; }
.bootstrap-panel li.done { color: var(--ink); font-weight: 700; }
.bootstrap-panel li.done::before { content: "✓"; color: #fff; background: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-story { min-height: auto; padding: 28px 28px 36px; }
  .story-copy { margin: 70px 0 38px; }
  .story-copy h1 { font-size: 42px; }
  .trust-list { grid-template-columns: repeat(3, 1fr); }
  .trust-list > div { align-items: flex-start; }
  .story-foot { display: none; }
  .login-main { padding: 40px 22px 56px; }
}

@media (max-width: 620px) {
  .login-story { padding: 24px 20px 30px; }
  .story-copy { margin: 54px 0 30px; }
  .story-copy h1 { font-size: 34px; }
  .trust-list { grid-template-columns: 1fr; }
  .login-main { padding: 28px 14px 44px; }
  .login-card { padding: 28px 22px 24px; border-radius: 15px; }
}