/* ========== 卡盟导航 - 前台样式 ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; background: #f5f7fa; color: #303133; line-height: 1.6; }
a { color: #409eff; text-decoration: none; transition: color 0.2s; }
a:hover { color: #66b1ff; }

/* 顶部广告区 */
.top-ad-area { background: #fff; padding: 10px 0; text-align: center; min-height: 20px; border-bottom: 1px solid #ebeef5; }
.top-ad-area .ad-item { display: inline-block; margin: 5px 10px; }
.top-ad-area .ad-item img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* 头部 */
.site-header { background: #fff; color: #303133; padding: 0; border-bottom: 1px solid #ebeef5; }
.header-inner { max-width: 1200px; margin: 0 auto; padding: 20px 20px 16px; display: flex; align-items: center; justify-content: space-between; }
.site-logo { font-size: 28px; font-weight: 700; color: #1a73e8; letter-spacing: 1px; }
.site-logo span { color: #ffd54f; }
.header-search { display: flex; align-items: center; }
.header-search input { width: 280px; padding: 8px 14px; border: 1px solid #dcdfe6; border-radius: 20px 0 0 20px; font-size: 14px; outline: none; }
.header-search button { padding: 8px 18px; background: #409eff; color: #fff; border: none; border-radius: 0 20px 20px 0; font-size: 14px; cursor: pointer; font-weight: 600; }
.header-search button:hover { background: #66b1ff; }
.header-links { display: flex; gap: 16px; align-items: center; }
.header-links a { color: #606266; font-size: 14px; }
.header-links a:hover { color: #409eff; }

/* 导航栏 */
.site-nav { background: #1a73e8; border-bottom: 1px solid #1565c0; }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; gap: 0; }
.nav-inner a { color: rgba(255,255,255,0.85); padding: 10px 18px; font-size: 14px; transition: all 0.2s; }
.nav-inner a:hover, .nav-inner a.active { color: #fff; background: rgba(255,255,255,0.1); }

/* 统计条 */
.stats-bar { background: #fff; border-bottom: 1px solid #ebeef5; }
.stats-inner { max-width: 1200px; margin: 0 auto; padding: 12px 20px; display: flex; gap: 30px; font-size: 13px; color: #909399; }
.stats-inner .stat-item span { color: #409eff; font-weight: 600; margin: 0 2px; }

/* 主内容区 */
.main-wrap { max-width: 1200px; margin: 20px auto; padding: 0 20px; display: flex; gap: 20px; }
.content-left { flex: 1; min-width: 0; }
.content-right { width: 280px; flex-shrink: 0; }

/* 卡片通用 */
.card { background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); margin-bottom: 20px; overflow: hidden; }
.card-header { padding: 14px 18px; border-bottom: 1px solid #ebeef5; display: flex; align-items: center; justify-content: space-between; }
.card-header h3 { font-size: 16px; color: #303133; position: relative; padding-left: 12px; }
.card-header h3::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; background: #409eff; border-radius: 2px; }
.card-header .more-link { font-size: 13px; color: #909399; }
.card-header .more-link:hover { color: #409eff; }
.card-body { padding: 18px; }

/* 排行榜 */
.rank-list { list-style: none; }
.rank-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px dashed #ebeef5; transition: background 0.2s; }
.rank-item:last-child { border-bottom: none; }
.rank-item:hover { background: #f5f7fa; }
.rank-num { width: 28px; height: 28px; border-radius: 50%; background: #e8eaed; color: #909399; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.rank-item:nth-child(1) .rank-num { background: #ff4444; color: #fff; }
.rank-item:nth-child(2) .rank-num { background: #ff8800; color: #fff; }
.rank-item:nth-child(3) .rank-num { background: #ffbb33; color: #fff; }
.rank-name { flex: 1; text-align: center; font-size: 14px; font-weight: 600; color: #303133; }
.rank-name a { color: inherit; }
.rank-name a:hover { color: #409eff; }
.rank-extra { width: 160px; text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-shrink: 0; }
.rank-stars { color: #ffbb33; font-size: 12px; }
.rank-empty { color: #c0c4cc; font-size: 13px; font-style: italic; }
.rank-ad-tag { font-size: 11px; background: #ff4444; color: #fff; padding: 1px 6px; border-radius: 3px; }
.rank-submit { font-size: 12px; color: #409eff; }
.rank-submit:hover { color: #66b1ff; }

/* 卡盟列表 */
.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.site-card { background: #fff; border-radius: 8px; border: 1px solid #ebeef5; padding: 16px; transition: all 0.25s; display: flex; gap: 12px; }
.site-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); transform: translateY(-2px); }
.site-card-logo { width: 48px; height: 48px; border-radius: 8px; background: #f0f2f5; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.site-card-logo img { width: 100%; height: 100%; object-fit: cover; }
.site-card-logo .fallback { font-size: 22px; color: #409eff; font-weight: 700; }
.site-card-info { flex: 1; min-width: 0; }
.site-card-info h4 { font-size: 14px; margin-bottom: 4px; }
.site-card-info h4 a { color: #303133; }
.site-card-info h4 a:hover { color: #409eff; }
.site-card-info .site-desc { font-size: 12px; color: #909399; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.site-card-info .site-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.site-card-info .site-cat { font-size: 11px; background: #ecf5ff; color: #409eff; padding: 2px 8px; border-radius: 3px; }
.site-card-info .site-visit { font-size: 12px; color: #409eff; margin-left: auto; }

/* 站点详情页 */
.site-detail { display: flex; gap: 24px; align-items: flex-start; }
.site-detail-logo { width: 120px; height: 120px; border-radius: 12px; background: #f0f2f5; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.site-detail-logo img { width: 100%; height: 100%; object-fit: cover; }
.site-detail-logo .fallback { font-size: 48px; color: #409eff; font-weight: 700; }
.site-detail-info { flex: 1; min-width: 0; }
.site-detail-name { font-size: 24px; color: #303133; margin-bottom: 8px; }
.site-detail-url { margin-bottom: 10px; }
.site-detail-url a { font-size: 14px; color: #409eff; word-break: break-all; }
.site-detail-url a:hover { color: #66b1ff; }
.site-detail-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.site-detail-cat { font-size: 12px; background: #ecf5ff; color: #409eff; padding: 3px 10px; border-radius: 4px; }
.site-detail-date { font-size: 12px; color: #909399; }
.site-detail-desc { background: #f5f7fa; border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; }
.site-detail-desc p { font-size: 14px; color: #606266; line-height: 1.7; margin: 0; }
.site-detail-actions .btn-visit { display: inline-block; padding: 10px 28px; background: linear-gradient(135deg, #409eff, #1a73e8); color: #fff; border-radius: 20px; font-size: 14px; font-weight: 600; transition: opacity 0.2s; }
.site-detail-actions .btn-visit:hover { opacity: 0.9; color: #fff; }

/* 分类筛选 */
.category-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.category-filter a { padding: 5px 14px; border-radius: 16px; font-size: 13px; background: #f0f2f5; color: #606266; transition: all 0.2s; }
.category-filter a:hover, .category-filter a.active { background: #409eff; color: #fff; }

/* 中部横幅广告 */
.mid-ad-area { text-align: center; margin: 20px 0; }
.mid-ad-area .ad-item { display: inline-block; margin: 5px 0; }
.mid-ad-area .ad-item img { max-width: 100%; height: auto; }

/* 最新文章 */
.article-list { list-style: none; }
.article-item { padding: 8px 0; border-bottom: 1px dashed #ebeef5; display: flex; justify-content: space-between; align-items: center; }
.article-item:last-child { border-bottom: none; }
.article-item a { font-size: 14px; color: #303133; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 8px; }
.article-item a:hover { color: #409eff; }
.article-date { font-size: 12px; color: #909399; flex-shrink: 0; }

/* 右侧推荐 */
.recommend-list { list-style: none; }
.recommend-item { padding: 8px 0; border-bottom: 1px dashed #ebeef5; }
.recommend-item:last-child { border-bottom: none; }
.recommend-item a { font-size: 14px; color: #303133; display: flex; align-items: center; gap: 8px; }
.recommend-item a:hover { color: #409eff; }
.recommend-item img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; }
.recommend-ad-tag { font-size: 10px; background: #e8eaed; color: #909399; padding: 1px 4px; border-radius: 2px; }

/* 页脚 */
.site-footer { background: #2c3e50; color: rgba(255,255,255,0.6); padding: 30px 0; margin-top: 40px; text-align: center; font-size: 13px; }
.site-footer a { color: rgba(255,255,255,0.8); }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.footer-links { margin-bottom: 12px; }
.footer-links a { margin: 0 10px; }

/* ========== 广告投放页 ========== */
.submit-page { max-width: 700px; margin: 30px auto; padding: 0 20px; }
.submit-page .card-body { padding: 24px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 14px; color: #606266; margin-bottom: 8px; font-weight: 500; }
.form-group label .required { color: #f56c6c; margin-right: 2px; }
.form-input { width: 100%; padding: 10px 12px; border: 1px solid #dcdfe6; border-radius: 6px; font-size: 14px; transition: border-color 0.2s; }
.form-input:focus { outline: none; border-color: #409eff; }
select.form-input { appearance: auto; }
.form-help { font-size: 12px; color: #909399; margin-top: 4px; }
.price-display { background: #fff7e6; border: 1px solid #ffd591; border-radius: 8px; padding: 16px; text-align: center; margin: 20px 0; }
.price-display .price-label { font-size: 14px; color: #606266; }
.price-display .price-value { font-size: 28px; color: #f56c6c; font-weight: 700; margin: 4px 0; }
.price-display .price-detail { font-size: 12px; color: #909399; }
.btn-submit { width: 100%; padding: 14px; background: linear-gradient(135deg, #409eff, #1a73e8); color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
.btn-submit:hover { opacity: 0.9; }
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* 广告位选择卡片 */
.position-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.position-card { border: 2px solid #ebeef5; border-radius: 8px; padding: 14px; cursor: pointer; transition: all 0.2s; text-align: center; }
.position-card:hover { border-color: #409eff; }
.position-card.selected { border-color: #409eff; background: #ecf5ff; }
.position-card .pc-icon { font-size: 28px; margin-bottom: 6px; }
.position-card .pc-name { font-size: 14px; font-weight: 600; color: #303133; }
.position-card .pc-price { font-size: 12px; color: #f56c6c; margin-top: 4px; }

/* 支付页面 */
.pay-page { max-width: 500px; margin: 60px auto; text-align: center; }
.pay-page .card-body { padding: 40px; }
.pay-icon { font-size: 48px; margin-bottom: 16px; }
.pay-amount { font-size: 32px; color: #f56c6c; font-weight: 700; margin: 10px 0; }
.pay-methods { display: flex; gap: 12px; justify-content: center; margin: 20px 0; }
.pay-method-btn { padding: 10px 24px; border: 2px solid #ebeef5; border-radius: 8px; cursor: pointer; font-size: 14px; transition: all 0.2s; background: #fff; }
.pay-method-btn:hover, .pay-method-btn.selected { border-color: #409eff; color: #409eff; }

/* 响应式 */
@media (max-width: 768px) {
    .main-wrap { flex-direction: column; }
    .content-right { width: 100%; }
    .header-inner { flex-direction: column; gap: 12px; }
    .header-search input { width: 200px; }
    .site-grid { grid-template-columns: 1fr; }
    .position-cards { grid-template-columns: 1fr; }
    .site-detail { flex-direction: column; align-items: center; text-align: center; }
    .site-detail-logo { width: 100px; height: 100px; }
    .site-detail-meta { justify-content: center; }
    .site-detail-actions { text-align: center; }
}

/* ========== 后台管理样式 ========== */
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar { width: 220px; background: #1e2a3a; color: #fff; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto; z-index: 100; }
.sidebar-header { padding: 20px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); }
.sidebar-header h2 { font-size: 18px; }
.sidebar-header p { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 4px; }
.sidebar-nav { padding: 10px 0; }
.sidebar-nav a { display: flex; align-items: center; gap: 10px; padding: 12px 20px; color: rgba(255,255,255,0.7); font-size: 14px; transition: all 0.2s; }
.sidebar-nav a:hover, .sidebar-nav a.active { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-nav a .nav-icon { width: 20px; text-align: center; }
.sidebar-nav .nav-divider { padding: 8px 20px; font-size: 11px; color: rgba(255,255,255,0.3); text-transform: uppercase; margin-top: 10px; }

.admin-main { flex: 1; margin-left: 220px; background: #f0f2f5; }
.admin-header { background: #fff; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 4px rgba(0,0,0,0.08); position: sticky; top: 0; z-index: 50; }
.admin-header h2 { font-size: 18px; color: #303133; }
.admin-content { padding: 20px 24px; }

/* 统计卡片 */
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.stat-card { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.stat-card .sc-label { font-size: 13px; color: #909399; }
.stat-card .sc-value { font-size: 28px; font-weight: 700; color: #303133; margin: 6px 0; }
.stat-card .sc-icon { float: right; width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.sc-blue { background: #ecf5ff; color: #409eff; }
.sc-green { background: #f0f9eb; color: #67c23a; }
.sc-orange { background: #fdf6ec; color: #e6a23c; }
.sc-red { background: #fef0f0; color: #f56c6c; }

/* 表格 */
.admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.admin-table th { background: #fafafa; padding: 12px 14px; text-align: left; font-size: 13px; color: #909399; font-weight: 600; border-bottom: 1px solid #ebeef5; }
.admin-table td { padding: 12px 14px; font-size: 14px; border-bottom: 1px solid #ebeef5; color: #606266; }
.admin-table tr:hover td { background: #f5f7fa; }
.admin-table .actions a { margin-right: 10px; font-size: 13px; }
.admin-table .actions a.delete { color: #f56c6c; }

/* 状态标签 */
.status-tag { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; }
.status-tag.active { background: #f0f9eb; color: #67c23a; }
.status-tag.pending { background: #fdf6ec; color: #e6a23c; }
.status-tag.expired { background: #e8eaed; color: #909399; }
.status-tag.cancelled { background: #fef0f0; color: #f56c6c; }
.status-tag.paid { background: #f0f9eb; color: #67c23a; }
.status-tag.failed { background: #fef0f0; color: #f56c6c; }

/* 后台表单 */
.admin-form { background: #fff; border-radius: 8px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); max-width: 700px; }
.admin-form .form-group { margin-bottom: 18px; }
.admin-form .form-group label { display: block; font-size: 14px; color: #606266; margin-bottom: 6px; }
.admin-form .form-input { width: 100%; padding: 8px 12px; border: 1px solid #dcdfe6; border-radius: 4px; font-size: 14px; }
.admin-form .form-input:focus { outline: none; border-color: #409eff; }
.btn-primary { padding: 8px 20px; background: #409eff; color: #fff; border: none; border-radius: 4px; font-size: 14px; cursor: pointer; }
.btn-primary:hover { background: #66b1ff; }
.btn-sm { padding: 4px 12px; font-size: 12px; border-radius: 3px; border: 1px solid #dcdfe6; background: #fff; color: #606266; cursor: pointer; }
.btn-sm:hover { color: #409eff; border-color: #409eff; }
.btn-danger { color: #f56c6c; border-color: #f56c6c; }
.btn-danger:hover { color: #f56c6c !important; border-color: #f56c6c !important; }

/* 后台筛选栏 */
.filter-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.filter-bar select, .filter-bar input { padding: 6px 12px; border: 1px solid #dcdfe6; border-radius: 4px; font-size: 13px; }

/* 登录页 */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1e2a3a 0%, #2c3e50 100%); }
.login-box { background: #fff; border-radius: 12px; padding: 40px; width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.login-box h2 { text-align: center; margin-bottom: 24px; color: #303133; }

/* 面包屑导航 */
.directory-breadcrumb { background: #fff; border-bottom: 1px solid #ebeef5; padding: 12px 0; }
.breadcrumb-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; font-size: 13px; color: #909399; }
.breadcrumb-inner a { color: #409eff; }
.breadcrumb-inner a:hover { color: #66b1ff; }

/* 分类筛选条（带数量） */
.category-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 16px; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.category-filter-bar a { padding: 5px 12px; border-radius: 16px; font-size: 13px; background: #f0f2f5; color: #606266; transition: all 0.2s; }
.category-filter-bar a:hover, .category-filter-bar a.active { background: #409eff; color: #fff; }

/* 网站目录卡片网格 */
.directory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.directory-card { background: #fff; border: 1px solid #ebeef5; border-radius: 8px; padding: 16px; display: flex; gap: 14px; transition: all 0.25s; }
.directory-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); transform: translateY(-2px); border-color: #409eff; }
.directory-card-logo { width: 60px; height: 60px; border-radius: 8px; background: #f0f2f5; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.directory-card-logo img { width: 100%; height: 100%; object-fit: cover; }
.directory-card-logo .fallback { font-size: 24px; color: #409eff; font-weight: 700; }
.directory-card-info { flex: 1; min-width: 0; }
.directory-card-info h4 { margin-bottom: 6px; }
.directory-title { font-size: 15px; color: #409eff; font-weight: 600; }
.directory-title:hover { color: #66b1ff; text-decoration: underline; }
.directory-desc { font-size: 13px; color: #606266; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; }
.directory-meta { display: flex; gap: 12px; font-size: 12px; color: #909399; margin-bottom: 10px; }
.directory-url { color: #409eff; }
.directory-actions { display: flex; gap: 8px; }
.btn-favorite, .btn-view { padding: 4px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: all 0.2s; border: 1px solid #dcdfe6; background: #fff; color: #606266; }
.btn-favorite:hover { color: #409eff; border-color: #409eff; }
.btn-view { background: #409eff; color: #fff; border-color: #409eff; }
.btn-view:hover { background: #66b1ff; border-color: #66b1ff; }

/* 推荐站点（带缩略图） */
.recommend-with-thumb { list-style: none; }
.recommend-thumb-item { padding: 10px 0; border-bottom: 1px dashed #ebeef5; }
.recommend-thumb-item:last-child { border-bottom: none; }
.recommend-thumb-item a { display: flex; gap: 10px; align-items: flex-start; }
.recommend-thumb-item a:hover { text-decoration: none; }
.recommend-thumb { width: 50px; height: 50px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.recommend-thumb-info { flex: 1; min-width: 0; }
.recommend-thumb-title { display: block; font-size: 14px; color: #303133; font-weight: 600; margin-bottom: 4px; }
.recommend-thumb-title:hover { color: #409eff; }
.recommend-thumb-desc { display: block; font-size: 12px; color: #909399; line-height: 1.5; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recommend-thumb-url { display: block; font-size: 11px; color: #409eff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 分页 */
.pagination { display: flex; gap: 4px; justify-content: center; margin-top: 20px; }
.pagination a, .pagination span { padding: 6px 12px; border: 1px solid #dcdfe6; border-radius: 4px; font-size: 13px; color: #606266; }
.pagination a:hover { color: #409eff; border-color: #409eff; }
.pagination .current { background: #409eff; color: #fff; border-color: #409eff; }