/**
 * Font Awesome 7 中文镜像站 - 自定义补充样式
 * 基于官方 CSS (fa-app.css) 的补充样式
 * 仅包含官方 CSS 未覆盖的镜像站特有样式
 */

/* ==========================================
   搜索输入框 - 镜像站特有
   ========================================== */
.fa7-search-input {
    width: 100%;
    padding: 12px 16px 12px 48px;
    border: 2px solid var(--fa-lt-gravy);
    border-radius: 8px;
    font-size: 1.1rem;
    background: var(--white);
    transition: border-color 0.2s;
}

.fa7-search-input:focus {
    outline: none;
    border-color: var(--fa-blue);
}

.fa7-search-input-lg {
    width: 100%;
    max-width: 600px;
    padding: 16px 24px;
    border: 2px solid var(--fa-lt-gravy);
    border-radius: 12px;
    font-size: 1.2rem;
    background: var(--white);
    transition: border-color 0.2s;
}

.fa7-search-input-lg:focus {
    outline: none;
    border-color: var(--fa-blue);
}

/* ==========================================
   图标网格 - 镜像站特有
   ========================================== */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 16px;
    padding: 24px 0;
}

.icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 8px;
    background: var(--white);
    border: 1px solid var(--fa-lt-gravy);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.icon-card:hover {
    border-color: var(--fa-blue);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.icon-preview {
    font-size: 2rem;
    margin-bottom: 8px;
    color: var(--fa-navy);
}

.icon-name {
    font-size: 0.75rem;
    color: var(--fa-md-gravy);
    text-align: center;
    word-break: break-all;
    line-height: 1.5;
}

.badge-new {
    display: inline-block;
    padding: 2px 6px;
    background: var(--fa-yellow);
    color: var(--fa-navy);
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 4px;
    margin-top: 4px;
}

/* ==========================================
   筛选器 - 镜像站特有
   ========================================== */
.filter-packs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.filter-packet {
    padding: 6px 12px;
    background: var(--fa-lt-gravy);
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--fa-md-gravy);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-packet:hover {
    background: var(--fa-blue);
    color: var(--white);
}

.filter-packet.active {
    background: var(--fa-navy);
    color: var(--white);
}

.filter-types,
.filter-categories,
.filter-features {
    margin-top: 12px;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--fa-md-gravy);
}

.filter-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--fa-blue);
}

/* ==========================================
   分页 - 镜像站特有
   ========================================== */
.pagination-container {
    display: flex;
    justify-content: center;
    padding: 32px 0;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-btn {
    padding: 8px 16px;
    background: var(--fa-navy);
    color: var(--white);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.page-btn:hover {
    background: var(--fa-dk-blue);
}

.page-info {
    font-size: 0.9rem;
    color: var(--fa-md-gravy);
}

/* ==========================================
   加载状态 - 镜像站特有
   ========================================== */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--fa-md-gravy);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--fa-lt-gravy);
    border-top-color: var(--fa-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--fa-md-gravy);
}

.no-results i {
    font-size: 3rem;
    margin-bottom: 16px;
    color: var(--fa-lt-gravy);
}

.no-results h3 {
    margin-bottom: 8px;
}

/* ==========================================
   图标详情弹窗 - 镜像站特有
   ========================================== */
#modal-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--white);
    border-radius: 16px;
    padding: 32px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.icon-detail {
    text-align: center;
}

.icon-detail h2 {
    margin-bottom: 16px;
    color: var(--fa-navy);
}

.icon-preview-large {
    font-size: 4rem;
    margin: 24px 0;
    color: var(--fa-navy);
}

.icon-meta {
    margin: 16px 0;
    font-size: 0.9rem;
    color: var(--fa-md-gravy);
}

.code-section {
    margin-top: 24px;
    text-align: left;
}

.code-section h4 {
    margin-bottom: 8px;
}

.code-snippet {
    background: var(--fa-navy);
    color: var(--white);
    padding: 12px 16px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 0.85rem;
    overflow-x: auto;
    margin-bottom: 12px;
}

.btn-copy {
    padding: 8px 16px;
    background: var(--fa-blue);
    color: var(--white);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
}

.btn-copy:hover {
    background: var(--fa-dk-blue);
}

/* ==========================================
   回到顶部 - 镜像站特有
   ========================================== */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--fa-navy);
    color: var(--white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: var(--fa-dk-blue);
    transform: translateY(-4px);
}

.back-to-top::after {
    content: '';
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--white);
    border-left: 2px solid var(--white);
    transform: rotate(45deg);
    margin-top: 4px;
}

/* ==========================================
   结果计数 - 镜像站特有
   ========================================== */
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--fa-lt-gravy);
    margin-bottom: 16px;
}

.results-count {
    font-size: 1rem;
    font-weight: 600;
    color: var(--fa-navy);
}

/* ==========================================
   方案价格显示 - 补充样式
   ========================================== */
.plan-price-monthly,
.plan-price-annual {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.plan-price-monthly .size-2xl,
.plan-price-annual .size-2xl {
    font-size: 2.5rem;
    font-weight: 800;
}

.plan-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.plan-features-list li {
    padding: 8px 0;
    font-size: 0.85rem;
    color: var(--fa-md-gravy);
    border-bottom: 1px solid var(--fa-lt-gravy);
    display: flex;
    align-items: center;
    gap: 8px;
}

.plan-features-list li:last-child {
    border-bottom: none;
}

/* ==========================================
   对比表 - 补充样式
   ========================================== */
.comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
}

.comparison-table th,
.comparison-table td {
    padding: 14px 20px;
    text-align: center;
    border-bottom: 1px solid #f0f1f3;
    font-size: 0.9rem;
}

.comparison-table th {
    background: var(--fa-navy);
    font-weight: 600;
    color: var(--white);
}

.comparison-table td:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--fa-navy);
    background: #f7f8fa;
}

.comparison-table tr:last-child td {
    border-bottom: none;
}

/* ==========================================
   响应式补充
   ========================================== */
@media (max-width: 768px) {
    .icon-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 12px;
    }
    
    .icon-card {
        padding: 12px 6px;
    }
    
    .icon-preview {
        font-size: 1.5rem;
    }
    
    .icon-name {
        font-size: 0.65rem;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 12px 8px;
        font-size: 0.75rem;
    }
    
    .hero-icon-grid {
        display: none;
    }
}

@media (max-width: 480px) {
    .icon-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: 8px;
    }
}

/* ==========================================
   v7 中文站布局覆盖层
   仅覆盖单页入口缺失的布局、响应式和交互细节
   ========================================== */
