/* 巨信 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 老机型也不会贴边：
             .login-wrapper  左右 16px（离屏幕边）
           + .login-container 左右 14px（内容再内缩）
           = 离屏幕边 30px。
           ⚠ 光靠行宽 max-width 不行 —— 行是 width:100% 会填满可用宽度，
             max-width 只在屏幕更宽时才起作用，窄屏上照样贴边。 */
        .login-wrapper { min-height: 100%; padding: 40px 16px 20px; }
        .login-container { width: 100%; max-width: 330px; margin: 0 auto; padding: 0 14px;
            -webkit-box-sizing: border-box; box-sizing: border-box; }
        .login-header { text-align: center; margin-bottom: 28px; }
        .login-logo { width: 76px; height: 76px; margin: 0 auto 16px; }
        .login-logo img { width: 100%; height: 100%; display: block; }
        .login-title { font-size: 34px; font-weight: 700; color: #000; letter-spacing: -0.5px; }
        .login-subtitle { font-size: 15px; color: #8E8E93; margin-top: 6px; }
        .auth-form { width: 100%; }
        .form-section { background: transparent; -webkit-border-radius: 0; border-radius: 0; overflow: visible; margin-bottom: 12px; border: none; }
        /* ⚠️ 边框必须写 1px，不能写 0.5px。
           iOS 5 的 Safari 不支持亚像素边框，0.5px 会被取整成 0 —— 那条线在 iPhone 4S 上
           根本不存在，输入框看起来就是「没有边框」，聚焦变蓝自然也看不出来。 */
        .form-row { display: table; width: 100%; background: #fff; border: 1px solid #C8C8CC; -webkit-border-radius: 0; border-radius: 0; margin-bottom: 12px; overflow: hidden; }
        .form-row:last-child { margin-bottom: 0; }
        .form-row input[type="text"], .form-row input[type="password"], .form-row input[type="email"] { display: table-cell; width: 100%; height: 44px; padding: 0 16px; border: none; background: transparent; font-size: 17px; color: #000; outline: none; -webkit-appearance: none; appearance: none; }
        .form-row input::-webkit-input-placeholder { color: #C7C7CC; }
        /* ⚠ 必须显式写 margin-bottom —— 写成 margin:0 auto 会把 .form-row 的
           margin-bottom 一起覆盖掉，导致验证码行和下一个输入框粘在一起。 */
        /* ⚠️ 这里原来有 max-width: 250px —— 别的输入框都是撑满的，只有验证码框窄一截，
   看起来像没对齐。去掉宽度限制即可（margin 的 auto 也要去掉，否则块级居中会缩窄）。 */
        .captcha-row { display: table; width: 100%; margin: 0 0 10px; }
        .captcha-row .input-cell { display: table-cell; width: auto; vertical-align: middle; }
        .captcha-row .input-cell input { width: 100%; height: 44px; padding: 0 16px; border: none; background: transparent; font-size: 17px; color: #000; outline: none; }
        .captcha-row .captcha-cell { display: table-cell; width: 126px; vertical-align: middle; text-align: center; border-left: 1px solid #C8C8CC; }
        /* 原文字验证码样式已废弃，三处验证码统一改成 .captcha-img 图片 */
        .email-row { display: table; width: 100%; }
        .email-row .input-cell { display: table-cell; width: auto; vertical-align: middle; }
        .email-row .input-cell input { width: 100%; height: 44px; padding: 0 16px; border: none; background: transparent; font-size: 17px; color: #000; outline: none; }
        .email-row .btn-cell { display: table-cell; width: 110px; vertical-align: middle; text-align: center; border-left: 1px solid #C8C8CC; }
        /* ⚠️ iOS 5/6 上必须显式写 cursor:pointer —— 老 Safari 只把「看起来可点」的元素
           （链接 / 有 pointer 光标的元素）当作可点击，否则 click 事件不派发。 */
        .btn-send-code { cursor: pointer; display: inline-block; padding: 0; border: none; background: transparent; color: #007AFF; font-size: 15px; font-weight: 500; cursor: pointer; height: 44px; line-height: 44px; width: 100%; text-align: center; }
        .btn-send-code:disabled { color: #C7C7CC; cursor: not-allowed; }
        .btn-primary { display: block; width: 100%; height: 50px; line-height: 50px; text-align: center; background: #007AFF; color: #fff; font-size: 17px; font-weight: 600; -webkit-border-radius: 10px; border-radius: 10px; cursor: pointer; border: none; padding: 0; }
        .btn-primary:active { background: #0056CC; }
        .btn-primary:disabled { background: #C7C7CC; cursor: not-allowed; }
        /* 记住我：紧跟密码框下方，同宽居中 */
        /* 宽度和上面的输入框保持一致（230px），这样「记住我」的左边缘
           正好和密码框的左边缘对齐 —— 也就是「密码框左下方」。 */
        /* ⚠️ 不要写 padding-left/right！
           这里是「记住我」要和上面的密码框左对齐：
             密码框那行 .input-row-outer 没有横向 padding，边框左边缘 = 230px 盒子的左边缘；
             而这里原来有 padding: 0 4px，内容被往里推了 4px，于是在 iOS 6 上
             勾选圈明显比输入框右边一点，看着就是「错位」。
           宽度都已经是 230px 了，横向 padding 必须为 0 才对得上。 */
        .remember-row { width: 100%; margin: 12px 0 0; padding: 0;
            -webkit-box-sizing: border-box; box-sizing: border-box; text-align: left;
            font-size: 0; }   /* font-size:0 消除 inline-block 之间的空白间隙（约 4px） */
        .login-col .remember-row { max-width: none; }
        /* 用 table + table-cell 做垂直居中。
           原来是「圆 vertical-align:-4px + 文字 vertical-align:middle」混着用，
           iOS 5 对这两种取值的计算基准不同，会出现明显上下错位。 */
        /* ⚠️ iOS 5/6 的 WebKit 对「display:table 收缩包裹」处理不稳，整块会被莫名
           往右推一点，勾选圈就和上面的密码框左边缘对不齐。
           换成 iOS 5 上最可靠的 inline-block 组合：块级容器从父级左边缘开始，
           两个子元素用 vertical-align:middle 对齐。 */
        .remember-label { display: block; cursor: pointer; color: #3C3C43; font-size: 15px;
            -webkit-user-select: none; user-select: none; }
        /* 视觉隐藏原生复选框（iOS 5 不支持 appearance，原生会渲染成方框）。
           不用 display:none —— 那样在部分老 WebKit 上点 label 不会切换勾选。 */
        .remember-label input[type="checkbox"] { position: absolute; width: 1px; height: 1px; opacity: 0;
            margin: 0; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); }
        /* 自绘的圆形勾选框 */
        .cb-circle { position: relative; display: inline-block; width: 20px; height: 20px;
            vertical-align: middle; background: #fff; border: 1px solid #C8C8CC;
            -webkit-border-radius: 50%; border-radius: 50%;
            -webkit-box-sizing: border-box; box-sizing: border-box; }
        /* 选中：描边变蓝 + 中心蓝色小圆点填充 */
        .remember-label input[type="checkbox"]:checked + .cb-circle,
        .remember-label.is-on .cb-circle { border-color: #007AFF; }
        .remember-label input[type="checkbox"]:checked + .cb-circle:after,
        .remember-label.is-on .cb-circle:after {
            content: ''; position: absolute; top: 50%; left: 50%;
            width: 10px; height: 10px; margin: -5px 0 0 -5px;
            background: #007AFF; -webkit-border-radius: 50%; border-radius: 50%; }
        .cb-label { display: inline-block; vertical-align: middle; padding-left: 8px; line-height: 1.2;
            font-size: 15px; }   /* 父级设了 font-size:0，这里要显式加回来 */
        .agree-row { display: table; width: 100%; margin-bottom: 20px; }
        .agree-row label { display: table-cell; vertical-align: middle; color: #3C3C43; font-size: 14px; cursor: pointer; }
        .agree-row input { width: 18px; height: 18px; margin-right: 8px; vertical-align: middle; }
        .agree-row a { color: #007AFF; text-decoration: none; }
        /* 按钮下方那行链接（注册账号 / 已有账号?去登录 / 换个账号|忘记密码）。
           24px 贴着圆形按钮显得很挤，加大到 30px。
           注意：圆形按钮的包裹层现在自带 margin-bottom:34px，相邻兄弟的外边距会合并取大值，
           所以实际间距是 34px。 */
        .auth-switch { text-align: center; margin-top: 30px; font-size: 15px; }
        .auth-switch a { color: #007AFF; text-decoration: none; }
        .auth-divider { margin: 0 12px; color: #C7C7CC; }
        .login-footer { margin-top: 40px; text-align: center; font-size: 12px; color: #8E8E93; }
        .error-msg, .success-msg { padding: 10px 16px; -webkit-border-radius: 0; border-radius: 0; margin-bottom: 16px; font-size: 14px; text-align: center; }
        .error-msg { background: #FFE5E5; color: #FF3B30; }
        .success-msg { background: #E5FFE5; color: #34C759; }
        .reg-title { text-align: center; color: #8E8E93; font-size: 15px; margin-bottom: 16px; font-weight: 400; }
        .form-hint { font-size: 13px; color: #8E8E93; margin: -10px 0 16px 4px; }
        @media (max-width: 480px) { .login-wrapper { padding: 30px 16px 16px; } .login-title { font-size: 28px; } }
        .btn-primary.loading { pointer-events: none; opacity: 0.7; }

        /* ===== 登录两步流程 ===== */
        /* 输入框在左、圆形箭头按钮在右（按钮在输入框【外面】）。
           用 display:table 并排，不用 flex —— iOS 5 的 flex 支持不完整。 */
        /* 圆形按钮移到下面之后，输入框独占了整行宽度，比原来宽了一截。
           原来宽度 = 280 - 54(按钮) ≈ 226px，这里取 230px 恢复原来的观感。 */
        /* 统一的输入列：密码框和下面的「记住我」都放在这里面，
           宽度和居中只由这一个盒子决定，两者左边缘因此必然重合。
           （iOS 5/6 上靠「两块各自 max-width + margin:auto」是对不齐的。） */
        .login-col { width: 100%; max-width: 230px; margin: 0 auto; }
        .login-col .input-row-outer { max-width: none; }
        .input-row-outer { display: table; width: 100%; max-width: 230px; margin: 0 auto; }
        .ir-input { display: table-cell; vertical-align: middle; }
        .ir-btn { display: table-cell; width: 54px; vertical-align: middle; text-align: right; }
        .ir-input input { display: block; width: 100%; height: 46px; padding: 0 14px;
            background: #fff; border: 1px solid #C8C8CC; -webkit-border-radius: 0; border-radius: 0;
            font-size: 17px; color: #000; outline: none; -webkit-box-sizing: border-box; box-sizing: border-box;
            -webkit-appearance: none; appearance: none; }
        .ir-input input::-webkit-input-placeholder { color: #C7C7CC; }
        /* 选中变蓝用 JS 加 .is-focus 类 —— iOS Safari 上 :focus 的样式不可靠 */
        /* ⚠ 不要给这个按钮加 -webkit-appearance:none —— iOS 7 之前的 WebKit 上
           它会让 <button> 失去「可点」语义，表现为点了完全没反应。外观由 background/
           border/border-radius 覆盖，不依赖 appearance。 */
        /* 圆形按钮：在输入框外面右侧 */
        .round-btn { position: relative; display: block; width: 44px; height: 44px; padding: 0;
            margin: 0 0 0 auto; border: none; cursor: pointer; background: #007AFF;
            -webkit-border-radius: 50%; border-radius: 50%; }
        /* SVG 箭头用绝对定位 + 负 margin 居中（不用 flex / line-height，iOS 5 最稳） */
        .round-btn svg { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px;
            margin: -10px 0 0 -10px; display: block; }
        /* 箭头改用内联 SVG（居中见上）。之前怀疑 SVG 吃掉触摸事件，后来查明
           真正的原因是别处一行 continue 写进了函数体导致整段脚本语法错误，
           与 SVG 无关，所以这里用回 SVG 绘制。 */
        .round-btn svg, .round-btn svg * { pointer-events: none; }
        .round-btn:active { background: #0056CC; }
        .round-btn:disabled { background: #C7C7CC; cursor: not-allowed; }

        /* ==================== 加载弹窗（转圈）====================
           ⚠️ 转圈是加在【真实存在的元素】.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); } }

        /* ==================== 登录按钮的「处理中」状态 ====================
           点了登录之后按钮自己变灰、箭头换成转圈 —— 不用弹窗遮罩。
           改的是页面上【已经存在的那个按钮】：不新增元素、不涉及显示隐藏、
           不用 z-index，浏览器必然会重绘，比盖一层遮罩可靠得多。 */
        .round-btn.is-loading { background: #B8B8BE; cursor: default; }
        .round-btn.is-loading svg { display: none; }
        .round-btn.is-loading:after {
            content: ''; position: absolute; top: 50%; left: 50%;
            width: 18px; height: 18px; margin: -9px 0 0 -9px;
            border: 2px solid rgba(255, 255, 255, 0.45);
            border-top-color: #fff;
            -webkit-border-radius: 50%; border-radius: 50%;
            -webkit-animation: zcBtnSpin 0.7s linear infinite;
            animation: zcBtnSpin 0.7s linear infinite; }
        @-webkit-keyframes zcBtnSpin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
        @keyframes zcBtnSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        /* text-align:center 才是关键 —— 上面只有 margin:0 auto（块居中），
           文字本身还是靠左，所以「根浩君」会贴在左边。 */
        /* ==================== 开屏（加载过渡）====================
           纯 CSS 实现，不放 JS —— iOS 5 上 JS 解析很慢，而开屏必须【立刻】出现。
           它位于 body 的最前面，浏览器解析到那里就能画出来。 */
#zcSplash { position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: #EFEFF4; z-index: 99999; text-align: center;
            /* ⚠️ 这里【不要】再写 animation + delay 自动淡出。
               原因：动画从「元素被解析到」那一刻就开始计时，而这页有 ~95KB HTML +
               约 20KB 内联 JS，iOS 5 / 老设备解析完要 1.5 秒以上 ——
               等浏览器终于能画第一帧时，1.1 秒的延迟早就过了，开屏已经淡出完了，
               看起来就像"从来没显示过"。
               改成由下面的脚本在 window.onload 时摘掉：那正是现在白屏的那段时间。 */
            -webkit-transition: opacity 0.35s ease-out;
            transition: opacity 0.35s ease-out; }
        #zcSplash .zc-sp-logo { width: 96px; height: 96px; margin-top: 26%;
            -webkit-border-radius: 22px; border-radius: 22px; }
        #zcSplash .zc-sp-name { font-size: 28px; font-weight: 700; color: #000; margin-top: 16px; }
        /* 和聊天页重载层的 .zb-foot 完全一致：贴底 22px、11px、#8E8E93 居中 */
        #zcSplash .zc-sp-foot { position: absolute; left: 0; right: 0; bottom: 22px;
            text-align: center; font-size: 11px; color: #8E8E93; }
        /* 开屏还盖着的时候，别让底下的内容触发滚动条 */

        .hello-line { text-align: center; font-size: 16px; font-weight: 600; color: #000; max-width: 250px; margin: 0 auto;
            padding: 0 4px 12px; word-break: break-all; }
        .captcha-img { display: block; width: 120px; height: 40px; cursor: pointer; }
        /* 和上面那条保持一致 —— 这里原来也是 #F2F2F7，
           它排在后面，会把上面那条的 background 覆盖掉（box-shadow 不受影响），
           所以之前实测底色还是灰的。两处必须一起改。 */
        /* ⚠️ 内阴影必须配合同样大小的圆角，否则方形内阴影套在圆角外框里会显得很脏。
           外框 .form-row 是 10px 圆角 + 1px 边框，所以内层可用圆角是 9px。
           单个输入框占满整行 -> 9px；验证码/邮箱那种左边输入右边按钮/图片的 -> 只圆左边两个角。 */

        /* ===== 未找到账号的弹窗 ===== */
        .dlg-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4);
            z-index: 9000; display: none; }
        .dlg-mask.open { display: block; }
        .dlg-box { position: fixed; top: 50%; left: 50%; width: 270px; margin-left: -135px; margin-top: -90px;
            background: rgba(255,255,255,0.97); -webkit-border-radius: 14px; border-radius: 14px;
            overflow: hidden; z-index: 9001; display: none; }
        .dlg-box.open { display: block; }
        .dlg-title { padding: 18px 16px 6px; font-size: 17px; font-weight: 600; color: #000; text-align: center; }
        .dlg-text { padding: 0 16px 16px; font-size: 13px; line-height: 1.55; color: #8E8E93; text-align: center; word-break: break-all; }
        .dlg-btns { overflow: hidden; border-top: 1px solid #C8C8CC; }
        .dlg-btn { float: left; width: 50%; height: 44px; line-height: 44px; text-align: center; font-size: 17px;
            color: #007AFF; background: none; border: none; cursor: pointer; padding: 0; margin: 0;
            font-family: inherit; -webkit-appearance: none; appearance: none; -webkit-box-sizing: border-box; box-sizing: border-box; }
        .dlg-btn-left { border-right: 1px solid #C8C8CC; }
        .dlg-btn-ok { font-weight: 600; }

/* ============================================================================
   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; }
.zc-stats { margin-top: 14px; font-size: 0; }
.zc-stat  { display: inline-block; width: 33.33%; box-sizing: border-box; font-size: 13px; color: #8E8E93; }
.zc-stat b{ display: block; font-size: 17px; color: #000; font-weight: 600; margin-bottom: 2px; }

/* 普通分组（沿用 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-title { font-size: 12.5px; color: #8E8E93; margin: 0 0 7px 4px; }

/* 输入行 */
.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; }

/* 顶部返回主站 */
.zc-topbar { text-align: center; font-size: 12px; color: #8E8E93; margin-bottom: 12px; }
.zc-topbar a { color: #007AFF; text-decoration: none; }
.zc-foot { text-align: center; font-size: 11px; color: #8E8E93; margin: 22px 0 6px; }

/* 小屏（手机）收紧留白；大屏（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-title   { margin: 0 0 7px 15px; }
    .zc-topbar  { padding: 0 14px; }
    .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 { background: #EFEFF4; }
}


/* ============================================================================
   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-topbar    { margin-bottom: 16px; }
    .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; }