/*

Theme Name: Fenghuo AI

Theme URI: https://fenghuo.tv

Author: Fenghuo AI Team

Author URI: https://fenghuo.tv

Description: A specialized theme for AI Workflow & Tools curation. Focuses on automation, clean design, and tech stack visualization.

Version: 2.0.0

Text Domain: fenghuo-ai

*/



/* 

 * Premium Light Bento Design System (High-End Professional)

 * Focused on Clarity, Subtle Depth, and Grand Typography

 */

:root {

    /* Premium Light Palette */

    --bg-color: #f8fafc;

    /* Light Slate Tint for depth */

    --card-bg: #ffffff;

    /* Pure White Surface */

    --header-bg: rgba(255, 255, 255, 0.85);



    /* Brand Colors - Royal Indigo */

    --primary-color: #4338ca;

    /* Indigo 700 */

    --primary-soft: #eef2ff;

    /* Indigo 50 */

    --primary-glow: rgba(67, 56, 202, 0.08);



    /* Typography & Light Borders */

    --text-main: #0f172a;

    /* Deep Slate 900 */

    --text-muted: #64748b;

    /* Slate 500 */

    --border-color: #e2e8f0;

    /* Slate 200 */

    --glass-border: rgba(255, 255, 255, 0.5);



    /* Sophisticated Soft Elevation */

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);

    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08);

    --shadow-premium: 0 20px 25px -5px rgba(0, 0, 0, 0.04), 0 10px 10px -5px rgba(0, 0, 0, 0.04);



    /* Component Defaults */

    --card-radius: 16px;

    --bento-radius: 24px;

}



/* Base resets & Clean Premium Body */

body {

    background-color: var(--bg-color);

    background-image:

        radial-gradient(circle at top right, rgba(67, 56, 202, 0.03) 0%, transparent 40%),

        radial-gradient(circle at top left, rgba(14, 165, 233, 0.02) 0%, transparent 40%);

    background-attachment: fixed;

    color: var(--text-main);

    font-family: 'Inter', -apple-system, system-ui, sans-serif;

    line-height: 1.6;

    margin: 0;

    -webkit-font-smoothing: antialiased;

}



/* Ensure Light Mode is always active and 'grand' */

html,

html.dark-mode {

    --bg-color: #f8fafc;

    --card-bg: #ffffff;

    --text-main: #0f172a;

    --text-muted: #64748b;

    --border-color: #e2e8f0;

}



/* Skeleton Loading Animation */

@keyframes shimmer {

    0% {

        background-position: -200% 0;

    }



    100% {

        background-position: 200% 0;

    }

}



.skeleton {

    background: linear-gradient(90deg, var(--card-bg) 25%, var(--border-color) 50%, var(--card-bg) 75%);

    background-size: 200% 100%;

    animation: shimmer 1.5s infinite;

    border-radius: 4px;

}



.skeleton-card {

    height: 280px;

    border-radius: 12px;

}



.skeleton-text {

    height: 1em;

    margin: 10px 0;

}



.skeleton-title {

    height: 1.5em;

    width: 70%;

}



body {

    background-color: var(--bg-color);

    color: var(--text-main);

    font-family: 'Inter', system-ui, -apple-system, sans-serif;

    line-height: 1.6;

    margin: 0;

    -webkit-font-smoothing: antialiased;

}



a {

    color: var(--primary-color);

    text-decoration: none;

    transition: all 0.2s ease;

}



a:hover {

    color: var(--primary-color);

    opacity: 0.8;

}



.container {

    max-width: 1200px !important;

    margin-left: auto !important;

    margin-right: auto !important;

    padding-left: 20px !important;

    padding-right: 20px !important;

    width: 100%;

}



/* ==================== SITE HEADER ==================== */

.site-header {

    background: var(--header-bg);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border-bottom: 1px solid var(--border-color);

    padding: 12px 0;

    position: sticky;

    top: 0;

    z-index: 1000;

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);

}



.site-header .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.site-header .logo a {

    font-weight: 800;

    font-size: 1.25rem;

    color: var(--text-main) !important;

    display: flex;

    align-items: center;

    gap: 10px;

    letter-spacing: -0.02em;

}



/* ==================== NAVIGATION ==================== */

.main-navigation ul {

    margin: 0;

    padding: 0;

    list-style: none;

    display: flex;

    gap: 30px;

}



.main-navigation ul li a {

    color: var(--text-muted);

    font-weight: 500;

    font-size: 0.95rem;

    padding: 12px 0;

    position: relative;

    transition: all 0.2s ease;

}



.main-navigation ul li a::after {

    content: '';

    position: absolute;

    bottom: -2px;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--primary-color);

    transition: width 0.2s ease;

    border-radius: 2px;

}



.main-navigation ul li a:hover {

    color: var(--text-main);

}



.main-navigation ul li a:hover::after {

    width: 100%;

}



.main-navigation ul li.current-menu-item a {

    color: var(--primary-color);

}



.main-navigation ul li.current-menu-item a::after {

    width: 100%;

}



/* ==================== AUTH BUTTONS ==================== */

.header-auth {

    display: flex;

    align-items: center;

    gap: 12px;

}



.auth-btn {

    padding: 8px 18px;

    border-radius: 50px;

    font-size: 0.9rem;

    font-weight: 600;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.login-btn {

    color: var(--text-muted);

}



.login-btn:hover {

    color: var(--primary-color);

    background: var(--primary-soft);

}



.register-btn {

    background: var(--primary-color);

    color: #ffffff !important;

    box-shadow: 0 4px 12px rgba(67, 56, 202, 0.2);

}



.register-btn:hover {

    background: #3730a3;

    transform: translateY(-2px);

    box-shadow: 0 6px 16px rgba(67, 56, 202, 0.3);

}



.account-btn {

    background: var(--primary-soft);

    color: var(--primary-color) !important;

}



.logout-btn {

    color: var(--text-muted);

    font-size: 0.85rem;

}



.logout-btn:hover {

    color: #ef4444;

}



@media screen and (max-width: 1024px) {

    .main-navigation ul {

        gap: 15px;

    }

}



@media screen and (max-width: 768px) {

    .header-auth {

        display: none;

        /* Hide on mobile by default, or move into mobile menu */

    }

}



/* ==================== CORE COMPONENTS ==================== */

.workflow-card,

.model-card,

.tool-card {

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    border-radius: var(--card-radius);

    overflow: hidden;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    box-shadow: var(--shadow-sm);

}



.workflow-card:hover,

.model-card:hover,

.tool-card:hover {

    transform: translateY(-8px);

    border-color: var(--primary-color);

    box-shadow: var(--shadow-premium);

}



.workflow-card .card-thumb {

    height: 180px;

    position: relative;

    overflow: hidden;

    background: #f1f5f9;

}



.workflow-card .card-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);

}



.workflow-card:hover .card-thumb img {

    transform: scale(1.08);

}



.card-body {

    padding: 28px;

}



.card-title {

    font-size: 1.25rem;

    font-weight: 800;

    color: var(--text-main);

    margin-bottom: 12px;

    line-height: 1.4;

    letter-spacing: -0.02em;

}



.workflow-card:hover .card-title {

    color: var(--primary-color);

}



