/* ---------- 云同步：顶栏状态胶囊 / 登录闸门 / 账号浮层 ----------
   闸门外壳复用了 app.css 里原有的 .fsgate + .gcard，视觉与全站一致，
   这里补「首屏门」的排版、输入框和列表行。

   注意：这道门是**首屏门**，不是浮层 —— 底下的应用内容不该被看见，
   所以 .fsgate.on.auth 用不透明底 + 隐藏 .wrap，而不是半透明蒙层。

   视觉基线是「现代 App 的登录页」，不是「一个居中的网页表单」：
     · 手机上整屏铺开（品牌在上、表单紧随），内容贴在页面上；
       宽屏（≥560px）才收成一张安静居中的卡片。
     · 所有可点元素 ≥44px（Apple HIG 的触控下限）。
     · 圆角、留白、阴影都给足，输入框 16px 字号（iOS 上小于 16px 会触发自动放大）。 */

/* 顶栏那颗圆片 = 账号（头像圆片 + 一颗同步状态小点）。
   为什么不是「已同步」三个字：同步是全自动的，那是**常态**不是信息，
   写出来等于在顶栏常驻一句废话，还把账号该占的位置占了。
   正常时安静（只有圆片），出问题才把话说出来（.cname.warn）。
   ⚠️ 账号那行字叫 .cname，**不能叫 .cid** —— 登录页的身份切换器已经占了这个类名
   （见下面 .cid{display:flex…}），重名会把它那片灰底胶囊糊到顶栏上。 */
header button.cloudst{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:2px 4px;border-radius:999px;background:transparent
}
header button.cloudst .cav{
  position:relative;flex:none;width:26px;height:26px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;line-height:1;letter-spacing:0;
  background:var(--brand-soft);color:var(--brand);
  border:1px solid rgba(37,99,235,.18);transition:background .2s,color .2s
}
header button.cloudst .cav i{
  position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border-radius:999px;
  background:var(--ink3);border:1.5px solid #fff;transition:background .2s
}
header button.cloudst .cname{
  display:none;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12px;font-weight:600;color:var(--ink2);background:transparent
}
/* 360px 以上就把账号露出来（用户要的是「这里应该是账号」，只有一颗圆片太哑）。
   比这更窄的屏让位给标题 —— 那种尺寸下缩写会挤成省略号，反而更难看。 */
@media (min-width:360px){header button.cloudst .cname{display:inline}}
header button.cloudst .cname.warn{display:inline}    /* 异常一定要说，不管屏幕多窄 */
/* 手机号账号没有首字母可用（首字符是「+」或「1」），画一个通用人形：
   一个头 + 一片肩，纯 CSS，不引图标字体。用百分比所以 26px / 40px 两种圆片通用。 */
header button.cloudst .cav.pr::before,
.gcard.sheet .sav.pr::before{
  content:'';position:absolute;left:50%;top:21%;width:28%;height:28%;
  transform:translateX(-50%);border-radius:999px;background:currentColor
}
header button.cloudst .cav.pr::after,
.gcard.sheet .sav.pr::after{
  content:'';position:absolute;left:50%;bottom:18%;width:52%;height:30%;
  transform:translateX(-50%);border-radius:999px 999px 2px 2px;background:currentColor
}
header button.cloudst.on   .cav i{background:var(--ok)}
header button.cloudst.busy .cav i{background:var(--brand);animation:cfaPulse 1s ease-in-out infinite}
header button.cloudst.no   .cav i{background:var(--bad)}
header button.cloudst.off  .cav i{background:var(--warn)}
header button.cloudst.no   .cav i{box-shadow:0 0 0 3px rgba(239,68,68,.16)}
@keyframes cfaPulse{0%,100%{opacity:1}50%{opacity:.28}}

/* ---------- 首屏登录闸门 ---------- */
body.gated .wrap{visibility:hidden}          /* 门没开之前，底下的应用不露脸 */

