/* 独立站点管理页。 */
:root { --ca-ink:#20304a; --ca-muted:#66768c; --ca-line:#e1e6ee; --ca-bg:#f3f5f8; --ca-accent:#3f5a7a; --ca-error:#a24231; --ca-good:#286a4d; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--ca-ink); background:var(--ca-bg); font:16px/1.55 "PingFang SC","Microsoft YaHei",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; color:inherit; }
button { cursor:pointer; }
a { color:var(--ca-accent); text-decoration:none; }
button,input,a,summary { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #829cb8; outline-offset:3px; }
button:disabled { opacity:.55; cursor:wait; }
.ca-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; }
.ca-skip { position:fixed; z-index:20; top:10px; left:10px; padding:10px 14px; background:#fff; border-radius:10px; transform:translateY(-160%); }
.ca-skip:focus { transform:translateY(0); }
.ca-header { display:flex; align-items:center; gap:14px; padding:12px max(16px,calc((100vw - 1120px)/2)); border-bottom:1px solid var(--ca-line); background:#fff; }
.ca-back { flex:none; padding:9px 12px; border:1px solid var(--ca-line); border-radius:10px; font-size:14px; font-weight:700; }
.ca-brand { display:flex; flex-direction:column; min-width:0; }
.ca-brand b { font-size:16px; }
.ca-brand small { font-size:12px; color:var(--ca-muted); }
.ca-logout { margin-left:auto; }
.ca-shell { max-width:1152px; margin:auto; padding:24px 16px 64px; }
.ca-card { min-width:0; padding:22px; border:1px solid var(--ca-line); border-radius:18px; background:#fff; box-shadow:0 5px 18px rgba(38,50,70,.035); }
h1,h2,p { margin:0; }
h1 { font-size:24px; line-height:1.4; overflow-wrap:anywhere; }
h2 { font-size:19px; line-height:1.4; }
.ca-kicker { display:block; margin-bottom:4px; color:var(--ca-accent); font-size:12px; font-weight:800; letter-spacing:.06em; }
.ca-muted { color:var(--ca-muted); }
.ca-hint { color:var(--ca-muted); font-size:13px; overflow-wrap:anywhere; }
.ca-lead { margin:10px 0 16px; }
.ca-primary,.ca-secondary,.ca-danger { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:9px 15px; border:1px solid var(--ca-line); border-radius:10px; background:#fff; font-size:14px; font-weight:750; line-height:1.4; }
.ca-primary { border-color:var(--ca-accent); color:#fff; background:var(--ca-accent); }
.ca-secondary { color:var(--ca-accent); }
.ca-danger { color:var(--ca-error); border-color:#e8cec7; }
.ca-primary:hover:not(:disabled) { background:#2d4460; }
.ca-secondary:hover:not(:disabled) { background:#f2f6fb; }
.ca-danger:hover:not(:disabled) { background:#fff4ef; }
.ca-field { display:flex; flex-direction:column; min-width:0; gap:6px; font-size:14px; font-weight:650; }
.ca-field input { width:100%; min-width:0; min-height:44px; padding:9px 12px; border:1px solid #cbd3df; border-radius:10px; background:#fff; font-weight:400; }
.ca-field input[readonly] { background:#f7f9fc; }
.ca-login { max-width:510px; margin:40px auto; padding:28px; }
.ca-login .ca-muted { margin:12px 0 24px; font-size:14px; }
.ca-login form { display:flex; flex-direction:column; gap:12px; }
.ca-login .ca-primary { align-self:flex-start; margin-top:6px; }
.ca-status { min-height:22px; margin-top:12px; color:var(--ca-good); font-size:14px; font-weight:650; overflow-wrap:anywhere; }
.ca-status.is-error { color:var(--ca-error); }
.ca-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ca-overview { font-size:15px; font-weight:650; }
.ca-page-status { margin:8px 0 16px; }
.ca-page-status:not(:empty) { position:sticky; top:8px; z-index:5; padding:10px 14px; border:1px solid var(--ca-line); border-radius:10px; background:#fff; box-shadow:0 4px 14px rgba(38,50,70,.06); }
.ca-layout { display:grid; grid-template-columns:270px minmax(0,1fr); gap:18px; align-items:start; }
.ca-families { padding:18px 14px; }
.ca-families h2 { padding:0 4px; }
.ca-search { margin:14px 0; }
.ca-family-list { display:flex; flex-direction:column; gap:6px; max-height:65vh; overflow-y:auto; padding:3px; }
.ca-family-button { width:100%; display:flex; flex-direction:column; gap:3px; padding:12px; border:1px solid transparent; border-radius:11px; background:#fff; text-align:left; }
.ca-family-button:hover { background:#f6f8fb; }
.ca-family-button[aria-current="true"] { border-color:#b8cbe0; background:#edf3fa; }
.ca-family-button b { font-size:15px; overflow-wrap:anywhere; }
.ca-family-button small { color:var(--ca-muted); font-size:12px; }
.ca-detail { display:flex; flex-direction:column; min-width:0; gap:16px; }
.ca-detail h1 { margin-bottom:5px; }
.ca-placeholder { padding:42px 22px; color:var(--ca-muted); text-align:center; }
.ca-edit-name { margin-top:18px; }
summary { width:fit-content; color:var(--ca-accent); font-size:14px; font-weight:700; cursor:pointer; }
.ca-inline-form { display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px; margin-top:12px; }
.ca-inline-form .ca-field { flex:1 1 160px; }
.ca-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.ca-count { color:var(--ca-muted); font-size:13px; }
.ca-client-list { display:flex; flex-direction:column; gap:12px; }
.ca-client { padding:15px; border:1px solid var(--ca-line); border-radius:13px; }
.ca-client.is-revoked { background:#f8f9fb; }
.ca-client-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ca-client-title { min-width:0; }
.ca-client-title h3 { margin:0 0 6px; font-size:16px; overflow-wrap:anywhere; }
.ca-badges { display:flex; flex-wrap:wrap; gap:6px; }
.ca-badge { display:inline-flex; align-items:center; min-height:23px; padding:1px 7px; border-radius:6px; color:var(--ca-accent); background:#edf2f8; font-size:12px; }
.ca-badge.is-active { color:var(--ca-good); background:#edf7f0; }
.ca-badge.is-revoked { color:#74695d; background:#f0eae3; }
.ca-client-times { display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:12px; color:var(--ca-muted); font-size:12px; }
.ca-client-hint { margin-top:8px; }
.ca-client details { margin-top:12px; }
.ca-empty { padding:16px 4px; color:var(--ca-muted); font-size:14px; }
.ca-code-row { display:flex; align-items:stretch; gap:8px; margin:14px 0 10px; }
.ca-code-row .ca-field { flex:1; }
.ca-field .ca-code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:17px; letter-spacing:.04em; }
.ca-code-edit { padding-top:14px; margin-top:18px; border-top:1px solid var(--ca-line); }
.ca-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
@media(min-width:901px) { .ca-families { position:sticky; top:18px; } }
@media(max-width:700px) {
  .ca-layout { grid-template-columns:minmax(0,1fr); gap:14px; }
  .ca-shell { padding:18px 12px 48px; }
  .ca-card { padding:18px; border-radius:15px; }
  .ca-family-list { max-height:230px; }
  .ca-family-button { padding:10px; }
  .ca-families { padding:16px 14px; }
  .ca-login { margin:16px auto; padding:22px; }
  h1 { font-size:22px; }
}
@media(max-width:420px) {
  .ca-header { padding:10px 12px; gap:10px; }
  .ca-header .ca-secondary { padding:8px 10px; font-size:13px; }
  .ca-back { padding:9px 10px; }
  .ca-brand small { font-size:11px; }
  .ca-client { padding:12px; }
  .ca-field .ca-code { font-size:15px; letter-spacing:.02em; }
  .ca-code-row .ca-secondary { padding:9px 12px; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }

.ca-delete-card { border-color:#dfc8c1; }
.ca-delete-card summary { color:#914d3a; }
.ca-delete-target { margin:14px 0; font-weight:700; overflow-wrap:anywhere; }
.ca-delete-card .ca-danger { min-height:44px; }