/* ==================== MOBILE NAVIGATION ==================== */

.mobile-menu-toggle {

    display: none;

    background: transparent;

    border: none;

    cursor: pointer;

    padding: 8px;

    z-index: 1100;

    position: relative;

}



.mobile-menu-toggle span {

    display: block;

    width: 24px;

    height: 2px;

    background: var(--text-main);

    margin: 5px 0;

    transition: all 0.3s ease;

}



@media screen and (max-width: 768px) {

    .mobile-menu-toggle {

        display: block;

    }



    .main-navigation {

        position: fixed;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background: var(--card-bg);

        z-index: 1050;

        display: flex;

        align-items: center;

        justify-content: center;

        opacity: 0;

        visibility: hidden;

        transition: all 0.3s ease;

    }



    .main-navigation.active {

        opacity: 1;

        visibility: visible;

    }



    .main-navigation ul {

        flex-direction: column;

        gap: 32px;

        text-align: center;

    }



    .main-navigation ul li a {

        font-size: 1.5rem;
        color: var(--text-main);

    }



    .mobile-menu-toggle.active span:nth-child(1) {

        transform: rotate(45deg) translate(5px, 5px);

    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }

    /* 移动端 Auth Links 显示在菜单内 */
    .mobile-auth-links {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-top: 40px;
        padding-top: 24px;
        border-top: 1px solid var(--border-color);
    }

    .mobile-auth-links a {
        padding: 12px 24px;
        text-align: center;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 8px;
    }

    .mobile-auth-links .register-link {
        background: var(--primary-color);
        color: #fff !important;
    }
}

/* ==================== 📱 GLOBAL MOBILE FIXES ==================== */
@media screen and (max-width: 768px) {

    /* 防止水平溢出 */
    html,
    body {
        overflow-x: hidden !important;
    }

    /* Container 自适应 */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
    }

    /* ===== Site Header 完整布局修复 ===== */
    .site-header {
        padding: 10px 0 !important;
    }

    .site-header .container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .site-header .logo {
        flex: 1;
    }

    .site-header .logo a {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
    }

    /* 汉堡菜单按钮优化 */
    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        padding: 8px !important;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 1100;
        order: 2;
        /* 确保在右边 */
    }

    .mobile-menu-toggle span {
        width: 20px !important;
        height: 2px !important;
        background: var(--text-main) !important;
        margin: 3px 0 !important;
        transition: all 0.3s ease;
    }

    /* 隐藏桌面端导航和认证按钮 */
    .main-navigation:not(.active) {
        display: none !important;
    }

    .header-auth {
        display: none !important;
    }

    /* ===== Hero Section 移动端 ===== */
    .hero-section {
        padding: 70px 12px 40px !important;
    }

    .hero-section h1 {
        font-size: 1.6rem !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }

    .hero-section p {
        font-size: 0.9rem !important;
        margin-bottom: 24px !important;
    }

    /* 搜索框移动端 */
    .search-form-hero {
        max-width: 100% !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    }

    /* ===== 全局隐藏桌面专属元素 ===== */
    .desktop-only {
        display: none !important;
    }

    /* ===== 列表/网格页面移动端适配 ===== */
    .workflow-grid,
    .model-grid,
    .tool-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 0 !important;
    }

    .workflow-card .card-thumb,
    .model-card .card-thumb,
    .tool-card .card-thumb {
        height: 120px !important;
    }

    .card-body {
        padding: 10px 12px !important;
    }

    .card-title {
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }

    .card-excerpt {
        display: none !important;
        /* 移动端隐藏摘要 */
    }

    .card-meta {
        padding-top: 8px !important;
    }

    /* ===== 详情页移动端 ===== */
    .single-content,
    .entry-content {
        padding: 16px !important;
    }

    .entry-header h1 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
    }

    /* ===== 分页移动端 ===== */
    .pagination {
        gap: 4px !important;
    }

    .pagination .page-numbers {
        min-width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }

    /* ===== 侧边栏移动端隐藏 ===== */
    .sidebar,
    aside.widget-area {
        display: none !important;
    }

    /* ===== Footer 移动端 ===== */
    .site-footer .container {
        padding: 30px 12px !important;
    }

    .footer-links {
        flex-direction: column !important;
        gap: 20px !important;
    }
}


/* ==================== FILTERS & PILLS ==================== */

.navigation-filters {

    display: flex;

    justify-content: center;

    gap: 12px;

    margin-bottom: 24px;

    flex-wrap: wrap;

}



.filter-label {

    color: var(--text-muted);

    align-self: center;

    font-weight: 600;

    margin-right: 8px;

    font-size: 0.9rem;

}



.filter-pill {

    padding: 8px 18px;

    background: var(--card-bg);

    color: var(--text-main);

    border: 1px solid var(--border-color);

    border-radius: 50px;

    text-decoration: none;

    font-size: 0.9rem;

    font-weight: 500;

    transition: all 0.2s ease;

}



.filter-pill:hover {

    border-color: var(--primary-color);

    color: var(--primary-color);

}



.filter-pill.active {

    background: var(--primary-color);

    color: white;

    border-color: var(--primary-color);

    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);

}



.filter-count {

    opacity: 0.6;

    font-size: 0.8rem;

    margin-left: 4px;

}



/* ==================== PAGINATION ==================== */

.pagination {

    margin-top: 64px;

    text-align: center;

    display: flex;

    justify-content: center;

    gap: 8px;

}



.pagination .page-numbers {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 40px;

    height: 40px;

    padding: 0 8px;

    border-radius: 8px;

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    color: var(--text-main);

    font-weight: 600;

    transition: all 0.2s;

}



.pagination .page-numbers:hover {

    border-color: var(--primary-color);

    color: var(--primary-color);

}



.pagination .page-numbers.current {

    background: var(--primary-color);

    color: white;

    border-color: var(--primary-color);

}



/* ==================== HERO SECTION ==================== */

.hero-section {

    background: var(--bg-color);

    padding: 130px 20px 100px;

    text-align: center;

    color: var(--text-main);

    border-bottom: 1px solid var(--border-color);

    position: relative;

    overflow: hidden;

}



.hero-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 100%;

    height: 100%;

    background: radial-gradient(circle at center top, rgba(67, 56, 202, 0.05) 0%, transparent 70%);

    pointer-events: none;

}



.hero-section h1 {

    font-size: 4.5rem;

    margin-bottom: 24px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.04em;

    color: var(--text-main);

}



.hero-section p {

    font-size: 1.25rem;

    color: var(--text-muted);

    max-width: 640px;

    margin: 0 auto 64px;

    line-height: 1.6;

}



/* ==================== SEARCH FORM ==================== */

.search-form {

    max-width: 640px;

    margin: 0 auto;

    position: relative;

    background: #ffffff;

    border: 1px solid var(--border-color);

    border-radius: 12px;

    padding: 4px;

    box-shadow: var(--shadow-md);

    transition: all 0.3s ease;

}



.search-form:focus-within {

    border-color: var(--primary-color);

    box-shadow: 0 0 20px rgba(67, 56, 202, 0.05), var(--shadow-md);

}



