/* ==========================================================
   全站统一亮色主题（青蓝主色，浅底白卡）
   在各页面自身样式之后引入
   ========================================================== */
:root {
    --primary-color: #0891b2;
    --secondary-color: #0e7490;
    --accent-color: #f43f5e;
    --success-color: #10b981;
    --bg-main: #f5f7fa;
    --bg-card: #ffffff;
    --text-dark: #1e293b;
    --text-light: #64748b;
    --border-color: #e2e8f0;
    --gradient: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    --shadow: 0 4px 18px rgba(15, 23, 42, .08);
    --bg-module-1: #f1f5f9;
    --bg-module-2: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    --bg-module-3: #f8fafc;
    --bg-module-4: linear-gradient(180deg, #ffffff 0%, #e0f2fe 100%);
}

html, body {
    background: var(--bg-main) !important;
    color: var(--text-dark) !important;
}

/* 全局链接色 */
a { color: #0891b2; }
a:hover { color: #0e7490; }

/* 首页 Hero / 介绍区 */
.hero {
    background: linear-gradient(180deg, #e0f2fe 0%, #f5f7fa 100%) !important;
}
.hero h1 { color: #0e7490 !important; text-shadow: none !important; }
.hero p { color: #475569 !important; }

.business-intro { background: transparent !important; }
/* 整卡一片连续渐变：白 -> 淡青，左右自然融合 */
.business-box {
    background: linear-gradient(160deg, #ffffff 0%, #f4fdfc 45%, #e3f3fc 100%) !important;
    border: 1px solid #e3edf5 !important;
    border-radius: 18px;
    padding: 44px 48px;
    box-shadow: 0 6px 22px rgba(15, 23, 42, .05);
}
.business-text h3 { color: #0e7490 !important; }
.business-text p { color: #475569 !important; }
.service-item { background: #ffffff !important; color: #0e7490 !important; border: 1px solid #bfeaf5 !important; box-shadow: 0 2px 8px rgba(8, 145, 178, .08); }

/* 右侧视觉：无独立色块，浮在整片渐变上 */
.business-visual {
    position: relative;
    flex: 0 0 340px;
    min-height: 260px;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: transparent;
    border: none;
}
.business-visual i {
    font-size: 92px;
    color: rgba(8, 145, 178, .82);
    text-shadow: 0 12px 30px rgba(8, 145, 178, .22);
    z-index: 1;
}
.business-visual .visual-caption {
    z-index: 1;
    font-size: .85rem;
    letter-spacing: 2px;
    color: #0e7490;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(6px);
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid rgba(8, 145, 178, .16);
    box-shadow: 0 4px 14px rgba(8, 145, 178, .1);
}
.business-visual .blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.business-visual .b1 {
    width: 230px;
    height: 230px;
    left: -70px;
    top: -80px;
    background: radial-gradient(circle, rgba(103, 232, 249, .38), transparent 70%);
}
.business-visual .b2 {
    width: 280px;
    height: 280px;
    right: -90px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(8, 145, 178, .18), transparent 70%);
}
.business-visual .b3 {
    width: 100px;
    height: 100px;
    right: 30px;
    top: 24px;
    background: radial-gradient(circle, rgba(165, 243, 252, .55), transparent 70%);
}

/* 区块标题 */
.section-header h2 { color: var(--text-dark) !important; }
.section-header p { color: var(--text-light) !important; }

/* 各类卡片 -> 白底 */
.plan-card,
.standard-plan-card,
.featured-plan-card,
.hot-plan-item,
.hot-plans-sidebar,
.form-card,
.login-container,
.register-container,
.info-card,
.price-card,
.author-card,
.tips-card,
.step,
.upload-box,
.filter-bar,
.detail-main,
.detail-sidebar {
    background-color: #ffffff !important;
    border-color: var(--border-color) !important;
    color: var(--text-dark) !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .06) !important;
}

.card-body h4, .card-body h3,
.item-content h4,
.standard-plan-card h4,
.detail-main h1,
.detail-main h3,
.form-card h2,
.info-card h3,
.info-card h4,
.author-info h4,
.tips-card h4,
.price-card h3,
.login-container h1,
.register-container h1 {
    color: var(--text-dark) !important;
}

.card-body p, .item-content p, .detail-main p,
.tips-card ul li, .feature-list li,
.info-list dt, .author-info p, .price-desc {
    color: var(--text-light) !important;
}

#content, #content p, #content li, #content span, #content div {
    color: #334155 !important;
}

/* 顶部 Banner 区改为浅色 */
.list-banner,
.vip-banner,
.publish-banner,
.contact-banner {
    background: linear-gradient(160deg, #e0f2fe 0%, #f5f7fa 100%) !important;
    border-bottom: 1px solid var(--border-color);
}
.list-banner::after { display: none !important; }
.banner-title { color: #0e7490 !important; text-shadow: none !important; }
.banner-title span, .title-highlight { color: #0891b2 !important; }
.banner-sub { color: var(--text-light) !important; }

/* 表单控件 -> 白底 */
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea,
.filter-item select,
.filter-item input {
    background: #ffffff !important;
    color: var(--text-dark) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px;
    outline: none;
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder { color: #94a3b8 !important; }
.form-control:focus, input:focus, select:focus, textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, .12);
}
.form-label, .form-group label { color: #475569 !important; }

/* 按钮 */
.btn-outline {
    border: 2px solid var(--primary-color) !important;
    color: #0e7490 !important;
    background: #ffffff !important;
}
.btn-outline:hover { background: var(--primary-color) !important; color: #fff !important; }
.btn-primary {
    background: var(--gradient) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(8, 145, 178, .3);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(8, 145, 178, .4); }

/* 价格 */
.price, .item-price { color: #f43f5e !important; }
.p-num { color: #f43f5e; font-weight: 800; }
.price-note {
    color: #94a3b8;
    font-size: .8rem;
    margin-top: 8px;
    text-align: center;
}
.p-vip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.7;
    color: #8a5a00;
    background: linear-gradient(135deg, #fde68a, #fcd34d);
    vertical-align: middle;
    white-space: nowrap;
}
/* 深色缩略图上的价格标签保持白字 */
.featured-plan-card .price { display: flex; align-items: center; gap: 2px; }
.featured-plan-card .price .p-num { color: #fff; }
.featured-plan-card .price .p-vip {
    color: #fff;
    background: rgba(255, 255, 255, .25);
    margin-left: 4px;
}

/* 分页 */
.pagination { display: flex; gap: 8px; justify-content: center; margin: 10px 0 60px; flex-wrap: wrap; list-style: none; }
.pagination li { list-style: none; }
.pagination li a, .pagination li span {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    color: var(--text-light);
    font-size: .9rem;
}
.pagination li a:hover { color: #0891b2; border-color: #0891b2; }
.pagination li.active span { background: var(--gradient); color: #fff; border-color: transparent; font-weight: 700; }
.pagination li.disabled span { opacity: .45; }

/* 提示条 */
.notice-bar {
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    color: #0e7490;
    border-radius: 12px;
    padding: 12px 18px;
    font-size: .9rem;
    margin: 18px auto;
    max-width: 1200px;
}

/* 空状态 */
.empty-tip { text-align: center; color: #94a3b8; padding: 70px 0; }
.empty-tip i { font-size: 40px; display: block; margin-bottom: 12px; color: #cbd5e1; }

/* 表格 */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
    text-align: left; padding: 12px 14px; color: #475569; font-weight: 600;
    border-bottom: 1px solid var(--border-color); font-size: .9rem; background: #f8fafc;
}
.data-table td { padding: 13px 14px; border-bottom: 1px solid var(--border-color); color: #475569; font-size: .9rem; }
.data-table tr:hover td { background: #f0fdfa; }

/* 评论 */
.comment-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border-color); }
.comment-item .av {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: var(--gradient); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.comment-item .cmeta { font-size: .8rem; color: #94a3b8; margin-bottom: 4px; }
.comment-item .cmeta b { color: #334155; margin-right: 8px; font-size: .88rem; }
.comment-item .ctext { color: #475569; font-size: .92rem; }

/* 详情页信息列表 */
.info-list dd { color: var(--text-dark) !important; }

/* 详情页右栏：外层无背景，内部独立白色圆角卡片 */
.detail-sidebar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.detail-sidebar .price-card,
.detail-sidebar .info-card,
.detail-sidebar .tips-card,
.detail-sidebar .author-card {
    background-color: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    padding: 24px 26px !important;
    margin: 0 0 22px !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .06) !important;
}
.detail-sidebar .info-card h4,
.detail-sidebar .tips-card h4 {
    margin-bottom: 16px;
}
.detail-sidebar .info-list dt { color: #94a3b8 !important; font-weight: 400; }

@media (max-width: 900px) {
    .detail-sidebar { padding-top: 26px !important; }
}

/* 方案预览：单列全宽大图 */
.preview-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 18px;
}
.preview-item {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    cursor: zoom-in;
    background: #f8fafc;
    transition: box-shadow .2s;
}
.preview-item:hover { box-shadow: 0 6px 22px rgba(15, 23, 42, .1); }
.preview-item img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity .2s;
}
.preview-item:hover img { opacity: .94; }

/* 底部渐隐解锁提示 */
.preview-lock {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 300px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .88) 42%, #ffffff 82%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 20px 26px;
    pointer-events: none;
}
.preview-lock-inner {
    text-align: center;
    pointer-events: auto;
}
.preview-lock .lock-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #ecfeff;
    color: #0891b2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    border: 1px solid #a5f3fc;
}
.preview-lock p {
    color: #475569;
    font-size: .92rem;
    margin-bottom: 14px;
    line-height: 1.7;
}
.preview-lock p b { color: #0891b2; font-size: 1.05rem; }
.preview-lock .lock-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.preview-lock .lock-btn {
    display: inline-block;
    padding: 10px 26px;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #0891b2, #06b6d4);
    box-shadow: 0 6px 18px rgba(8, 145, 178, .25);
    transition: .2s;
}
.preview-lock .lock-btn:hover { filter: brightness(1.06); color: #fff; }
.preview-lock .lock-btn.ghost {
    background: #fff;
    color: #0891b2;
    border: 1px solid #a5f3fc;
    box-shadow: none;
}
.preview-lock .lock-btn.ghost:hover { background: #ecfeff; }
.preview-lock .lock-tip {
    display: block;
    margin-top: 10px;
    font-size: .78rem;
    color: #94a3b8;
}

@media (max-width: 768px) {
    .preview-lock { height: 250px; padding-bottom: 18px; }
    .preview-lock p { font-size: .85rem; }
}

/* CTA 区（保留青蓝亮色块） */
.cta-section {
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%) !important;
}
.cta-section h2, .cta-section p { color: #fff !important; }

/* 首页分类入口 */
.cate-tile {
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-dark) !important;
}
.cate-tile:hover { border-color: var(--primary-color) !important; box-shadow: 0 6px 18px rgba(8, 145, 178, .14) !important; }

@media (max-width: 768px) {
    .filter-bar { flex-direction: column; align-items: stretch; }
    .business-box { flex-direction: column !important; padding: 28px 22px; }
    .business-visual { flex: none; width: 100%; min-height: 200px; }
}

/* 会员套餐一行四列 */
.pricing-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: 1360px !important;
    gap: 20px !important;
}
@media (max-width: 1200px) {
    .pricing-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 680px) {
    .pricing-grid { grid-template-columns: 1fr !important; }
}