/* Account UI: standalone styles; do not inherit legacy dashboard overrides. */
:root {
  font-family:var(--body);
  color:var(--ink);
  background:var(--bg);
  font-synthesis:none;
  font-size:var(--text-body);
  line-height:1.5;
  color-scheme:light
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  min-height:100vh
}
a {
  color:inherit;
  text-decoration:none
}
button,input {
  font:inherit
}
button,a,input {
  -webkit-tap-highlight-color:transparent
}
button,a {
  touch-action:manipulation
}
button {
  cursor:pointer
}
button:disabled {
  cursor:wait;
  opacity:.55
}
.account-body :focus-visible {
  outline:3px solid var(--brand-deep);
  outline-offset:4px
}
[hidden] {
  display:none!important
}
h1,h2,p {
  margin:0
}
button {
  border:0
}
small {
  font-size:var(--text-secondary)
}
.account-header {
  height:64px;
  padding:0 32px;
  display:flex;
  align-items:center;
  gap:24px;
  background:var(--paper);
  border-bottom:1px solid var(--sand-light)
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:750;
  font-size:20px;
  letter-spacing:-.4px
}
.header-caption {
  font-size:var(--text-secondary);
  color:var(--muted);
  border-left:1px solid var(--sand-light);
  padding-left:24px
}
.account-home {
  margin-left:auto;
  font-size:var(--text-secondary);
  color:var(--muted)
}
.account-home span {
  margin-left:10px
}
.account-shell {
  width:min(1480px,calc(100% - 64px));
  margin:28px auto 0
}
.account-dashboard {
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:32px
}
.account-sidebar {
  padding:10px 22px 8px 0;
  border-right:1px solid var(--sand-light)
}
.identity {
  display:flex;
  gap:10px;
  align-items:center
}
.avatar {
  width:40px;
  height:40px;
  flex-shrink:0;
  border-radius:2px;
  display:grid;
  place-items:center;
  background:var(--sand-light);
  color:var(--brand-deep);
  font-weight:750;
  font-size:21px
}
.identity-text {
  min-width:0
}
.identity h2 {
  font-size:var(--text-secondary);
  overflow-wrap:anywhere;
  line-height:1.35
}
.signed-in {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:var(--text-badge);
  color:var(--muted);
  margin-top:3px
}
.signed-in i {
  width:5px;
  height:5px;
  background:var(--brand-deep);
  border-radius:2px
}
.identity-email {
  font-size:var(--text-secondary);
  color:var(--muted);
  overflow-wrap:anywhere;
  margin:10px 0 22px
}
.account-nav {
  display:grid;
  gap:5px
}
.account-nav a {
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:2px;
  font-size:var(--text-secondary);
  padding:11px 12px;
  color:var(--muted)
}
.account-nav a span {
  font-size:17px;
  width:18px;
  text-align:center
}
.account-nav a:hover {
  background:var(--sand-light);
  color:var(--brand-deep)
}
.account-nav a[aria-current] {
  color:var(--brand-deep);
  background:var(--sand-light);
  font-weight:650
}
.logout-button {
  margin-top:24px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:none;
  border-top:1px solid var(--sand-light);
  padding:17px 12px 8px;
  color:var(--muted);
  font-size:var(--text-secondary)
}
.logout-button:hover {
  color:var(--muted)
}
.account-content {
  min-width:0
}
.overview-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:20px
}
.section-label {
  font-size:var(--text-decorative);
  letter-spacing:1.7px;
  font-weight:650;
  color:var(--muted)
}
.overview-heading h1 {
  font-size:24px;
  letter-spacing:-.6px;
  line-height:1.5;
  margin-top:3px
}
.btn {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  min-height:38px;
  padding:9px 16px;
  border-radius:2px;
  font-weight:600;
  font-size:var(--text-secondary);
  white-space:nowrap;
  transition:background .15s
}
.btn-primary {
  background:var(--brand);
  color:var(--ink);
  border:1px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink)
}
.btn-primary:hover {
  background:var(--brand);
  color:var(--ink)
}
.btn-quiet,.btn-secondary {
  background:var(--paper);
  border:1px solid var(--sand-light);
  color:var(--ink)
}
.btn-quiet:hover,.btn-secondary:hover {
  background:var(--sand-light)
}
.summary-grid {
  display:grid;
  grid-template-columns:1fr 1.35fr 1fr;
  gap:16px;
  margin-bottom:16px
}
.summary-card {
  background:var(--paper);
  border:1px solid var(--sand-light);
  border-radius:2px;
  padding:18px 20px;
  min-width:0;
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  gap:10px
}
.metric-label {
  font-size:var(--text-secondary);
  color:var(--muted)
}
.summary-card strong {
  font-family:var(--serif);
  font-size:25px;
  line-height:1.25;
  font-weight:650;
  letter-spacing:-.6px;
  overflow-wrap:anywhere;
  max-width:100%
}
.summary-card a {
  font-size:var(--text-secondary);
  color:var(--brand-deep);
  display:flex;
  gap:12px
}
.summary-card small {
  color:var(--muted)
}
.metric-value {
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap
}
.metric-value>span {
  font-size:var(--text-secondary);
  color:var(--muted)
}
.metric-value b {
  font-weight:500
}
.detail-grid {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:16px
}
.quota-card,.client-card {
  border:1px solid var(--sand-light);
  border-radius:2px;
  padding:22px;
  background:var(--paper);
  min-width:0
}
.card-heading {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.card-heading h2 {
  font-size:var(--text-secondary);
  font-weight:650
}
.period-label {
  font-size:var(--text-secondary);
  padding:3px 9px;
  border-radius:2px;
  background:var(--sand-light);
  color:var(--muted)
}
.quota-reading {
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:18px 0 12px
}
.quota-reading strong {
  font-size:32px;
  line-height:1.2;
  letter-spacing:-1px
}
.quota-reading span {
  font-size:var(--text-secondary);
  color:var(--muted)
}
.usage-bar {
  height:7px;
  overflow:hidden;
  background:var(--sand-light);
  border-radius:2px
}
.usage-bar i {
  display:block;
  height:100%;
  background:var(--brand-deep);
  width:0;
  max-width:100%;
  border-radius:2px
}
.quota-card>p {
  color:var(--muted);
  font-size:var(--text-secondary);
  margin-top:13px;
  overflow-wrap:anywhere
}
.client-card {
  background:var(--sand-light);
  border-color:var(--sand-light);
  display:flex;
  gap:18px;
  align-items:flex-start
}
.client-icon {
  flex-shrink:0;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  background:var(--paper);
  color:var(--brand-deep);
  border-radius:2px;
  font-size:29px
}
.client-copy {
  min-width:0
}
.client-copy .section-label {
  color:var(--brand-deep)
}
.client-copy h2 {
  font-size:19px;
  letter-spacing:-.4px;
  margin:5px 0 8px
}
.client-copy p {
  font-size:var(--text-secondary);
  line-height:1.8;
  color:var(--muted);
  max-width:380px;
  margin-bottom:18px
}
.sync-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:16px 2px 0;
  font-size:var(--text-secondary);
  flex-wrap:wrap
}
.form-message {
  font-size:var(--text-secondary);
  color:var(--muted);
  overflow-wrap:anywhere;
  min-height:18px
}
.form-message.error {
  color:var(--muted)
}
.api-status {
  color:var(--muted);
  font-size:var(--text-secondary)
}
.api-status.online {
  color:var(--muted)
}
.api-status.offline {
  color:var(--muted)
}
.account-footer {
  text-align:center;
  color:var(--muted);
  font-size:var(--text-copyright);
  padding:24px 16px
}
.account-footer span {
  margin:0 8px
}
.account-loading {
  display:none;
  min-height:300px;
  place-items:center;
  font-size:var(--text-secondary);
  color:var(--muted)
}
html.has-session .account-loading {
  display:grid
}
html.has-session .account-shell {
  display:none
}
.auth-layout:has(#authPanel[hidden]) {
  display:none
}
/* Stable login / register / reset surface with shared password input. */
.auth-layout {
  padding-block:40px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 420px;
  gap:60px;
  max-width:990px;
  margin:24px auto;
  align-items:start
}
.auth-mark {
  font-weight:700;
  color:var(--brand-deep);
  letter-spacing:3px;
  font-size:var(--text-decorative);
  margin-bottom:20px
}
.auth-mark span {
  margin:0 8px;
  color:var(--line)
}
.auth-intro h1 {
  font-size:36px;
  letter-spacing:-1px;
  margin-bottom:16px
}
.auth-intro p {
  font-size:var(--text-body);
  color:var(--muted);
  line-height:1.9;
  max-width:360px
}
.auth-points {
  display:flex;
  gap:18px;
  font-size:var(--text-secondary);
  color:var(--muted);
  margin-top:22px
}
.auth-card {
  background:var(--paper);
  border:1px solid var(--ink);
  border-top:3px solid var(--ink);
  box-shadow:6px 6px 0 var(--sand);
  border-radius:2px;
  padding:24px;
  min-height:550px
}
.account-tabs {
  display:flex;
  padding:4px;
  background:var(--sand-light);
  border-radius:2px;
  margin-bottom:16px
}
.account-tab {
  flex:1;
  padding:8px 4px;
  font-size:var(--text-secondary);
  color:var(--muted);
  background:none;
  border-radius:2px
}
.account-tab.active {
  background:var(--paper);
  color:var(--brand-deep);
  box-shadow:3px 3px 0 var(--sand)
}
.auth-hint {
  font-size:var(--text-secondary);
  color:var(--muted);
  margin-bottom:16px
}
#accountForm {
  display:grid;
  gap:12px
}
.auth-card label {
  display:grid;
  gap:5px;
  font-size:var(--text-secondary);
  color:var(--muted)
}
.auth-card input {
  width:100%;
  min-width:0;
  padding:9px 11px;
  height:38px;
  border:1px solid var(--sand-light);
  background:var(--paper);
  border-radius:2px;
  color:var(--ink);
  outline-offset:3px
}
.auth-card input:focus {
  border-color:var(--brand-deep);
  box-shadow:3px 3px 0 var(--sand)
}
.auth-card input::placeholder {
  color:var(--muted)
}
.code-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) 116px;
  align-items:end;
  gap:8px
}
.code-row button {
  padding:8px;
  font-size:var(--text-secondary)
}
.captcha-row { grid-template-columns:minmax(0,1fr) 170px; }
.captcha-image-controls { display:grid; gap:6px; min-width:0; }
.captcha-image-controls img { display:block; width:170px; height:52px; object-fit:contain; }
.captcha-image-controls img[hidden], .captcha-status[hidden] { display:none; }
.captcha-status { min-height:52px; display:grid; align-items:center; font-size:var(--text-secondary); color:var(--muted); }
@media(max-width:380px) {
  .captcha-row { grid-template-columns:minmax(0,1fr); }
  .captcha-image-controls { grid-template-columns:170px minmax(0,1fr); align-items:center; }
}
.auth-submit {
  width:100%;
  margin-top:3px
}
.auth-card .form-message {
  line-height:1.5
}
@media(min-width:1600px) {
  .account-shell {
    margin-top:36px
  }
  .summary-card {
    padding:22px 24px
  }
  .quota-card,.client-card {
    padding:26px
  }
}
@media(max-width:1100px) {
  .account-shell {
    width:calc(100% - 40px);
    margin-top:20px
  }
  .account-dashboard {
    grid-template-columns:164px minmax(0,1fr);
    gap:20px
  }
  .account-sidebar {
    padding-right:16px
  }
  .summary-grid,.detail-grid {
    gap:12px
  }
  .summary-card {
    padding:16px
  }
  .quota-card,.client-card {
    padding:18px
  }
  .client-icon {
    display:none
  }
  .summary-card strong {
    font-size:22px
  }
  .auth-layout {
    gap:30px
  }
  .header-caption {
    display:none
  }
}
@media(max-width:760px) {
  .account-header {
    height:56px;
    padding:0 20px
  }
  .brand {
    font-size:18px
  }
  .account-shell {
    width:calc(100% - 32px);
    margin-top:16px
  }
  .account-dashboard {
    grid-template-columns:1fr;
    gap:18px
  }
  .account-sidebar {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    padding:0 0 14px;
    border-right:0;
    border-bottom:1px solid var(--sand-light);
    align-items:center;
    gap:10px
  }
  .identity-email {
    margin:0;
    grid-row:2;
    grid-column:1/-1
  }
  .account-nav {
    grid-column:1/-1;
    display:flex;
    gap:5px;
    flex-wrap:wrap;
    grid-row:3
  }
  .account-nav a {
    padding:8px 10px;
    font-size:var(--text-secondary)
  }
  .account-nav a span {
    display:none
  }
  .logout-button {
    margin:0;
    padding:8px;
    border:0;
    width:auto;
    gap:12px;
    grid-column:2;
    grid-row:1
  }
  .overview-heading {
    margin-bottom:14px
  }
  .overview-heading h1 {
    font-size:22px
  }
  .summary-grid {
    gap:8px
  }
  .summary-card {
    padding:13px 10px;
    gap:9px
  }
  .summary-card strong {
    font-size:20px
  }
  .summary-card a {
    gap:3px;
    font-size:var(--text-secondary)
  }
  .metric-label,.summary-card small {
    font-size:var(--text-secondary)
  }
  .metric-value {
    gap:3px
  }
  .metric-value>span {
    font-size:var(--text-secondary)
  }
  .detail-grid {
    grid-template-columns:1fr
  }
  .quota-reading {
    margin-top:12px
  }
  .quota-card {
    padding:18px
  }
  .client-card {
    padding:20px
  }
  .client-icon {
    display:grid
  }
  .sync-row {
    margin-top:12px;
    gap:6px
  }
  .auth-layout {
    display:block;
    max-width:420px;
    margin:0 auto
  }
  .auth-intro {
    display:none
  }
  .auth-card {
    padding:20px;
    min-height:540px
  }
  .account-footer {
    padding:20px 12px
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important
  }
}
/* Keep sync feedback readable without changing the account visual system. */
#profileSyncStatus { grid-column:1/-1; }
@media(max-width:600px) {
  .account-dashboard .summary-grid { grid-template-columns:minmax(0,1fr); }
  .account-dashboard .summary-card { padding:16px; }
  .account-dashboard .summary-card strong { font-size:24px; }
  .account-dashboard .metric-label,
  .account-dashboard .summary-card small,
  .account-dashboard .summary-card a { font-size:var(--text-secondary); }
}

