:root {  color-scheme: light;  --color-bg: #FFFFFF; --color-bg-alt: #FBFBFD; --color-bg-dark: #1D1D1F;  --color-text-primary: #1D1D1F; --color-text-secondary: #6E6E73; --color-text-tertiary: #86868B;  --color-text-on-dark: #F5F5F7; --color-divider: #D2D2D7;  --color-brand: #05D38E; --color-brand-hover: #0CE59C; --color-brand-pressed: #04B87C;  --color-link: #0066CC; --color-link-hover: #0040A0;  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, Poppins, "Helvetica Neue", Arial, sans-serif;  --font-cn: "PingFang SC", "苹方", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;  --gradient-p1: linear-gradient(30deg, #15EF82 0%, #3CE6E9 100%);  --font-eyebrow: 14px; --font-display-l: clamp(40px, 6vw, 80px); --font-body-l: clamp(18px, 1.6vw, 24px);  --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px;  --radius-full: 9999px; --radius-md: 12px; --radius-lg: 18px;  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 150ms;  --container-max: 1240px; --container-pad-desk: 32px; --container-pad-mobile: 20px;  --content-gap: 48px; --sidebar-width: 300px;}@media (max-width: 734px) { :root { --font-display-l: 32px; } }*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }html { scroll-behavior: smooth; }body { font-family: var(--font-cn), var(--font-sans); font-size: 16px; color: var(--color-text-primary); background: var(--color-bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; padding-top: 94px; }.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad-desk); }.site-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 201; height: 34px; background: var(--color-bg-dark); display: flex; align-items: center; }.topbar-inner { padding-inline: 40px; width: 100%; display: flex; align-items: center; justify-content: space-between; }.topbar-products { display: flex; gap: var(--space-6); align-items: center; list-style: none; }.topbar-products a { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 400; color: rgba(245,245,247,0.45); text-decoration: none; font-family: var(--font-sans); transition: color var(--dur-fast); }.topbar-products a:hover { color: rgba(245,245,247,0.85); }.topbar-products li.active a { color: rgba(245,245,247,0.45); font-weight: 600; }.topbar-products .dot { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; background-size: contain; background-position: center; background-repeat: no-repeat; }.topbar-products .dot-fakao { background-image: url(../../images/icon-fakao.png); }.topbar-products .dot-fashuo { background-image: url(../../images/icon-fashuo.png); }.topbar-products .dot-cpa { background-image: url(../../images/icon-cpa.png); }.app-download-btn { position: relative; }.topbar-products .dot-app { position: relative; overflow: hidden; background: transparent; }.topbar-products .dot-app img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.8s ease, transform 0.8s ease; }.topbar-products .dot-app img.dot-app-android { opacity: 1; animation: jx-topbar-slide-1 7s infinite; }.topbar-products .dot-app img.dot-app-ios { opacity: 0; animation: jx-topbar-slide-2 7s infinite; }@keyframes jx-topbar-slide-1 { 0%, 40% { opacity: 1; transform: translateY(0); } 45%, 95% { opacity: 0; transform: translateY(100%); } 100% { opacity: 1; transform: translateY(0); } }@keyframes jx-topbar-slide-2 { 0%, 40% { opacity: 0; transform: translateY(-100%); } 45%, 95% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(100%); } }.app-qrcode { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 120px; height: 120px; margin-top: 8px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); z-index: 1000; }.app-download-btn:hover .app-qrcode { display: block; }@media (max-width: 734px) { .topbar-products a span:not(.dot) { display: none; } .topbar-products { gap: var(--space-3); } }.site-nav { position: fixed; top: 34px; left: 0; right: 0; z-index: 200; height: 68px; background: rgba(255,255,255,0.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0,0,0,0.05); }.nav-inner { padding-inline: 40px; height: 100%; display: flex; align-items: center; gap: var(--space-5); }.nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;}.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin-left: 40px; }.nav-links a { font-size: 16px; font-weight: 600; color: var(--color-text-primary); text-decoration: none; transition: font-weight var(--dur-fast); }.nav-links a:hover { font-weight: 600; }.nav-links a.nav-active { font-weight: 600; color: var(--color-brand-pressed); }.nav-actions { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; margin-left: auto; }.nav-actions .btn-primary.on-brand { position: relative; overflow: hidden; background: #FF9500; box-shadow: 0 4px 12px rgba(255,149,0,0.30), 0 0 18px rgba(255,149,0,0.18); }.nav-actions .btn-primary.on-brand:hover { background: #E68600; box-shadow: 0 8px 22px rgba(255,149,0,0.42), 0 0 28px rgba(255,149,0,0.32); transform: translateY(-1px); }.nav-actions .btn-primary.on-brand > * { position: relative; z-index: 2; }.nav-actions .btn-primary.on-brand::before { content: ""; position: absolute; top: 0; left: -75%; width: 55%; height: 100%; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%); transform: skewX(-22deg); animation: nav-study-shine 3.6s ease-in-out 1.2s infinite; z-index: 1; pointer-events: none; }@keyframes nav-study-shine { 0% { left: -75%; opacity: 0; } 10% { opacity: 1; } 50% { left: 130%; opacity: 1; } 60%, 100% { left: 130%; opacity: 0; } }@media (prefers-reduced-motion: reduce) { .nav-actions .btn-primary.on-brand::before { animation: none; display: none; } }.nav-actions .btn-consult { background: var(--color-brand); color: #fff; border-color: transparent; }.nav-actions .btn-consult:hover { background: var(--color-brand-pressed); color: #fff; border-color: transparent; }.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 24px; border-radius: var(--radius-full); font-family: var(--font-sans); font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; border: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), font-weight var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); white-space: nowrap; }.btn:active { transform: scale(0.97); }.btn-primary { background: var(--color-text-primary); color: #FFFFFF; }.btn-primary:hover { background: #2C2C2E; font-weight: 600; color: #FFFFFF; }.btn-primary.on-brand { background: var(--color-brand-pressed); color: #FFFFFF; }.btn-primary.on-brand:hover { background: var(--color-brand); font-weight: 600; color: #FFFFFF; }.nav-mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--color-text-primary); }@media (max-width: 1068px) { .nav-links { display: none; } .nav-mobile-toggle { display: flex; align-items: center; } }.subpage-hero { padding-top: 40px; padding-bottom: 40px; background: radial-gradient(ellipse 70% 60% at 20% 10%, rgba(5, 211, 142, 0.15), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 20%, rgba(93, 234, 199, 0.13), transparent 60%), radial-gradient(ellipse 80% 60% at 50% 80%, rgba(60, 230, 233, 0.18), transparent 65%), linear-gradient(180deg, #FAFAFC 0%, #FFFFFF 100%); }.subpage-hero .crumb-row { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad-desk); }.breadcrumb { font-size: 13px; color: var(--color-text-tertiary); position: relative; z-index: 2; }.breadcrumb a { color: var(--color-text-secondary); text-decoration: none; transition: color var(--dur-fast); }.breadcrumb a:hover { color: var(--color-brand); }.page-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad-desk) 80px; display: flex; gap: var(--content-gap); align-items: flex-start; }.main-content { flex: 1; min-width: 0; }.sidebar { width: var(--sidebar-width); flex-shrink: 0; position: sticky; top: 118px; }.section-card { background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-5); }.article-title { font-size: clamp(24px, 3vw, 34px); font-weight: 700; line-height: 1.35; margin-bottom: var(--space-4); letter-spacing: -0.01em; font-family: var(--font-sans); }.tags-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }.tag-item { padding: 4px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 500; background: rgba(5,211,142,0.10); color: var(--color-brand-pressed); }.author-row { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }.author-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; font-family: var(--font-sans); flex-shrink: 0; }.author-name { font-size: 14px; font-weight: 500; color: var(--color-text-secondary); }.article-body p { font-size: 16px; line-height: 1.9; margin-bottom: var(--space-4); color: var(--color-text-primary); }.article-body p:last-child { margin-bottom: 0; }.body-img { width: 100%; height: auto; border-radius: var(--radius-md); display: block; margin-bottom: var(--space-4); }.sidebar-card { background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-5); }.sidebar-title { font-size: 15px; font-weight: 700; margin-bottom: var(--space-4); font-family: var(--font-sans); }.rec-item { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); text-decoration: none; color: inherit; }.rec-item:last-child { border-bottom: none; padding-bottom: 0; }.rec-item:hover .rec-title { color: var(--color-brand-pressed); }.rec-cover { width: 72px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--color-bg-alt); }.rec-title { font-size: 13.5px; font-weight: 500; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--dur-fast); }.rec-empty { font-size: 13px; color: var(--color-text-tertiary); }@media (max-width: 900px) { .page-container { flex-direction: column; } .sidebar { width: 100%; position: static; } }.site-footer { background: #0e0e10; padding-block: 64px 0; }.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; }.footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }.footer-brand-name { font-size: 17px; font-weight: 700; color: #fff; font-family: var(--font-sans); }.footer-brand-tagline { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.6; margin-bottom: 20px; }.footer-apps { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }.footer-app-btn { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; text-decoration: none; background: rgba(255,255,255,0.05); transition: background 0.2s, border-color 0.2s; min-width: 128px; }.footer-app-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); }.footer-app-btn svg { width: 20px; height: 20px; fill: #fff; flex-shrink: 0; }.footer-app-btn-text { display: flex; flex-direction: column; }.footer-app-label { font-size: 10px; color: rgba(255,255,255,0.5); line-height: 1.2; }.footer-app-platform { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.3; }.footer-socials { display: flex; gap: 16px; }.footer-socials a { font-size: 13px; color: rgba(255,255,255,0.4); text-decoration: none; transition: color 0.2s; }.footer-socials a:hover { color: rgba(255,255,255,0.8); }.footer-wechat-btn { position: relative; }.footer-wechat-qrcode { display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: 120px; height: auto; margin-bottom: 8px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); z-index: 1000; }.footer-wechat-btn:hover .footer-wechat-qrcode { display: block; }.footer-col-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 16px; font-family: var(--font-sans); }.footer-links { display: flex; flex-direction: column; gap: 12px; list-style: none; }.footer-links a { font-size: 13.5px; color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.2s; }.footer-links a:hover { color: rgba(255,255,255,0.85); }.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 24px 0 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }.footer-legal-company { font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 6px; font-weight: 500; }.footer-legal-records { font-size: 11.5px; color: rgba(255,255,255,0.28); line-height: 1.8; max-width: 680px; }.footer-legal-records a { color: rgba(255,255,255,0.28); text-decoration: none; }.footer-legal-records a:hover { color: rgba(255,255,255,0.55); }.footer-legal-records .dot { margin: 0 4px; }.footer-legal-links { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-top: 2px; }.footer-legal-links a { font-size: 13px; color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.2s; }.footer-legal-links a:hover { color: rgba(255,255,255,0.8); }.footer-legal-links .dot { color: rgba(255,255,255,0.2); }.footer-tagline { font-size: 12px; color: rgba(255,255,255,0.45); font-style: italic; letter-spacing: 0.02em; padding: 14px 0 22px; }@media (max-width: 1068px) { .footer-grid { grid-template-columns: 1fr 1fr; } }@media (max-width: 734px) { .footer-grid { grid-template-columns: 1fr; gap: 48px; } }
@keyframes qr-pop{from{opacity:0;transform:scale(0.88);}to{opacity:1;transform:scale(1);}}