/* =====================================================
  个人中心 / 登录注册 样式
  基调：黑灰白 + 金色点缀，卡片化布局，温和微动效
  与 home.css 视觉体系一致（#f7f4f0 背景 / #222 主色 / 12px 圆角）
  ===================================================== */

/* ============ 登录/注册页（BigModel 版式：顶部品牌 + 居中卡片 + 底部备案） ============ */
html {
    overflow-x: hidden;
}

.lg-body {
    display: flex;
    flex-direction: column;
    position: relative;
    background: #f7f8fa;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
}

/* ============ 登录页背景流光动画（浮动光斑 + 上升粒子） ============ */
.lg-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.lg-body > .lg-header,
.lg-body > .lg-center,
.lg-body > .lg-footer {
    position: relative;
    z-index: 1;
}

/* 联系我们等 lg-body 页面：PC 端不显示左侧导航，仅移动端抽屉展开（抽屉内部样式沿用 home.css） */
body.lg-body .left-nav {
    transform: translateX(-100%);
}
body.lg-body .left-nav.show {
    transform: translateX(0);
}
.lg-bg .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .9;
    will-change: transform;
}
.lg-bg .orb-1 {
    width: 340px;
    height: 340px;
    left: -80px;
    top: 150px;
    background: radial-gradient(circle, rgba(0, 87, 255, .45), transparent 70%);
    animation: orbFloat1 14s ease-in-out infinite alternate;
}
.lg-bg .orb-2 {
    width: 300px;
    height: 300px;
    right: -70px;
    top: 170px;
    background: radial-gradient(circle, rgba(46, 116, 255, .4), transparent 70%);
    animation: orbFloat2 16s ease-in-out infinite alternate;
}
.lg-bg .orb-3 {
    width: 260px;
    height: 260px;
    left: 32%;
    bottom: -100px;
    background: radial-gradient(circle, rgba(124, 92, 255, .35), transparent 70%);
    animation: orbFloat3 18s ease-in-out infinite alternate;
}
.lg-bg .orb-4 {
    width: 220px;
    height: 220px;
    right: 28%;
    bottom: 40px;
    background: radial-gradient(circle, rgba(0, 201, 167, .3), transparent 70%);
    animation: orbFloat4 15s ease-in-out infinite alternate;
}
@keyframes orbFloat1 {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(46px, 34px) scale(1.08); }
}
@keyframes orbFloat2 {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-38px, 44px) scale(1.06); }
}
@keyframes orbFloat3 {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(30px, -36px) scale(1.1); }
}
@keyframes orbFloat4 {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-26px, -28px) scale(.95); }
}
.lg-bg .particle {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    background: rgba(0, 87, 255, .55);
    opacity: 0;
    animation: rise linear infinite;
}
.lg-bg .p1 { left: 8%; width: 10px; height: 10px; animation-duration: 12s; animation-delay: 0s; }
.lg-bg .p2 { left: 22%; width: 7px; height: 7px; background: rgba(46, 116, 255, .6); animation-duration: 15s; animation-delay: 3s; }
.lg-bg .p3 { left: 38%; width: 8px; height: 8px; background: rgba(124, 92, 255, .55); animation-duration: 13s; animation-delay: 6s; }
.lg-bg .p4 { left: 56%; width: 6px; height: 6px; background: rgba(0, 201, 167, .6); animation-duration: 17s; animation-delay: 2s; }
.lg-bg .p5 { left: 74%; width: 9px; height: 9px; background: rgba(0, 87, 255, .5); animation-duration: 14s; animation-delay: 8s; }
.lg-bg .p6 { left: 90%; width: 7px; height: 7px; background: rgba(46, 116, 255, .55); animation-duration: 16s; animation-delay: 5s; }
@keyframes rise {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    8% { opacity: .7; }
    90% { opacity: .35; }
    100% { transform: translateY(-520px) scale(.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .lg-bg .orb,
    .lg-bg .particle { animation: none; }
}

/* 顶部品牌标识：logo + 网站名 */
.lg-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 28px 48px;
    flex-shrink: 0;
}

/* 右上角菜单按钮（三条杠，仅手机端显示） */
.lg-menu-btn {
    display: none;
    margin-left: auto;
    width: 40px;
    height: 40px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
}
.lg-menu-btn span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: #1F2329;
    transition: transform .2s, opacity .2s;
}
.lg-menu-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lg-menu-btn.active span:nth-child(2) { opacity: 0; }
.lg-menu-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.lg-logo {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
}

.lg-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-left: -5px; /* 文字整体向左移动 10px（从 +5 到 -5） */
}

.lg-brand-name {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #1a1a1a;
}

.lg-brand-sub {
    font-size: 12px;
    color: #9ca3af;
    letter-spacing: 0.5px;
    margin-top: -5px; /* 与主标题间距增加 4px */
}

/* 登录卡片居中区域 */
.lg-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 30px;
}

/* 底部备案信息 */
.lg-footer {
    flex-shrink: 0;
    text-align: center;
    padding: 22px 16px;
    font-size: 12px;
    color: #9ca3af;
}

.lg-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 20px;
    padding: 44px 44px 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.lg-tabs {
    display: flex;
    gap: 44px;
    margin-bottom: 32px;
    background: transparent;
    border-bottom: 0.8px solid #f0f0f0;
    padding: 0;
    border-radius: 0;
}

.lg-tab {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    padding: 0 2px 16px;
    font-size: 20px;
    font-weight: 600;
    color: #b0b0b0;
    border-radius: 0;
    cursor: pointer;
    position: relative;
    transition: color 0.25s ease;
}

.lg-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2.5px;
    border-radius: 2px;
    background: #1a1a1a;
    transform: scaleX(0);
    transition: transform 0.25s ease;
}

.lg-tab:hover {
    color: #888;
}

.lg-tab.active {
    background: transparent;
    color: #1a1a1a;
    box-shadow: none;
}

.lg-tab.active::after {
    transform: scaleX(1);
}

.lg-field {
    margin-bottom: 22px;
}

.lg-field label {
    display: block;
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 10px;
    font-weight: 500;
}

.lg-input-box {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0.8px solid transparent;
    border-radius: 12px;
    padding: 0 18px;
    background: #f5f6f8;
    transition: all 0.25s ease;
}

.lg-input-box:focus-within {
    border-color: #1a1a1a;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.06);
}

.lg-input-box .layui-icon {
    font-size: 20px;
    color: #9ca3af;
}

.lg-input-box input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 15px 0;
    font-size: 16px; /* ≥16px 防止 iOS 聚焦自动放大 */
    color: #1a1a1a;
}

.lg-extra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    font-size: 13px;
}

.lg-check {
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.lg-link {
    color: #1a1a1a;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s;
}

.lg-link:hover {
    opacity: 0.75;
}

/* 协议勾选（BigModel 版式） */
.lg-agree {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 20px;
    cursor: pointer;
    line-height: 1.5;
}

.lg-agree input {
    margin: 0;
    flex-shrink: 0;
}

/* 勾选框：选中为黑色 */
.lg-card input[type="checkbox"] {
    accent-color: #222;
}

.lg-agree a {
    color: #1a1a1a;
    text-decoration: none;
}

.lg-agree a:hover {
    opacity: 0.75;
}

/* 表单底部协议（替换"未注册/立即注册"） */
.lg-agree-footer {
    margin-bottom: 0;
    justify-content: center;
}

/* 底部协议 + 切换链接 同一行显示 */
.lg-tip-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    line-height: 1.6;
}

.lg-btn {
    width: 100%;
    border: none;
    background: #1a1a1a;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 3px;
    padding: 15px 0;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 6px 18px rgba(26, 26, 26, 0.2);
}

.lg-btn:hover {
    background: #000;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(26, 26, 26, 0.28);
}

.lg-tip {
    text-align: center;
    font-size: 13px;
    color: #9ca3af;
    margin-top: 18px;
}

/* ============ 个人中心框架页 ============ */

/* 顶部标题：复用前端 filter-bar 通栏白条，标题放栏目滚动区内 */
.mc-filter-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 700;
    color: #222222;
    padding: 0 10px;
    flex-shrink: 0;
    white-space: nowrap;
}

.mc-filter-title .layui-icon {
    color: #d4a017;
}

/* 个人中心：页面背景改为纯白 */
body.mc-page {
    background: #fff;
    /* 手机端禁止双指缩放（配合 viewport 的 user-scalable=no） */
    touch-action: pan-x pan-y;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.mc-page .mc-date-input,
body.mc-page input,
body.mc-page textarea,
body.mc-page select {
    /* 输入控件禁止双击/双指缩放 */
    touch-action: manipulation;
}

body.mc-page .right-content {
    background: #fff;
}

/* 抽屉展开：锁定下方页面滚动（保留抽屉自身滚动） */
html.mc-drawer-lock,
body.mc-drawer-lock {
    overflow: hidden !important;
    height: 100%;
    touch-action: none !important;
    overscroll-behavior: none;
}

body.mc-drawer-lock .left-nav {
    touch-action: pan-y !important;
}

/* 订单记录页 / 充值记录页 / 修改密码页：页面背景改为浅灰 #f3f5f7 */
body.mc-page-orders,
body.mc-page-orders .right-content,
body.mc-page-records,
body.mc-page-records .right-content,
body.mc-page-password,
body.mc-page-password .right-content,
body.mc-page-account,
body.mc-page-account .right-content,
body.mc-page-settings,
body.mc-page-settings .right-content,
body.mc-page-recharge,
body.mc-page-recharge .right-content,
/* 【由 Agent 完成】2026-09-30 我的收入页：背景改浅灰 #f3f5f7（与其他记录页一致），
   概况 / 明细两个白框 .mi-panel / .mi-block 保持白底，卡片浮在灰底上 */
body.mc-page-income,
body.mc-page-income .right-content,
/* 【由 Agent 完成】2026-09-30 申请提现页：与我的收入页同为浅灰底 */
body.mc-page-withdraw,
body.mc-page-withdraw .right-content {
    background: #f3f5f7;
}

/* 页面标题栏：我的账户 + 欢迎文字 + 展开按钮 */
.mc-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px 0;
}

.mc-page-title-wrap {
    min-width: 0;
    transform: translateY(-8px);
}

.mc-page-title {
    font-size: 24px;
    font-weight: 700;
    color: #222222;
    margin: 0;
    line-height: 1.3;
}

.mc-page-welcome {
    font-size: 14px;
    color: #9ca3af;
    margin: 4px 0 0;
}

/* 标题右侧返回胶囊按钮：白底 + #333 文字 */
.mc-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mc-back-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 16px;
    background: #222222;
    color: #ffffff;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s;
}

.mc-back-pill:hover {
    background: #000000;
    color: #ffffff;
}

.mc-expand-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    transform: translateY(-25px);
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mc-expand-btn span {
    display: block;
    width: 18px;
    height: 2px;
    background: #222222;
    border-radius: 2px;
}

.mc-expand-btn:hover {
    background: transparent;
}

/* 内容容器（单列，无左侧导航）：内容靠左对齐、宽度更大 */
.mc-container {
    max-width: 1400px;
    margin: 20px 30px 50px;
}

/* 【由 Agent 完成】2026-09-30 我的账户页：「欢迎回来，祝你天天中奖」下边距缩减 10px
   （标题栏下方容器上外边距 20px → 10px），其他会员页不变 */
body.mc-page-overview .mc-container {
    margin-top: 10px;
}

/* 用户信息横幅卡：浅灰圆角卡片风格 */
.mc-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 24px 28px;
    border-radius: 18px;
    color: #222222;
    background: #f5f7fa;
    margin-bottom: 24px;
}

.mc-hero-main {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.mc-hero .mc-avatar {
    width: 66px;
    height: 66px;
    margin: 0;
    flex-shrink: 0;
}

.mc-hero-info {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.mc-hero-info .mc-user-name {
    font-size: 18px;
    font-weight: 700;
    color: #222222;
}

/* 昵称右侧的编辑图标：点击进入账户设置 */
.mc-name-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    color: #6b7280;
    font-size: 16px;
    text-decoration: none;
    vertical-align: middle;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

.mc-name-edit:active,
.mc-name-edit:focus {
    color: #3b6cf6;
    text-decoration: none;
}

.mc-hero-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.mc-hero-info .mc-level-badge {
    margin-top: 0;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    background: #e5e7eb;
    padding: 0 12px;
    font-size: 11px;
    border: none;
    box-shadow: none;
}

/* 绑定微信按钮 */
.mc-bind-wechat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    margin: 0;
    color: #16a34a;
    background: rgba(22, 163, 74, 0.1);
    border: none;
    padding: 0 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s;
}

.mc-bind-wechat .layui-icon {
    font-size: 13px;
    width: 13px;
    color: #16a34a;
}

.mc-bind-wechat:hover {
    background: rgba(22, 163, 74, 0.2);
}

.mc-hero-balance {
    flex-shrink: 0;
    min-width: 0;
    text-align: right;
}

.mc-hero-balance .mc-balance-label {
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 6px;
}

.mc-balance-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 16px;
}

.mc-hero-balance .mc-balance-num {
    font-size: 24px;
    font-weight: 700;
    color: #222222;
}

.mc-hero-balance .mc-balance-num small {
    font-size: 16px;
    color: #9ca3af;
    font-weight: 400;
}

.mc-hero-balance .mc-btn {
    padding: 9px 24px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 999px;
    border: 0.8px solid #222222;
    color: #fff;
    background: #222222;
    box-shadow: none;
}

.mc-hero-balance .mc-btn:hover {
    background: #e5e7eb;
    border-color: #222222;
    color: #222222;
}

.mc-avatar {
    width: 66px;
    height: 66px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 700;
    color: #222;
    position: relative;
    z-index: 1;
    box-shadow: none;
}

