/**
 * fec-guide.html 选型指南 · 可读性优化
 * 字号 / 行距 / logo 绿统一 / 章节导航
 * v=20260614
 */
body[data-page="fec-guide"] {
    font-size: 15px;
    line-height: 1.65;
    color: #334155;
}

/* 章节导航 */
.fg-toc-bar {
    position: sticky;
    top: 55px;
    z-index: 40;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.fg-toc-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.fg-toc-inner::-webkit-scrollbar {
    display: none;
}

.fg-toc-label {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    margin-right: 4px;
}

.fg-toc-label i {
    color: #10B981;
    margin-right: 4px;
}

.fg-toc-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.fg-toc-chip:hover,
.fg-toc-chip.is-active {
    color: #047857;
    border-color: rgba(16, 185, 129, 0.35);
    background: #ecfdf5;
}

#guide,
#guide-scenarios,
#guide-redlines,
#what-is {
    scroll-margin-top: 118px;
}

.fg-toc-chip .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    background: #d1fae5;
    color: #047857;
}

/* Hero 区 */
#guide {
    background: linear-gradient(165deg, #f0fdf4 0%, #f8fafc 55%, #fff 100%) !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding-bottom: 1.5rem !important;
}

#guide .container {
    padding-top: 1.25rem !important;
    padding-bottom: 0.5rem !important;
}

#guide h1 {
    font-size: clamp(1.375rem, 4vw, 1.75rem) !important;
    line-height: 1.3 !important;
}

#guide h1 + p {
    font-size: 0.875rem !important;
    line-height: 1.55 !important;
    margin-top: 0.35rem !important;
}

#guide .tldr {
    max-width: 42rem !important;
    padding: 0.875rem 1rem !important;
    margin-top: 0.75rem !important;
}

#guide .tldr-title {
    font-size: 0.8125rem !important;
    margin-bottom: 0.35rem !important;
}

#guide .tldr p {
    font-size: 0.8125rem !important;
    line-height: 1.65 !important;
}

#guide a.brand-link {
    font-weight: 500;
}

/* 选型卡片：统一绿色系 + 更大字号 */
#guide-scenarios {
    margin-top: 1rem;
}

#guide .guide-card {
    border-left: 3px solid #10B981 !important;
    border-color: rgba(16, 185, 129, 0.22) !important;
    padding: 1rem 1.125rem !important;
    background: #fff !important;
}

#guide .guide-card:hover {
    border-color: rgba(16, 185, 129, 0.4) !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.08) !important;
}

#guide .guide-card h3 {
    font-size: 0.9375rem !important;
    color: #1D2129 !important;
}

#guide .guide-card > .flex > div > p.text-gray-400,
#guide .guide-card .text-gray-400 {
    font-size: 0.75rem !important;
    color: #94a3b8 !important;
}

#guide .guide-card .space-y-1,
#guide .guide-card .space-y-1\.5 {
    font-size: 0.8125rem !important;
    line-height: 1.65 !important;
}

#guide .guide-card .space-y-1 > div,
#guide .guide-card .space-y-1\.5 > div {
    gap: 0.5rem !important;
}

/* 标签统一绿色阶（保留语义，弱化彩虹色） */
#guide .guide-card [class*="rounded"][class*="font-bold"][class*="text-xs"],
#guide .guide-card span[class*="px-1.5"] {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.15);
}

#guide .guide-card a[style*="color:#"],
#guide .guide-card a[class*="hover:underline"] {
    color: #047857 !important;
}

#guide .guide-card .w-6,
#guide .guide-card .md\:w-8 {
    background: #ecfdf5 !important;
}

#guide .guide-card .w-6 i,
#guide .guide-card .md\:w-8 i {
    color: #059669 !important;
}

@media (min-width: 768px) {
    #guide-scenarios.grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.875rem !important;
    }
}

@media (min-width: 1024px) {
    #guide-scenarios.grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 767px) {
    #guide-scenarios.grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    #guide .guide-card {
        padding: 0.875rem 1rem !important;
    }
}

/* 避坑红线 */
#guide-redlines {
    margin-top: 1.5rem;
}

#guide-redlines > div {
    padding: 1.125rem 1.25rem !important;
}

#guide-redlines h3 {
    font-size: 0.9375rem !important;
    line-height: 1.45 !important;
}

#guide-redlines .grid > div {
    padding: 0.75rem 0.875rem !important;
}

#guide-redlines .grid > div p {
    font-size: 0.8125rem !important;
    line-height: 1.6 !important;
}

#guide-redlines .grid > div p.font-semibold {
    font-size: 0.875rem !important;
    margin-bottom: 0.35rem !important;
}

/* 0码 vs 低代码 */
#what-is {
    background: #f8fafc !important;
    padding: 2.5rem 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

#what-is h2 {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
}

#what-is > .container > div:first-child > div:first-child {
    background: linear-gradient(180deg, #10B981, #059669) !important;
}

#what-is .grid-cols-1 > div,
#what-is [style*="grid-template-columns:1fr 1fr"] > div {
    padding: 1.25rem 1.375rem !important;
}

#what-is [style*="font-size:0.8125rem"],
#what-is [style*="font-size: 0.8125rem"] {
    font-size: 0.875rem !important;
    line-height: 1.7 !important;
}

#what-is [style*="font-size:0.75rem"],
#what-is [style*="font-size: 0.75rem"] {
    font-size: 0.8125rem !important;
}

#what-is [style*="font-size:0.6875rem"],
#what-is [style*="font-size: 0.6875rem"] {
    font-size: 0.75rem !important;
}

/* 低代码卡片：绿色系替代紫色 */
#what-is [style*="grid-template-columns:1fr 1fr"] > div:last-child [style*="color:#4f46e5"],
#what-is [style*="color:#4f46e5"] {
    color: #047857 !important;
}

#what-is [style*="background:#ede9fe"],
#what-is [style*="background: #ede9fe"],
#what-is [style*="background:#f5f3ff"],
#what-is [style*="background: #f5f3ff"] {
    background: #ecfdf5 !important;
}

#what-is [style*="border:1px dashed #c7d2fe"],
#what-is [style*="border-left:3px solid #6366f1"] {
    border-color: rgba(16, 185, 129, 0.35) !important;
}

#what-is [style*="background:linear-gradient(90deg,#6366f1"] {
    background: linear-gradient(90deg, #10B981, #34d399) !important;
}

#what-is [style*="background:#e0e7ff"] {
    background: #dcfce7 !important;
}

#what-is [style*="color:#6366f1"],
#what-is [style*="color:#3730a3"] {
    color: #059669 !important;
}

#what-is [style*="padding:5px 11px;background:#ede9fe"] {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

#what-is [style*="font-size:0.75rem"][style*="flex-wrap"] {
    font-size: 0.8125rem !important;
}

#what-is [style*="margin-top:14px"] {
    padding: 1rem 1.125rem !important;
}

#what-is [style*="margin-top:14px"] [style*="font-size:0.8125rem"] {
    font-size: 0.875rem !important;
}

@media (max-width: 767px) {
    #what-is [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}