/* 统一家庭账号壳：药丸 + 面板。五个应用共用这一份，应用只改颜色令牌（--fs-*），不改结构。
 *
 * 【弹窗必须 portal 到 <body>】filter / backdrop-filter / transform 会让祖先成为 position:fixed 的包含块，
 * 2026-08-30 数学与英语的页头（backdrop-filter）就把「全屏遮罩」缩成了页头那个盒子。这份样式假定遮罩在 body 下。
 * 【__head 不滚、__body 单独滚】浏览器自动填充密码时会滚一下，那一下正好把右上角的 × 滚没。
 */
.family-account-pill{
  --fs-line:var(--fs-pill-line,#c9d3d6);--fs-surface:var(--fs-pill-surface,#fff);--fs-ink:var(--fs-pill-ink,#2f4650);
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--fs-line);background:var(--fs-surface);border-radius:999px;
  padding:6px 10px;color:var(--fs-ink);font:inherit;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer;line-height:1.3;max-width:min(52vw,220px);overflow:hidden;text-overflow:ellipsis}
.family-account-pill i{flex:none;width:7px;height:7px;border-radius:50%;background:#9da6a4}
.family-account-pill.synced i{background:#42a47d}
.family-account-pill.checking i,.family-account-pill.syncing i{background:#e1a83e}
.family-account-pill.signed-out i,.family-account-pill.offline i{background:#9da6a4}
.family-account-pill.pending-enable{border-color:#3c7fb5;color:#245f8d}.family-account-pill.pending-enable i{background:#3c7fb5}
.family-account-pill.unreadable{border-color:#e08a2e;color:#9a5a12}.family-account-pill.unreadable i{background:#e08a2e}
.family-account-pill.attention{border-color:#d86f56;color:#a14835}.family-account-pill.attention i{background:#d9533f}
.family-account-pill:focus-visible{outline:2px solid #3c7fb5;outline-offset:2px}

.family-dialog-backdrop{position:fixed;inset:0;z-index:1000;background:#143033b8;backdrop-filter:blur(5px);display:grid;place-items:center;padding:16px;overscroll-behavior:contain}
.family-dialog{position:relative;display:flex;flex-direction:column;width:min(440px,100%);max-height:min(90dvh,90vh);border-radius:18px;background:var(--fs-paper,#fffdf9);color:var(--fs-text,#1f2f36);box-shadow:0 24px 80px #10252666;overflow:hidden;text-align:left}
.family-dialog__head{flex:none;display:flex;align-items:flex-start;gap:12px;padding:22px 26px 12px;border-bottom:1px solid var(--fs-rule,#e2e8ea)}
.family-dialog__head>div{flex:1;min-width:0}
.family-dialog__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 26px 24px}
.family-dialog small{color:var(--fs-accent,#1f6f8b);font-size:12px;font-weight:700}
.family-dialog h2{margin:4px 0 0;font-size:22px;line-height:1.3;font-weight:800}
.family-dialog p{margin:10px 0;color:var(--fs-muted,#4d6068);font-size:13px;line-height:1.7}
.family-dialog p.family-scope{color:var(--fs-text,#1f2f36);font-weight:600}
.family-dialog label{display:grid;gap:6px;margin:13px 0;font-size:13px;font-weight:700}
.family-dialog input[type="email"],.family-dialog input[type="password"],.family-dialog input[type="text"],.family-dialog input[inputmode="numeric"],.family-dialog select{width:100%;border:1px solid var(--fs-rule,#d3dadd);border-radius:10px;padding:11px;background:#fff;font:inherit;font-size:15px;color:inherit}
.family-dialog .family-consent{grid-template-columns:auto 1fr;align-items:start;font-weight:400;line-height:1.55}
.family-dialog-close{flex:none;width:40px;height:40px;border:1px solid var(--fs-rule,#e2e8ea);border-radius:50%;background:#fff;font-size:22px;color:inherit;cursor:pointer;line-height:1;display:grid;place-items:center}
.family-primary,.family-secondary,.family-danger{width:100%;margin-top:8px;border-radius:10px;padding:11px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.family-primary{border:0;background:var(--fs-accent,#1f6f8b);color:#fff}
.family-secondary{border:1px solid var(--fs-rule,#d3dadd);background:#fff;color:var(--fs-text,#1f2f36)}
.family-danger{border:0;background:#b4432f;color:#fff}
.family-error{padding:8px 10px;border-radius:8px;background:#fff0e9;color:#a14835!important;font-weight:600}
.family-section{margin-top:18px;padding-top:12px;border-top:1px solid var(--fs-rule,#e2e8ea)}
.family-section>strong{display:block;font-size:13px;color:var(--fs-muted,#4d6068);letter-spacing:.04em}
.family-child-row{display:flex;gap:8px;align-items:center;margin-top:8px}
.family-child-row select{flex:1}
.family-child-row .family-secondary{width:auto;margin:0;padding:10px 12px;white-space:nowrap}
.family-link{display:inline-block;margin-top:8px;color:var(--fs-accent,#1f6f8b);font-weight:700;font-size:13px}
@media(max-width:620px){.family-account-pill{padding:6px 8px;font-size:11px}.family-dialog__head{padding:18px 16px 10px}.family-dialog__body{padding:4px 16px 20px}}
@media(prefers-reduced-motion:no-preference){.family-dialog{animation:family-pop .18s ease-out}@keyframes family-pop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}}