:root{
  --bg:#f4f6f9;
  --card:#ffffff;
  --ink:#1b2733;
  --muted:#5d6b7a;
  --dim:#93a1af;
  --line:#e3e8ef;
  --brand:#3274bf;
  --brand-dark:#245a96;
  --ok:#1d9e75;
  --warn:#ba7517;
  --bad:#c0392b;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
.access-body{
  background:var(--bg);
  font-family:var(--sans);
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 16px;
}
.access-shell{width:100%;max-width:560px}
.access-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(27,39,51,.06);
}
.access-band{
  padding:20px 24px 16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fbfcfe,#f7f9fc);
}
.access-brandline{display:flex;align-items:center;gap:12px}
.access-mark{
  width:36px;height:36px;border-radius:9px;
  background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:500;flex:0 0 auto;
}
.access-brandline strong{display:block;font-size:15px;font-weight:500;letter-spacing:.2px}
.access-brandline small{display:block;font-size:10.5px;color:var(--dim);letter-spacing:1.2px;margin-top:2px}

.access-rail{margin-top:18px}
.rail-line{height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.rail-line i{display:block;height:100%;width:18%;background:var(--brand);transition:width .45s ease}
.access-rail ol{list-style:none;display:flex;margin:10px 0 0;padding:0}
.access-rail li{flex:1;display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--dim)}
.access-rail li b{
  width:18px;height:18px;border-radius:50%;
  background:#eef2f7;color:var(--dim);
  display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:500;flex:0 0 auto;transition:all .3s;
}
.access-rail li.is-active b{background:var(--brand);color:#fff}
.access-rail li.is-active{color:var(--brand)}
.access-rail li.is-done b{background:var(--ok);color:#fff}
.access-rail li.is-done{color:var(--ok)}

.access-content{padding:24px}
.access-kicker{
  font-size:10.5px;letter-spacing:1.4px;color:var(--dim);
  margin:0 0 8px;text-transform:uppercase;
}
.access-content h1{font-size:19px;font-weight:500;margin:0 0 10px;line-height:1.4}
.access-lead{font-size:13px;line-height:1.7;color:var(--muted);margin:0 0 20px}

.access-notice{
  padding:10px 13px;border-radius:8px;font-size:12.5px;
  margin-bottom:16px;line-height:1.6;
}
.access-notice.is-info{background:#eef4fb;color:var(--brand-dark);border:1px solid #d6e4f5}
.access-notice.is-error{background:#fdecea;color:var(--bad);border:1px solid #f5c6c1}
.access-notice.is-success{background:#e8f6f1;color:#0f6e56;border:1px solid #bfe6d9}

.access-form{display:flex;flex-direction:column;gap:15px}
.access-form label{display:flex;flex-direction:column;gap:6px}
.access-form label>span{font-size:12.5px;color:var(--muted);font-weight:500}
.access-form em{
  font-style:normal;font-size:10px;color:var(--dim);
  border:1px solid var(--line);border-radius:4px;
  padding:1px 5px;margin-left:4px;vertical-align:1px;
}
.access-form input,.access-form textarea{
  font-family:var(--sans);font-size:13.5px;color:var(--ink);
  padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  background:#fcfdfe;transition:border-color .2s,box-shadow .2s;
  width:100%;outline:none;resize:vertical;
}
.access-form input:focus,.access-form textarea:focus{
  border-color:var(--brand);background:#fff;
  box-shadow:0 0 0 3px rgba(50,116,191,.1);
}
.access-form small{font-size:11px;color:var(--dim);text-align:right}
.access-form small b{font-weight:500}

.access-primary{
  font-family:var(--sans);font-size:13.5px;font-weight:500;
  color:#fff;background:var(--brand);border:none;
  padding:11px 18px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .2s,opacity .2s;
}
.access-primary:hover{background:var(--brand-dark)}
.access-primary:disabled{opacity:.55;cursor:default}
.access-secondary{
  font-family:var(--sans);font-size:13.5px;
  color:var(--muted);background:#fff;
  border:1px solid var(--line);padding:10px 16px;
  border-radius:8px;cursor:pointer;transition:color .2s,border-color .2s;
}
.access-secondary:hover{color:var(--brand);border-color:var(--brand)}

.access-result{
  text-align:center;padding:8px 0 4px;
}
.access-stamp{
  display:inline-block;font-size:11px;padding:4px 12px;
  border-radius:20px;background:#fdf3e3;color:var(--warn);
  border:1px solid #f5dfba;margin-bottom:12px;
}
.access-stamp.is-approved{background:#e8f6f1;color:#0f6e56;border-color:#bfe6d9}
.access-stamp.is-pending{background:#fdf3e3;color:var(--warn);border-color:#f5dfba}
.access-stamp.is-rejected{background:#fdecea;color:var(--bad);border-color:#f5c6c1}
.access-result h2{font-size:16px;font-weight:500;margin:0 0 8px}
.access-result p{font-size:13px;color:var(--muted);line-height:1.7;margin:0 0 18px}
.access-result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.access-identity{
  display:flex;gap:12px;margin:24px 0 0;padding-top:18px;
  border-top:1px solid var(--line);flex-wrap:wrap;
}
.access-identity>div{flex:1;min-width:140px}
.access-identity dt{font-size:11px;color:var(--dim);margin-bottom:3px}
.access-identity dd{
  margin:0;font-size:12.5px;color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  word-break:break-all;
}
.access-foot{
  text-align:center;font-size:11px;color:var(--dim);
  margin:16px 0 0;line-height:1.6;
}
.shake{animation:shake .35s}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}
@media(max-width:520px){
  .access-body{padding:16px 12px;align-items:flex-start}
  .access-band{padding:16px 18px 14px}
  .access-content{padding:18px}
  .access-content h1{font-size:17px}
  .access-band .access-brandline small{display:none}
}