/* =========================================================================================================
第一屏开始
   ========================================================================================================= */
/* =========================================================================================================
   DOWNLOAD CENTER — HERO SECTION / FINAL CLEAN VERSION
   ---------------------------------------------------------------------------------------------------------
   File:
   CSS - Yubeen Download Center

   Purpose:
   - First screen of the Download Center page.
   - Full-width dark hero section.
   - Left-aligned content area.
   - Product background image stays on the right side.
   - No JavaScript required.
   ---------------------------------------------------------------------------------------------------------
   Required Elementor Structure:

   Download Hero Section
   class: yubeen-dl-hero

       Download Hero Inner
       class: yubeen-dl-hero-inner

           Download Hero Content
           class: yubeen-dl-hero-content

               Breadcrumb HTML
               Heading
               Lead Text
               CTA HTML
               Popular Links HTML
   ========================================================================================================= */


/* ---------------------------------------------------------------------------------------------------------
   01. HERO OUTER SECTION
   ---------------------------------------------------------------------------------------------------------
   Notes:
   - Background image should be set in Elementor on this outer container.
   - Elementor Background:
     Position: Center Right
     Repeat: No-repeat
     Display Size: Cover
   --------------------------------------------------------------------------------------------------------- */

.yubeen-dl-hero {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;
    min-height: 760px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background-color: #05070b !important;
    background-position: 70% center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;

    box-sizing: border-box !important;
}


/* Dark readability overlay
   Keeps the left text readable while preserving the product visual on the right. */
.yubeen-dl-hero::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(3, 5, 9, 0.98) 0%,
            rgba(3, 5, 9, 0.92) 34%,
            rgba(3, 5, 9, 0.48) 62%,
            rgba(3, 5, 9, 0.16) 100%
        ),
        radial-gradient(
            circle at 16% 74%,
            rgba(215, 25, 32, 0.18) 0%,
            transparent 34%
        ) !important;

    z-index: 1 !important;

    pointer-events: none !important;
}


/* Subtle technical grid
   Very light; should not become a visible pattern block. */
.yubeen-dl-hero::after {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    background-image:
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) !important;

    background-size: 72px 72px !important;

    opacity: 0.28 !important;

    z-index: 2 !important;

    pointer-events: none !important;
}


/* ---------------------------------------------------------------------------------------------------------
   02. HERO INNER LAYOUT
   ---------------------------------------------------------------------------------------------------------
   Notes:
   - Grid is used to lock the text area to the left.
   - Right side is intentionally empty because the product is part of the background image.
   --------------------------------------------------------------------------------------------------------- */

.yubeen-dl-hero-inner {
    position: relative !important;
    z-index: 4 !important;

    width: min(86vw, 1280px) !important;
    max-width: 1280px !important;

    min-height: 760px !important;

    display: grid !important;
    grid-template-columns: minmax(0, 540px) minmax(0, 1fr) !important;

    align-items: center !important;
    justify-content: stretch !important;

    column-gap: 80px !important;

    margin: 0 auto !important;
    padding: 100px 0 92px 0 !important;

    box-sizing: border-box !important;
}


/* Left content area */
.yubeen-dl-hero-content {
    grid-column: 1 !important;

    width: 100% !important;
    max-width: 540px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;

    justify-self: start !important;
    align-self: center !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------------------------------------------------------
   03. BREADCRUMB
   --------------------------------------------------------------------------------------------------------- */

.yubeen-dl-breadcrumb {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    gap: 10px !important;

    margin: 0 0 26px 0 !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.52) !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 800 !important;

    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
}

.yubeen-dl-breadcrumb a {
    color: rgba(255, 255, 255, 0.58) !important;

    text-decoration: none !important;

    transition:
        color 0.22s ease,
        opacity 0.22s ease !important;
}

.yubeen-dl-breadcrumb a:hover {
    color: #ffffff !important;
}

.yubeen-dl-breadcrumb span {
    color: rgba(255, 255, 255, 0.28) !important;
}

.yubeen-dl-breadcrumb strong {
    color: #ff2b32 !important;

    font-weight: 850 !important;
}


/* ---------------------------------------------------------------------------------------------------------
   04. TITLE
   --------------------------------------------------------------------------------------------------------- */

.yubeen-dl-hero-title,
.yubeen-dl-hero-title .elementor-heading-title {
    max-width: 540px !important;

    margin: 0 0 24px 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: clamp(54px, 4.6vw, 78px) !important;
    line-height: 1.02 !important;
    font-weight: 880 !important;

    letter-spacing: -2px !important;
}