.search-field {

    width: 100%;

    padding: 18px 24px;

    border-radius: 8px;

    border: none;

    background: transparent;

    color: var(--text-main);

    font-size: 1rem;

    outline: none;

}



.search-field::placeholder {

    color: var(--text-muted);

}



.search-submit {

    position: absolute;

    right: 8px;

    top: 8px;

    bottom: 8px;

    background: var(--primary-color);

    border: none;

    color: white;

    padding: 0 28px;

    border-radius: 8px;

    cursor: pointer;

    font-weight: 700;

    font-size: 0.95rem;

    transition: all 0.2s ease;

}



.search-submit:hover {

    background: #3730a3;

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(67, 56, 202, 0.2);

}



/* ==================== SECTION HEADERS ==================== */

.section-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 48px;

    border-bottom: 1px solid var(--border-color);

    padding-bottom: 16px;

}



.section-header h2 {

    font-size: 1.5rem;

    margin: 0;

    font-weight: 700;

    color: var(--text-main);

    letter-spacing: -0.02em;

    position: relative;

    padding-left: 12px;

}



.section-header h2::before {

    content: '';

    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 3px;

    height: 18px;

    background: var(--primary-color);

    border-radius: 4px;

}



.view-all-link {

    font-weight: 600;

    color: var(--text-muted);

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 0.85rem;

    transition: all 0.2s ease;

    padding-bottom: 2px;

}



.view-all-link:hover {

    color: var(--primary-color);

}



/* ==================== GRIDS ==================== */

/* ==================== CORE GRID & CARD LAYOUTS ==================== */

.workflow-grid,

.model-grid,

.tool-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

    gap: 30px;

    margin-bottom: 60px;

}



.card-title {

    margin: 0;

    font-size: 1.15rem;

    font-weight: 800;

    color: var(--text-main);

    line-height: 1.4;

    transition: color 0.2s ease;

}



.card-subtitle {

    color: var(--text-muted);

    font-size: 0.85rem;

    margin-bottom: 15px;

}



.card-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 15px;

}



/* ==================== CORE CARD COMPONENTS ==================== */

.workflow-card,

.model-card,

.tool-card {

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    border-radius: var(--card-radius);

    overflow: hidden;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    box-shadow: var(--shadow-sm);

    height: 100%;

    display: flex;

    flex-direction: column;

}



.workflow-card:hover,

.model-card:hover,

.tool-card:hover {

    transform: translateY(-5px);

    border-color: var(--primary-color);

    box-shadow: var(--shadow-md);

}



.workflow-card .card-thumb {

    height: 200px;

    position: relative;

    overflow: hidden;

    background: #f8fafc;

    border-bottom: 1px solid var(--border-color);

}



.workflow-card .card-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;

}



.workflow-card:hover .card-thumb img {

    transform: scale(1.05);

}



.card-body {

    padding: 24px;

    flex: 1;

    display: flex;

    flex-direction: column;

}



.card-title {

    font-size: 1.15rem;

    font-weight: 800;

    color: var(--text-main);

    margin-bottom: 12px;

    line-height: 1.4;

    letter-spacing: -0.01em;

}



.workflow-card:hover .card-title {

    color: var(--primary-color);

}



.card-excerpt {

    font-size: 0.95rem;

    color: var(--text-muted);

    line-height: 1.6;

    margin-bottom: 20px;

}



/* Premium Badges & Tags */

.card-badge {

    background: var(--primary-soft);

    color: var(--primary-color);

    padding: 4px 12px;

    border-radius: 6px;

    font-size: 0.75rem;

    font-weight: 700;

    transition: all 0.2s ease;

    display: inline-block;

    border: 1px solid rgba(67, 56, 202, 0.1);

}



.tag-price {

    background: #f0fdf4;

    color: #16a34a;

    padding: 3px 10px;

    border-radius: 6px;

    font-size: 0.7rem;

    font-weight: 700;

    border: 1px solid #dcfce7;

}



.tag-vpn {

    background: #fffbeb;

    color: #d97706;

    padding: 3px 10px;

    border-radius: 6px;

    font-size: 0.7rem;

    font-weight: 700;

    border: 1px solid #fef3c7;

}



/* Metadata & Content */

.card-excerpt {

    font-size: 0.9rem;

    color: var(--text-muted);

    line-height: 1.5;

    margin-bottom: 15px;

}



.card-meta {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: auto;

    padding-top: 15px;

    border-top: 1px dashed var(--border-color);

}



.meta-label {

    color: var(--text-muted);

    font-size: 0.65rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.meta-value {

    font-size: 0.9rem;

    font-weight: 800;

    color: var(--primary-color);

}



/* Side Icon Layout (Special for Models/Tools) */

.model-card a,

.tool-card a {

    display: flex !important;

    gap: 20px;

    padding: 24px !important;

    height: 100%;

}



.card-icon {

    width: 60px;

    height: 60px;

    flex-shrink: 0;

    background: #ffffff;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--border-color);

    box-shadow: var(--shadow-sm);

    transition: all 0.3s ease;

}



.card-icon .icon-img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}



.card-icon .emoji-icon {

    font-size: 1.5rem;

}



.model-card:hover .card-icon,

.tool-card:hover .card-icon {

    transform: scale(1.05);

}



.card-content {

    flex: 1;

    display: flex;

    flex-direction: column;

}



.model-card:hover .card-icon {

    border-color: var(--primary-color);

    background: var(--primary-soft);

}



.tool-card:hover .card-icon {

    border-color: #0ea5e9;

    background: #f0f9ff;

}



.card-excerpt {

    font-size: 0.85rem;

    color: var(--text-muted);

    line-height: 1.5;

    margin: 8px 0 0;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    /* Cross-browser compatibility */

    -webkit-box-orient: vertical;

    overflow: hidden;

    opacity: 0.8;

}



/* Global Mobile Prevention */

body {

    overflow-x: hidden;

    width: 100%;

}



/* ==================== SINGLE PAGE LAYOUTS ==================== */

.single-workflow-container,

.single-model-container,

.single-tool-container {

    padding: 60px 20px;

}



.workflow-main-grid,

.model-main-header {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 40px;

    margin-bottom: 50px;

}



@media (max-width: 992px) {



    .workflow-main-grid,

    .model-main-header {

        grid-template-columns: 1fr;

        gap: 30px;

    }

}



.model-main-header {

    grid-template-columns: 1fr 300px;

}



.single-title {

    font-size: 2.5rem;

    margin: 0 0 15px;

    color: var(--text-main);

    line-height: 1.2;

}



/* Badges & Meta */

.tool-stack,

.model-meta-row,

.tool-meta-row {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin-bottom: 30px;

}



.badge,

.card-badge {

    background: rgba(123, 104, 238, 0.15);

    color: var(--primary-color);

    padding: 5px 12px;

    border-radius: 20px;

    font-size: 0.85rem;

    border: 1px solid rgba(123, 104, 238, 0.3);

}



.license-badge {

    background: rgba(255, 255, 255, 0.1);

    padding: 4px 12px;

    border-radius: 4px;

    font-size: 0.85rem;

    color: var(--text-main);

}



.publisher-info {

    color: var(--text-muted);

    font-size: 0.9rem;

}



/* Config Block */

.config-block {

    margin-top: 50px;

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    overflow: hidden;

}