:root {
    --fa-content-max: 1400px;
    --fa-page-gutter: 24px;
    --fa-section-space: clamp(56px, 7vw, 104px);
    --fa-control-height: 44px;
    --fa-border: #dfe3e8;
    --fa-surface: #ffffff;
    --fa-surface-muted: #f7f8fa;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 76px;
}

body {
    min-width: 320px;
    margin: 0;
    overflow-x: hidden;
    background: var(--white);
    color: var(--fa-navy);
    font-family: var(--font-sans);
    line-height: 1.6;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a,
input {
    -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
.icon-card:focus-visible {
    outline: 3px solid rgba(28, 115, 232, 0.35);
    outline-offset: 3px;
}

.container {
    width: min(calc(100% - (var(--fa-page-gutter) * 2)), var(--fa-content-max));
    max-width: var(--fa-content-max);
    margin-right: auto;
    margin-left: auto;
}

#start-part,
#hero-part,
#packs-part,
#icons-part,
#start-guide,
#plans-part,
#support-part {
    scroll-margin-top: 76px;
}

#hero-part,
#packs-part,
#icons-part,
#start-guide,
#plans-part,
#support-part {
    position: relative;
}

#packs-part,
#icons-part,
#start-guide,
#plans-part,
#support-part {
    padding-top: var(--fa-section-space);
    padding-bottom: var(--fa-section-space);
}

#packs-part .row.roomy,
#icons-part .row.roomy,
#support-part .row.roomy {
    row-gap: 24px;
}

/* 导航 */
.main-nav {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    width: 100%;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid var(--fa-border);
    box-shadow: 0 2px 12px rgba(24, 49, 83, 0.06);
    backdrop-filter: blur(12px);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--header-height);
    width: min(calc(100% - (var(--fa-page-gutter) * 2)), var(--fa-content-max));
    margin: 0 auto;
}

.nav-brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
    min-height: var(--fa-control-height);
    color: var(--fa-navy);
    font-weight: 800;
    white-space: nowrap;
}

.nav-brand i {
    color: var(--fa-blue);
    font-size: 1.35rem;
}

.nav-menu {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-menu a {
    display: inline-flex;
    align-items: center;
    min-height: var(--fa-control-height);
    padding: 8px 11px;
    border-radius: var(--radius-md);
    color: var(--fa-md-gravy);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
    background: var(--fa-lt-blue);
    color: var(--fa-blue);
    text-decoration: none;
}

.nav-powered-by {
    display: inline-flex;
    align-items: center;
    min-height: var(--fa-control-height);
    padding: 8px 14px;
    border-radius: var(--radius-md);
    color: var(--fa-navy);
    font-size: var(--text-sm);
    font-weight: 700;
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}

.nav-powered-by:hover,
.nav-powered-by:focus-visible {
    background: var(--fa-lt-blue);
    color: var(--fa-blue);
    text-decoration: none;
}



.nav-search {
    flex: 0 1 230px;
    min-width: 160px;
}

.nav-search input {
    width: 100%;
    min-height: 40px;
    padding: 8px 13px;
    border: 1px solid var(--fa-border);
    border-radius: var(--radius-md);
    background: var(--fa-surface-muted);
    color: var(--fa-navy);
    font-size: var(--text-sm);
}

.nav-search input:focus {
    border-color: var(--fa-blue);
    background: var(--white);
    outline: none;
    box-shadow: 0 0 0 3px rgba(28, 115, 232, 0.12);
}

/* 首屏 */
#hero-part {
    min-height: 520px;
}

.hero-fill-row {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-height: 520px;
    padding-top: 56px;
    padding-bottom: 56px;
    overflow: hidden;
    gap: 0;
}

.hero-fill-row > .hero-icon-grid {
    flex: 1 0 0px;
    min-width: 0;
}

.hero-fill-row > .text-center {
    flex: 0 1 auto;
    width: 420px;
    max-width: 420px;
}

.hero-fill-row > [class*="column-12"] {
    width: auto !important;
    max-width: none !important;
}

#hero-part h1 {
    margin: 0;
    letter-spacing: 0;
    line-height: 1.05;
}

#hero-part p {
    max-width: 48ch;
    line-height: 1.7;
}

.hero-icon-grid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 0;
    overflow: hidden;
    min-width: 0;
}

.hero-icon-grid > div {
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 1.6rem !important;
    max-width: none;
}

/* 左侧图标行右对齐，自然裁切左边 */
.hero-icon-grid:first-child > div {
    justify-content: flex-end;
    margin-right: 1.5rem;
}

/* 右侧图标行左对齐，自然裁切右边 */
.hero-icon-grid:last-child > div {
    justify-content: flex-start;
    margin-left: 1.5rem;
}

.hero-icon-cell {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    font-size: 2rem;
    text-decoration: none;
    transition: background-color var(--duration-normal) var(--ease), transform var(--duration-normal) var(--ease);
}

.hero-icon-cell:hover {
    background: var(--fa-lt-blue);
    transform: translateY(-3px) rotate(-2deg);
}

/* Hero 图标 hover 晃动动画 */
@keyframes hero-icon-wiggle {
    0%   { transform: rotate(0deg) scale(1); }
    20%  { transform: rotate(-12deg) scale(1.2); }
    40%  { transform: rotate(10deg) scale(1.15); }
    60%  { transform: rotate(-8deg) scale(1.18); }
    80%  { transform: rotate(6deg) scale(1.12); }
    100% { transform: rotate(0deg) scale(1); }
}

.hero-icon-cell:hover i,
.hero-icon-cell i.hero-wiggling {
    animation: hero-icon-wiggle 0.5s ease-in-out;
}

.hero-icon-cell i {
    transition: color 0.3s ease, opacity 450ms ease-in-out, transform 250ms ease-in-out;
}

.fa7-search-input,
.fa7-search-input-lg {
    min-height: var(--fa-control-height);
    color: var(--fa-navy);
    box-shadow: var(--shadow-sm);
}

.fa7-search-input {
    min-width: 0;
}

.fa7-search-input-lg {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
}

#hero-part .button,
#start-guide .button,
#support-part .button,
#plans-part .button {
    min-height: var(--fa-control-height);
}

/* 图标浏览区 */
#icons-part .row.roomy:nth-of-type(2) {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

#icons-part .row.roomy:nth-of-type(2) > [class*="column-12"] {
    width: auto !important;
    max-width: none !important;
}