/* ---------------------------------------------------------------------------------------------------------
   05. LEAD TEXT
   --------------------------------------------------------------------------------------------------------- */

.yubeen-dl-hero-lead,
.yubeen-dl-hero-lead p {
    max-width: 535px !important;

    margin: 0 0 38px 0 !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.78) !important;

    font-size: 17px !important;
    line-height: 1.72 !important;
    font-weight: 540 !important;
}


/* ---------------------------------------------------------------------------------------------------------
   06. CTA BUTTONS
   --------------------------------------------------------------------------------------------------------- */

.yubeen-dl-hero-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    gap: 16px !important;

    margin: 0 0 28px 0 !important;
    padding: 0 !important;
}

.yubeen-dl-btn {
    min-height: 54px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    padding: 0 26px !important;

    border-radius: 12px !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 820 !important;

    text-decoration: none !important;

    cursor: pointer !important;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        color 0.22s ease !important;
}

.yubeen-dl-btn span {
    display: inline-flex !important;

    transform: translateY(-1px) !important;
}

.yubeen-dl-btn-primary {
    background: linear-gradient(135deg, #ff2b32 0%, #d71920 100%) !important;

    color: #ffffff !important;

    border: 1px solid rgba(255, 43, 50, 0.72) !important;

    box-shadow:
        0 18px 36px rgba(215, 25, 32, 0.32) !important;
}

.yubeen-dl-btn-primary:hover {
    color: #ffffff !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 24px 48px rgba(215, 25, 32, 0.40) !important;
}

.yubeen-dl-btn-secondary {
    background: rgba(255, 255, 255, 0.045) !important;

    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.20) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.yubeen-dl-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;

    border-color: rgba(255, 255, 255, 0.34) !important;

    color: #ffffff !important;

    transform: translateY(-2px) !important;
}


/* ---------------------------------------------------------------------------------------------------------
   06. HERO SEARCH BOX
   ---------------------------------------------------------------------------------------------------------
   Purpose:
   - Replaces large CTA buttons with a functional-looking document search area.
   - Search behavior can be connected later to the document library section.
   --------------------------------------------------------------------------------------------------------- */

.yubeen-dl-search-box {
    width: min(100%, 560px) !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 136px !important;

    gap: 12px !important;

    margin: 0 0 18px 0 !important;
    padding: 0 !important;
}

.yubeen-dl-search-field {
    min-height: 58px !important;

    display: flex !important;
    align-items: center !important;

    gap: 12px !important;

    padding: 0 18px !important;

    border-radius: 12px !important;

    background: rgba(255, 255, 255, 0.075) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;

    box-sizing: border-box !important;
}

.yubeen-dl-search-icon {
    color: rgba(255, 255, 255, 0.62) !important;

    font-size: 20px !important;
    line-height: 1 !important;
}

.yubeen-dl-search-field input {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    outline: none !important;

    background: transparent !important;

    color: #ffffff !important;

    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
}

.yubeen-dl-search-field input::placeholder {
    color: rgba(255, 255, 255, 0.42) !important;
}

.yubeen-dl-search-button {
    min-height: 58px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    padding: 0 22px !important;

    border: 1px solid rgba(255, 43, 50, 0.72) !important;
    border-radius: 12px !important;

    background: linear-gradient(135deg, #ff2b32 0%, #d71920 100%) !important;

    color: #ffffff !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 840 !important;

    cursor: pointer !important;

    box-shadow:
        0 18px 36px rgba(215, 25, 32, 0.30) !important;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        filter 0.22s ease !important;
}

.yubeen-dl-search-button:hover {
    transform: translateY(-2px) !important;

    filter: brightness(1.04) !important;

    box-shadow:
        0 24px 48px rgba(215, 25, 32, 0.40) !important;
}

.yubeen-dl-request-link {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    gap: 8px !important;

    margin: 0 0 26px 0 !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.56) !important;

    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
}

.yubeen-dl-request-link a {
    color: #ffffff !important;

    font-weight: 800 !important;

    text-decoration: none !important;
}

.yubeen-dl-request-link a:hover {
    color: #ff2b32 !important;
}

/* ---------------------------------------------------------------------------------------------------------
   07. POPULAR RESOURCE LINKS
   --------------------------------------------------------------------------------------------------------- */

.yubeen-dl-popular {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    gap: 8px !important;
	
	
    max-width: 560px !important;


    margin: 0 !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.58) !important;
}

.yubeen-dl-popular-label {
    margin-right: 4px !important;

    color: rgba(255, 255, 255, 0.72) !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 760 !important;
}