.config-header {

    background: #f8fafc;

    padding: 16px 24px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: 1px solid var(--border-color);

}



.config-label {

    font-weight: 700;

    color: var(--text-main);

}



.config-header .actions {

    display: flex;

    gap: 10px;

}



.download-btn,

.copy-btn {

    padding: 8px 16px;

    border-radius: 4px;

    cursor: pointer;

    font-size: 0.9rem;

    font-weight: bold;

    border: none;

    transition: 0.2s;

}



.download-btn {

    background: var(--accent-color);

    color: #000;

}



.copy-btn {

    background: var(--primary-color);

    color: white;

}



.config-body pre {

    margin: 0;

    padding: 24px;

    background: var(--code-bg);

    color: var(--text-main);

    overflow-x: auto;

    max-height: 500px;

    font-family: 'Fira Code', 'Menlo', 'Monaco', 'Courier New', monospace;

    font-size: 0.9rem;

    white-space: pre-wrap;

    word-wrap: break-word;

    overflow-wrap: anywhere;

    word-break: break-all;

    line-height: 1.5;

}



/* Sidebar */

.single-sidebar {

    background: var(--card-bg);

    padding: 30px;

    border-radius: 12px;

    border: 1px solid var(--border-color);

    height: fit-content;

}



.sidebar-title {

    margin-top: 0;

    margin-bottom: 20px;

    color: var(--text-main);

}



.sidebar-stats {

    list-style: none;

    padding: 0;

    margin: 0;

    color: var(--text-muted);

}



.sidebar-stats li {

    margin-bottom: 15px;

    display: flex;

    justify-content: space-between;

}



.stat-value {

    color: var(--text-main);

}



.sidebar-stats .stat-value {

    font-size: 1rem;

    font-weight: normal;

    text-align: right;

}



.sidebar-action {

    margin-top: 30px;

}



.button-preview {

    display: block;

    width: 100%;

    text-align: center;

    background: rgba(255, 255, 255, 0.1);

    color: var(--text-main);

    padding: 12px;

    border-radius: 6px;

    transition: 0.2s;

}



.sidebar-related {

    margin-top: 30px;

    padding-top: 20px;

    border-top: 1px solid var(--border-color);

}



.related-model-item {

    display: block;

    background: var(--code-bg);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    padding: 16px;

    margin-bottom: 12px;

    text-decoration: none;

    color: inherit;

    transition: all 0.2s ease;

}



.related-model-item:hover {

    border-color: var(--primary-color);

    background: var(--card-bg);

    transform: translateX(4px);

}



.related-title {

    font-weight: bold;

    color: var(--text-main);

    margin-bottom: 5px;

}



.related-meta {

    font-size: 0.8rem;

    color: var(--accent-color);

}



/* Hardware Stats Card */

.hardware-stats-card {

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    padding: 25px;

}



.stats-title {

    margin: 0 0 20px;

    font-size: 1rem;

    color: var(--text-muted);

}



.stat-item {

    margin-bottom: 15px;

}



.stat-label {

    color: var(--text-muted);

    font-size: 0.85rem;

}



.stat-value {

    font-size: 1.5rem;

    font-weight: bold;

}



.vram-min {

    color: var(--accent-color);

}



.vram-rec {

    color: #4ade80;

}



.ram-min {

    font-size: 1.2rem;

    color: var(--text-main);

}



.download-model-btn {

    display: block;

    text-align: center;

    margin-top: 25px;

    padding: 12px;

    background: var(--primary-color);

    color: white;

    border-radius: 8px;

    font-weight: bold;

}



/* Content Sections */

.model-single-content,

.tool-single-content,

.hardware-table-card,

.deploy-card,

.related-workflows-card {

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    padding: 40px;

    margin-bottom: 40px;

}



.section-title {

    margin: 0 0 25px;

    font-size: 1.5rem;

}



/* Table Wrapper */

.responsive-table-wrapper {

    overflow-x: auto;

}



.responsive-table-wrapper table {

    width: 100%;

    border-collapse: collapse;

    font-size: 0.95rem;

}



.responsive-table-wrapper th {

    padding: 12px 15px;

    text-align: left;

    background: rgba(255, 255, 255, 0.05);

    border-bottom: 2px solid var(--border-color);

    color: var(--text-main);

}



.responsive-table-wrapper td {

    padding: 12px 15px;

    color: var(--text-muted);

    border-bottom: 1px solid var(--border-color);

}



.emoji-good {

    color: #4ade80;

}



.emoji-warning {

    color: #fbbf24;

}



.emoji-bad {

    color: #f87171;

}



/* Deploy Card */

.deploy-badges {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}



.badge-large {

    background: rgba(123, 104, 238, 0.15);

    color: var(--primary-color);

    padding: 10px 20px;

    border-radius: 8px;

    font-weight: 500;

}



/* Tool Header */

.tool-single-header {

    display: flex;

    gap: 30px;

    align-items: flex-start;

    margin-bottom: 40px;

}



.tool-icon-wrapper {

    width: 100px;

    height: 100px;

    flex-shrink: 0;

    background: var(--card-bg);

    border-radius: 16px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--border-color);

}



.tool-icon-wrapper img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}



.tool-header-info {

    flex: 1;

}



.badge-price {

    background: rgba(74, 222, 128, 0.15);

    color: #4ade80;

    padding: 4px 12px;

    border-radius: 4px;

    font-size: 0.85rem;

}



.badge-vpn {

    background: rgba(251, 191, 36, 0.15);

    color: #fbbf24;

    padding: 4px 12px;

    border-radius: 4px;

    font-size: 0.85rem;

}



.price-range {

    color: var(--accent-color);

    font-weight: bold;

}



.tool-excerpt {

    color: var(--text-muted);

    font-size: 1.1rem;

    margin: 0;

    line-height: 1.6;

}



/* Access Card */

.tool-access-card {

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    padding: 30px;

}



/* ==================== AI NEWS FEED ==================== */

.news-feed-main {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 40px;

}



@media (max-width: 992px) {

    .news-feed-main {

        grid-template-columns: 1fr;

    }

}



.news-card {

    display: flex;

    gap: 24px;

    background: var(--card-bg);

    padding: 24px;

    border-radius: 16px;

    border: 1px solid var(--border-color);

    text-decoration: none;

    color: inherit;

    transition: all 0.3s ease;

    margin-bottom: 24px;

}



.news-card:hover {

    border-color: var(--primary-color);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

    transform: translateY(-2px);

}



.news-thumb {

    width: 240px;

    height: 150px;

    flex-shrink: 0;

    background: var(--code-bg);

    border-radius: 12px;

    overflow: hidden;

    position: relative;

    border: 1px solid var(--border-color);

    display: flex;

    align-items: center;

    justify-content: center;

}



.news-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.news-card:hover .news-thumb img {

    transform: scale(1.05);

}