#icons-part .row.roomy:nth-of-type(2) > [class*="tablet:column-3"] {
    position: sticky;
    top: 88px;
}

#icons-part .row.roomy:nth-of-type(2) > [class*="tablet:column-9"] {
    min-width: 0;
}

#icons-part .row.roomy:nth-of-type(2) > [class*="tablet:column-3"] > .card {
    padding: 20px !important;
    border-color: var(--fa-border);
    background: var(--fa-surface-muted);
}

#icons-part .row.roomy:nth-of-type(2) > [class*="tablet:column-3"] > .card + .card {
    margin-top: 16px;
}

.filter-packs {
    align-items: stretch;
    gap: 6px;
}

.filter-packet {
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid var(--fa-border);
    background: var(--white);
    color: var(--fa-md-gravy);
    font-weight: 600;
}

.filter-packet:hover,
.filter-packet:focus-visible {
    border-color: var(--fa-blue);
    background: var(--fa-lt-blue);
    color: var(--fa-blue);
}

.filter-packet.active {
    border-color: var(--fa-navy);
    background: var(--fa-navy);
    color: var(--white);
}

.filter-types,
.filter-categories,
.filter-features {
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}

.filter-checkbox {
    min-height: 36px;
    padding: 5px 0;
    color: var(--fa-md-gravy);
}

.filter-checkbox:hover {
    color: var(--fa-blue);
}

.filter-checkbox input[type="checkbox"] {
    flex: 0 0 auto;
}

.icon-grid {
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    align-items: stretch;
    gap: 12px;
    padding: 20px 0;
}

.icon-card {
    min-width: 0;
    min-height: 132px;
    aspect-ratio: 1 / 1;
    padding: 18px 10px 14px;
    border-color: var(--fa-border);
    border-radius: var(--radius-md);
    box-shadow: none;
}

.icon-card:hover {
    border-color: var(--fa-blue);
    background: var(--white);
    box-shadow: 0 8px 22px rgba(24, 49, 83, 0.11);
    transform: translateY(-2px);
}

.icon-preview {
    display: grid;
    min-height: 48px;
    place-items: center;
    margin-bottom: 10px;
    color: var(--fa-navy);
    font-size: 2rem;
}

.icon-name {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge-new {
    min-height: 18px;
    margin-top: 6px;
    padding: 2px 6px;
    line-height: 1.2;
}

.results-header {
    gap: 16px;
    min-height: 48px;
    margin-bottom: 4px;
}

.results-count {
    overflow-wrap: anywhere;
}

.loading-state,
.no-results {
    min-height: 240px;
}

.pagination-container {
    min-height: 56px;
    padding: 20px 0 0;
}

.pagination {
    flex-wrap: wrap;
    gap: 10px;
}

.page-btn {
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--fa-navy);
}

/* 开始、价格和支持 */
#support-part .card {
    height: 100%;
}

#support-part .card p {
    max-width: 42ch;
    margin-right: auto;
    margin-left: auto;
}

#plans-part {
    overflow: visible !important;
    background: #ffffff !important;
    padding-top: 94px;
}

#plans-part h1 {
    font-size: clamp(2.7rem, 5vw, 4.8rem);
    line-height: 1;
}

.plans-cards-section {
    margin-top: 0;
    padding-top: 0;
    background: #ffffff;
}

.plans-summary-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-lg);
    max-width: 1160px;
    margin: 0 auto;
    align-items: end;
}

.plan-card-summary {
    position: relative;
    min-width: 0;
    min-height: 440px;
    height: auto;
    border: 1px solid var(--fa-lt-gravy) !important;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: 0 2px 8px rgba(24, 49, 83, 0.06) !important;
    background: var(--white) !important;
    color: var(--fa-ink);
    transition: border-color var(--timing-fast) ease-in-out, box-shadow var(--timing-fast) ease-in-out;
}

.plan-card-summary:hover {
    border-color: #c3c6d1 !important;
    box-shadow: 0 4px 16px rgba(24, 49, 83, 0.1) !important;
}

/* 中间卡片（个人版）突出 - 官方样式 */
.plan-card-summary--solo {
    border: 2px solid var(--fa-yellow) !important;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--fa-yellow) 10%, transparent) !important;
    transform: none;
    z-index: 1;
    margin-top: -20px !important;
    padding-top: calc(var(--spacing-2xl) + var(--spacing-md) + 4px) !important;
    min-height: 540px;
}

.plan-card-summary--solo:hover {
    border-color: var(--fa-dk-yellow) !important;
    box-shadow: 0 12px 32px color-mix(in srgb, var(--fa-yellow) 20%, transparent) !important;
    transform: none;
}

.plan-card-summary h2,
.plan-card-summary h2 span { color: var(--fa-ink) !important; }