.yubeen-dl-popular a {
    min-height: 28px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 11px !important;

    border-radius: 999px !important;

    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;

    color: rgba(255, 255, 255, 0.72) !important;

    font-size: 12.5px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    text-decoration: none !important;

    transition:
        color 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease,
        transform 0.22s ease !important;
}

.yubeen-dl-popular a:hover {
    background: rgba(255, 43, 50, 0.12) !important;

    border-color: rgba(255, 43, 50, 0.36) !important;

    color: #ffffff !important;

    transform: translateY(-1px) !important;
}


/* ---------------------------------------------------------------------------------------------------------
   08. TABLET RESPONSIVE
   --------------------------------------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .yubeen-dl-hero {
        min-height: 700px !important;

        background-position: 68% center !important;
    }

    .yubeen-dl-hero-inner {
        width: min(90vw, 900px) !important;

        min-height: 700px !important;

        grid-template-columns: minmax(0, 540px) minmax(0, 1fr) !important;

        column-gap: 40px !important;

        padding: 118px 0 84px 0 !important;
    }

    .yubeen-dl-hero-content {
        max-width: 540px !important;
    }

    .yubeen-dl-hero-title,
    .yubeen-dl-hero-title .elementor-heading-title {
        font-size: clamp(50px, 7vw, 70px) !important;
    }

    .yubeen-dl-hero-lead,
    .yubeen-dl-hero-lead p {
        font-size: 16px !important;
    }
}


/* ---------------------------------------------------------------------------------------------------------
   09. MOBILE RESPONSIVE
   --------------------------------------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .yubeen-dl-hero {
        min-height: auto !important;

        background-position: 66% center !important;
    }

    .yubeen-dl-hero::before {
        background:
            linear-gradient(
                90deg,
                rgba(3, 5, 9, 0.98) 0%,
                rgba(3, 5, 9, 0.94) 58%,
                rgba(3, 5, 9, 0.70) 100%
            ),
            radial-gradient(
                circle at 16% 74%,
                rgba(215, 25, 32, 0.18) 0%,
                transparent 34%
            ) !important;
    }

    .yubeen-dl-hero-inner {
        width: min(88vw, 560px) !important;

        min-height: auto !important;

        display: block !important;

        padding: 112px 0 72px 0 !important;
    }

    .yubeen-dl-hero-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    .yubeen-dl-breadcrumb {
        margin-bottom: 22px !important;

        font-size: 11px !important;

        gap: 8px !important;
    }

    .yubeen-dl-hero-title,
    .yubeen-dl-hero-title .elementor-heading-title {
        font-size: 48px !important;
        line-height: 1.02 !important;

        letter-spacing: -1.6px !important;
    }

    .yubeen-dl-hero-lead,
    .yubeen-dl-hero-lead p {
        font-size: 15.5px !important;
        line-height: 1.65 !important;

        margin-bottom: 30px !important;
    }

    .yubeen-dl-hero-actions {
        width: 100% !important;

        gap: 12px !important;
    }

    .yubeen-dl-btn {
        width: 100% !important;

        min-height: 52px !important;
    }

    .yubeen-dl-popular {
        gap: 9px !important;
    }

    .yubeen-dl-popular-label {
        width: 100% !important;

        margin-bottom: 2px !important;
    }
	
	.yubeen-dl-search-box {
        grid-template-columns: 1fr !important;
    }

    .yubeen-dl-search-button {
        width: 100% !important;
    }
}
/* =========================================================================================================
第一屏结束
   ========================================================================================================= */

/* =========================================================================================================
第二屏开始
   ========================================================================================================= */

/* =========================================================================================================
   DOWNLOAD CENTER — DOCUMENT LIBRARY SECTION
   ---------------------------------------------------------------------------------------------------------
   File:
   CSS - Yubeen Download Center

   Purpose:
   - Second screen of Download Center.
   - Contains category shortcuts and the main document table.
   - No JavaScript required in this version.
   ========================================================================================================= */


/* ---------------------------------------------------------------------------------------------------------
   01. SECTION BASE
   --------------------------------------------------------------------------------------------------------- */

.yubeen-dl-library-section {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 84px 0 104px 0 !important;

    overflow: hidden !important;

    background:
        radial-gradient(circle at 12% 0%, rgba(215, 25, 32, 0.12) 0%, transparent 26%),
        radial-gradient(circle at 86% 26%, rgba(255, 255, 255, 0.045) 0%, transparent 32%),
        linear-gradient(180deg, #06090f 0%, #0b1118 48%, #070a0f 100%) !important;

    box-sizing: border-box !important;
}

.yubeen-dl-library-section::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    background-image:
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) !important;

    background-size: 72px 72px !important;

    opacity: 0.22 !important;

    pointer-events: none !important;
}