.news-content {

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.news-meta {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 0.8rem;

    color: var(--text-muted);

    margin-bottom: 12px;

}



.news-source-badge {

    color: var(--primary-color);

    background: rgba(99, 102, 241, 0.1);

    padding: 2px 8px;

    border-radius: 4px;

    font-weight: 700;

}



.news-title {

    font-size: 1.25rem;

    font-weight: 800;

    line-height: 1.4;

    margin: 0 0 12px 0;

    color: var(--text-main);

    transition: color 0.2s;

}



.news-card:hover .news-title {

    color: var(--primary-color);

}



.news-excerpt {

    font-size: 0.95rem;

    color: var(--text-muted);

    line-height: 1.6;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



@media (max-width: 640px) {

    .news-card {

        flex-direction: column;

        gap: 16px;

    }



    .news-thumb {

        width: 100%;

        height: 200px;

    }

}



/* Sidebar Hot List */

.hot-list-card {

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    border-radius: 16px;

    padding: 30px;

    position: sticky;

    top: 100px;

}



.hot-news-item {

    display: flex;

    gap: 12px;

    margin-bottom: 20px;

    text-decoration: none;

    color: inherit;

}



.hot-rank {

    font-size: 1.25rem;

    font-weight: 800;

    color: var(--text-muted);

    font-style: italic;

    width: 24px;

    text-align: center;

}



.hot-rank.top-3 {

    color: #ef4444;

}



.hot-info h4 {

    font-size: 0.95rem;

    font-weight: 700;

    line-height: 1.4;

    margin: 0 0 4px 0;

    color: var(--text-main);

    display: -webkit-box;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.hot-news-item:hover h4 {

    color: var(--primary-color);

}



.hot-date {

    font-size: 0.75rem;

    color: var(--text-muted);

}



.access-links-card {

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    padding: 30px;

    margin-bottom: 40px;

}



.card-section-title {

    margin: 0 0 20px;

    font-size: 1.1rem;

    color: var(--text-muted);

}



.access-item {

    margin-bottom: 20px;

}



.access-item:last-child {

    margin-bottom: 0;

}



.access-label {

    color: var(--text-muted);

    font-size: 0.85rem;

    margin-bottom: 8px;

}



.button-primary {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 12px 20px;

    background: var(--primary-color);

    color: white;

    border-radius: 8px;

    font-weight: bold;

}



.mirror-links {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}



.mirror-link {

    display: inline-block;

    padding: 10px 18px;

    background: rgba(74, 222, 128, 0.15);

    color: #4ade80;

    border-radius: 8px;

    font-weight: 500;

}



/* Related Grids */

.standard-workflow-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 20px;

}



.workflow-related-item {

    display: block;

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid var(--border-color);

    border-radius: 8px;

    padding: 20px;

    text-decoration: none;

    color: inherit;

    transition: 0.2s;

}



.related-excerpt {

    margin: 0;

    font-size: 0.9rem;

    color: var(--text-muted);

    display: -webkit-box;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



/* Workflow Card Archive */

.workflow-card .card-thumb {

    height: 180px;

    background: #252a33;

    overflow: hidden;

    position: relative;

}



.workflow-card .no-preview {

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100%;

    color: var(--text-muted);

}



.tag-difficulty {

    position: absolute;

    top: 10px;

    right: 10px;

    background: rgba(0, 0, 0, 0.7);

    padding: 4px 10px;

    border-radius: 4px;

    font-size: 0.75rem;

    text-transform: capitalize;

}



.workflow-card .card-stack {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

}



.workflow-card .badge {

    font-size: 0.75rem;

    background: rgba(123, 104, 238, 0.1);

    border: none;

    border-radius: 4px;

    padding: 2px 8px;

}



.stack-more {

    font-size: 0.75rem;

    color: var(--text-muted);

}



/* Breadcrumb */

.breadcrumb {

    margin-bottom: 30px;

    color: var(--text-muted);

    font-size: 0.9rem;

}



.breadcrumb a {

    color: var(--primary-color);

}



.breadcrumb .sep {

    margin: 0 10px;

}



/* ==================== RESPONSIVE BREAKPOINTS ==================== */



/* Tablet (768px and below) */

@media screen and (max-width: 768px) {



    /* Mobile Navigation */

    /* Grids & Layouts */

    .workflow-main-grid,

    .model-main-header {

        grid-template-columns: 1fr;

        gap: 20px;

    }



    .single-title {

        font-size: 1.8rem !important;

    }



    /* Config Header */

    .config-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }



    .config-header .actions {

        width: 100%;

        gap: 5px;

        flex-wrap: wrap;

    }



    .config-header .actions>button {

        flex: 1;

        padding: 8px 5px;

        font-size: 0.8rem;

    }



    /* Sidebar Fix */

    .single-sidebar {

        margin-top: 20px;

    }



    .sidebar-stats li {

        flex-direction: column;

        align-items: flex-start;

        gap: 5px;

    }



    /* Tool Header Fix */

    .tool-single-header {

        flex-direction: column;

        align-items: center;

        text-align: center;

    }



    .tool-header-info {

        width: 100%;

    }



    .tool-meta-row {

        justify-content: center;

    }



    /* Generic Content Padding */

    .model-single-content,

    .tool-single-content,

    .hardware-table-card,

    .deploy-card,

    .related-workflows-card {

        padding: 20px !important;

    }



    .section-title {

        font-size: 1.2rem !important;

    }



    /* Access Card Stacked */

    .button-primary {

        width: 100%;

        justify-content: center;

        box-sizing: border-box;

    }



    .mirror-links {

        flex-direction: column;

    }



    .mirror-link {

        width: 100%;

        text-align: center;

        box-sizing: border-box;

    }



    .mobile-menu-toggle {

        display: block;

    }



    .main-navigation {

        position: fixed;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background: rgba(15, 17, 21, 0.98);

        z-index: 1000;

        display: flex;

        align-items: center;

        justify-content: center;

        opacity: 0;

        visibility: hidden;

        transition: all 0.3s ease;

    }



    .main-navigation.active {

        opacity: 1;

        visibility: visible;

    }



    .main-navigation ul {

        flex-direction: column !important;

        gap: 25px !important;

        text-align: center;

    }



    .main-navigation ul li a {

        font-size: 1.3rem;

        padding: 10px 20px;

    }



    /* Hero Section */

    .hero-section {

        padding: 40px 15px !important;

        margin-bottom: 30px !important;

    }



    .hero-section h1 {

        font-size: 1.75rem !important;

        line-height: 1.2;

        margin-bottom: 12px;

    }



    .hero-section p {

        font-size: 0.95rem !important;

        margin-bottom: 25px;

    }



    .hero-section .search-form {

        max-width: 100% !important;

        margin-top: 20px;

    }



    .hero-section .search-field {

        padding: 12px 16px !important;

        font-size: 0.9rem !important;

        height: 48px;

    }



    .hero-section .search-submit {

        position: relative !important;

        right: auto !important;

        top: auto !important;

        width: 100%;

        margin-top: 8px;

        padding: 10px 20px !important;

        height: 48px;

    }



    /* Container & Section Spacing */

    .container {

        padding: 0 16px;

    }



    .container>section,

    .mb-5 {

        margin-bottom: 35px !important;

    }



    .section-header {

        margin-bottom: 15px !important;

    }



    .section-header h2 {

        font-size: 1.25rem !important;

    }



    /* Grids - Single Column */

    .workflow-grid,

    .model-grid,

    .tool-grid {

        grid-template-columns: 1fr !important;

        gap: 20px !important;

    }



    /* Model Header - Stack vertically */

    .model-header {

        grid-template-columns: 1fr !important;

        gap: 25px !important;

    }



    .model-header h1 {

        font-size: 1.8rem !important;

    }



    .hardware-card {

        order: -1;

    }



    /* Model/Deploy Sections */

    .model-content,

    .hardware-table-section,

    .deploy-section {

        padding: 25px !important;

    }



    .markdown-table table {

        font-size: 0.85rem !important;

    }



    /* Cards & Grids */

    .card-title {

        font-size: 1.05rem !important;

        margin-bottom: 6px !important;

    }



    .card-body {

        padding: 16px !important;

    }



    .workflow-card .card-thumb,

    .card-thumb {

        height: 140px !important;

    }



    .tool-card .card-inner,

    .model-card .card-inner {

        padding: 12px !important;

        gap: 12px !important;

    }



    .card-icon {

        width: 44px !important;

        height: 44px !important;

        font-size: 1.25rem !important;

    }



    .card-meta {

        gap: 12px !important;

        font-size: 0.8rem !important;

    }



    .side-icon-layout .card-body {

        padding: 0 !important;

    }



    /* Tool Cloud / Category Filters */

    .tool-cloud {

        gap: 8px !important;

        margin-bottom: 5px;

        justify-content: center;

    }



    .tool-cloud a {

        padding: 6px 14px !important;

        font-size: 0.85rem !important;

        border-radius: 50px;

    }



    /* Page Header */

    .page-header h1 {

        font-size: 2rem !important;

    }



    .page-header p {

        font-size: 1rem !important;

    }



    /* Single Page Header */

    header[style*="display: flex"][style*="gap: 30px"] {

        flex-direction: column !important;

        gap: 20px !important;

    }



    /* Single Page Content */

    .tool-content,

    .access-card,

    .related-workflows {

        padding: 20px !important;

    }



    .related-workflows h2 {

        font-size: 1.2rem !important;

    }

}



/* Mobile Small (480px and below) */

@media screen and (max-width: 480px) {



    /* Hero */

    .hero-section h1 {

        font-size: 1.6rem !important;

    }



    .hero-section p {

        font-size: 0.9rem !important;

    }



    /* Headers */

    .section-header h2,

    .page-header h1 {

        font-size: 1.3rem !important;

    }



    /* Cards Extension */

    .card-title {

        font-size: 1.1rem !important;

    }



    .card-meta {

        flex-wrap: wrap;

        gap: 10px;

    }



    .model-card a,

    .tool-card a {

        padding: 15px !important;

    }



    .card-header {

        margin-bottom: 10px !important;

    }



    .card-tags {

        gap: 6px !important;

    }



    /* Single Page */

    h1[style*="font-size: 2.2rem"] {

        font-size: 1.5rem !important;

    }



    /* Tool icon */

    header>div[style*="width: 100px"] {

        width: 70px !important;

        height: 70px !important;

    }



    /* Tags smaller */

    .card-stack span,

    span[style*="padding: 2px 8px"],

    span[style*="padding: 4px 12px"] {

        font-size: 0.7rem !important;

        padding: 2px 6px !important;

    }



    /* Buttons */

    a[style*="padding: 12px 20px"] {

        padding: 10px 16px !important;

        font-size: 0.9rem !important;

    }

}



/* ==================== GENERAL MOBILE ENHANCEMENTS ==================== */

@media screen and (max-width: 768px) {



    /* Smooth scrolling */

    html {

        scroll-behavior: smooth;

    }



    /* Better touch targets */

    a,

    button {

        min-height: 44px;

        display: inline-flex;

        align-items: center;

    }



    /* Prevent horizontal scroll */

    body {

        overflow-x: hidden;

    }



    /* Better images */

    img {

        max-width: 100%;

        height: auto;

    }



    /* Site header fixed */

    .site-header {

        position: sticky;

        top: 0;

        z-index: 999;

    }



    /* Pagination */

    .pagination {

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        gap: 8px;

    }



    .pagination a,

    .pagination span {

        padding: 8px 14px !important;

        font-size: 0.9rem;

    }



    /* Breadcrumb */

    nav[style*="margin-bottom: 30px"] {

        font-size: 0.8rem !important;

        margin-bottom: 20px !important;

    }



    /* Content area */

    .tool-content,

    .model-content {

        font-size: 0.95rem;

        line-height: 1.7;

    }



    .tool-content img,

    .model-content img {

        max-width: 100%;

        height: auto;

    }

}



/* ==================== PAGINATION STYLES ==================== */

.pagination {

    display: flex;

    justify-content: center;

    gap: 5px;

    flex-wrap: wrap;

}



.pagination a,

.pagination span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 40px;

    padding: 10px 15px;

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    border-radius: 8px;

    color: var(--text-main);

    text-decoration: none;

    transition: all 0.2s ease;

}



.pagination a:hover {

    background: var(--primary-color);

    border-color: var(--primary-color);

    color: #fff;

}



.pagination .current {

    background: var(--primary-color);

    border-color: var(--primary-color);

    color: #fff;

}



/* ==================== SEARCH RESULTS MOBILE ==================== */

@media screen and (max-width: 768px) {



    .search-results .workflow-grid,

    .search-results .tool-grid {

        grid-template-columns: 1fr !important;

    }

}



/* ==================== SITE FOOTER ==================== */

.site-footer {

    padding: 60px 0 40px;

    background: #ffffff;

    border-top: 1px solid var(--border-color);

    margin-top: 60px;

}



.footer-grid {

    display: grid;

    grid-template-columns: 2fr repeat(3, 1fr);

    gap: 40px;

    margin-bottom: 40px;

}



@media (max-width: 992px) {

    .footer-grid {

        grid-template-columns: 1fr 1fr;

    }

}



@media screen and (max-width: 768px) {



    /* Footer Spacing */

    .site-footer {

        padding: 40px 0 !important;

        margin-top: 40px !important;

    }



    .footer-grid {

        gap: 30px !important;

    }



    .footer-column h5 {

        margin-bottom: 12px !important;

        font-size: 1rem !important;

    }



    .footer-links li {

        margin-bottom: 8px !important;

    }



    .footer-links a {

        font-size: 0.9rem !important;

    }



    /* Mobile Auth in Menu */

    .mobile-auth-links {

        margin-top: 30px;

        padding-top: 20px;

        border-top: 1px solid rgba(255, 255, 255, 0.1);

        display: flex;

        flex-direction: column;

        gap: 15px;

        width: 100%;

        max-width: 200px;

    }



    .mobile-auth-links a {

        color: #fff;

        font-size: 1.1rem;

        font-weight: 500;

        text-decoration: none;

    }



    .mobile-auth-links .register-link {

        color: var(--primary-color);

        font-weight: 700;

    }



    .mobile-auth-links .logout-link {

        color: #ff4d4f;

        font-size: 0.9rem;

    }

}



.footer-column h4,

.footer-column h5 {

    color: var(--text-main);

    font-weight: 800;

    margin-bottom: 24px;

    font-size: 1.1rem;

}



.footer-column p {

    font-size: 0.95rem;

    line-height: 1.8;

    color: var(--text-muted);

}



.footer-links {

    list-style: none;

    padding: 0;

    margin: 0;

}



.footer-links li {

    margin-bottom: 12px;

}



.footer-links a {

    color: var(--text-muted);

    text-decoration: none;

    font-size: 0.95rem;

    transition: color 0.2s;

}



.footer-links a:hover {

    color: var(--primary-color);

}



.footer-bottom {

    padding-top: 40px;

    border-top: 1px solid var(--border-color);

    text-align: center;

    font-size: 0.9rem;

    color: var(--text-muted);

}



/* Floating Actions */

.floating-actions {

    position: fixed;

    bottom: 30px;

    right: 30px;

    display: flex;

    flex-direction: column;

    gap: 12px;

    z-index: 1000;

}



.action-btn {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: #ffffff;

    color: var(--text-main);

    border: 1px solid var(--border-color);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    font-size: 1.25rem;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}



.action-btn:hover {

    transform: translateY(-4px);

    border-color: var(--primary-color);

    color: var(--primary-color);

    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);

}



