/* ==========================================================================
 * yaoqing2026.css — 邀请功能顾客端界面现代化（第十四批，2026-09-15）
 *
 * 范围：邀请中心（geren_yaoqing/shop_yaoqing）、绩效（jixiao 系）、
 *       邀请码/邀请账单/面对面邀请、客服页
 * 作用域：仅作用于 body 带 sk-yq2026 类的模板。
 * 主题色取门店模板色 muban_color（前缀 dian/mendian/u），经 --sk-theme 传入，默认 #33CCCC。
 *
 * 回滚：删除模板里 yaoqing2026.css 那一行 link 即恢复该页原样。
 * ========================================================================== */

body.sk-yq2026 {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background: #F7F7F7;
}

/* ==========================================================================
 * 1. 点线/虚线分隔 -> 实线（只改单边整体简写，不用 border-style 简写）
 * ========================================================================== */
body.sk-yq2026 div[style*="dotted"][style*="border-bottom"],
body.sk-yq2026 td[style*="dotted"][style*="border-bottom"],
body.sk-yq2026 li[style*="dotted"][style*="border-bottom"],
body.sk-yq2026 tr[style*="dotted"][style*="border-bottom"] {
    border-bottom: 1px solid #EBEBEB !important;
}
body.sk-yq2026 div[style*="dotted"][style*="border-top"],
body.sk-yq2026 td[style*="dotted"][style*="border-top"],
body.sk-yq2026 tr[style*="dotted"][style*="border-top"] {
    border-top: 1px solid #EBEBEB !important;
}
body.sk-yq2026 div[style*="dashed"][style*="border-top"] {
    border-top: 1px solid #EBEBEB !important;
}
body.sk-yq2026 div[style*="dashed"][style*="border-bottom"] {
    border-bottom: 1px solid #EBEBEB !important;
}

/* ==========================================================================
 * 2. 底部固定栏（footdiv）：浅冷灰 + 分隔线 + 投影 + 全面屏安全区
 * ========================================================================== */