.yubeen-dl-library-inner {
    position: relative !important;
    z-index: 2 !important;

    width: min(86vw, 1280px) !important;
    max-width: 1280px !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 42px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------------------------------------------------------
   02. CATEGORY PANEL
   --------------------------------------------------------------------------------------------------------- */

.yubeen-dl-category-panel {
    width: 100% !important;

    margin: 0 !important;
    padding: 34px !important;

    border-radius: 26px !important;

    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.070) 0%, rgba(255, 255, 255, 0.035) 100%) !important;

    border: 1px solid rgba(255, 255, 255, 0.10) !important;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;

    box-sizing: border-box !important;
}

.yubeen-dl-category-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;

    gap: 24px !important;

    margin: 0 0 28px 0 !important;
    padding: 0 !important;
}

.yubeen-dl-category-title-wrap {
    max-width: 720px !important;

    margin: 0 !important;
    padding: 0 !important;
}

.yubeen-dl-category-title-wrap span {
    display: block !important;

    margin: 0 0 10px 0 !important;

    color: #ffffff !important;

    font-size: 24px !important;
    line-height: 1.1 !important;
    font-weight: 840 !important;
}

.yubeen-dl-category-title-wrap p {
    max-width: 560px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.56) !important;

    font-size: 14px !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
}


/* Small reset filter button.
   This replaces the previous All Resources card, so the grid remains a clean 6-card layout. */
.yubeen-dl-category-reset {
    min-height: 38px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    white-space: nowrap !important;

    padding: 0 16px !important;

    border-radius: 999px !important;

    color: rgba(255, 255, 255, 0.74) !important;
    text-decoration: none !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 780 !important;

    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;

    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease,
        transform 0.22s ease !important;
}

.yubeen-dl-category-reset:hover,
.yubeen-dl-category-reset.is-active {
    color: #ffffff !important;

    background: rgba(215, 25, 32, 0.16) !important;

    border-color: rgba(215, 25, 32, 0.42) !important;

    transform: translateY(-1px) !important;
}


/* Keep this grid at 6 columns.
   Do not put All Resources inside this grid, otherwise it becomes 7 cards and breaks into a second row. */
.yubeen-dl-category-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;

    gap: 0 !important;

    border-radius: 20px !important;

    overflow: hidden !important;

    border: 1px solid rgba(255, 255, 255, 0.08) !important;

    background: rgba(255, 255, 255, 0.012) !important;
}

.yubeen-dl-category-card {
    min-height: 136px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 14px !important;

    padding: 22px 14px !important;

    color: rgba(255, 255, 255, 0.76) !important;

    text-align: center !important;
    text-decoration: none !important;

    background: rgba(255, 255, 255, 0.018) !important;

    border-right: 1px solid rgba(255, 255, 255, 0.075) !important;

    transition:
        background 0.22s ease,
        color 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease !important;

    box-sizing: border-box !important;
}

.yubeen-dl-category-card:last-child {
    border-right: none !important;
}

.yubeen-dl-category-card:hover,
.yubeen-dl-category-card.is-active {
    color: #ffffff !important;

    background:
        radial-gradient(circle at 50% 0%, rgba(215, 25, 32, 0.22) 0%, transparent 62%),
        rgba(255, 255, 255, 0.040) !important;

    box-shadow:
        inset 0 -2px 0 #ff2b32 !important;
}

.yubeen-dl-category-icon {
    width: 48px !important;
    height: 48px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 15px !important;

    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;

    color: #ff2b32 !important;
}