.action-btn.primary {

    background: var(--primary-color);

    color: white;

    border: none;

    box-shadow: 0 8px 16px rgba(67, 56, 202, 0.2);

}



.action-btn.hidden {

    opacity: 0;

    visibility: hidden;

    transform: scale(0.8);

}



/* ==================== MOBILE RESPONSIVE OVERRIDES ==================== */

@media screen and (max-width: 768px) {



    /* Fix Horizontal Scroll & Container */

    .container {

        padding-left: 16px !important;

        padding-right: 16px !important;

        width: 100% !important;

        box-sizing: border-box;

    }



    /* Hero Section - Reduce size */

    .hero-section {

        padding: 80px 16px 60px !important;

    }



    .hero-section h1 {

        font-size: 2.5rem !important;

        line-height: 1.1;

    }



    .hero-section p {

        font-size: 1rem !important;

        margin-bottom: 40px !important;

    }



    /* Grids - Force single column and remove fixed width constraints */

    .workflow-grid,

    .model-grid,

    .tool-grid {

        grid-template-columns: 1fr !important;

        /* Stack cards */

        gap: 20px !important;

    }



    /* Override inline style if present in PHP */

    div[style*='grid-template-columns'] {

        grid-template-columns: 1fr !important;

    }



    /* Cards - Compact View */

    .workflow-card .card-thumb,

    .model-card .card-thumb,

    .tool-card .card-thumb {

        height: 140px !important;

        /* Reduced from 180px */

    }



    /* Scale down the big icons in the placeholders */

    .workflow-card .card-thumb span[style*="font-size: 3rem"] {

        font-size: 2rem !important;

    }



    .card-body {

        padding: 20px !important;

    }



    .card-title {

        font-size: 1.1rem !important;

    }



    /* Search Form */

    .search-form {

        padding: 4px;

    }



    .search-field {

        padding: 12px 16px;

        font-size: 0.9rem;

    }



    .search-submit {

        position: relative;

        right: auto;

        top: auto;

        bottom: auto;

        width: 100%;

        margin-top: 8px;

        padding: 12px 0;

    }



    /* Section Headers */

    .section-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

        margin-bottom: 30px !important;

    }



    .view-all-link {

        font-size: 0.8rem;

    }



    /* Fix potential overflow from large elements */

    img,

    video,

    iframe {

        max-width: 100%;

        height: auto;

    }

}



