/* ==========================================================================
   jl-ui.css — jl-weixin-mp 微信端统一视觉设计系统（.jl-* 组件）
   由 include.html 的 header 片段统一 <link> 引入，所有页面自动继承。
   请勿再在各页面 <head> 内联重复这些 .jl-* 组件样式；页面只保留“页面特有”的覆盖
   （如 .weui-form / body>.core 的 margin 复位、.page/.weui-tab 常规流复位等）。
   @author zft
   ========================================================================== */

/* --------------------------------------------------------------------------
   返回按钮 .jl-back
   形态：白胶囊，必须包在 .jl-back-bar 里使用（间距由那条承载）；
   特例：嵌在彩色底的卡里时走 .jl-balance .jl-back，改为绝对定位浮动。
   ------------------------------------------------------------------------- */
/* 吸顶胶囊条：非列表页的返回入口。整栏留给需要装分段选项卡或搜索栏（列表页）的场景，
   其余页面用这颗胶囊；它同样常驻顶部，不会随长内容滚走。
   上下间距由本容器的 padding 承载、不交给胶囊的外边距——容器与子元素之间会发生
   外边距合并，胶囊会顶到容器上沿、下方的渐隐遮罩也会跟着错位。 */
.jl-back-bar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    /* 上下取 6/4 使整条高 42px，与整栏 --slim 档（42.4px）等高，父子页切换时顶部不跳高度；
       左右取 8px 给胶囊白盒留出呼吸——胶囊自身还有 14px 内边距，所以它的 chevron 会比整栏
       页头的（14px）靠右 8px：两种形态无法同时对齐白盒边缘与文字边缘，这里取白盒有呼吸优先 */
    padding: 6px 8px 4px;
    /* 顶部实白、底部渐隐：让从胶囊下方穿过的内容平滑淡出，而不是撞出一条硬边 */
    background: linear-gradient(180deg, #fff 70%, rgba(255, 255, 255, 0));
}

.jl-back {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    margin: 0;
    border-radius: 16px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    font-size: 14px;
    color: #07c160;
    color: var(--weui-BRAND);
}

.jl-back .fa {
    margin-right: 4px;
    font-size: 14px;
}

/* 配套修正：weui 给表单区预留的顶部距离，在页顶没有标题区时会变成空洞。
   weui 的表单区自带 margin-top:48px，那是为它上方的标题区（大标题 + 描述）拉开的距离；
   改版后整块删掉标题区的页里它就纯属浪费。判据只看结构、不挑场景：表单区是表单容器的
   第一个子元素，即说明上方没有标题区（标题仍在的页不命中）。用 :first-child 不用 :has()，
   后者旧 WebView 有失效风险。
   实测生效范围（线上 weui 2.5.14、390 宽；对照法 = 渲染一份删掉本规则的 CSS 副本比计算值，
   不要用 !important 反推基线：作者样式的 !important 高于内联普通声明，会造出假基线）：
   - **真正生效的只有 4 页**，都是吸顶胶囊的表单/详情页（base/user/editPwd、patrol/person/info、
     patrol/assignunexecuted/info、property/invoicing/info）：胶囊条底边到第一行内容 86 → 38
     （86 = 30 表单容器内边距 + 48 + 8）。
   - **结构判据命中但计算值不变**（本规则是空操作，无需复查）：整栏列表页的筛选表单卡——
     原作者已在元素上写了内联 margin 归零，改版前后顶部距离都是 24。扫这批页时注意本选择器
     是按类匹配的，容器标签是 form 不是 div，只按 div 扫会整组漏掉。
   - 未命中：patrol/assign/pie 的表单区直挂页容器、无表单壳，顶部仍是 48；
     rating/summary/main 的那个表单是隐藏的搜索栏，取值不变。 */
.weui-form > .weui-form__control-area:first-child {
    margin-top: 0;
}

/* 变体：返回按钮**内嵌在有彩色底的卡里**时（如钱包余额卡 .jl-balance），
   改为绝对定位浮动卡片左上角，不再占用常规流（避免与卡之间出现空白带） */
.jl-balance .jl-back {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    height: 28px;
    padding: 0 12px;
    margin: 0;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    font-size: 13px;
}

