/* detail.php */
    /* 主内容区：与面包屑/评论区等统一总宽，左右留白一致 */
    .main-content { max-width: 1150px; margin: 0 auto; padding: 6px 20px 12px; box-sizing: border-box; }
    
    /* 第一屏两栏：左仅轮播 500px 高；右卡同高 500px，使与左侧切换图底对齐 */
    .content-grid { 
        display: grid; 
        grid-template-columns: 450px 1fr; 
        grid-template-rows: auto;
        gap: 16px;
        align-items: start;
    }
    
    /* 统一外观的容器 */
    .sidebar-left { display: flex; flex-direction: column; min-height: 0; align-self: start; }
    .sidebar-left > .unified-height {
        flex: 0 0 auto;
        height: 500px;
        min-height: 500px;
        max-height: 500px;
    }
    .unified-height {
        flex: 1;
        min-height: 0;
        background: var(--bg-card);
        border-radius: var(--radius-lg, 14px);
        border: 1px solid var(--border-color);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: var(--shadow-card, 0 4px 22px rgba(15, 23, 42, 0.06));
    }
    /* 右侧信息卡：固定 500px 与左侧轮播同高 */
    .detail-main.unified-height {
        width: 100%;
        align-self: start;
        height: 500px;
        min-height: 500px;
        max-height: 500px;
        flex: 0 0 500px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    @media (max-width: 800px) { 
        .content-grid { grid-template-columns: 1fr; grid-template-rows: auto; } 
        .sidebar-left { display: none; }
        .sidebar-left > .unified-height {
            height: auto;
            min-height: 0;
            max-height: none;
        }
        .detail-main.unified-height {
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            flex: 1 1 auto !important;
        }
        .detail-desc-wrapper {
            min-height: 260px;
        }
        .detail-toolbar-report-btn { margin-left: 0; }
    }
    
    /* 面包屑：assets/css/breadcrumb-soft.css */
    
    /* ========== 左侧卡片 ========== */
    .sidebar-left { width: 450px; }
    
    /* 图片滑动容器 450x500 */
    .image-slider-wrapper {
        position: relative;
        width: 450px;
        height: 500px;
        overflow: hidden;
        flex-shrink: 0;
        background: linear-gradient(135deg, #1a1a2e, #16213e);
    }
    .image-slider {
        display: flex;
        transition: transform 0.4s ease;
        height: 100%;
    }
    .image-slide {
        min-width: 450px;
        height: 500px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .image-slide .slide-image-inner {
        position: absolute;
        inset: 0;
        overflow: hidden;
    }
    .image-slide .slide-image-inner img,
    .image-slide .slide-image-inner .slide-placeholder {
        width: 100%;
        height: 100%;
        transition: transform 0.35s ease;
    }
    .image-slide .slide-image-inner img { object-fit: cover; }
    .image-slide:hover .slide-image-inner img,
    .image-slide:hover .slide-image-inner .slide-placeholder {
        transform: scale(1.08);
    }
    .slide-open-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0,0,0,0.5);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 2;
        pointer-events: none;
    }
    .image-slide:hover .slide-open-overlay { opacity: 1; }
    .slide-open-arrow {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .slide-open-text {
        display: inline-block;
        padding: 10px 20px;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        background: rgba(255,255,255,0.2);
        border: 2px solid #fff;
        border-radius: 6px;
        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        white-space: nowrap;
    }
    .slide-open-url {
        margin-top: 6px;
        font-size: 14px;
        font-weight: 600;
        color: #ffffff;
        text-shadow: 0 2px 4px rgba(0,0,0,0.6);
        white-space: nowrap;
    }
    .image-slide .slide-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
    }
    .image-slide .slide-image-inner .slide-placeholder .p-icon { font-size: 60px; margin-bottom: 10px; }
    .image-slide .slide-image-inner .slide-placeholder .p-text { font-size: 14px; opacity: 0.8; max-width: 80%; text-align: center; }
    
    /* 图片上的排名和名称 */
    .slide-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 14px 20px;
        background: linear-gradient(transparent, rgba(0,0,0,0.9));
        color: #fff;
        z-index: 3;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .slide-rank-badge {
        flex-shrink: 0;
        background: linear-gradient(135deg, var(--accent-color, #6366f1), var(--secondary-color, #8b5cf6));
        color: #fff;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 700;
    }
    .slide-name {
        font-size: 15px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    
    /* 滑动导航按钮：深色半透明，白箭头，清晰可见 */
    .image-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 48px;
        height: 72px;
        background: rgba(0,0,0,0.55);
        backdrop-filter: blur(12px);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
        z-index: 10;
        transition: all 0.25s;
        border: 1px solid rgba(255,255,255,0.2);
    }
    .image-nav:hover { background: rgba(0,0,0,0.75); color: #fff; }
    .image-nav.prev { left: 0; border-radius: 0 6px 6px 0; }
    .image-nav.next { right: 0; border-radius: 6px 0 0 6px; }
    .image-nav.disabled { opacity: 0.4; cursor: not-allowed; background: rgba(0,0,0,0.35); }
    .image-nav.disabled:hover { background: rgba(0,0,0,0.35); }
    
    /* 切换图下：打开网站 + 查看分类 */
    .detail-action-strip {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
        margin-top: 12px;
    }
    .detail-action-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 18px;
        border-radius: 6px;
        text-decoration: none;
        font-size: 15px;
        font-weight: 600;
        transition: all 0.2s;
        width: 100%;
        box-sizing: border-box;
    }
    .detail-action-primary {
        background: #16a34a;
        color: #fff;
    }
    .detail-action-primary:hover { background: #15803d; color: #fff; }
    .detail-action-report {
        background: var(--bg-input, #f1f5f9);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
        cursor: pointer;
    }
    .detail-action-report:hover { border-color: var(--accent-color, #6366f1); color: var(--accent-color, #6366f1); background: rgba(99,102,241,0.06); }
    .detail-action-icon-report { font-size: 18px; }
    .detail-action-secondary {
        background: var(--bg-card);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
    }
    .detail-action-secondary:hover { border-color: var(--accent-color, #6366f1); color: var(--accent-color, #6366f1); }
    .detail-action-icon {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }
    .detail-action-icon-circle { background: rgba(255,255,255,0.25); border-radius: 6px; }
    .detail-action-icon-megaphone { font-size: 22px; }
    .detail-action-text { flex: 1; text-align: center; }
    .detail-action-arrow { flex-shrink: 0; font-size: 18px; opacity: 0.9; }
    
    /* 图片计数器 */
    .image-counter {
        position: absolute;
        top: 12px;
        right: 12px;
        background: rgba(0,0,0,0.6);
        backdrop-filter: blur(10px);
        color: #fff;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
    }
    
    /* 打开网站按钮 */
    .visit-btn-wrapper { padding: 16px; flex-shrink: 0; }
    .action-btns-row { display: flex; gap: 10px; }
    .visit-btn { 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        gap: 10px;
        padding: 14px 20px; 
        background: linear-gradient(135deg, var(--accent-color, #6366f1), var(--secondary-color, #8b5cf6)); 
        border-radius: 6px; 
        color: #fff; 
        font-size: 15px; 
        font-weight: 700; 
        flex: 1;
        position: relative;
        overflow: hidden;
        transition: all 0.3s;
        box-shadow: 0 4px 15px rgba(99,102,241,0.3);
        text-decoration: none;
    }
    .visit-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s;
    }
    .visit-btn:hover::before { left: 100%; }
    .visit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(99,102,241,0.4); }
    .visit-btn .btn-icon { font-size: 18px; transition: transform 0.3s; }
    .visit-btn:hover .btn-icon { transform: translateX(3px); }
    
    /* 收藏按钮 */
    .favorite-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 14px 18px;
        background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
        border: 2px solid #e5e7eb;
        border-radius: 6px;
        color: #4b5563;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        text-decoration: none;
    }
    .favorite-btn:hover {
        background: linear-gradient(135deg, #fef3c7, #fde68a);
        border-color: #fbbf24;
        color: #92400e;
        transform: translateY(-2px);
    }
    .favorite-btn.favorited {
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        border-color: #f59e0b;
        color: #fff;
        box-shadow: 0 4px 15px rgba(251,191,36,0.4);
    }
    .favorite-btn.favorited:hover {
        background: linear-gradient(135deg, #f59e0b, #d97706);
    }
    .favorite-btn .fav-icon { font-size: 18px; }
    
    /* 左侧下方信息 */
    .preview-info { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 0 4px; }
    
    /* 分享按钮 */
    .share-section { 
        padding: 12px 14px; 
        margin: 2px 12px; 
        background: var(--bg-body);
        border-radius: 6px; 
    }
    .share-title { 
        font-size: 12px; 
        font-weight: 600; 
        color: var(--text-muted); 
        margin-bottom: 2px; 
        display: flex; 
        align-items: center; 
        gap: 6px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .share-buttons { display: flex; gap: 8px; }
    .share-btn { 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        width: 36px; 
        height: 36px; 
        border-radius: 6px; 
        font-size: 14px; 
        cursor: pointer; 
        border: none; 
        text-decoration: none; 
        transition: all 0.2s; 
    }
    .share-btn:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
    .share-btn.copy-link { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; }
    .share-btn.twitter { background: #000; color: #fff; }
    .share-btn.whatsapp { background: #25D366; color: #fff; }
    .share-btn.telegram { background: #0088cc; color: #fff; }
    .share-btn.facebook { background: #1877f2; color: #fff; }
    .share-btn.bookmark { background: linear-gradient(135deg, #ff9800, #f57c00); color: #fff; }
    .share-btn.copied { background: linear-gradient(135deg, #10b981, #059669) !important; }
    
    /* 分类标签 */
    .preview-category { 
        display: flex; 
        align-items: center; 
        gap: 10px; 
        padding: 12px 14px; 
        margin: 0 12px 2px; 
        background: var(--bg-body);
        border-radius: 6px;
    }
    .preview-category .c-icon { 
        width: 36px; 
        height: 36px; 
        background: linear-gradient(135deg, var(--accent-color, #6366f1), var(--secondary-color, #8b5cf6)); 
        border-radius: 6px; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        font-size: 18px; 
        color: #fff; 
    }
    .preview-category .c-text { font-size: 13px; font-weight: 600; color: var(--text-primary); }
    
    /* 底部操作 */
    .preview-actions { 
        padding: 12px 16px; 
        display: flex; 
        gap: 20px; 
        font-size: 12px; 
        color: var(--text-muted); 
        border-top: 1px solid var(--border-color); 
        margin-top: auto;
        background: var(--bg-body);
    }
    .preview-actions a { transition: color 0.2s; }
    .preview-actions a:hover { color: var(--accent-color, #6366f1); }
    
    /* 免责声明 */
    .preview-footer { 
        padding: 10px 16px; 
        font-size: 11px; 
        color: var(--text-muted); 
        line-height: 1.6; 
        opacity: 0.8;
    }
    
    /* ========== 中间详情 ========== */
    .detail-main {
        display: flex;
        flex-direction: column;
        min-height: 0;
        min-width: 0;
        background: var(--bg-card);
        border-radius: 6px;
        border: 1px solid var(--border-color);
        overflow: hidden;
    }
    
    /* 描述区：第一行仅标题；第二行工具条 = 数据 + 投诉，横向整齐 */
    .detail-header-bar {
        padding: 10px 14px 0;
        border-bottom: 1px solid var(--border-color);
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--bg-card);
    }
    .detail-header-row-top {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        width: 100%;
        padding-bottom: 8px;
    }
    .detail-header-left {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        min-width: 0;
        flex: 1 1 auto;
    }
    .detail-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
        width: 100%;
        padding: 8px 0 10px;
        margin-top: 2px;
        border-top: 1px solid rgba(148, 163, 184, 0.22);
    }
    .detail-toolbar-report-btn {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 12px;
        margin: 0;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        border: 1px solid #e2e8f0;
        background: #fff;
        color: #64748b;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        transition: border-color 0.2s, color 0.2s, background 0.2s;
    }
    .detail-toolbar-report-btn:hover {
        border-color: #fca5a5;
        background: #fef2f2;
        color: #b91c1c;
    }
    .detail-toolbar-report-ico { font-size: 13px; line-height: 1; }
    @media (max-width: 900px) {
        .detail-toolbar { flex-direction: column; align-items: stretch; }
        .detail-toolbar-report-btn { justify-content: center; width: 100%; }
    }
    
    .rank-badge-circle { 
        width: 40px;
        height: 40px;
        background: linear-gradient(145deg, var(--accent-color, #6366f1), var(--secondary-color, #8b5cf6)); 
        border-radius: 10px; 
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff; 
        font-size: 15px; 
        font-weight: 700; 
        flex-shrink: 0;
        box-shadow: 0 1px 3px rgba(99,102,241,0.25);
    }
    
    .detail-title-inline {
        font-size: 20px;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
        line-height: 1.35;
        letter-spacing: -0.02em;
        flex: 0 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 4px;
    }
    .site-url-link {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 4px 9px;
        max-width: min(100%, 280px);
        background: var(--bg-input, #f1f5f9);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        color: var(--text-secondary);
        font-size: 11px;
        text-decoration: none;
        transition: color 0.2s, border-color 0.2s, background 0.2s;
        flex-shrink: 0;
        word-break: break-all;
    }
    .site-url-link:hover { 
        color: var(--accent-color, #6366f1); 
        border-color: var(--accent-color, #6366f1);
        background: rgba(99,102,241,0.06);
    }
    .detail-header-badges { width: 100%; margin-top: 0; }
    .badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
    .verified-badge { padding: 4px 10px; background: linear-gradient(135deg, #2196f3, #1976d2); border-radius: 6px; font-size: 11px; font-weight: 600; color: #fff; }
    .hot-badge { padding: 4px 10px; background: linear-gradient(135deg, #ff5722, #e64a19); border-radius: 6px; font-size: 11px; font-weight: 600; color: #fff; }
    .badge-row .badge-custom { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); }
    
    /* 统计：横向一行「图标 + 文案 + 数字」，中间竖点分隔 */
    .detail-stats { 
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        flex-wrap: wrap;
        gap: 0;
        margin: 0;
        padding: 0;
        min-width: 0;
        border: none;
        background: transparent;
    }
    .detail-stats .stat-item { 
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        gap: 5px;
        padding: 0;
        margin: 0;
        min-width: 0;
        border: none;
        background: transparent;
    }
    .detail-stat-sep {
        width: 4px;
        height: 4px;
        margin: 0 10px;
        border-radius: 50%;
        background: #cbd5e1;
        flex-shrink: 0;
    }
    .detail-stats .stat-icon { 
        font-size: 14px;
        line-height: 1;
        opacity: 0.88;
        flex-shrink: 0;
    }
    .detail-stats .stat-label { 
        font-size: 12px; 
        color: var(--text-muted); 
        font-weight: 500;
        white-space: nowrap;
    }
    .detail-stats .stat-value { 
        font-size: 14px; 
        font-weight: 700; 
        color: var(--text-primary); 
        letter-spacing: -0.02em;
        line-height: 1.2;
        font-variant-numeric: tabular-nums;
    }
    html[data-theme="dark"] .detail-stat-sep,
    [data-theme="dark"] .detail-stat-sep {
        background: rgba(148, 163, 184, 0.45);
    }
    html[data-theme="dark"] .detail-toolbar-report-btn,
    [data-theme="dark"] .detail-toolbar-report-btn {
        background: rgba(30, 41, 59, 0.5);
        border-color: rgba(148, 163, 184, 0.25);
        color: #cbd5e1;
    }
    html[data-theme="dark"] .detail-toolbar-report-btn:hover,
    [data-theme="dark"] .detail-toolbar-report-btn:hover {
        background: rgba(127, 29, 29, 0.25);
        border-color: rgba(248, 113, 113, 0.4);
        color: #fecaca;
    }
    
    /* 描述区域：占满右侧卡片剩余高度（与左侧 500px 轮播底对齐） */
    .detail-desc-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
        padding: 2px 12px 10px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        overflow: hidden;
        box-sizing: border-box;
        background: linear-gradient(180deg, rgba(248, 250, 252, 0.6) 0%, transparent 48%);
    }
    .detail-desc {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
        overflow-y: auto;
        font-size: 14px;
        line-height: 1.75;
        color: var(--text-secondary);
        padding: 12px 14px;
        border-radius: 12px;
        border: 1px solid var(--border-color);
        background: var(--bg-card);
        box-sizing: border-box;
    }
    .detail-desc-empty {
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-self: stretch;
        padding: 2px 0 6px;
        text-align: center;
        overflow: hidden;
    }
    /* 无简介：居中留白卡片，虚线轻描 */
    .detail-desc-empty-inner {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 28px 20px;
        border-radius: 12px;
        text-align: center;
        color: var(--text-secondary);
        background: var(--bg-card);
        border: 1px dashed rgba(148, 163, 184, 0.45);
        box-sizing: border-box;
        overflow-y: auto;
    }
    .detail-desc-empty-visual {
        width: 52px;
        height: 52px;
        margin: 0 auto 14px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        line-height: 1;
        background: linear-gradient(145deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.06));
        color: var(--text-secondary);
    }
    .detail-desc-empty-title {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-primary);
        letter-spacing: -0.02em;
        margin: 0 0 8px;
        line-height: 1.35;
    }
    .detail-desc-empty-text {
        margin: 0;
        font-size: 13px;
        line-height: 1.65;
        color: var(--text-muted);
        max-width: 320px;
    }
    html[data-theme="dark"] .detail-desc-wrapper,
    [data-theme="dark"] .detail-desc-wrapper {
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.35) 0%, transparent 50%);
    }
    html[data-theme="dark"] .detail-desc,
    [data-theme="dark"] .detail-desc {
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(148, 163, 184, 0.2);
    }
    html[data-theme="dark"] .detail-desc-empty-inner,
    [data-theme="dark"] .detail-desc-empty-inner {
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(148, 163, 184, 0.28);
    }
    html[data-theme="dark"] .detail-desc-empty-visual,
    [data-theme="dark"] .detail-desc-empty-visual {
        background: linear-gradient(145deg, rgba(99, 102, 241, 0.2), rgba(129, 140, 248, 0.08));
    }
    html[data-theme="dark"] .detail-desc-empty-title,
    [data-theme="dark"] .detail-desc-empty-title {
        color: #e2e8f0;
    }
    html[data-theme="dark"] .detail-desc-empty-text,
    [data-theme="dark"] .detail-desc-empty-text {
        color: #94a3b8;
    }
    .detail-desc::-webkit-scrollbar { width: 6px; }
    .detail-desc::-webkit-scrollbar-track { background: var(--bg-input); border-radius: 6px; }
    .detail-desc::-webkit-scrollbar-thumb { background: #ccc; border-radius: 6px; }
    .detail-desc::-webkit-scrollbar-thumb:hover { background: #ff5722; }
    
    /* 优点缺点标签容器：顶到描述区底部时贴卡片底（与左侧底对齐） */
    .tags-container {
        margin-top: auto;
        padding-top: 8px;
        border-top: 1px solid var(--border-color);
        flex-shrink: 0;
    }
    .tags-section { margin-bottom: 2px; }
    .tags-section:last-child { margin-bottom: 0; }
    .tags-section-title {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
        margin-bottom: 2px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .tags-list {
        line-height: 1.8;
    }
    
    /* 优点标签 - 连续文字显示 */
    .pros-tag {
        display: inline;
        font-size: 13px;
        color: var(--secondary-color, #8b5cf6);
    }
    .pros-tag .tag-icon {
        color: var(--accent-color, #6366f1);
        font-weight: bold;
        margin-right: 2px;
    }
    .pros-tag span:last-child::after {
        content: ' ';
    }
    
    /* 缺点标签 - 连续文字显示 */
    .cons-tag {
        display: inline;
        font-size: 13px;
        color: #c62828;
    }
    .cons-tag .tag-icon {
        color: #f44336;
        font-weight: bold;
        margin-right: 2px;
    }
    .cons-tag span:last-child::after {
        content: ' ';
    }
    
    /* 暗色模式 */
    .dark .pros-tag { color: #a78bfa; }
    .dark .pros-tag .tag-icon { color: #818cf8; }
    .dark .cons-tag { color: #e57373; }
    .dark .cons-tag .tag-icon { color: #e57373; }
    
    /* 旧版标签列表（保留兼容） */
    .custom-tags-list {
        margin-top: 2px;
        padding-top: 2px;
        border-top: 1px solid var(--border-color);
        flex-shrink: 0;
    }
    .custom-tag-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 15px;
        margin-bottom: 2px;
        background: var(--bg-input);
        border-radius: 6px;
        font-size: 13px;
        color: var(--text-primary);
        transition: all 0.2s;
    }
    .custom-tag-item:last-child { margin-bottom: 0; }
    .custom-tag-item:hover { background: rgba(99,102,241,0.1); transform: translateX(5px); }
    .custom-tag-item .tag-icon {
        width: 28px; height: 28px;
        background: linear-gradient(135deg, var(--accent-color, #6366f1), var(--secondary-color, #8b5cf6));
        border-radius: 6px;
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-size: 14px;
    }
    .custom-tag-item .tag-text { flex: 1; font-weight: 500; }
    
    /* 默认特性标签 */
    .features-list { 
        display: flex; 
        flex-wrap: wrap; 
        gap: 8px; 
        margin-top: 2px;
        padding-top: 2px;
        border-top: 1px solid var(--border-color);
        flex-shrink: 0;
    }
    .feature-tag { 
        display: flex; align-items: center; gap: 6px; 
        padding: 6px 12px; 
        background: var(--bg-input); 
        border-radius: 6px; 
        font-size: 12px; 
        color: var(--text-secondary); 
    }
    .feature-tag .dot { width: 6px; height: 6px; border-radius: 50%; }
    .feature-tag .dot.green { background: var(--accent-color, #6366f1); }
    
    /* 评分区域：与上下间隔 2px */
    .rating-section {
        padding: 2px 25px 15px;
        background: var(--bg-body);
        border-top: 1px solid var(--border-color);
        flex-shrink: 0;
    }
    .rating-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
    .rating-display { display: flex; align-items: center; gap: 15px; margin-bottom: 2px; }
    .rating-score { font-size: 28px; font-weight: 700; color: #ff9800; }
    .rating-stars { display: flex; gap: 3px; }
    .rating-stars .star { font-size: 18px; color: #ddd; }
    .rating-stars .star.active { color: #ff9800; }
    .rating-count { font-size: 12px; color: var(--text-muted); }
    
    .rating-form {
        display: flex;
        align-items: center;
        gap: 15px;
        padding-top: 2px;
        border-top: 1px solid var(--border-color);
    }
    .rating-form-label { font-size: 12px; color: var(--text-secondary); }
    .rating-input { display: flex; gap: 5px; }
    .rating-input .star-btn {
        width: 30px; height: 30px;
        border: 1px solid var(--border-color);
        background: var(--bg-card);
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        display: flex; align-items: center; justify-content: center;
        transition: all 0.2s;
    }
    .rating-input .star-btn:hover,
    .rating-input .star-btn.selected {
        background: #ff9800;
        border-color: #ff9800;
        color: #fff;
    }
    .rating-submit {
        padding: 8px 16px;
        background: linear-gradient(135deg, #ff9800, #f57c00);
        border: none;
        border-radius: 6px;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }
    .rating-submit:hover { box-shadow: 0 3px 10px rgba(255,152,0,0.4); }
    
    /* ========== 右侧广告位 ========== */
    .sidebar-right { }
    .ad-card { 
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ad-placeholder { color: #999; font-size: 14px; font-weight: 500; text-align: center; }
    [data-theme="dark"] .ad-placeholder { color: #666; }
    
    /* ========== 底部卡片：上下间隔 2px ========== */
    .full-width-cards { max-width: 1150px; margin: 2px auto 0; padding: 0 20px; box-sizing: border-box; }
    .related-inline-header { 
        display: flex; 
        align-items: center; 
        justify-content: space-between; 
        margin-bottom: 2px; 
        padding: 18px 24px; 
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }
    .related-inline-header .title { 
        display: flex; 
        align-items: center; 
        gap: 12px; 
        font-size: 17px; 
        font-weight: 700; 
        color: var(--text-primary); 
    }
    .related-inline-header .title .icon { 
        width: 40px; 
        height: 40px; 
        background: linear-gradient(135deg, var(--accent-color, #6366f1), var(--secondary-color, #8b5cf6)); 
        border-radius: 6px; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        font-size: 20px; 
        color: #fff;
        box-shadow: 0 4px 12px rgba(99,102,241,0.3);
    }
    .related-inline-header .more-btn { 
        display: flex; 
        align-items: center; 
        gap: 8px; 
        padding: 10px 20px; 
        background: linear-gradient(135deg, var(--accent-color, #6366f1), var(--secondary-color, #8b5cf6)); 
        border-radius: 6px; 
        font-size: 13px; 
        color: #fff; 
        font-weight: 600; 
        transition: all 0.3s;
        box-shadow: 0 4px 12px rgba(99,102,241,0.3);
    }
    .related-inline-header .more-btn:hover { 
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(99,102,241,0.4);
    }
    .related-inline-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; max-width: 100%; }
    @media (max-width: 1150px) { .related-inline-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (max-width: 900px) { .related-inline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 600px) { .related-inline-grid { grid-template-columns: minmax(0, 1fr); } }
    
    /* 卡片样式 */
    .inline-card { 
        width: 100%;
        min-width: 0;
        background: var(--bg-card); 
        border-radius: 6px; 
        border: 1px solid var(--border-color); 
        overflow: hidden; 
        position: relative; 
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }
    .inline-card:hover { 
        transform: translateY(-8px); 
        box-shadow: 0 20px 40px rgba(0,0,0,0.12);
        border-color: var(--accent-color, #6366f1);
    }
    .inline-card:hover .inline-hover-menu { opacity: 1; visibility: visible; }
    .inline-card:hover .inline-thumb img { transform: scale(1.08); }
    
    .inline-thumb { 
        width: 100%;
        height: 200px;
        background: linear-gradient(135deg, #1a1a2e, #16213e); 
        display: flex; 
        flex-direction: column;
        align-items: center; 
        justify-content: center; 
        position: relative; 
        overflow: hidden; 
    }
    .inline-thumb img { 
        position: absolute;
        top: 0;
        left: 0;
        width: 100%; 
        height: 100%; 
        object-fit: cover; 
        transition: transform 0.5s ease;
    }
    /* 名字居中显示在图片上 */
    .inline-site-name {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 40px 15px 15px;
        background: linear-gradient(transparent, rgba(0,0,0,0.85));
        z-index: 2;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        text-align: center;
    }
    .inline-placeholder { 
        font-size: 50px; 
        margin-bottom: 10px;
        opacity: 0.6;
    }
    
    /* 悬停菜单 - 半透明，仍然显示图片 */
    .inline-hover-menu { 
        position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
        background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
        display: flex; flex-direction: column; align-items: center; justify-content: center; 
        gap: 12px; 
        opacity: 0; visibility: hidden; 
        transition: all 0.3s; 
        border-radius: 6px;
        z-index: 10;
    }
    .inline-hover-menu a { 
        display: flex; align-items: center; justify-content: center; gap: 8px; 
        width: 70%; padding: 12px 15px; 
        border-radius: 6px; font-size: 13px; font-weight: 600; color: #fff;
        transform: translateY(15px); opacity: 0;
        transition: all 0.3s;
        text-decoration: none;
        backdrop-filter: blur(10px);
    }
    .inline-card:hover .inline-hover-menu a { transform: translateY(0); opacity: 1; }
    .inline-card:hover .inline-hover-menu a:nth-child(1) { transition-delay: 0.05s; }
    .inline-card:hover .inline-hover-menu a:nth-child(2) { transition-delay: 0.1s; }
    .inline-hover-menu .view-detail { background: linear-gradient(135deg, #ff5722, #ff9800); }
    .inline-hover-menu .view-detail:hover { transform: scale(1.05); box-shadow: 0 5px 20px rgba(255,87,34,0.5); }
    .inline-hover-menu .open-site { background: linear-gradient(135deg, var(--accent-color, #6366f1), var(--secondary-color, #8b5cf6)); }
    .inline-hover-menu .open-site:hover { transform: scale(1.05); box-shadow: 0 5px 20px rgba(99,102,241,0.5); }
    .inline-rank { 
        position: absolute; top: 10px; right: 10px; 
        width: 28px; height: 28px; 
        background: rgba(0,0,0,0.6); 
        border-radius: 50%; 
        display: flex; align-items: center; justify-content: center; 
        color: #fff; font-size: 12px; font-weight: 700; 
        z-index: 2;
        transition: all 0.3s;
    }
    .inline-card:hover .inline-rank { background: linear-gradient(135deg, #ff5722, #ff9800); transform: scale(1.1); }
    .inline-rank.top { background: linear-gradient(135deg, var(--accent-color, #6366f1), var(--secondary-color, #8b5cf6)); }
    
    /* 全部分类：上下与卡片间隔 2px */
    .all-categories { max-width: 1150px; margin: 0 auto; padding: 2px 20px 0; box-sizing: border-box; }
    .all-categories-inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
    @media (max-width: 900px) { .all-categories-inner { grid-template-columns: 1fr; } }
    
    .cat-block { border-radius: 6px; overflow: hidden; border: 1px solid var(--border-color); transition: all 0.3s; }
    .cat-block:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
    .cat-block-header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; color: #fff; }
    .cat-block-header .cat-icon { width: 32px; height: 32px; background: rgba(255,255,255,0.25); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
    .cat-block-header .cat-name { flex: 1; font-size: 14px; font-weight: 600; }
    .cat-block-header .cat-name:hover { text-decoration: underline; }
    .cat-block-header .cat-check { font-size: 14px; opacity: 0.8; }
    .cat-block-header .cat-count { padding: 4px 12px; background: var(--bg-card); border-radius: 6px; font-size: 12px; font-weight: 600; }
    .cat-block-body { background: var(--bg-card); padding: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    @media (max-width: 600px) { .cat-block-body { grid-template-columns: repeat(2, 1fr); } }
    .cat-site { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-input); border-radius: 6px; font-size: 12px; color: var(--text-primary); transition: all 0.2s; }
    .cat-site:hover { background: var(--bg-hover); transform: translateX(5px); color: #ff5722; }
    .cat-site .num { width: 18px; height: 18px; background: var(--border-color); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: var(--text-muted); transition: all 0.2s; }
    .cat-site:hover .num { background: #ff5722; color: #fff; }
    .cat-site .name { flex: 1; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cat-site .icon { font-size: 14px; }
    
    /* 分类颜色 */
    .cat-block.orange .cat-block-header { background: linear-gradient(135deg, #ff9800, #f57c00); } .cat-block.orange .cat-count { color: #ff9800; }
    .cat-block.pink .cat-block-header { background: linear-gradient(135deg, #e91e63, #c2185b); } .cat-block.pink .cat-count { color: #e91e63; }
    .cat-block.cyan .cat-block-header { background: linear-gradient(135deg, #00bcd4, #0097a7); } .cat-block.cyan .cat-count { color: #00bcd4; }
    .cat-block.purple .cat-block-header { background: linear-gradient(135deg, #9c27b0, #7b1fa2); } .cat-block.purple .cat-count { color: #9c27b0; }
    .cat-block.amber .cat-block-header { background: linear-gradient(135deg, #ffc107, #ffa000); } .cat-block.amber .cat-count { color: #ffc107; }
    .cat-block.teal .cat-block-header { background: linear-gradient(135deg, #009688, #00796b); } .cat-block.teal .cat-count { color: #009688; }
    .cat-block.indigo .cat-block-header { background: linear-gradient(135deg, #3f51b5, #303f9f); } .cat-block.indigo .cat-count { color: #3f51b5; }
    .cat-block.blue .cat-block-header { background: linear-gradient(135deg, #2196f3, #1976d2); } .cat-block.blue .cat-count { color: #2196f3; }
    .cat-block.green .cat-block-header { background: linear-gradient(135deg, #4caf50, #388e3c); } .cat-block.green .cat-count { color: #4caf50; }
    .cat-block.red .cat-block-header { background: linear-gradient(135deg, #f44336, #d32f2f); } .cat-block.red .cat-count { color: #f44336; }
    .cat-block.brown .cat-block-header { background: linear-gradient(135deg, #795548, #5d4037); } .cat-block.brown .cat-count { color: #795548; }
    .cat-block.gray .cat-block-header { background: linear-gradient(135deg, #607d8b, #455a64); } .cat-block.gray .cat-count { color: #607d8b; }
    .cat-block.lime .cat-block-header { background: linear-gradient(135deg, #8bc34a, #689f38); } .cat-block.lime .cat-count { color: #8bc34a; }
    .cat-block.deeporange .cat-block-header { background: linear-gradient(135deg, #ff5722, #e64a19); } .cat-block.deeporange .cat-count { color: #ff5722; }
    .cat-block.deeppurple .cat-block-header { background: linear-gradient(135deg, #673ab7, #512da8); } .cat-block.deeppurple .cat-count { color: #673ab7; }
    .cat-block.lightblue .cat-block-header { background: linear-gradient(135deg, #03a9f4, #0288d1); } .cat-block.lightblue .cat-count { color: #03a9f4; }

    .cat-title-link {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        color: var(--text-primary);
        font-size: 18px;
        font-weight: 700;
        padding: 8px 16px;
        border-radius: 6px;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    .cat-title-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(99,102,241,0.1), transparent);
        transition: left 0.5s ease;
    }
    .cat-title-link:hover::before {
        left: 100%;
    }
    .cat-title-link:hover {
        background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1));
        transform: translateX(5px);
    }
    .cat-title-link .icon {
        font-size: 24px;
        transition: transform 0.3s ease;
    }
    .cat-title-link:hover .icon {
        transform: scale(1.2) rotate(10deg);
    }
    .cat-title-link .cat-name-text {
        transition: color 0.3s ease;
    }
    .cat-title-link:hover .cat-name-text {
        color: #6366f1;
    }
    .cat-title-link .arrow {
        opacity: 0;
        transform: translateX(-10px);
        transition: all 0.3s ease;
        color: #6366f1;
        font-weight: 700;
    }
    .cat-title-link:hover .arrow {
        opacity: 1;
        transform: translateX(0);
    }
    .related-inline-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        margin-bottom: 2px;
    }

    .shuffle-btn {
        padding: 8px 16px;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .shuffle-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
    }
    .shuffle-btn:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }
    #relatedGrid {
        transition: all 0.3s ease;
    }