/* ========== 全局布局 ========== */
.content {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 15px !important;
}

/* ========== 卡片圆角 + 阴影 ========== */
.block {
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 20px !important;
    transition: box-shadow 0.3s ease;
}
.block:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* ========== 轮播图所在卡片 - 不裁切，单独处理圆角 ========== */
.block:first-child {
    overflow: hidden !important;
}
.block:not(:first-child) {
    overflow: hidden;
}
.slick-slider {
    border-radius: 12px !important;
}
.slick-list {
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* ========== 卡片标题栏 ========== */
.block-header-default {
    background: #ffffff !important;
    border-radius: 12px 12px 0 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
.block-title {
    font-weight: 700 !important;
    font-size: 15px !important;
}

/* ========== 按钮 ========== */
.btn {
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.25s ease !important;
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ========== 流量进度条 ========== */
.progress {
    border-radius: 10px !important;
    height: 20px !important;
    background-color: #e9ecef !important;
}
.progress-bar {
    border-radius: 10px !important;
    background-image: linear-gradient(90deg, #ff6b35, #f7453d) !important;
    background-size: unset !important;
    animation: none !important;
    transition: width 0.6s ease !important;
    box-shadow: 0 2px 6px rgba(247, 69, 61, 0.3) !important;
}
.progress-bar-striped {
    background-image: none !important;
    background-size: unset !important;
}
.progress-bar-animated {
    animation: none !important;
}

/* ========== 标签 ========== */
.badge {
    border-radius: 6px !important;
    font-weight: 500 !important;
    padding: 4px 10px !important;
}

/* ========== 侧边栏 ========== */
.nav-main a {
    border-radius: 8px !important;
    margin: 2px 8px !important;
    transition: all 0.2s ease !important;
}

/* ========== 顶部导航 ========== */
#page-header {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}

/* ========== 背景色 ========== */
#page-container {
    background-color: #f0f2f5 !important;
}

/* ========== 滚动条 ========== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

/* ========== 移动端 ========== */
@media (max-width: 768px) {
    .content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .block {
        border-radius: 10px !important;
        margin-bottom: 10px !important;
    }
    .slick-slider, .slick-list {
        border-radius: 10px !important;
    }
}

/* ========== 轮播指示点 - 覆盖 antd + slick 默认样式 ========== */
/* 容器定位（打赢 umi.css 的 .slick-slider.slick-dotted 和 antd 的 .ant-carousel） */
.ant-carousel .slick-dots,
.slick-slider.slick-dotted .slick-dots {
    position: absolute !important;
    bottom: 40px !important;
    height: auto !important;
    min-height: 10px !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 圆点样式（覆盖 antd 默认的 3px 横条为圆形） */
.ant-carousel .slick-dots li {
    width: 10px !important;
    height: 20px !important;
    margin: 0 5px !important;
    vertical-align: middle !important;
}
.ant-carousel .slick-dots li button {
    width: 10px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.4) !important;
    padding: 0 !important;
    opacity: 1 !important;
}
.ant-carousel .slick-dots li button:before {
    display: none !important;
}
.ant-carousel .slick-dots li.slick-active button {
    width: 10px !important;
    background: rgba(255, 255, 255, 0.95) !important;
}

/* ========== 捷径列表最后一项去掉底部横线 ========== */
.ofo-shortcuts-item:last-child {
    border-bottom: none !important;
}

/* ========== 轮播图切换时保持圆角 ========== */
.slick-list {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.slick-track {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ========== 轮播图动画期间强制圆角裁切 ========== */
.slick-slider {
    -webkit-clip-path: inset(0 round 12px) !important;
    clip-path: inset(0 round 12px) !important;
}

/* ========== 轮播容器强制圆角裁切（覆盖所有层级） ========== */
.ant-carousel,
.ant-carousel .slick-slider,
.ant-carousel .slick-list {
    -webkit-clip-path: inset(0 round 12px) !important;
    clip-path: inset(0 round 12px) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* ========== 付款周期选中状态优化 ========== */
.ofo-select {
    border-bottom: 1px solid #eee;
    padding: 16px 20px !important;
    margin: 0 !important;
}
.ofo-select:last-child {
    border-bottom: none !important;
    margin-bottom: 8px !important;
}
.ofo-select.active {
    border: 2px solid #1890ff !important;
    border-radius: 8px !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    background: rgba(24, 144, 255, 0.03) !important;
}



/* ========== 捷径项交互效果 ========== */
.ofo-shortcuts-item {
    transition: all 0.2s ease !important;
    border-left: 3px solid transparent !important;
}
.ofo-shortcuts-item:hover {
    background: #f0f7ff !important;
    border-left-color: #1890ff !important;
    padding-left: 22px !important;
}

/* ========== 轮播箭头美化 ========== */
.slick-prev, .slick-next {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.25) !important;
    z-index: 5 !important;
    transition: background 0.2s ease !important;
}
.slick-prev:hover, .slick-next:hover {
    background: rgba(0, 0, 0, 0.5) !important;
}
.slick-prev {
    left: 12px !important;
}
.slick-next {
    right: 12px !important;
}
.slick-prev:before, .slick-next:before {
    font-size: 18px !important;
    color: #fff !important;
    opacity: 1 !important;
}

/* ========== 标签美化 ========== */
.ant-tag {
    border-radius: 12px !important;
    padding: 2px 10px !important;
    font-size: 12px !important;
}

/* ========== 签到按钮移动端适配 ========== */
#checkin-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
}
@media (max-width: 768px) {
    #checkin-status {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    #checkin-btn {
        padding: 5px 12px !important;
        font-size: 12px !important;
    }
}

/* ========== 订阅抽屉下滑关闭优化 ========== */
.ant-drawer-bottom .ant-drawer-content {
    border-radius: 16px 16px 0 0 !important;
}
.ant-drawer-bottom .ant-drawer-body::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
    margin: 8px auto 12px;
}

/* ========== 捷径卡片底部多余间距 ========== */
.block-content.p-0 .mb-3:last-child {
    margin-bottom: 0 !important;
}


/* ========== 轮播图与下方卡片间距 ========== */
.content-full > .row.mb-3 {
    margin-bottom: 8px !important;
}
.content-full > .row.mb-3 .col-12.mb-sm-4 {
    margin-bottom: 0 !important;
}

/* ========== 顶部提示条与轮播图间距 ========== */
.content-full > .alert,
.content-full > [class*="alert"] {
    margin-bottom: 10px !important;
}

/* ========== 轮播图圆角 ========== */
.carousel-clip-wrap {
    border-radius: 12px !important;
    overflow: hidden !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
}









/* ========== 捷径卡片 Apple风格 v2 ========== */
.ofo-shortcuts-item {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 16px 20px !important;
    margin: 8px 12px !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative !important;
}
.ofo-shortcuts-item:hover {
    background: #f9fafb !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}
.ofo-shortcuts-item:active {
    transform: scale(0.99);
    background: #f5f5f7 !important;
}
.ofo-shortcuts-item > div:first-child {

    width: calc(100% - 60px) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #1d1d1f !important;
}
.ofo-shortcuts-item .description {
    width: calc(100% - 60px) !important;
    font-size: 13px !important;
    color: #86868b !important;
    margin-top: 4px !important;
    line-height: 1.4 !important;
}
.ofo-shortcuts-item i[class*="si-"] {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    float: none !important;
    font-size: 24px !important;
    width: 46px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
}
/* 图标配色 */
.ofo-shortcuts-item:nth-child(1) i[class*="si-"] {
    color: #007aff !important;
    background: #e8f2ff !important;
}
.ofo-shortcuts-item:nth-child(2) i[class*="si-"] {
    color: #ff9500 !important;
    background: #fff4e5 !important;
}
.ofo-shortcuts-item:nth-child(3) i[class*="si-"] {
    color: #af52de !important;
    background: #f5e9fa !important;
}
.ofo-shortcuts-item:nth-child(4) i[class*="si-"] {
    color: #32ade6 !important;
    background: #e5f5fc !important;
}

/* ========== 移动端适配 ========== */
@media (max-width: 768px) {
    .ofo-shortcuts-item {
        margin: 6px 10px !important;
        padding: 14px 16px !important;
    }
    .ofo-shortcuts-item > div:first-child {

        width: calc(100% - 52px) !important;
        font-size: 15px !important;
    }
    .ofo-shortcuts-item .description {
        width: calc(100% - 52px) !important;
        font-size: 12px !important;
    }
    .ofo-shortcuts-item i[class*="si-"] {
        width: 40px !important;
        height: 40px !important;
        right: 16px !important;
        font-size: 20px !important;
    }
    .ofo-shortcuts-item:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    }
}

/* ========== 捷径外层容器修复 ========== */
.block-content.p-0 {
    background: #ffffff !important;
    padding: 4px 0 8px 0 !important;
}
.block-content.p-0 > .justify-content-md-between {
    background: #ffffff !important;
}
.block-content.p-0 > .justify-content-md-between > .mb-3 {
    background: #ffffff !important;
    margin-bottom: 0 !important;
}


/* ========== 签到卡片简洁风格 ========== */
#checkin-card {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
#checkin-card .block-header {
    background: transparent !important;
    border: none !important;
    padding: 18px 20px 12px !important;
}
#checkin-card .block-title {
    color: #1d1d1f !important;
    font-size: 15px !important;
    font-weight: 400 !important;
}
#checkin-card #view-checkin-history {
    color: #007aff !important;
    font-weight: 500 !important;
}
#checkin-card .block-content {
    padding: 0 20px 20px !important;
}
#checkin-status {
    color: #1d1d1f !important;
    font-size: 14px !important;
}
#checkin-status span[style*="color: #52c41a"],
#checkin-status span[style*="color:#52c41a"] {
    color: #34c759 !important;
}
#checkin-status span[style*="color: #1890ff"],
#checkin-status span[style*="color:#1890ff"] {
    color: #007aff !important;
}
#checkin-status span[style*="color: #fa8c16"],
#checkin-status span[style*="color:#fa8c16"] {
    color: #ff9500 !important;
}
#checkin-btn {
    background: #007aff !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 24px !important;
    border-radius: 20px !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}
