/* 巨信 ZeroID 独立账号站样式  改完记得把 index.php 里的 ?v= 版本号 +1 */
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }
        html, body { width: 100%; min-height: 100%; font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Helvetica Neue","Microsoft YaHei","微软雅黑","WenQuanYi Micro Hei",Helvetica,Arial,sans-serif; font-size: 17px; color: #000; background: #EFEFF4; -webkit-text-size-adjust: 100%; }
        /* 手机上有两处留白叠加，320px 老机型也不会贴边：
        /* ==================== 加载弹窗（转圈）====================
           ⚠️ 转圈是加在【真实存在的元素】.zc-ld-spin 上的，不是 ::after 伪元素。
           之前失败过一次是因为用了 :after + animation —— 不少浏览器不给伪元素跑动画。
           真实元素 + -webkit-animation 是 iOS 5 就支持的组合。 */
        #zcLoading { position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            z-index: 100000; background: rgba(0, 0, 0, 0.32); display: none; text-align: center; }
        #zcLoading.on { display: block; }
        #zcLoading .zc-ld-box { position: absolute; top: 50%; left: 50%;
            width: 120px; margin: -50px 0 0 -60px; padding: 20px 0 16px;
            background: rgba(0, 0, 0, 0.72); -webkit-border-radius: 14px; border-radius: 14px; }
        #zcLoading .zc-ld-spin { width: 34px; height: 34px; margin: 0 auto;
            border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: #fff;
            -webkit-border-radius: 50%; border-radius: 50%;
            -webkit-animation: zcSpin 0.8s linear infinite;
            animation: zcSpin 0.8s linear infinite; }
        #zcLoading .zc-ld-txt { color: #fff; font-size: 14px; margin-top: 12px; }
        @-webkit-keyframes zcSpin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
        @keyframes zcSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

        /* ==================== 登录按钮的「处理中」状态 ====================
           点了登录之后按钮自己变灰、箭头换成转圈 —— 不用弹窗遮罩。
           改的是页面上【已经存在的那个按钮】：不新增元素、不涉及显示隐藏、

/* ============================================================================
   ZeroID-simple 账号管理页样式
   —— 只补充「账号面板」需要的那部分，登录部分沿用上面的 ZeroID 样式，
      保证外观和主站完全一致。
   ============================================================================ */