.fsgate.on.auth{
  /* 顶部一团极淡的品牌光晕 + 一条向下的浅渐变。比纯灰底「有空气」，又不抢内容。 */
  background:
    radial-gradient(118% 62% at 50% -12%, rgba(37,99,235,.16) 0%, rgba(37,99,235,0) 60%),
    linear-gradient(180deg,#fcfdff 0,#f1f5fb 48%,#e8eff8 100%);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  align-items:stretch;justify-content:flex-start;
  padding:calc(34px + env(safe-area-inset-top,0px)) 22px calc(28px + env(safe-area-inset-bottom,0px));
  overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch
}
/* 手机上 .gcard 不再是「卡片」：透明、无边框无阴影，内容直接落在页面上 */
.fsgate.auth .gcard{
  background:transparent;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-radius:0;padding:0;margin:0 auto;max-width:400px;width:100%
}
.fsgate.auth .gcard::before{display:none}    /* 首屏门不需要「下拉手柄」那根横条 */

/* 品牌行：只有「标 + 名」。登录页不写营销句 —— 那是落地页的话术，不是 App 的 */
.abrand{display:flex;align-items:center;gap:13px;margin-bottom:34px}
.alogo{
  flex:none;width:56px;height:56px;display:block
}
.atxt{min-width:0}
.atxt b{display:block;font-size:23px;font-weight:750;color:var(--ink);letter-spacing:-.7px;line-height:1.2}

.gcard .gtit{font-size:22px;font-weight:730;color:var(--ink);letter-spacing:-.6px;line-height:1.3;margin-bottom:4px}

/* ---------- 手机号 / 邮箱：分段选择器 ---------- */
.cid{display:flex;gap:4px;margin:0 0 20px;background:rgba(16,26,43,.058);
  border-radius:15px;padding:4px}
.cidt{
  flex:1;border:0;border-radius:12px;padding:0;min-height:42px;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;color:var(--ink3);background:transparent;cursor:pointer;
  transition:background .18s,color .18s,box-shadow .18s
}
.cidt.on{color:var(--brand);font-weight:700;background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.10),0 3px 8px -4px rgba(16,24,40,.14)}
.cidt:active{transform:scale(.985)}

/* ---------- 输入框 ---------- */
.gcard .cfl{display:block;margin-top:16px}
.gcard .cfl span{display:block;font-size:12px;font-weight:600;color:var(--ink3);
  margin:0 0 7px 2px;letter-spacing:.01em}
.gcard .cfl span i{font-style:normal;font-weight:400;font-size:11px;color:var(--ink3);
  opacity:.85;margin-left:6px}
.gcard .cfl input{
  width:100%;appearance:none;-webkit-appearance:none;box-sizing:border-box;
  border:1px solid rgba(16,26,43,.10);border-radius:16px;background:#fff;
  padding:14px 15px;font-family:inherit;font-size:16px;color:var(--ink);line-height:1.3;
  box-shadow:0 1px 2px rgba(16,24,40,.03);
  transition:border-color .16s,box-shadow .16s,background .16s
}
.gcard .cfl input:focus{outline:none;border-color:rgba(37,99,235,.55);
  box-shadow:0 0 0 4px rgba(37,99,235,.13)}
.gcard .cfl input::placeholder{color:var(--ink3);opacity:.75}

/* 手机号输入：+86 做成固定的前缀位（国内 App 的样子）。
   注意权重 —— app.css 里有 `.gcard .cfl input`（2 类 + 1 元素），
   所以这里必须写成 `.gcard .cfl .cin input`（3 类 + 1 元素）才压得住它的边框和内边距。 */
.gcard .cfl .cin{
  display:flex;align-items:stretch;overflow:hidden;
  border:1px solid rgba(16,26,43,.10);border-radius:16px;background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.03);
  transition:border-color .16s,box-shadow .16s
}
.gcard .cfl .cin > i{
  flex:none;display:flex;align-items:center;padding:0 13px;font-style:normal;
  font-size:15px;font-weight:650;color:var(--ink2);letter-spacing:.01em;
  background:linear-gradient(180deg,rgba(16,26,43,.035),rgba(16,26,43,.055));
  border-right:1px solid rgba(16,26,43,.07)
}
.gcard .cfl .cin input{
  flex:1;min-width:0;width:auto;border:0;border-radius:0;background:transparent;
  padding:14px 15px;font-size:16px;letter-spacing:.02em;box-shadow:none
}
.gcard .cfl .cin input:focus{border:0;background:transparent;box-shadow:none}
.gcard .cfl .cin input::placeholder{letter-spacing:0}
.gcard .cfl .cin:focus-within{border-color:rgba(37,99,235,.55);box-shadow:0 0 0 4px rgba(37,99,235,.13)}

