:root{
  --paper:#FAFAFA;--ink:#0A0A0A;--muted:#5c5c5c;--faint:#a8a8a8;
  --seal:#B23A2E;--seal-deep:#8E2E24;--line:#e9e9e9;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{min-height:100%;background:var(--paper)}
body{
  min-height:100vh;margin:0;color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,sans-serif;
  background:var(--paper);font-weight:300;letter-spacing:.01em;
}
button,input{font:inherit}
.shell{width:min(1120px,calc(100% - 64px));margin:auto;padding:40px 0 64px}
.masthead{display:flex;align-items:center;justify-content:space-between;padding-bottom:26px}
.brand{display:flex;align-items:center;gap:16px}
.seal{width:26px;height:26px;border:1px solid var(--seal);display:grid;place-items:center;color:var(--seal);font-size:12px;font-weight:400}
.brand h1{font-size:15px;font-weight:400;margin:0;letter-spacing:.16em}
.edition{font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--faint);letter-spacing:.1em}
.loading{min-height:60vh;display:grid;place-items:center;color:var(--muted);letter-spacing:.12em;font-size:13px}

.login-layout{min-height:68vh;display:grid;grid-template-columns:1fr;justify-items:center;align-content:center;text-align:center;gap:52px}
.intro{max-width:620px}
.intro .eyebrow{font-size:11px;color:var(--faint);letter-spacing:.3em;text-transform:uppercase;margin-bottom:26px}
.intro h2{font-size:clamp(28px,3.2vw,40px);font-weight:300;line-height:1.9;letter-spacing:.06em;margin:0 0 28px}
.intro p{color:var(--muted);line-height:2;margin:0 auto;font-size:13.5px;max-width:440px;font-weight:300}
.login-panel{width:min(360px,100%);padding-top:8px;border-top:1px solid var(--line)}
.login-panel h3{font-size:14px;font-weight:400;letter-spacing:.2em;margin:24px 0 6px}
.login-panel .hint{color:var(--faint);font-size:11.5px;margin:0 0 28px}
.password-panel{width:min(420px,100%);padding-top:8px;border-top:1px solid var(--line)}
.password-panel h3{font-size:14px;font-weight:400;letter-spacing:.2em;margin:24px 0 6px}
.password-panel .hint{color:var(--faint);font-size:11.5px;margin:0 0 28px}
.password-actions{display:flex;gap:12px;align-items:center;margin-top:22px}
.password-actions .primary{margin-top:0;flex:1}
label{display:block;color:var(--faint);font-size:11px;letter-spacing:.1em;margin:20px 0 8px;text-align:left}
input{
  width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;
  background:transparent;color:var(--ink);padding:8px 2px;outline:none;
  text-align:left;transition:border-color .2s;
}
input:focus{border-color:var(--seal)}
.primary{
  width:100%;margin-top:34px;border:1px solid var(--ink);border-radius:0;
  background:transparent;color:var(--ink);padding:13px;font-weight:300;
  letter-spacing:.2em;cursor:pointer;transition:background .2s,color .2s;
}
.primary:hover{background:var(--ink);color:#fff}
.primary:disabled{cursor:wait;opacity:.5}
.form-message{min-height:18px;color:var(--seal);font-size:11.5px;line-height:1.5;margin:12px 0 0}

.portal-head{text-align:center;padding:68px 0 44px}
.portal-head h2{font-size:clamp(24px,3vw,34px);font-weight:300;letter-spacing:.1em;margin:14px 0 0}
.section-kicker{font-size:11px;color:var(--faint);letter-spacing:.3em;text-transform:uppercase}
.account{display:flex;align-items:center;justify-content:center;gap:20px;color:var(--muted);font-size:12px;margin-top:16px}
.text-button{border:0;background:none;color:var(--muted);padding:4px;cursor:pointer;letter-spacing:.05em}
.admin-link{color:var(--seal);text-decoration:none;letter-spacing:.05em}

.grid{columns:2;column-gap:1px;background:var(--line)}
.card{
  background:var(--paper);break-inside:avoid;min-height:200px;padding:40px 34px;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
  margin-bottom:1px;border-left:2px solid transparent;
  transition:background .2s,border-color .2s,padding-left .2s;
}
.card:hover{background:#f1f1f1;border-left-color:var(--seal);padding-left:40px}
.card-no{font:11px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--faint);letter-spacing:.15em}
.card h3{font-size:19px;font-weight:600;line-height:1.6;margin:20px 0 12px;letter-spacing:.01em;transition:color .2s}
.card:hover h3{color:var(--seal-deep)}
.card p{color:var(--muted);font-size:13px;line-height:1.9;margin:0;font-weight:400}
.card-foot{margin-top:auto;padding-top:18px;color:var(--faint);font:10.5px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}

footer{margin-top:56px;padding-top:20px;border-top:1px solid var(--line);color:var(--faint);font-size:10.5px;display:flex;justify-content:space-between;letter-spacing:.03em}

@media(max-width:760px){
  .shell{width:min(100% - 32px,600px);padding-top:26px}
  .edition{display:none}
  .grid{columns:1}
  .card{padding:30px 24px}
  .card:hover{padding-left:24px}
  footer{gap:10px;flex-direction:column}
}