/*
 * 海外 VIP 章登录弹层 —— 模板 application/wap/view/wap1/page/login/sheet.html
 * 阅读页根字号是按屏宽动态算的 rem，这里一律用 px，不受它影响。
 * z-index 压过阅读页原有弹窗（main.css 最高 9999）。
 * 主色调用站点主题紫 #7b80f3；只有 Facebook 按钮保留品牌蓝。
 */
.ls-sheet [hidden], .ls-reopen[hidden] { display: none !important; }
.ls-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(20, 22, 30, .32); z-index: 10000; animation: lsFade .25s; }
.ls-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10001; max-width: 560px; margin: 0 auto;
    background: #fff; color: #1f2330; border-radius: 20px 20px 0 0; padding: 10px 20px 18px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0, 0, 0, .12);
    max-height: 92vh; overflow-y: auto; box-sizing: border-box; text-align: left;
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "PingFang TC", "PingFang SC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    animation: lsUp .3s cubic-bezier(.2, .8, .2, 1);
}
.ls-sheet *, .ls-reopen * { box-sizing: border-box; }
.ls-sheet.ls-hide, .ls-mask.ls-hide { display: none; }
@keyframes lsUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes lsFade { from { opacity: 0; } }

.ls-grab { width: 36px; height: 4px; border-radius: 2px; background: #dfe1e7; margin: 0 auto 14px; }
.ls-close { position: absolute; right: 8px; top: 8px; width: 36px; height: 36px; border: 0; background: none; color: #9aa0ad; font-size: 24px; line-height: 36px; padding: 0; z-index: 2; }

/* 头部：封面 + 标题 */
.ls-book { display: flex; gap: 12px; align-items: center; margin: 0 28px 18px 0; }
/* 封面：先显示固定尺寸的色块占位（不撑开版面、不挡点击），图片下载完淡入；失败就一直是色块 */
.ls-cover { position: relative; width: 46px; height: 62px; flex: none; border-radius: 5px; overflow: hidden; background: linear-gradient(140deg, #a3a7f8, #585dd2); box-shadow: 0 2px 8px rgba(80, 84, 200, .3); }
.ls-cover img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
.ls-cover img.on { opacity: 1; }
.ls-book h2 { font-size: 19px; font-weight: 700; line-height: 1.3; margin: 0; }
.ls-sub { font-size: 13px; color: #5b6070; margin-top: 3px; }

/* 两个主选项：大按钮，标题 + 下面一行说明「这个能干嘛」 */
.ls-opt {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; margin: 0 0 10px; padding: 10px 14px;
    border-radius: 14px; border: 1px solid #ebedf2; background: #fff; color: #1f2330; text-align: left; text-decoration: none;
    cursor: pointer; transition: transform .08s; -webkit-tap-highlight-color: transparent; font: inherit;
}
.ls-opt:active { transform: scale(.98); }
.ls-opt .ls-ico { width: 26px; height: 26px; }
.ls-tx { flex: 1; min-width: 0; }
.ls-tx b { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; }
.ls-tx small { display: block; font-size: 12px; opacity: .82; margin-top: 2px; line-height: 1.35; }
.ls-arr { opacity: .6; font-size: 20px; line-height: 1; }
.ls-opt.p-facebook { background: #1877f2; border-color: #1877f2; color: #fff; }
.ls-opt.p-threads, .ls-opt.p-google, .ls-opt.p-email { background: #7b80f3; border-color: #7b80f3; color: #fff; }
/* Google 规范要求 G 标志保持原色：放在白色小圆底上 */
.ls-opt.p-google .ls-ico-google { width: 30px; height: 30px; background-color: #fff; border-radius: 50%; background-size: 20px 20px; }
.ls-opt.s-messenger { background: #f3f3fe; border-color: #dcdefc; }

.ls-or { display: flex; align-items: center; gap: 10px; color: #9aa0ad; font-size: 12px; margin: 8px 0 10px; }
.ls-or::before, .ls-or::after { content: ""; flex: 1; height: 1px; background: #ebedf2; }
.ls-icons { display: flex; justify-content: center; gap: 16px; margin: 4px 0 2px; }
.ls-ic { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ebedf2; background: #fff; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.ls-ic .ls-ico { width: 20px; height: 20px; }

.ls-links { display: flex; justify-content: center; font-size: 13px; margin: 12px 0 2px; }
.ls-links a { color: #5b6070; text-decoration: none; padding: 6px 0; }
/* 轻提示的「暂时不用，继续阅读」 */
.ls-skip { display: block; width: 100%; border: 0; background: none; color: #5b6070; font-size: 14px; padding: 12px 0 2px; cursor: pointer; }
.ls-terms { font-size: 11px; color: #9aa0ad; text-align: center; margin-top: 12px; line-height: 1.6; }
.ls-terms a { color: #5b6070; text-decoration: underline; }

/* 邮箱 / 验证码 */
.ls-back { font-size: 13px; color: #5b6070; background: none; border: 0; margin: 0 0 12px; padding: 0; }
.ls-field { display: flex; align-items: center; height: 50px; border: 1.5px solid #c9ccd6; border-radius: 12px; padding: 0 4px 0 14px; margin: 0 0 10px; background: #fff; }
.ls-field:focus-within { border-color: #7b80f3; box-shadow: 0 0 0 3px rgba(123, 128, 243, .18); }
.ls-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 16px; color: #1f2330; padding: 0; }
.ls-send { border: 0; background: none; color: #7b80f3; font-weight: 600; font-size: 14px; padding: 0 10px; white-space: nowrap; }
.ls-send:disabled { color: #9aa0ad; }
.ls-sent { font-size: 13px; color: #5b6070; margin-bottom: 10px; word-break: break-all; }
/* 验证码输入框
 * ★ 选择器写成 .ls-sheet input.ls-code：阅读页的 main.css 有全站规则 input[type=text]{border:#eee 1px solid;height:.6rem;…}，
 *   优先级比单写 .ls-code 高，会把边框改成几乎看不见的 #eee、高度压到二十几像素，读者很难点中 */
.ls-sheet input.ls-code {
    display: block; box-sizing: border-box; width: 100%; height: 56px; border: 1.5px solid #c9ccd6; border-radius: 12px; background: #fff; outline: 0;
    -webkit-appearance: none; appearance: none;
    text-align: center; font-size: 26px; font-weight: 600; letter-spacing: 10px; color: #1f2330; margin: 0 0 10px; padding: 0 0 0 10px;
}
.ls-sheet input.ls-code::placeholder { font-size: 15px; font-weight: 400; letter-spacing: 0; color: #9aa0ad; }
/* 点中时边框变主题紫，外面一圈浅紫光晕，一眼看出已经选中 */
.ls-sheet input.ls-code:focus { border-color: #7b80f3; box-shadow: 0 0 0 3px rgba(123, 128, 243, .18); }
.ls-sheet input.ls-code:disabled { opacity: .6; }
.ls-spam { font-size: 12px; color: #9aa0ad; }
.ls-spam a { color: #7b80f3; text-decoration: none; }
.ls-spam a.ls-off { color: #9aa0ad; pointer-events: none; }

/* Messenger 打开后的说明页 */
.ls-done { text-align: center; padding: 8px 4px 4px; }
.ls-big { width: 56px; height: 56px; border-radius: 50%; background: #f3f3fe; display: flex; align-items: center; justify-content: center; margin: 4px auto 12px; }
.ls-big .ls-ico { width: 30px; height: 30px; }
.ls-done h3 { font-size: 18px; margin: 0 0 6px; }
.ls-done p { font-size: 13px; color: #5b6070; line-height: 1.6; margin: 0; }
.ls-steps { text-align: left; background: #f7f8fa; border-radius: 12px; padding: 12px 14px; margin: 14px 0 6px; font-size: 13px; color: #5b6070; line-height: 1.8; }
.ls-btn2 { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; border-radius: 12px; background: #7b80f3; color: #fff; font-size: 15px; font-weight: 600; margin-top: 12px; text-decoration: none; }
.ls-back-c { display: block; margin: 12px auto 0; }

/* 关掉弹层后，正文下方留一个重新打开的按钮 */
.ls-reopen { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; padding: 10px 20px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(255, 255, 255, 0), #fff 30%); }
.ls-reopen button { display: block; width: 100%; max-width: 520px; margin: 0 auto; height: 48px; border: 0; border-radius: 24px; background: #7b80f3; color: #fff; font-size: 16px; font-weight: 600; }

.ls-toast { position: fixed; left: 50%; top: 40%; transform: translateX(-50%); z-index: 10010; background: rgba(0, 0, 0, .78); color: #fff; font-size: 14px; padding: 10px 16px; border-radius: 8px; max-width: 80%; text-align: center; }

/* 图标：-w 是放在深色主按钮上的白色版 */
.ls-ico { display: inline-block; width: 22px; height: 22px; flex: none; background: no-repeat center / contain; }
.ls-ico-google { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M23.5 12.27c0-.85-.08-1.67-.22-2.45H12v4.64h6.45a5.52 5.52 0 0 1-2.39 3.62v3h3.87c2.26-2.09 3.57-5.16 3.57-8.81z'/%3E%3Cpath fill='%2334A853' d='M12 24c3.24 0 5.96-1.07 7.94-2.9l-3.87-3c-1.07.72-2.45 1.15-4.07 1.15-3.13 0-5.78-2.11-6.73-4.95H1.27v3.1A12 12 0 0 0 12 24z'/%3E%3Cpath fill='%23FBBC05' d='M5.27 14.3a7.2 7.2 0 0 1 0-4.6V6.6H1.27a12 12 0 0 0 0 10.8l4-3.1z'/%3E%3Cpath fill='%23EA4335' d='M12 4.75c1.76 0 3.34.6 4.59 1.8l3.43-3.43C17.95 1.19 15.24 0 12 0A12 12 0 0 0 1.27 6.6l4 3.1C6.22 6.86 8.87 4.75 12 4.75z'/%3E%3C/svg%3E"); }
.ls-ico-facebook { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231877f2' d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z'/%3E%3C/svg%3E"); }
.ls-ico-facebook-w { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z'/%3E%3C/svg%3E"); }
.ls-ico-threads { background-image: url("/public/static/home/pc1/img/index/app/threads_1.svg"); }
.ls-ico-threads-w { background-image: url("/public/static/home/pc1/img/index/app/threads_1.svg"); filter: invert(1); }
.ls-ico-email { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235b6070' d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1 2.2V17h16V7.2l-7.4 5.6a1 1 0 0 1-1.2 0L4 7.2zM5.6 7l6.4 4.8L18.4 7H5.6z'/%3E%3C/svg%3E"); }
.ls-ico-email-w { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1 2.2V17h16V7.2l-7.4 5.6a1 1 0 0 1-1.2 0L4 7.2zM5.6 7l6.4 4.8L18.4 7H5.6z'/%3E%3C/svg%3E"); }
.ls-ico-messenger { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%230a7cff'/%3E%3Cstop offset='.6' stop-color='%23a033ff'/%3E%3Cstop offset='1' stop-color='%23ff5c87'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M12 1C5.8 1 1 5.5 1 11.6c0 3.2 1.3 5.9 3.4 7.8.2.2.3.4.3.6l.1 1.9c0 .6.7 1 1.2.8l2.2-1c.2-.1.4-.1.6 0 1 .3 2.1.4 3.2.4 6.2 0 11-4.5 11-10.6S18.2 1 12 1z'/%3E%3Cpath fill='%23fff' d='M5.4 14.8l3.2-5.1c.5-.8 1.6-1 2.4-.4l2.6 1.9c.2.2.6.2.8 0l3.5-2.6c.5-.4 1.1.2.8.7l-3.2 5.1c-.5.8-1.6 1-2.4.4l-2.6-1.9c-.2-.2-.6-.2-.8 0l-3.5 2.6c-.5.4-1.1-.2-.8-.7z'/%3E%3C/svg%3E"); }

/* ---- 2026-10 合并：大陆登录方式（短信 / 密码 / QQ / 微博）、账号密码、作品页共用 ---- */
.ls-ico-phone-w { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='3' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M10.5 18h3' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ls-ico-qq { background-image: url("/public/static/wap/wap1/image/page/login/icon-qq.png"); }
.ls-ico-weibo { background-image: url("/public/static/wap/wap1/image/page/login/icon-sina.png"); }
.ls-ic .ls-ico-qq, .ls-ic .ls-ico-weibo { width: 24px; height: 24px; }
.ls-go { display: block; width: 100%; height: 48px; margin: 4px 0 8px; border: 0; border-radius: 24px; background: #7b80f3; color: #fff; font-size: 16px; font-weight: 600; }
.ls-go:disabled { opacity: .6; }
.ls-agree { display: flex; align-items: flex-start; justify-content: center; gap: 6px; text-align: left; }
.ls-agree input { flex: none; margin: 3px 0 0; accent-color: #7b80f3; }