@import url("ad-slot-layout.css");

:root {
    --fg-variant-name: cobalt-archive;
    --fg-bg: #f4f7fa;
    --fg-surface: #ffffff;
    --fg-card: #ffffff;
    --fg-card-hover: #eef4ff;
    --fg-input: #ffffff;
    --fg-nav: #ffffff;
    --fg-footer: #e8eef6;
    --fg-bg-surface: var(--fg-surface);
    --fg-bg-card: var(--fg-card);
    --fg-bg-card-hover: var(--fg-card-hover);
    --fg-bg-input: var(--fg-input);
    --fg-bg-nav: var(--fg-nav);
    --fg-bg-footer: var(--fg-footer);
    --fg-text: #172033;
    --fg-text-secondary: #334155;
    --fg-muted: #718096;
    --fg-text-muted: var(--fg-muted);
    --fg-accent: #1d4ed8;
    --fg-accent-hover: #2563eb;
    --fg-accent-ink: #ffffff;
    --fg-border: #c8d4e4;
    --fg-border-strong: #1d4ed8;
    --fg-font: "Helvetica Neue", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --fg-font-mono: "SFMono-Regular", Menlo, Monaco, "Roboto Mono", Consolas, monospace;
    --fg-content-max: 1224px;
    --fg-nav-h: 60px;
    --fg-sidebar-w: 320px;
    --fg-grid-cols-mobile: 2;
    --fg-grid-cols-tablet: 3;
    --fg-grid-cols-desktop: 4;
    --fg-gap: 22px;
    --fg-section-gap: 54px;
    --fg-transition: 170ms ease;
}

.fg-tpl-v2 {
    background: linear-gradient(90deg, rgba(29, 78, 216, 0.07) 1px, transparent 1px), linear-gradient(180deg, rgba(29, 78, 216, 0.06) 1px, transparent 1px), #f4f7fa;
    background-size: 32px 32px, 32px 32px, auto;
}

.fg-tpl-v2 .fg-navbar {
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid #b7c5d8;
    box-shadow: 0 8px 20px rgba(23, 32, 51, 0.06);
}

.fg-tpl-v2 .fg-navbar .navbar-brand {
    color: var(--fg-accent);
    font-size: 20px;
    font-weight: 800;
}

.fg-tpl-v2 .fg-navbar .nav-link,
.fg-tpl-v2 .fg-txt-ad-item a,
.fg-tpl-v2 .fg-drawer-link,
.fg-tpl-v2 .fg-footer-link-card {
    color: var(--fg-text-secondary);
}

.fg-tpl-v2 .navbar-toggler-icon {
    filter: invert(1);
}

.fg-tpl-v2 .fg-home-shell,
.fg-tpl-v2 .fg-category-page {
    padding-top: 38px;
}

.fg-tpl-v2 .fg-home-hero {
    grid-template-columns: minmax(0, 1.34fr) minmax(330px, 0.82fr);
    gap: 30px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #b7c5d8;
}

.fg-tpl-v2 .fg-hero-cover {
    min-height: 510px;
    padding: 28px;
    background: #ffffff;
    border: 1px solid #1d4ed8;
    box-shadow: 0 0 0 8px rgba(29, 78, 216, 0.06);
}

.fg-tpl-v2 .fg-hero-cover::after {
    background: linear-gradient(90deg, rgba(23, 32, 51, 0.68), rgba(23, 32, 51, 0.14));
}

.fg-tpl-v2 .fg-hero-cover strong {
    color: #ffffff;
    font-size: 27px;
    line-height: 1.24;
}

.fg-tpl-v2 .fg-play-mark {
    background: var(--fg-accent);
}

.fg-tpl-v2 .fg-rank-panel,
.fg-tpl-v2 .fg-card,
.fg-tpl-v2 .fg-app-ad-strip,
.fg-tpl-v2 .fg-category-head,
.fg-tpl-v2 .fg-footer-note {
    background: #ffffff;
    border: 1px solid #c8d4e4;
    box-shadow: none;
}

.fg-tpl-v2 .fg-rank-panel {
    padding: 18px;
}

.fg-tpl-v2 .fg-rank-panel h2 {
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--fg-accent);
    color: var(--fg-text);
    font-size: 19px;
}

