/* =========================================================
   CalcElf v5.6.3 · 全站弹窗「放大 + 圆润」统一排版
   最后加载，仅作用于弹窗/浮层，不影响首页主界面。
   ★★★ 第 2 步：原来的「Baloo 2 / Fredoka / M PLUS Rounded /
      ZCOOL KuaiLe」四段回退栈【已退役】✗ 改为指向设计令牌 ✓
      原因：这几个字体【一个都没有自托管】✗ 本机也一个都没装 ✓
        实测（canvas 宽度对比法 ✗ 与不存在字体同名宽 ⇒ 未安装）：
          "Baloo 2" / "M PLUS Rounded 1c" / "ZCOOL KuaiLe" / "Nunito"
          / "Yuanti SC" / "YouYuan" / ui-rounded —— 全部缺失 ✓
      真实生效的一直只有：Fredoka（拉丁 ✗ 自托管）+ Noto Sans SC（汉字 ✗ 系统）
      ⇒ 删掉这些名字【零损失】✗ 且全站标题终于用同一个栈 ✓
   ========================================================= */
:root{--calf-round-font:var(--ce-font-display);--calf-body-font:var(--ce-font-body);}

/* ---------- 通用弹窗容器 ---------- */
.modalbox,#themePanel .modalbox{/* v8.13 与网站 UI 统一：弹窗正文改用 --font-stack（主题的界面正文），
   原来用的是 --calf-body-font（Fredoka 圆体）→ 与站内其它界面不一致 ✗；标题仍保留品牌展示字体 */
  font-family:var(--font-stack);border-radius:28px!important;padding:26px 24px;}
.modalbox h2{font-family:var(--calf-round-font)!important;font-weight:var(--ce-fw-head)!important;font-size:27px!important;line-height:1.18;}
.modalbox h3{font-family:var(--calf-round-font)!important;font-weight:var(--ce-fw-head)!important;font-size:19px!important;}
.modalbox p,.modalbox .muted,.modalbox label{font-size:15px;line-height:1.5;}
.modalbox .close,#themePanel .close,#settingsPanel .sp-close,#avatarPicker .ap-close,#levelsModal .close{width:38px;height:38px;font-size:24px!important;border-radius:50%;}

/* Explorer Profile 标题：再 +10%（36px）并上移 */
#accountModalTitle{margin-top:-6px;margin-bottom:8px!important;}
.explorer-word{font-size:36px!important;font-family:var(--calf-round-font)!important;font-weight:var(--ce-fw-head)!important;}
#accountModalDesc{font-size:15px!important;line-height:1.45;margin-bottom:18px!important;}
@media (min-width:560px){#accountModalDesc{white-space:nowrap;}}

/* ---------- 表单控件 ---------- */
.modalbox input,.modalbox select,.modalbox textarea,
#settingsPanel .sp-input,#settingsPanel .sp-select{
  font-family:var(--calf-body-font)!important;font-size:18px!important;font-weight:600;
  padding:15px 17px!important;border-radius:17px!important;}
.modalbox select{appearance:none;}
.modalbox input::placeholder,.modalbox textarea::placeholder{font-weight:500;}

/* ---------- 选项卡 ---------- */
.auth-tabs{border-radius:18px;padding:7px;gap:8px;}
.auth-tab{font-family:var(--calf-round-font)!important;font-weight:700!important;font-size:18px!important;padding:13px 10px!important;border-radius:13px;}

/* ---------- 按钮：胶囊、厚底、圆体 ---------- */
.modalbox .btn,#settingsPanel .sp-save{
  font-family:var(--calf-round-font)!important;font-weight:var(--ce-fw-head)!important;font-size:19px!important;
  min-height:54px!important;padding:14px 22px!important;border-radius:999px!important;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.1;}
.modalbox .btn.primary,#signupBtn,#loginWithPasswordBtn{font-size:20px!important;}
.modalbox .btn.google-btn{font-size:17.5px!important;font-weight:700!important;}
.modalbox .btn.secondary{font-size:17px!important;}
#settingsPanel .sp-save{width:100%;margin-top:22px;}

/* 密码强度（宝石 + 进度条 + 规则） */
.pw-gems{gap:9px;}
.pw-gems .gem{width:30px!important;height:13px!important;border-radius:99px;}
.pw-bar{height:10px!important;border-radius:99px;}
.pw-rules>summary{font-size:14.5px!important;line-height:1.45;}
.pw-check{font-size:14.5px!important;line-height:1.5;}
.modalbox input[type=checkbox].kcbx,.modalbox .kcbx{width:27px;height:27px;border-radius:10px;}

/* 方案/价格卡片 */
.plan b,.plan .plan-name{font-family:var(--calf-round-font);font-size:18px;}
.plan .price{font-family:var(--calf-round-font);font-size:26px;}
.plan{border-radius:20px;}