/* 顶部账号卡 */
.zc-card { margin: 0 0 16px; background: #fff; border-radius: 0; padding: 18px 16px; text-align: center; }
.zc-avatar { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 10px;
             background: #C8C8CC; color: #fff; font-size: 30px; font-weight: 600;
             line-height: 76px; text-align: center; overflow: hidden; position: relative; }
.zc-avatar img { width: 76px; height: 76px; display: block; }
.zc-uname { font-size: 19px; font-weight: 600; color: #000; word-break: break-all; }
.zc-uid   { font-size: 12.5px; color: #8E8E93; margin-top: 3px; }

/* 普通分组（沿用 ZeroID 的 .ios-group 视觉，但独立定义以免依赖） */
.zc-group { background: #fff; border-radius: 0; overflow: hidden; margin: 0 0 16px; }
.zc-row   { display: block; padding: 13px 15px; border-bottom: 1px solid #E5E5EA;
            font-size: 15px; color: #000; cursor: pointer; position: relative; }
.zc-row:last-child { border-bottom: 0; }
.zc-row .zc-k { color: #000; }
.zc-row .zc-v { float: right; color: #8E8E93; font-size: 14px; }
.zc-row:after { content: "\203A"; float: right; color: #C7C7CC; margin-left: 6px; font-size: 16px; line-height: 1; }
.zc-row.plain:after { content: ""; }
.zc-row.danger { color: #FF3B30; }
.zc-row.danger .zc-k { color: #FF3B30; }

/* 输入行 */
.zc-field { padding: 11px 15px; border-bottom: 1px solid #E5E5EA; }
.zc-field:last-child { border-bottom: 0; }
/* 输入框内容高 30px —— 整行 11+30+11 = 52px。
   加高是为了让图形验证码能按原图比例显示（原图 120×40，是 3:1），
   24px 的高度会把验证码压扁。 */
.zc-field input { width: 100%; box-sizing: border-box; border: 0; outline: 0;
                  font-size: 15px; height: 30px; line-height: 30px; background: transparent; }
.zc-btn { display: block; width: 100%; box-sizing: border-box; border: 0; border-radius: 10px;
          /* ★ 注册/返回登录按钮是 <a> 标签，浏览器默认给它加下划线 —— 去掉 */
          text-decoration: none; -webkit-tap-highlight-color: transparent;
          background: #007AFF; color: #fff; font-size: 16px; font-weight: 600;
          height: 46px; line-height: 46px; text-align: center; cursor: pointer; margin-top: 4px; }
.zc-btn.plain { background: #F2F2F7; color: #007AFF; }
.zc-btn.gray  { background: #B8B8BE; }
.zc-btn.danger{ background: #FF3B30; }
.zc-btn[disabled] { opacity: .65; }

/* 小屏（手机）收紧留白；大屏（PC/平板）居中一列，最大 480px */
@media screen and (max-width: 767px) {
    /* ★ 卡片铺满左右两侧屏幕。
       原来 .zc-wrap 左右各 14px padding，卡片是圆角时看着还行，
       改成直角之后那圈边距就很显眼。这里把外层左右 padding 去掉，
       让 .zc-card / .zc-group 直接顶到屏幕两边；
       卡片【内部】的 .zc-field / .zc-row 仍然有 15px 内边距，
       所以文字和输入框不会贴边，只有卡片的边框铺满。 */
    .zc-wrap  { padding: 12px 0 30px; }

    /* 直接放在页面上的元素（不在卡片里的）要自己补回左右留白 */
    .zc-wrap > .zc-btn { width: auto; margin: 4px 15px 0; }
    .zc-foot    { padding: 0 14px; }

    /* 直角卡片之间不需要那么大的间距 */
    .zc-card    { margin-bottom: 10px; padding: 18px 15px; }
    .zc-group   { margin-bottom: 10px; }
}
@media screen and (min-width: 768px) {
    .zc-wrap { max-width: 480px; margin: 0 auto; padding: 28px 0 40px; }
    /* body 底色已改成全局的 #F0F0F0（见文件末尾 #zcApp 那一节），这里不再重复 */
}

/* ============================================================================
   PC / 平板：左右分栏
   —— 手机（<768px）保持单栏上下堆叠，PC 才分栏。
      用 float + margin，不用 flex/grid，保证老设备也能解析。
   ============================================================================ */
.zc-cols   { display: block; }
.zc-col-left, .zc-col-right { display: block; }
.zc-clear  { clear: both; height: 0; line-height: 0; font-size: 0; overflow: hidden; }
.zc-nav    { display: none; }        /* 手机上隐藏左侧导航 */
.zc-only-pc{ display: none; }        /* 手机上隐藏（底部已有退出按钮） */
.zc-only-mobile { display: block; }     /* 手机上显示底部退出按钮 */

@media screen and (min-width: 768px) {
    .zc-wrap      { max-width: 952px; margin: 0 auto; padding: 28px 0 40px; }
    .zc-col-left  { float: left; width: 300px; }
    .zc-col-right { margin-left: 316px; }
    .zc-clear     { clear: both; }
    .zc-nav       { display: block; }
    .zc-only-pc   { display: block; }
    .zc-only-mobile { display: none; }  /* PC 上隐藏底部退出按钮（左栏已有） */
    .zc-col-left .zc-card { margin-bottom: 16px; }
    /* 左侧导航：去掉行尾箭头，做成一整块可点区域 */
    .zc-nav .zc-row { text-decoration: none; }
    .zc-nav .zc-row:after { content: ""; }
    .zc-nav .zc-row:hover { background: #F7F7FA; }
    /* 右侧内容里的卡片不要再撑满整屏 */
    .zc-col-right .zc-group, .zc-col-right .zc-btn { max-width: 100%; }
}

/* 窄一点的 PC 窗口（768~860px）：左栏收窄，避免右侧内容被挤 */
@media screen and (min-width: 768px) and (max-width: 860px) {
    .zc-col-left  { width: 250px; }
    .zc-col-right { margin-left: 266px; }
}

/* 左侧导航项（PC 上作为标签使用） */
.zc-nav-item { display: block; padding: 13px 15px; border-bottom: 1px solid #E5E5EA;
               font-size: 15px; color: #000; text-decoration: none; cursor: pointer; }
.zc-nav-item:last-child { border-bottom: 0; }
.zc-nav-item.danger, .zc-nav-item.danger .zc-k { color: #FF3B30; }
.zc-nav-item.on { background: #007AFF; color: #fff; }
.zc-nav-item.on .zc-k { color: #fff; }

/* 手机上：导航隐藏，5 个区块全部按顺序显示（保持原来的单栏堆叠） */
.zc-sec { display: block; }

@media screen and (min-width: 768px) {
    /* PC 上：只有选中的区块显示，其余隐藏 —— 由左侧导航切换 */
    .zc-sec { display: none; }
    .zc-sec.on { display: block; }
}

/* ============================================================================
   两个按钮并排（登录页：左侧黑色「注册」+ 右侧「登录」；注册页：左侧「返回登录」+ 右侧「注册」）
   —— 刻意【不铺满整屏】：整行左右各留 15px 边距，两个按钮各占 48%、中间留 4% 缝。
      用 float 实现，不用 flex（iOS5 / 安卓4.0 兼容）。
   ============================================================================ */
.zc-btnrow { margin: 4px 15px 0; overflow: hidden; }
.zc-btnrow .zc-btn { width: 48%; float: left; margin: 0; }
.zc-btnrow .zc-btn + .zc-btn { float: right; }

/* 黑色按钮（注册 / 返回登录） */
.zc-btn-dark { background: #1C1C1E; color: #fff; }
.zc-btn-dark:active { background: #000; }

/* 图形验证码那一行。
   目标：和上面的「用户名」「密码」两行【完全等高】——都是 11 + 24 + 11 = 46px。
   做法（刻意不用绝对定位，之前那样图片会越界压到行边框上）：
     · 行内高固定 24px，上下内边距 11px；
     · 输入框和图片都用 float 左右分开，两边的 height 都写死 24px；
     · 再加 overflow:hidden 兜底 —— 这样图片在任何情况下都不可能超出这一行。
   图片原始尺寸是 120×40，等比缩到 96×24 显示，清晰度足够。 */
/* ★ 千万不要在这里写固定 height —— 全局是 box-sizing:border-box，
   那样 24px 会被上下 11px 的内边距吃掉，内容只剩 2px，文字会被裁成一半。
   让这一行自然撑开：11 + 24 + 11 = 46px，和上面两行自动等高。 */
.zc-field.zc-cap-row { padding: 11px 15px; overflow: hidden; }
/* ★ 验证码图片用 90×30 —— 原图 120×40 正好是 3:1，90×30 也是 3:1，
   等比缩放，不会被压扁。之前写 96×24 是 4:1，纵向被压扁了，看着很别扭。 */
.zc-cap-row input { float: left; width: 50%; height: 30px; line-height: 30px;
                    border: 0; padding: 0; box-sizing: content-box;
                    font-size: 15px; background: transparent; outline: 0; }
.zc-cap-row img { float: right; width: 90px; height: 30px; border: 0; cursor: pointer; display: block; }

@media screen and (max-width: 767px) {
    .zc-btnrow { margin: 4px 15px 0; }
}

/* ============================================================================
   登录页顶部：去掉白色卡片底，只留文字（视觉上直接落在页面浅灰底上）
   ============================================================================ */
.zc-card-plain {
    background: transparent;
    /* 下边距 26px —— 和「输入框→按钮」的 26px 保持一致，
       让「副标题→输入框」和「输入框→按钮」这两段间距看起来一样。 */
    padding: 22px 15px 0;
    margin-bottom: 26px;
}

/* 输入框和按钮之间拉开距离 —— 原来只差 4px，挤在一起不好看 */
.zc-btnrow { margin-top: 26px; }

/* 登录/注册两个按钮所在的表单，和上方输入组的间距也放开一点 */
.zc-wrap > form > .zc-group { margin-bottom: 0; }

/* ============================================================================
   iOS 风格弹窗（错误提示用，和主站 zchat 的弹窗观感一致）
   ============================================================================ */
.zc-dlg-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 10000;
               background: rgba(0,0,0,0.4); display: none; }
.zc-dlg-box  { position: absolute; left: 50%; top: 50%; width: 270px; margin-left: -135px;
               /* ★ 垂直居中：只做 Y 方向位移，X 用上面的 margin-left（宽度固定 270px）。
                  之前只写了 margin-left，所以弹窗的【上边】落在中心线上，看起来偏下。 */
               -webkit-transform: translateY(-50%); transform: translateY(-50%);
               background: rgba(255,255,255,0.97); border-radius: 14px; overflow: hidden;
               text-align: center; -webkit-box-shadow: 0 8px 30px rgba(0,0,0,0.25);
               box-shadow: 0 8px 30px rgba(0,0,0,0.25); }
.zc-dlg-title{ padding: 18px 18px 0; font-size: 17px; font-weight: 600; color: #000; }
.zc-dlg-body { padding: 8px 18px 18px; font-size: 14px; color: #3A3A3C; line-height: 1.55; word-break: break-word; }
.zc-dlg-btns { border-top: 1px solid #D6D6D6; }
.zc-dlg-btn  { display: block; width: 100%; height: 46px; line-height: 46px; border: 0;
               background: transparent; color: #007AFF; font-size: 17px; font-weight: 400; cursor: pointer; }
.zc-dlg-btn:active { background: #F0F0F2; }

/* ============================================================================
   登录页：PC 左右分栏
     · 左侧：居中的 ZeroID 标题 + 副标题
     · 右侧：输入框 + 验证码 + 按钮
     · 手机（<768px）：保持原来的单栏上下堆叠，什么都不变
   用 zc-cols-login 这个类做作用域，所以【不会】影响账号管理页的分栏
   （那边是 300px 固定左栏 + 内容右栏，这里是 46% / 52% 的对半开）。
   ============================================================================ */
@media screen and (min-width: 768px) {
    /* 【真正的垂直居中】
       做法：body 变 table、.zc-wrap 变 table-cell + vertical-align:middle，
       这样整块内容就正好落在屏幕的垂直中间，不管窗口多高都对。
       刻意不用 flex（iPad 1 的 iOS 5 宽度正好 768，会命中这条规则）也不用 vh
       （iOS 上 vh 算的是最大视口，会把内容顶偏）。
       只作用于登录页（body.zc-login-page），账号管理页不受影响。 */
    /* 垂直居中改由下面的 #zcApp 规则负责（用 transform，兼容 iOS5） */
    body.zc-login-page .zc-cols-login { max-width: 100%; margin: 0 auto; padding-top: 0; }

    .zc-cols-login .zc-col-left  { float: left; width: 46%; }
    .zc-cols-login .zc-col-right { margin-left: 52%; }

    /* 【两栏顶部对齐】—— 左栏第一个元素和右栏第一个输入框的上沿在同一条水平线上。
       右栏每个 .zc-field 的上内边距是 11px，这里补 11px，视觉上就齐了。
       之前左栏压了 120px、右栏是 0，所以两边错开得很明显。 */
    .zc-cols-login .zc-col-left .zc-uname { font-size: 42px; line-height: 1.15; }
    .zc-cols-login .zc-col-left .zc-uid   { font-size: 14px; margin-top: 14px; }

    /* 右栏：第一行输入框从顶部开始，不要有多余外边距 */
    .zc-cols-login .zc-col-right .zc-group  { margin-bottom: 0; }
    .zc-cols-login .zc-col-right .zc-btnrow { margin: 26px 15px 0; }
    .zc-cols-login .zc-col-right .zc-foot   { margin-top: 34px; }
    /* PC 上再拉开一点，让「忘记密码」上下留白看起来一致 */
    .zc-cols-login .zc-col-right .zc-forgot-row { margin-top: 26px; }
}

/* ============================================================================
   注册页：分步 + 密码眼睛按钮 + 行内小按钮
   ============================================================================ */

/* 密码行：右侧留出眼睛按钮的位置 */
.zc-field.zc-pwd-row { position: relative; padding-right: 44px; }
.zc-pwd-row input { padding-right: 0; }
.zc-eye { position: absolute; right: 6px; top: 50%; margin-top: -16px; width: 32px; height: 32px;
          display: block; text-align: center; cursor: pointer; line-height: 32px; }
.zc-eye svg { display: inline-block; vertical-align: middle; }
.zc-eye.on svg path { fill: #007AFF; }

/* 验证码行里的「发送验证码」—— ★ 纯文字按钮，主题蓝，不要长方形底
   · 没有背景、没有边框、没有圆角，就是一行蓝字
   · 与右侧占位区（128px）对齐：按钮宽 120px、贴右，和上面的图形验证码图片
     同宽同位 → 两行右侧元素对齐，输入框也一样宽
   · 占满输入框整行高度，文字垂直居中，点击区域更大
   · 倒计时期间变成灰色文字（同样是纯文字，不做成灰底按钮） */
.zc-inline-btn { position: absolute; right: 0; top: 0; bottom: 0;
                 width: 120px; box-sizing: border-box;
                 height: auto; line-height: 44px; padding: 0; text-align: center;
                 border: 0; background: transparent; -webkit-border-radius: 0; border-radius: 0;
                 color: #007AFF; font-size: 16px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.zc-inline-btn[disabled] { background: transparent; color: #B8B8BE; cursor: default; }

/* 邮箱验证码那一行要相对定位，小按钮才能贴右边 */
.zc-cap-row { position: relative; }

/* PC 上左栏的位置。
   ★ 登录视图和注册视图【必须用同一条规则】——
     之前给注册视图的单独特判（padding-top: 92px）会让标题在切换时上下跳，很不严谨。
     现在两个视图共用 padding-top: 60px：
       · 位置固定，点「注册」「返回登录」标题纹丝不动；
       · 60px 对两个视图来说都大致落在右栏内容的上三分之一处，视觉上协调。 */
@media screen and (min-width: 768px) {
    /* ★★★ 左右两栏都不许上下跳 —— 用「表格 + 单元格」一次解决 ★★★

       之前的问题：左栏 float、右栏也跟着内容高度变，两栏的高度不一致，
                   再加上外层整块是垂直居中的，所以切换视图时两边都在动。

       现在的做法：把 .zc-cols-login 变成一张【表格】，左右两栏各是一个【单元格】，
                   并给两个单元格都加 vertical-align: middle。
                   这样：
                     1. 两个单元格永远【等高】（表格行的固有行为），
                        —— 无论登录视图还是注册视图，行高都由较高的那一栏决定，
                           所以两栏的高度在两个视图下是一样的，不会因为切视图而改变；
                     2. 各自的【内容在两栏里垂直居中】，
                        —— 左栏只有两行标题、右栏有表单，都会落在自己的垂直中间，
                           视觉上左右是对齐的、居中的；
                     3. 因为行高恒定、对齐方式恒定，切「注册 / 返回登录」时，
                        【左右两边都纹丝不动】。

       注意：table-cell 不能用 float，所以原来的 float 和 .zc-clear 在这里都要让位。 */
    .zc-cols-login { display: table; width: 100%; max-width: 952px; margin: 0 auto; }
    .zc-cols-login .zc-col-left,
    .zc-cols-login .zc-col-right { display: table-cell; vertical-align: middle; float: none; }
    .zc-cols-login .zc-col-left  { width: 46%; padding: 0 15px; }
    /* ★ 把右栏的高度【锁死】—— 这是"不跳"的最后一把锁。
       在 table-cell 上，height 相当于 min-height：整个表格行都会被撑到这个高度。
       效果：
         登录视图右栏只有 ~250px 内容 -> 行仍被撑到 392px
         注册视图右栏有 ~330px 内容 -> 行同样 392px
       两个视图【行高完全一致】，加上两个单元格都是 vertical-align:middle，
       所以左右两栏的内容在两个视图下的位置都【一模一样】，切换时纹丝不动。
       392px 是按注册视图（更高的那个）实测出来的，留了几像素余量。 */
    .zc-cols-login .zc-col-right { width: 54%; padding: 0 0 0 6%; margin-left: 0; height: 392px; }
    .zc-cols-login .zc-clear { display: none; }

    /* 左栏标题本身不再需要额外的上内边距 —— 垂直居中由单元格负责 */
    .zc-cols-login .zc-col-left .zc-card { padding: 0; }
}

/* ============================================================================
   黑色转圈遮罩（发送验证码 / 注册提交时用，和主站 zchat 的加载动画一致）
   ============================================================================ */
.zc-ld-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 10001;
              background: rgba(0,0,0,0.32); display: none; }
.zc-ld-box  { position: absolute; left: 50%; top: 50%; width: 130px; margin-left: -65px;
              -webkit-transform: translateY(-50%); transform: translateY(-50%);
              background: rgba(28,28,30,0.92); -webkit-border-radius: 14px; border-radius: 14px;
              padding: 20px 10px 16px; text-align: center; }
.zc-ld-spin { width: 34px; height: 34px; margin: 0 auto 10px; -webkit-border-radius: 50%; border-radius: 50%;
              border: 3px solid rgba(255,255,255,0.28); border-top-color: #fff;
              -webkit-animation: zcSpin 0.8s linear infinite; animation: zcSpin 0.8s linear infinite; }
.zc-ld-txt  { color: #fff; font-size: 13.5px; line-height: 1.4; }
@-webkit-keyframes zcSpin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
@keyframes zcSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ============================================================================
   忘记密码：红色纯文字按钮 + 它上面的间距
   ============================================================================ */
/* 忘记密码：上下间距要和「Powered by ZCloud」那一侧看起来均衡，
   所以给它一个明确的上外边距（而不是贴着按钮行），字体也放大到 15px。 */
.zc-forgot-row { margin: 22px 15px 0; text-align: center; }
.zc-link-btn { border: 0; background: transparent; -webkit-border-radius: 0; border-radius: 0;
               color: #FF3B30; font-size: 15px; padding: 6px 0; cursor: pointer;
               -webkit-appearance: none; appearance: none; }
.zc-link-btn:active { opacity: .6; }

/* ============================================================================
   ★ 全站外壳 #zcApp —— 【严格照抄主站 zchat 的 #app 适配规则】
     三条，就是 zchat 里那三条，参数一个不改：

       ① 手机       width:100%; height:100%; max-width:500px; margin:0 auto;
                    position:relative; overflow:hidden
       ② PC ≥768px  max-width:900px; height:calc(100% - 80px);
                    max-height:calc(100% - 80px); margin:40px auto;
                    border-radius:12px; overflow:hidden; box-shadow:0 2px 20px rgba(0,0,0,.08)
       ③ 矮屏 ≤700px height:100%; max-height:100%; margin:0;
                    border-radius:0; box-shadow:none

     ★ 关键差别（之前我做错了）：
       zchat 用的是【固定高度 + overflow:hidden】，页面本身【不滚动】，
       滚动发生在卡片【内部】。这就是它"缩放"起来和普通网页不一样的根源。
       我之前用的是 min-height，卡片会随内容长高、然后整页滚动 —— 完全不是一回事。

     ★ 颜色（全部来自浏览器对 zchat 的实测 computed style，不是看代码猜的）：
         页面 body   = #F0F0F0   rgb(240,240,240)
         卡片 #zcApp = #EFEFF4   rgb(239,239,244)   ← 比页面略亮一点点
       两者只差几个色阶，几乎看不出色差；卡片靠这点细微明度差 + 阴影浮起来。
       手机端外壳保持透明，沿用页面原来的底，外观和以前基本一致。
   ============================================================================ */
html, body { width: 100%; height: 100%; }
/* ★ 页面底色：浏览器实测 zchat 的 body 是 rgb(240,240,240) = #F0F0F0，
   不是 #EFEFF4 —— 卡片才是 #EFEFF4。两者只差几个色阶，几乎看不出色差，
   但边界处能看出卡片略亮，配合阴影就"浮"起来了，这正是 zchat 的观感。 */
body { background: #F0F0F0; }

/* ① 手机 */
#zcApp { width: 100%; height: 100%; max-width: 500px; margin: 0 auto;
         position: relative; overflow: hidden; background: transparent;
         -webkit-box-sizing: border-box; box-sizing: border-box; }

/* 卡片内部滚动（zchat 也是这个套路：外壳固定，内容在里面滚） */
#zcApp .zc-wrap { width: 100%; height: 100%;
                  overflow-y: auto; -webkit-overflow-scrolling: touch;
                  -webkit-box-sizing: border-box; box-sizing: border-box; }

/* ② PC / 平板 */
@media screen and (min-width: 768px) {
    #zcApp { max-width: 900px;
             height: -webkit-calc(100% - 80px); height: calc(100% - 80px);
             max-height: -webkit-calc(100% - 80px); max-height: calc(100% - 80px);
             margin: 40px auto;
             -webkit-border-radius: 12px; border-radius: 12px;
             overflow: hidden;
             box-shadow: 0 2px 20px rgba(0,0,0,0.08);
             /* ★ 卡片底色 = #EFEFF4（实测值），比页面的 #F0F0F0 略亮一点点 */
             background: #EFEFF4; }
    #zcApp .zc-wrap { padding: 28px 26px 40px; }

    /* 登录 / 注册 / 忘记密码：内容在卡片里垂直居中，不参与内部滚动 */
    body.zc-login-page #zcApp .zc-wrap {
        position: absolute; top: 50%; left: 0; right: 0;
        -webkit-transform: translateY(-50%); transform: translateY(-50%);
        height: auto; overflow: visible; padding: 0; }
}

/* ③ ★★★ zchat 真正的那一条：宽度 768 ~ 1023px 时【完全填满】★★★
       来源：zchat.css 第 185 行
         @media screen and (min-width:768px) and (max-width:1023px){
             #app{height:100%;max-height:100%;margin:0;border-radius:0;box-shadow:none}
         }
       ★ 我之前错误地以为是 max-height:700px（按【高度】判断），
         实际 zchat 是按【宽度】判断的 —— 所以窗口拉窄时它填满、我却不填满，
         这就是"缩小一定程度上下还有空隙"的原因。
       这一条必须放在 ② 之后，才能覆盖掉 ② 的 40px 留白 + 12px 圆角 + 阴影。 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    #zcApp { height: 100%; max-height: 100%; margin: 0;
             -webkit-border-radius: 0; border-radius: 0; box-shadow: none; }
}

/* ============================================================================
   ★ 输入弹窗（参考 zchat 的 ios-alert）—— 左侧取消（红） 右侧确认（蓝粗）
     全部用 float / border-radius / transform，没有 flex，兼容 iOS5
   ============================================================================ */
.ios-alert-overlay { position: fixed; left: 0; top: 0; right: 0; bottom: 0;
                     background: rgba(0,0,0,0.4); z-index: 30000; display: none; }
.ios-alert-overlay.show { display: block; }
.ios-alert { position: absolute; top: 50%; left: 50%; width: 270px; margin-left: -135px;
             -webkit-transform: translateY(-50%); transform: translateY(-50%);
             background: rgba(255,255,255,0.97);
             -webkit-border-radius: 14px; border-radius: 14px; overflow: hidden; }
.ios-alert-title { padding: 12px 16px 4px; font-size: 17px; font-weight: 600; color: #000; text-align: center; }
.ios-alert-subtitle { padding: 0 16px; font-size: 12.5px; color: #8E8E93; text-align: center; line-height: 1.5; }
.ios-alert-input-wrap { padding: 12px 16px 16px; }
.ios-alert-input { width: 100%; height: 36px; padding: 0 10px;
                   border: 1px solid #C8C8CC; -webkit-border-radius: 7px; border-radius: 7px;
                   font-size: 15px; color: #000; background: #FFF; outline: none;
                   -webkit-appearance: none; appearance: none;
                   -webkit-box-sizing: border-box; box-sizing: border-box; font-family: inherit; }
.ios-alert-input:focus { border-color: #007AFF; }
.ios-alert-buttons { overflow: hidden; border-top: 1px solid #C8C8CC; }
.ios-alert-btn { float: left; width: 50%; height: 44px; line-height: 44px; text-align: center;
                 font-size: 17px; color: #007AFF; background: none; border: none; cursor: pointer;
                 -webkit-appearance: none; appearance: none; padding: 0; margin: 0; font-family: inherit; }
.ios-alert-btn:active { background: rgba(0,0,0,0.05); }
/* 左：取消（红）  右：确认（蓝加粗） */
.ios-alert-btn-cancel { color: #FF3B30; border-right: 1px solid #C8C8CC; font-weight: 400; }
.ios-alert-btn-ok { font-weight: 600; }

/* ============================================================================
   ★★ 账号管理页 PC：满高两栏 + 1px 分隔线 —— 照 zchat 的 .sidebar / 主内容区 ★★
       zchat 的 PC 结构是：
         #app（灰 #EFEFF4，整张卡片）
           ├ .sidebar      300px 满高，背景 #EFEFF4，border-right: 1px solid #C8C8CC
           └ 主内容区       满高，背景 #FFF
         两栏【贴着卡片边、顶到卡片顶和底】，靠一条 1px 边框分隔。

       我之前的做法是「左栏一张浮动白卡片 + 中间留灰缝 + 右栏一张浮动白卡片」，
       所以看起来是"两张卡片浮着"，和 zchat 完全不是一回事。

       只作用于账号页（容器上的 zc-cols-account 类），登录/注册页不受影响。
       所有规则都在 ≥768px 里，手机端（单栏 + 二级页）完全不变。
   ============================================================================ */
@media screen and (min-width: 768px) {
    /* 整个账号页铺满卡片，不要外壳的 26px 内边距，两栏才能贴到卡片边 */
    #zcApp .zc-cols-account { display: table; width: 100%; height: 100%; table-layout: fixed; }
    #zcApp:has(.zc-cols-account) .zc-wrap { padding: 0; }

    /* 左栏：满高灰栏 + 右侧 1px 分隔线 */
    #zcApp .zc-cols-account .zc-col-left {
        display: table-cell; float: none; width: 300px; vertical-align: top;
        background: #EFEFF4; border-right: 1px solid #C8C8CC; padding: 0; }
    /* 右栏：满高白色内容区 */
    #zcApp .zc-cols-account .zc-col-right {
        display: table-cell; float: none; width: auto; margin-left: 0; height: auto;
        vertical-align: top; background: #FFF; padding: 0;
        /* ★ 加固：窗口缩小/放大时，右栏内容不许被压成一团 */
        word-break: break-word; overflow-wrap: break-word; }
    #zcApp .zc-cols-account .zc-col-right * { max-width: 100%; }
    #zcApp .zc-cols-account .zc-col-right input,
    #zcApp .zc-cols-account .zc-col-right .zc-btn { max-width: 100%; }

    /* 左栏里的卡片/导航：去掉浮动和圆角，做成贴边的列表（像 zchat 的聊天列表） */
    #zcApp .zc-cols-account .zc-col-left .zc-card {
        margin: 0; padding: 22px 15px 18px; background: transparent; border-radius: 0; }
    #zcApp .zc-cols-account .zc-nav { margin: 0; background: #FFF; border-radius: 0; }
    #zcApp .zc-cols-account .zc-nav-item:last-child { border-bottom: none; }
    /* 退出登录现在是导航项（.zc-nav-item），不再单独写样式；
       下面这条只保证 PC 上显示（手机上用底部那个 zc-only-mobile） */
    #zcApp .zc-cols-account .zc-nav-item.zc-only-pc { display: block; border-bottom: none; }

    /* 右栏内容留内边距，不要贴边 */
    /* ★★ 千万不要写 display:block ★★
       原本的设计是「PC 上只显示当前选中的那一个 .zc-sec」——
       左边点哪一项，右边就只出现那一块。
       我上一版手贱写了 display:block，把 5 个功能区全部强制显示出来，
       结果就是"右侧把全部功能都罗列出来了、点左侧也没反应"。
       正确的写法：默认 none，只有 .on 才是 block。 */
    #zcApp .zc-cols-account .zc-sec { display: none; padding: 22px 26px 0; }
    #zcApp .zc-cols-account .zc-sec.on { display: block; }
    #zcApp .zc-cols-account .zc-clear { display: none; }
}
/* :has() 在旧浏览器不支持 —— 补一条降级：用相邻的类给 .zc-wrap 去边距 */
@media screen and (min-width: 768px) {
    body.zc-account-page #zcApp .zc-wrap { padding: 0; }
}

/* ============================================================================
   ★★★ 账号页：iOS 9 iPad「设置」App 的左右分栏 ★★★
   左边（设置列表）：白底 + 彩色圆角图标 + 文字；选中的那行是蓝底白字
   右边（内容区）  ：灰底 #EFEFF4 + 【每一组各自一张白色圆角卡片】，卡片间留灰缝
   只作用于 PC（≥768px），手机端 / 登录页完全不受影响。
   ============================================================================ */
@media screen and (min-width: 768px) {

    /* ---------- 左栏：白底 ---------- */
    #zcApp .zc-cols-account .zc-col-left {
        background: #FFF; border-right: 1px solid #C8C8CC; }
    #zcApp .zc-cols-account .zc-col-left .zc-card {
        margin: 0; padding: 18px 15px 16px; background: #FFF;
        -webkit-border-radius: 0; border-radius: 0; }

    /* 导航列表：无圆角、无外边距 */
    #zcApp .zc-cols-account .zc-nav {
        margin: 0; background: #FFF; -webkit-border-radius: 0; border-radius: 0; }

    /* 每一行：白底 + 图标 + 文字，左侧统一 15px */
    #zcApp .zc-cols-account .zc-nav-item {
        position: relative; display: block; padding: 0 15px 0 15px;
        height: 46px; line-height: 46px; font-size: 17px; color: #000;
        border-bottom: 1px solid #C8C8CC; text-decoration: none; cursor: pointer; }
    #zcApp .zc-cols-account .zc-nav-item:last-child { border-bottom: none; }
    /* 分隔线从图标右侧开始，不占满整行（iOS 特征） */
    #zcApp .zc-cols-account .zc-nav-item:after {
        content: ''; position: absolute; left: 15px; right: 0; bottom: -1px;
        height: 1px; background: #C8C8CC; display: none; }

    /* ★ 选中：蓝底 + 白字（图标保持原色，iOS 就是这样的） */
    #zcApp .zc-cols-account .zc-nav-item.on {
        background: #147EFB; color: #FFF; }
    #zcApp .zc-cols-account .zc-nav-item.on .zc-k { color: #FFF; }
    #zcApp .zc-cols-account .zc-nav-item.on:after { background: transparent; }
    #zcApp .zc-cols-account .zc-nav-item:active { background: #D1D1D6; }
    #zcApp .zc-cols-account .zc-nav-item.danger .zc-k { color: #FF3B30; }
    #zcApp .zc-cols-account .zc-nav-item.danger.on { background: #147EFB; }
    #zcApp .zc-cols-account .zc-nav-item.danger.on .zc-k { color: #FFF; }

    /* ---------- 右栏：灰底 ---------- */
    #zcApp .zc-cols-account .zc-col-right {
        background: #EFEFF4; padding: 0; }
    /* 内容区上下留 20px，左右留 20px，卡片才浮得起来 */
    #zcApp .zc-cols-account .zc-col-right .zc-sec {
        display: none; padding: 20px 20px 0; }
    #zcApp .zc-cols-account .zc-col-right .zc-sec.on { display: block; }

    /* ★ 每一组 = 一张独立的白色圆角卡片（四个角都圆） */
    #zcApp .zc-cols-account .zc-col-right .zc-group {
        background: #FFF; margin: 0 0 22px; padding: 0;
        -webkit-border-radius: 10px; border-radius: 10px; overflow: hidden; }

    /* 组标题：小号灰字，无底色 */

    /* 行 */
    #zcApp .zc-cols-account .zc-col-right .zc-field {
        position: relative; background: #FFF; padding: 0; min-height: 44px;
        border-bottom: 0;
        /* ★ 分隔线改【满宽】：原来从左侧 15px 才开始（iOS 那种缩进线），
           左侧会缺一块，改成整行从左到右完整的一条线 */
        background-image: -webkit-linear-gradient(left, #C8C8CC 0, #C8C8CC 100%);
        background-image: linear-gradient(to right, #C8C8CC 0, #C8C8CC 100%);
        background-repeat: no-repeat; background-position: left bottom; background-size: 100% 1px; }
    #zcApp .zc-cols-account .zc-col-right .zc-field:last-child { background-image: none; }

    /* ★ 按钮 -> 整行 item */
    #zcApp .zc-cols-account .zc-col-right .zc-btn {
        position: relative; display: block; width: 100%; text-align: left;
        background: transparent; color: #000; font-size: 17px; font-weight: 400;
        padding: 0 32px 0 15px; margin: 0; height: 44px; line-height: 44px;
        border: 0; -webkit-border-radius: 0; border-radius: 0; box-shadow: none;
        -webkit-box-sizing: border-box; box-sizing: border-box; }
    #zcApp .zc-cols-account .zc-col-right .zc-btn:active { background: #D1D1D6; }
    #zcApp .zc-cols-account .zc-col-right .zc-btn:after {
        content: '\203A'; position: absolute; right: 15px; top: 0;
        color: #C7C7CC; font-size: 20px; line-height: 44px; }
    #zcApp .zc-cols-account .zc-col-right .zc-btn.danger {
        color: #FF3B30; background: transparent; text-align: left; }
    #zcApp .zc-cols-account .zc-col-right .zc-btn[disabled] { color: #C7C7CC; opacity: 1; }
    #zcApp .zc-cols-account .zc-col-right .zc-btn[disabled]:after { content: ''; }

    /* 输入框 */
    #zcApp .zc-cols-account .zc-col-right .zc-field > input[type="text"],
    #zcApp .zc-cols-account .zc-col-right .zc-field > input[type="password"] {
        display: block; width: 100%; height: 44px; padding: 0 15px; margin: 0;
        border: 0; background: transparent; font-size: 16px; color: #000;
        -webkit-box-sizing: border-box; box-sizing: border-box; }
    #zcApp .zc-cols-account .zc-col-right .zc-field > input::-webkit-input-placeholder { color: #C7C7CC; }

    /* 只读信息行 */
    #zcApp .zc-cols-account .zc-col-right .zc-row { padding: 0 15px; min-height: 44px; }
    #zcApp .zc-cols-account .zc-col-right .zc-row .zc-k {
        font-size: 17px; line-height: 44px; color: #000; float: left; }
    #zcApp .zc-cols-account .zc-col-right .zc-row .zc-v {
        font-size: 17px; color: #8E8E93; line-height: 44px; float: right; }

}

/* ============================================================================
   ★★★ 账号页左栏 —— 满宽、纯白、只用 1px 线分隔（你要的：四周不要灰缝）★★★
     · 左栏底色白色，卡片和导航全部【满宽】，左右上下都不留灰缝
     · 每一行之间用 1px #C8C8CC 分隔
     · 退出登录单独一行，上面一条 1px 线分开，红字
   ============================================================================ */
@media screen and (min-width: 768px) {
    #zcApp .zc-cols-account .zc-col-left {
        background: #FFF; border-right: 1px solid #C8C8CC; padding: 0; }
    #zcApp .zc-cols-account .zc-col-left .zc-card,
    #zcApp .zc-cols-account .zc-col-left .zc-nav {
        position: relative; background: #FFF; margin: 0;
        -webkit-border-radius: 0; border-radius: 0; overflow: hidden; }
    #zcApp .zc-cols-account .zc-col-left .zc-card { padding: 14px 15px; }

    /* 组内每一行：满宽 + 1px 分隔线 */
    #zcApp .zc-cols-account .zc-nav-item {
        position: relative; display: block; padding: 0 15px;
        height: 46px; line-height: 46px; font-size: 17px; color: #000;
        border-bottom: 1px solid #C8C8CC; text-decoration: none; cursor: pointer; }
    #zcApp .zc-cols-account .zc-nav-item:last-child { border-bottom: none; }

    /* 退出登录：单独一行，上面一条线分开，红字 */
    #zcApp .zc-cols-account .zc-nav-logout {
        border-top: 1px solid #C8C8CC; margin: 0; background: #FFF; }
    #zcApp .zc-cols-account .zc-nav-logout .zc-nav-item { border-bottom: none; }
    #zcApp .zc-cols-account .zc-nav-logout .zc-nav-item .zc-k { color: #FF3B30; }
    #zcApp .zc-cols-account .zc-nav-logout .zc-nav-item.on { background: #147EFB; }
    #zcApp .zc-cols-account .zc-nav-logout .zc-nav-item.on .zc-k { color: #FFF; }
}

/* ============================================================================
   ★ 头像改成【圆形】★（上一版做成方形圆角是错的）
   手机和 PC 都用这一套。
   ============================================================================ */
.zc-card-me .zc-avatar,
.zc-card-me .zc-avatar img {
    -webkit-border-radius: 50%; border-radius: 50%; }
.zc-card-me .zc-avatar { width: 60px; height: 60px; line-height: 60px; }

/* 手机端：账号卡和下面分开，卡片自成一张白卡（灰底透出缝隙） */
.zc-nav-logout { margin-top: 12px; background: #FFF;
                 -webkit-border-radius: 10px; border-radius: 10px; overflow: hidden; }
.zc-nav-logout .zc-nav-item { border-bottom: none; }
.zc-nav-logout .zc-nav-item .zc-k { color: #FF3B30; }

/* ============================================================================
   PC 账号页左栏：iOS「设置」分组风格
   —— 顶部账号卡改成【横排】（头像在左、用户名/邮箱在右，截图样式）
   —— 账号卡下方、以及「隐私和安全」与「退出登录」之间，各加一条灰色分隔条
   只作用于 PC（≥768px）；手机端保持原样（分隔条隐藏，账号卡仍居中堆叠）。
   ============================================================================ */
.zc-hsep { display: none; }   /* 默认（手机端）不显示灰色分隔条 */

@media screen and (min-width: 768px) {
    /* 左栏整体改灰底：白色分组块浮在灰底上，
       退出登录按钮下方的空白区自然露出灰色
       ★ 颜色和右栏背景保持一致（#EFEFF4），不深不浅 */
    #zcApp .zc-cols-account .zc-col-left { background: #EFEFF4; }

    /* ---------- 账号卡：横排 ---------- */
    /* 用 display:table 两栏（头像格 + 信息格），不用 flex，兼容老浏览器 */
    #zcApp .zc-cols-account .zc-col-left .zc-card-me {
        display: table; width: 100%; table-layout: fixed;
        margin: 0; padding: 16px 15px; background: #FFF;
        text-align: left; }
    /* 头像：左格，垂直居中 */
    #zcApp .zc-cols-account .zc-card-me .zc-avatar {
        display: table-cell; width: 60px; height: 60px; margin: 0;
        vertical-align: middle; }
    /* 用户名 + 邮箱：右格，垂直居中，左边留缝 */
    #zcApp .zc-cols-account .zc-card-me .zc-info {
        display: table-cell; vertical-align: middle; width: auto;
        padding-left: 13px; overflow: hidden; }
    /* 用户名：黑色加粗，和截图一致 */
    #zcApp .zc-cols-account .zc-card-me .zc-uname {
        font-size: 17px; line-height: 1.3; text-align: left;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* 邮箱：灰色小字 */
    #zcApp .zc-cols-account .zc-card-me .zc-uid {
        margin-top: 3px; text-align: left;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* ---------- 灰色分隔条（与左栏灰底同色，形成连续灰缝） ---------- */
    #zcApp .zc-cols-account .zc-hsep {
        display: block; height: 10px; background: #EFEFF4; }

    /* 退出登录组：已用上面的灰色分隔条隔开，原来的 1px 顶线去掉 */
    #zcApp .zc-cols-account .zc-nav-logout { border-top: 0; }
}

/* ============================================================================
   「购买改名卡」行：修复 > 箭头和右侧文字错位
   —— 原 .zc-row:after 用 float:right，会浮到右侧文字的【左边】（> 跑到价格前面）
   —— 改成绝对定位贴在行最右，行右侧留 32px 给箭头，文字和箭头不再打架
   ============================================================================ */
.zc-row.zc-buy-row { padding-right: 32px; }
.zc-row.zc-buy-row:after {
    position: absolute; right: 15px; top: 50%; margin-top: -9px;
    float: none; margin-left: 0; line-height: 1; font-size: 18px; }
/* PC 右栏的行 padding 特异性更高，这里再补一条 */
@media screen and (min-width: 768px) {
    #zcApp .zc-cols-account .zc-col-right .zc-row.zc-buy-row { padding-right: 32px; }
}

/* ============================================================================
   PC 右侧：分组间距统一 + 「选择一个设置项」空状态
   —— 原来卡片组间距 22px，跨区块时又叠上下一个 .zc-sec 的 20px 顶部 padding，
      导致「修改用户名→修改头像」之间的间隙比组内大，视觉上左右不一致。
      现在全部统一成 20px。
   ============================================================================ */
@media screen and (min-width: 768px) {
    /* 组与组之间统一 20px */
    #zcApp .zc-cols-account .zc-col-right .zc-group { margin-bottom: 20px; }
    /* 每个区块的最后一组去掉底部间距（由下一个区块的 padding-top 提供） */
    #zcApp .zc-cols-account .zc-col-right .zc-sec .zc-group:last-child { margin-bottom: 0; }

    /* 空状态：默认显示，选中某个设置项后由 JS 隐藏 */
    #zcApp .zc-cols-account .zc-empty {
        display: block; padding: 60px 20px; text-align: center; }
    #zcApp .zc-cols-account .zc-empty-txt {
        font-size: 15px; color: #8E8E93; }
}
/* 手机端：所有区块按顺序显示，空状态永远隐藏 */
.zc-empty { display: none; }

/* ============================================================================
   iOS15 风格细节：
   1) 左栏的账号卡 / 导航 / 退出登录 改成和右栏一样的白色圆角卡片
      （inset grouped：卡片左右留灰边、圆角 10px、卡片间灰缝）
   2) 「选择一个设置项」空状态在右侧区域垂直居中
   3) 右侧顶部大标题栏（iOS15 Large Title：34px Bold）
   ============================================================================ */
@media screen and (min-width: 768px) {
    /* --- 左栏三块：白色圆角卡片浮在灰底上 --- */
    #zcApp .zc-cols-account .zc-col-left .zc-card-me,
    #zcApp .zc-cols-account .zc-col-left .zc-nav,
    #zcApp .zc-cols-account .zc-col-left .zc-nav-logout {
        margin-left: 14px; margin-right: 14px;
        -webkit-border-radius: 10px; border-radius: 10px; overflow: hidden;
    }
    #zcApp .zc-cols-account .zc-col-left .zc-card-me { margin-top: 14px; }
    /* 卡片之间的灰色分隔条也跟着缩进，和卡片同宽 */
    #zcApp .zc-cols-account .zc-hsep { margin-left: 14px; margin-right: 14px; }

    /* --- 空状态：在右侧区域内垂直居中（flex 居中，JS 控制 display）
       ★ iOS5 只认 -webkit-box 老语法，必须写在前；-webkit-flex/flex 是 iOS6+ 才认的 */
    #zcApp .zc-cols-account .zc-col-right { position: relative; }
    #zcApp .zc-cols-account .zc-col-right .zc-empty {
        position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center;
        display: -webkit-flex; display: flex;
        -webkit-align-items: center; align-items: center;
        -webkit-justify-content: center; justify-content: center;
        width: 100%; margin: 0; padding: 0; }
    #zcApp .zc-cols-account .zc-col-right .zc-empty-txt {
        font-size: 15px; color: #8E8E93; }

    /* --- 右侧顶部标题栏（iOS15 Large Title） --- */
    #zcApp .zc-cols-account .zc-col-right .zc-sec-title {
        display: none;
        font-size: 34px; font-weight: 700; color: #000; line-height: 1.2;
        padding: 20px 20px 0; }
}

/* ============================================================================
   iOS15 细节修正（针对截图反馈的「错位 / 分割线不一致 / 看着不舒服」）：
   1) 分割线统一成 iOS15 浅灰 #E5E5EA —— 左栏导航项原来 #C8C8CC 偏深，
      与右栏行分隔线颜色不一致；右栏按钮行分隔线也同步改浅。
   2) 头像图片：原来 76px 图塞进 60px 圆形容器会裁掉右上角（错位），
      改成和容器等大的 60px，居中显示。
   3) 左栏卡片之间灰缝由 10px 加宽到 20px，和右栏卡片间距（20px）一致。
   ============================================================================ */
@media screen and (min-width: 768px) {
    /* 左栏导航项分隔线：统一 iOS15 浅灰 */
    #zcApp .zc-cols-account .zc-col-left .zc-nav-item { border-bottom: 1px solid #E5E5EA; }
    /* ★ 最后一项（隐私和安全 / 退出登录）底部不能有线：
       上面的统一分隔线规则特异性更高，把原来 :last-child 去线的规则压掉了，
       导致卡片底部多一条横线、圆角收尾被破坏。这里用更高特异性强制去线。 */
    #zcApp .zc-cols-account .zc-col-left .zc-nav-item:last-child { border-bottom: none; }
    /* 右栏按钮行分隔线：同步浅灰（仍是满宽） */
    #zcApp .zc-cols-account .zc-col-right .zc-field {
        background-image: -webkit-linear-gradient(left, #E5E5EA 0, #E5E5EA 100%);
        background-image: linear-gradient(to right, #E5E5EA 0, #E5E5EA 100%); }
    /* 左栏卡片间灰缝加宽，和右栏卡片间距一致 */
    #zcApp .zc-cols-account .zc-hsep { height: 20px; }

    /* 账号卡：flex 严格垂直居中；头像固定 60px，文字区撑满剩余。
       ★ width 必须用 auto（不能用 100%）：100% + 左右 margin 14px 会让卡片
       总宽超出左栏 300px，向右溢出 11px（截图里账号卡比下面导航卡宽、错位）
       ★ iOS5 只认 -webkit-box 老语法（display:-webkit-box + box-align/box-flex），
       -webkit-flex/flex 是 iOS6+ 才认的；老语法必须写在最前面。 */
    #zcApp .zc-cols-account .zc-col-left .zc-card-me {
        display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: start;
        display: -webkit-flex; display: flex;
        -webkit-align-items: center; align-items: center;
        width: auto; margin: 14px 14px 0; padding: 16px 15px;
        text-align: left; }
    #zcApp .zc-cols-account .zc-col-left .zc-card-me .zc-avatar {
        display: block; -webkit-box-flex: 0;
        -webkit-flex: 0 0 60px; flex: 0 0 60px;
        width: 60px; height: 60px; margin: 0; }
    #zcApp .zc-cols-account .zc-card-me .zc-info {
        display: block; -webkit-box-flex: 1;
        -webkit-flex: 1 1 auto; flex: 1 1 auto;
        padding-left: 13px; overflow: hidden; }
}
/* 头像图片：和 60px 圆形容器等大（原来 76px 图裁左上角，显示会偏） */
.zc-card-me .zc-avatar img { width: 60px; height: 60px; }

/* ============================================================================
   手机端 iOS15「设置」风格（<768px）：
   —— 首页：账号卡（横排）+ 导航列表 + 退出登录，白色圆角卡片浮在灰底，
      分组灰缝 20px，卡片左右留边 14px（inset-grouped）
   —— 点导航：右栏整体变成全屏面板，从右向左滑入（transform 动画），
      顶部 iOS 导航栏（左返回 + 居中标题），面板内按分组显示对应设置项
   —— 兼容 iOS5（-webkit- 前缀 + -webkit-box 老语法）；
     无 transform 的老 IE（Windows XP）由 JS 自动降级为 display 切换、无动画
   ============================================================================ */
.zc-m-head { display: none; }   /* PC 隐藏手机标题栏 */

@media screen and (max-width: 767px) {
    /* ---------- 首页：账号卡横排（iOS15 设置顶部风格）
       ★ iOS5 只认 -webkit-box 老语法（display:-webkit-box + box-align/box-flex），
       -webkit-flex/flex 是 iOS6+ 才认的；老语法必须写在最前面。 */
    #zcApp .zc-cols-account .zc-col-left .zc-card-me {
        display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: start;
        display: -webkit-flex; display: flex;
        -webkit-align-items: center; align-items: center;
        width: auto; margin: 14px 14px 0; padding: 16px 15px;
        text-align: left; background: #FFF;
        -webkit-border-radius: 10px; border-radius: 10px; overflow: hidden;
        -webkit-box-sizing: border-box; box-sizing: border-box; }
    #zcApp .zc-cols-account .zc-col-left .zc-card-me .zc-avatar {
        display: block; -webkit-box-flex: 0;
        -webkit-flex: 0 0 60px; flex: 0 0 60px;
        width: 60px; height: 60px; margin: 0; line-height: 60px;
        font-size: 26px; -webkit-border-radius: 50%; border-radius: 50%; }
    #zcApp .zc-cols-account .zc-card-me .zc-info {
        display: block; -webkit-box-flex: 1;
        -webkit-flex: 1 1 auto; flex: 1 1 auto;
        padding-left: 13px; overflow: hidden; }

    /* ---------- 灰色分隔条：手机端显示，作为卡片之间的灰缝（与卡片同宽） ---------- */
    #zcApp .zc-cols-account .zc-hsep { display: block; height: 20px; margin-left: 14px; margin-right: 14px; }

    /* ---------- 首页导航列表（iOS cell：44px 行 + 右箭头 ›） ---------- */
    #zcApp .zc-cols-account .zc-col-left .zc-nav { display: block; }
    #zcApp .zc-cols-account .zc-col-left .zc-nav,
    #zcApp .zc-cols-account .zc-col-left .zc-nav-logout {
        margin-left: 14px; margin-right: 14px; background: #FFF;
        -webkit-border-radius: 10px; border-radius: 10px; overflow: hidden; }
    #zcApp .zc-cols-account .zc-nav-logout { margin-top: 0; border-top: 0; }
    #zcApp .zc-cols-account .zc-col-left .zc-nav-item {
        display: block; height: 44px; line-height: 44px; padding: 0 15px;
        font-size: 17px; color: #000; border-bottom: 1px solid #E5E5EA;
        text-decoration: none; cursor: pointer; position: relative;
        -webkit-tap-highlight-color: transparent; }
    #zcApp .zc-cols-account .zc-col-left .zc-nav-item:last-child { border-bottom: none; }
    #zcApp .zc-cols-account .zc-col-left .zc-nav-item .zc-k { color: #000; font-size: 17px; }
    /* 行尾右箭头（iOS 设置那种灰色 ›） */
    #zcApp .zc-cols-account .zc-col-left .zc-nav-item:after {
        content: "\203A"; position: absolute; right: 15px; top: 50%;
        margin-top: -14px; color: #C7C7CC; font-size: 21px; line-height: 1; }
    #zcApp .zc-cols-account .zc-col-left .zc-nav-item:active { background: #D1D1D6; }
    /* 退出登录：独立一组，红字（覆盖 zc-only-pc 的手机隐藏） */
    #zcApp .zc-cols-account .zc-col-left .zc-nav-logout .zc-nav-item .zc-k { color: #FF3B30; }
    #zcApp .zc-cols-account .zc-col-left .zc-nav-logout .zc-only-pc { display: block; }
    /* 退出登录行不加右箭头（和 iOS 红色按钮行一致） */
    #zcApp .zc-cols-account .zc-col-left .zc-nav-logout .zc-nav-item:after { content: ""; }
    /* 首页底部独立退出按钮不再需要（首页导航里已有退出登录入口） */
    #zcLogoutBtnBottom { display: none; }

    /* ---------- 右侧面板：全屏，从右向左滑入 ---------- */
    #zcApp .zc-cols-account .zc-col-right {
        position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        margin: 0; background: #EFEFF4; z-index: 300;
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        display: none;   /* 默认隐藏；支持 transform 的设备由 JS 加 .zc-m-active */
    }
    /* 支持 transform（iOS5+/现代浏览器）：面板常驻屏幕外，加 .zc-m-open 滑入 */
    #zcApp .zc-cols-account .zc-col-right.zc-m-active {
        display: -webkit-box; -webkit-box-orient: vertical;
        display: -webkit-flex; -webkit-flex-direction: column;
        display: flex; flex-direction: column;
        -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
        -webkit-transition: -webkit-transform 0.28s ease-out; transition: transform 0.28s ease-out;
        -webkit-backface-visibility: hidden; backface-visibility: hidden; }
    #zcApp .zc-cols-account .zc-col-right.zc-m-active.zc-m-open {
        -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

    /* ---------- 面板顶部 iOS 导航栏（左返回 + 居中标题） ---------- */
    #zcApp .zc-cols-account .zc-col-right .zc-m-head {
        display: -webkit-box; display: -webkit-flex; display: flex;
        -webkit-box-align: center; -webkit-align-items: center; align-items: center;
        -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
        position: relative; height: 50px; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto;
        background: #F7F7F8; border-bottom: 1px solid #E5E5EA; }
    #zcApp .zc-cols-account .zc-col-right .zc-m-back {
        position: absolute; left: 4px; top: 0; bottom: 0;
        display: -webkit-box; display: -webkit-flex; display: flex;
        -webkit-box-align: center; -webkit-align-items: center; align-items: center;
        border: 0; background: transparent; color: #007AFF; font-size: 16px;
        cursor: pointer; padding: 0 10px; -webkit-appearance: none; appearance: none; }
    #zcApp .zc-cols-account .zc-col-right .zc-m-back svg {
        width: 11px; height: 19px; margin-right: 4px;
        display: block; -webkit-flex-shrink: 0; flex-shrink: 0; }
    #zcApp .zc-cols-account .zc-col-right .zc-m-back:active { opacity: .5; }
    #zcApp .zc-cols-account .zc-col-right .zc-m-title {
        font-size: 17px; font-weight: 600; color: #000;
        max-width: 60%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

    /* ---------- 面板内容：分组卡片 + 滚动 ---------- */
    #zcApp .zc-cols-account .zc-col-right .zc-secs {
        -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto;
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        padding: 20px 0 30px; }
    /* 面板内：区块按分组显隐（复用 PC 的 .on 机制） */
    #zcApp .zc-cols-account .zc-col-right .zc-sec { display: none; }
    #zcApp .zc-cols-account .zc-col-right .zc-sec.on { display: block; }
    /* 分组卡片：iOS inset-grouped（左右留边 + 圆角 10px） */
    #zcApp .zc-cols-account .zc-col-right .zc-group {
        margin: 0 14px 20px; -webkit-border-radius: 10px; border-radius: 10px;
        overflow: hidden; }

    /* ---------- 面板内按钮/行：和 PC 右栏一致的 iOS 行样式 ----------
       （按钮不再是蓝色大按钮，而是整行 item：左对齐文字 + 右侧 › 箭头） */
    #zcApp .zc-cols-account .zc-col-right .zc-field {
        position: relative; background: #FFF; padding: 0; min-height: 44px;
        border-bottom: 0;
        background-image: -webkit-linear-gradient(left, #E5E5EA 0, #E5E5EA 100%);
        background-image: linear-gradient(to right, #E5E5EA 0, #E5E5EA 100%);
        background-repeat: no-repeat; background-position: left bottom; background-size: 100% 1px; }
    #zcApp .zc-cols-account .zc-col-right .zc-field:last-child { background-image: none; }
    #zcApp .zc-cols-account .zc-col-right .zc-btn {
        position: relative; display: block; width: 100%; text-align: left;
        background: transparent; color: #000; font-size: 17px; font-weight: 400;
        padding: 0 32px 0 15px; margin: 0; height: 44px; line-height: 44px;
        border: 0; -webkit-border-radius: 0; border-radius: 0; box-shadow: none;
        -webkit-box-sizing: border-box; box-sizing: border-box; }
    #zcApp .zc-cols-account .zc-col-right .zc-btn:active { background: #D1D1D6; }
    #zcApp .zc-cols-account .zc-col-right .zc-btn:after {
        content: '\203A'; position: absolute; right: 15px; top: 0;
        color: #C7C7CC; font-size: 20px; line-height: 44px; }
    #zcApp .zc-cols-account .zc-col-right .zc-btn.danger {
        color: #FF3B30; background: transparent; text-align: left; }
    #zcApp .zc-cols-account .zc-col-right .zc-btn[disabled] { color: #C7C7CC; opacity: 1; }
    #zcApp .zc-cols-account .zc-col-right .zc-btn[disabled]:after { content: ''; }
    /* 只读信息行（当前积分 / 我的改名卡 / 当前邮箱） */
    #zcApp .zc-cols-account .zc-col-right .zc-row { padding: 0 15px; min-height: 44px; }
    #zcApp .zc-cols-account .zc-col-right .zc-row .zc-k {
        font-size: 17px; line-height: 44px; color: #000; float: left; }
    #zcApp .zc-cols-account .zc-col-right .zc-row .zc-v {
        font-size: 17px; color: #8E8E93; line-height: 44px; float: right; }
    /* 购买改名卡行：右侧给 › 箭头留位，避免和「100 Z积分」重叠 */
    #zcApp .zc-cols-account .zc-col-right .zc-row.zc-buy-row { padding-right: 32px; }
    /* 手机端 .zc-sec-title（PC 大标题）保持隐藏，标题栏已由 .zc-m-head 承担 */
    #zcApp .zc-cols-account .zc-col-right .zc-sec-title { display: none !important; }
}

/* ============================================================================
   登录 / 注册 / 忘记密码：iOS15 圆角输入框
   —— 输入框独立成圆角矩形（白底 + 1px 灰边框 + 10px 圆角，聚焦保持原边框不变），
      .zc-field 由「卡片内行」变成「圆角输入框容器」。
      兼容 iOS5：容器对齐用老语法 display:-webkit-box；
      input:focus 变蓝是 iOS5 就支持的选择器；-webkit-border-radius 双写。
      作用域限定 .zc-cols-login，不影响账号管理页。
   ============================================================================ */
.zc-cols-login .zc-group { background: transparent; margin: 0; }
.zc-cols-login .zc-field {
    padding: 0; border: 0; margin: 0 0 12px; position: relative;
    display: -webkit-box; -webkit-box-align: center;   /* iOS5 老语法 */
    display: -webkit-flex; -webkit-align-items: center;
    display: flex; align-items: center;
}
.zc-cols-login .zc-field input[type="text"],
.zc-cols-login .zc-field input[type="password"] {
    display: block; width: 100%; height: 44px; padding: 0 16px;
    -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; min-width: 0;
    background: #fff; border: 1px solid #D1D1D6;
    -webkit-border-radius: 10px; border-radius: 10px;
    font-size: 17px; color: #000; outline: none;
    -webkit-appearance: none; appearance: none;
}
.zc-cols-login .zc-field input:focus {
    border-color: #D1D1D6;
    -webkit-box-shadow: none; box-shadow: none;
}
.zc-cols-login .zc-field input::-webkit-input-placeholder { color: #C7C7CC; }

/* 密码行：眼睛按钮嵌在输入框内部右侧 */
.zc-cols-login .zc-field.zc-pwd-row { padding: 0; }
.zc-cols-login .zc-field.zc-pwd-row input { padding-right: 44px; }
.zc-cols-login .zc-field.zc-pwd-row .zc-eye { right: 8px; }

/* 图形验证码行：右侧占位固定 128px（图片 120px + 8px 间隙），
   与下面「邮箱验证码 + 发送验证码」行的右侧占位一致 → 两行输入框同宽。
   图片用绝对定位放右侧，输入框 flex 填满剩余空间。
   必须显式 float:none —— 旧的 .zc-cap-row 规则是 float 布局，会挤掉圆角。 */
.zc-cols-login .zc-field.zc-cap-row { padding: 0 128px 0 0; position: relative; }
.zc-cols-login .zc-field.zc-cap-row input {
    float: none;
    -webkit-border-radius: 10px; border-radius: 10px;
    border-right: 1px solid #D1D1D6;
}
.zc-cols-login .zc-field.zc-cap-row img {
    float: none; position: absolute; right: 0; top: 50%; margin-top: -21px;
    width: 120px; height: 42px; box-sizing: border-box;
    display: block; cursor: pointer; background: #fff;
    border: 1px solid #D1D1D6;
    -webkit-border-radius: 8px; border-radius: 8px;
}

/* 登录表单内容限宽居中：iOS15 表单的输入框不是撑满整栏的，
   PC 上右栏很宽（约 500px），输入框撑满会显得空旷。统一收窄到 340px 居中。 */
.zc-cols-login .zc-col-right .zc-group,
.zc-cols-login .zc-col-right .zc-btnrow,
.zc-cols-login .zc-col-right .zc-forgot-row,
.zc-cols-login .zc-col-right .zc-foot {
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}

/* PC：登录页「Powered by ZCloud」固定到屏幕底部居中（脱离右栏内部） */
@media screen and (min-width: 768px) {
    body.zc-login-page .zc-cols-login .zc-col-right .zc-foot {
        position: fixed; left: 0; right: 0; bottom: 18px;
        text-align: center; max-width: none; margin: 0 auto; padding: 0;
    }
}

/* 手机端：登录页整体离屏幕左右 16px（iOS15 inset 边距），
   输入框 / 按钮 / 忘记密码 / 页脚全部对齐同一内边距。
   原来的 .zc-wrap 是 0 左右 padding（给直角卡片铺满用的），
   登录页改成圆角输入框后贴边就不好看了，这里单独补回。 */
@media screen and (max-width: 767px) {
    .zc-cols-login { padding: 0 16px; }
    .zc-cols-login .zc-btnrow { margin: 4px 0 0; }
    .zc-cols-login .zc-forgot-row { margin: 22px 0 0; }
    /* 手机端页脚：回到文档流最底部（滑动到底才能看到），灰色小字 */
    .zc-cols-login .zc-foot { padding: 0; margin: 22px 0 0; }
}

/* 页脚统一：灰色小字（iOS 页脚风格，登录页 / 账号页共用） */
.zc-foot { font-size: 12px; color: #8E8E93; }