.plan-card-summary .plan-card-tagline { color: #6b7280; font-size: 0.9rem; }
.plan-card-summary .plan-price-period { color: #6b7280; }
.plan-card-summary .plan-price-cny { color: #6b7280; font-size: 0.8rem; }
.plan-card-summary .plan-savings-note { color: #6b7280; margin-top: 0.5em; font-size: 0.8rem; }

/* 卡片顶部彩色条 - 官方无此设计，移除 */

/* 标签样式 - 官方标签在卡片内部上方 */
.plan-card-tag {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    margin-top: -0.6em;
}

.plan-card-tag .tag {
    display: inline-flex;
    align-items: center;
    padding: var(--tag-padding, 0.5em 1em);
    background: var(--tag-background, var(--fa-gravy));
    color: var(--tag-color, var(--fa-navy));
    font-size: var(--tag-font-size, var(--font-size-xs));
    font-weight: var(--tag-font-weight, bold);
    border-radius: var(--tag-border-radius, var(--border-radius-md));
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.0625em;
    line-height: 1;
    box-shadow: none;
    border: var(--tag-border-width, 0) var(--tag-border-style, solid) var(--tag-border-color, transparent);
}

/* 个人版标签 - 金色 */
.plan-card-summary--solo .plan-card-tag .tag {
    background: var(--fa-yellow);
    color: var(--fa-navy);
}

/* 标题行内标签样式（入门版"云端"标签） */
.plan-card-title {
    display: flex;
    align-items: center;
    gap: 0.4em;
    flex-wrap: wrap;
    font-size: 1.3rem;
    color: var(--fa-ink);
}

/* 标题图标样式 */
.plan-card-icon {
    font-size: 1em;
    color: var(--fa-ink) !important;
}

.plan-card-summary--starter .plan-card-icon {
    color: var(--fa-blue) !important;
}

.plan-card-summary--solo .plan-card-icon {
    color: var(--fa-yellow) !important;
}

.plan-card-summary--team .plan-card-icon {
    color: var(--fa-teal) !important;
}

/* 入门版"云端"标签 - 蓝字蓝框透明底 */
.plan-card-inline-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.5em 0.5em;
    background: transparent;
    color: var(--fa-blue);
    font-size: 0.55em;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    vertical-align: middle;
    border: 1px solid var(--fa-blue);
    opacity: 0.7;
}

/* 所有按钮统一尺寸和位置 - 黑字黑框黑阴影 */
.plan-card-summary .button {
    width: 100%;
    margin-top: auto;
    border: 2px solid var(--fa-navy) !important;
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 0 var(--fa-navy) !important;
    background: var(--fa-navy) !important;
    color: var(--fa-navy) !important;
    font-weight: var(--button-font-weight, 600);
    padding: var(--button-padding, 0.9375em 1.5em);
    transition: background-color var(--timing-fast) ease-in-out, transform 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
    text-align: center;
}

.plan-card-summary .button:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--fa-navy) !important;
}

/* 入门版按钮 - 蓝色背景 */
.plan-card-summary--starter .button {
    background: var(--fa-blue) !important;
    color: var(--fa-navy) !important;
}
.plan-card-summary--starter .button:hover {
    background: var(--fa-dk-blue) !important;
}

/* 个人版按钮 - 黄色背景 */
.plan-card-summary--solo .button {
    background: var(--fa-yellow) !important;
    color: var(--fa-navy) !important;
}
.plan-card-summary--solo .button:hover {
    background: var(--fa-dk-yellow) !important;
}

/* 团队版按钮 - 绿色背景 */
.plan-card-summary--team .button {
    background: var(--fa-teal) !important;
    color: var(--fa-navy) !important;
}
.plan-card-summary--team .button:hover {
    background: var(--fa-dk-teal) !important;
}

/* 功能列表容器 */
.plan-features-list-wrapper {
    border-top: 1px solid var(--fa-lt-gravy);
    padding-top: 16px;
}

/* 功能列表标题 */
.plan-features-header {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fa-ink);
    margin-bottom: 8px;
}

.plan-card-summary .plan-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.plan-card-summary .plan-features-list li { 
    color: var(--fa-ink);
    padding: 4px 0;
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* 蓝色圆圈勾选图标 */
.plan-feature-check {
    color: var(--fa-blue);
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.plan-card-summary .plan-features-list li:last-child {
    border-bottom: none;
}

/* Flex utility for button alignment */
.flex-1 { flex: 1 1 0; }

.plan-card-summary .plan-price-value {
    font-size: 2.5rem;
    font-weight: 800;
}

.free-plan-note {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1160px;
    margin: 24px auto 0;
    padding: 18px 22px;
    border: 2px solid var(--fa-ink);
    border-radius: var(--border-radius-lg);
    background: var(--fa-soft-purple);
    color: var(--fa-ink);
}

.free-plan-note > i { color: var(--fa-purple); font-size: 1.35rem; }
.free-plan-note .text-link { margin-left: auto; color: var(--fa-purple); font-weight: 800; white-space: nowrap; }

.enterprise-section {
    max-width: 1160px;
    margin: 32px auto 0;
}

.enterprise-card {
    padding: 24px 32px;
    border: 2px solid var(--fa-gravy);
    border-radius: var(--border-radius-lg);
    background: transparent;
}

.enterprise-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.enterprise-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.enterprise-icon {
    font-size: 1.5rem;
    color: var(--fa-ink);
    flex-shrink: 0;
}

.enterprise-text h3 {
    color: var(--fa-ink);
    margin: 0 0 4px;
    font-size: 1.1rem;
}

.enterprise-text p {
    color: var(--fa-md-gravy);
    margin: 0;
    font-size: 0.9rem;
}

.button-outline {
    border: 2px solid var(--fa-gravy);
    border-radius: var(--border-radius-md);
    background: transparent;
    color: var(--fa-md-gravy);
    padding: 0.6em 1.5em;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color var(--timing-fast) ease-in-out;
    box-shadow: none;
}

.button-outline:hover {
    background: var(--fa-lt-gravy);
}

.plans-faq-section {
    background-color: var(--white);
}

.comparison-table-wrap,
.wrap-compare-tables {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--border-radius-lg);
}

.comparison-table {
    min-width: 680px;
    border-collapse: separate;
    border-spacing: 0;
}

.comparison-table th,
.comparison-table td {
    min-width: 120px;
    vertical-align: middle;
}

.comparison-table th:first-child,
.comparison-table td:first-child {
    min-width: 170px;
}

#plans-part .padding-y-6xl {
    margin-right: calc(var(--fa-page-gutter) * -1);
    margin-left: calc(var(--fa-page-gutter) * -1);
}

#support-part .row.roomy > [class*="tablet:column-4"] {
    display: flex;
}

#support-part .row.roomy > [class*="tablet:column-4"] > .card {
    width: 100%;
}

.main-footer {
    background: var(--fa-navy);
    color: var(--white);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    padding-top: 56px;
    padding-bottom: 40px;
}

.footer-col h4 {
    margin: 0 0 14px;
    color: var(--white);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
}

.footer-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-col li + li {
    margin-top: 8px;
}

.footer-col a {
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--text-sm);
}

.footer-col a:hover {
    color: var(--white);
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 0 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.65);
    font-size: var(--text-xs);
    text-align: center;
}

.footer-bottom p {
    margin: 0;
}

.footer-copyright {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-copyright .footer-icp {
    margin-top: 0;
    margin-left: 0;
}

.footer-attribution {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.65);
    font-size: var(--text-xs);
}

.footer-attribution a {
    color: var(--fa-blue);
    font-weight: 600;
    text-decoration: none;
}

.footer-icp {
    margin-top: 12px;
    font-size: 0.8rem;
    color: var(--fa-md-gravy);
}

.footer-icp a {
    color: inherit;
    text-decoration: none;
}

.footer-icp a:hover {
    text-decoration: underline;
}

.footer-attribution a:hover {
    text-decoration: underline;
}

/* 弹窗 */
#modal-container {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    padding: 24px;
    background: rgba(13, 24, 40, 0.64);
}

.modal-overlay {
    position: absolute;
    inset: 0;
}

#modal-container .modal-content {
    position: relative;
    z-index: 1;
    width: min(100%, 720px);
    max-width: 720px;
    max-height: min(86vh, 820px);
    padding: 0;
    overflow: auto;
    border: 1px solid var(--fa-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2xl);
}