#checkin-btn:hover {
    background: #0066d6 !important;
}
#checkin-btn:disabled,
#checkin-btn.btn-secondary {
    background: #e5e5ea !important;
    color: #8e8e93 !important;
}
/* 里程碑进度 */
#checkin-streak {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid #f0f0f0 !important;
}
#checkin-streak > div:first-child > div {
    background: #f5f5f7 !important;
    border: 1px solid #e5e5ea !important;
    border-radius: 12px !important;
    padding: 10px 6px !important;
    text-align: center !important;
}
#checkin-streak > div:first-child > div > div:first-child {
    font-size: 20px !important;
}
#checkin-streak > div:first-child > div > div:last-child {
    font-size: 11px !important;
    color: #86868b !important;
    margin-top: 4px !important;
}
/* 已达成 */
#checkin-streak > div:first-child > div[style*="fff7e6"] {
    background: #fff8e6 !important;
    border-color: #ffd666 !important;
}
/* 未达成 */
#checkin-streak > div:first-child > div[style*="fafafa"] {
    opacity: 0.6 !important;
}
#checkin-streak > div:last-child {
    color: #86868b !important;
    font-size: 12px !important;
    margin-top: 10px !important;
}
/* 消息提示 */
#checkin-msg {
    border-radius: 8px !important;
}

/* ========== 签到移动端适配 ========== */
@media (max-width: 768px) {
    #checkin-card {
        border-radius: 14px !important;
    }
    #checkin-card .block-header {
        padding: 16px 16px 10px !important;
    }
    #checkin-card .block-content {
        padding: 0 16px 16px !important;
    }
    #checkin-status {
        font-size: 13px !important;
    }
    #checkin-btn {
        padding: 7px 20px !important;
        font-size: 13px !important;
    }
}






/* 隐藏我的订阅卡片里的邮箱 */
.block-rounded span[class*="tag"]:has(i.fa-user),
.block-rounded .ant-tag:has(.fa-user),
.block-rounded div:has(> i.fa-user):has(span:contains("@")) {
    display: none !important;
}

/* 隐藏订阅卡片邮箱 - 通过class */
[class*="tag___"] {
    display: none !important;
}