/* Fix for duplicated menu items */

.mobile-auth-links {

    display: none;

}



@media screen and (max-width: 768px) {

    .mobile-auth-links {

        display: flex;

        flex-direction: column;

        gap: 15px;

        margin-top: 20px;

        border-top: 1px solid var(--border-color);

        padding-top: 20px;

    }



    .mobile-auth-links a {

        color: var(--text-muted);

        font-weight: 600;

        font-size: 1.1rem;

    }



    .mobile-auth-links .register-link {

        color: var(--primary-color);

    }

}



/* ==================== ENHANCED MOBILE FIXES ==================== */

@media screen and (max-width: 480px) {



    /* Hero Section - 更紧凑的布局 */

    .hero-section {

        padding: 30px 16px 25px !important;

        margin-bottom: 20px !important;

    }



    .hero-section h1 {

        font-size: 1.5rem !important;

        line-height: 1.3;

        margin-bottom: 10px;

    }



    .hero-section p {

        font-size: 0.85rem !important;

        margin-bottom: 20px;

        line-height: 1.5;

    }



    /* 搜索框优化 */

    .hero-section .search-form {

        padding: 8px !important;

        border-radius: 10px;

    }



    .hero-section .search-field {

        padding: 10px 14px !important;

        font-size: 0.85rem !important;

        height: 44px;

    }



    .hero-section .search-submit {

        height: 44px;

        font-size: 0.9rem !important;

        padding: 8px 16px !important;

    }



    /* Footer - 单列布局 */

    .footer-grid {

        grid-template-columns: 1fr !important;

        gap: 25px !important;

        text-align: left;

    }



    .footer-column {

        border-bottom: 1px solid var(--border-color);

        padding-bottom: 20px;

    }



    .footer-column:last-child {

        border-bottom: none;

        padding-bottom: 0;

    }



    .footer-column h5,

    .footer-column h4 {

        font-size: 1rem !important;

        margin-bottom: 12px;

    }



    .footer-links {

        display: flex;

        flex-wrap: wrap;

        gap: 8px 16px;

    }



    .footer-links li {

        margin-bottom: 0 !important;

    }



    .footer-links a {

        font-size: 0.85rem !important;

    }



    .footer-bottom {

        flex-direction: column;

        gap: 10px;

        text-align: center;

        font-size: 0.8rem;

    }



    /* 工作流卡片 - 更紧凑 */

    .workflow-card .card-thumb,

    .model-card .card-thumb {

        height: 120px !important;

    }



    .card-body {

        padding: 16px !important;

    }



    .card-title {

        font-size: 1rem !important;

        margin-bottom: 8px;

        line-height: 1.3;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        overflow: hidden;

    }



    .card-excerpt {

        font-size: 0.8rem !important;

        -webkit-line-clamp: 2 !important;

    }



    /* 标签更小 */

    .card-tags .tag,

    .tool-tag {

        padding: 3px 8px !important;

        font-size: 0.7rem !important;

    }



    /* 单篇文章页面 */

    .single-workflow-header,

    .single-ai_workflow .page-header {

        padding: 20px 16px !important;

    }



    .single-workflow-header h1,

    .single-ai_workflow .page-title {

        font-size: 1.3rem !important;

        line-height: 1.4;

    }



    /* 面包屑 - 自动换行 */

    .breadcrumb {

        font-size: 0.75rem !important;

        flex-wrap: wrap;

        gap: 4px;

    }



    .breadcrumb a,

    .breadcrumb span {

        white-space: normal;

        word-break: break-word;

    }



    /* 侧边栏在移动端全宽 */

    .content-sidebar-wrapper {

        flex-direction: column !important;

    }



    .main-content,

    .sidebar {

        width: 100% !important;

        max-width: 100% !important;

    }



    .sidebar {

        margin-top: 30px;

    }



    /* Section Headers */

    .section-title {

        font-size: 1.2rem !important;

    }



    /* 回到顶部按钮位置调整 */

    .back-to-top {

        bottom: 70px !important;

        right: 15px !important;

        width: 40px !important;

        height: 40px !important;

    }



    /* 容器边距 */

    .container {

        padding-left: 16px !important;

        padding-right: 16px !important;

    }



    /* 网格间距 */

    .workflow-grid,

    .model-grid,

    .tool-grid {

        gap: 15px !important;

    }

}