/* Cards and forms retain the same visual hierarchy at every breakpoint. */
.account-body { font-size:var(--text-body); display:flex; flex-direction:column; min-height:100vh; }
.account-shell { flex:1; }
.account-header,.account-footer { flex-shrink:0; }
.card-heading h2 { font-size:var(--text-workflow); line-height:1.4; }
.auth-hint,.auth-points,.client-copy p,.quota-card>p { line-height:var(--leading-secondary); }
.account-footer a { font-size:var(--text-small); }

/* One compact health entry in the account header; never a separate mobile status toolbar. */
.account-header .ws-status-header{flex:0 0 auto;min-width:0;max-width:none;margin:0 0 0 auto;padding:0;border:0;background:transparent}
.account-header .ws-status-header>.ws-status-head,.account-header .ws-status-header>.ws-status-grid,.account-header .ws-status-header>small{display:none}
.account-header .ws-status.ws-status-header .ws-status-compact{display:flex;align-items:center;justify-content:flex-end;gap:8px;font:13px/1.5 var(--body)}
.account-header .ws-status-compact span{white-space:nowrap;color:var(--muted)}
.account-header .ws-status-compact span[data-state=ok]{color:#287444}
.account-header .ws-status-compact span[data-state=bad]{color:#a53f24}
.account-header .ws-status-header .ws-status-compact a{display:flex;align-items:center;min-height:32px;color:var(--muted);border:0;text-decoration:none}
.account-header .ws-status-compact a:hover{text-decoration:underline;text-underline-offset:4px}
.account-header .ws-status-compact button{min-width:28px;min-height:32px;padding:0;font-size:20px}
@media(max-width:1100px){.account-header .header-caption{display:none}}
@media(max-width:760px){
 .account-header{height:60px;min-height:60px;display:flex;gap:8px;padding:0 16px}
 .account-header .brand{font-size:18px;gap:7px;flex-shrink:0}
 .account-header .brand img{width:24px;height:24px}
 .account-header>.ws-status.ws-status-header{padding:0;border:0;margin:0 0 0 auto}
 .account-header .ws-status.ws-status-header .ws-status-compact{justify-content:flex-end;gap:4px;font-size:12px}
 .account-header .ws-status-header .ws-status-compact a{min-height:32px}
 .account-header .account-home{margin:0;flex-shrink:0;font-size:0}
 .account-header .account-home::before{content:"官网";font-size:12px}
 .account-header .account-home span{font-size:14px;margin-left:4px}
}

/* Keep health and home together on the right; do not split their free space. */
.account-header .ws-status-header + .account-home{margin-left:0;white-space:nowrap;flex-shrink:0}

.auth-intro { margin-top: 40px; }