/* ---------- 外观主题弹窗 ---------- */
#themePanel .modalbox h2{font-size:30px!important;}
#themePanel .modalbox h3{font-size:19px!important;}
#themePanel .modalbox .muted{font-size:16px;}
.theme-opt{border-radius:22px!important;padding:18px 12px!important;}
.theme-opt .swatch{width:58px!important;height:58px!important;margin-bottom:10px!important;}
.theme-opt .nm{font-family:var(--calf-round-font)!important;font-weight:var(--ce-fw-head)!important;font-size:20px!important;}
.theme-opt .tg{font-size:16px!important;margin-top:3px;}
#themePanel .theme-opt img{width:52px!important;height:52px!important;}
#tpSave,#tpCancel{min-height:52px!important;font-size:19px!important;}

/* ---------- 学习设置弹窗 ---------- */
#settingsPanel .sp-box{font-family:var(--calf-body-font);border-radius:28px;padding:26px 24px;}
#settingsPanel .sp-title{font-family:var(--calf-round-font)!important;font-weight:var(--ce-fw-head);font-size:24px!important;}
#settingsPanel .sp-sec{font-size:20px!important;font-weight:var(--ce-fw-head);}
#settingsPanel .sp-label{font-size:17px!important;}
#settingsPanel .sp-hint{font-size:15px!important;line-height:1.5;}
#settingsPanel .sp-chip{font-size:16px!important;padding:9px 17px!important;border-radius:999px!important;}
#settingsPanel .sp-segbtn{font-size:16px!important;padding:12px 8px!important;border-radius:14px!important;}
#settingsPanel .sp-switch{font-size:16px!important;}

/* ---------- 头像选择器 ---------- */
#avatarPicker .ap-box{font-family:var(--calf-body-font);border-radius:28px;padding:24px;}
#avatarPicker .ap-title{font-family:var(--calf-round-font)!important;font-weight:var(--ce-fw-head);font-size:26px!important;}
#avatarPicker .ap-cell{border-radius:20px!important;padding:9px!important;}
#avatarPicker .ap-iconcell .calf-av-img{border-radius:15px!important;}

/* ---------- 等级与特权弹窗 ---------- */
#levelsModal .lv-box{font-family:var(--calf-body-font);border-radius:30px;padding:26px 24px;}
#levelsModal .lv-title{font-family:var(--calf-round-font)!important;font-weight:var(--ce-fw-head);font-size:27px!important;}
#levelsModal .lv-sub{font-size:15px!important;line-height:1.5;}
#levelsModal .lv-free{font-size:15px!important;line-height:1.5;border-radius:16px;}
#levelsModal .lv-tab{font-family:var(--calf-round-font)!important;font-weight:var(--ce-fw-head);font-size:18px!important;padding:13px 8px!important;border-radius:15px;}
#levelsModal .lv-row{border-radius:18px;padding:14px;}
#levelsModal .lv-badge{width:52px;height:52px;flex-basis:52px;border-radius:17px;font-size:22px!important;}
#levelsModal .lv-head b{font-family:var(--calf-round-font)!important;font-size:18px!important;}
#levelsModal .lv-rule{font-size:15px!important;line-height:1.45;}
#levelsModal .lv-desc{font-size:14.5px!important;line-height:1.5;}
#levelsModal .lv-perk{font-size:13.5px!important;padding:3px 11px;}
#levelsModal .lv-prog{height:9px;}
#levelsModal .lv-prog-t{font-size:13px!important;}
#levelsModal .lv-meta{font-size:15px!important;border-radius:12px;}
#levelsModal .lv-note{font-size:14px!important;line-height:1.55;}

/* ---------- 小屏：弹窗内部滚动，标题/关闭始终可见 ---------- */
@media (max-width:560px){
  .modalbox,#themePanel .modalbox,#settingsPanel .sp-box,#avatarPicker .ap-box,#levelsModal .lv-box{padding:20px 16px;border-radius:24px!important;}
  .explorer-word{font-size:31px!important;}
  .modalbox h2,#levelsModal .lv-title{font-size:24px!important;}
  .modalbox .btn{font-size:18px!important;min-height:52px!important;}
  .modalbox input,.modalbox select,.modalbox textarea{font-size:17px!important;padding:14px 15px!important;}
}

/* =========================================================
   v5.6.3 强化补丁
   ① 弹窗内所有节点强制圆体，杜绝机械字体（再对标题/按钮/标签用 Baloo）
   ② 密码强度指示块去掉钻石旋转，改水平胶囊
   ③ 同意/COPPA/机器人校验字号放大并圆润（盖过 JS 内联样式）
   ========================================================= */
