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

:root {
    --fg-variant-name: forest-matrix;
    --fg-bg: #07130f;
    --fg-surface: #0b1b15;
    --fg-card: #0f241b;
    --fg-card-hover: #143226;
    --fg-input: #0b1b15;
    --fg-nav: rgba(7, 19, 15, 0.98);
    --fg-footer: #06100d;
    --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: #eff7ee;
    --fg-text-secondary: #b7c9b5;
    --fg-muted: #78907b;
    --fg-text-muted: var(--fg-muted);
    --fg-accent: #9be15d;
    --fg-accent-hover: #c4f38b;
    --fg-accent-ink: #07130f;
    --fg-border: #214533;
    --fg-border-strong: #6fbd66;
    --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: 1440px;
    --fg-nav-h: 54px;
    --fg-sidebar-w: 320px;
    --fg-grid-cols-mobile: 2;
    --fg-grid-cols-tablet: 3;
    --fg-grid-cols-desktop: 6;
    --fg-gap: 10px;
    --fg-section-gap: 30px;
    --fg-transition: 140ms ease;
}

.fg-tpl-v3 {
    background: radial-gradient(circle at 88% 0, rgba(155, 225, 93, 0.16), transparent 28%), linear-gradient(180deg, #07130f, #06100d);
}

.fg-tpl-v3 .fg-navbar {
    border-bottom: 1px solid rgba(155, 225, 93, 0.28);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
}

.fg-tpl-v3 .fg-navbar .navbar-brand {
    color: var(--fg-accent-hover);
    font-family: var(--fg-font-mono);
    font-size: 17px;
}

.fg-tpl-v3 .fg-navbar .nav-link {
    padding-left: 10px;
    padding-right: 10px;
    color: #dcebdd;
}

.fg-tpl-v3 .fg-nav-search {
    width: 220px;
}

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

.fg-tpl-v3 .fg-home-hero {
    grid-template-columns: minmax(0, 1.95fr) minmax(280px, 0.7fr);
    gap: 14px;
}

.fg-tpl-v3 .fg-hero-cover {
    min-height: 455px;
    padding: 22px;
    border: 1px solid rgba(155, 225, 93, 0.34);
    background: #0a1813;
    box-shadow: inset 0 0 0 1px rgba(239, 247, 238, 0.04), 0 18px 44px rgba(0, 0, 0, 0.3);
}

.fg-tpl-v3 .fg-hero-cover::after {
    background: linear-gradient(90deg, rgba(7, 19, 15, 0.82), rgba(20, 50, 38, 0.28) 58%, rgba(155, 225, 93, 0.08));
}

.fg-tpl-v3 .fg-hero-cover strong {
    color: rgba(239, 247, 238, 0.86);
    font-size: 24px;
    line-height: 1.24;
}

.fg-tpl-v3 .fg-play-mark {
    background: var(--fg-accent);
    box-shadow: 0 0 18px rgba(155, 225, 93, 0.26);
}

.fg-tpl-v3 .fg-rank-panel {
    padding: 12px;
    background: rgba(11, 27, 21, 0.94);
    border: 1px solid rgba(155, 225, 93, 0.22);
    box-shadow: inset 0 0 0 1px rgba(239, 247, 238, 0.04);
}

.fg-tpl-v3 .fg-rank-panel h2 {
    margin-bottom: 8px;
    color: var(--fg-accent-hover);
    font-family: var(--fg-font-mono);
    font-size: 14px;
}

.fg-tpl-v3 .fg-rank-item {
    grid-template-columns: 28px 108px minmax(0, 1fr);
    gap: 8px;
    padding: 8px 0;
    border-bottom-color: rgba(155, 225, 93, 0.15);
}

.fg-tpl-v3 .fg-rank-num {
    color: var(--fg-accent);
    font-family: var(--fg-font-mono);
    font-size: 13px;
}

.fg-tpl-v3 .fg-rank-copy strong {
    color: rgba(239, 247, 238, 0.76);
    font-size: 11px;
}

.fg-tpl-v3 .fg-rank-copy em {
    color: rgba(183, 201, 181, 0.58);
}

.fg-tpl-v3 .fg-channel-head {
    margin-top: 28px;
}

.fg-tpl-v3 .fg-channel-head h2,
.fg-tpl-v3 .fg-section-head h2,
.fg-tpl-v3 .fg-category-head h1 {
    color: #eff7ee;
}

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

.fg-tpl-v3 .fg-category-tabs {
    gap: 7px;
    margin: 16px 0 28px;
}

.fg-tpl-v3 .fg-category-tabs a {
    min-height: 38px;
    padding: 9px 15px;
    border-color: rgba(155, 225, 93, 0.24);
    background: rgba(15, 36, 27, 0.86);
    color: var(--fg-text-secondary);
}

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

.fg-tpl-v3 .fg-section {
    margin-top: 32px;
}

.fg-tpl-v3 .fg-section-head {
    margin-bottom: 12px;
    padding: 11px 0;
    border-top: 1px solid rgba(155, 225, 93, 0.22);
    border-bottom: 1px solid rgba(155, 225, 93, 0.1);
}

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

.fg-tpl-v3 .fg-stagger-feed {
    grid-template-columns: minmax(0, 1.22fr) repeat(4, minmax(0, 0.74fr));
    gap: 10px;
}

.fg-tpl-v3 .fg-card {
    background: rgba(15, 36, 27, 0.92);
    border: 1px solid rgba(155, 225, 93, 0.16);
    box-shadow: inset 0 0 0 1px rgba(239, 247, 238, 0.035);
}

.fg-tpl-v3 .fg-card:hover {
    border-color: rgba(155, 225, 93, 0.44);
    background: rgba(20, 50, 38, 0.98);
}

.fg-tpl-v3 .fg-card-cover {
    background: #0a1813;
    border-bottom: 1px solid rgba(155, 225, 93, 0.12);
}

.fg-tpl-v3 .fg-stagger-feed .fg-card--lead .fg-card-cover {
    aspect-ratio: 16 / 9;
}

.fg-tpl-v3 .fg-card-cover .fg-play-mark {
    width: 22px;
    height: 22px;
}

.fg-tpl-v3 .fg-card-cover .fg-play-mark::after {
    left: 9px;
    top: 7px;
    border-left-width: 8px;
    border-top-width: 5px;
    border-bottom-width: 5px;
}

.fg-tpl-v3 .fg-card-body {
    padding: 8px 8px 9px;
}

.fg-tpl-v3 .fg-card-body h3 {
    color: rgba(239, 247, 238, 0.82);
    font-size: 13px;
    line-height: 1.34;
}

.fg-tpl-v3 .fg-card-body p {
    color: rgba(183, 201, 181, 0.58);
    font-size: 11px;
}

.fg-tpl-v3 .fg-app-ad-strip,
.fg-tpl-v3 .fg-category-head,
.fg-tpl-v3 .fg-footer-note {
    background: rgba(11, 27, 21, 0.94);
    border-color: rgba(155, 225, 93, 0.2);
}

.fg-tpl-v3 .fg-ad-row {
    gap: 10px;
}

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

.fg-tpl-v3 .fg-motion-item {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    box-shadow: inset 0 0 0 1px rgba(155, 225, 93, 0);
    transition: opacity 210ms ease, transform 210ms ease, box-shadow 210ms ease;
}

.fg-tpl-v3 .fg-motion-item.fg-motion-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    box-shadow: inset 0 0 0 1px rgba(155, 225, 93, 0.1);
}

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

    .fg-tpl-v3 .fg-hero-cover {
        min-height: 350px;
    }
}

@media (max-width: 767.98px) {
    .fg-tpl-v3 .fg-home-shell,
    .fg-tpl-v3 .fg-category-page {
        padding: 12px 8px 34px;
    }

    .fg-tpl-v3 .fg-hero-cover {
        min-height: 268px;
        padding: 14px;
    }

    .fg-tpl-v3 .fg-section {
        margin-top: 26px;
    }
}