.mc-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.mc-user-name {
    font-size: 17px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.mc-level-badge {
    display: inline-block;
    margin-top: 8px;
    font-size: 11px;
    color: #222;
    background: linear-gradient(135deg, #d4a017, #f0c24b);
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.mc-balance-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 4px;
}

.mc-balance-num {
    font-size: 28px;
    font-weight: 800;
    color: #f0c24b;
    letter-spacing: 1px;
}

.mc-balance-num small {
    font-size: 14px;
    font-weight: 600;
}

/* 内容区 */
.mc-main {
    min-width: 0;
}

.mc-block {
    display: none;
    background: #fff;
    border-radius: 14px;
    padding: 26px 28px;
    animation: mcFadeIn 0.3s ease;
}

.mc-block.active {
    display: block;
}

@keyframes mcFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mc-block-title {
    font-size: 18px;
    font-weight: 700;
    color: #222222;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mc-block-sub {
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 24px;
}

/* 标题右侧附加信息（如「共 N 笔订单」） */
.mc-block-title.has-count {
    margin-bottom: 20px;
}

.mc-block-count {
    margin-left: auto;
    font-size: 13px;
    font-weight: 400;
    color: #9ca3af;
}

/* ===== 订单日期筛选：白底 + 灰色边框（无灰色底条） ===== */
.mc-date-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.mc-date-range {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
}

.mc-date-field {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: 34px;
    padding: 0 10px;
    background: #ffffff;
    border: 0.8px solid #c9ced6;
    border-radius: 15px;
    transition: border-color 0.2s;
}

.mc-date-field:hover {
    border-color: #aab2bd;
}

.mc-date-input {
    flex: 0 0 130px;
    width: 130px;
    min-width: 0;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 13px;
    font-family: inherit;
    color: #333333;
    cursor: pointer;
    outline: none;
}

.mc-date-input::placeholder {
    color: #b8bcc4;
}

.mc-date-sep {
    width: 12px;
    height: 1px;
    background: #d1d5db;
    flex: 0 0 auto;
}

.mc-date-reset {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 14px;
    border: 0.8px solid #c9ced6;
    border-radius: 15px;
    background: #ffffff;
    color: #333333;
    font-size: 12px;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.mc-date-reset:hover {
    border-color: #aab2bd;
    color: #111111;
}

/* 【由 Agent 完成】2026-09-30 订单记录页 / 充值记录页 / 我的收入 / 申请提现：
   整体宽度对齐「账户充值」页（与 body.mc-page-recharge .mc-block 同源：最大 800px、靠左对齐） */
body.mc-page-orders .mc-order-bar,
body.mc-page-orders .mc-block,
body.mc-page-records .mc-order-bar,
body.mc-page-records .mc-block,
body.mc-page-income .mi-panel,
body.mc-page-income .mi-block,
body.mc-page-withdraw .mi-panel,
body.mc-page-withdraw .mi-block {
    max-width: 800px;
    margin-left: 0;
    margin-right: 0;
}

/* 订单筛选条：左侧状态按钮组 + 右侧数量/金额统计 */
.mc-order-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 15px; /* 与下方白框间距比原来多 5px */
}

/* 状态按钮组：默认白底无边框，选中态黑色 */
.mc-order-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.mc-order-tab {
    border: 0;
    background: #ffffff;
    color: #333333;
    font-size: 12px;
    font-family: inherit;
    line-height: 1;
    padding: 9px 15px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.mc-order-tab:hover {
    background: #f3f4f6;
}

.mc-order-tab.active {
    background: #111111;
    color: #ffffff;
    font-weight: 600;
}

/* 订单数量 + 金额统计：日期选择下方灰色条，左对齐 */
.mc-filter-count {
    display: block;
    margin: 0 0 4px;
    padding: 9px 12px;
    border-radius: 10px;
    background: #f3f4f6;
    font-size: 12px;
    color: #333333;
    text-align: left;
    white-space: nowrap;
}

.mc-filter-count .mc-stat-sep {
    margin: 0 6px;
    color: #d1d5db;
}

.mc-filter-count b {
    font-weight: 600;
    color: #333333;
}

.mc-filter-count .mc-stat-amount {
    color: #40ae2a;
}

/* 栏目宫格：上图标下栏目名称 */
.mc-nav-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.mc-nav-card {
    border: 0.8px solid #f0f1f3;
    border-radius: 16px;
    padding: 22px 12px 18px;
    text-align: center;
    background: #f5f7fa;
    box-shadow: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.mc-nav-card:hover {
    background: #eef1f5;
    transform: translateY(-4px);
    box-shadow: none;
    border-color: #e2e5e9;
}

.mc-nav-ic {
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    background: transparent;
}

.mc-nav-ic .layui-icon {
    font-size: 40px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

.mc-nav-ic.ic-gold  { background: transparent; color: #9ca3af; }
.mc-nav-ic.ic-black { background: transparent; color: #9ca3af; }
.mc-nav-ic.ic-blue  { background: transparent; color: #9ca3af; }

.mc-nav-name {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.mc-nav-sub {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 3px;
}

/* 右下角固定圆形返回按钮 */
.mc-float-back {
    position: fixed;
    right: 58px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #222222;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    box-shadow: 0 6px 18px rgba(34, 34, 34, 0.3);
    transition: all 0.2s;
}

.mc-float-back .layui-icon {
    font-size: 22px;
    width: 22px;
    color: #fff;
}

.mc-float-back:hover {
    background: #000;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(34, 34, 34, 0.4);
}

/* 分区标题右侧"查看全部" */
.mc-sec-more {
    margin-left: auto;
    font-size: 12px;
    font-weight: 400;
    color: #9ca3af;
    text-decoration: none;
    cursor: pointer;
}

.mc-sec-more:hover {
    color: #222222;
}

/* 通用分区标题 */
.mc-sec-title {
    font-size: 15px;
    font-weight: 600;
    color: #222222;
    margin: 24px 0 14px;
    padding-bottom: 10px;
    border-bottom: 0.8px solid #f0f2f5;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mc-sec-title:first-child {
    margin-top: 0;
}

/* 发布文章推荐按钮：位于「我的服务」上方，手机端通栏、电脑端 300px */
.mc-publish-row {
    margin: 24px 0 16px;
}

.mc-publish-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    background: #222222;
    border: 0.8px solid #222222;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.22s ease;
}

.mc-publish-btn i {
    font-size: 17px;
    line-height: 1;
}

.mc-publish-btn:hover {
    background: #000000;
    border-color: #000000;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(34, 34, 34, 0.25);
}

@media (min-width: 769px) {
    .mc-publish-btn {
        width: 300px;
    }
}

/* 我的服务标题：去掉下边线 */
.mc-sec-title.no-line {
    border-bottom: none;
    padding-bottom: 0;
}

/* 分区副标题：小号灰色文字（选择金额 / 支付方式） */
.mc-sec-title.plain {
    font-size: 16px;
    color: #999999;
}

/* 订单列表 */
.mc-order-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 6px;
    border-bottom: 0.8px solid #f3f4f6;
    transition: background 0.2s;
}

.mc-order-item:hover {
    background: #fafbfc;
}

/* 【由 Agent 完成】2026-09-30 订单记录页 / 我的收入页（仅电脑端）：列表项顶部对齐，
   使左侧图标与右侧标题第一行在同一水平线上（原为垂直居中，图标显得比标题低）。
   手机端（<=768px）保持原有分行布局，不做此项调整。 */
@media (min-width: 769px) {
    /* 【由 Agent 完成】2026-10-01 充值记录页（mc-page-records）与订单记录同款排列 */
    body.mc-page-orders .mc-order-item,
    body.mc-page-records .mc-order-item,
    body.mc-page-income .mc-order-item {
        align-items: flex-start;
    }

    body.mc-page-orders .mc-order-ic,
    body.mc-page-records .mc-order-ic,
    body.mc-page-income .mc-order-ic {
        align-self: flex-start;
        margin-top: 0;
    }

    /* 右侧金额 / 状态标签随之上移，与标题行对齐 */
    body.mc-page-orders .mc-order-price,
    body.mc-page-records .mc-order-price,
    body.mc-page-income .mc-order-price {
        line-height: 20px;   /* 与标题行高一致 */
    }

    body.mc-page-orders .mc-status,
    body.mc-page-records .mc-status,
    body.mc-page-income .mc-status {
        margin-top: 0;
    }

    /* 【由 Agent 完成】2026-10-01 订单记录 / 充值记录电脑端：金额放到状态标签下方
       状态标签仍在标题行右侧，金额换行到下一行并右对齐 */
    body.mc-page-orders .mc-order-item,
    body.mc-page-records .mc-order-item {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    body.mc-page-orders .mc-status,
    body.mc-page-records .mc-status {
        order: 3;
    }

    body.mc-page-orders .mc-order-price,
    body.mc-page-records .mc-order-price {
        order: 4;
        flex: 1 0 100%;
        text-align: right;
        margin-top: -30px;   /* 金额整体上移 30px */
    }
}

/* 最后一条记录不显示下边线（列表后还有隐藏的提示节点，故用 last-of-type） */
.mc-order-item:last-child,
div.mc-order-item:last-of-type {
    border-bottom: none;
}

.mc-order-ic {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #9ca3af;
    flex-shrink: 0;
}

.mc-order-info {
    flex: 1;
    min-width: 0;
}

.mc-order-name {
    font-size: 14px;
    font-weight: 400;
    color: #1f2937;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;

/* 已下架（文章被删除）：标题前的红色标记 */
.mc-order-off {
    color: #e5484d;
    font-weight: 600;
}

/* 订单标题链接：点击在新标签页打开文章详情（沿用标题配色，hover 变红并加下划线） */
.mc-order-link {
    color: inherit;
    text-decoration: none;
}

.mc-order-link:hover,
.mc-order-link:focus {
    color: #e5484d;
    text-decoration: underline;
}
    text-overflow: ellipsis;
}

.mc-order-time {
    font-size: 12px;
    color: #9ca3af;
}

.mc-order-price {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    flex-shrink: 0;
}

/* 订单记录页：手机端专用信息行（PC 端默认隐藏） */
.mc-order-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: #9ca3af;
}

.mc-order-price-inline {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    flex-shrink: 0;
}

.mc-m-only {
    display: none;
}

/* 状态标签 */
.mc-status {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
}

.mc-status.paid    { color: #ffffff; background: #40ae2a; }

/* 【由 Agent 完成】2026-10-01 订单记录 / 充值记录页：「已支付」「已到账」标签改淡绿色背景
   （底 rgba(64,174,42,0.12)、文字同系绿 #40ae2a → 浅底上仍清晰可读；
     仅这两页，其他页状态标签保持原实心绿） */
body.mc-page-orders .mc-status.paid,
body.mc-page-records .mc-status.paid {
    color: #40ae2a;
    background: rgba(64, 174, 42, 0.12);
}
.mc-status.pending { color: #f59e0b; background: rgba(245, 158, 11, 0.12); }
.mc-status.cancel  { color: #9ca3af; background: rgba(156, 163, 175, 0.12); }

/* 【由 Agent 完成】2026-10-01 我的收入页：「已入账」标签
   按用户要求：背景 #f0f8fe、无边框、文字 #326bfb 加粗
   （仅本页，其他页状态标签保持原色） */
body.mc-page-income .mc-status.paid {
    color: #326bfb;
    background: #f0f8fe;
    border: none;
    padding: 4px 12px;
    font-weight: 600;
}

/* 充值：金额选择 */
.mc-amount-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 8px;
}

.mc-amount-card {
    border: 0.8px solid #e5e7eb;
    border-radius: 12px;
    padding: 18px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.22s ease;
    background: #fff;
}

.mc-amount-card .mc-amount-val {
    font-size: 20px;
    font-weight: 800;
    color: #111827;
}

.mc-amount-card .mc-amount-tag {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
}

.mc-amount-card:hover {
    border-color: rgba(34, 34, 34, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.mc-amount-card.selected {
    border-color: #222222;
    background: linear-gradient(160deg, #222222, #3a3a3a);
    box-shadow: 0 8px 20px rgba(34, 34, 34, 0.22);
}

.mc-amount-card.selected .mc-amount-val,
.mc-amount-card.selected .mc-amount-tag {
    color: #fff;
}

.mc-amount-card.selected .mc-amount-tag {
    color: rgba(255, 255, 255, 0.65);
}

/* 支付方式 */
.mc-pay-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.mc-pay-type {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0.8px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.22s ease;
    background: #fff;
}

.mc-pay-type:hover {
    border-color: rgba(34, 34, 34, 0.35);
    transform: translateY(-2px);
}

.mc-pay-type.selected {
    border-color: #222222;
    background: #fafbfc;
}

.mc-pay-ic {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.mc-pay-ic.wechat  { background: rgba(7, 193, 96, 0.12); color: #07c160; }
.mc-pay-ic.alipay  { background: rgba(22, 119, 255, 0.12); color: #1677ff; }
.mc-pay-ic.simulate { background: rgba(212, 160, 23, 0.12); color: #d4a017; }

.mc-pay-name {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.mc-pay-sub {
    font-size: 11px;
    color: #9ca3af;
}

.mc-submit-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 26px;
}

.mc-btn {
    border: 0.8px solid #dddddd;
    background: #fff;
    color: #333333;
    font-size: 14px;
    padding: 11px 30px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.22s ease;
}

.mc-btn:hover {
    border-color: #222222;
    color: #222222;
}

.mc-btn-main {
    background: #222222;
    border-color: #222222;
    color: #fff;
    font-weight: 600;
    letter-spacing: 2px;
}

.mc-btn-main:hover {
    background: #000;
    border-color: #000;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(34, 34, 34, 0.25);
}

.mc-submit-tip {
    font-size: 12px;
    color: #9ca3af;
}

/* 充值记录：时间轴 */
.mc-record-list {
    position: relative;
}

.mc-record-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 0.8px solid #f3f4f6;
    position: relative;
}

.mc-record-item:last-child {
    border-bottom: none;
}

.mc-record-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #9ca3af;
    flex-shrink: 0;
}

.mc-record-main {
    flex: 1;
    min-width: 0;
}

.mc-record-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.mc-record-type {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.mc-record-amt {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.mc-record-amt .plus { color: #d4a017; }

.mc-record-meta {
    font-size: 12px;
    color: #9ca3af;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* 收藏卡片 */
.mc-fav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.mc-fav-card {
    border: 0.8px solid #eef0f3;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.25s ease;
    background: #fff;
    cursor: pointer;
}

.mc-fav-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
    border-color: rgba(34, 34, 34, 0.2);
}

.mc-fav-cover {
    height: 110px;
    background: linear-gradient(135deg, #2b2b2b, #4a4a4a);
    position: relative;
}

.mc-fav-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mc-fav-price {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #222222;
    padding: 3px 10px;
    border-radius: 999px;
}

.mc-fav-body {
    padding: 14px 16px 16px;
}

.mc-fav-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-fav-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mc-fav-time {
    font-size: 12px;
    color: #9ca3af;
}

.mc-fav-del {
    font-size: 12px;
    color: #ef4444;
    background: transparent;
    border: 0.8px solid rgba(239, 68, 68, 0.35);
    border-radius: 999px;
    padding: 3px 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.mc-fav-del:hover {
    background: #ef4444;
    color: #fff;
}

/* 表单（修改密码 / 账户设置） */
.mc-form {
    max-width: 460px;
}

.mc-form-field {
    margin-bottom: 20px;
}

.mc-form-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 8px;
}

.mc-form-input {
    width: 100%;
    border: 0.8px solid #e5e7eb;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 14px;
    color: #111827;
    background: #fafbfc;
    outline: none;
    transition: all 0.22s ease;
}

.mc-form-input:focus {
    border-color: #222222;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(34, 34, 34, 0.06);
}

.mc-avatar-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
    padding: 24px 20px;
    border: 0.8px solid #eef0f3;
    border-radius: 14px;
    background: #fff;
}

.mc-avatar-wrap {
    position: relative;
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    margin-left: 5px;
    border-radius: 50%;
    background: #fff;
}

.mc-avatar-wrap img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.mc-avatar-upload {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #222222;
    color: #fff;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s;
}

.mc-avatar-upload .layui-icon {
    font-size: 13px;
    width: 13px;
    color: #fff;
}

.mc-avatar-upload:hover {
    background: #000;
}

.mc-avatar-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mc-avatar-info {
    min-width: 0;
}

.mc-avatar-name {
    font-size: 18px;
    font-weight: 700;
    color: #222222;
    margin: 0 0 6px;
}

.mc-avatar-sub {
    font-size: 12px;
    color: #9ca3af;
}

.mc-avatar-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.mc-avatar-actions .mc-btn {
    padding: 8px 20px;
    font-size: 13px;
}

.mc-form-tip {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 6px;
}

/* 空状态 */
.mc-empty {
    text-align: center;
    padding: 50px 20px;
    color: #9ca3af;
    font-size: 14px;
}

.mc-empty .layui-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
    color: #d1d5db;
}

.mc-empty-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.mc-empty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    margin-top: 18px;
    padding: 0 20px;
    font-size: 13px;
    color: #ffffff;
    background: #222222;
    border-radius: 25px;
    text-decoration: none;
    transition: all 0.22s ease;
}

.mc-empty-btn .layui-icon {
    display: inline;
    margin: 0;
    font-size: 14px;
    color: #ffffff;
}

.mc-empty-btn:hover {
    color: #ffffff;
    background: #000000;
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.22);
}

/* 响应式 */
@media (max-width: 1024px) {
    .mc-nav-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* 手机、平板：显示展开按钮 */
    .mc-expand-btn {
        display: flex;
    }

    /* 平板：标题栏、容器左右留间距 */
    .mc-page-header {
        padding: 18px 24px 0;
    }

    .mc-container {
        margin: 20px 24px 40px;
    }

    /* 平板：返回按钮回到视口右下角 */
    .mc-float-back {
        right: 24px;
    }
}

@media (max-width: 768px) {
    .lg-header {
        padding: 20px 22px;
        padding-left: 18px; /* 手机端 logo 整体左移 4px */
    }

    .lg-menu-btn {
        display: flex; /* 仅手机端显示 */
    }

    .lg-center {
        padding: 12px 18px;
    }

    .lg-card {
        padding: 30px 22px 26px;
    }

    .mc-container {
        margin: 16px 16px 30px;
    }

    .mc-nav-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .mc-nav-card {
        padding: 16px 6px 14px;
        border-radius: 12px;
    }

    .mc-nav-ic {
        width: 44px;
        height: 44px;
        margin-bottom: 8px;
    }

    .mc-nav-ic .layui-icon {
        font-size: 30px;
        width: 30px;
        height: 30px;
        line-height: 30px;
    }

    .mc-nav-name {
        font-size: 13px;
    }

    .mc-nav-sub {
        font-size: 10px;
    }

    .mc-page-header {
        padding: 16px 16px 0;
    }

    .mc-hero {
        flex-direction: column;
        text-align: left;
        padding: 24px 18px;
        align-items: flex-start;
    }

    .mc-hero-main {
        justify-content: flex-start;
        gap: 14px;
        width: 100%;
        min-width: 0;
    }

    .mc-hero-info {
        text-align: left;
        width: 100%;
        min-width: 0;
    }

    .mc-user-name {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .mc-hero-tags {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .mc-hero-account {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        vertical-align: middle;
    }

    .mc-hero-balance {
        width: 100%;
        text-align: center;
        min-width: 0;
    }

    .mc-balance-row {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    /* 【由 Agent 完成】2026-09-29 手机端金额卡片：一行 3 个；
       用 6 列栅格，普通卡 span 2（=1/3 行），最后 2 个卡各 span 3（=1/2 行，平均占满整行） */
    .mc-amount-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 10px;
    }

    .mc-amount-card {
        grid-column: span 2;
        padding: 14px 6px;
    }

    /* 最后 2 张卡（2500 / 3000）各占半行，平均铺满最后一行 */
    .mc-amount-card:nth-last-child(-n+2) {
        grid-column: span 3;
    }

    .mc-amount-card .mc-amount-val {
        font-size: 18px;
    }

    .mc-amount-card .mc-amount-unit {
        margin-left: 2px;
        font-size: 10px;    /* 手机端同样 10px */
    }

    .mc-amount-card .mc-amount-tag {
        font-size: 12px;
    }

    .mc-pay-grid {
        grid-template-columns: 1fr;
    }

    .mc-block {
        padding: 20px 16px;
    }

    /* 订单日期筛选：手机端重置按钮与时间选择框并排 */
    .mc-date-filter {
        gap: 8px;
        padding: 0;
        flex-wrap: nowrap;
    }

    .mc-date-range {
        flex: 1 1 auto;
        min-width: 0;
        gap: 6px;
    }

    .mc-date-field {
        flex: 0 1 auto;
        min-width: 0;
    }

    .mc-date-input {
        flex: 0 1 80px;
        width: 80px;
        min-width: 62px;
    }

    .mc-date-reset {
        padding: 0 12px;
    }

    /* 订单筛选：手机端按钮组一行，灰色统计条左对齐 */
    .mc-order-bar {
        gap: 10px;
    }

    .mc-order-tabs {
        flex: 1 1 100%;
    }

    .mc-filter-count {
        text-align: left;
        font-size: 12px;
        white-space: normal;
    }

    .mc-submit-row {
        flex-direction: column;
        align-items: stretch;
    }

    /* 最近订单：手机端标题限宽（可左滑查看全部），时间与金额同一行，隐藏订单号 */
    .mc-order-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 12px;
        width: 100%;
        padding: 12px 0;
    }

    .mc-order-ic {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    /* 把 info 里的标题、时间提升到与图标/金额同一 flex 容器，便于分行布局 */
    .mc-order-info {
        display: contents;
    }

    .mc-order-name {
        flex: 1 0 calc(100% - 48px);
        min-width: 0;
        margin-bottom: 0;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        text-overflow: clip;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mc-order-name::-webkit-scrollbar {
        display: none;
    }

    .mc-order-time {
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mc-order-price {
        flex: 0 0 auto;
        font-size: 14px;
    }

    .mc-status {
        flex: 0 0 auto;
        font-size: 12px;
    }

    .mc-order-no {
        display: none;
    }

    /* ===== 订单记录页 / 充值记录页：手机端分行 =====
       第 1 行：标题             第 2 行：订单号（左）+ 支付时间（右）
       第 3 行：支付方式（左）+ 金额 + 状态标签（右） */
    body.mc-page-orders .mc-pc-only,
    body.mc-page-records .mc-pc-only,
    body.mc-page-income .mc-pc-only {
        display: none;
    }

    body.mc-page-orders .mc-m-only,
    body.mc-page-records .mc-m-only,
    body.mc-page-income .mc-m-only {
        display: flex;
    }

    body.mc-page-orders .mc-order-ic,
    body.mc-page-records .mc-order-ic,
    body.mc-page-income .mc-order-ic {
        order: 1;
        align-self: flex-start;
    }

    /* 标题不截断：超长时横向滑动查看（左滑显示完整标题） */
    body.mc-page-orders .mc-order-name,
    body.mc-page-records .mc-order-name,
    body.mc-page-income .mc-order-name {
        order: 2;
        flex: 1 1 0;
        min-width: 0;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        text-overflow: clip;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        margin-bottom: 0;
    }

    body.mc-page-orders .mc-order-name::-webkit-scrollbar,
    body.mc-page-records .mc-order-name::-webkit-scrollbar,
    body.mc-page-income .mc-order-name::-webkit-scrollbar {
        display: none;
    }

    /* 【由 Agent 完成】2026-09-30 订单记录页手机端：标题不换行（单行，
       超长时保留原有横向滑动查看），信息行改为：
       第 2 行 支付方式（左）+ 时间（右）；第 3 行 订单号（左）+ 金额 + 状态标签（右） */
    body.mc-page-orders .mc-order-name {
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        text-overflow: clip;
        line-height: 14px;
    }

    /* 右侧时间 / 金额右对齐且不被压缩 */
    body.mc-page-orders .mc-order-line > span:last-child {
        text-align: right;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    body.mc-page-orders .mc-status,
    body.mc-page-records .mc-status,
    body.mc-page-income .mc-status {
        order: 5;
        flex: 0 0 auto;
    }

    /* 订单号 + 支付时间：独占一行 */
    body.mc-page-records .mc-mrow-1,
    body.mc-page-income .mc-mrow-1 {
        order: 3;
        flex: 1 0 100%;
    }

    /* 支付方式 + 金额：与状态标签同一行，金额在状态标签左侧 */
    body.mc-page-orders .mc-mrow-2,
    body.mc-page-records .mc-mrow-2 {
        order: 4;
        flex: 1 1 0;
        min-width: 0;
    }

    /* 【由 Agent 完成】2026-10-01 以下为「订单记录 / 充值记录 / 收入明细」手机端统一排列：
       标题行 + 支付方式行与图标上下边对齐；标题顶对齐图标、行高 14px；
       第 2 行 支付方式/分成 + 时间紧挨（整行上移 11px）；
       第 3 行 订单号/交易号（上）+ 金额（下） */
    body.mc-page-orders .mc-order-item,
    body.mc-page-records .mc-order-item,
    body.mc-page-income .mc-order-item {
        row-gap: 0;
    }

    /* 【由 Agent 完成】2026-10-01 手机端记录列表：每条上下留白 +4px（12px → 16px） */
    body.mc-page-orders .mc-order-item,
    body.mc-page-records .mc-order-item,
    body.mc-page-income .mc-order-item {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    body.mc-page-orders .mc-order-name,
    body.mc-page-records .mc-order-name,
    body.mc-page-income .mc-order-name {
        align-self: flex-start;
        font-size: 14px;
        line-height: 17px;
        height: 17px;   /* 与 line-height 同步，避免文字被裁切 */
    }

    body.mc-page-orders .mc-mrow-1,
    body.mc-page-records .mc-mrow-1,
    body.mc-page-income .mc-mrow-1 {
        order: 3;
        flex: 1 0 calc(100% - 48px);
        min-width: 0;
        margin: -11px 0 0 48px;
        line-height: 14px;
        align-items: flex-end;
        justify-content: flex-start;
        gap: 6px;
    }

    body.mc-page-orders .mc-mrow-2,
    body.mc-page-records .mc-mrow-2,
    body.mc-page-income .mc-mrow-2 {
        order: 4;
        flex: 1 1 0;
        min-width: 0;
        margin: 6px 0 0 48px;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    body.mc-page-orders .mc-mrow-2 .mc-order-price-inline,
    body.mc-page-records .mc-mrow-2 .mc-order-price-inline,
    body.mc-page-income .mc-mrow-2 .mc-order-price-inline {
        text-align: left;
        white-space: nowrap;
    }

    /* 【由 Agent 完成】2026-10-01 收入明细手机端改为 5 行：
       第 3 行 订单号（整行上移 3px）；第 4 行 订单金额 · 分成 · 平台（灰色小字）；
       第 5 行 收入金额 */
    body.mc-page-income .mc-mrow-2 {
        flex-direction: row;
        align-items: flex-start;
        margin: 3px 0 0 48px;   /* 由 6px 改为 3px → 订单号整行上移 3px */
    }

    body.mc-page-income .mc-mrow-3 {
        order: 5;
        flex: 1 0 calc(100% - 48px);
        min-width: 0;
        margin: 1px 0 0 48px;   /* 由 4px 改为 1px → 「订单 N 元」整行上移 3px */
        font-size: 12px;
        color: #9ca3af;
        line-height: 14px;
    }

    body.mc-page-income .mc-mrow-4 {
        order: 6;
        flex: 1 1 0;
        min-width: 0;
        margin: 5px 0 0 48px;   /* 由 2px 改为 5px → 收入金额整行下移 3px */
        line-height: 18px;
    }

    /* 【由 Agent 完成】2026-10-01 收入明细手机端：「已入账」保持原始大小（12px + 4/12 内距），
       作为浮层放在第 4 行「订单 N 元 · 分成 · 平台 N 元」上方、右端对齐 */
    body.mc-page-income .mc-order-item {
        position: relative;
    }

    body.mc-page-income .mc-status {
        position: absolute;
        right: 0;
        top: 76px;              /* 72px + 4px：随列表上下留白增加同步下移，保持与内容相对位置 */
        margin-top: 0;
        align-self: auto;
    }

    /* 【由 Agent 完成】2026-10-01 充值记录手机端：交易号上移 2px
       （用相对定位只移动交易号，下方金额位置不变） */
    body.mc-page-records .mc-mrow-2 > span:first-child {
        position: relative;
        top: -2px;
    }

    body.mc-page-orders .mc-status,
    body.mc-page-records .mc-status,
    body.mc-page-income .mc-status {
        align-self: center;
        margin-top: -35px;   /* 状态标签累计上移 35px（15 + 10 + 10） */
    }


    body.mc-page-orders .mc-order-line > span:first-child,
    body.mc-page-records .mc-order-line > span:first-child,
    body.mc-page-income .mc-order-line > span:first-child {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    body.mc-page-orders .mc-order-line > span:last-child,
    body.mc-page-records .mc-order-line > span:last-child,
    body.mc-page-income .mc-order-line > span:last-child {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* ==================== 联系我们页面（Contact） ==================== */
.ct-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 48px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    flex: 1;
    box-sizing: border-box;
}

/* 左侧文案 */
.ct-left {
    flex: 0 1 45%;
    display: flex;
    flex-direction: column;
    gap: 28px;
    color: #111;
    transform: translateY(-100px);
}

.ct-title {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1px;
    margin: 0;
}

.ct-subtitle {
    font-size: 16px;
    color: #4b5563;
    line-height: 1.7;
    margin: 0;
}

.ct-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px;
}

.ct-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: #374151;
}

.ct-feature-item .ct-ico {
    flex: none;
    width: 18px;
    height: 18px;
    padding: 6px;
    color: #0057ff;
    background: rgba(0, 87, 255, .08);
    border-radius: 50%;
    box-sizing: content-box;
}

/* 右侧表单卡片 */
.ct-right {
    flex: 0 1 52%;
    max-width: 560px;
}

.ct-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
    padding: 40px 44px 44px;
    box-sizing: border-box;
}

.ct-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ct-form-row {
    display: flex;
    gap: 20px;
}

.ct-form-row .ct-field {
    flex: 1 1 0;
    min-width: 0;
}

.ct-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ct-field label {
    font-size: 14px;
    font-weight: 500;
    color: #111;
}

.ct-field label em {
    color: #ef4444;
    font-style: normal;
    margin-right: 3px;
}

.ct-field input[type="text"],
.ct-field input[type="email"],
.ct-field input[type="tel"],
.ct-field textarea,
.ct-field select {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    font-size: 14px;
    color: #111;
    background: #f9fafb;
    border: none;
    border-radius: 10px;
    outline: none;
    transition: box-shadow .2s, background .2s;
    box-sizing: border-box;
}

.ct-field textarea {
    height: auto;
    padding: 12px 16px;
    resize: vertical;
    line-height: 1.6;
}

.ct-field input::placeholder,
.ct-field textarea::placeholder {
    color: #9ca3af;
}

.ct-field input:focus,
.ct-field textarea:focus,
.ct-field select:focus {
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 87, 255, .08);
}

/* 手机号前缀 */
.ct-input-phone {
    display: flex;
    align-items: center;
    height: 48px;
    background: #f9fafb;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .2s;
}

.ct-input-phone:focus-within {
    box-shadow: 0 0 0 3px rgba(0, 87, 255, .08);
}

.ct-input-phone input[type="tel"] {
    flex: 1;
    height: 100%;
    border: none;
    background: transparent;
    padding: 0 16px;
    font-size: 14px;
    outline: none;
}

/* 下拉框自定义 */
.ct-select-wrap {
    position: relative;
}

.ct-select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    color: #6b7280;
}

.ct-select-wrap select option:not(:disabled) {
    color: #111;
}

.ct-select-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: #9ca3af;
    pointer-events: none;
}

.ct-submit-btn {
    width: 100%;
    height: 50px;
    margin-top: 6px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(90deg, #0057ff, #2e74ff);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}

.ct-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 87, 255, .25);
}

.ct-submit-btn:disabled {
    opacity: .7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 轻量 toast 提示（替代 layui layer） */
.ct-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.92);
    background: rgba(17, 17, 17, .92);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    z-index: 9999;
    max-width: 80vw;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
}

.ct-toast-show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.ct-toast-success {
    background: rgba(22, 163, 74, .95);
}

/* 联系我们移动端适配 */
@media (max-width: 1024px) {
    .ct-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
        padding: 24px 20px 50px;
    }

    .ct-left,
    .ct-right {
        flex: 1 1 auto;
        max-width: none;
        width: 100%;
    }

    .ct-left {
        transform: none;
    }

    .ct-title {
        font-size: 34px;
    }

    .ct-card {
        padding: 28px 24px 32px;
    }
}

@media (max-width: 640px) {
    .ct-title {
        font-size: 28px;
    }

    .ct-subtitle {
        font-size: 14px;
    }

    .ct-wrap {
        width: 95%;
        margin: 0 auto;
        padding: 24px 12px 50px;
    }

    .ct-left {
        padding: 0 8px;
    }

    .ct-form-row {
        flex-direction: column;
        gap: 18px;
    }

    .ct-form {
        gap: 18px;
    }

    .ct-right {
        max-width: none;
        width: 100%;
        margin: 0;
    }

    .ct-card {
        padding: 20px 16px 24px;
        border-radius: 16px;
    }

    .ct-field {
        gap: 6px;
    }

    .ct-field label {
        width: 95%;
        margin: 0 auto;
    }

    .ct-field input[type="text"],
    .ct-field input[type="email"],
    .ct-field textarea,
    .ct-field select,
    .ct-input-phone {
        height: 44px;
        width: 95%;
        margin: 0 auto;
        display: block;
        box-sizing: border-box;
    }

    .ct-input-phone {
        display: flex;
    }

    .ct-field input[type="tel"] {
        height: 100%;
    }

    .ct-field textarea {
        height: 80px;
    }

    /* 手机端：区块描述文字居中 */
    .mc-block-sub {
        text-align: center;
    }
}

/* ==========================================================
   个人中心拆分独立页面：追加样式
   （账户概览/订单记录/充值/充值记录/个人收藏/修改密码/账户设置 共用）
   ========================================================== */

/* 左导航：个人中心当前栏目高亮（黑底白字 + 白色图标） */
.left-nav .user-center .user-item.active {
    background: #222222;
    color: #ffffff;
}
.left-nav .user-center .user-item.active i {
    color: #ffffff;
}
.left-nav .user-center a.user-item {
    text-decoration: none;
}

/* 状态标签：已退款（红色） */
.mc-status.refund { color: #ef4444; background: rgba(239, 68, 68, 0.1); }

/* 充值页：当前余额提示条 */
.mc-balance-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(120deg, #1b1b1b, #333333);
    border-radius: 12px;
    padding: 16px 22px;
    margin-bottom: 26px;
    color: #ffffff;
}
.mc-balance-bar span { color: #b8b8b8; font-size: 13px; }
.mc-balance-bar strong { color: #d4a017; font-size: 24px; letter-spacing: 0.5px; }

/* 充值页：按钮下方辅助提示 */
.mc-submit-tip { font-size: 12px; color: #9ca3af; }

/* 表单卡片（修改密码 / 账户设置共用） */
.mc-card-plain {
    background: #fff;
    border: 0.8px solid #f0f1f3;
    border-radius: 16px;
    padding: 8px 28px 30px;
    margin-top: 4px;
}
.mc-form-row {
    display: flex;
    align-items: center;
    padding: 18px 0;
    border-bottom: 0.8px dashed #f0f1f3;
}

/* 修改密码页：白框内左右留白增加 10%（28px → 30.8px），最大宽度 600px 且靠左对齐 */
body.mc-page-password .mc-block {
    padding-left: 30.8px;
    padding-right: 30.8px;
    max-width: 600px;
    margin-left: 0;
    margin-right: 0;
}

/* 修改密码页：手机端白框内左右留白再增加 10%（19.36px → 21.3px） */
@media (max-width: 768px) {
    body.mc-page-password .mc-block {
        padding-left: 21.3px;
        padding-right: 21.3px;
    }
}

/* 修改密码页：表单直接放在白框内，不再套内层卡片 */
.mc-form-flat {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-top: 0;
}
.mc-form-label {
    width: 110px;
    flex-shrink: 0;
    font-size: 14px;
    color: #374151;
    font-weight: 500;
}
.mc-input-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px;
    border: 0.8px solid #e5e7eb;
    border-radius: 10px;
    background: #fafafa;
}
.mc-input-box i { color: #9ca3af; }
.mc-input-box input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #111827;
}
/* 修改密码页：取消每行下方的虚线分隔，并缩减行间距（18px 0 → 11px 0） */
body.mc-page-password .mc-form-row {
    padding: 11px 0;
    border-bottom: none;
}

/* 修改密码页：输入框取消边框 */
body.mc-page-password .mc-input-box {
    border: none;
}
.mc-form-actions { padding-top: 26px; display: flex; }

/* 只读展示项（如「微信绑定」状态） */
.mc-input-box.mc-input-static { cursor: default; }
.mc-input-box.mc-input-static .mc-bind-status {
    flex: 1;
    font-size: 14px;
    color: #9ca3af;
}

/* 修改密码页：增加「确认修改」按钮下方的留白 */
body.mc-page-password .mc-form-actions {
    padding-bottom: 22px;
}

/* 修改密码页：「确认修改」按钮圆角 25px */
body.mc-page-password .mc-form-actions .mc-btn {
    border-radius: 25px;
}

/* 修改密码页：电脑端「确认修改」按钮固定宽度 200px */
@media (min-width: 769px) {
    body.mc-page-password .mc-form-actions .mc-btn {
        width: 200px;
        padding-left: 0;
        padding-right: 0;
    }
}

/* 账户设置页：与修改密码页保持一致的白框 / 表单风格 */
body.mc-page-settings .mc-block {
    padding-left: 30.8px;
    padding-right: 30.8px;
    max-width: 600px;
    margin-left: 0;
    margin-right: 0;
}

/* 账户设置页：手机端白框内左右留白 */
@media (max-width: 768px) {
    body.mc-page-settings .mc-block {
        padding-left: 21.3px;
        padding-right: 21.3px;
    }
}

/* 账户设置页：内层卡片拉平，取消边框/背景 */
body.mc-page-settings .mc-card-plain {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-top: 0;
}

/* 账户设置页：隐藏内层标题与说明（页面顶部已有标题） */
body.mc-page-settings .mc-block-title,
body.mc-page-settings .mc-block-sub {
    display: none;
}

/* 账户设置页：头像编辑区取消虚线并收紧间距 */
body.mc-page-settings .mc-avatar-edit {
    border-bottom: none;
    padding: 18px 0 10px;
    margin-bottom: 6px;
}

/* 账户设置页：取消每行虚线并缩减行间距 */
body.mc-page-settings .mc-form-row {
    padding: 11px 0;
    border-bottom: none;
}

/* 账户设置页：输入框取消边框 */
body.mc-page-settings .mc-input-box {
    border: none;
}

/* 账户设置页：增加保存按钮下方的留白 */
body.mc-page-settings .mc-form-actions {
    padding-top: 26px;
    padding-bottom: 22px;
}

/* 账户设置页：保存设置按钮圆角 25px */
body.mc-page-settings .mc-form-actions .mc-btn {
    border-radius: 25px;
}

/* 账户设置页：电脑端保存设置按钮固定宽度 200px */
@media (min-width: 769px) {
    body.mc-page-settings .mc-form-actions .mc-btn {
        width: 200px;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ==========================================================
   充值页：白框风格与账户设置页保持一致
   ========================================================== */

/* 白框：左右留白 30.8px、最大宽度 800px、靠左对齐 */
body.mc-page-recharge .mc-block {
    padding-left: 30.8px;
    padding-right: 30.8px;
    max-width: 800px;
    margin-left: 0;
    margin-right: 0;
}
body.mc-page-recharge .mc-block + .mc-block {
    margin-top: 18px;
}

/* 白框一：账户余额（上边留白减少 10px：24px → 14px） */
body.mc-page-recharge .mc-bal-card {
    padding-top: 14px;
    padding-bottom: 24px;
}
.mc-bal-card-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.mc-bal-card-label { font-size: 14px; font-weight: 500; color: #6b7280; }
.mc-bal-card-num { font-size: 30px; font-weight: 800; color: #222222; letter-spacing: 0.5px; }
.mc-bal-card-tip { font-size: 13px; color: #9ca3af; margin: 10px 0 0; }

/* 白框二：标题与分区小标题的间距 */
body.mc-page-recharge .mc-block-title { margin-bottom: 16px; }
body.mc-page-recharge .mc-sec-title.plain { margin-top: 24px; }

/* 充值页：支付通道图标取消外框与底色，图标略小于文字块高度（30px） */
body.mc-page-recharge .mc-pay-type {
    gap: 12px;
}
body.mc-page-recharge .mc-pay-ic {
    width: 30px;
    height: 30px;
    background: transparent;
    border-radius: 0;
    font-size: 30px;
}
body.mc-page-recharge .mc-pay-logo {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* 充值页：支付通道选中态改为浅蓝色边框 + 浅蓝色背景 */
body.mc-page-recharge .mc-pay-type.selected {
    border-color: #93c5fd;
    background: #eff6ff;
}

/* 充值页：提交行协议勾选（黑色勾选框 + 说明文字） */
body.mc-page-recharge .mc-agree {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}
body.mc-page-recharge .mc-agree-input {
    width: 14px;
    height: 14px;
    margin: 0;
    flex: 0 0 14px;
    accent-color: #222222;
    cursor: pointer;
}

/* 充值页：电脑端协议文字换行到按钮下方 */
@media (min-width: 769px) {
    body.mc-page-recharge .mc-submit-row {
        flex-wrap: wrap;
    }
    body.mc-page-recharge .mc-submit-row .mc-agree {
        flex: 0 0 100%;
    }
}

/* 充值页：金额卡两行结构 —— 第一行「50 问问分」，第二行「￥50」 */
body.mc-page-recharge .mc-amount-card .mc-amount-unit {
    margin-left: 4px;
    font-size: 10px;        /* 【由 Agent 完成】2026-09-29 「问问分」10px */
    font-weight: 400;
    color: #9ca3af;
}
body.mc-page-recharge .mc-amount-card .mc-amount-tag {
    font-size: 14px;
}
body.mc-page-recharge .mc-amount-card.selected .mc-amount-unit {
    color: rgba(255, 255, 255, 0.65);
}

/* 【由 Agent 完成】2026-10-01 充值记录：图标图形贴图标框顶部，
   图形上边缘偏移为 0（与右侧标题上边缘齐平），不再在框内垂直居中 */
body.mc-page-records .mc-order-ic {
    align-items: flex-start;
}

/* 充值记录：微信/支付宝图标使用品牌色 Logo，无底框 */
body.mc-page-records .mc-order-ic.wechat,
body.mc-page-records .mc-order-ic.alipay {
    background: transparent;
}
body.mc-page-records .mc-order-ic.wechat {
    color: #07c160;
}
body.mc-page-records .mc-order-ic.alipay {
    color: #1677ff;
}
body.mc-page-records .mc-order-ic .mc-pay-logo {
    display: block;
    width: 22px;
    height: 22px;
    fill: currentColor;
}
@media (max-width: 768px) {
    body.mc-page-records .mc-order-ic .mc-pay-logo {
        width: 20px;
        height: 20px;
    }
}

/* 充值页：「立即充值」按钮圆角 25px（与修改密码/账户设置按钮一致） */
body.mc-page-recharge .mc-submit-row .mc-btn {
    border-radius: 25px;
}

/* 充值页：「立即充值」按钮高度 48px（52px 缩减 4px），文字 18px */
body.mc-page-recharge .mc-submit-row .mc-btn-main {
    font-size: 18px;
    padding-top: 10.5px;
    padding-bottom: 10.5px;
}

/* 充值页：电脑端「立即充值」按钮固定宽度 300px */
@media (min-width: 769px) {
    body.mc-page-recharge .mc-submit-row .mc-btn {
        width: 300px;
        padding-left: 0;
        padding-right: 0;
    }
}

/* 充值页：手机端白框内左右留白与账户设置页一致 */
@media (max-width: 768px) {
    body.mc-page-recharge .mc-block {
        padding-left: 21.3px;
        padding-right: 21.3px;
    }
    body.mc-page-recharge .mc-block + .mc-block {
        margin-top: 14px;
    }
    .mc-bal-card-num { font-size: 26px; }
}

/* ==========================================================
   充值页：充值提示弹层
   与「欢迎使用 <预测精选>」说明弹层同风格（圆角白卡片 + 标题 + 正文 + 双按钮）
   ========================================================== */
/* layui 会把 skin 值直接作为 class 加在外框上（jc-help-layer） */
.jc-help-layer {
    background: transparent !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18) !important;
    overflow: hidden !important;
    border: none !important;
}

.jc-help-layer .layui-layer-content {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 20px !important;
}

/* 弹层打开时锁定背景页面滚动（与左侧抽屉遮罩同策略） */
html.jc-no-scroll,
body.jc-no-scroll {
    overflow: hidden !important;
    touch-action: none !important;
    overscroll-behavior: none;
}

/* 手机端：弹层宽度 320px（不超过屏幕 95%）并保持水平居中 */
@media (max-width: 768px) {
    .jc-help-layer {
        width: 320px !important;
        max-width: 95% !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

.jc-help-box {
    width: 100%;
    padding: 28px 24px 24px;
    text-align: center;
    background: #fff;
    border-radius: 20px;
    box-sizing: border-box;
}

.jc-help-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 12px;
    line-height: 1.4;
}

.jc-help-body {
    font-size: 14px;
    line-height: 1.7;
    color: #6b7280;
    margin-bottom: 24px;
}

/* 确认弹层：售价提示红色高亮，单独一行 */
.jc-help-body .pub-confirm-price {
    display: inline-block;
    margin-top: 2px;
    color: #ef4444;
    font-weight: 600;
}

/* 充值提示：条目列表（左边缘与「取消」按钮左边缘对齐） */
.jc-help-list {
    margin: 0 0 24px;
    padding: 0;
    list-style: decimal inside;
    text-align: left;
    font-size: 14px;
    line-height: 1.7;
    color: #6b7280;
}

.jc-help-list li + li { margin-top: 6px; }

/* 充值提示：重点词强调（非购彩平台 / 年满18周岁） */
.jc-help-hl {
    color: #ef4444;
    font-weight: 700;
}

.jc-help-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.jc-help-btn {
    flex: 1;
    height: 44px;
    border: none;
    border-radius: 22px;
    font-size: 15px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.jc-help-btn:active { transform: scale(0.98); }

.jc-help-cancel {
    background: #f3f4f6;
    color: #4b5563;
}

.jc-help-cancel:hover { background: #e5e7eb; }

.jc-help-ok {
    background: #ef4444;
    color: #fff;
}

.jc-help-ok:hover { background: #dc2626; }

/* 账户设置：头像编辑区 */
.mc-avatar-edit {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 0 8px;
    border-bottom: 0.8px dashed #f0f1f3;
    margin-bottom: 4px;
}
.mc-avatar-edit .mc-avatar-lg { width: 72px; height: 72px; }
.mc-avatar-edit-info { flex: 1; }
.mc-avatar-edit-info p { font-size: 12px; color: #9ca3af; margin-top: 4px; }

/* 头像左侧：头像（含浮动「更换」按钮）+ 提示 */
.mc-avatar-edit-left {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 96px;
}
/* 通用灰色胶囊按钮：圆角、灰底、白边线 */
.mc-pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #e5e7eb;
    color: #4b5563;
    border: 3px solid #ffffff;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: background .15s;
    box-sizing: border-box;
    box-shadow: none;
}
.mc-pill-btn:hover {
    background: #d1d5db;
}
.mc-pill-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}
.mc-pill-btn .layui-icon {
    font-size: 11px;
    color: inherit;
}

/* 头像浮动「更换」按钮：不透明灰底，贴齐头像图片底端 */
.mc-avatar-edit-left .mc-avatar.mc-avatar-lg {
    position: relative;
    flex: none;
    box-shadow: none;
}
.mc-avatar-pill {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 16px);
    padding: 0;
    font-weight: 400;
}

@media (max-width: 560px) {
    .mc-form-label { width: 86px; }
    .mc-form-actions .mc-btn { flex: 1; justify-content: center; }
}

/* 轻提示层：与登录页提示框一致（圆角 10px、无边线、柔和阴影） */
.layui-layer-msg {
    border-radius: 10px !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

/* 统一普通提示层皮肤（member_ui.js 的 mcToast 使用）：圆角 + 柔和阴影，遮罩由 shade 参数控制 */
.mc-msg-layer {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}
.mc-msg-layer .layui-layer-content {
    border-radius: 12px !important;
}

/* ==========================================================
   发布文章推荐页：白框风格与充值页保持一致
   ========================================================== */
body.mc-page-publish,
body.mc-page-publish .right-content {
    background: #f3f5f7;
}

body.mc-page-publish .mc-block {
    padding-left: 30.8px;
    padding-right: 30.8px;
    max-width: 800px;
    margin-left: 0;
    margin-right: 0;
}
body.mc-page-publish .mc-block + .mc-block {
    margin-top: 18px;
}
body.mc-page-publish .mc-bal-card {
    padding-top: 14px;
    padding-bottom: 24px;
}
body.mc-page-publish .mc-block-title { margin-bottom: 16px; }

/* ============ 草稿箱 / 已发布（member_drafts.html） ============ */
body.mc-page-drafts,
body.mc-page-drafts .right-content {
    background: #f3f5f7;
}

/* 第一行：已发布 / 草稿箱 切换标签，直接沿用订单记录状态按钮（.mc-order-bar / .mc-order-tab）样式与布局 */
body.mc-page-drafts .mc-order-bar {
    max-width: 800px;
    margin: 0 0 15px;
}

/* 右侧「全新发布」绿色圆形图标按钮（无文字） */
body.mc-page-drafts .dr-new-publish {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: #40ae2a;
    color: #ffffff;
    line-height: 1;
    text-decoration: none;
    transition: background 0.2s, box-shadow 0.2s;
}

body.mc-page-drafts .dr-new-publish i {
    font-size: 18px;
    line-height: 1;
}

body.mc-page-drafts .dr-new-publish:hover {
    background: #379a24;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(64, 174, 42, 0.35);
}

/* 右上角按钮组：全新发布 + 回到主页，两圆钮间隔 10px（不受 .mc-order-bar 的 gap 影响） */
body.mc-page-drafts .dr-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    margin-left: auto;
}

/* 已发布 / 草稿箱：右侧「回到主页」黑色圆形图标按钮（在「全新发布」左侧） */
body.mc-page-drafts .dr-home-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: #9ca3af;
    color: #ffffff;
    line-height: 1;
    text-decoration: none;
    transition: background 0.2s, box-shadow 0.2s;
}

body.mc-page-drafts .dr-home-back i {
    font-size: 18px;
    line-height: 1;
}

body.mc-page-drafts .dr-home-back:hover {
    background: #6b7280;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.35);
}

/* 【由 Agent 完成】2026-09-30 取消三条杠，改为「分享 + 主页」纯图标按钮：
   放进标题行内部，与「返回」同一行、垂直居中、靠页面右侧对齐 */
body.mc-page-drafts .mc-page-title-wrap {
    flex: 1;          /* 标题块占满剩余宽度，按钮组才能推到最右 */
    min-width: 0;
}

body.mc-page-drafts .dr-head-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
    margin-left: auto;    /* 右侧对齐 */
}

body.mc-page-drafts .dr-head-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

/* 图标用黑色（#222222），与文字灰色区分：图标更醒目，整体仍保持轻量 */
/* 【由 Agent 完成】2026-09-30 右上角「分享 + 主页」两个图标加大 3 号（17px → 20px） */
body.mc-page-drafts .dr-head-btn i {
    font-size: 20px;
    line-height: 1;
    color: #222222;
}
body.mc-page-drafts .dr-head-btn:hover { color: #4b5563; }
body.mc-page-drafts .dr-head-btn:hover i { color: #000000; }
body.mc-page-drafts .dr-head-btn:active { color: #222222; }

/* 已发布 / 草稿箱：右下角「置顶 / 到底部」浮动按钮（与专家主页一致） */
body.mc-page-drafts .scroll-btns {
    position: fixed;
    right: 24px;
    bottom: 40px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.mc-page-drafts .scroll-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #6b7280;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

body.mc-page-drafts .scroll-btn:hover {
    background: #222222;
    color: #ffffff;
}

@media (max-width: 768px) {
    /* 层级降到左侧导航(999)与侧栏遮罩(998)之下：展开左侧抽屉时按钮不浮在导航上 */
    body.mc-page-drafts .scroll-btns {
        right: 16px;
        bottom: 24px;
        gap: 10px;
        z-index: 997;
    }

    body.mc-page-drafts .scroll-btn {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
}

/* 已发布 / 草稿箱：两个标签同处一个灰色胶囊框内，框内不留间隙 */
body.mc-page-drafts .mc-order-tabs {
    gap: 0;
    padding: 0;
    flex-wrap: nowrap;
    overflow: hidden;
    border-radius: 999px;
    background: #e5e7eb;   /* 比页面灰底 #f3f5f7 更深，框体可与背景区分 */
}

/* 两个切换标签：最小宽度 80px；未选中 14px 不加粗，选中态放大并加粗 */
body.mc-page-drafts .mc-order-tab {
    min-width: 80px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    border-radius: 999px;
    background: transparent;
    color: #666;
}

body.mc-page-drafts .mc-order-tab:hover {
    background: transparent;
    color: #333;
}

/* 当前所在标签：15px + 加粗，黑色底白字并贴合灰框边缘（切换标签时由 JS 移动 .active，样式自动跟随） */
body.mc-page-drafts .mc-order-tab.active {
    font-size: 15px;
    font-weight: 600;
    background: #111111;
    color: #ffffff;
}

/* ===== 【由 Agent 完成】2026-09-30 订单记录 / 充值记录：状态标签改为分段胶囊样式
   （与草稿箱页「已发布 / 草稿箱」同款：灰色胶囊容器、选中项黑色胶囊白字） ===== */
body.mc-page-orders .mc-order-tabs,
body.mc-page-records .mc-order-tabs {
    gap: 0;
    padding: 0;
    flex-wrap: nowrap;
    border-radius: 999px;
    background: #e5e7eb;   /* 比页面灰底 #f3f5f7 更深，框体可与背景区分 */
}

body.mc-page-orders .mc-order-tab,
body.mc-page-records .mc-order-tab {
    min-width: 80px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    border-radius: 999px;
    background: transparent;
    color: #666;
}

body.mc-page-orders .mc-order-tab:hover,
body.mc-page-records .mc-order-tab:hover {
    background: transparent;
    color: #333;
}

/* 当前选中项：加粗，黑色底白字并贴合灰框边缘（JS 切换 .active 后样式自动跟随） */
body.mc-page-orders .mc-order-tab.active,
body.mc-page-records .mc-order-tab.active {
    font-size: 15px;
    font-weight: 600;
    background: #111111;
    color: #ffffff;
}

/* 手机端：灰框按内容宽度贴合，不占满整行 */
@media (max-width: 768px) {
    body.mc-page-orders .mc-order-tabs,
    body.mc-page-records .mc-order-tabs {
        flex: 0 0 auto;
        max-width: 100%;
    }
    body.mc-page-orders .mc-order-tab,
    body.mc-page-records .mc-order-tab {
        min-width: 72px;
        padding: 10px 14px;
        font-size: 14px;
    }
}

/* 第二行：筛选卡片 + 灰色统计条（沿用订单页容器宽度） */
body.mc-page-drafts .mc-block {
    max-width: 800px;
    margin-left: 0;
    margin-right: 0;
}

body.mc-page-drafts .mc-block + .mc-block { margin-top: 18px; }

/* 第三行：列表区取消整体外框，记录卡片直接铺在灰底上 */
body.mc-page-drafts .dr-list.mc-block {
    padding: 0;
    background: transparent;
    border-radius: 0;
    animation: none;
}

/* 无记录时的提示：加白色框（与记录卡片同风格），避免在灰底上「裸奔」 */
body.mc-page-drafts .dr-list .mc-empty {
    margin: 0;
    padding: 44px 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
    color: #9ca3af;
    font-size: 14px;
}
body.mc-page-drafts .dr-list .mc-empty-text {
    margin: 0 0 4px;
    font-size: 14px;
    line-height: 1.6;
}

/* 第三行：文章记录卡片 */
.dr-card {
    position: relative;        /* 主推结果印章层的定位父级 */
    padding: 18px 20px 21px;   /* 底部留白 +3px，给第三行操作按钮更多呼吸空间 */
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
    transition: box-shadow 0.2s ease;
}

.dr-card + .dr-card { margin-top: 12px; }

.dr-card:hover { box-shadow: 0 4px 14px rgba(17, 24, 39, 0.1); }

/* 卡片出现效果：进入视口时滑出（淡入 + 轻微上移） */
.dr-card.dr-card-wait {
    opacity: 0;               /* 进入视口前先隐藏，由 JS 加 .dr-card-in 播放动画 */
}

.dr-card.dr-card-in {
    animation: dr-card-in .38s ease-out both;
}

@keyframes dr-card-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 列表底部「没有更多了...」 */
.dr-no-more {
    height: 40px;
    margin: 20px 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #9ca3af;
}

/* 卡片第一行：左 文章类别，右 审核状态 + 上架状态 */
.dr-row-1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;          /* 窄屏时状态组换行，不与分类挤在一行 */
    row-gap: 8px;
    gap: 12px;
    margin-bottom: 10px;
}

/* 第一行左侧：分类「竞足」+ 其右侧的比赛信息（周日001 …） */
.dr-head-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.dr-category {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    color: #222222;
    background: #f2f3f5;
    border-radius: 25px;
}

/* 竞彩编号（从第四行移到分类右侧）：与「竞足」类型标签同款灰色胶囊 */
.dr-match-inline {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 400;
    color: #222222;
    background: #f2f3f5;
    border-radius: 25px;
    white-space: nowrap;
    flex-shrink: 0;
}
.dr-match-inline .layui-icon { font-size: 12px; margin-right: 4px; flex-shrink: 0; }

.dr-action-btn {
    flex-shrink: 0;
    height: 30px;
    padding: 0 16px;
    font-family: inherit;
    font-size: 13px;
    color: #ffffff;
    background: #222222;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.dr-action-btn:hover { background: #000000; }
.dr-action-btn:disabled { background: #c9cdd4; cursor: not-allowed; }

/* 「下架」按钮：浅灰色胶囊（与黑色上架/编辑按钮区分） */
.dr-action-btn[data-act="off"] { background: #f0f1f3; color: #333333; }
.dr-action-btn[data-act="off"]:hover { background: #e3e5e8; color: #222222; }
.dr-action-btn[data-act="off"]:disabled { background: #f5f6f7; color: #bbbbbb; cursor: not-allowed; }

/* 放在第三行（与价格同行）的「编辑」：胶囊按钮 */
.dr-row-3 .dr-action-btn {
    height: 28px;
    padding: 0 14px;
    font-size: 12px;
    border-radius: 25px;
}

/* 删除草稿：图标按钮，淡红色描边 + 圆角 5px */
.dr-del-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    padding: 0;
    font-family: inherit;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    border: 0.8px solid #fecaca;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.dr-del-btn .layui-icon { font-size: 18px; line-height: 1; }
.dr-del-btn:hover { background: rgba(239, 68, 68, 0.16); border-color: #fca5a5; }
.dr-del-btn:disabled { opacity: 0.5; cursor: not-allowed; }


/* 卡片第二行：标题 + 副标题 + 推荐标签 */
.dr-row-2 { margin-bottom: 12px; }

.dr-title {
    font-size: 15px;       /* 卡片标题 15px（与专家主页 / 推荐主页卡片标题同号） */
    font-weight: 400;      /* 标题不加粗 */
    color: #333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 已上架文章：状态区左侧的分享图标按钮（复制详情链接） */
.dr-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: none;
    border: none;
    color: #111827;
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.2s ease;
}
.dr-share-btn .layui-icon { font-size: 18px; line-height: 1; }
.dr-share-btn:hover { color: #40ae2a; }
.dr-share-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 已上架文章：标题可点（链接到推荐详情页） */
a.dr-title { text-decoration: none; cursor: pointer; transition: color 0.2s ease; }
a.dr-title:hover { color: #9ca3af; }      /* 鼠标经过：灰色（原绿色） */

/* 卡片副标题：已取消展示（数据仍保留，需要时可恢复） */
.dr-subtitle {
    display: none;
}

.dr-match {
    margin-top: 6px;
    font-size: 12px;
    color: #9ca3af;
}

.dr-match .layui-icon { font-size: 12px; margin-right: 4px; }

.dr-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* 卡片内的推荐项标签：白底灰字灰边（原绿色，按需求改为中性灰，避免与状态色混淆）
   超出宽度不换行、末尾省略号：配合 max-width:100% 保证不撑破两列布局 */
.dr-tag {
    padding: 3px 10px;
    font-size: 11px;
    color: #6b7280;
    background: #fff;
    border: 0.8px solid #e5e7eb;
    border-radius: 25px;
    display: inline-block;      /* 块级盒，ellipsis 才生效（flex/grid 子项本就会块级化） */
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 主推标签：浅灰边 + 白底 + 黑字（边线改为浅灰，仅靠字色与次推区分） */
.dr-tag.is-main {
    color: #111111;
    background: #fff;
    border-color: #dcdfe6;
    padding-left: 2px;      /* 只对主推标签：内容与左边线留白 2px */
}

/* 主推标签里的「主推」二字：灰色字 + 灰色背景的小圆角块，后面的盘口内容保持黑字 */
.dr-tag-main {
    color: #9ca3af;
    font-size: 10px;          /* 「主推」二字 10px（标签正文 11px） */
    font-weight: 400;
    background: #f0f1f3;
    padding: 2px 6px;         /* 上下留白 2px */
    border-radius: 25px;      /* 全圆角胶囊 */
}

/* 标题前的「单场」前缀：灰色 12 号，弱化于标题文字 */
.dr-title-prefix {
    color: #9ca3af;
    font-size: 12px;
}

/* 卡片第三行：左 时间，右 价格 + 操作按钮（草稿卡片：编辑 / 删除）
   取消顶部那条分隔线，只保留间距 */
.dr-row-3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;          /* 窄屏放不下时换行，不挤成一团 */
    row-gap: 8px;
    padding-top: 2px;         /* 与上方内容间距再收窄 5px（原 12px → 7px → 2px） */
    border-top: none;
}

.dr-time {
    font-size: 12px;
    color: #9ca3af;
}

.dr-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 已发布列表：比赛状态胶囊（未开赛 / 进行中 / 已完场），灰色，与行内按钮同高 */
.dr-match-status {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: #7d8794;
    background: #f3f4f7;
    border-radius: 25px;
    white-space: nowrap;
}

/* 已发布卡片对阵里的比分：独立外框，圆角 5px */
.dr-score {
    display: inline-block;
    margin: 0 4px;
    padding: 1px 6px;
    font-size: 12px;
    font-weight: 400;      /* 不加粗 */
    line-height: 1.4;
    color: #111;           /* 黑色 */
    background: #fff;
    border: 0.8px solid #e5e7eb;   /* 灰色边框 */
    border-radius: 5px;
    vertical-align: middle;
    white-space: nowrap;
}

/* 推荐项的判定结果标识（绿=中 / 红=未中 / 灰=走水）：
   在标签内部右对齐（右侧留位，避免压住文本），不再是右上角角标 */
.dr-tag {
    position: relative;      /* 标识的定位父级 */
}

/* 有判定结果时才给右侧留出让标识对齐的位置（无判定的标签保持原样） */
.dr-tag.has-mark { padding-right: 22px; }

.dr-tag-mark {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-style: normal;
    font-size: 9px;
    line-height: 1;
    color: #fff;
}

.dr-tag-mark.layui-icon {
    font-size: 9px;
    line-height: 1;
    color: #fff;
}

.dr-tag-mark.layui-icon.layui-icon-close {
    font-size: 8px;
}

.dr-tag-hit  { background: #40ae2a; }
.dr-tag-draw { background: #9ca3af; }
.dr-tag-miss { background: #e54d42; }

/* 主推结果印章：浮层，位于比赛信息条（.dr-match）右侧，垂直居中，透明度 80%
   （印章本体 96px，scale 56/96 ≈ .583，视觉宽度 56px） */
.dr-match {
    position: relative;      /* 印章浮层的定位父级 */
}

/* 印章是纯浮层：不占布局空间，直接浮在比赛信息条右侧上方（不改 padding） */

.dr-card-stamp {
    position: absolute;
    right: -20px;                          /* 右侧对齐后再向右移 20px */
    top: calc(50% + 5px);                  /* 电脑端：上移 15px 后再下移 20px 后的位置 */
    z-index: 3;
    opacity: .8;                           /* 透明度 80%（50% → 80%） */
    pointer-events: none;                  /* 纯展示，不挡交互 */
    transform: translateY(-50%) rotate(-6deg) scale(.583);
    transform-origin: center;
}

/* 进行中：文字左侧红色闪烁圆点 */
.dr-match-status.is-live {
    gap: 6px;
}

.dr-live-dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e5484d;
    animation: dr-live-blink 1s ease-in-out infinite;
}

@keyframes dr-live-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .2; }
}

/* 已发布列表：价格跟在时间后面，纯文字无外框 —— 有分值绿色不加粗，免费灰色 */
.dr-pub-price,
.dr-pub-free {
    margin-right: auto;      /* 把右侧操作区推到行尾，价格紧跟时间 */
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
}

.dr-pub-price {
    color: #2e7a20;
}

.dr-pub-free {
    color: #9ca3af;
}

/* 售价胶囊（不为 0：绿色「问问分 N」）与免费胶囊（0：灰色）同高，均与行内操作按钮一致 28px */
.dr-price {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #2e7a20;
    background: #eaf7e5;
    border-radius: 25px;
}

/* 免费查阅：价格为 0 时的灰色胶囊（样式与图中一致） */
.dr-free {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 14px;
    font-size: 12px;
    line-height: 1;
    color: #7d8794;
    background: #f3f4f7;
    border-radius: 25px;
}

/* 发布/草稿列表页：审核状态与上架状态标签文字不加粗（仅本页，订单页状态保持原样） */
body.mc-page-drafts .mc-status { font-weight: 400; }

.dr-status-draft { color: #6b7280; background: rgba(107, 114, 128, 0.12); }
.dr-status-0 { color: #f59e0b; background: rgba(245, 158, 11, 0.12); }
/* 状态「通过」：绿字 #2e7a20 + 浅绿底 #eaf7e5 */
.dr-status-1 { color: #2e7a20; background: #eaf7e5; }
.dr-status-2 { color: #ef4444; background: rgba(239, 68, 68, 0.1); }

/* 第一行右侧状态组：审核状态 + 上架状态（articles.status / articles.launch） */
.dr-state {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
}

/* 上架状态标签：已上架（绿底白字）/ 未上架（灰） */
.dr-launch-1 { color: #ffffff; background: #40ae2a; }
.dr-launch-0 { color: #6b7280; background: rgba(107, 114, 128, 0.12); }

/* 未通过卡片：卡片内直接显示最新一条驳回理由 */
.dr-reason-box {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(239, 68, 68, 0.06);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.6;
}

.dr-reason-label { flex-shrink: 0; color: #ef4444; }
.dr-reason-text { flex: 1; color: #4b5563; word-break: break-all; }

/* 驳回理由行右侧的删除图标：无外框、右对齐（dr-article-del 不带 dr-del-btn，
   避免与删除草稿的点击处理重复触发） */
.dr-reason-box .dr-article-del {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0;
    font-family: inherit;
    color: #ef4444;
    background: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.2s ease;
}
.dr-reason-box .dr-article-del .layui-icon { width: 20px; height: 20px; font-size: 20px; line-height: 20px; }
.dr-reason-box .dr-article-del:hover { color: #dc2626; opacity: 0.8; }
.dr-reason-box .dr-article-del:disabled { opacity: 0.5; cursor: not-allowed; }

/* 发布页：未通过文章再次编辑的顶部提示条（宽度/内距与下方白框保持一致） */
.pub-reject-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    max-width: 800px;
    margin: 0 0 18px;
    padding: 16px 30.8px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 14px;
    color: #ef4444;
    font-size: 13px;
    line-height: 1.7;
}

/* 左侧图标：固定 16x16，与右侧文字第一行上边缘对齐 */
.pub-reject-tip i {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    margin-top: 3px;
}
.pub-reject-main { flex: 1; }
.pub-reject-title { font-weight: 600; }
.pub-reject-reason { margin-top: 8px; color: #4b5563; font-weight: 400; word-break: break-all; }
.pub-reject-item {
    margin-bottom: 8px;
    padding: 6px 12px;
    background: #f8f1f3;
    border: 0.8px dashed #f4ccce;
    border-radius: 10px;
    line-height: 1.7;
}
.pub-reject-reason .pub-reject-item:last-child { margin-bottom: 0; }
.pub-reject-time { display: block; color: #9ca3af; font-size: 12px; }

@media (max-width: 768px) {
    .dr-card { padding: 15px 16px 18px; }
    .dr-title { font-size: 15px; }

    /* 手机端：主推结果印章（比赛信息条右侧）整体略缩小，位置保持居中上移 15px（不下移 20px） */
    .dr-card-stamp {
        top: calc(50% - 15px);
        transform: translateY(-50%) rotate(-6deg) scale(.5);
    }

    /* 手机端：副标题同样不展示（与桌面端一致） */
    body.mc-page-drafts .dr-subtitle { display: none; }

    /* 手机端：推荐项一排放两个；仅 3 个时第三个换行通栏，仅 1 个时通栏 */
    body.mc-page-drafts .dr-tags {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body.mc-page-drafts .dr-tag { text-align: left; }
    /* 手机端同样只针对主推标签：左边留白 2px */
    body.mc-page-drafts .dr-tag.is-main { padding-left: 2px; }
    /* 有判定结果时：文字靠左、标识靠右（居中会被右侧留位带偏） */
    body.mc-page-drafts .dr-tag.has-mark { text-align: left; }
    body.mc-page-drafts .dr-tag:nth-child(3):last-child { grid-column: 1 / -1; }
    body.mc-page-drafts .dr-tag:only-child { grid-column: 1 / -1; }

    /* 手机端：标签组与「全新发布」同一行（覆盖全局的 flex: 1 1 100% 换行规则） */
    body.mc-page-drafts .mc-order-bar {
        flex-wrap: nowrap;
        gap: 8px;
    }
    body.mc-page-drafts .mc-order-tabs {
        flex: 0 0 auto;      /* 灰框按内容宽度贴合，不被拉伸占满整行 */
        max-width: 70%;
        min-width: 0;
        flex-wrap: nowrap;
    }
    body.mc-page-drafts .mc-order-tab { min-width: 76px; padding: 10px 14px; font-size: 14px; }
    body.mc-page-drafts .dr-new-publish { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; }
    body.mc-page-drafts .dr-new-publish i { font-size: 17px; }
    body.mc-page-drafts .dr-home-back { width: 34px; height: 34px; }
    body.mc-page-drafts .dr-home-back i { font-size: 17px; }
    .dr-action-btn { height: 28px; padding: 0 13px; font-size: 12px; }

    /* 统计条：手机端强制一行不换行，超宽时向左滑动查看（覆盖全局的 white-space: normal） */
    body.mc-page-drafts .mc-filter-count {
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body.mc-page-drafts .mc-filter-count::-webkit-scrollbar { display: none; }
}

/* 流程卡片：内容垂直居中，左侧内距比其他卡片少 15px；滚过后由 JS 浮动吸顶（距顶 15px） */
body.mc-page-publish #pub-account.mc-block.active {
    display: flex;
    align-items: center;
    padding-left: 15.8px;
    padding-top: 14px;
    padding-bottom: 14px;
}

/* 文章内容标题右侧：AI 写推荐按钮（蓝色无边框，条件不足时置灰不可点） */
.pub-ai-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    color: #ffffff;
    background: #1e9fff;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background 0.22s ease, box-shadow 0.22s ease;
}

.pub-ai-btn i { font-size: 14px; line-height: 1; }

.pub-ai-btn:hover {
    background: #0d8ce8;
    box-shadow: 0 6px 16px rgba(30, 159, 255, 0.35);
}

.pub-ai-btn:disabled,
.pub-ai-btn.disabled {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

.pub-ai-btn:disabled:hover,
.pub-ai-btn.disabled:hover {
    background: #e5e7eb;
    box-shadow: none;
}

/* ============ AI 写推荐：底部上滑弹层 ============ */
.ai-mask {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.ai-mask.show { opacity: 1; visibility: visible; }

/* AI 弹层专用滚动锁：body 固定定位（top 由 JS 设为负的滚动量，关闭后原样恢复），
   彻底禁止页面上下滚动，且不会把页面拉回顶部 */
html.ai-lock,
body.ai-lock {
    overflow: hidden;
}

body.ai-lock {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    touch-action: none;
}

.ai-sheet {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    width: 720px;
    max-width: 100%;
    height: calc(80vh - 100px);       /* 电脑端：视口 80% 再减 100px */
    max-height: calc(100vh - 40px);   /* 矮屏时不超出可视区域 */
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.16);
    transform: translate(-50%, 100%);
    /* visibility 一并参与过渡：关闭时先播完下滑动画再隐藏，否则会瞬间消失 */
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.28s ease;
    visibility: hidden;
}
.ai-sheet.show { transform: translate(-50%, 0); visibility: visible; }

/* 头部：标题居左，关闭按钮右上 */
.ai-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 0.8px solid #f0f1f3;
}

.ai-sheet-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.ai-sheet-close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #f3f5f7;
    color: #6b7280;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.ai-sheet-close i { font-size: 14px; line-height: 1; }
.ai-sheet-close:hover { background: #e5e7eb; color: #111827; }

.ai-sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 18px 4px;
}

.ai-block + .ai-block { margin-top: 16px; }

.ai-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

/* 比赛信息：浅灰底卡片，队名加粗 + 开赛时间/比分次要信息 */
.ai-match-box {
    padding: 12px 14px;
    background: #f7f8fa;
    border: 0.8px solid #eef0f2;
    border-radius: 10px;
}

.ai-match-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    line-height: 1.5;
    word-break: break-all;
}

.ai-match-meta {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
}

/* 推荐选项：四个等宽卡片，灰框白底 + 10px 圆角 */
.ai-rec-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.ai-rec-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
    background: #ffffff;
    border: 0.8px solid #d1d5db;
    border-radius: 10px;
}

/* 已选择的推荐项：浅蓝底 + 浅蓝边框胶囊（同截图样式） */
.ai-rec-item.has {
    background: #eff6ff;
    border: 0.8px solid #93c5fd;
    border-radius: 10px;
}

.ai-rec-group {
    font-size: 12px;
    color: #6b7280;
}

.ai-rec-val {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    line-height: 1.4;
    word-break: break-all;
}

/* 主推项：卡片改为绿色边框 + 浅绿色背景（字 #3a812c / 底 #eaf7e5 / 边 #b7e0a8，排版不变） */
.ai-rec-item.main {
    background: #eaf7e5;
    border-color: #b7e0a8;
}

/* 主推标注：跟在推荐值后面同一行，文字绿色不加粗，不新增行 */
.ai-rec-main {
    display: inline;
    color: #3a812c;
}

.ai-rec-empty {
    font-size: 13px;
    color: #9ca3af;
    line-height: 34px;
}

.ai-textarea {
    width: 100%;
    min-height: 230px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.7;
    color: #222222;
    background: #ffffff;
    border: 0.8px solid #e5e7eb;
    border-radius: 10px;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.ai-textarea:focus {
    border-color: #b7b7b7;
    box-shadow: none !important;   /* 彻底去掉发光/外阴影 */
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.ai-counter {
    margin-top: 6px;
    margin-bottom: 8px;
    text-align: right;
    font-size: 12px;
    color: #9ca3af;
}

/* 底部按钮：立即续写（主）+ 关闭 */
.ai-sheet-foot {
    display: flex;
    align-items: center;
    justify-content: center;   /* 电脑端按钮居中 */
    gap: 10px;
    padding: 14px 18px;
    border-top: 0.8px solid #f0f1f3;
    background: #ffffff;
    border-radius: 0 0 16px 16px;
}

.ai-btn {
    height: 38px;
    padding: 0 22px;
    font-family: inherit;
    font-size: 14px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 立即续写：黑色胶囊（固定 200px 宽） */
.ai-btn-main {
    width: 200px;
    padding: 0;
    border: 0.8px solid #111111;
    background: #111111;
    color: #ffffff;
    font-weight: 500;
}
.ai-btn-main:hover {
    background: #222222;
    border-color: #222222;
    box-shadow: 0 6px 16px rgba(17, 17, 17, 0.28);
}
.ai-btn-main:disabled {
    background: #9ca3af;
    border-color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

/* 关闭：浅灰底、无边框 */
.ai-btn-ghost {
    border: none;
    background: #f3f5f7;
    color: #6b7280;
}
.ai-btn-ghost:hover { background: #e5e7eb; color: #111827; }

/* ===== 选择比分：输入框下方按钮 + 底部上滑弹层（复用 .ai-sheet 面板） ===== */

/* 「选择比分」按钮：样式与位置完全对齐「主推」标签（小号胶囊 + 组名下方） */
.pub-score-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    box-sizing: border-box;
    width: 56px;                /* 与主推标签同宽 */
    gap: 3px;
    margin-top: 3px;
    padding: 2px 0;
    font-family: inherit;
    font-size: 10px;
    white-space: nowrap;
    color: #6b7280;
    background: #ffffff;
    border: 0.8px solid #e5e7eb;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.15s;
}
.pub-score-btn .layui-icon { font-size: 10px; }
.pub-score-btn:hover { color: #222222; border-color: #222222; }

/* 未选比赛 / 无比分赔率：置灰不可点（同主推禁用态） */
.pub-score-btn[disabled] {
    color: #c0c4cc;
    background: #f5f5f5;
    border-color: #e5e7eb;
    cursor: not-allowed;
}
.pub-score-btn[disabled]:hover { color: #c0c4cc; border-color: #e5e7eb; }

/* 已选比分：按钮变为「清空比分」，淡红色表示当前有值、点击即清除 */
.pub-score-btn.on {
    color: #c0392b;
    background: #fdeeed;
    border-color: #f3b5ae;
}
.pub-score-btn.on:hover { color: #c0392b; border-color: #c0392b; }

/* 电脑端：与主推按钮同位（组名下方 12px） */
@media (min-width: 769px) {
    body.mc-page-publish .pub-rec-row > .pub-score-btn {
        grid-column: 1;
        grid-row: 2;
        margin-top: 8px;      /* 比主推标签（12px）再上移 4px */
    }
}

@media (max-width: 768px) {
    body.mc-page-publish .pub-rec-row > .pub-score-btn {
        position: absolute;
        top: 13px;
        right: 0;
        margin-top: 0;
        width: 100px;           /* 手机端与主推标签同宽 */
    }
}

/* 比分输入框：只读 + 点击选择，光标提示可点 */
body.mc-page-publish #p_score {
    cursor: pointer;
    background: transparent;
}
body.mc-page-publish #p_score:focus {
    outline: none;
}

/* 弹层标题里的已选计数 */
.sc-count-tip {
    font-size: 12px;
    font-weight: 400;
    color: #9ca3af;
}

/* 比分选择弹层比 AI 弹层矮一点：三组比分滚动浏览 */
.sc-sheet {
    height: 72vh;
    max-height: calc(100vh - 60px);
}

/* 滑动到底部时留 20px 白，紧贴按钮区不会显得挤 */
.sc-sheet .ai-sheet-body {
    padding-bottom: 20px;
}

/* 分组标题块 + 比分格子 */
.sc-block .ai-label { margin-bottom: 10px; }

.sc-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));   /* 电脑端一排 5 个 */
    gap: 10px;
}

/* 单个比分：比分与赔率并排显示「1:0 @10.0」，选中态文本样式不变（比分黑、赔率灰） */
.sc-chip {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    padding: 10px 4px;
    font-family: inherit;
    background: #f7f8fa;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.sc-chip:hover { border-color: #d1d5db; }

.sc-chip .sc-score {
    font-size: 13px;
    font-weight: 400;
    color: #111827;
    line-height: 1.2;
}

.sc-chip .sc-odd {
    font-size: 12px;
    font-weight: 400;
    color: #9ca3af;
    line-height: 1.2;
}

/* 选中态：只变底色与边框（1px），文本样式保持不变 */
.sc-chip.selected {
    background: #eff6ff;
    border: 1px solid #93c5fd;
}

.sc-empty {
    grid-column: 1 / -1;
    padding: 14px 0;
    text-align: center;
    font-size: 13px;
    color: #9ca3af;
}

@media (max-width: 768px) {
    .sc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* 手机端一排 3 个 */
    .sc-sheet { height: 76vh; }
}

@media (max-width: 768px) {
    .ai-sheet { width: 100%; height: 80vh; max-height: calc(100vh - 40px); }
    .ai-rec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 手机端一排 2 个 */
    .ai-textarea { min-height: 150px; }   /* 手机端高度 -50px */
    .ai-sheet-foot { justify-content: stretch; }
    .ai-sheet-foot .ai-btn { flex: 1 1 0; padding: 0 12px; }
    .ai-btn-main { width: auto; }   /* 手机端仍平分宽度 */
}

@media (max-width: 768px) {
    .pub-ai-btn {
        height: 28px;
        padding: 0 12px;
        font-size: 12px;
    }
}

/* 流程卡片下方浮层：自动保存草稿提示（淡绿色圆角框） */
.pub-save-tip {
    position: absolute;
    top: 100%;
    left: 15.8px;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 14px;
    font-size: 12px;
    color: #2f7a1f;
    background: #eaf7e5;
    border: 0.8px solid #b7e0a8;
    border-radius: 25px;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 21;
}

.pub-save-tip .layui-icon { font-size: 14px; line-height: 1; }

.pub-save-tip.show {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .pub-save-tip { left: 12px; }
}

/* 右下角浮动标签：草稿箱 / 已发布 */
.pub-float {
    position: fixed;
    right: 24px;
    bottom: 32px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pub-float-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 104px;
    height: 38px;
    font-size: 13px;
    color: #ffffff;
    background: #222222;
    border-radius: 25px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.22);
    transition: all 0.22s ease;
}

.pub-float-btn i { font-size: 15px; line-height: 1; }

.pub-float-btn:hover {
    background: #000000;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.3);
}

@media (max-width: 768px) {
    .pub-float {
        right: 12px;
        bottom: 18px;
    }

    .pub-float-btn {
        width: 86px;
        height: 34px;
        font-size: 12px;
    }
}

/* 电脑端：流程卡片底部内距 +3px */
@media (min-width: 769px) {
    body.mc-page-publish #pub-account.mc-block.active {
        padding-bottom: 17px;
    }
}

body.mc-page-publish #pub-account.pub-card-fixed {
    position: fixed;
    top: 5px;
    z-index: 20;
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
}

body.mc-page-publish #pub-account .pub-flow {
    width: 100%;
}

/* 发布流程条：序号圆点 + 名称 + 箭头，滚动到对应卡片时点亮为绿色 */
.pub-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 0;
    margin-top: 4px;
}

.pub-step { cursor: pointer; }

.pub-step-name.short { display: none; }
.pub-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    border: 0.8px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    transition: border-color 0.25s ease, background 0.25s ease;
}
.pub-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #111111;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
    transition: background 0.25s ease;
}
.pub-step-name {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    white-space: nowrap;
    transition: color 0.25s ease;
}
.pub-step-arrow {
    margin: 0 10px;
    color: #d1d5db;
    font-size: 14px;
    flex-shrink: 0;
}
.pub-step.active {
    border-color: #40ae2a;
    background: #f5faf3;
}
.pub-step.active .pub-step-dot { background: #40ae2a; }
.pub-step.active .pub-step-name { color: #40ae2a; }

/* 表单行：标题在上不需要垂直居中的行（胶囊组、编辑区） */
body.mc-page-publish .mc-card-plain {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-top: 0;
}
body.mc-page-publish .mc-form-row {
    padding: 14px 0;
    border-bottom: 0.8px dashed #f0f1f3;
    align-items: flex-start;
}
body.mc-page-publish .pub-row-top,
body.mc-page-publish .pub-row-block { align-items: flex-start; }
body.mc-page-publish .mc-form-row:last-of-type { border-bottom: none; }
body.mc-page-publish .mc-form-label {
    width: 96px;
    padding-top: 10px;
}
body.mc-page-publish .pub-field { flex: 1; min-width: 0; }

/* 文章类型：胶囊单选，四个按钮强制一行等宽，文字过长省略 */
.pub-chip-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
}
.pub-chip {
    flex: 1 1 0;
    min-width: 0;
    display: block;
    height: 34px;
    line-height: 32px;
    padding: 0 10px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: inherit;
    font-size: 13px;
    color: #4b5563;
    background: #fff;
    border: 0.8px solid #e5e7eb;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pub-chip:hover { border-color: #222222; color: #222222; }
.pub-chip.selected {
    background: #222222;
    border-color: #222222;
    color: #ffffff;
}

/* 未开放的文章类型：置灰禁用 */
.pub-chip.disabled,
.pub-chip[disabled] {
    background: #f5f5f5;
    border-color: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
}
.pub-chip.disabled:hover,
.pub-chip[disabled]:hover {
    border-color: #e5e7eb;
    color: #9ca3af;
}

/* 推荐选项提示行：当前比赛 / 让球数 / 加载状态 */
/* 提示条：灰色外框（纯底色衬底），无边线 */
.pub-odd-tip {
    margin: 8px 0 0;
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.6;
    color: #6b7280;
    background: #f3f4f6;
    border: 0;
    border-radius: 10px;
}

/* 推荐选项：赔率胶囊（名称 + 赔率），每行单选 */
.pub-odd-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pub-odd-grid + .pub-odd-grid {
    margin-top: 10px;
}

/* 第二行容器（竞彩的「让胜 / 让平 / 让负」）：整块占满一行 → 强制换行；
   自身就是一个 flex 行，两行之间只算一次 gap（10px），比单独加换行占位少 10px */
.pub-odd-line {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

.pub-odd-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 96px;
    padding: 8px 14px;
    font-family: inherit;
    background: #fff;
    border: 0.8px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pub-odd-name {
    font-size: 13px;
    /* 选项名加粗、赔率不加粗；选中后两者都加粗（见 .selected 规则） */
    font-weight: 600;
    color: #374151;
    /* 名称较长（亚指带队名与让球数）时限宽省略，不撑破胶囊 */
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pub-odd-val {
    /* 赔率比选项名小 2 号（14 → 12），突出推荐方向 */
    font-size: 12px;
    font-weight: 400;
    color: #222222;
}

/* 亚指 / 大小：选项名（「+0.25」「大2.5」）字号加大 */
.pub-odd-grid[data-group="亚指"] .pub-odd-name,
.pub-odd-grid[data-group="大小"] .pub-odd-name {
    font-size: 14px;
    max-width: 150px;   /* 字号变大后相应放宽上限，避免过早省略 */
}

/* 亚指组：文案短（如「+0.25 0.91」），按钮内容居中 */
.pub-odd-grid[data-group="亚指"] .pub-odd-chip {
    justify-content: center;
}

.pub-odd-chip:hover {
    border-color: #222222;
}

/* 选中态：浅蓝色边框 + 浅蓝色背景（与充值页支付通道选中样式一致） */
.pub-odd-chip.selected {
    background: #eff6ff;
    border-color: #93c5fd;
}

.pub-odd-chip.selected .pub-odd-name {
    color: #111827;
    font-weight: 600;
}

/* 选中：选项名与赔率都加粗 */
.pub-odd-chip.selected .pub-odd-val {
    font-weight: 600;
    color: #111827;
}

/* 该组暂无真实赔率：占位胶囊置灰不可点 */
.pub-odd-chip.disabled,
.pub-odd-chip[disabled] {
    background: #f5f5f5;
    border-color: #e5e7eb;
    cursor: not-allowed;
}
.pub-odd-chip.disabled .pub-odd-name,
.pub-odd-chip.disabled .pub-odd-val,
.pub-odd-chip[disabled] .pub-odd-name,
.pub-odd-chip[disabled] .pub-odd-val {
    color: #9ca3af;
    font-weight: 400;
}
.pub-odd-chip.disabled:hover,
.pub-odd-chip[disabled]:hover {
    border-color: #e5e7eb;
}

/* 主推按钮：竞彩 / 亚指 / 大小 三组互斥，选中后变绿色胶囊「主推」 */
.pub-main-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;      /* 电脑端 Grid 里贴着左侧组名文字下方，不被拉伸 */
    box-sizing: border-box;
    width: 56px;            /* 与左侧组名四字（如「竞彩推荐」14px×4）等宽 */
    gap: 3px;
    margin-top: 3px;        /* 与上方内容的间距收紧（原 8px） */
    padding: 2px 0;         /* 上下再收窄（原 3px 10px），左右由固定宽度控制 */
    font-size: 10px;
    white-space: nowrap;
    color: #6b7280;
    background: #fff;
    border: 0.8px solid #e5e7eb;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.15s;
}
.pub-main-btn .layui-icon { font-size: 10px; }

/* 推荐三组：主推按钮定位容器（电脑端在组名文字下方，手机端在组名文字右侧） */
.pub-rec-row { position: relative; }

/* 电脑端：主推按钮放在左侧组名（如「亚指推荐」）的正下方，与组名左对齐 */
@media (min-width: 769px) {
    body.mc-page-publish .pub-rec-row {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        /* 第一行只按组名文字高度，剩余高度全部给第二行：
           竞彩推荐有上下两行赔率胶囊时，避免把「文字 → 主推标签」的间距撑开 */
        grid-template-rows: max-content 1fr;
        align-items: start;
    }
    /* 组名文字与右侧选项上边缘对齐：去掉顶部内缩，行高收紧到 1 让文字上下不留空白 */
    body.mc-page-publish .pub-rec-row > .mc-form-label {
        grid-column: 1;
        grid-row: 1;
        padding-top: 0;
        line-height: 1;
    }
    /* 主推标签与上方组名文字（竞彩推荐 / 亚指推荐 / 大小推荐）间距 12px */
    body.mc-page-publish .pub-rec-row > .pub-main-btn { grid-column: 1; grid-row: 2; margin-top: 12px; }
    body.mc-page-publish .pub-rec-row > .pub-field { grid-column: 2; grid-row: 1 / span 2; }
}
.pub-main-btn:hover { color: #222222; border-color: #222222; }

/* ===== 亚指：组名旁的小箭头 + 其余盘口组展开 / 收拢 ===== */

/* 小箭头：紧跟「亚指推荐」组名，只有多组盘口时才显示（JS 控制 display） */
.pub-odd-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 4px;
    color: #9ca3af;
    cursor: default;         /* 纯状态指示（展开时箭头朝上），点击交给组名文字 */
    user-select: none;
}
.pub-odd-toggle .layui-icon { font-size: 12px; transition: transform 0.18s ease; }
.pub-odd-toggle.open .layui-icon { transform: rotate(180deg); }   /* 展开时箭头朝上 */

/* 多组盘口时「亚指推荐」组名文字也可点展开 */
#asianLabel.clickable { cursor: pointer; }

/* 其余盘口组容器：默认收起，JS 用 slideDown / slideUp 滑出（宽度撑满，内部每组一行） */
.pub-odd-more {
    display: none;
    width: 100%;
}
/* 展开后：每组（每行）之间上下留 12px 间隔 */
.pub-odd-more .pub-odd-line + .pub-odd-line { margin-top: 12px; }

/* 电脑端：竞彩按钮保持内容自适应宽度（不拉宽），
   亚指 / 大小每行 2 个等分，行宽取「竞彩 3 个按钮的自然总宽」
   —— 由 JS 量出后写进 --jc-row-w，故 2 个按钮的总宽 = 竞彩 3 个按钮的总宽 */
@media (min-width: 769px) {
    .pub-odd-grid[data-group="大小"] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 10px;
        width: var(--jc-row-w, 100%);
        max-width: 100%;
    }
    /* 亚指外层仍是 flex（展开容器要能被 slideDown 动画），每组行内部 2 等分 */
    .pub-odd-grid[data-group="亚指"] { gap: 12px 10px; }
    .pub-odd-grid[data-group="亚指"] .pub-odd-line {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: var(--jc-row-w, 100%);
        max-width: 100%;
    }
    /* 等宽只作用于亚指 / 大小：内容居中、去掉最小宽度限制；竞彩按钮宽度不受影响 */
    .pub-odd-grid[data-group="亚指"] .pub-odd-chip,
    .pub-odd-grid[data-group="大小"] .pub-odd-chip {
        min-width: 0;
        justify-content: center;
    }
}

/* 该组设为主推：绿色系（字 #3a812c / 底 #eaf7e5 / 边 #b7e0a8），文字不加粗 */
.pub-main-btn.on {
    color: #3a812c;
    background: #eaf7e5;
    border-color: #b7e0a8;
}
.pub-main-btn.on:hover { color: #3a812c; border-color: #3a812c; }

/* 该组还没选推荐项：按钮置灰不可点，避免设出空主推 */
.pub-main-btn[disabled] {
    color: #c0c4cc;
    background: #f5f5f5;
    border-color: #e5e7eb;
    cursor: not-allowed;
}
.pub-main-btn[disabled]:hover { color: #c0c4cc; border-color: #e5e7eb; }

@media (max-width: 768px) {
    .pub-odd-chip {
        min-width: 0;
        flex: 1 1 calc(33.333% - 7px);
        padding: 8px 6px;
        justify-content: center;
    }

    .pub-odd-name { font-size: 12px; max-width: 84px; }
    .pub-odd-val { font-size: 11px; }
    /* 手机端：亚指 / 大小选项名同步加大（12 → 13） */
    .pub-odd-grid[data-group="亚指"] .pub-odd-name,
    .pub-odd-grid[data-group="大小"] .pub-odd-name {
        font-size: 13px;
        max-width: 110px;
    }
    /* 亚指：一组盘口单独一行，行内「主 X / 客 X」两个胶囊各占一半 */
    .pub-odd-grid[data-group="亚指"] .pub-odd-line .pub-odd-chip {
        flex: 1 1 calc(50% - 5px);
    }
}

/* 下拉选择：与输入框同高同圆角 */
.pub-select-box select {
    flex: 1;
    height: 40px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #111827;
    appearance: none;
    padding-right: 4px;
}
.pub-select-box { position: relative; }
.pub-select-box:after {
    content: "";
    position: absolute;
    right: 14px;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid #9ca3af;
    border-bottom: 1.5px solid #9ca3af;
    transform: rotate(45deg);
    pointer-events: none;
}

/* ==========================================================
   比赛选择：自定义下拉层（今日 / 未来 3 天日期按钮 + 比赛列表）
   ========================================================== */

/* 原生 select 仅作值载体，界面不展示 */
.pub-native-select {
    display: none;
}

.pub-match-select {
    position: relative;
    width: 100%;
}
/* 展开时提升层级，避免被下方表单行盖住 */
.pub-match-select.open { z-index: 31; }

/* 触发框：与输入框同风格，比赛名过长时单行省略，不撑破选择框 */
.pub-match-trigger {
    width: 100%;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.pub-match-text {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pub-match-text.placeholder { color: #9ca3af; }
.pub-match-arrow {
    flex: none;
    font-size: 12px;
    transition: transform 0.2s ease;
}
.pub-match-select.open .pub-match-arrow { transform: rotate(180deg); }

/* 下拉层：贴着触发框下沿展开，宽度与输入框一致 */
.pub-match-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    padding: 10px;
    background: #ffffff;
    border: 0.8px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.12);
}
.pub-match-select.open .pub-match-panel { display: block; }

/* 日期按钮：今日 / 未来 3 天，横向一行（窄屏可横向滑动） */
.pub-match-dates {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 9px;
    margin-bottom: 6px;
    border-bottom: 0.8px dashed #f0f1f3;
}
.pub-date-btn {
    /* 不拉伸、按内容宽度显示；max-width 只是硬上限（正常文案远小于它），
       不显示省略号 —— 文案始终保持完整（「今日」「明天」「09-21周一」） */
    flex: 0 0 auto;
    max-width: 100px;
    height: 28px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 12px;
    color: #4b5563;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    background: #ffffff;
    border: 0.8px solid #e5e7eb;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pub-date-btn:hover { border-color: #222222; color: #222222; }
.pub-date-btn.selected {
    background: #222222;
    border-color: #222222;
    color: #ffffff;
}

/* 比赛列表：编号 / 联赛 / 时间一行，对阵单独一行（手机端自动换行不溢出） */
.pub-match-list {
    max-height: 260px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.pub-match-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: #111827;
    cursor: pointer;
}
.pub-match-item:hover { background: #f3f5f7; }
.pub-match-item.selected { background: #eef7ee; }
.pub-mi-no { color: #6b7280; font-size: 12px; }
.pub-mi-lg { color: #6b7280; font-size: 12px; }
.pub-mi-time { color: #9ca3af; font-size: 12px; }
.pub-mi-teams {
    flex: 1 1 100%;
    min-width: 0;
    word-break: break-all;
}
/* 已上架的比赛：整行置灰 + 禁用点击，右侧挂「已上架」小标签。
   标签绝对定位并对齐整行中线（两行比赛信息一起算），故右侧留出让位空间 */
.pub-match-item.disabled {
    position: relative;
    padding-right: 64px;          /* 给「已上架」标签让位，文字不会被压住 */
    color: #b6bec9;
    background: #fafbfc;
    cursor: not-allowed;
}
.pub-match-item.disabled:hover { background: #fafbfc; }
.pub-match-item.disabled .pub-mi-no,
.pub-match-item.disabled .pub-mi-lg,
.pub-match-item.disabled .pub-mi-time,
.pub-match-item.disabled .pub-mi-teams { color: #b6bec9; }
.pub-mi-tag {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);  /* 与两行比赛信息整体垂直居中 */
    padding: 1px 8px;
    font-size: 11px;
    line-height: 1.6;
    color: #ffffff;
    background: #b6bec9;
    border-radius: 999px;
    white-space: nowrap;
}
.pub-match-empty {
    padding: 18px 10px;
    text-align: center;
    font-size: 13px;
    color: #9ca3af;
}

/* 手机端：胶囊字更小、下拉层不出框 */
@media (max-width: 768px) {
    .pub-chip-grid { gap: 6px; }
    .pub-chip { padding: 0 6px; font-size: 12px; }
    .pub-match-item { font-size: 12px; }
}

/* 售卖价格：金额后缀 + 快捷金额按钮 */
/* 售卖价格：输入数字加大两号（14 → 16px）并显示为绿色 */
.pub-price-box input[type="number"] {
    font-size: 16px;
    font-weight: 600;
    color: #40ae2a;
}

.pub-price-box .pub-unit {
    flex: none;
    font-size: 13px;
    color: #9ca3af;
}
.pub-price-box input[type="number"]::-webkit-outer-spin-button,
.pub-price-box input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pub-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.pub-quick-btn {
    height: 28px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 12px;
    color: #6b7280;
    background: #fff;
    border: 0.8px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pub-quick-btn:hover { border-color: #40ae2a; color: #40ae2a; }
.pub-quick-btn.selected {
    background: #40ae2a;
    border-color: #40ae2a;
    color: #ffffff;
    font-weight: 500;
}

/* 时间输入：宽度受限，保持与输入框一致的浅灰底 */
.pub-date-box input[type="datetime-local"] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #111827;
}
.pub-tip {
    margin: 8px 0 0;
    font-size: 12px;
    color: #9ca3af;
}

/* 发布校验：必填项为空时整个外框红色高亮（.mc-input-box 单行输入 / .pub-editor 文本框） */
.pub-invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .14);
    background: rgba(239, 68, 68, .03);
}
.pub-invalid .pub-editor-bar { border-bottom-color: rgba(239, 68, 68, .35); }

/* 定时发布开关 */
.pub-switch-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.pub-switch {
    display: inline-flex;
    cursor: pointer;
    user-select: none;
}
.pub-switch input { display: none; }
.pub-switch-track {
    position: relative;
    display: block;
    width: 42px;
    height: 24px;
    background: #e5e7eb;
    border-radius: 999px;
    transition: background 0.22s ease;
}
.pub-switch-dot {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.22s ease;
}
.pub-switch input:checked + .pub-switch-track { background: #222222; }
.pub-switch input:checked + .pub-switch-track .pub-switch-dot { transform: translateX(18px); }
.pub-switch-text {
    font-size: 13px;
    color: #6b7280;
}
.pub-schedule-time {
    flex: 1 1 220px;
    max-width: 260px;
}
.pub-schedule-time.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* 内容编辑器：工具条 + 输入区 + 字数统计 */
.pub-editor {
    border: 0.8px solid #e5e7eb;
    border-radius: 12px;
    background: #fafafa;
    overflow: hidden;
}
.pub-editor-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 0.8px solid #f0f1f3;
    background: #ffffff;
}
.pub-editor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 14px;
    color: #6b7280;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pub-editor-btn:hover { border-color: #222222; color: #222222; }
.pub-pay-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 10px;
    margin-right: auto;
    font-size: 11px;
    color: #ffffff;
    background: #222222;
    border-radius: 999px;
}
.pub-editor textarea {
    display: block;
    width: 100%;
    min-height: 150px;
    padding: 14px;
    border: none;
    outline: none;
    resize: vertical;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.7;
    color: #111827;
    box-sizing: border-box;
}
.pub-editor-foot {
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px;
    border-top: 0.8px solid #f0f1f3;
    background: #ffffff;
}
.pub-counter { font-size: 12px; color: #9ca3af; }

/* 提交按钮：与充值页同风格（电脑端按钮 300px 且整体居中） */
body.mc-page-publish .pub-actions {
    padding-top: 26px;
    padding-bottom: 22px;
    gap: 12px;
}
body.mc-page-publish .pub-actions .mc-btn { border-radius: 25px; }
.pub-btn-ghost {
    background: #ffffff;
    border-color: #dddddd;
    color: #333333;
}
.pub-btn-ghost:hover { border-color: #222222; color: #222222; }
@media (min-width: 769px) {
    body.mc-page-publish .pub-actions { justify-content: center; }
    body.mc-page-publish .pub-actions .mc-btn {
        width: 300px;
        padding-left: 0;
        padding-right: 0;
    }
}

/* 手机端：白框留白与其它会员页一致 */
@media (max-width: 768px) {
    body.mc-page-publish .mc-block {
        padding-left: 21.3px;
        padding-right: 21.3px;
    }
    /* 手机端：驳回提示条内距与白框一致，宽度保持相同 */
    body.mc-page-publish .pub-reject-tip {
        padding-left: 21.3px;
        padding-right: 21.3px;
    }
    body.mc-page-publish .mc-block + .mc-block { margin-top: 14px; }
    /* 手机端：流程卡片左右内距 12px；副标题与下方内容间距 -15px */
    body.mc-page-publish #pub-account.mc-block.active {
        padding-left: 12px;
        padding-right: 12px;
    }
    body.mc-page-publish .mc-block-sub {
        text-align: left;
        margin-bottom: 9px;
    }
    /* 手机端：流程文字精简为两字 */
    .pub-step-name { display: none; }
    .pub-step-name.short { display: inline; font-size: 13px; }
    .pub-step { padding: 4px 10px 4px 4px; gap: 6px; }
    .pub-step-dot { width: 22px; height: 22px; font-size: 12px; }
    /* 手机端：流程条隐藏步骤之间的「>」箭头 */
    body.mc-page-publish .pub-step-arrow { display: none; }
    body.mc-page-publish .pub-flow {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        /* 手机端：流程标签之间间距 15px */
        column-gap: 15px;
    }
    /* 手机端：题目（字段）之间再多 5px 间距 */
    body.mc-page-publish .mc-form-row { flex-direction: column; gap: 5px; }
    body.mc-page-publish .mc-form-row + .mc-form-row { margin-top: 5px; }
    body.mc-page-publish .mc-form-label { width: 100%; padding-top: 0; }
    body.mc-page-publish .pub-field { width: 100%; }
    /* 手机端：主推按钮与组名文字同一行，贴右边缘对齐（top 对齐组名文字行） */
    body.mc-page-publish .pub-rec-row > .pub-main-btn {
        position: absolute;
        top: 13px;
        right: 0;
        margin-top: 0;
        width: 100px;       /* 手机端标签宽度 100px */
    }
    /* 手机端：日期按钮略收窄（仍足够容纳「09-21周一」，不截断），四个保持一行可横向滑动 */
    .pub-date-btn { max-width: 92px; padding: 0 10px; }
    body.mc-page-publish .pub-schedule-time { max-width: none; }
    body.mc-page-publish .pub-actions { flex-direction: column; }
    body.mc-page-publish .pub-actions .mc-btn { width: 100%; }
}


/* ============ 已发布列表：文字链接筛选（左 审核状态 / 右 上架状态） ============
   效果参照销售首页顶部导航 .nav-menu a：默认无下划线，悬停下划线展开，
   选中加粗 + 下划线常驻，按下时整体压暗 */
.dr-text-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 0;
    margin: 0 0 22px;
}

.dr-text-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 26px;
    flex: 1 1 auto;      /* 撑满筛选行宽度，靠右项（margin-left:auto）才能顶到最右侧 */
}

.dr-text-links-right {
    margin-left: auto;
}

/* 同一组筛选里的靠右项（如「已结算」）：推到该行最右侧 */
.dr-text-links .dr-text-link-right {
    margin-left: auto;
}

.dr-text-link {
    position: relative;
    font-size: 14px;
    color: #666666;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color .3s, opacity .15s;
    -webkit-tap-highlight-color: transparent;
}

.dr-text-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: #111111;
    transition: width .25s;
}

.dr-text-link:hover { color: #111111; }
.dr-text-link:hover::after { width: 100%; }
.dr-text-link:active { opacity: .55; }
/* 选中：回到黑色并加粗，下划线常驻 */
.dr-text-link.active { color: #111111; font-weight: 600; }
.dr-text-link.active::after { width: 100%; }

@media (max-width: 768px) {
    .dr-text-filter { gap: 10px 14px; padding: 0; margin: 0 0 20px; }
    .dr-text-links { gap: 18px; }
    .dr-text-link { font-size: 13px; }
}

/* ==========================================================
   个人收藏（member_favorites.html）
   与「草稿箱 / 已发布」页保持一致：灰底背景 + 顶部切换标签 + 白框容器
   收藏卡片沿用原有 .mc-fav-card 样式，不做改动
   ========================================================== */

/* 灰底背景（与草稿页同一色值） */
body.mc-page-favorites,
body.mc-page-favorites .right-content {
    background: #f3f5f7;
}

/* 第一行：比赛 / 推荐 / 经验 切换标签（沿用草稿页标签规格） */
body.mc-page-favorites .mc-order-bar {
    max-width: 800px;
    margin: 0 0 15px;
}

body.mc-page-favorites .mc-order-tab {
    min-width: 80px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
}

body.mc-page-favorites .mc-order-tab.active {
    font-size: 15px;
    font-weight: 600;
}

/* 列表区：与草稿页第三行一致，取消白色外框，收藏卡片直接铺在灰底上 */
body.mc-page-favorites .mc-block {
    max-width: 800px;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    animation: none;
}

/* 空态提示：加白色卡片框，避免在灰底上「裸奔」（与草稿页无记录提示同处理） */
body.mc-page-favorites .mc-empty {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
}

/* 灰底上给卡片一层轻投影，保持与草稿页卡片同等层次（卡片本身样式不变） */
body.mc-page-favorites .mc-fav-card {
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
}

/* 手机端：三个标签一行排开，不换行 */
@media (max-width: 768px) {
    body.mc-page-favorites .mc-order-bar {
        flex-wrap: nowrap;
        gap: 8px;
    }
    body.mc-page-favorites .mc-order-tabs {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
    }
    body.mc-page-favorites .mc-order-tab {
        min-width: 72px;
        padding: 10px 14px;
        font-size: 14px;
    }
}

/* ============ 账户设置中心（member_account.html） ============ */
/* 参考设置中心设计：灰底白卡分组，行式布局 + 右侧箭头 / 开关 / 分段控件 */

/* 账户设置中心：页面统一灰底，取消白色外框，分组白卡直接铺在灰底上 */
body.mc-page-account .mc-block {
    max-width: 800px;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.mc-set-card {
    background: #fff;
    border: 0.8px solid #f0f1f3;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 14px;
}

/* 会员标签：按会员档配色（普通会员灰 / 高级会员蓝 / 超级会员金）
   账户设置中心：统一去掉边线（各档位都不带 border），整体上移 5px（8px -> 3px） */
body.mc-page-account .mc-level-badge.level-normal {
    background: #f1f3f7;
    color: #6b7280;
    border: none;
}
body.mc-page-account .mc-level-badge.level-pro {
    background: rgba(0, 87, 255, .10);
    color: #0057ff;
    border: none;
}
body.mc-page-account .mc-level-badge.level-super {
    background: linear-gradient(135deg, #d4a017, #f0c24b);
    color: #fff;
    border: none;
}
body.mc-page-account .mc-level-badge {
    border: none;
    margin-top: 3px;
}

.mc-set-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 16px;
    font-size: 15px;
    color: #222222;
    cursor: pointer;
    text-decoration: none;
}

.mc-set-row + .mc-set-row {
    border-top: 0.8px solid #f2f3f5;
}

.mc-set-row:active {
    background: #f7f8fa;
}

.mc-set-label {
    flex: 0 0 auto;
}

/* 右侧说明文字 / 数值：灰色小字，占满剩余空间并右对齐（保证箭头统一贴最右） */
.mc-set-value {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    color: #9ca3af;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 数值型内容（如问问分）：黑色加粗 */
.mc-set-value.is-strong {
    color: #222222;
    font-weight: 600;
    font-size: 15px;
}

/* 认证手机：手机号固定灰色显示（与右侧说明文字同色） */
.mc-set-value.is-mobile {
    color: #9ca3af;
    font-weight: 400;
    font-size: 13px;
}

/* 行图标：只保留图标本身，去掉灰色底块 */
.mc-set-ic {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: transparent;
    color: #222222;
    font-size: 17px;
}

/* 右箭头：无右侧文字的行也能统一贴到最右 */
.mc-set-arrow {
    flex: 0 0 auto;
    margin-left: auto;
    color: #c9ced6;
    font-size: 14px;
}

/* 分组标题文字：16px 黑色加粗（会员类型行） */
.mc-set-label-strong {
    font-size: 16px;
    font-weight: 700;
    color: #222222;
}

/* 黑色胶囊按钮（套餐管理） */
.mc-set-btn {
    margin-left: auto;
    border: none;
    background: #222222;
    color: #fff;
    border-radius: 18px;
    padding: 7px 16px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

/* 用户信息卡（点击进资料管理） */
.mc-set-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 16px;
    cursor: pointer;
}

.mc-set-user-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mc-set-user .mc-avatar {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    margin: 0 0 0 5px;  /* 覆盖通用 .mc-avatar 的底部外边距；整体右移 5px */
    font-size: 24px;
}

.mc-set-user .mc-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.mc-set-user-name {
    font-size: 18px;
    font-weight: 700;
    color: #222222;
    margin-bottom: 6px;
}

/* 同步行：紧跟用户卡下方的浅色条 */
.mc-set-sync {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 13px;
    color: #666666;
    margin-bottom: 14px;
}

.mc-sync-ok {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #22a06b;
    font-weight: 600;
}

/* 分段控件（主题：系统 / 浅色 / 深色） */
.mc-seg {
    margin-left: auto;
    display: flex;
    background: #f2f3f5;
    border-radius: 10px;
    padding: 3px;
}

.mc-seg button {
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #666666;
    cursor: pointer;
}

.mc-seg button.active {
    background: #fff;
    color: #222222;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 纯 CSS 开关（消息通知设置） */
.mc-switch {
    margin-left: auto;
    flex: 0 0 auto;
}

.mc-switch input {
    display: none;
}

.mc-switch-core {
    display: block;
    width: 44px;
    height: 26px;
    border-radius: 13px;
    background: #e5e7eb;
    position: relative;
    transition: background 0.2s;
    cursor: pointer;
}

.mc-switch-core::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: left 0.2s;
}

.mc-switch input:checked + .mc-switch-core {
    background: #22a06b;
}

.mc-switch input:checked + .mc-switch-core::after {
    left: 20px;
}

/* 退出登录：整行红字居中 */
.mc-set-logout {
    justify-content: center;
    color: #e5484d;
    font-weight: 600;
}

.mc-set-logout .layui-icon {
    font-size: 17px;
}

@media (max-width: 768px) {
    .mc-set-row {
        min-height: 54px;
        padding: 0 14px;
        font-size: 14px;
    }

    /* 手机端：数值不再限宽，占满剩余空间以保证紧贴右侧箭头 */
    .mc-set-value {
        max-width: none;
    }

    .mc-set-user-name {
        font-size: 17px;
    }
}

/* ============ 专家设置页（member_expert.html） ============ */
/* 版式沿用账户设置页（body 同时带 mc-page-settings 与 mc-page-expert）：
   灰底 + 白卡表单；标题副标题同样隐藏，只保留页面顶部的「专家设置」标题 */

/* 平台认证：认证为「是」时显示红色胶囊标签「认证专家」（胶囊形，无外框） */
.mc-expert-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: #e5484d;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
}

/* 仅展示标签的行：去掉输入框的灰色外框与灰底，标签直接贴在行内。
   标签可能有多个并换行 → 允许折行，间距交给 gap（避免子元素 margin 造成视觉不居中） */
.mc-input-box.mc-input-tagbox {
    height: auto;
    padding: 0;
    border: none;
    background: transparent;
    flex-wrap: wrap;
    gap: 8px;
}

/* 擅长联赛（只读）：浅灰底方角标签，区别于红色的「认证专家」胶囊标签
   间距由父级 gap 提供，自身不带 margin，标签换行时整体仍与标题垂直居中 */
.mc-league-tag {
    display: inline-block;
    margin: 0;
    padding: 3px 10px;
    border-radius: 4px;
    background: #f1f3f6;
    color: #4b5563;
    font-size: 13px;
}

/* 擅长联赛（只读）：无快照数据时的占位文字 */
.mc-league-none {
    font-size: 13px;
    color: #9ca3af;
}

/* 专家称号：平台设置，前台只读展示；有值时为灰色胶囊标签 */
.mc-expert-title {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.6;
}

/* 多行输入 / 多选芯片：行内顶部对齐（默认垂直居中会挤压内容） */
.mc-form-row-top {
    align-items: flex-start;
}

.mc-form-row-top .mc-form-label {
    padding-top: 11px;
}

.mc-input-area {
    height: auto;
    padding: 10px 12px;
    align-items: stretch;
}

.mc-input-area textarea {
    width: 100%;
    min-height: 120px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    line-height: 1.6;
    color: #111827;
    resize: vertical;
}

/* 擅长联赛：多选芯片 */
.mc-chip-wrap {
    height: auto;
    padding: 10px 0 2px;
    background: transparent;
    border: none;
}

.mc-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mc-chip {
    padding: 6px 14px;
    border-radius: 999px;
    border: 0.8px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    font-size: 13px;
    cursor: pointer;
    transition: all .15s ease;
}

/* 专家称号（我的账户首页）：与会员标签完全同款——26px 高 / 12px 内距 / 11px 字 / 胶囊 / 灰底灰字无边框 */
.mc-hero-info .mc-expert-title.is-gray {
    height: 26px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    background: #e5e7eb;
    border: none;
    color: #6b7280;
}

/* 头像底部「认证专家」标签：与账户设置页头像「更换」按钮同款（贴底居中、胶囊、白边），红色 / 无图标 / 10px */
.mc-avatar-badge {
    position: absolute;
    bottom: 0;                /* 与头像图片底边对齐（不再向下溢出） */
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 16px);
    height: 20px;
    padding: 0 2px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #e5484d;
    border: 2px solid #f5f7fa;   /* 外框取横幅卡底色，与背景融合 */
    color: #ffffff;
    font-size: 9px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
    pointer-events: none;   /* 不拦截头像的点击放大 */
    z-index: 2;
}

/* 擅长联赛：选择上限提示，独占下一排显示（不与标签并排） */
.mc-input-box.mc-chip-wrap {
    flex-wrap: wrap;
}

.mc-input-box.mc-chip-wrap .mc-chip-group {
    flex: 0 0 100%;
}

.mc-chip-tip {
    flex: 0 0 100%;
    margin: 8px 0 0;
    font-size: 12px;
    color: #9ca3af;
}

/* 擅长联赛：选中态为淡蓝底标签（未选中为白底浅灰边） */
.mc-chip.active {
    background: #f0f6ff;
    border-color: #94c5fd;
    color: #6b7280;
    font-weight: 600;
}

/* 粉丝数卡片：独立白框（与下方资料表单卡分开），label 左 + 大数字右，下方灰字说明。
   注意：本页 body 带 mc-page-settings，会命中「.mc-card-plain 拉平为透明无边框」的通用规则，
   因此这里用 body.mc-page-expert 提高优先级，保证粉丝数仍是独立白框。 */
body.mc-page-expert .mc-card-plain.mc-fans-card {
    padding: 24px 20px;
    margin: 0 0 16px;
    border: 0.8px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(17, 24, 39, .04);
    /* 与下方「专家设置」白框同宽同起点（mc-page-settings 下 .mc-block 为 600px） */
    max-width: 600px;
    margin-left: 0;
    margin-right: 0;
}

.mc-fans-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mc-fans-label {
    font-size: 14px;
    font-weight: 600;
    color: #222222;
}

.mc-fans-num {
    font-size: 32px;
    font-weight: 700;
    color: #222222;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.mc-fans-tip {
    margin: 12px 0 0;
    font-size: 13px;
    color: #9ca3af;
}

@media (max-width: 768px) {
    .mc-chip {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* ============ 我的账户首页：头像点击放大 ============ */
.mc-avatar-zoom {
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.mc-avatar-zoom:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

/* ============ 账户设置中心：用户信息卡右侧说明文字 ============ */
/* 卡内左块（头像 + 昵称）固定不压缩，说明文字占满剩余空间右对齐、紧贴箭头 */
.mc-set-user .mc-set-user-main {
    flex: 0 0 auto;
}

.mc-set-user .mc-set-value {
    flex: 1 1 auto;
    min-width: 0;
}

/* ==========================================================================
   【由 Agent 完成】2026-09-30 专家收入 / 提现页（member_income.html / member_withdraw.html）
   结构：.mi-panel（白色面板）> .mi-summary（四格概况）；.mi-block > .mi-list > .mi-card
   ========================================================================== */

.mi-panel {
    background: #ffffff;
    border: 0.8px solid #f0f1f3;
    border-radius: 16px;
    padding: 22px 24px 18px;
    margin-bottom: 18px;
}

/* 四格概况：累计收入 / 可提现 / 冻结中 / 已提现 */
.mi-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.mi-sum-item {
    padding: 12px 14px;
    border-radius: 12px;
    background: #f7f8fa;
}

.mi-sum-item.mi-sum-main {
    background: rgba(34, 34, 34, 0.06);
}

.mi-sum-label {
    margin: 0 0 6px;
    font-size: 13px;
    color: #9ca3af;
}

.mi-sum-value {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #222222;
    line-height: 1.2;
}

.mi-sum-value.mi-sum-strong {
    font-size: 24px;
    color: #d1181c;
}

/* 概况底部：口径说明 + 提现按钮 */
.mi-sum-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 0.8px solid #f0f1f3;
}

.mi-sum-tip {
    font-size: 13px;
    color: #9ca3af;
    line-height: 1.6;
}

.mi-withdraw-btn {
    flex: none;
    padding: 10px 24px;
    letter-spacing: 1px;
}

/* 区块：标题沿用 mc-block-title，列表容器 */
.mi-block {
    background: #ffffff;
    border: 0.8px solid #f0f1f3;
    border-radius: 16px;
    padding: 20px 24px 24px;
    margin-bottom: 18px;
}

.mi-list {
    margin-top: 10px;
}

/* 列表卡片：左 标题/说明/时间，右 金额/状态 */
.mi-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f7f8fa;
}

.mi-card + .mi-card { margin-top: 10px; }

.mi-card-left { min-width: 0; }

.mi-card-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: #222222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mi-card-sub {
    margin: 0 0 4px;
    font-size: 13px;
    color: #6b7280;
}

.mi-card-time {
    margin: 0;
    font-size: 12px;
    color: #9ca3af;
}

.mi-card-right {
    flex: none;
    text-align: right;
}

.mi-card-amount {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: #d1181c;
}

.mi-card-platform {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #9ca3af;
}

/* 来源标签：历史补录 / 手工调整 */
.mi-tag {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
}

.mi-tag-backfill { color: #b45309; background: rgba(245, 158, 11, 0.14); }
.mi-tag-adjust   { color: #2563eb; background: rgba(37, 99, 235, 0.12); }

/* ===== 提现页：可提现金额区 ===== */
.mi-avail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.mi-avail-value {
    margin: 4px 0 0;
    font-size: 32px;
    font-weight: 700;
    color: #d1181c;
    line-height: 1.1;
}

.mi-avail-side { text-align: right; }

.mi-avail-line {
    margin: 0 0 4px;
    font-size: 13px;
    color: #6b7280;
}

/* 表单：快捷金额 / 渠道按钮（与充值页金额卡风格一致） */
.mi-form-card { margin-top: 10px; }

.mi-quick-row,
.mi-channel-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1;
}

.mi-quick,
.mi-channel {
    min-width: 76px;
    padding: 9px 14px;
    border: 0.8px solid #dddddd;
    border-radius: 10px;
    background: #ffffff;
    color: #333333;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.22s ease;
}

.mi-quick:hover,
.mi-channel:hover { border-color: #222222; color: #222222; }

.mi-channel.active {
    background: #222222;
    border-color: #222222;
    color: #ffffff;
    font-weight: 600;
}

.mi-amount-input { font-size: 16px; font-weight: 600; }

/* ==========================================================================
   手机端（≤768px）：概况两列、卡片纵向堆叠、按钮组换行铺满
   ========================================================================== */
@media (max-width: 768px) {
    .mi-panel,
    .mi-block {
        padding: 16px 14px 18px;
        border-radius: 14px;
    }

    .mi-summary {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .mi-sum-item { padding: 10px 12px; }
    .mi-sum-value { font-size: 18px; }
    .mi-sum-value.mi-sum-strong { font-size: 21px; }

    .mi-sum-foot {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .mi-sum-tip { font-size: 12px; }
    .mi-withdraw-btn { width: 100%; padding: 12px 0; }

    .mi-avail { flex-direction: column; align-items: flex-start; gap: 10px; }
    .mi-avail-value { font-size: 28px; }
    .mi-avail-side { text-align: left; }

    .mi-card {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .mi-card-right { text-align: left; }
    .mi-card-title { white-space: normal; }

    .mi-quick,
    .mi-channel {
        flex: 1 1 calc(33.33% - 10px);
        min-width: 0;
        padding: 10px 0;
        text-align: center;
    }
}

/* ==========================================================================
   【由 Agent 完成】2026-09-30 我的收入卡片（个人中心概览页）
   位置：发布文章推荐按钮下方；样式：灰色边框 + 白底圆角卡
   内容：收入余额（大字）+ 可提现 / 冻结中 / 累计收入 三列，点击进收入页
   ========================================================================== */
.mc-income-card {
    margin-top: 12px;
    padding: 16px 18px 14px;
    background: #ffffff;
    /* 【由 Agent 完成】2026-09-30 边框灰色调浅：#e5e7eb → #f0f1f3 */
    border: 0.8px solid #f0f1f3;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mc-income-card:hover {
    border-color: #e5e7eb;
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.06);
}

.mc-income-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mc-income-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #222222;
}

.mc-income-title i { font-size: 15px; color: #222222; }   /* 图标黑色 */

.mc-income-more { font-size: 12px; color: #9ca3af; text-decoration: none; }
.mc-income-more:hover { color: #0f9d8f; }

/* 【由 Agent 完成】2026-09-30 已取消卡片内「可提现 / 冻结中 / 累计收入」三个灰底小格，
   只保留收入余额主值，故下方留白收紧 */
.mc-income-amount {
    margin: 8px 0 2px;
    font-size: 24px;
    font-weight: 700;
    color: #222222;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .mc-income-card { padding: 14px 14px 12px; border-radius: 12px; }
    .mc-income-amount { font-size: 21px; margin: 6px 0 2px; }
}

@media (min-width: 769px) {
    .mc-income-card { max-width: 300px; }   /* 与上方发布按钮同宽，保持纵向对齐 */
}

/* ==========================================================================
   【由 Agent 完成】2026-09-30 我的收入页重排版（member_income.html）
   概况区：左「可提现余额」主值 + 提现按钮，右三格（累计收入 / 提现中 / 已提现），
           底部一条口径说明；明细区：改为列表行（图标 + 标题/摘要/时间 + 金额）
   注：提现页自 2026-09-30 起与本区块同款（灰底 + 同款概况区 / 记录列表行）
   ========================================================================== */
.mi-balance-panel { padding: 24px 26px 18px; }

.mi-balance {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.mi-balance-main { min-width: 220px; }

.mi-balance-label {
    margin: 0 0 6px;
    font-size: 13px;
    color: #9ca3af;
}

/* 【由 Agent 完成】2026-09-30 「可提现余额」右侧「专家 LVx」标签
   —— 2026-10-01 按用户要求：背景 #f0f8fe、无边框、文字 #326bfb */
.mi-expert-tag {
    display: inline-block;
    margin-left: 8px;
    /* 【由 Agent 完成】2026-10-01 上下留白减少 3px：上下内距 2px → 1px、行高 16px → 15px
       （整体高度 20px → 17px） */
    padding: 1px 8px;
    font-size: 10px;
    line-height: 15px;
    vertical-align: 1px;
    color: #326bfb;
    background: #f0f8fe;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    white-space: nowrap;
}

.mi-balance-value {
    margin: 0;
    font-size: 34px;
    /* 【由 Agent 完成】2026-09-30 可提现余额：蓝色加粗（我的收入页 / 申请提现页同款）
       —— 2026-09-30 由红色 #ef4444 改为蓝色 #1677ff
       —— 2026-10-01 我的收入页 / 申请提现页统一改为蓝色 #326bfb */
    font-weight: 800;
    color: #326bfb;
    line-height: 1.1;
    letter-spacing: 0.5px;
}


/* 口径说明末尾「已提现 ￥N」：蓝色、不加粗 */
.mi-withdrawn {
    margin-left: 6px;
    /* 【由 Agent 完成】2026-10-01 「累计已提现 ￥N」改蓝色 #326bfb（我的收入 / 申请提现同色） */
    color: #326bfb;
    font-weight: 400;
}

.mi-balance-sub {
    margin: 8px 0 0;
    font-size: 13px;
    color: #9ca3af;
}

.mi-withdraw-btn {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 26px;
    letter-spacing: 1px;
}

/* 右侧三格：浅灰底小卡 */
.mi-balance-side {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.mi-balance-cell {
    min-width: 118px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #f7f8fa;
}

/* 【由 Agent 完成】2026-10-01 我的收入页概况两格配色：
   第 1 格「累计收入」灰色底 #f7f8fa、无边框；
   第 2 格「提现中 冻结」底 #fff6e5、无边框 */
body.mc-page-income .mi-balance-cell:nth-child(1) {
    background: #f7f8fa;
    border: none;
}

body.mc-page-income .mi-balance-cell:nth-child(2) {
    background: #fff6e5;
    border: none;
}

/* 【由 Agent 完成】2026-10-01 申请提现页：概况第 2 格「提现中 冻结」背景 #fff6e5
   （与我的收入页同色，无边框） */
body.mc-page-withdraw .mi-balance-cell:nth-child(2) {
    background: #fff6e5;
    border: none;
}

.mi-balance-num {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #222222;
    line-height: 1.2;
}

.mi-balance-text {
    margin: 4px 0 0;
    font-size: 12px;
    color: #9ca3af;
}

/* 口径说明条 */
.mi-note {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 0.8px solid #f0f1f3;
    font-size: 12.5px;
    color: #9ca3af;
    line-height: 1.6;
}

/* 明细标题行：标题 + 笔数 */
.mi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mi-head .mc-block-title { margin-bottom: 0; }
.mi-head-count { font-size: 13px; color: #9ca3af; }

/* 明细列表行 */
.mi-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 0.8px solid #f3f4f6;
}

.mi-row:last-child { border-bottom: none; }

.mi-row-ic {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #6b7280;
}

.mi-row-main { flex: 1; min-width: 0; }

.mi-row-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #222222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mi-row-sub {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: #9ca3af;
}

.mi-row-time {
    margin: 2px 0 0;
    font-size: 12px;
    color: #c0c4cc;
}

.mi-row-right { flex: none; text-align: right; }

.mi-row-amount {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: #222222;
}

.mi-row-platform {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: #9ca3af;
}

@media (max-width: 768px) {
    .mi-balance-panel { padding: 18px 16px 14px; }
    .mi-balance { gap: 16px; }
    .mi-balance-value { font-size: 28px; }
    .mi-balance-side { width: 100%; }
    .mi-balance-cell { flex: 1; min-width: 0; padding: 10px 12px; }
    .mi-balance-num { font-size: 16px; }
    .mi-row { gap: 10px; padding: 12px 0; }
    .mi-row-ic { width: 36px; height: 36px; font-size: 16px; }
    .mi-row-title { font-size: 14px; white-space: normal; }
    .mi-row-amount { font-size: 16px; }
}

/* ==========================================================================
   【由 Agent 完成】2026-09-30 申请提现页重排版（member_withdraw.html）
   与「我的收入」页同款：页面浅灰底 + 白框卡片
     · 可提现区：复用 .mi-balance-panel（左主值 + 右三格 + 口径说明）
     · 提现申请：白框内直接用表单行（去掉内层白框，避免框套框）
     · 提现记录：复用 .mi-row 列表行（图标 + 标题/摘要/时间 + 金额/状态）
   ========================================================================== */

/* 表单区：不再套内层白框（外层 .mi-block 已是白框） */
.mi-form-card { margin-top: 12px; }

/* 最后一行表单不落下边线，收尾更干净 */
body.mc-page-withdraw .mc-form-row:last-of-type { border-bottom: none; }

/* 记录行右侧状态标签：跟在金额下方 */
.mi-row-status {
    display: block;
    margin-top: 4px;
}

/* 手机端：表单改为上下排布，提交按钮铺满
   注意：列向 flex 下 .mc-input-box / 按钮行的 flex:1（basis 0）会让高度塌陷（输入框只剩 22px），
   故显式改为 flex:none + width:100%，让 height:42px / 按钮自身高度生效。 */
@media (max-width: 768px) {
    body.mc-page-withdraw .mc-form-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 14px 0;
    }
    body.mc-page-withdraw .mc-form-label { width: auto; }
    body.mc-page-withdraw .mc-input-box,
    body.mc-page-withdraw .mi-quick-row,
    body.mc-page-withdraw .mi-channel-row {
        flex: none;
        width: 100%;
    }
    /* 快捷金额 4 个按钮一行均分（原 33.33% 会折成两行，行高过高） */
    body.mc-page-withdraw .mi-quick,
    body.mc-page-withdraw .mi-channel {
        flex: 1 1 calc(25% - 8px);
        min-width: 0;
        padding: 10px 0;
    }
    body.mc-page-withdraw .mc-form-actions { padding-top: 20px; }
    body.mc-page-withdraw .mc-form-actions .mc-btn { width: 100%; }
}

/* ==========================================================================
   【由 Agent 完成】2026-09-30 数据统计页（member_stat.html）
   专家每日统计快照（fc_expert_daily_stat）：日期选择 + 分区表格
   与「订单记录 / 充值记录」同宽（最大 800px、靠左），白框卡片铺在浅灰底上
   ========================================================================== */
body.mc-page-stat,
body.mc-page-stat .right-content {
    background: #f3f5f7;
}

body.mc-page-stat .mc-block {
    max-width: 800px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 18px;
}

/* 日期选择行 */
.ms-date-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.ms-date-form select {
    height: 34px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: #333333;
    font-size: 13px;
    font-family: inherit;
}
.ms-date-tip {
    font-size: 12px;
    color: #9ca3af;
}

/* 分区：说明文字 + 键值行 / 明细表 */
.ms-group .mc-block-title {
    margin-bottom: 8px;
}
.ms-note {
    margin: 0 0 12px;
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.6;
}

.ms-rows {
    border-top: 1px solid #f0f1f3;
}
.ms-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0 3px;
}
.ms-row-name {
    font-size: 13px;
    color: #6b7280;
}
.ms-row-val {
    font-size: 14px;
    font-weight: 600;
    color: #222222;
    white-space: nowrap;
    text-align: right;      /* 数值统一右对齐（手机端亦保持靠右） */
}
.ms-row-desc {
    padding: 0 0 9px;
    border-bottom: 1px solid #f6f7f9;
    font-size: 12px;
    color: #b0b6c0;
    line-height: 1.5;
}

.ms-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ms-table th,
.ms-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f1f3;
    text-align: left;
    white-space: nowrap;
}
.ms-table th {
    color: #6b7280;
    font-weight: 500;
    background: #fafbfc;
}
.ms-table td {
    color: #333333;
}
.ms-table tbody tr:last-child td {
    border-bottom: none;
}

/* 手机端：名称左、数值右对齐（同一行），表格横向滑动，卡片留白收紧 */
@media (max-width: 768px) {
    body.mc-page-stat .mc-block {
        padding: 18px 16px;
        border-radius: 14px;
    }

    body.mc-page-stat .ms-date-form {
        gap: 8px;
    }
    body.mc-page-stat .ms-date-form select {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }

    /* 键值行：名称在上行左侧（可换行），数值固定靠右，右对齐 */
    body.mc-page-stat .ms-row {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 0 3px;
    }
    body.mc-page-stat .ms-row-name {
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
        overflow-wrap: anywhere;
    }
    body.mc-page-stat .ms-row-val {
        flex: 0 0 auto;
        max-width: 45%;
        text-align: right;
        overflow-wrap: anywhere;
    }

    /* 长序列值（如「结果序列」的中/黑/走串）：独占一行、不折行，横向滑动查看 */
    body.mc-page-stat .ms-row {
        flex-wrap: wrap;
    }
    body.mc-page-stat .ms-row-val.ms-val-scroll {
        flex: 1 1 100%;
        max-width: none;
        white-space: nowrap;
        overflow-x: auto;
        text-align: left;
        font-size: 13px;
        padding: 2px 0 1px;
        -webkit-overflow-scrolling: touch;
    }

    body.mc-page-stat .ms-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 五六七九项表格：手机端紧凑排版
       —— 字号收紧到 12px、单元格左右留白减半；首列（区间/联赛等名称）左对齐，
          其余数值列统一右对齐，消除列间大片空隙、数据纵向对齐更整齐 */
    /* 列宽平均分配：table-layout: fixed + 全宽，各列等分卡片内容宽；
       单元格内容过长时换行（取消 nowrap），避免等宽列内溢出重叠 */
    body.mc-page-stat .ms-table {
        font-size: 12px;
        table-layout: fixed;
        width: 100%;
        min-width: 100%;
    }
    body.mc-page-stat .ms-table th,
    body.mc-page-stat .ms-table td {
        padding: 9px 6px;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    body.mc-page-stat .ms-table th:not(:first-child),
    body.mc-page-stat .ms-table td:not(:first-child) {
        text-align: right;
    }
    body.mc-page-stat .ms-table th:last-child,
    body.mc-page-stat .ms-table td:last-child {
        padding-right: 2px;
    }
}


/* ==========================================================================
   【由 Agent 完成】2026-10-01 我的账户页「最近订单」列表排列（body.mc-page-overview）
   1) 图标与标题上边缘对齐
   2) 时间放在标题下方；3) 金额放在时间下方（电脑 / 平板 / 手机端一致）
   4) 标题、时间、金额三者左边缘对齐
   5) 「已支付」标签淡绿色
   ========================================================================== */
body.mc-page-overview .mc-order-item {
    align-items: flex-start;
}

body.mc-page-overview .mc-order-ic {
    align-self: flex-start;
    margin-top: 0;
}

/* 信息区竖排：标题 → 时间 → 金额，统一左对齐 */
body.mc-page-overview .mc-order-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

body.mc-page-overview .mc-order-name {
    line-height: 14px;
    margin-bottom: 0;
}

body.mc-page-overview .mc-order-time {
    line-height: 18px;
    /* 【由 Agent 完成】2026-10-01 电脑 / 平板端：时间下移 5px（金额紧随其后） */
    margin-top: 5px;
}

body.mc-page-overview .mc-order-price {
    font-size: 14px;
    line-height: 18px;
}

/* 状态标签垂直居中，保持与列表行整体协调 */
body.mc-page-overview .mc-status {
    align-self: center;
}

/* 「已支付」淡绿色（与订单记录 / 充值记录同款） */
body.mc-page-overview .mc-status.paid {
    color: #40ae2a;
    background: rgba(64, 174, 42, 0.12);
}

@media (max-width: 768px) {
    /* 手机端：info 被提升为行内子项，时间 / 金额换行后已在标题左边缘，无需额外缩进 */
    body.mc-page-overview .mc-order-item {
        align-items: flex-start;
        row-gap: 2px;
    }

    /* 信息区占满图标右侧整行 → 标题独占一行，状态标签换行到下一行 */
    body.mc-page-overview .mc-order-info {
        flex: 1 1 calc(100% - 48px);
        width: auto;
        min-width: 0;
    }

    body.mc-page-overview .mc-order-name {
        line-height: 14px;
        /* 【由 Agent 完成】2026-10-01 手机端标题左滑显示完整内容（不截断、不省略号）
           标题框限宽为信息区宽度，超长部分在框内横向滑动查看 */
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        text-overflow: clip;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    /* 手机端标题左滑：隐藏滚动条 */
    body.mc-page-overview .mc-order-name::-webkit-scrollbar {
        display: none;
    }

    /* 时间下移 5px（金额紧随其后同步下移） */
    body.mc-page-overview .mc-order-time {
        margin-top: 5px;
    }

    body.mc-page-overview .mc-order-price {
        font-size: 14px;
    }

    /* 【由 Agent 完成】2026-10-01 手机端：状态标签放到标题下一排（时间行）右侧、右对齐
       （用绝对定位，不影响标题 / 时间 / 金额的竖排位置） */
    body.mc-page-overview .mc-order-item {
        position: relative;
    }

    body.mc-page-overview .mc-status {
        position: absolute;
        right: 0;
        top: 38px;   /* 时间行居中位置再下移 10px（28 + 10） */
        align-self: auto;
        margin: 0;
    }
}