/* Legal, consent, logout, error, transition and payment result pages. Uses shared tokens from style.css only. */

/* ---- legal ---- */
.legal-layout{
  max-width:var(--page-max);margin:0 auto;display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;align-items:start;
  padding:48px var(--gutter-r) 64px var(--gutter);
  box-sizing:content-box;
}
.legal-toc{position:sticky;top:24px;padding:8px 0}
.legal-toc>p{font-size:var(--fs-12);font-weight:500;color:var(--ink-3);margin:0 0 8px}
.legal-toc a{display:block;color:var(--ink-2);font-size:var(--fs-14);line-height:20px;padding:8px 0;text-decoration:none}
.legal-toc a:hover{color:var(--brand)}
.legal-page{padding:40px 44px;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-4);box-shadow:var(--sh-1);line-height:1.85}
.legal-page h1{font-size:var(--fs-30);font-weight:600;line-height:1.3;margin:0 0 12px}
.legal-intro{color:var(--ink-2);font-size:var(--fs-15);margin:0 0 16px}
.legal-updated{padding-bottom:24px;border-bottom:1px solid var(--border);color:var(--ink-3);font-size:var(--fs-12);line-height:1.8;margin:0;display:flex;flex-wrap:wrap;gap:0 20px}
.legal-sec{padding-top:28px;scroll-margin-top:24px}
.legal-sec h2{font-size:var(--fs-17);font-weight:600;margin:0 0 10px;color:var(--ink)}
.legal-sec h2 .legal-num{color:var(--ink-3);font-weight:500;margin-right:8px;font-variant-numeric:tabular-nums}
.legal-sec p{font-size:var(--fs-15);color:var(--ink-2);margin:0 0 12px;overflow-wrap:anywhere}
.legal-sec p b{color:var(--ink);font-weight:600}
.legal-notice{padding-top:20px;border-top:1px solid var(--border);margin-top:28px;font-size:var(--fs-14);color:var(--ink-2)}