.yubeen-dl-category-icon svg {
    width: 25px !important;
    height: 25px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.yubeen-dl-category-card strong {
    max-width: 132px !important;

    color: inherit !important;

    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 760 !important;
}


/* ---------------------------------------------------------------------------------------------------------
   03. DOWNLOAD TABLE PANEL
   --------------------------------------------------------------------------------------------------------- */

.yubeen-dl-table-panel {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

.yubeen-dl-table-header {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;

    gap: 28px !important;

    margin: 0 0 26px 0 !important;
    padding: 0 !important;
}

.yubeen-dl-section-kicker {
    display: block !important;

    margin: 0 0 12px 0 !important;

    color: #ff2b32 !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 850 !important;

    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

.yubeen-dl-table-header h2 {
    margin: 0 0 10px 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 42px !important;
    line-height: 1.05 !important;
    font-weight: 860 !important;

    letter-spacing: -1.2px !important;
}

.yubeen-dl-table-header p {
    max-width: 680px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.58) !important;

    font-size: 15px !important;
    line-height: 1.65 !important;
    font-weight: 500 !important;
}

.yubeen-dl-table-request {
    min-height: 46px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 9px !important;

    white-space: nowrap !important;

    padding: 0 20px !important;

    border-radius: 999px !important;

    color: #ffffff !important;
    text-decoration: none !important;

    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 780 !important;

    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;

    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        transform 0.22s ease !important;
}

.yubeen-dl-table-request:hover {
    background: rgba(215, 25, 32, 0.14) !important;

    border-color: rgba(215, 25, 32, 0.42) !important;

    transform: translateY(-1px) !important;
}


/* Table wrapper */
.yubeen-dl-table-wrap {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border-radius: 22px !important;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.052) 0%, rgba(255, 255, 255, 0.026) 100%) !important;

    border: 1px solid rgba(255, 255, 255, 0.10) !important;

    box-shadow:
        0 26px 76px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.yubeen-dl-table {
    display: grid !important;
    grid-template-columns: minmax(280px, 1.65fr) minmax(150px, 0.9fr) minmax(80px, 0.45fr) minmax(90px, 0.45fr) minmax(120px, 0.55fr) minmax(120px, 0.55fr) !important;

    align-items: center !important;

    gap: 18px !important;

    box-sizing: border-box !important;
}

.yubeen-dl-table-head {
    min-height: 58px !important;

    padding: 0 26px !important;

    color: rgba(255, 255, 255, 0.42) !important;

    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 820 !important;

    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;

    background: rgba(255, 255, 255, 0.032) !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.yubeen-dl-table-row {
    min-height: 92px !important;

    padding: 0 26px !important;

    color: rgba(255, 255, 255, 0.66) !important;

    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 540 !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.075) !important;

    transition:
        background 0.22s ease,
        color 0.22s ease !important;
}

.yubeen-dl-table-row:last-child {
    border-bottom: none !important;
}

.yubeen-dl-table-row:hover {
    background: rgba(255, 255, 255, 0.032) !important;
}

.yubeen-dl-doc-name {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;

    align-items: center !important;

    gap: 16px !important;
}

.yubeen-dl-file-icon {
    width: 38px !important;
    height: 44px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 9px !important;

    color: #ff2b32 !important;

    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 900 !important;

    background: rgba(215, 25, 32, 0.10) !important;
    border: 1px solid rgba(215, 25, 32, 0.34) !important;
}

.yubeen-dl-doc-name strong {
    display: block !important;

    margin: 0 0 5px 0 !important;

    color: #ffffff !important;

    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 780 !important;
}

.yubeen-dl-doc-name em {
    display: block !important;

    max-width: 430px !important;

    color: rgba(255, 255, 255, 0.48) !important;

    font-size: 12.5px !important;
    line-height: 1.45 !important;
    font-style: normal !important;
    font-weight: 500 !important;
}

.yubeen-dl-file-type {
    min-height: 28px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 10px !important;

    border-radius: 999px !important;

    color: rgba(255, 255, 255, 0.72) !important;

    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 760 !important;

    background: rgba(255, 255, 255, 0.060) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.yubeen-dl-download-btn {
    min-height: 38px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    padding: 0 14px !important;

    border-radius: 10px !important;

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 780 !important;

    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;

    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        transform 0.22s ease,
        color 0.22s ease !important;
}

.yubeen-dl-download-btn:hover {
    background: rgba(215, 25, 32, 0.16) !important;

    border-color: rgba(215, 25, 32, 0.46) !important;

    color: #ffffff !important;

    transform: translateY(-1px) !important;
}


/* ---------------------------------------------------------------------------------------------------------
   04. RESPONSIVE
   --------------------------------------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .yubeen-dl-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .yubeen-dl-category-card:nth-child(3),
    .yubeen-dl-category-card:nth-child(6) {
        border-right: none !important;
    }

    .yubeen-dl-table-wrap {
        overflow-x: auto !important;
    }

    .yubeen-dl-table {
        min-width: 980px !important;
    }
}

@media (max-width: 767px) {
    .yubeen-dl-library-section {
        padding: 58px 0 72px 0 !important;
    }

    .yubeen-dl-library-inner {
        width: min(88vw, 560px) !important;

        gap: 32px !important;
    }

    .yubeen-dl-category-panel {
        padding: 24px !important;

        border-radius: 22px !important;
    }

    .yubeen-dl-category-head {
        display: block !important;

        margin-bottom: 22px !important;
    }

    .yubeen-dl-category-head span {
        display: block !important;

        margin-bottom: 10px !important;

        font-size: 22px !important;
    }

    .yubeen-dl-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .yubeen-dl-category-card {
        min-height: 132px !important;

        padding: 20px 14px !important;
    }

    .yubeen-dl-table-header {
        display: block !important;
    }

    .yubeen-dl-table-header h2 {
        font-size: 34px !important;
    }

    .yubeen-dl-table-request {
        margin-top: 22px !important;
    }

    .yubeen-dl-table {
        min-width: 920px !important;
    }
}








/* =========================================================================================================
   DOWNLOAD CENTER — SEARCH / FILTER STATES
   ---------------------------------------------------------------------------------------------------------
   Purpose:
   - Handles hidden document rows and no-results display.
   - Works together with JS - Yubeen Download Center.
   ========================================================================================================= */


/* Hidden rows controlled by JavaScript */
.yubeen-dl-table-row.is-hidden {
    display: none !important;
}


/* No matching result message */
.yubeen-dl-no-results {
    display: none !important;

    padding: 42px 28px !important;

    text-align: center !important;

    color: rgba(255, 255, 255, 0.70) !important;

    background:
        radial-gradient(circle at 50% 0%, rgba(215, 25, 32, 0.12) 0%, transparent 42%),
        rgba(255, 255, 255, 0.024) !important;

    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.yubeen-dl-no-results.is-visible {
    display: block !important;
}

.yubeen-dl-no-results strong {
    display: block !important;

    margin: 0 0 10px 0 !important;

    color: #ffffff !important;

    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 840 !important;
}

.yubeen-dl-no-results span {
    display: block !important;

    margin: 0 0 18px 0 !important;

    color: rgba(255, 255, 255, 0.56) !important;

    font-size: 14px !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
}

.yubeen-dl-no-results a {
    color: #ff2b32 !important;

    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 820 !important;

    text-decoration: none !important;
}




/* =========================================================================================================
第二屏结束
   ========================================================================================================= */











/* =========================================================================================================
第三屏开始
   ========================================================================================================= */
/* =========================================================================================================
   DOWNLOAD CENTER — FEATURED RESOURCES + REQUEST CTA
   ---------------------------------------------------------------------------------------------------------
   File:
   CSS - Yubeen Download Center

   Purpose:
   - Third screen of Download Center.
   - Provides featured resources and a final request CTA before Footer.
   - Uses a light section to create rhythm after dark document library.
   ========================================================================================================= */


/* ---------------------------------------------------------------------------------------------------------
   01. SECTION BASE
   --------------------------------------------------------------------------------------------------------- */

.yubeen-dl-featured-section {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 96px 0 104px 0 !important;

    overflow: hidden !important;

    background:
        radial-gradient(circle at 88% 10%, rgba(215, 25, 32, 0.075) 0%, transparent 30%),
        radial-gradient(circle at 8% 72%, rgba(10, 14, 20, 0.060) 0%, transparent 32%),
        linear-gradient(180deg, #f6f7f9 0%, #ffffff 48%, #f3f4f6 100%) !important;

    box-sizing: border-box !important;
}

.yubeen-dl-featured-section::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    background-image:
        linear-gradient(rgba(17, 19, 24, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 19, 24, 0.035) 1px, transparent 1px) !important;

    background-size: 72px 72px !important;

    opacity: 0.18 !important;

    pointer-events: none !important;
}

.yubeen-dl-featured-inner {
    position: relative !important;
    z-index: 2 !important;

    width: min(86vw, 1280px) !important;
    max-width: 1280px !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 54px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------------------------------------------------------
   02. FEATURED RESOURCES LAYOUT
   --------------------------------------------------------------------------------------------------------- */

.yubeen-dl-featured-block {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.78fr) !important;

    align-items: stretch !important;

    gap: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

.yubeen-dl-featured-intro {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;
}

.yubeen-dl-light-kicker {
    display: inline-block !important;

    margin: 0 0 18px 0 !important;
    padding: 0 !important;

    color: #d71920 !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 850 !important;

    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

.yubeen-dl-featured-intro h2 {
    max-width: 360px !important;

    margin: 0 0 22px 0 !important;
    padding: 0 !important;

    color: #111318 !important;

    font-size: 42px !important;
    line-height: 1.05 !important;
    font-weight: 880 !important;

    letter-spacing: -1.4px !important;
}

.yubeen-dl-featured-intro p {
    max-width: 360px !important;

    margin: 0 0 32px 0 !important;
    padding: 0 !important;

    color: rgba(17, 19, 24, 0.64) !important;

    font-size: 15px !important;
    line-height: 1.68 !important;
    font-weight: 520 !important;
}

.yubeen-dl-light-btn {
    min-height: 48px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    padding: 0 22px !important;

    border-radius: 12px !important;

    color: #111318 !important;
    text-decoration: none !important;

    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 820 !important;

    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(17, 19, 24, 0.14) !important;

    box-shadow:
        0 16px 34px rgba(17, 19, 24, 0.08) !important;

    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        transform 0.22s ease,
        color 0.22s ease !important;
}

.yubeen-dl-light-btn:hover {
    background: #ffffff !important;

    border-color: rgba(215, 25, 32, 0.28) !important;

    color: #d71920 !important;

    transform: translateY(-1px) !important;
}


/* ---------------------------------------------------------------------------------------------------------
   03. FEATURED RESOURCE CARDS
   --------------------------------------------------------------------------------------------------------- */

.yubeen-dl-featured-cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 26px !important;

    margin: 0 !important;
    padding: 0 !important;
}

.yubeen-dl-feature-card {
    position: relative !important;

    min-height: 420px !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    border-radius: 22px !important;

    color: #111318 !important;
    text-decoration: none !important;

    background: #ffffff !important;

    border: 1px solid rgba(17, 19, 24, 0.10) !important;

    box-shadow:
        0 22px 54px rgba(17, 19, 24, 0.10) !important;

    transition:
        transform 0.24s ease,
        box-shadow 0.24s ease,
        border-color 0.24s ease !important;

    box-sizing: border-box !important;
}

.yubeen-dl-feature-card:hover {
    transform: translateY(-5px) !important;

    border-color: rgba(215, 25, 32, 0.26) !important;

    box-shadow:
        0 30px 72px rgba(17, 19, 24, 0.15) !important;
}

.yubeen-dl-card-label {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 3 !important;

    min-height: 30px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 11px !important;

    border-radius: 999px !important;

    background: #ff2b32 !important;

    color: #ffffff !important;

    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
}

.yubeen-dl-card-visual {
    position: relative !important;

    min-height: 190px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
}

.yubeen-dl-card-visual::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    opacity: 1 !important;
}

.yubeen-dl-card-visual-a::before {
    background:
        radial-gradient(circle at 58% 42%, rgba(215, 25, 32, 0.18) 0%, transparent 38%),
        linear-gradient(135deg, #161b22 0%, #0b1017 100%) !important;
}

.yubeen-dl-card-visual-b::before {
    background:
        radial-gradient(circle at 36% 36%, rgba(215, 25, 32, 0.18) 0%, transparent 40%),
        linear-gradient(135deg, #202530 0%, #0d1118 100%) !important;
}

.yubeen-dl-card-visual-c::before {
    background:
        radial-gradient(circle at 68% 30%, rgba(215, 25, 32, 0.18) 0%, transparent 42%),
        linear-gradient(135deg, #15191f 0%, #070a0f 100%) !important;
}

.yubeen-dl-card-icon {
    position: relative !important;
    z-index: 2 !important;

    width: 78px !important;
    height: 78px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 22px !important;

    color: #ff2b32 !important;

    background: rgba(255, 255, 255, 0.070) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 18px 42px rgba(0, 0, 0, 0.20) !important;
}

.yubeen-dl-card-icon svg {
    width: 38px !important;
    height: 38px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.65 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.yubeen-dl-card-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    flex: 1 !important;

    padding: 28px !important;
}

.yubeen-dl-card-body strong {
    display: block !important;

    margin: 0 0 12px 0 !important;

    color: #111318 !important;

    font-size: 19px !important;
    line-height: 1.25 !important;
    font-weight: 840 !important;
}

.yubeen-dl-card-body em {
    display: block !important;

    margin: 0 0 26px 0 !important;

    color: rgba(17, 19, 24, 0.58) !important;

    font-size: 14px !important;
    line-height: 1.6 !important;
    font-style: normal !important;
    font-weight: 520 !important;
}

.yubeen-dl-card-link {
    margin-top: auto !important;

    color: #d71920 !important;

    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 820 !important;
}


/* ---------------------------------------------------------------------------------------------------------
   04. REQUEST DOCUMENT CTA
   --------------------------------------------------------------------------------------------------------- */

.yubeen-dl-request-cta {
    position: relative !important;

    width: 100% !important;

    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;

    align-items: center !important;

    gap: 30px !important;

    margin: 0 !important;
    padding: 34px 42px !important;

    overflow: hidden !important;

    border-radius: 26px !important;

    background:
        radial-gradient(circle at 88% 30%, rgba(215, 25, 32, 0.26) 0%, transparent 34%),
        linear-gradient(135deg, #10141b 0%, #05070b 100%) !important;

    border: 1px solid rgba(255, 255, 255, 0.12) !important;

    box-shadow:
        0 28px 76px rgba(17, 19, 24, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;

    box-sizing: border-box !important;
}

.yubeen-dl-request-cta::after {
    content: "" !important;

    position: absolute !important;
    right: -90px !important;
    top: -110px !important;

    width: 360px !important;
    height: 360px !important;

    border-radius: 50% !important;

    border: 1px solid rgba(255, 43, 50, 0.26) !important;

    pointer-events: none !important;
}

.yubeen-dl-request-icon {
    position: relative !important;
    z-index: 2 !important;

    width: 72px !important;
    height: 72px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 24px !important;

    color: #ff2b32 !important;

    background: rgba(215, 25, 32, 0.12) !important;
    border: 1px solid rgba(255, 43, 50, 0.26) !important;
}

.yubeen-dl-request-icon svg {
    width: 36px !important;
    height: 36px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.yubeen-dl-request-copy {
    position: relative !important;
    z-index: 2 !important;

    margin: 0 !important;
    padding: 0 !important;
}

.yubeen-dl-dark-kicker {
    display: inline-block !important;

    margin: 0 0 10px 0 !important;

    color: #ff2b32 !important;

    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 850 !important;

    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

.yubeen-dl-request-copy h2 {
    margin: 0 0 10px 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 30px !important;
    line-height: 1.1 !important;
    font-weight: 860 !important;

    letter-spacing: -0.8px !important;
}

.yubeen-dl-request-copy p {
    max-width: 660px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.62) !important;

    font-size: 14px !important;
    line-height: 1.6 !important;
    font-weight: 520 !important;
}

.yubeen-dl-request-actions {
    position: relative !important;
    z-index: 2 !important;

    display: flex !important;
    align-items: center !important;

    gap: 14px !important;
}

.yubeen-dl-request-btn {
    min-height: 50px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 9px !important;

    white-space: nowrap !important;

    padding: 0 24px !important;

    border-radius: 12px !important;

    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 820 !important;

    text-decoration: none !important;

    transition:
        transform 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease !important;
}

.yubeen-dl-request-btn-primary {
    background: linear-gradient(135deg, #ff2b32 0%, #d71920 100%) !important;

    color: #ffffff !important;

    border: 1px solid rgba(255, 43, 50, 0.72) !important;

    box-shadow:
        0 18px 36px rgba(215, 25, 32, 0.30) !important;
}

.yubeen-dl-request-btn-primary:hover {
    color: #ffffff !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 24px 48px rgba(215, 25, 32, 0.40) !important;
}

.yubeen-dl-request-btn-secondary {
    background: rgba(255, 255, 255, 0.045) !important;

    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.yubeen-dl-request-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;

    border-color: rgba(255, 255, 255, 0.34) !important;

    color: #ffffff !important;

    transform: translateY(-2px) !important;
}


/* ---------------------------------------------------------------------------------------------------------
   05. RESPONSIVE
   --------------------------------------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .yubeen-dl-featured-block {
        grid-template-columns: 1fr !important;

        gap: 34px !important;
    }

    .yubeen-dl-featured-intro h2,
    .yubeen-dl-featured-intro p {
        max-width: 720px !important;
    }

    .yubeen-dl-request-cta {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    .yubeen-dl-request-actions {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 767px) {
    .yubeen-dl-featured-section {
        padding: 68px 0 78px 0 !important;
    }

    .yubeen-dl-featured-inner {
        width: min(88vw, 560px) !important;

        gap: 38px !important;
    }

    .yubeen-dl-featured-intro h2 {
        font-size: 34px !important;
    }

    .yubeen-dl-featured-cards {
        grid-template-columns: 1fr !important;

        gap: 22px !important;
    }

    .yubeen-dl-feature-card {
        min-height: auto !important;
    }

    .yubeen-dl-card-visual {
        min-height: 170px !important;
    }

    .yubeen-dl-request-cta {
        grid-template-columns: 1fr !important;

        gap: 22px !important;

        padding: 28px !important;
    }

    .yubeen-dl-request-icon {
        width: 64px !important;
        height: 64px !important;
    }

    .yubeen-dl-request-copy h2 {
        font-size: 26px !important;
    }

    .yubeen-dl-request-actions {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .yubeen-dl-request-btn {
        width: 100% !important;
    }
}


/* =========================================================================================================
第三屏结束
   ========================================================================================================= */