/* Reader access uses the same paper, type and geometric details as the site. */

.header-account { display:flex; align-items:center; gap:8px; margin-left:22px; flex:none; }

.header-account form { margin:0; }

.header-account-button { display:inline-flex; align-items:center; justify-content:center; min-width:48px; min-height:44px; padding:10px 14px; border:1px solid var(--line); background:transparent; color:var(--ink); text-decoration:none; font:11px/1 var(--mono); cursor:pointer; transition:background .2s,color .2s,border-color .2s; }

.header-login { border-color:transparent; }

.header-register { background:var(--ink); border-color:var(--ink); color:var(--paper); }

.header-account-button:is(:hover,:focus-visible) { color:var(--paper); background:var(--teal); border-color:var(--teal); }

.header-account-button[aria-current="page"] { border-color:var(--teal); }

.header-register:disabled { color:var(--muted); background:transparent; border-color:var(--line); cursor:default; }

.header-account-status { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font:10px var(--mono); white-space:nowrap; }

.header-account-status > span { width:5px; height:5px; background:var(--teal); border-radius:50%; }

.account-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.site-header .site-nav { margin-right:28px; gap:28px; }



.account-shell { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin-top:46px; margin-bottom:82px; border:1px solid var(--line); }

.account-identity { position:relative; display:flex; flex-direction:column; overflow:hidden; padding:40px 42px 26px; background:var(--teal); color:var(--paper); isolation:isolate; }

.account-identity::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 60% 35%,rgba(216,244,92,.08),transparent 60%),linear-gradient(150deg,rgba(10,20,23,.04),rgba(10,20,23,.3)); }

.account-overline { margin:0 0 27px; color:rgba(242,244,239,.65); font:10px/1.4 var(--mono); letter-spacing:.13em; }

.account-wordmark { font-size:clamp(46px,5.6vw,78px); font-weight:700; font-style:italic; line-height:1; letter-spacing:-.065em; }

.account-wordmark > span { color:var(--acid); }

.account-wordmark > i { color:var(--orange); font-style:normal; }

.account-art { width:100%; max-width:480px; margin:10px auto 4px; color:var(--acid); }

.account-art svg { display:block; width:100%; height:auto; overflow:visible; }

.account-art.page-motion { max-width:480px; aspect-ratio:22/17; color:var(--acid); }

.account-art-grid { opacity:.085; }

.account-art-orbit { opacity:.8; }

.account-art-scan { opacity:.45; }

.account-identity-copy { margin-top:auto; }

.account-identity-index { display:block; margin-bottom:15px; color:var(--acid); font:10px/1.5 var(--mono); letter-spacing:.1em; }

.account-identity h2 { margin-bottom:13px; font-size:26px; line-height:1.25; letter-spacing:-.035em; font-weight:500; }

.account-identity-copy p { max-width:360px; margin:0; color:rgba(242,244,239,.72); font-size:13px; line-height:1.8; }

.account-identity-footer { display:flex; justify-content:space-between; gap:14px; margin-top:32px; padding-top:19px; border-top:1px solid rgba(242,244,239,.2); color:rgba(242,244,239,.6); font:9px/1.5 var(--mono); letter-spacing:.09em; }

.account-identity-footer > span:last-child { color:var(--orange); font-size:17px; line-height:1; }

.account-panel { display:flex; flex-direction:column; min-width:0; padding:30px 54px 28px; background:rgba(255,255,255,.25); }

.account-back { display:inline-flex; align-items:center; align-self:flex-start; gap:9px; min-height:44px; margin-bottom:30px; color:var(--muted); text-decoration:none; font:10px var(--mono); }

.account-back > span { color:var(--orange); font-size:16px; }

.account-step { margin-bottom:15px; color:var(--teal); font:10px/1.3 var(--mono); letter-spacing:.12em; }

.account-panel h1 { margin-bottom:16px; font-size:clamp(32px,3.6vw,46px); line-height:1.15; font-weight:600; letter-spacing:-.055em; overflow-wrap:anywhere; }