#modal-container .modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--fa-border);
    border-radius: 50%;
    background: var(--white);
    color: var(--fa-navy);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

#modal-container .modal-close:hover {
    background: var(--fa-lt-blue);
    color: var(--fa-blue);
}

#modal-container .icon-detail {
    padding: 32px;
}

#modal-container .code-snippet {
    white-space: pre;
}

.back-to-top {
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

/* 平板和手机 */
@media (max-width: 1024px) {
    :root {
        --fa-page-gutter: 20px;
    }

    .nav-container {
        gap: 10px;
    }

    .nav-menu a {
        padding-right: 8px;
        padding-left: 8px;
    }

    .hero-fill-row {
        gap: 24px;
    }

    /* 中等屏幕：图标列自然收缩，超出部分被裁剪 */
    .hero-icon-cell {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .hero-icon-grid > div {
        gap: 0.4rem !important;
    }

    .plans-summary-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    :root {
        --fa-page-gutter: 16px;
    }

    .nav-container {
        flex-wrap: wrap;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .nav-brand {
        flex: 1 1 auto;
    }

    .nav-search {
        flex: 0 1 190px;
        min-width: 0;
    }

    .nav-menu {
        order: 3;
        flex: 1 0 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .nav-menu::-webkit-scrollbar {
        display: none;
    }

    #hero-part,
    .hero-fill-row {
        min-height: 0;
    }

    .hero-fill-row {
        grid-template-columns: 1fr;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    /* 窄屏：图标完全隐藏，中心文字居中显示 */
    .hero-icon-grid {
        display: none !important;
    }

    /* 中心文字在窄屏下保持稳定，不被挤压 */
    #hero-part h1 {
        font-size: clamp(2.25rem, 8vw, 3.5rem);
        text-align: center;
    }

    #hero-part p {
        max-width: 42ch;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    #hero-part .display-flex.gap-md {
        flex-wrap: wrap;
    }

    #icons-part .row.roomy:nth-of-type(2) {
        grid-template-columns: 1fr;
    }

    #icons-part .row.roomy:nth-of-type(2) > [class*="tablet:column-3"] {
        position: static;
    }

    #icons-part .row.roomy:nth-of-type(2) > [class*="tablet:column-3"] > .card + .card {
        margin-top: 12px;
    }

    .filter-types,
    .filter-categories,
    .filter-features {
        max-height: 180px;
    }

    .plans-summary-cards-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin-right: auto;
        margin-left: auto;
    }

    .plan-card-summary {
        min-height: 0;
    }

    .free-plan-note {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .free-plan-note .text-link {
        margin-left: 0;
    }

    #plans-part .padding-y-6xl {
        margin-right: calc(var(--fa-page-gutter) * -1);
        margin-left: calc(var(--fa-page-gutter) * -1);
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
        padding-top: 44px;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    #modal-container {
        padding: 12px;
    }

    #modal-container .icon-detail {
        padding: 24px 18px;
    }
}

@media (max-width: 480px) {
    .nav-search {
        display: none;
    }

    .nav-menu a {
        padding-right: 10px;
        padding-left: 10px;
    }

    #hero-part h1 {
        font-size: clamp(2.25rem, 12vw, 3.5rem);
    }

    #hero-part .button,
    #start-guide .button,
    #support-part .button,
    #plans-part .button {
        width: 100%;
    }

    .hero-fill-row {
        padding-top: 36px;
        padding-bottom: 40px;
    }

    .icon-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .icon-card {
        min-height: 120px;
    }

    .filter-packs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .filter-packet {
        flex: 0 0 auto;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .back-to-top {
        right: 16px;
        bottom: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ==========================================
   官网色彩与高密度内容层
   颜色取自 Font Awesome 官方 v7 页面变量
   注：--fa-teal/--fa-purple/--fa-red 与 main.css 冲突，已移至 main.css 作为唯一来源
   ========================================== */
:root {
    --fa-cyan: #3bc9db;
    --fa-lime: #a9e34b;
    --fa-soft-blue: #e7f5ff;
    --fa-soft-cyan: #e3fafc;
    --fa-soft-purple: #f3f0ff;
    --fa-soft-green: #ebfbee;
    --fa-soft-red: #fff5f5;
}

#hero-part {
    border-top: 4px solid var(--fa-cyan);
}

#hero-part .hero-icon-cell:nth-child(2n) i {
    color: var(--fa-cyan) !important;
}

#hero-part .hero-icon-cell:nth-child(3n) i {
    color: var(--fa-purple) !important;
}

#hero-part .hero-icon-cell:nth-child(4n) i {
    color: var(--fa-teal) !important;
}

#packs-part {
    background: var(--fa-soft-purple) !important;
}

#start-guide {
    background: var(--white) !important;
}

#hero-part .button.with-border {
    background: var(--fa-navy) !important;
    border-color: var(--fa-navy) !important;
    color: var(--white) !important;
}

#icons-results,
#icons-results > .icon-grid {
    display: grid !important;
    width: 100%;
}

#icons-results > .icon-grid {
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
}

#icons-results > .icon-grid > .icon-card {
    display: flex !important;
    width: auto;
}

#plans-part .comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--white);
    border: 1px solid var(--fa-lt-gravy);
    border-radius: var(--border-radius-lg);
    color: var(--fa-navy);
    overflow: hidden;
}

#plans-part .comparison-table thead th {
    background: var(--fa-navy);
    color: var(--white);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 16px 24px;
    text-align: center;
    border: none;
}

#plans-part .comparison-table thead th:first-child {
    border-radius: var(--border-radius-lg) 0 0 0;
    text-align: left;
}

#plans-part .comparison-table thead th:last-child {
    border-radius: 0 var(--border-radius-lg) 0 0;
}

#plans-part .comparison-table tbody td {
    color: var(--fa-ink);
    border-bottom: 1px solid var(--fa-lt-gravy);
    padding: 14px 24px;
    text-align: center;
    font-size: 0.9rem;
    background: var(--white);
}

#plans-part .comparison-table tbody tr:nth-child(odd) td {
    background: #f8f9fb;
}

#plans-part .comparison-table tbody td:first-child {
    background: var(--white);
    color: var(--fa-navy);
    font-weight: 600;
    text-align: left;
    border-right: 1px solid var(--fa-lt-gravy);
}

#plans-part .comparison-table tbody tr:last-child td {
    border-bottom: none;
}