/* ---- state pages ---- */
.state-page{
  max-width:var(--page-max);margin:0 auto;display:flex;justify-content:center;align-items:center;
  min-height:calc(100dvh - 200px);padding:48px var(--gutter-r) 64px var(--gutter);box-sizing:content-box;
}
.state-card{width:min(560px,100%);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-4);overflow:hidden;box-shadow:var(--sh-2)}
.state-art{position:relative;height:160px;overflow:hidden;background:var(--art-placeholder);border-bottom:1px solid var(--border)}
.state-art::before{
  content:"";position:absolute;top:0;bottom:-8px;left:50%;width:312px;margin-left:-206px;
  background:url("/static/img/identity-hero-v1.webp") center top/cover no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 35% 66% at 66% 42%,#000 60%,transparent 100%);
  mask-image:radial-gradient(ellipse 35% 66% at 66% 42%,#000 60%,transparent 100%);
  animation:art-in var(--dur-3) var(--ease) both;
}
@keyframes art-in{from{opacity:0}to{opacity:1}}
:root[data-theme="dark"] .state-art::before{opacity:.62;animation:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .state-art::before{opacity:.62;animation:none}}
.state-content{padding:32px 40px 36px;text-align:center;display:flex;align-items:center;flex-direction:column;gap:14px}
.state-content>.wordmark{font-size:var(--fs-15);color:var(--ink-2)}
.state-content>.wordmark .mk{width:22px;height:22px;border-radius:6px}
.state-icon{
  display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--r-3);
  background:var(--brand-soft);color:var(--brand);
}
.state-icon.danger{background:color-mix(in srgb,var(--danger) 11%,transparent);color:var(--danger)}
.state-icon.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.state-icon .spinner{width:22px;height:22px;border-width:2px}
.state-content h1{font-size:var(--fs-24);line-height:1.35;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.state-content>p,.state-description{font-size:var(--fs-15);line-height:1.75;color:var(--ink-2);max-width:42ch;margin:0;overflow-wrap:anywhere}
.state-content .state-note{font-size:var(--fs-14);color:var(--ink-3)}
.state-actions{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:6px;flex-wrap:wrap}
.state-detail{
  width:100%;padding:10px 14px;border-radius:var(--r-2);background:var(--surface-2);
  color:var(--ink-3);font-size:var(--fs-12);line-height:1.7;text-align:left;overflow-wrap:anywhere;
}
.state-detail.code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.state-detail.code::before{content:"错误代码：";font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
.state-progress{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--brand);font-size:var(--fs-14)}
.state-feedback{font-size:var(--fs-14);color:var(--danger);margin:0}
.state-feedback:empty{display:none}

/* ---- payment ---- */
.pay-amount{font-size:var(--fs-40);line-height:1.2;letter-spacing:-.02em;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.pay-meta{
  display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin:0;padding:16px 0;width:100%;text-align:left;font-size:var(--fs-14);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.pay-meta dt{color:var(--ink-3)}
.pay-meta dd{margin:0;text-align:right;color:var(--ink);overflow-wrap:anywhere}
.pay-count{font-size:var(--fs-14);color:var(--ink-3);margin:0}
.pay-count[hidden],#prPause[hidden]{display:none !important}

/* ---- consent ---- */
.consent-card{
  width:min(480px,100%);padding:32px 36px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-4);box-shadow:var(--sh-2);
}
.consent-trust{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:24px}
.consent-client-icon{display:block;width:56px;height:56px;border-radius:14px;object-fit:cover;flex:none}
.consent-client-initial{
  display:flex;align-items:center;justify-content:center;background:var(--brand-soft);color:var(--brand);
  font-size:var(--fs-24);font-weight:600;text-transform:uppercase;
}
.consent-trust img.consent-client-icon,.consent-idp-icon{box-shadow:0 0 0 1px var(--border)}
.consent-idp-icon{width:56px;height:56px;border-radius:14px;object-fit:cover;flex:none}
.consent-trust-link{
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  color:var(--ink-3);background:var(--surface-2);
}
.consent-title{text-align:center;font-size:var(--fs-24);font-weight:600;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.consent-title b{font-weight:600;color:var(--brand)}
.consent-sub{text-align:center;color:var(--ink-2);font-size:var(--fs-15);line-height:1.7;margin:10px 0 16px}
.consent-scope{list-style:none;margin:0 0 20px;padding:14px 16px;border-radius:var(--r-2);background:var(--surface-2);color:var(--ink);font-size:var(--fs-15)}
.consent-scope li{display:flex;align-items:center;gap:10px;padding:2px 0}
.consent-scope li .ic-svg{color:var(--ok)}
.consent-account{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:24px;border:1px solid var(--border);border-radius:var(--r-3)}
.consent-avatar{
  width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--brand-soft);color:var(--brand);
}
.consent-account-copy{flex:1;min-width:0;overflow-wrap:anywhere;display:flex;flex-direction:column}
.consent-account-copy>b{font-size:var(--fs-15);font-weight:600;color:var(--ink)}
.consent-account .sub{font-size:var(--fs-12);color:var(--ink-3)}
.consent-profile-link{flex:none;min-height:44px;padding:0 4px}
.consent-actions{display:flex;flex-direction:column;gap:12px}
.consent-actions .btn{width:100%}
.consent-switch{text-align:center;margin:16px 0 0}
.consent-switch .link{min-height:44px}

@media (max-width:900px){
  .legal-layout{grid-template-columns:160px minmax(0,1fr);gap:28px}
  .legal-page{padding:32px}
}
@media (max-width:599px){
  .legal-layout{display:flex;flex-direction:column;gap:20px;padding-top:24px;padding-bottom:40px}
  .legal-toc{position:static;padding:0;width:100%;display:flex;flex-wrap:wrap;gap:8px}
  .legal-toc>p{width:100%;margin:0}
  .legal-toc a{
    display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:var(--fs-14);
    border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);
  }
  .legal-toc a .legal-num{display:none}
  .legal-page{padding:24px 20px;border-radius:var(--r-3);width:100%}
  .legal-page h1{font-size:var(--fs-24)}
  .state-page{padding-top:24px;padding-bottom:40px;min-height:calc(100dvh - 240px);align-items:flex-start}
  .state-art{height:132px}
  .state-art::before{width:258px;margin-left:-170px}
  .state-content{padding:28px 20px 28px;gap:12px}
  .state-content h1,.consent-title{font-size:var(--fs-20)}
  .state-card,.consent-card{border-radius:var(--r-3)}
  .state-actions{width:100%;flex-direction:column;align-items:stretch;gap:10px}
  .state-actions .btn{width:100%}
  .pay-amount{font-size:var(--fs-30)}
  .consent-card{padding:28px 20px 24px}
}