.account-intro { margin-bottom:28px; color:#586463; font-size:13px; line-height:1.8; }

.account-form { display:grid; gap:22px; margin:0; }

.account-field { display:grid; gap:9px; min-width:0; }

.account-field label { color:var(--ink); font:500 12px/1.5 var(--sans); }

.account-field input { display:block; width:100%; min-width:0; min-height:50px; border:1px solid rgba(10,20,23,.23); border-radius:0; padding:13px 14px; background:rgba(244,238,227,.65); color:var(--ink); font:14px/1.5 var(--sans); transition:border-color .2s,background .2s; }

.account-field input::placeholder { color:var(--muted); opacity:.8; }

.account-field input:is(:hover,:focus) { border-color:var(--teal); background:var(--paper); }

.account-field input:focus-visible { outline-offset:3px; }

.account-field.has-error input { border-color:#9a4230; }

.account-help { color:var(--muted); font-size:11px; line-height:1.65; }

.account-help ul { margin:0; padding-left:17px; }

.account-field-error { color:#9a4230; font-size:12px; line-height:1.6; }

.account-field-error ul,.account-error ul { margin:0; padding:0; list-style:none; }

.account-error,.account-message { margin:0 0 24px; padding:13px 15px; border-left:2px solid var(--orange); background:rgba(242,123,81,.08); color:#763e31; font-size:12px; line-height:1.75; overflow-wrap:anywhere; }

.account-message { border-color:var(--teal); background:rgba(29,107,105,.07); color:var(--teal); }

.account-form > .account-error { margin:0; }

.account-form-options { display:flex; justify-content:flex-end; margin-top:-12px; }

.account-panel a:not(.button) { transition:color .2s; }

.account-form-options a,.account-secondary a { color:var(--teal); font-size:11px; line-height:1.6; text-decoration:none; text-underline-offset:4px; }

.account-panel a:not(.button):is(:hover,:focus-visible) { color:var(--ink); text-decoration:underline; }

.account-submit { width:100%; justify-content:space-between; min-height:52px; border:0; border-radius:0; margin:0; padding:16px 19px; cursor:pointer; font:500 12px var(--sans); letter-spacing:.03em; }

.account-secondary { margin-top:24px; padding-top:19px; border-top:1px solid var(--line); }

.account-secondary p { margin:0 0 9px; color:var(--muted); font-size:12px; line-height:1.7; }

.account-secondary p a { margin-left:10px; font-size:12px; }

.account-secondary > a { display:inline-flex; align-items:center; min-height:44px; }

.account-secondary .account-service-note { margin:0; font-size:11px; }

.account-panel-footer { display:flex; align-items:center; gap:7px; margin-top:auto; padding-top:38px; color:var(--muted); font:9px/1.5 var(--mono); letter-spacing:.05em; }

.account-footer-dot { flex:none; width:4px; height:4px; background:var(--orange); border-radius:50%; }

.account-notice { display:flex; align-items:flex-start; gap:17px; margin:0 0 32px; padding:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.account-notice-symbol { flex:none; color:var(--teal); font:28px/1 var(--mono); }

.account-notice p { margin:0; color:#586463; font-size:13px; line-height:1.8; }



@media (max-width:1100px) {

  .site-header .github-link { display:none; }

  .site-header .site-nav { gap:19px; margin-right:0; }

  .header-account { margin-left:20px; }

  .account-identity { padding:35px 30px 26px; }

  .account-panel { padding:26px 35px; }

}

@media (max-width:800px) {

  .site-header .site-nav { gap:0; margin-right:0; }

  .header-account { order:1; margin-left:auto; margin-right:5px; gap:3px; }

  .header-account-button { min-width:44px; padding:10px 12px; }

  .header-account-status { font-size:9px; }

  .account-shell { margin-top:24px; margin-bottom:56px; grid-template-columns:minmax(0,1fr); }

  .account-panel { grid-row:1; padding:24px 32px 30px; }

  .account-back { margin-bottom:23px; }

  .account-panel h1 { font-size:38px; }

  .account-panel-footer { padding-top:30px; }

  .account-identity { padding:26px 32px; border-top:1px solid var(--line); }

  .account-overline { margin-bottom:18px; font-size:9px; }

  .account-wordmark { font-size:54px; }

  .account-art.page-motion { max-width:320px; margin:0 auto; }

  .account-identity-copy { margin-top:0; }

  .account-identity h2 { font-size:24px; }

  .account-identity-footer { margin-top:22px; }

}

@media (max-width:400px) {

  .header-account { gap:0; margin-right:0; }

  .header-account-button { padding:10px 8px; }

  .header-account-status { gap:4px; }

  .account-panel,.account-identity { padding-left:22px; padding-right:22px; }

  .account-panel h1 { font-size:32px; }

  .account-intro { font-size:12px; }

  .account-field input { font-size:16px; }

  .account-wordmark { font-size:46px; }

  .account-identity-footer { font-size:8px; letter-spacing:.04em; }

}

@media (prefers-reduced-motion:reduce) {

  .header-account-button,.account-field input,.account-panel a { transition:none; }

}


/* 登录后的读者标识：首字头像 + 用户名（v2.0） */
.reader-chip { display:inline-flex; align-items:center; gap:8px; max-width:220px; padding:4px 12px 4px 4px; border:1px solid var(--line); border-radius:999px; background:var(--paper); }
.reader-avatar { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; flex:none; border-radius:50%; background:var(--teal); color:var(--acid); font:600 13px/1 var(--mono); letter-spacing:.02em; }
.reader-name { font:11px/1 var(--mono); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.subpage-nav-dock .reader-chip { margin-left:6px; border-color:transparent; background:rgba(29,107,105,.1); }
.subpage-nav-dock .reader-chip:hover { background:rgba(29,107,105,.16); }
@media (max-width:640px) { .reader-name { display:none; } .reader-chip { padding:4px; } }

/* 登录页的站长入口（v2.0） */
.account-admin-entry { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px 0 6px; padding:12px 16px; border:1px dashed var(--line); border-radius:6px; font:12px/1.4 var(--mono); color:var(--muted); }
.account-admin-entry a { color:var(--teal); text-decoration:none; font-weight:500; }
.account-admin-entry a:is(:hover,:focus-visible) { text-decoration:underline; }