.fg-tpl-v2 .fg-rank-item {
    grid-template-columns: 34px 126px minmax(0, 1fr);
    padding: 14px 0;
    border-bottom: 1px solid #dbe4ef;
}

.fg-tpl-v2 .fg-rank-num {
    color: var(--fg-accent);
    font-family: var(--fg-font-mono);
}

.fg-tpl-v2 .fg-rank-copy strong,
.fg-tpl-v2 .fg-section-head h2,
.fg-tpl-v2 .fg-category-head h1,
.fg-tpl-v2 .fg-channel-head h2 {
    color: var(--fg-text);
}

.fg-tpl-v2 .fg-channel-head {
    margin: 44px 0 0;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #c8d4e4;
}

.fg-tpl-v2 .fg-channel-head span,
.fg-tpl-v2 .fg-section-head span,
.fg-tpl-v2 .fg-category-head span,
.fg-tpl-v2 .fg-card-kicker,
.fg-tpl-v2 .fg-hero-eyebrow {
    color: var(--fg-accent);
    font-family: var(--fg-font-mono);
}

.fg-tpl-v2 .fg-category-tabs {
    gap: 0;
    margin: 22px 0 48px;
    background: #ffffff;
    border: 1px solid #c8d4e4;
}

.fg-tpl-v2 .fg-category-tabs a {
    min-height: 48px;
    padding: 14px 20px;
    border: 0;
    border-right: 1px solid #c8d4e4;
    border-radius: 0;
    background: transparent;
    color: var(--fg-text-secondary);
}

.fg-tpl-v2 .fg-category-tabs a.is-active {
    background: var(--fg-accent);
    color: var(--fg-accent-ink);
}

.fg-tpl-v2 .fg-section {
    margin-top: 58px;
}

.fg-tpl-v2 .fg-section-head {
    align-items: flex-end;
    margin-bottom: 24px;
    padding: 16px 0 14px;
    border-bottom: 2px solid var(--fg-accent);
}

.fg-tpl-v2 .fg-section-head h2,
.fg-tpl-v2 .fg-category-head h1 {
    font-size: 28px;
}

.fg-tpl-v2 .fg-stagger-feed {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.fg-tpl-v2 .fg-stagger-feed .fg-card--lead {
    grid-row: span 1;
}

.fg-tpl-v2 .fg-stagger-feed .fg-card--lead .fg-card-cover {
    aspect-ratio: 4 / 3;
}

.fg-tpl-v2 .fg-card {
    padding: 12px;
}

.fg-tpl-v2 .fg-card-cover {
    border: 1px solid #dbe4ef;
    background: #edf3fb;
}

.fg-tpl-v2 .fg-card-body {
    padding: 13px 0 0;
}

.fg-tpl-v2 .fg-card-body h3 {
    color: var(--fg-text);
    font-size: 15px;
    line-height: 1.46;
}

.fg-tpl-v2 .fg-card-body p,
.fg-tpl-v2 .fg-rank-copy em {
    color: var(--fg-muted);
}

.fg-tpl-v2 .fg-ad-row {
    gap: 18px;
    padding: 16px 0;
    border-top: 1px solid #c8d4e4;
    border-bottom: 1px solid #c8d4e4;
}

.fg-tpl-v2 .fg-ad-row a,
.fg-tpl-v2 .fg-ad-row img {
    border-radius: 0;
}

.fg-tpl-v2 .fg-motion-item {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 260ms ease, transform 260ms ease;
}

.fg-tpl-v2 .fg-motion-item.fg-motion-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media (max-width: 1023.98px) {
    .fg-tpl-v2 .fg-home-hero,
    .fg-tpl-v2 .fg-stagger-feed {
        grid-template-columns: 1fr;
    }

    .fg-tpl-v2 .fg-hero-cover {
        min-height: 410px;
    }
}

@media (max-width: 767.98px) {
    .fg-tpl-v2 .fg-home-shell,
    .fg-tpl-v2 .fg-category-page {
        padding: 22px 14px 46px;
    }

    .fg-tpl-v2 .fg-home-hero {
        padding: 12px;
        gap: 18px;
    }

    .fg-tpl-v2 .fg-hero-cover {
        min-height: 315px;
        padding: 18px;
        box-shadow: 0 0 0 5px rgba(29, 78, 216, 0.06);
    }

    .fg-tpl-v2 .fg-hero-cover strong {
        font-size: 21px;
    }
}