.jl-balance .jl-back .fa {
    margin-right: 4px;
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   余额 / 头图卡 .jl-balance（居中展示，绿色渐变，返回按钮悬浮左上角）
   -------------------------------------------------------------------------- */
.jl-balance {
    position: relative;
    overflow: hidden;
    margin: 12px 7px;
    padding: 16px 18px 20px;
    border-radius: 0.75rem;
    text-align: center;
    color: #fff;
    background-color: #07c160;
    background-image: linear-gradient(135deg, var(--weui-BRAND) 0%, #10ad76 55%, #0a9d58 100%);
    box-shadow: 0 6px 18px rgba(7, 193, 96, 0.28);
}

.jl-balance:before {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    top: -60px;
    right: -35px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.10);
}

/* 卡片内除装饰图标、返回按钮外的内容置于上层 */
.jl-balance > *:not(.jl-balance__deco):not(.jl-back) {
    position: relative;
    z-index: 1;
}

.jl-balance__deco {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    font-size: 70px;
    color: rgba(255, 255, 255, 0.18);
}

.jl-balance__label {
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 10px;
}

.jl-balance__amount {
    font-size: 30px;
    font-weight: bold;
    line-height: 1.1;
}

.jl-balance__unit {
    font-size: 17px;
    font-weight: normal;
    margin-right: 4px;
    opacity: 0.9;
}

.jl-balance__note {
    font-size: 11px;
    opacity: 0.85;
    margin-top: 10px;
}

/* --------------------------------------------------------------------------
   通用卡片 .jl-card（标题带绿色竖条；内部 weui-cells 透明融入）
   -------------------------------------------------------------------------- */
.jl-card {
    margin: 12px 7px;
    padding: 16px 0 8px;
    background-color: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.jl-card__title {
    display: flex;
    align-items: center;
    padding: 0 15px 12px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.jl-card__title:before {
    content: '';
    width: 4px;
    height: 15px;
    margin-right: 8px;
    border-radius: 2px;
    background-color: #07c160;
    background-color: var(--weui-BRAND);
}

.jl-card .weui-cells {
    margin: 0;
    background-color: transparent;
    font-size: 15px;
}

.jl-card .weui-cells:before,
.jl-card .weui-cells:after {
    content: none;
}

/* 卡片底部操作区：按钮 + 提示 */
.jl-card__foot {
    padding: 6px 15px 10px;
}

.jl-tip {
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    color: #999;
}

/* 卡片列表项图标（如钱包服务入口的 OSS 图标） */
.jl-cell__icon {
    width: 26px;
    height: 26px;
    margin-right: 12px;
    display: block;
}

/* --------------------------------------------------------------------------
   吸顶头部 .jl-sticky + 实心页头 .jl-head（返回/更多 导航行 + 分段选项卡）
   -------------------------------------------------------------------------- */
.jl-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #fff;
}

.jl-head {
    padding: 6px 14px 12px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.jl-head__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

/* 分隔线与下间距只在导航行下方还紧跟其它块（分段选项卡、搜索栏）时才画，
   由结构自动判定、不需要每页各自声明：53 处吸顶头里有 38 处只有一行导航，
   以前靠逐页写覆盖，漏写的页就会留下一条悬空横线 */
.jl-head__nav:not(:last-child) {
    margin-bottom: 10px;
    border-bottom: 1px solid #f2f2f2;
}

/* 紧凑吸顶页头：只给“只有一行导航、下方不接分段选项卡”的列表页用这个修饰类；
   非列表页（表单/详情/图表）一律改用 .jl-back-bar 吸顶胶囊，不要再写整栏、也不要给 --slim。
   默认档为紧跟其后的选项卡预留了 12px 下边距，没有选项卡时它纯属空占
   （整栏 60px 里有 38px 是留白，而内容只有一个 46x22 的文字链）。
   收成上下各 6px + 导航行各 4px，整栏约 42px，与微信原生导航栏 44px 相当。
   左右留白仍取 14px，与下方表单、卡片的边距对齐，不产生错开。 */
.jl-head--slim {
    padding: 6px 14px 6px;
}

.jl-head--slim .jl-head__nav {
    padding: 4px 0;
}

.jl-nav__btn {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    color: #07c160;
    color: var(--weui-BRAND);
}

.jl-nav__btn .fa {
    font-size: 14px;
}

.jl-nav__btn--back .fa {
    margin-right: 4px;
}

.jl-nav__btn--more .fa {
    margin-left: 4px;
}

/* 危险/破坏性操作（如批量取消）：警示红文字链，形状同 .jl-nav__btn */
.jl-nav__btn--danger {
    color: #fa5151;
    color: var(--weui-RED, #fa5151);
}

/* 分段选项卡：仅作用于 .jl-head 内的 weui-navbar，避免污染其它页面的 navbar。
   特异度 0,2,0 稳压 include.html 内联的 .weui-navbar(0,1,0)。 */
.jl-head .weui-navbar {
    display: flex;
    margin: 0;
    padding: 3px;
    border: none;
    border-radius: 10px;
    background-color: #f2f2f2;
    box-shadow: none;
}

.jl-head .weui-navbar:after {
    display: none;
}

.jl-head .weui-navbar__item {
    flex: 1;
    margin: 0;
    padding: 7px 0;
    font-size: 14px;
    color: #666;
    text-align: center;
    background-color: transparent;
    border: none;
    border-radius: 8px;
    box-shadow: none;
    transition: color .2s, background-color .2s;
}

.jl-head .weui-navbar__item:after {
    border: none;
}

.jl-head .weui-navbar__item.weui-bar__item_on {
    color: #fff;
    font-weight: 600;
    background-color: #07c160;
    background-color: var(--weui-BRAND);
    box-shadow: 0 1px 4px rgba(7, 193, 96, 0.3);
}

/* --------------------------------------------------------------------------
   列表条目 .jl-txn（AJAX 生成，紧凑可扫 + 点开详情）
   -------------------------------------------------------------------------- */
.jl-txn {
    margin: 10px 7px;
    padding: 12px 14px;
    background-color: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.jl-txn--expandable {
    cursor: pointer;
}

.jl-txn__main {
    display: flex;
    align-items: center;
}

.jl-txn__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    margin-right: 11px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
}

.jl-txn__icon--in {
    background-color: #07c160;
    background-color: var(--weui-BRAND);
}

.jl-txn__icon--out {
    background-color: #8a94a6;
}

.jl-txn__icon--withdraw {
    background-color: #ff9f43;
}

.jl-txn__body {
    flex: 1 1 auto;
    min-width: 0;
}

.jl-txn__title {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 500;
    color: #333;
}

.jl-txn__time {
    margin-top: 3px;
    font-size: 12px;
    color: #999;
}

.jl-txn__right {
    flex: 0 0 auto;
    margin-left: 8px;
    text-align: right;
}

.jl-txn__amount {
    font-size: 17px;
    font-weight: 600;
}

.jl-txn__amount--in {
    color: #07c160;
    color: var(--weui-BRAND);
}

.jl-txn__amount--out {
    color: #333;
}

.jl-txn__balance {
    margin-top: 3px;
    font-size: 11px;
    color: #bbb;
}

.jl-txn__tag {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: normal;
}

.jl-txn__tag--ok {
    color: #07c160;
    background-color: rgba(7, 193, 96, 0.12);
}

.jl-txn__tag--err {
    color: #fa5151;
    background-color: rgba(250, 81, 81, 0.12);
}

.jl-txn__tag--ing {
    color: #ff9f43;
    background-color: rgba(255, 159, 67, 0.14);
}

.jl-txn__tag--off {
    color: #999;
    background-color: #f2f2f2;
}

.jl-txn__chevron {
    flex: 0 0 auto;
    margin-left: 6px;
    font-size: 12px;
    color: #ccc;
    transition: transform .2s;
}

.jl-txn--open .jl-txn__chevron {
    transform: rotate(180deg);
}

.jl-txn__detail {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f5f5f5;
}

.jl-txn--open .jl-txn__detail {
    display: block;
}

.jl-txn__row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
}

.jl-txn__rowlabel {
    flex: 0 0 auto;
    color: #999;
}

.jl-txn__rowvalue {
    max-width: 66%;
    color: #555;
    text-align: right;
    word-break: break-all;
}

/* --------------------------------------------------------------------------
   紧凑动作按钮 .jl-btn-mini（列表条目右侧 / 卡片脚部通用）
   实心胶囊、高度 28px，与 .jl-txn 搭配使用；默认主色品牌绿（主操作），
   变体 --danger 红（破坏性：删除/取消等），--ghost 白底描边（次要/辅助）。
   -------------------------------------------------------------------------- */
.jl-btn-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    background-color: #07c160;
    background-color: var(--weui-BRAND);
    box-shadow: 0 2px 6px rgba(7, 193, 96, 0.25);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.jl-btn-mini + .jl-btn-mini {
    margin-left: 8px;
}

.jl-btn-mini .fa {
    margin-right: 4px;
}

.jl-btn-mini:active {
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(7, 193, 96, 0.2);
}

.jl-btn-mini--danger {
    background-color: #fa5151;
    box-shadow: 0 2px 6px rgba(250, 81, 81, 0.28);
}

.jl-btn-mini--danger .fa {
    margin-right: 0;
}

.jl-btn-mini--danger:active {
    box-shadow: 0 1px 3px rgba(250, 81, 81, 0.22);
}

.jl-btn-mini--ghost {
    color: #07c160;
    color: var(--weui-BRAND);
    background-color: #fff;
    border: 1px solid rgba(7, 193, 96, 0.35);
    box-shadow: none;
}

.jl-btn-mini--ghost .fa {
    margin-right: 0;
}

.jl-btn-mini--ghost:active {
    background-color: rgba(7, 193, 96, 0.06);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   空数据提示 .jl-empty
   -------------------------------------------------------------------------- */
.jl-empty {
    padding: 50px 0;
    text-align: center;
    color: #bbb;
}

.jl-empty .fa {
    font-size: 40px;
    margin-bottom: 10px;
}

.jl-empty p {
    margin: 0;
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   卡片变体 .jl-card--grid：内含 weui-grids 宫格时需左右内边距
   （区别于默认 full-bleed weui-cells 卡）。用法：class="jl-card jl-card--grid"
   仅 index.html / core.html 两个宫格页使用，故在此收窄分组卡的上下间距：
   相邻兄弟 margin 折叠后由 .jl-card 的 12px 变为 8px，模块之间更紧凑。
   -------------------------------------------------------------------------- */
.jl-card--grid {
    margin: 8px 7px;
    padding: 16px 8px 8px;
    border: none;
    transition: box-shadow 0.3s;
}

.jl-card--grid .jl-card__title {
    width: 100%;
    padding: 0 12px 12px;
}

/* 宫格图标尺寸统一：.weui-grid__icon 容器虽定死 35×35，但内部 <img> 未设尺寸时
   按原始像素渲染，各 PNG 原图尺寸/留白不一 → 看着大小不齐。这里让图片统一铺满容器并等比
   缩放（contain），两页所有图标盒子大小一致（index.html / core.html 共用本变体）。 */
.jl-card--grid .weui-grid__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   首页问候头图 .jl-hero（左文案 + 右装饰图标 + 背景圆环）
   -------------------------------------------------------------------------- */
.jl-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 7px 0;
    padding: 22px 24px;
    border-radius: 0.75rem;
    color: #fff;
    background-color: #07c160;
    background-image: linear-gradient(135deg, var(--weui-BRAND) 0%, #10ad76 55%, #0a9d58 100%);
    box-shadow: 0 6px 18px rgba(7, 193, 96, 0.28);
}

.jl-hero:before,
.jl-hero:after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.10);
}

.jl-hero:before {
    width: 150px;
    height: 150px;
    top: -60px;
    right: -35px;
}

.jl-hero:after {
    width: 90px;
    height: 90px;
    right: 60px;
    bottom: -48px;
    background-color: rgba(255, 255, 255, 0.08);
}

.jl-hero__text {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.jl-hero__deco {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    margin-left: 12px;
    font-size: 82px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.20);
}

.jl-hero__brand {
    font-size: 12px;
    letter-spacing: 1px;
    opacity: 0.85;
    margin-bottom: 4px;
}

.jl-hero__greet {
    font-size: 22px;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jl-hero__desc {
    font-size: 13px;
    opacity: 0.9;
}

/* --------------------------------------------------------------------------
   搜索框 .jl-search（首页：独立胶囊搜索输入）
   -------------------------------------------------------------------------- */
.jl-search {
    position: relative;
    margin: 12px 7px 0;
}

.jl-search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #999;
    pointer-events: none;
}

.jl-search__input {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 0 14px 0 36px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    border: none;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

/* --------------------------------------------------------------------------
   搜索栏 .jl-searchbar（员工中心：返回 + 搜索 合并为一个胶囊）
   -------------------------------------------------------------------------- */
.jl-searchbar {
    display: flex;
    align-items: center;
    height: 40px;
    margin: 12px 7px 0;
    padding: 0 14px 0 12px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.jl-searchbar__back {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 14px;
    color: #07c160;
    color: var(--weui-BRAND);
}

.jl-searchbar__back .fa {
    margin-right: 4px;
    font-size: 14px;
}

.jl-searchbar__divider {
    flex: 0 0 auto;
    width: 1px;
    height: 18px;
    margin: 0 10px;
    background-color: #ececec;
}

.jl-searchbar__icon {
    flex: 0 0 auto;
    margin-right: 6px;
    font-size: 14px;
    color: #999;
}

.jl-searchbar__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: none;
    outline: none;
    background-color: transparent;
    font-size: 14px;
    color: #333;
    -webkit-appearance: none;
    appearance: none;
}

/* --------------------------------------------------------------------------
   已停用角标 .jl-badge-off（宫格图标右上角）
   -------------------------------------------------------------------------- */
.jl-badge-off {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 1px 6px;
    font-size: 10px;
    line-height: 1.6;
    color: #fff;
    background-color: #bbb;
    border-radius: 8px;
}

/* --------------------------------------------------------------------------
   认证页（登录 / 注册 / 微信绑定）.jl-auth
   灰底 + **整页只有一张卡**：白底品牌行做卡头，字段 / 主按钮 / 协议行 / 「其他登录方式」全部做卡体，共用同一圆角同一投影。
   ⚠ 不要退回到“浮动绿卡 + 浮动白卡”的两块结构，也不要把《确定》按钮、快捷登录留在卡外：
     卡外的散件会各自浮动在灰底上，与卡之间出现空白带，割裂感同样明显（均已收到过用户反馈）。
   ⚠ 卡头（居中徽标区）与字段区之间**不得再挂任何独立的块**：
     写成左对齐裸文字行，会同时脱离卡头的居中轴与字段的左轴（用户反馈“违和”）；
     给它加底色做成通边色带，则把整卡拦腰切断、成为卡里的第二层承载物（用户反馈“割裂”）。
     需要一句说明时，占用 .jl-auth__slogan 这个已有的次要灰字槽位即可（见下方该规则注释）。
   ⚠ 认证页**不放 .jl-back**：登录页是登录流程根页（见规则 §3.7 排查 D），注册页原生已有《去登录》硬链做出口，
     两者都不需要额外返回按钮（曾误加过，已删）。
   **色板未新增任何颜色**：渐变只留在主按钮一处（与 .jl-hero/.jl-balance 同一串），品牌绿改由 logo 图片自身承担，强调色只用 var(--weui-BRAND)，
   中性色沿用体系里已有的 #666/#888/#999/#bbb 与 rgba 白/黑叠加。
   仅在 body 上挂 class="jl-auth" 时生效，不影响其它页面的 .weui-form。
   ⚠ 特异度约束：include.html 的内联 <style> 在本文件**之后**加载，凡是与它同权重的规则（如
   `.page > .weui-form{margin-top:40px}` 为 0,2,0）必须写到 0,3,0 才压得住，勿简化成 `.jl-auth .weui-form`。
   -------------------------------------------------------------------------- */
.jl-auth,
.jl-auth .page {
    background-color: rgb(232 232 232 / 37%);
}

/* 只给 body 撑高：.page 上再加 100vh 会多出可滚动区域
   margin-top 归零：抵销 include.html 的 `body{margin-top:5px}`（认证页无固定顶栏，那 5px 会使总高 849 > 844 而多出一屏可滚动量） */
.jl-auth {
    min-height: 100vh;
    margin-top: 0;
}

/* 认证页无固定顶栏：抵销 include.html 为固定栏预留的 40px；整页白底改为透明，由卡承担。
   左右 7px 与全站 .jl-card/.jl-hero 的 7px 侧边距对齐（.jl-back 也是 margin 12px 7px）。
   ⚡ **顶对齐 + 固定落点（padding-top 定值），不要垂直居中**：两页卡高不同（登录 583 / 注册 545），
   居中会让绿卡头的 y 随内容高度浮动 —— 登录→注册跳转时整卡下移，头部跳动可感（用户实测反馈）；
   同一条认证链上的页面，卡头必须钉在同一 y。落点 24px：只做常规页边呼吸，不留大块灰底
   （曾用 48px 被反馈“顶部空一块不好看”）。底部余量交给灰底呼吸；页脚版权已收进卡内随文档流，
   不再 fixed 锚底，故 min-height 不再扣 fixed 页脚高（旧值 calc(100vh - 63px) 已废）；
   内容高于该值时容器自然长高，不会裁顶。 */
.jl-auth .page > .weui-form {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100vh;
    margin-top: 0;
    padding: 24px 7px 20px;
    background-color: transparent;
}

/* 认证卡：卡头（白底品牌行）+ 卡体（字段）共用的唯一外层容器；圆角与投影只在这一层出现。
   卡内节奏统一在约 20px（实测曾出现链接行→按钮视觉空隙 40px = tips 的 padding-bottom 14 + opr 的 margin-top 26 叠加，
   被用户反馈为“割裂”；各块间距叠规则：块自身 padding 归零，间隙一律由下一块的 margin-top 提供，不再叠加强度）。
   极简白卡：圆角放大到 20px、投影比全站 .jl-card 柔一档——卡头绿带去掉后卡失去视觉重量，
   靠柔影把它从浅灰底上托起来（仍是整页唯一一层投影，其它块一律不加）。 */
.jl-auth__panel {
    overflow: hidden;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* 品牌头区（卡头）：**白底居中的徽标区**，不再是绿渐变大色带——品牌绿由 logo 自身承担（房子是绿的），
   卡头不再需要色带或绿砖来制造识别度，整页唯一的绿色大块只剩主按钮。
   结构：.jl-auth__logo（图片）+ .jl-auth__heading（品牌名 / 标语两行堆叠），column 居中。
   文案仍复用首页 .jl-hero 既有串（不新造词、不与微信原生标题栏重复）。
   左右 32px 与卡内内容轴（字段文字左轴）同轴；底部只留 6px，与下一块的间距由下一块提供（不叠加）。 */
.jl-auth__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 32px 6px;
    text-align: center;
}

/* 徽标：透明底 PNG（白底已在构建时抠掉，避免 jpg 白块在白卡上显出方形边界）。
   容器只负责尺寸与居中，不给底色/圆角/投影——加了就又变回一块“砖”，与极简白卡相冲。 */
.jl-auth__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 10px;
}

.jl-auth__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 品牌名 + 标语的堆叠容器：min-width:0 让长文案在 flex 里正常收缩而不是把徽标挤出去 */
.jl-auth__heading {
    min-width: 0;
}

.jl-auth__brand {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.5px;
    color: #1f1f1f;
}

/* 卡头第三行（次要灰字槽位）：登录页放品牌标语、注册页放本页操作说明。
   两页共用这一个槽位、同一字号，所以卡头等高、字段起始 y 一致；
   改文案时保持一行以内（长了会把两页卡头撑不齐）。 */
.jl-auth__slogan {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.5px;
    color: #999;
}

/* weui 2.x 的 .weui-form__* 各区自带间距（为“大标题+描述+正文+按钮”布局设计，具体值随版本浮动），
   .jl-auth 用自己的卡头/卡体重排，故先把命中的三个区 margin/padding 全部显式归零接管，再按层叠顺序写具体间距。
   （注册页的说明文字已收进卡头的 .jl-auth__slogan 槽位，页面上不再有 text-area/desc，故此处不列 text-area）*/
.jl-auth .weui-form__control-area,
.jl-auth .weui-form__tips-area,
.jl-auth .weui-form__opr-area {
    margin: 0;
    padding: 0;
}

/* 字段区铺平：圆角与投影统一由外层 .jl-auth__panel 负责，卡内不再叠第二层卡 */
.jl-auth .weui-cells {
    background-color: transparent;
}

/* ⚡ 卡内内容轴 = 32px，不是 16px（拉线上 weui.min.css 查到、曾在此踩过两次）：
   .weui-cells__group_form .weui-cells { margin-left:16px; margin-right:16px }
   所以字段文字的实际左轴 = 16(margin) + 16(cell padding) = 32px。
   weui 自身的 form 配套块（.weui-cells__tips / .weui-form__opr-area / .weui-cells__title 官档都是 padding:0 32px）
   正是按这条 32px 轴对齐的，本组件内其余块（__hero / __aux / __opr-area / __split / __oauth / __tips / __tips-area）一律写 32px 跟它同轴。
   曾试过反过来归零 cells 的 margin、把全卡内衬统一到 16px（轴是对齐了，但内容贴到卡边，用户反馈“靠太边”），已废弃；
   不要再删这 16px margin，也不要把这些块的 32px 改回 16px。 */

/* 关掉 weui 自带的全部分隔线（含每行顶线）：weui 从 OSS 外链、本地无副本可核对默认值，
   故不依赖它，统一由下面的 :after 画底线，避免自带线与自画线叠成双线。 */
.jl-auth .weui-cells:before,
.jl-auth .weui-cells:after,
.jl-auth .weui-cell:before {
    content: none;
}

/* 字段行内衬回到 weui 原生 16px（曾压到 13px）：行高透气，卡自然变高也吃掉底部一截空白
   （顶对齐后 login/register 卡下方分别残留 164/203px 灰底，加高卡比加 padding-top 更有收益） */
.jl-auth .weui-cell {
    position: relative;
    padding: 16px;
}

/* 行分隔线：卡头绿带去掉后，改由 1px 细线承担字段分组（替代“色带 + 灰底”的层次法）。
   两端各缩 16px（相对 cell）：因 weui 给 .weui-cells__group_form .weui-cells 另有 16px 左右 margin，线的绝对位置正好落在卡内 32px 内容轴上，
   与 label 文字左轴、以及下一行（__aux 的「忘记密码？」/ __tips 的《去登录》）文字右端同时对齐；
   若把 right 改成 0，线会通到卡的圆角边、与上下内容不齐。
   scaleY(.5) 做视网膜细线。
   ⚡ 这里曾有一条「末行不画线」的全局例外（.weui-cell:last-child:after{content:none}），已删除：
     它的前提是字段区末行会贴住卡的圆角底边；改版后两页字段区下方都紧跟内容行
     （登录页 .jl-auth__aux「记住密码 | 忘记密码？」、注册页 .weui-cells__tips《去登录》），
     末行不再是卡底，留着它只会造成“手机号有线、密码没线”的不对称（用户反馈不好看）。
     若将来某页的字段区真的成为卡内最后一块，再按那一页单独处理，不要恢复全局例外。 */
.jl-auth .weui-cell:after {
    content: '';
    position: absolute;
    right: 16px;
    bottom: 0;
    left: 16px;
    height: 1px;
    background-color: #e8e8e8;
    transform: scaleY(0.5);
    transform-origin: 0 100%;
}

/* 标签**左对齐且不拉伸**：weui 给 .weui-label 定了固定宽度 + `text-align:justify; text-justify:distribute-all-lines`，
   会把“密码”两字拉开成“密　　码”（真机实测），故改 left；宽度仍由 weui 固定，所以输入区起始位置仍对齐。
   同时模板里的 `密&nbsp;&nbsp;&nbsp;&nbsp;码` 已改为 `密码`（justify 一关，nbsp 撑出的空洞反而变成新的不齐）。 */
.jl-auth .weui-cell__hd .weui-label {
    color: #666;
    text-align: left;
    text-justify: auto;
}

.jl-auth .weui-cell__bd .weui-input {
    color: #333;
}

.jl-auth .weui-cell__bd .weui-input::-webkit-input-placeholder {
    color: #c4c4c4;
}

/* 「记住密码 | 忘记密码？」两端行（登录页）：主按钮的附属行，**无底色、无分隔线**——
   它依附按钮，不是在卡里另起一块（卡头与字段之间不得另起块，见本组件顶部注释）。
   原“记住”是字段区最后一行的 weui-switch 滑动开关，按参考布局改成方框勾选并与“忘记密码”同行。 */
.jl-auth__aux {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px 0;
    font-size: 13px;
    color: #666;
}

.jl-auth__remember {
    display: flex;
    align-items: center;
    color: #666;
}

/* 自定义方形勾选框：weui 的 .weui-switch 是滑动开关，与参考布局的方框不同。
   input 仍在 DOM 内且 name / checked 不变，JS 里 `$('input[name="rememberMe"]').get(0).checked` 零改动；
   它也不是 .weui-input，所以不会被“输入框聚焦就藏备案页脚”那段逻辑误伤。
   ⚡ 在 input（void 元素）上用伪元素画对勾可行——weui 自己的 .weui-switch 就用 input:before 画滑块；
   若某内核不支持 appearance:none 则退回原生 checkbox，属可接受退化（功能不受影响）。 */
.jl-auth__check {
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0 6px 0 0;
    padding: 0;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    background-color: #fff;
    vertical-align: middle;
    -webkit-appearance: none;
    appearance: none;
}

.jl-auth__check:checked {
    border-color: #07c160;
    border-color: var(--weui-BRAND);
    background-color: #07c160;
    background-color: var(--weui-BRAND);
}

.jl-auth__check:checked:after {
    content: '';
    position: absolute;
    top: 5px;
    left: 3px;
    width: 8px;
    height: 4px;
    border-color: #fff;
    border-style: solid;
    border-width: 0 0 1.5px 1.5px;
    transform: rotate(-45deg);
}

/* 链接行（注册页《去登录》）：贴住字段区末尾右对齐绿链；
   底部 padding 只留 2px —— 与按钮的间距由 opr-area 的 margin-top 统一提供，不叠加（叠加正是 40px 空隙的来源） */
.jl-auth .weui-cells__tips {
    margin: 0;
    padding: 20px 32px 2px;
    font-size: 13px;
    text-align: right;
}

.jl-auth .weui-link {
    color: #07c160;
    color: var(--weui-BRAND);
    text-decoration: none;
}

/* 主按钮：加高 + 圆角 12px + 绿调柔影，按下回弹；去掉 weui 自带的 1px 外框伪元素（与新圆角不匹配）。
   左右 32px 与卡内内容轴（字段文字左轴，见上方 ⚡ 注释）对齐，使按钮与输入区同宽。
   ⚠ 必须显式破掉 weui 根底样式的 `.weui-btn{width:184px; margin:auto}`（真机实测按钮只有 184px，
   而字段区 344px，通栏卡里出现窄胶囊就是“割裂”的另一半原因）。 */
.jl-auth .weui-form__opr-area {
    padding: 0 32px;
    margin-top: 18px;
}

/* 卡内最后一个块是按钮时（注册页无快捷登录），补出卡的底部内衬，避免按钮贴住圆角边 */
.jl-auth .weui-form__opr-area:last-child {
    padding-bottom: 24px;
}

/* 按钮下方的注册入口（登录页「还没有账号？立即注册」）：居中一行，
   与按钮的间距由本块 margin-top 单独提供（不叠按钮区 padding）；
   与上方「忘记密码？」同指 /register.html——注册与重置密码共用一页，两个入口不冲突 */
.jl-auth__foot {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    color: #888;
}

.jl-auth .weui-form__opr-area .weui-btn {
    display: block;
    width: auto;
    margin-left: 0;
    margin-right: 0;
    padding: 12px 0;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
    /* 与卡头同串的绿渐变：构成“绿头—白身—绿尾”的呼应，仍是同一绿系不新增色相；
       覆盖 weui-btn_primary 的纯色背景（本规则特异度更高，直接生效） */
    background-color: #07c160;
    background-image: linear-gradient(135deg, var(--weui-BRAND) 0%, #10ad76 55%, #0a9d58 100%);
    /* 绿调**同色**投影（按参考布局加回）：与 include.html 那条被否决的影不是一回事——
       那条是向左上飘的灰雾（`0 0 2px #a5a0a061, -5px -5px 10px rgba(165,160,160,.37)`）叠在饱和绿上显脏，必须压掉；
       这条与按钮同色系、向下扩散，是给按钮一个底座而不是把它浮起来。本规则特异度更高，include 的灰影仍被压住。 */
    box-shadow: 0 6px 14px rgba(7, 193, 96, 0.28);
    transition: transform 0.12s;
}

/* 验证码“获取”按钮也是 .weui-btn，同样压掉全局灰影，与主按钮同语言；
   灰块（weui-btn_default）改为 ghost：透明底、中性灰描边（不再用绿描边），把视觉等级明确压在主按钮之下 */
.jl-auth .weui-vcode-btn {
    box-shadow: none;
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #07c160;
    color: var(--weui-BRAND);
}

/* 主按钮的尺寸取舍：高 58→52、字号 17/600→16/500、字距 1→2（这三项沿用，用户实测认可）；
   投影一项按参考布局改回绿调同色影（曾按“平面化”去掉过，区别见上方 box-shadow 注释）。
   weui 自带的 1px 外框伪元素仍关掉（与大圆角不匹配）；按下反馈只留轻微缩放。 */
.jl-auth .weui-form__opr-area .weui-btn:after {
    content: none;
}

.jl-auth .weui-form__opr-area .weui-btn:active {
    transform: scale(0.985);
}

/* 分隔行 + 第三方登录（把原来 float:right 的裸图片提升为带标签的圆形按钮），均在卡体内；
   与主按钮、微信图标之间的空隙收紧为 20px / 10px（曾为 24px / 16px，叠各块自带投影时显散） */
.jl-auth__split {
    display: flex;
    align-items: center;
    margin: 20px 32px 10px;
    font-size: 12px;
    color: #b2b2b2;
}

.jl-auth__split:before,
.jl-auth__split:after {
    content: '';
    flex: 1;
    height: 1px;
    /* 与字段行分隔线同色，整卡只有一种线色 */
    background-color: #e8e8e8;
}

/* 快捷登录区是卡的最后一块，由它承担卡的底部内衬；投影降档与整卡一致，避免“层层悬浮” */
.jl-auth__oauth {
    padding: 0 32px 24px;
    text-align: center;
}

.jl-auth__oauth-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    color: #888;
    text-decoration: none;
}

/* 微信圆底：按参考布局用品牌绿的淡调（与 .weui-grid:active 同值），不再新增色值；
   仍不给投影，整卡只留 panel 一层影 */
.jl-auth__oauth-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 8px;
    border-radius: 50%;
    background-color: rgba(7, 193, 96, 0.08);
    transition: transform 0.12s;
}

.jl-auth__oauth-icon img {
    display: block;
    width: 32px;
    height: 32px;
}

.jl-auth__oauth-btn:active .jl-auth__oauth-icon {
    transform: scale(0.94);
}

/* 协议行（注册页）：贴住字段区末尾，与 agree→按钮 20px 节奏同源 */
.jl-auth .weui-form__tips-area {
    padding: 10px 32px 0;
}

/* 协议行点击热区：weui 把 .weui-form .weui-agree 做成占满整行的 flex（justify-content:center），
   整行都是 label 的点击转发热区，行内文本两侧空白点一下也会勾选；
   改 inline-flex 收缩到内容宽，空白区域不再落在 label 内，居中改由父级 text-align 承担，视觉不变。
   （选择器带 .jl-auth .weui-form 两级提升优先级压过 OSS 的 .weui-form .weui-agree） */
.jl-auth .weui-form .weui-agree {
    display: inline-flex;
}

.jl-auth .weui-form__tips-area {
    text-align: center;
}

.jl-auth .weui-agree {
    padding: 0;
    font-size: 12px;
    color: #999;
    text-align: left;
}

.jl-auth .weui-agree a {
    color: #07c160;
    color: var(--weui-BRAND);
}

/* 页脚版权：收进卡内随文档流（不再 fixed 锚底）——割裂感来自“白卡 + 浮在灰底上的全宽灰字”两层皮，
   收进卡后整页真正只有一张卡；32px 轴与卡内各块对齐，间距按“间隙一律由 margin-top 提供”的节奏给。
   键盘避让改由页面自然滚动承担，两页原 focus/blur 隐藏页脚的 JS 已同步删除（随流时隐藏反致卡高跳变）。 */
.jl-auth .weui-footer {
    margin-top: 20px;
    padding: 0 32px 24px;
}

/* 字号色：缩小降对比。⚠ 需压过 OSS 的 .weui-form .weui-footer{font-size:14px}（页脚现落在 .weui-form 内），
   本文件在 OSS 之后加载，同权重后者胜；若被调整加载顺序需升到 0,3,0 */
.jl-auth .weui-footer,
.jl-auth .weui-footer__link {
    font-size: 11px;
    color: #bbb;
}

.jl-auth .weui-footer__text {
    font-size: 11px;
    color: #c8c8c8;
}