.modalbox *,#themePanel .modalbox *,#settingsPanel .sp-box *,#avatarPicker .ap-box *,#levelsModal .lv-box *{font-family:var(--calf-body-font)!important;}
/* ★★ 第 38 轮：把【价格】加进展示字体白名单 ✗✗
   事故 ✗：上面第 124 行是通配强制
     .modalbox *,…{font-family:var(--calf-body-font)!important;}
   而本白名单【漏了 .plan .price】✗
   ⇒ 套餐价格 $4.99 被强制成正文字体 ✓ 从圆体 Fredoka 变 Inter ✗（宽度 +26.09% ✓）
   ★ 但仓库里【两条明确针对价格的规则】都说是展示字体 ✓：
       components.css:201  .plan .price{…font-family:var(--display)}          ✓
       ui-type-scale.css:62 .plan .price{font-family:var(--calf-round-font)}   ✓
     ⇒ ★ 所以这是【通配规则的误伤】✗ 不是有意的设计决定 ✓✓
   ★ 正解不是加 !important 对撞 ✗ 而是补进这个白名单 ✓
     （白名单机制本来就在 ✓ 只是漏了一项 ✓）
   ★ 顺带把「省 X%」「/月」这类价格行数字也带上 ✗ 它们与价格同属展示性数字 ✓ */
.modalbox h1,.modalbox h2,.modalbox h3,.modalbox h4,.modalbox h5,.modalbox label,.modalbox b,.modalbox strong,.modalbox .btn,.auth-tab,.explorer-word,
.plan .price,.plan .price-row,.plan .strike,.modalbox .save-badge,
#themePanel h2,#themePanel h3,.theme-opt .nm,
#settingsPanel .sp-title,#settingsPanel .sp-sec,#settingsPanel .sp-label,#settingsPanel .sp-save,#settingsPanel .sp-segbtn,#settingsPanel .sp-chip,
#avatarPicker .ap-title,#levelsModal .lv-title,#levelsModal .lv-tab,#levelsModal .lv-head b{font-family:var(--calf-round-font)!important;}