/* Solo 列（第4列 = index 3）黄色高亮 */
#plans-part .comparison-table tbody td:nth-child(4) {
    background: #fef9e7;
}

#plans-part .comparison-table tbody tr:nth-child(odd) td:nth-child(4) {
    background: #fdf5d9;
}

/* section 行（Plan Extras / Plan Features） */
#plans-part .comparison-table tbody tr.section-row td {
    background: var(--white);
    color: var(--fa-md-gravy);
    font-weight: 600;
    font-size: 0.85rem;
    text-align: left;
    padding: 20px 24px 10px;
    border-bottom: none;
}

/* 勾选/叉图标 */
#plans-part .comparison-table .fa-circle-check {
    color: var(--fa-navy);
    font-size: 1rem;
}


.plans-cards-section .comparison-table .fa-ban {
    color: #c3c6d1;
    font-size: 1rem;
}

#plans-part .comparison-table tbody td small {
    color: var(--fa-md-gravy);
    font-size: 0.8rem;
}

.plans-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 60px;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0;
}

.plans-faq-section .container {
    padding-left: 0;
    padding-right: 0;
    max-width: 1160px;
    margin: 0 auto;
}

.plans-faq-col {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.plans-faq-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.plans-faq-item-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.plans-faq-icon {
    font-size: 1.4rem;
    color: var(--fa-navy);
    flex-shrink: 0;
    margin-top: 2px;
}

.plans-faq-item h4 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--fa-ink);
    line-height: 1.4;
}

.plans-faq-item p {
    margin: 0;
    padding-left: calc(1.4rem + 12px);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--fa-md-gravy);
}

@media (max-width: 768px) {
    .plans-faq-grid {
        grid-template-columns: 1fr;
    }
}

#support-part {
    background: var(--fa-soft-cyan) !important;
}

#support-part .row.roomy > [class*="tablet:column-4"]:nth-child(1) .card {
    border-top: 4px solid #146ebe;
}

#support-part .row.roomy > [class*="tablet:column-4"]:nth-child(2) .card {
    border-top: 4px solid var(--fa-teal);
}

#support-part .row.roomy > [class*="tablet:column-4"]:nth-child(3) .card {
    border-top: 4px solid var(--fa-purple);
}

#support-part .row.roomy > [class*="tablet:column-4"] i {
    color: #146ebe !important;
}

#support-part .row.roomy > [class*="tablet:column-4"]:nth-child(2) i {
    color: var(--fa-yellow) !important;
}

#support-part .row.roomy > [class*="tablet:column-4"]:nth-child(3) i {
    color: var(--fa-teal) !important;
}

#plans-part .message.with-icon {
    min-height: 132px;
    padding: 18px 22px 18px 52px;
    border-left: 4px solid var(--fa-cyan);
    background: var(--fa-soft-blue);
}

#plans-part .column-12:nth-child(2) .message.with-icon {
    border-left-color: var(--fa-purple);
    background: var(--fa-soft-purple);
}

@media (max-width: 1024px) {
    .nav-container {
        flex-wrap: wrap;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .nav-brand {
        flex: 1 1 auto;
    }

    .nav-menu {
        order: 3;
        flex: 1 0 100%;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .nav-menu::-webkit-scrollbar {
        display: none;
    }
}

/* ==========================================
   Official-style visual composition
   ========================================== */
:root {
    --fa-ink: #183153;
    --fa-blue-bright: #74c0fc;
    --fa-yellow-bright: #ffd43b;
    --fa-mint: #96f2d7;
    --fa-coral: #ff8787;
    --fa-lilac: #d0bfff;
    --fa-paper: #f8f9fa;
}

body {
    background: #ffffff;
    color: var(--fa-ink);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--fa-ink);
    letter-spacing: 0;
}

.main-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 2px 12px rgba(24, 49, 83, 0.06);
}

.nav-container {
    min-height: 70px;
    max-width: 1280px;
}

.nav-brand {
    color: var(--fa-ink) !important;
    font-weight: 800;
    white-space: nowrap;
}

.nav-brand i {
    color: #228be6;
    margin-right: 8px;
}

.nav-menu a {
    color: #515f7c;
    font-weight: 700;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
    color: #1c7ed6;
}

.nav-search input {
    min-height: 40px;
    border: 1px solid #c9ced8;
    border-radius: 6px;
    background: #ffffff;
}

#hero-part {
    border-top: 0;
    background: #ffffff !important;
}

.hero-fill-row {
    min-height: 520px;
    padding-top: 48px;
    padding-bottom: 56px;
}

#hero-part h1 {
    font-size: 3rem;
    line-height: 1.05;
    white-space: nowrap;
}

#hero-part h1 .size-xl {
    display: inline-block;
    margin-top: 18px;
    padding: 5px 13px;
    border-radius: 5px;
    background: var(--fa-yellow-bright);
    color: var(--fa-ink) !important;
    font-size: 1rem;
    font-weight: 800 !important;
    letter-spacing: 0.08em;
}

#hero-part .fa7-search-input {
    min-height: 60px;
    border-color: #a5d8ff;
    border-radius: 6px;
    box-shadow: 0 0 0 5px #e7f5ff;
}

#hero-part .fa7-search-input:focus {
    border-color: #228be6;
    box-shadow: 0 0 0 5px #d0ebff;
}

#hero-part .row.roomy > .column {
    padding-right: 22px;
    border-left: 3px solid var(--fa-blue-bright);
}

#hero-part .row.roomy > .column:nth-child(2) { border-left-color: var(--fa-yellow-bright); }
#hero-part .row.roomy > .column:nth-child(3) { border-left-color: var(--fa-mint); }
#hero-part .row.roomy > .column:nth-child(4) { border-left-color: var(--fa-coral); }

.hero-icon-grid {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 460px;
    padding: 12px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    min-width: 0;
}

.hero-icon-grid > div:not(.hero-visual-sticker) {
    position: relative;
    z-index: 1;
}

.hero-icon-cell {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    transition: transform 160ms ease, opacity 160ms ease;
}

@media (max-width: 1024px) {
    .hero-icon-cell {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.3rem !important;
    }
    .hero-icon-grid > div {
        gap: 1.2rem !important;
    }
}

.hero-icon-cell:hover {
    transform: translateY(-3px) rotate(-4deg);
    opacity: 0.85;
}