/* 超小屏幕优化 (< 360px) */

@media screen and (max-width: 360px) {

    .hero-section h1 {

        font-size: 1.25rem !important;

    }



    .hero-section p {

        font-size: 0.8rem !important;

    }



    .card-title {

        font-size: 0.95rem !important;

    }



    .footer-links {

        flex-direction: column;

        gap: 6px;

    }

}



/* ==================== SINGLE WORKFLOW PAGE FIXES ==================== */

/* 隐藏 post-content 中可能重复的标题 */

.single-ai_workflow .post-content>h1:first-child,

.single-ai_workflow .post-content>h2:first-child {

    display: none !important;

}



/* 单篇页面移动端优化 */

@media screen and (max-width: 768px) {



    /* 主标题 */

    .single-ai_workflow .single-title {

        font-size: 1.5rem !important;

        line-height: 1.35;

        margin-bottom: 16px !important;

    }



    /* 两列布局改为单列 */

    .workflow-main-grid {

        display: block !important;

    }



    .single-ai_workflow main {

        width: 100% !important;

    }



    .single-ai_workflow .single-sidebar {

        margin-top: 40px;

        padding: 24px !important;

    }



    /* 工具标签 */

    .single-ai_workflow .tool-stack {

        margin-bottom: 24px !important;

        gap: 8px !important;

    }



    .single-ai_workflow .card-badge {

        padding: 6px 12px !important;

        font-size: 0.75rem !important;

    }



    /* 特色图片 */

    .single-ai_workflow .featured-image {

        margin-bottom: 30px !important;

        border-radius: 12px !important;

    }



    /* 代码块 */

    .single-ai_workflow .config-block {

        border-radius: 12px !important;

    }



    .single-ai_workflow .config-header {

        flex-direction: column !important;

        gap: 12px;

        padding: 16px !important;

    }



    .single-ai_workflow .config-block pre {

        max-height: 300px !important;

        font-size: 0.7rem !important;

    }



    /* 操作按钮 */

    .single-ai_workflow .copy-btn,

    .single-ai_workflow .download-btn {

        padding: 8px 14px !important;

        font-size: 0.8rem !important;

    }

}/* ==========================================================================
   🎨 2025 NEW YEAR REDESIGN - AURORA & XIAOHONGSHU STYLE
   ========================================================================== */

/* 1. Global Variables & Colors */
:root {
    --aurora-1: #ff9a9e;
    --aurora-2: #fad0c4;
    --aurora-3: #a18cd1;
    --aurora-4: #fbc2eb;
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --card-radius: 12px;
}

/* 2. �?Hero Section - Aurora Glassmorphism */
.hero-section {
    position: relative;
    padding: 140px 0 100px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 40px;
}

/* 动态极光背�?*/
.hero-bg-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.shape {
    position: absolute;
    filter: blur(80px);
    opacity: 0.6;
    animation: float 10s infinite ease-in-out;
}

.shape-1 {
    top: -10%;
    left: -10%;
    width: 50vw;
    height: 50vw;
    background: var(--aurora-3);
    animation-delay: 0s;
}

.shape-2 {
    bottom: -20%;
    right: -10%;
    width: 40vw;
    height: 40vw;
    background: var(--aurora-4);
    animation-delay: -5s;
}

.shape-3 {
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 30vw;
    height: 30vw;
    background: var(--aurora-1);
    opacity: 0.4;
    animation-delay: -2s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-20px) scale(1.1);
    }
}

.relative-z {
    position: relative;
    z-index: 2;
}

.hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 24px;
    color: #2d3748;
    letter-spacing: -1px;
}

.text-gradient {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.hero-subtitle {
    font-size: 1.2rem;
    color: #718096;
    margin-bottom: 48px;
    font-weight: 400;
    line-height: 1.6;
}

/* 玻璃拟态搜索框 */
.search-form-hero {
    max-width: 640px;
    margin: 0 auto;
    position: relative;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 100px;
    padding: 8px 8px 8px 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.search-input-wrapper:hover,
.search-input-wrapper:focus-within {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
}

.search-icon {
    font-size: 1.2rem;
    margin-right: 12px;
    opacity: 0.8;
}

.search-field {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1.1rem;
    color: #2d3748;
    outline: none;
    padding: 12px 0;
}

.search-submit {
    background: #333;
    color: #fff;
    border: none;
    padding: 14px 32px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-submit:hover {
    background: #000;
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.hero-tags {
    margin-top: 24px;
    font-size: 0.9rem;
    color: #718096;
}

.hero-tags a {
    color: #4a5568;
    background: rgba(255, 255, 255, 0.5);
    padding: 4px 12px;
    border-radius: 20px;
    margin: 0 4px;
    transition: all 0.2s;
    text-decoration: none;
}

.hero-tags a:hover {
    background: #fff;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 3. 📱 Gallery - Mobile First (Xiaohongshu Style) */
.section-gallery {
    margin-bottom: 40px;
    padding: 0 12px;
}

.section-gallery .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 0;
}

.section-gallery .section-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #333;
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-gallery .view-all-btn {
    font-size: 13px;
    color: #ff2442;
    /* Xiaohongshu Red */
    font-weight: 500;
}

/* Waterfall Grid (Double Column) */
.gallery-waterfall {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

/* Gallery Card (Minimalist) */
.gallery-card {
    background: transparent;
    border: none;
    cursor: pointer;
}

.gallery-card-img {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f5;
    margin-bottom: 8px;
}

.gallery-card-img img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease;
}

.card-badge-count {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 8px;
    backdrop-filter: blur(4px);
}

.gallery-card-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin: 0 0 6px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Author & Meta */
.gallery-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-views {
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 4. 💻 Desktop Modernization (PC Specific) */
@media (min-width: 1024px) {

    /* Container Width */
    .container {
        max-width: 1280px;
        padding: 0 40px;
    }

    /* Hero Optimization */
    .hero-section {
        padding: 80px 0 60px;
    }

    .hero-title {
        font-size: 4rem;
    }

    /* Gallery Grid (5 Columns) */
    .gallery-waterfall {
        grid-template-columns: repeat(5, 1fr);
        gap: 24px;
    }

    /* Interactive Cards */
    .gallery-card:hover {
        transform: translateY(-6px);
    }

    .gallery-card-img {
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        transition: box-shadow 0.3s ease;
    }

    .gallery-card:hover .gallery-card-img {
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    }

    .section-gallery .section-header h2 {
        font-size: 28px;
    }
}

/* 5. 🖥�?Ultra Wide Screen */
@media (min-width: 1600px) {
    .container {
        max-width: 1500px;
    }

    .gallery-waterfall {
        grid-template-columns: repeat(6, 1fr);
    }
}