/* 密码强度：4 个水平胶囊指示块（去除 rotate45），保留逐块点亮配色 */
.pw-gems{gap:10px;}
.pw-gems .gem{transform:none!important;width:36px!important;height:13px!important;border-radius:999px!important;background:#e5e7eb!important;box-shadow:none!important;border:0;}
.pw-gems .gem.ok{background:linear-gradient(135deg,#a78bfa,#22d3ee)!important;box-shadow:0 0 8px rgba(124,58,237,.40)!important;}
.pw-gems .gem.ok:nth-child(2){background:linear-gradient(135deg,#38bdf8,#22d3ee)!important;box-shadow:0 0 8px rgba(56,189,248,.40)!important;}
.pw-gems .gem.ok:nth-child(3){background:linear-gradient(135deg,#34d399,#a3e635)!important;box-shadow:0 0 8px rgba(52,211,153,.40)!important;}
.pw-gems .gem.ok:nth-child(4){background:linear-gradient(135deg,#fbbf24,#fb7185)!important;box-shadow:0 0 10px rgba(251,191,36,.5)!important;}
.pw-bar{height:10px!important;border-radius:999px!important;}
.pw-rules>summary{font-family:var(--calf-body-font)!important;font-size:15px!important;line-height:1.5;}
.pw-check{font-family:var(--calf-body-font)!important;font-size:15px!important;line-height:1.6;}

/* 两行同意 + COPPA */
#signupForm label{font-size:16px!important;line-height:1.55!important;}
#agreePrivacyText,#agreeCoppaText{font-size:16px!important;font-weight:700;}
/* ★★ 第 11 轮修正：.coppa-row 的【左右】内边距必须与上一行一致 ✗✗
   用户反馈（第二次）："左右还是没有对齐"✓
   实测定位（用真实浏览器量像素 ✓ 全部 5 个 CSS 内联 ✓ 含真实 #signupForm 上下文 ✓）：
     框1（.ce-consent-row）padding-left = 9px  ✓
     框2（.coppa-row）      padding-left = 15px ✗ → 正好差 6px ✓✓（与截图吻合 ✓）
   根因：本文件【后加载】✗ → 同为 !important 时后者胜 ✗✗
     所以这条 .coppa-row{padding:13px 15px!important} 盖过了
     components.css 里 .ce-consent-row{padding:6px 9px!important} ✓
   ⇒ 修法：★ 只改【左右】✓ 保留【上下 13px】✓
     （上下更大正是这条规则的本意："字号放大并圆润"✓ 不影响左右对齐 ✓）
   ★ 教训：CSS 里改"某一行"的样式时 ✗ 必须检查它会不会让这一行与相邻行【错位】✗
     这里只差 6px ✓ 肉眼很明显 ✓ 但纯读代码很难发现（跨两个文件 + 加载顺序 ✗）*/
.coppa-row{border-radius:16px!important;padding:13px 9px!important;}

/* 机器人校验 */
#captchaQuestion{font-size:16px!important;font-family:var(--calf-round-font)!important;font-weight:700;color:#334155!important;}
#captchaRefresh{font-size:15px!important;font-family:var(--calf-body-font)!important;font-weight:600;}
#captchaAnswer{font-size:18px!important;padding:14px 16px!important;border-radius:15px!important;}
#signupGuardMsg{font-size:15px!important;}

/* ===== 生肖头像（v8.11：换成圆形透明 PNG，禁止二次裁切）=====
   旧版是方形 SVG，靠 border-radius 变圆；新图本身已是圆形且圆外透明，
   若容器非正方形又用 cover/100%，会把耳朵与脚裁掉（实际发生过）。
   因此：格子强制正方形 + contain + 去掉 border-radius（避免双重遮罩）。 */
#avatarPicker .ap-cell{aspect-ratio:1/1;}
#avatarPicker .ap-iconcell .calf-av-img{width:100%!important;height:100%!important;object-fit:contain!important;border-radius:0!important;background:transparent!important;}
.calf-av-img{object-fit:contain;}
#avatarBtn .calf-av-face .calf-av-img{object-fit:contain!important;}
.avatar-wrap img,.ce-member-avatar img{object-fit:contain;}

/* v8.13 表单控件统一继承站内 UI 字体（input/select/button 默认不继承 font-family ✗） */
.modalbox input,.modalbox select,.modalbox textarea,.modalbox button{font-family:inherit}
.modalbox .pw-rules summary,.modalbox .pw-check,.modalbox .pw-gems{font-family:var(--font-stack)}
/* =========================================================
   v8.9 · 注册页「Create 按钮去渐变改纯色」（产品主人上一轮拍板的「锐化 · 做法①」✓
   ★ 本块为【文末新增】✓ 既有行一字未动 ✓）
   ---------------------------------------------------------
   ① Create 按钮（#signupBtn）
        · background-image: 135° 双色渐变 → none
          + background-color: var(--primary)（= #0f766e ✓ 与渐变深端同色 ✓）
        ★★ box-shadow 一个字没动 ✓ 那条 `0 5px 0 #0f766e` 的硬底边【保留】✓
           理由：「去渐变」与「去阴影」是两件事 ✗ 他选的是前者 ✓
                 "去阴影"是做法② ✗ 他没选 ✓
           实测补记：只去渐变、保留底边 ⇒ 底边【不突兀】✓ 观感是干净的 ✓
                     （现状阴影本来就是硬边零模糊 ✗ 不是柔和投影 ✓）
        ★ 走 #signupBtn（id 选择器 ✗ 特异性 1,0,0）✗ 绝不动 .modalbox .btn ✓
          后者是全站弹窗共用：#authModal/#plansModal/#rewardsModal/#inviteModal
          /#verifyModal/#feedbackModal + 主题/设置/等级/头像弹窗（19px）✓
          改它 = 一键动全站 ✓ 这正是本次最可能捅出的篓子 ✓
   ---------------------------------------------------------
   ★★ 为什么整块【文末新增】而不是去改既有行 ✗✗
      改 ui-type-scale.css:47（.modalbox .btn.primary,#signupBtn,…{font-size:20px!important;}）
      会让 tests/ui-spec-drift.js 的 auth.btn-signup-20 变红 ✗
      （它钉的是那一行【整行原文】✓）⇒ 必须同批改 docs/UI-SPEC-REAL.md:2054 ✓
      文末新增 ⇒ 既有行原文与行号全部不变 ⇒ 140 条关键值依旧全绿 ✓ 无需动文档 ✓
      （实测：Create 去渐变这一种写法全绿 ✓）
   ★★ 【本轮撤回】字号变大两处已撤（产品主人改主意："字号变大那两个修改撤回吧"✓）
      · #signupBtn font-size:24px ⇒ 删除 ⇒ 回落到既有行 47 的 20px ✓
      · .auth-tab  font-size:22px ⇒ 删除 ⇒ 回落到既有行 40 的 18px ✓
      · 窄屏兜底 @media (max-width:420px){…} ⇒ 删除 ✓
        理由：那条是【为放大后的页签】才加的（缩 gap / 缩 padding 防换行 ✗）
              字号回退 ⇒ 它没有存在理由 ✓ 留着反而让【没放大】的页签挤在一起 ✗
      ⇒ 本块只剩一条：Create 去渐变 ✓（他上一轮明确选中的「锐化做法①」✓）
   ★★ 孪生：本文件与 public/ui-type-scale.css 必须【逐字节一致】✓
      （tests/ui-spec-drift.js 的 twinWarnings 会警告不一致 ✓）
   ========================================================= */
#signupBtn{background-image:none!important;background-color:var(--primary)!important}