/* ---------- 说明条 / 报错 ---------- */
.ctip{
  margin-top:14px;font-size:13px;line-height:1.6;color:var(--ink2);
  background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.12);
  border-radius:14px;padding:11px 13px
}
.ctip b{color:var(--brand);font-weight:650;word-break:break-all}

.gcard .cmsg{margin-top:14px;font-size:13px;line-height:1.6;padding:11px 13px;border-radius:14px}
.gcard .cmsg.ok{background:rgba(18,183,106,.10);color:#0a8a4d}
.gcard .cmsg.no{background:rgba(239,68,68,.09);color:#cf2f2f}
/* 报错里那个「下一步」按钮：服务端说法和判断不一致时，让用户自己点 */
.gcard .cmsg .nbtn{
  display:inline-flex;align-items:center;justify-content:center;width:auto;
  margin:11px 8px 0 0;padding:0 17px;min-height:42px;
  font-size:13px;font-weight:650;border-radius:999px;
  background:#fff;border:1px solid rgba(16,26,43,.10);color:var(--ink)
}
.gcard .cmsg .nbtn:active{background:#f4f7fa}

/* ---------- 主按钮 ---------- */
.gcard .abtn{
  margin-top:22px;padding:16px;font-size:16px;font-weight:650;
  border-radius:16px;min-height:54px;letter-spacing:.02em;
  background:linear-gradient(180deg,#3f86f7 0%,#2563eb 100%);
  box-shadow:0 12px 24px -12px rgba(37,99,235,.85),
             inset 0 1px 0 rgba(255,255,255,.24);
  transition:transform .12s,box-shadow .12s,opacity .12s
}
.gcard .abtn:active{transform:scale(.985);box-shadow:0 6px 14px -10px rgba(37,99,235,.9)}
.gcard .abtn:disabled{opacity:.5;transform:none;box-shadow:none}

/* 次要入口：一行小链接，别抢主按钮。热区给足 ≥44px，不然手机上老点不中 */
.calt{margin-top:16px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px}
.calt i{font-style:normal;color:var(--ink3);opacity:.5;margin:0 7px;font-size:11px}
.clink{
  border:0;background:transparent;padding:0 7px;font-family:inherit;
  display:inline-flex;align-items:center;min-height:44px;
  font-size:13.5px;font-weight:650;color:var(--brand);cursor:pointer;line-height:1.4
}
.clink:active{opacity:.55}
/* 重发冷却：链接变灰且点不动，文案里带秒数 */
.clink:disabled{color:var(--ink3);opacity:.6;cursor:default}
.clink:disabled:active{opacity:.6}

/* 主按钮下面那行规则说明（「未注册的…将自动为你创建账号」）：
   小一号、居中、次级灰 —— 是说明不是警告，别做成第二颗按钮 */
.chint{margin-top:15px;padding:0 6px;text-align:center;
  font-size:12px;line-height:1.6;color:var(--ink3);letter-spacing:.01em}

/* ---------- 启动态：转圈 + 一句话 ---------- */
.aboot{display:flex;align-items:center;gap:11px;margin-top:22px;font-size:13.5px;
  color:var(--ink2);line-height:1.5}
.spin{
  width:16px;height:16px;border-radius:999px;flex:none;
  border:2px solid rgba(37,99,235,.18);border-top-color:var(--brand);
  animation:cfaSpin .8s linear infinite
}
@keyframes cfaSpin{to{transform:rotate(360deg)}}

/* 脚注：说清「登录换到了什么」，不吓唬人 */
.cfoot{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.75;color:var(--ink3)
}

/* ---------- 宽屏：变回一张安静居中的卡片 ---------- */
@media(min-width:560px){
  .fsgate.on.auth{align-items:center;justify-content:center;padding:24px}
  .fsgate.auth .gcard{
    background:rgba(255,255,255,.96);
    border:1px solid rgba(255,255,255,.9);
    -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
    border-radius:26px;padding:32px 30px;margin:auto;
    box-shadow:0 30px 70px -26px rgba(16,24,40,.30),0 2px 6px rgba(16,24,40,.04)
  }
  .abrand{margin-bottom:28px}
}

/* 很窄的屏（≤360px，老机型）：左右收一点，别让表单贴边、别让字挤 */
@media (max-width:360px){
  .fsgate.on.auth{padding-left:17px;padding-right:17px}
  .alogo{width:48px;height:48px}
  .atxt b{font-size:21px}
  .gcard .gtit{font-size:20px}
}

/* ---------- 账号浮层（点顶栏胶囊出来） ----------
   登录门是**全屏不透明**的（底下的东西不能露脸）；
   账号浮层是**半透明底部卡片**，直接复用 .fsgate 的蒙层，不另造一套。 */
.fsgate.on.sheet{padding:0}
.gcard.sheet{padding-top:18px}
.stitle{font-size:12px;font-weight:700;color:var(--ink3);letter-spacing:.04em}
/* 账号行：左边一个首字母圆片，右边「邮箱 / 状态 · 上次同步」。 */
.sme{display:flex;align-items:center;gap:11px;margin-top:12px}
.sme .sav{
  position:relative;flex:none;width:40px;height:40px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;line-height:1;letter-spacing:0;
  background:var(--brand-soft);color:var(--brand);border:1px solid rgba(37,99,235,.18)
}
.sme .smec{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sme .smec b{
  font-size:15px;font-weight:650;color:var(--ink);letter-spacing:-.2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.sme .smec i{font-style:normal;font-size:12px;color:var(--ink3);line-height:1.4}
/* ---------- 资料表：昵称 / 用户 ID / 手机号 / 邮箱 ----------
   就一张表。**没有一句解释性文字** —— 上一版那段「进度在你每次作答后自动存进这个账号…」
   是典型的说明书口气，用户直接点掉（「商业化产品哪有那么多废话描述」）。
   行高 44 起步（触控热区），右对齐取值，可点的行右侧给一个动作词。 */
.srows{margin-top:14px;border-top:1px solid rgba(16,26,43,.07)}
.srow{
  display:flex;align-items:center;gap:10px;min-height:44px;
  border-bottom:1px solid rgba(16,26,43,.07)
}
.srl{flex:none;width:62px;font-size:13px;color:var(--ink3)}
.srv{
  flex:1;min-width:0;font-size:14px;color:var(--ink);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.srv.none{color:var(--ink3);opacity:.85}          /* 未设置 / 未绑定 / 还不知道 */
.sra{
  flex:none;padding:0;border:0;background:none;font-family:inherit;
  font-size:13px;color:var(--brand);cursor:pointer;position:relative
}
.sra::after{content:'';position:absolute;top:-13px;bottom:-13px;left:-12px;right:-12px}
.sra:active{opacity:.6}
.srow input{
  flex:1;min-width:0;box-sizing:border-box;font-family:inherit;font-size:16px;
  padding:9px 11px;border-radius:12px;border:1px solid rgba(16,26,43,.10);
  background:#fff;color:var(--ink);text-align:left
}
.srow input:focus{outline:none;border-color:rgba(37,99,235,.55);box-shadow:0 0 0 4px rgba(37,99,235,.13)}
.srow input::placeholder{color:var(--ink3);opacity:.75}
/* 改昵称：点行右侧的「修改」后**原地**展开输入框（输入框长在那一行里），不跳页、不开新层。
   输入框 16px —— iOS 上小于 16px 聚焦会自动放大整页（.srow input 那条已另写）。 */
.seditr{display:flex;gap:10px;margin-top:12px}
.seditr .mbtn{flex:1;width:auto;margin-top:0}
.gcard.sheet .mrow{display:flex;gap:10px;margin-top:16px}
.gcard.sheet .mrow .mbtn{flex:1;width:auto;margin-top:0}
.gcard.sheet .mclose{margin-top:10px}
.gcard.sheet .mclose .mbtn{
  display:flex;width:100%;margin-top:8px;background:transparent;box-shadow:none;
  border:1px solid rgba(16,26,43,.09);color:var(--ink3)
}