.hero-visual-sticker {
    position: absolute;
    right: 28px;
    top: 28px;
    z-index: 2;
    width: 144px;
    min-height: 144px;
    padding: 15px;
    border-radius: 50%;
    background: var(--fa-coral);
    color: var(--fa-ink);
    transform: rotate(8deg);
    box-shadow: 5px 6px 0 rgba(24, 49, 83, 0.16);
}

.hero-visual-sticker strong {
    display: block;
    margin-top: 7px;
    font-size: 0.93rem;
    line-height: 1.05;
}

.hero-visual-sticker i {
    position: absolute;
    right: 16px;
    bottom: 12px;
    font-size: 1.4rem;
}

.hero-visual-kicker,
.eyebrow {
    color: #1c7ed6;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

#icons-part {
    background: #ffffff;
}

#icons-part .card {
    border-radius: 8px;
    border-color: #d7dce5;
    box-shadow: none;
}

#icons-part .row.roomy:nth-of-type(2) {
    align-items: start;
}

#icons-part .row.roomy:nth-of-type(2) > [class*="tablet:column-9"],
#icons-results,
#icons-results > .icon-grid {
    min-width: 0;
}

#icons-results {
    display: block !important;
    width: 100% !important;
    overflow: hidden;
}

#icons-part .results-header {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--fa-ink);
}

#icons-results > .icon-grid {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 10px;
    padding-top: 18px;
    width: 100% !important;
    min-width: 0;
}

#icons-results > .icon-grid > .icon-card {
    min-height: 118px;
    border-color: #e6e9ef;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(24, 49, 83, 0.04);
}

#icons-results > .icon-grid > .icon-card:hover {
    border-color: #74c0fc;
    background: #e7f5ff;
}

#packs-part .icon-pack-card {
    position: relative;
    overflow: hidden;
}

#packs-part .pack-card-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 8px 12px;
    background: rgba(24, 49, 83, 0.92);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

#start-guide {
    background: var(--white) !important;
    border-top: 0;
}

#other-ways {
    background-color: rgb(240 241 243);
}

.eyebrow--color { color: #e03131; }
.plans-intro { margin-top: 16px; color: #515f7c; font-size: 1.1rem; }

#plans-part .plans-switch {
    --switch-padding: var(--spacing-2xs);
    --switch-easing: cubic-bezier(0.47, 1.64, 0.41, 0.8);
    margin: 30px auto 0;
    border: none;
    border-radius: var(--border-radius-lg);
    color: var(--white);
    cursor: pointer;
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    isolation: isolate;
    justify-content: start;
    padding: var(--switch-padding);
    position: relative;
}

#plans-part .plans-switch label {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    margin: 0;
    padding: var(--spacing-sm) var(--spacing-lg);
    text-align: left;
    width: 100%;
}

#plans-part .plans-switch label:has(input:checked) {
    background: transparent;
    border-radius: inherit;
    color: var(--white);
    transition: color var(--timing-xfast) ease-in-out var(--timing-2xfast);
}

#plans-part .plans-switch .toggle-content {
    align-items: center;
    display: inline-flex;
}

#plans-part .plans-switch .toggle-label {
    font-weight: var(--font-weight-bold);
}

#plans-part .plans-switch label:has(input:not(:checked)) {
    opacity: 0.6;
}

#plans-part .plans-switch label:has(input:checked):hover,
#plans-part .plans-switch label:has(input:not(:checked)):hover {
    opacity: 1;
    transition-delay: 0s;
    transition-duration: var(--timing-2xfast);
}

#plans-part .plans-switch .tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--border-radius-sm);
    background: transparent;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    --tag-background: transparent;
    --tag-color: var(--fa-md-gravy);
    --tag-border-color: var(--fa-md-gravy);
    --tag-border-width: 2px;
    --tag-border-style: solid;
    border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);
    background: var(--tag-background);
    color: var(--tag-color);
}

#plans-part .plans-switch label:has(input:checked) .tag {
    --tag-background: var(--fa-navy);
    --tag-color: var(--fa-gravy);
    --tag-border-color: var(--fa-dk-gravy);
    --tag-border-width: 2px;
    --tag-border-style: solid;
    border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);
    background: var(--tag-background);
    color: var(--tag-color);
}

/* 滑动指示器背景 - 深色底色 */
#plans-part .plans-switch::after {
    background-color: var(--fa-dk-navy);
    border-radius: inherit;
    content: "";
    inset: 0;
    position: absolute;
    z-index: -2;
}

/* 滑动指示器 - 前景色 */
#plans-part .plans-switch::before {
    background-color: var(--fa-navy);
    border-radius: calc(var(--border-radius-lg) - var(--switch-padding));
    box-shadow: none;
    content: "";
    position: absolute;
    transition: inset var(--timing-fast) var(--switch-easing), background-color var(--timing-fast) ease-in-out;
    z-index: -1;
}

#plans-part .plans-switch:has(input.left:checked)::before {
    inset: var(--switch-padding) 50% var(--switch-padding) var(--switch-padding);
}

#plans-part .plans-switch:has(input.right:checked)::before {
    inset: var(--switch-padding) var(--switch-padding) var(--switch-padding) 50%;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#plans-part + section {
    margin-top: 0 !important;
    padding-top: 0;
    background: #ffffff;
}

#plans-part ~ #support-part {
    background: #ffffff !important;
    border-top: 1px solid #e5e7eb;
}

.support-illustration {
    display: block;
    width: min(100%, 432px);
    height: 180px;
    margin: 22px auto 0;
    object-fit: contain;
}

.support-card {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    border: 2px solid var(--fa-ink) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 7px 7px 0 var(--support-shadow) !important;
}

.support-card::after {
    position: absolute;
    right: -25px;
    bottom: -48px;
    width: 150px;
    height: 150px;
    border: 25px solid var(--support-color);
    border-radius: 50%;
    content: "";
    opacity: 0.8;
}

.support-card--blue { --support-color: #74c0fc; --support-shadow: #a5d8ff; }
.support-card--yellow { --support-color: #ffd43b; --support-shadow: #fab005; }
.support-card--mint { --support-color: #96f2d7; --support-shadow: #63e6be; }

.support-card-art {
    display: flex;
    min-height: 126px;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin: -26px -26px 22px;
    background: var(--support-color);
    color: var(--fa-ink);
    font-size: 3.1rem;
    transform: rotate(-3deg);
}

.support-card-art i:nth-child(2) { transform: translateY(15px) rotate(8deg); }
.support-card > .size-2xl,
.support-card > h3,
.support-card > p,
.support-card > a { position: relative; z-index: 1; }

/* 首屏三栏 hero：左中右图标墙 + 中央主内容 */
.hero-showcase {
    position: relative;
    overflow: hidden;
    padding: 32px 0 20px;
    background: #ffffff;
}

.hero-showcase-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(420px, 540px) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(18px, 3vw, 44px);
    width: min(100%, 1880px);
    margin: 0 auto;
    padding: 0 18px;
}

.hero-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.hero-side-left {
    align-items: flex-start;
}

.hero-side-right {
    align-items: flex-end;
}

.hero-icon-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    align-items: center;
    min-height: 42px;
}

.hero-side-right .hero-icon-row {
    justify-content: flex-end;
}

.hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--fa-ink);
    font-size: 1.7rem;
    line-height: 1;
    opacity: 0.98;
}