body.sk-yq2026 .footdiv {
    background: #EDEFF2 !important;
    border-top: 0.5px solid #DDE1E6 !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .08);
    height: auto !important;
    min-height: 50px;
    padding-bottom: env(safe-area-inset-bottom, 0);
    opacity: 1 !important;
    filter: none !important;
}
body.sk-yq2026 .footdiv a,
body.sk-yq2026 .footdiv a font {
    text-decoration: none !important;
}
body.sk-yq2026 .footdiv,
body.sk-yq2026 .footdiv a,
body.sk-yq2026 .footdiv font,
body.sk-yq2026 .footdiv img {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* ==========================================================================
 * 3. 硬编码默认主题色 #33CCCC -> 跟随 --sk-theme
 * ========================================================================== */
body.sk-yq2026 font[style*="color:#33CCCC"],
body.sk-yq2026 font[style*="color: #33CCCC"],
body.sk-yq2026 a[style*="color:#33CCCC"],
body.sk-yq2026 a[style*="color: #33CCCC"],
body.sk-yq2026 span[style*="color:#33CCCC"],
body.sk-yq2026 div[style*="color:#33CCCC"] {
    color: var(--sk-theme, #33CCCC) !important;
}
body.sk-yq2026 a[style*="background:#33CCCC"],
body.sk-yq2026 a[style*="background: #33CCCC"],
body.sk-yq2026 button[style*="background:#33CCCC"],
body.sk-yq2026 input[style*="background:#33CCCC"],
body.sk-yq2026 div[style*="background:#33CCCC"] {
    background: var(--sk-theme, #33CCCC) !important;
}
body.sk-yq2026 [style*="border:#33CCCC solid 1px"],
body.sk-yq2026 [style*="border: #33CCCC solid 1px"] {
    border-color: var(--sk-theme, #33CCCC) !important;
}

/* ==========================================================================
 * 4. 白卡圆角放大：3px/5px 直角 -> 12px + 柔和投影
 * ========================================================================== */
body.sk-yq2026 div[style*="background: #ffffff"][style*="border-radius:3px"],
body.sk-yq2026 div[style*="background: #ffffff"][style*="border-radius: 3px"],
body.sk-yq2026 div[style*="background:#ffffff"][style*="border-radius:3px"],
body.sk-yq2026 div[style*="background: #FFFFFF"][style*="border-radius:3px"],
body.sk-yq2026 div[style*="background:#FFFFFF"][style*="border-radius:3px"] {
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
body.sk-yq2026 div[style*="background: #ffffff"][style*="border-radius:5px"],
body.sk-yq2026 div[style*="background:#ffffff"][style*="border-radius:5px"],
body.sk-yq2026 div[style*="background: #FFFFFF"][style*="border-radius:5px"],
body.sk-yq2026 div[style*="background:#FFFFFF"][style*="border-radius:5px"] {
    border-radius: 12px !important;
}

/* ==========================================================================
 * 5. 灰底内容块（与页面底色撞色）-> 白卡
 * ========================================================================== */
body.sk-yq2026 div[style*="background:#F7F7F7"][style*="border-radius:5px"],
body.sk-yq2026 div[style*="background: #F7F7F7"][style*="border-radius:5px"],
body.sk-yq2026 div[style*="background:#f7f7f7"][style*="border-radius:5px"],
body.sk-yq2026 div[style*="background: #f7f7f7"][style*="border-radius:5px"],
body.sk-yq2026 div[style*="background:#F7F7F7"][style*="border-radius:3px"],
body.sk-yq2026 div[style*="background: #f7f7f7"][style*="border-radius:3px"],
body.sk-yq2026 div[style*="background: #f7f7f7"][style*="border-radius: 3px"] {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

/* ==========================================================================
 * 6. 表单输入框/下拉：灰底直角 -> 白底细边圆角，聚焦主题色描边
 * ========================================================================== */
body.sk-yq2026 input[type="text"][style*="background:#F7F7F7"],
body.sk-yq2026 input[type="text"][style*="background: #f7f7f7"],
body.sk-yq2026 input[type="text"][style*="background:#f7f7f7"],
body.sk-yq2026 input[type="tel"][style*="background:#F7F7F7"],
body.sk-yq2026 input[type="tel"][style*="background: #f7f7f7"],
body.sk-yq2026 input[type="number"][style*="background:#F7F7F7"],
body.sk-yq2026 input[type="number"][style*="background: #f7f7f7"],
body.sk-yq2026 select[style*="background:#F7F7F7"],
body.sk-yq2026 select[style*="background: #f7f7f7"] {
    background: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 10px !important;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
}
body.sk-yq2026 input[type="text"][style*="background:#F7F7F7"]:focus,
body.sk-yq2026 input[type="text"][style*="background: #f7f7f7"]:focus,
body.sk-yq2026 input[type="tel"][style*="background:#F7F7F7"]:focus,
body.sk-yq2026 input[type="number"][style*="background:#F7F7F7"]:focus,
body.sk-yq2026 select[style*="background:#F7F7F7"]:focus {
    border-color: var(--sk-theme, #33CCCC) !important;
}

/* ==========================================================================
 * 7. 底栏浅灰底配套：白色文字/图标/分隔线转深色
 * ========================================================================== */
body.sk-yq2026 .footdiv font[color="#FFFFFF"],
body.sk-yq2026 .footdiv font[color="#ffffff"],
body.sk-yq2026 .footdiv a[style*="color:#FFFFFF"],
body.sk-yq2026 .footdiv a[style*="color: #FFFFFF"],
body.sk-yq2026 .footdiv a[style*="color:#ffffff"],
body.sk-yq2026 .footdiv font[style*="color:#FFFFFF"],
body.sk-yq2026 .footdiv font[style*="color: #FFFFFF"],
body.sk-yq2026 .footdiv div[style*="color:#FFFFFF"],
body.sk-yq2026 .footdiv div[style*="color: #FFFFFF"],
body.sk-yq2026 .footdiv span[style*="color:#FFFFFF"],
body.sk-yq2026 .footdiv span[style*="color: #FFFFFF"] {
    color: #444444 !important;
}
/* 底栏白色图标转深灰（黄色星星 jifen.png 不动） */
body.sk-yq2026 .footdiv img[src*="huiyuan11"],
body.sk-yq2026 .footdiv img[src*="huiyuan12"],
body.sk-yq2026 .footdiv img[src*="huiyuan13"] {
    filter: brightness(0.3);
}
/* 底栏白色点线分隔改为浅灰 */
body.sk-yq2026 .footdiv td[style*="border-left"] {
    border-left: 1px solid #D5D9DE !important;
}

/* ==========================================================================
 * 8. 邀请特有：操作按钮圆角加大 + 轻投影
 * ========================================================================== */
body.sk-yq2026 div[style*="width:120px"][style*="border-radius:5px"][style*="float: right"],
body.sk-yq2026 div[style*="width:120px"][style*="border-radius:5px"][style*="float:right"] {
    border-radius: 10px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}

/* 底栏彩色背景按钮保持白字（防误伤，同商城批修复） */
body.sk-yq2026.css .footdiv font[style*="background"][style*="color:#FFFFFF"],
body.sk-yq2026.css .footdiv font[style*="background"][style*="color: #FFFFFF"],
body.sk-yq2026.css .footdiv font[style*="background"][style*="color:#ffffff"] {
    color: #FFFFFF !important;
}

/* ==========================================================================
 * 9. 邀请门店主页专项（shop/m_mendian_shop_yaoqing）：分段卡片化
 *    真实结构：.cont > (banner | .box-container店招图 | 店名白条)
 *              > 通知条 div[padding-left:3%]
 *              > wrapper div[background:#F7F7F7;margin-top:0px]（无 padding-top，
 *                借此与个人中心 box-container 区分）
 *                ├ table 四图标（首个 table）
 *                └ table 功能双卡 ×2（td[border-radius:10px]）
 * ========================================================================== */
/* 9.1 店招图容器：去灰底，图片大圆角（只限店招图，不碰头像等圆形图） */
body.sk-yq2026 .box-container {
    background: transparent !important;
    padding: 10px 12px 0 !important;
}
body.sk-yq2026 .box-container img[style*="max-height:200px"] {
    border-radius: 14px !important;
}
/* 9.2 店名白条（无 banner 时）：独立卡片，去掉底部虚线 */
body.sk-yq2026 div[style*="border-bottom:#ECECEC dotted"],
body.sk-yq2026 div[style*="border-bottom: #ECECEC dotted"] {
    margin: 10px 12px 0 !important;
    border-radius: 12px !important;
    border-bottom: none !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
/* 9.3 滚动通知条：独立圆角卡片 */
body.sk-yq2026 div[style*="padding-left:3%"][style*="background: #FFFFFF"],
body.sk-yq2026 div[style*="padding-left:3%"][style*="background:#FFFFFF"] {
    margin: 10px 12px 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
/* 9.4 图标+功能卡容器：灰底改透明（不碰个人中心的 box-container） */
body.sk-yq2026 div[style*="background:#F7F7F7"][style*="margin-top:0px"]:not([style*="padding-top"]):not(.box-container),
body.sk-yq2026 div[style*="background: #F7F7F7"][style*="margin-top:0px"]:not([style*="padding-top"]):not(.box-container) {
    background: transparent !important;
}
/* 9.5 四图标导航（线下邀请/邀请海报/如何邀请/已邀好友）：灰条 -> 白卡 */
body.sk-yq2026 div[style*="background:#F7F7F7"][style*="margin-top:0px"]:not([style*="padding-top"]):not(.box-container) > table:first-child,
body.sk-yq2026 div[style*="background: #F7F7F7"][style*="margin-top:0px"]:not([style*="padding-top"]):not(.box-container) > table:first-child {
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    margin-top: 10px;
}
/* 9.6 功能大卡（我的绩效/绩效兑换/账号管理/咨询客服）：对齐留白 */
body.sk-yq2026 div[style*="background:#F7F7F7"][style*="margin-top:0px"]:not([style*="padding-top"]):not(.box-container) > table,
body.sk-yq2026 div[style*="background: #F7F7F7"][style*="margin-top:0px"]:not([style*="padding-top"]):not(.box-container) > table {
    margin-left: 12px;
    margin-right: 12px;
    width: calc(100% - 24px) !important;
}
/* 9.7 功能大卡圆角加大 + 柔和投影 */
body.sk-yq2026 td[style*="border-radius:10px"],
body.sk-yq2026 td[style*="border-radius: 10px"] {
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06) !important;
}
/* 9.8 通知条文字垂直居中（原 line-height:48px 在 24px 容器里会切字） */
body.sk-yq2026 ._container li {
    line-height: 24px !important;
}

/* ==========================================================================
 * 10. 邀请个人中心专项（m_geren_yaoqing / m_geren_yaoqing_piaowu）
 *     真实结构：.box-container[background:#F7F7F7;padding-top:0px]
 *       ├ 头图 img[gerenbeijing] + #cart-box 头像叠加
 *       ├ div.box11.shadow 面对面邀请（主题色实心）
 *       ├ div[letter-spacing:2px] 生成邀请海报 / 申请绩效结算（白底主题字）
 *       ├ table 绩效双卡（td[height:58px]）
 *       ├ table 图标格 ×2（td[border-radius:5px]，img 24px）
 *       └ div[height:45px] 列表行（结算申请记录/修改密码/授权注册…）
 * ========================================================================== */
/* 10.1 顶部头图：大圆角 */
body.sk-yq2026 img[src*="gerenbeijing"] {
    border-radius: 14px !important;
}
/* 10.2 操作按钮：统一圆角加高，白色按钮补细边 */
body.sk-yq2026 div[style*="letter-spacing: 2px"],
body.sk-yq2026 div[style*="letter-spacing:2px"] {
    border-radius: 12px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}
body.sk-yq2026 div[style*="letter-spacing: 2px"][style*="background: #ffffff"],
body.sk-yq2026 div[style*="letter-spacing: 2px"][style*="background:#ffffff"] {
    border: 1px solid #EFEFF2;
}
/* 主按钮：去掉老式折角阴影，换柔和投影 */
body.sk-yq2026 .box11.shadow {
    box-shadow: 0 6px 14px rgba(0, 0, 0, .16) !important;
}
body.sk-yq2026 .box11.shadow::before,
body.sk-yq2026 .box11.shadow::after {
    display: none !important;
}
/* 10.3 绩效双卡 + 图标格：圆角加大，绩效数字主题色突出 */
body.sk-yq2026 td[style*="border-radius:5px"],
body.sk-yq2026 td[style*="border-radius: 5px"] {
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06) !important;
}
body.sk-yq2026 td[style*="height:58px"] div {
    color: #999999;
    margin-bottom: 2px;
}
body.sk-yq2026 td[style*="height:58px"] center {
    font-size: 19px;
    font-weight: 700;
    color: var(--sk-theme, #33CCCC);
}
/* 10.4 功能列表行：去硬编码高度，垂直居中留白 */
body.sk-yq2026 div[style*="height:45px"][style*="border-radius:6px"],
body.sk-yq2026 div[style*="height:45px"][style*="border-radius: 6px"] {
    height: auto !important;
    padding-top: 13px;
    padding-bottom: 13px;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05) !important;
}
body.sk-yq2026 div[style*="height:45px"] > div[style*="height:10px"] {
    display: none;
}

/* ==========================================================================
 * 第三轮 2026-10-13 汇总页重构（第一波）：两个邀请中心 + 票务孪生页
 * 作用域：body.sk-yq2026 下的 .skyq-* 结构类；老结构模板不带这些类，不受影响。
 * 主题色沿用 --sk-theme（muban_color，默认 #33CCCC）。
 * 回滚：模板换回旧版（git）即可，本节对旧结构零命中。
 * ========================================================================== */
body.sk-yq2026 .skyq-page {
    padding: 10px 12px 28px;
    font-family: -apple-system, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
    -webkit-tap-highlight-color: transparent;
}
/* 头部主卡：主题色渐变 + 装饰圆 */
body.sk-yq2026 .skyq-hero {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 24px 16px 40px;
    background: var(--sk-theme, #33CCCC);
    color: #FFFFFF;
    text-align: center;
}
body.sk-yq2026 .skyq-hero::before {
    content: "";
    position: absolute;
    right: -46px;
    top: -58px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
}
body.sk-yq2026 .skyq-hero::after {
    content: "";
    position: absolute;
    left: -36px;
    bottom: -70px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
}
body.sk-yq2026 .skyq-hero-avatar {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .85);
    object-fit: cover;
    display: inline-block;
}
body.sk-yq2026 .skyq-hero-name {
    font-size: 17px;
    font-weight: 600;
    margin-top: 9px;
    line-height: 1.35;
}
body.sk-yq2026 .skyq-hero-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, .78);
    margin-top: 3px;
}
body.sk-yq2026 .skyq-hero-btns {
    position: relative;
    margin-top: 14px;
}
body.sk-yq2026 .skyq-hero-btns a {
    display: inline-block;
    text-decoration: none;
    font-size: 14px;
    padding: 8px 30px;
    border-radius: 999px;
    margin: 0 5px;
}
body.sk-yq2026 .skyq-hero-btns .skyq-btn-solid {
    background: #FFFFFF;
    color: #1F2329;
    font-weight: 600;
}
body.sk-yq2026 .skyq-hero-btns .skyq-btn-ghost {
    border: 1px solid rgba(255, 255, 255, .85);
    color: #FFFFFF;
}
/* 白卡 */
body.sk-yq2026 .skyq-card {
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(31, 41, 55, .05);
    overflow: hidden;
}
/* 绩效双数字卡（上提叠在 hero 上） */
body.sk-yq2026 .skyq-stats {
    position: relative;
    margin-top: -26px;
    display: flex;
}
body.sk-yq2026 .skyq-stat {
    flex: 1;
    text-align: center;
    padding: 13px 4px 12px;
    text-decoration: none;
    display: block;
}
body.sk-yq2026 .skyq-stat + .skyq-stat {
    border-left: 1px solid #F0F1F3;
}
body.sk-yq2026 .skyq-stat-label {
    font-size: 12px;
    color: #8A919F;
}
body.sk-yq2026 .skyq-stat-num {
    font-size: 24px;
    font-weight: 700;
    color: var(--sk-theme, #33CCCC);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
/* 主按钮 / 次级按钮 */
body.sk-yq2026 .skyq-btn-main {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    margin-top: 12px;
    border-radius: 12px;
    background: var(--sk-theme, #33CCCC);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .13);
}
body.sk-yq2026 .skyq-btn-main svg {
    width: 21px;
    height: 21px;
    margin-right: 7px;
}
body.sk-yq2026 .skyq-row2 {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
body.sk-yq2026 .skyq-btn-sub {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid #EEF0F2;
    color: var(--sk-theme, #33CCCC);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(31, 41, 55, .05);
}
body.sk-yq2026 .skyq-btn-sub svg {
    width: 19px;
    height: 19px;
    margin-right: 6px;
}
/* 六宫格变体（2 行 × 3 列，会员/票务邀请中心用） */
body.sk-yq2026 .skyq-grid3 {
    flex-wrap: wrap;
    padding: 5px 0 7px;
}
body.sk-yq2026 .skyq-grid3 .skyq-grid-item {
    flex: 0 0 33.333%;
    width: 33.333%;
    box-sizing: border-box;
    padding: 15px 0 14px;
}
body.sk-yq2026 .skyq-grid3 .skyq-grid-item svg {
    width: 28px;
    height: 28px;
    margin-bottom: 7px;
}
/* 功能宫格（4 列） */
body.sk-yq2026 .skyq-grid {
    display: flex;
    margin-top: 12px;
    padding: 8px 0;
}
body.sk-yq2026 .skyq-grid-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0 14px;
    text-decoration: none;
    color: #3E4550;
    font-size: 13px;
}
body.sk-yq2026 .skyq-grid-item svg {
    width: 32px;
    height: 32px;
    color: var(--sk-theme, #33CCCC);
    margin-bottom: 8px;
}
/* 分组列表 */
body.sk-yq2026 .skyq-list {
    margin-top: 10px;
}
body.sk-yq2026 .skyq-item {
    display: flex;
    align-items: center;
    padding: 13px 14px;
    font-size: 14px;
    color: #333A45;
    text-decoration: none;
    position: relative;
}
body.sk-yq2026 .skyq-item + .skyq-item {
    border-top: 1px solid #F2F3F5;
}
body.sk-yq2026 .skyq-item svg {
    width: 19px;
    height: 19px;
    color: #8A919F;
    margin-right: 11px;
    flex-shrink: 0;
}
body.sk-yq2026 .skyq-item::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.6px solid #C2C7CE;
    border-top: 1.6px solid #C2C7CE;
    transform: rotate(45deg);
    margin-left: auto;
    flex-shrink: 0;
}
body.sk-yq2026 .skyq-item-danger {
    color: #E64340;
}
body.sk-yq2026 .skyq-item-danger svg {
    color: #E64340;
}
/* 子页卡片入场（替代老版 1px/帧爬行动画，纯 CSS 一次到位） */
@keyframes skyq-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
body.sk-yq2026 .skyq-in {
    animation: skyq-in .35s ease both;
}
@media (prefers-reduced-motion: reduce) {
    body.sk-yq2026 .skyq-in { animation: none; }
}
/* 按压反馈 */
body.sk-yq2026 .skyq-press {
    transition: transform .12s ease, opacity .12s ease;
}
body.sk-yq2026 .skyq-press:active {
    transform: scale(.98);
    opacity: .82;
}
/* 门店页：店招图卡 / 店名迷你头卡 */
body.sk-yq2026 .skyq-shopimg {
    padding: 2px 0 0;
}
body.sk-yq2026 .skyq-shopimg img {
    width: 100%;
    border-radius: 14px;
    max-height: 200px;
    object-fit: cover;
    display: block;
    box-shadow: 0 2px 10px rgba(31, 41, 55, .06);
}
body.sk-yq2026 .skyq-hero-mini {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: var(--sk-theme, #33CCCC);
    color: #FFFFFF;
    text-align: center;
    padding: 22px 12px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .5px;
}
body.sk-yq2026 .skyq-hero-mini::before {
    content: "";
    position: absolute;
    right: -38px;
    top: -52px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
}
/* 门店页：滚动通知条 */
body.sk-yq2026 .skyq-notice {
    display: flex;
    align-items: center;
    margin-top: 12px;
    padding: 10px 14px;
}
body.sk-yq2026 .skyq-notice-horn {
    width: 19px;
    height: 19px;
    color: var(--sk-theme, #33CCCC);
    flex-shrink: 0;
    margin-right: 9px;
}
body.sk-yq2026 .skyq-notice-view {
    flex: 1;
    min-width: 0;
    height: 24px;
    overflow: hidden;
}
body.sk-yq2026 .skyq-notice-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
body.sk-yq2026 .skyq-notice-item {
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.sk-yq2026 .skyq-notice-item a {
    color: #5A616C;
    text-decoration: none;
}
body.sk-yq2026 .skyq-notice-more {
    flex-shrink: 0;
    margin-left: 9px;
    display: flex;
}
body.sk-yq2026 .skyq-notice-more svg {
    width: 19px;
    height: 19px;
    color: #A2A8B3;
}
/* 门店页：2×2 横排功能卡 */
body.sk-yq2026 .skyq-nav2 {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}
body.sk-yq2026 .skyq-navcard {
    width: calc(50% - 6px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 19px 15px;
    text-decoration: none;
}
body.sk-yq2026 .skyq-navchip {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 13px;
}
body.sk-yq2026 .skyq-navchip svg {
    width: 24px;
    height: 24px;
    color: var(--sk-theme, #33CCCC);
}
body.sk-yq2026 .skyq-navcard-t {
    font-size: 16px;
    font-weight: 600;
    color: #1F2329;
    line-height: 1.3;
}
body.sk-yq2026 .skyq-navcard-s {
    font-size: 12px;
    color: #8A919F;
    margin-top: 4px;
}
/* 票务页底部导航条：与在线购票/我的订单页原版 footdiv 同款
   （主题色实底 + 白色 png 图标 20px + 11px 白色加粗字，当前页 = 白色下划线） */
/* 票务页底部导航条：与在线购票/我的订单页原版 footdiv 完全同款
   （主题色实底 + 白色png图标20px + br换行 + 11px白粗字，行距由 18px 字号行高自然撑出；
     当前页 = 文字白色下划线 + 图标白色光晕，均与兄弟页同款） */
/* 票务页底部导航条：与在线购票/我的订单页原版 footdiv 完全同款
   —— 内部直接复用兄弟页的 div+table+td+form-submit 结构与内联样式，
   排版由浏览器按相同规则计算，图标/文字位置与间距逐像素一致 */
body.sk-yq2026 .skyq-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    height: 50px;
    background: var(--sk-theme, #33CCCC);
}
body.sk-yq2026 .skyq-tabbar a {
    transition: opacity .2s ease;
}
body.sk-yq2026 .skyq-tabbar a:active {
    opacity: .8;
}
body.sk-yq2026 .skyq-tabbar-space {
    height: 64px;
}

/* ==========================================================================
 * 第三波 2026-10-13 绩效五页组件
 * ========================================================================== */
/* 分段切换（绩效转换 / 绩效结算） */
body.sk-yq2026 .skyq-seg {
    display: flex;
    gap: 6px;
    padding: 6px;
}
body.sk-yq2026 .skyq-seg-item {
    flex: 1;
    display: block;
    text-align: center;
    padding: 9px 0;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sk-theme, #33CCCC);
    background: #F1F3F5;
    text-decoration: none;
    transition: opacity .15s ease;
}
body.sk-yq2026 .skyq-seg-item:active {
    opacity: .8;
}
body.sk-yq2026 .skyq-seg-on {
    background: var(--sk-theme, #33CCCC);
    color: #FFFFFF;
}
/* 转换方式单选卡（页面既有 JS 给选中项父级加 .checked） */
body.sk-yq2026 .skyq-opt {
    display: flex;
    align-items: flex-start;
    border: 1.5px solid #E3E6EA;
    border-radius: 12px;
    padding: 13px 14px;
    margin-top: 10px;
    cursor: pointer;
    transition: border-color .15s ease;
}
body.sk-yq2026 .skyq-opt .skyq-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #C2C7CE;
    margin-right: 10px;
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
    top: 1px;
    transition: all .15s ease;
}
body.sk-yq2026 .skyq-opt .skyq-opt-t {
    font-size: 14px;
    color: #333A45;
    font-weight: 600;
    line-height: 18px;
}
body.sk-yq2026 .skyq-opt .skyq-opt-s {
    font-size: 11px;
    color: #8A919F;
    margin-top: 3px;
    line-height: 16px;
}
body.sk-yq2026 .skyq-opt.checked {
    border-color: var(--sk-theme, #33CCCC);
}
body.sk-yq2026 .skyq-opt.checked .skyq-dot {
    border-color: var(--sk-theme, #33CCCC);
    background: var(--sk-theme, #33CCCC);
}
body.sk-yq2026 .skyq-opt.checked .skyq-dot::after {
    content: "";
    position: absolute;
    left: 4.5px;
    top: 1.5px;
    width: 5px;
    height: 9px;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    transform: rotate(45deg);
}
/* 表单大按钮 / 数字输入框 */
body.sk-yq2026 .skyq-submit {
    display: block;
    width: 100%;
    border: none;
    height: 47px;
    border-radius: 12px;
    background: var(--sk-theme, #33CCCC);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-top: 20px;
    -webkit-appearance: none;
    appearance: none;
}
body.sk-yq2026 .skyq-submit:active {
    opacity: .85;
}
body.sk-yq2026 .skyq-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 46px;
    border: 1px solid #E3E6EA;
    border-radius: 10px;
    background: #FFFFFF;
    padding: 0 14px;
    margin-top: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--sk-theme, #33CCCC);
    -webkit-appearance: none;
    appearance: none;
}
body.sk-yq2026 .skyq-input:focus {
    border-color: var(--sk-theme, #33CCCC);
    outline: none;
}