.hero-side .hero-icon:nth-child(4n),
.hero-side .hero-icon:nth-child(7n) {
    color: #a9b1bc;
}

.hero-side .hero-icon:nth-child(3n) {
    transform: rotate(8deg);
}

.hero-side .hero-icon:nth-child(6n) {
    transform: rotate(-10deg);
}

.hero-side .hero-icon:nth-child(5n) {
    color: #d0d5dd;
}

.hero-content-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 42px 0 52px;
    text-align: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    margin-bottom: 22px;
    padding: 4px 16px;
    border: 2px solid #ffd43b;
    border-radius: 999px;
    background: #fff8db;
    color: var(--fa-ink);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hero-title-center {
    margin: 0;
    color: var(--fa-ink);
    font-size: clamp(2.8rem, 4vw, 4.9rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.05em;
}

.hero-title-center::after {
    display: block;
    width: 132px;
    height: 6px;
    margin: 14px auto 0;
    border-radius: 999px;
    background: #ffd43b;
    content: "";
}

.hero-subtitle-center {
    max-width: 520px;
    margin: 18px 0 0;
    color: #5c6d84;
    font-size: 1.14rem;
    line-height: 1.55;
}

.search-box-large-hero {
    width: min(100%, 460px);
    margin: 30px auto 0;
    border: 2px solid #1c3153;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 4px 0 #1c3153;
}

.search-box-large-hero i {
    color: #1c3153;
}

.search-box-large-hero input {
    min-height: 62px;
    color: var(--fa-ink);
    font-size: 1.02rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 34px;
}

.hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 180px;
    min-height: 64px;
    padding: 14px 24px;
    border: 2px solid #1c3153;
    border-radius: 14px;
    color: var(--fa-ink);
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 4px 0 #1c3153;
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.hero-button:hover,
.hero-button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #1c3153;
    text-decoration: none;
}

.hero-button-primary {
    background: #ffd43b;
}

.hero-button-secondary {
    background: #ffffff;
}

.hero-button i {
    font-size: 1.1rem;
}

@media (min-width: 1440px) {
    .hero-showcase-shell {
        grid-template-columns: minmax(0, 1.3fr) minmax(460px, 560px) minmax(0, 1.3fr);
    }

    .hero-icon-row {
        gap: 16px 20px;
    }

    .hero-icon {
        font-size: 1.78rem;
    }
}

@media (max-width: 1280px) {
    .hero-showcase-shell {
        grid-template-columns: minmax(0, 1fr) minmax(420px, 500px) minmax(0, 1fr);
    }

    .hero-icon-row {
        gap: 12px 16px;
    }
}

@media (max-width: 1024px) {
    .hero-showcase-shell {
        grid-template-columns: minmax(0, 0.9fr) minmax(390px, 470px) minmax(0, 0.9fr);
        gap: 22px;
    }

    .hero-icon {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .hero-showcase {
        padding-top: 24px;
        padding-bottom: 12px;
    }

    .hero-showcase-shell {
        grid-template-columns: 1fr;
        padding-inline: 16px;
    }

    .hero-side {
        display: none;
    }

    .hero-content-center {
        padding-top: 28px;
        padding-bottom: 34px;
    }

    .hero-badge {
        margin-bottom: 18px;
    }

    .hero-subtitle-center {
        font-size: 1.03rem;
    }

    .search-box-large-hero {
        width: min(100%, 420px);
    }
}

@media (max-width: 480px) {
    .hero-showcase {
        padding-top: 18px;
    }

    .hero-badge {
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }

    .hero-title-center {
        font-size: clamp(2.35rem, 12vw, 3.4rem);
    }

    .hero-subtitle-center {
        font-size: 0.98rem;
    }

    .search-box-large-hero input {
        min-height: 56px;
        font-size: 0.98rem;
    }

    .hero-actions {
        width: 100%;
        gap: 12px;
    }

    .hero-button {
        width: 100%;
        min-width: 0;
        min-height: 56px;
    }
}

@media (max-width: 1024px) {
    #packs-part .row.roomy:nth-of-type(2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-fill-row { min-height: 590px; }
}

/* 接近窄屏：图标列自然裁切更多，gap缩小 */
@media (max-width: 880px) {
    .hero-fill-row {
        gap: 0;
    }
    .hero-icon-cell {
        font-size: 1.1rem !important;
    }
    .hero-icon-grid > div {
        gap: 1rem !important;
    }
}

@media (max-width: 768px) {
    .hero-fill-row { padding-top: 42px; padding-bottom: 58px; }
    .hero-icon-grid { display: none !important; }
    .hero-fill-row > .text-center { width: 100% !important; max-width: 100% !important; }
    #hero-part h1 { font-size: 2.5rem; text-align: center; white-space: normal; }
    .hero-visual-sticker { right: 16px; top: 16px; transform: scale(0.84) rotate(8deg); transform-origin: top right; }
    #packs-part .row.roomy:nth-of-type(2),
    .plans-summary-cards-grid { grid-template-columns: 1fr; }
    #icons-part .row.roomy:nth-of-type(2) {
        display: block !important;
        width: 100% !important;
    }
    #icons-part .row.roomy:nth-of-type(2) > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    #icons-part .row.roomy:nth-of-type(2) > [class*="tablet:column-9"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    .plan-card-summary { min-height: 0; }
    .free-plan-note { align-items: flex-start; flex-wrap: wrap; }
    .free-plan-note .text-link { margin-left: 0; }
    .support-illustration { height: 140px; }
}

@media (max-width: 480px) {
    #hero-part h1 { font-size: 2rem; white-space: normal; }
    #hero-part .row.roomy > .column { padding-right: 10px; }
    .hero-icon-cell { width: 45px; height: 45px; }
    .hero-visual-sticker { width: 122px; min-height: 122px; }
    .support-card { min-height: 300px; }
}