/* ================================================
   ImportLytics — common.css
   基础部分（:root变量、字体、.card/.table/.key-takeaways/.prose这些）
   原样取自阿富汗demo页面里已经视觉确认过的样式，一个值都没改。

   新增部分（文件下半段，demo里没有对应先例，这次跟着layout.js/i18n.js
   一起新设计）：移动端汉堡菜单+侧边抽屉、语言切换下拉、完整footer
   多栏布局、"敬请期待"弹窗——这几个是demo当初只做单页示意图时
   没有涉及到的整站公共骨架，颜色/字体延续同一套设计变量，
   不是另起一套风格。
   ================================================ */

:root{
  --grad-start:#4C7EF3;--grad-end:#9B6FE8;
  --ink:#151726;--ink-soft:#565B72;--ink-mute:#8A8FA3;
  --surface:#ffffff;--surface-alt:#F6F7FC;--surface-card:#FBFBFE;
  --border:#E6E8F2;--border-soft:#EEF0F8;
  --up:#1D9E75;--down:#D85A4A;--radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* 视觉上隐藏但屏幕阅读器/爬虫仍能读到——给SVG图表配的HTML数据表兜底用，
   标准写法（不能用display:none，那样屏幕阅读器也读不到了） */
.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}
body{font-family:'Inter',sans-serif;color:var(--ink);background:var(--surface-alt);line-height:1.6;font-size:15px}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--ink)}
.mono{font-family:'IBM Plex Mono',monospace}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.gradient-text{background:linear-gradient(100deg,var(--grad-start),var(--grad-end));-webkit-background-clip:text;background-clip:text;color:transparent}
.topnav{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.topnav .wrap{display:flex;align-items:center;justify-content:flex-start;gap:48px;height:64px}
.logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;display:flex;align-items:center;gap:8px}
.logo-mark{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--grad-start),var(--grad-end))}
.navlinks{display:flex;gap:32px;font-size:14px;font-weight:500;color:var(--ink-soft);list-style:none}
.navlinks a,.navlinks button{background:none;border:none;font:inherit;color:inherit;cursor:pointer;padding:0}
.navlinks a:hover,.navlinks button:hover{color:var(--ink)}
.navlinks .active{color:var(--ink)}
/* 语言切换器现在挂在导航条右侧（原来在footer里，配色是给深色footer背景
   设计的白字+半透明白底，挪过来之后改成浅色底+深灰字，避免在白色导航栏
   背景上出现"白底白字"看不见按钮的问题）。margin-left:auto让它在
   flex导航行里被推到最右边，紧挨着（移动端会显示的）汉堡菜单按钮之前 */
.lang-switcher{position:relative;margin-inline-start:auto}
.nav-dropdown-wrap{position:relative}
.nav-dropdown-trigger{display:flex;align-items:center;gap:4px}
.nav-dropdown-menu{display:none;position:absolute;top:100%;inset-inline-start:0;padding-top:12px;min-width:170px}
.nav-dropdown-wrap:hover .nav-dropdown-menu{display:block}
.nav-dropdown-menu > a,.nav-dropdown-menu > button{display:block;width:100%;text-align:start;background:var(--surface);border:1px solid var(--border);font-size:13.5px;color:var(--ink-soft);padding:10px 14px;cursor:pointer}
.nav-dropdown-menu > a{border-radius:10px 10px 0 0;border-bottom:none}
.nav-dropdown-menu > button{border-radius:0 0 10px 10px;box-shadow:0 8px 24px rgba(21,23,38,.12)}
.nav-dropdown-menu > a:hover,.nav-dropdown-menu > button:hover{background:var(--surface-alt);color:var(--ink)}
.crumb{font-size:13px;color:var(--ink-mute);padding:20px 0 0}
.banner{position:relative;border-radius:var(--radius);overflow:hidden;margin:16px 0 20px;height:220px}
.banner img{width:100%;height:100%;object-fit:cover;display:block}
.banner-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,23,38,0) 40%,rgba(21,23,38,.75) 100%)}
.banner-caption{position:absolute;inset-inline-start:24px;bottom:18px;color:#fff;font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px}
.banner-caption .dot{width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--grad-start),var(--grad-end))}
.hero{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px 32px;margin:0 0 20px}
.hero h1{font-size:24px;line-height:1.3;margin-bottom:10px}
.hero-body-row{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}
.flag-col{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}
.hero-title-block{flex:1;min-width:240px}
.flag-placeholder{width:64px;height:43px;border-radius:6px;flex-shrink:0;background:var(--surface-alt);border:1px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--ink-mute);text-align:center;line-height:1.3;overflow:hidden}
.flag-placeholder img{width:100%;height:100%;object-fit:cover}
.continent-badge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--grad-end);background:#F1EDFC;padding:3px 10px;border-radius:20px}
.hero-meta{font-size:13px;color:var(--ink-mute)}
.hero-meta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cta-btn-sm{background:linear-gradient(100deg,var(--grad-start),var(--grad-end));color:#fff;font-weight:600;font-size:12.5px;padding:7px 16px;border-radius:8px;white-space:nowrap;display:inline-block}
.layout{display:grid;grid-template-columns:1fr 300px;gap:24px;padding-bottom:60px;align-items:start}
.layout aside{position:sticky;top:20px;display:flex;flex-direction:column;gap:20px}
.layout aside .side-card{margin-bottom:0}
@media(max-width:860px){
  .layout{grid-template-columns:1fr}
  .layout aside{position:static}
  /* 移动端隐藏目录（TOC）——用户确认移动端展示意义不大，去掉，
     但"Latest Articles"和"Related Topics"这两个side-card保留 */
  .toc-card{display:none}
}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:20px}
.card h2{font-size:17px;margin-bottom:14px}
.card h2 .num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--grad-end);margin-inline-end:8px}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.stat-card{background:var(--surface-card);border:1px solid var(--border-soft);border-radius:10px;padding:16px}
.stat-label{font-size:12px;color:var(--ink-mute);margin-bottom:6px}
.stat-value{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:600}
.key-takeaways ul{list-style:none}
.key-takeaways li{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;font-size:14px;color:var(--ink-soft)}
.key-takeaways li::before{content:"";flex-shrink:0;width:8px;height:8px;margin-top:7px;border-radius:2px;background:linear-gradient(135deg,var(--grad-start),var(--grad-end))}
.key-takeaways b{color:var(--ink);font-weight:600}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:start;font-weight:500;color:var(--ink-mute);font-size:12px;padding:8px 6px;border-bottom:1px solid var(--border)}
th.num,td.num{text-align:end}
td{padding:9px 6px;border-bottom:1px solid var(--border-soft)}
tr:last-child td{border-bottom:none}
.rank{font-family:'IBM Plex Mono',monospace;color:var(--ink-mute);font-size:12px}
.plain-name{font-weight:500;color:var(--ink)}
.bar-track{height:5px;background:var(--border-soft);border-radius:3px;margin-top:5px;overflow:hidden;max-width:120px;margin-inline-start:auto}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--grad-start),var(--grad-end))}
.prose p{font-size:14.5px;color:var(--ink-soft);margin-bottom:14px}
.prose .stat-inline{color:var(--ink);font-weight:600}
.single-year-note{font-size:12px;color:var(--ink-mute);background:var(--surface-alt);border-radius:8px;padding:12px 14px;border-inline-start:3px solid var(--grad-end);margin-bottom:6px}
.cta-card{background:linear-gradient(120deg,#EEF2FE,#F5EFFD);border:1px solid var(--border);border-radius:var(--radius);padding:22px 26px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cta-card p.t{font-weight:600;font-size:15px;margin-bottom:4px}
.cta-card p.s{font-size:13px;color:var(--ink-mute)}
.cta-btn{background:linear-gradient(100deg,var(--grad-start),var(--grad-end));color:#fff;font-weight:600;font-size:13.5px;padding:11px 22px;border-radius:9px;white-space:nowrap}
.faq-item{border-bottom:1px solid var(--border-soft);padding:14px 0}
.faq-item:last-child{border-bottom:none}
.faq-q{margin:0;font-size:14.5px;font-weight:500}
.faq-toggle{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;margin:0;padding:0;background:none;border:0;font:inherit;color:inherit;text-align:start;cursor:pointer}
.faq-toggle:focus-visible{outline:2px solid var(--grad-end);outline-offset:3px;border-radius:4px}
.faq-a{font-size:13.5px;color:var(--ink-soft);margin-top:8px}
/* 没有JS时答案默认展开；JS加载后（faq.js给html加.faq-js）才收起，+/–号也只在这时显示 */
.faq-js .faq-a{display:none}
.faq-js .faq-item.open .faq-a{display:block}
.faq-js .faq-toggle::after{content:"+";color:var(--grad-end);font-weight:600;flex-shrink:0}
.faq-js .faq-item.open .faq-toggle::after{content:"\2013"}
.side-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:16px}
.side-card h3{font-size:13px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px}
.toc-list{list-style:none;font-size:13px}
.toc-list li{margin-bottom:9px}
.toc-list a{color:var(--ink-soft);border-inline-start:2px solid transparent;padding-inline-start:10px;display:block;transition:color .15s,border-color .15s}
.toc-list a:hover{color:var(--grad-end)}
.toc-list a.active{color:var(--ink);border-inline-start-color:var(--grad-end);font-weight:600}
.citation-link{color:var(--grad-end);font-weight:500}
.bubble-label{font-size:11px;fill:var(--ink-soft)}
.bubble-value{font-size:10px;fill:var(--ink-mute)}

/* ================================================
   以下是新增部分——demo当初只做单页示意图，没有涉及整站公共骨架，
   这次跟着layout.js/i18n.js一起补上，颜色/字体延续上面同一套变量
   ================================================ */

/* 移动端汉堡菜单，桌面端隐藏 */
.nav-hamburger{display:none;flex-direction:column;justify-content:center;gap:4px;width:32px;height:32px;background:none;border:none;cursor:pointer;margin-inline-start:auto}
.nav-hamburger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:1px}
@media(max-width:720px){
  .navlinks{display:none}
  .nav-hamburger{display:flex}
}

/* 移动端侧边抽屉 */
.drawer-overlay{position:fixed;inset:0;background:rgba(21,23,38,.5);opacity:0;pointer-events:none;transition:opacity .2s;z-index:20}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.nav-mobile-drawer{position:fixed;top:0;right:0;bottom:0;width:280px;max-width:85vw;background:var(--surface);z-index:21;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;box-shadow:-8px 0 24px rgba(21,23,38,.12)}
.nav-mobile-drawer.open{transform:translateX(0)}
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--border)}
.drawer-close{background:none;border:none;cursor:pointer;color:var(--ink-soft);width:32px;height:32px}
.drawer-close svg{width:20px;height:20px}
.drawer-list{display:flex;flex-direction:column;padding:12px}
.drawer-item{display:flex;align-items:center;gap:14px;padding:14px 12px;border-radius:10px;font-size:14.5px;font-weight:500;color:var(--ink);background:none;border:none;text-align:start;cursor:pointer;width:100%}
.drawer-item:hover{background:var(--surface-alt)}
.drawer-icon{width:20px;height:20px;flex-shrink:0;color:var(--grad-end)}
.drawer-icon svg{width:100%;height:100%}
body.drawer-open{overflow:hidden}

/* footer 完整多栏版本 */
.site-footer{background:var(--ink);color:#B7BAD0;padding:40px 0 24px;margin-top:40px}
.footer-cols{display:grid;grid-template-columns:repeat(2,minmax(160px,220px));gap:32px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-col h4{color:#fff;font-family:'Space Grotesk',sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:10px;font-size:13.5px}
.footer-col a{color:#B7BAD0}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:20px;font-size:12.5px}

/* 语言切换下拉框——按钮现在在导航条右上角（原来在footer），配色改成
   浅色主题：淡灰底+深灰字，取代原来给深色footer背景设计的白底白字方案。
   下拉菜单方向也从"往上弹"（bottom:calc(100%+8px)，配合按钮在页面
   底部）改成"往下弹"（top:calc(100%+8px)，配合按钮现在在页面顶部） */
.lang-pill{display:flex;align-items:center;gap:6px;background:var(--surface-alt);border:1px solid var(--border);color:var(--ink-soft);font-size:12.5px;padding:7px 12px;border-radius:20px;cursor:pointer}
.lang-pill:hover{background:var(--border-soft);color:var(--ink)}
.lang-pill svg{width:14px;height:14px}
.lang-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(21,23,38,.16);min-width:160px;max-height:280px;overflow-y:auto;display:none;padding:6px;z-index:15}
.lang-dropdown.open{display:block}
.lang-dropdown button,.lang-dropdown a{display:block;width:100%;text-align:start;background:none;border:none;font-size:13.5px;color:var(--ink-soft);padding:8px 10px;border-radius:6px;cursor:pointer}
.lang-dropdown button:hover,.lang-dropdown a:hover,.lang-dropdown .active{background:var(--surface-alt);color:var(--ink)}

/* "敬请期待"弹窗 */
.modal-overlay{position:fixed;inset:0;background:rgba(21,23,38,.55);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;z-index:30}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal-box{background:var(--surface);border-radius:var(--radius);padding:32px;max-width:340px;width:90%;text-align:center}
.modal-icon{width:44px;height:44px;margin:0 auto 16px;color:var(--grad-end)}
.modal-icon svg{width:100%;height:100%}
.modal-box h3{font-size:17px;margin-bottom:8px}
.modal-box p{font-size:13.5px;color:var(--ink-soft);margin-bottom:20px}
.modal-box button{background:linear-gradient(100deg,var(--grad-start),var(--grad-end));color:#fff;font-weight:600;font-size:13.5px;padding:10px 24px;border-radius:9px;border:none;cursor:pointer}

/* 预览模式横幅（Admin预览专用，公开页面不会出现） */
.preview-banner{background:var(--ink);color:#fff;text-align:center;padding:10px;font-size:13px;font-family:'Inter',sans-serif}

/* 阿拉伯语等RTL语言：整体镜像，但金额/图表数字不镜像
   （数字阅读方向跟文字方向无关，见html_dir跟数字容器的例外处理） */
/* .key-takeaways的圆点用flex布局实现（见上方.key-takeaways li定义），
   RTL方向下flex主轴会自动跟着html[dir="rtl"]镜像，不需要像旧版
   绝对定位那样手动写left/right覆盖规则 */
html[dir="rtl"] .nav-mobile-drawer{right:auto;left:0;transform:translateX(-100%);box-shadow:8px 0 24px rgba(21,23,38,.12)}
html[dir="rtl"] .nav-mobile-drawer.open{transform:translateX(0)}
html[dir="rtl"] .lang-dropdown{right:auto;left:0}

/* ══════════════════════════════════════════════════════════
   国家列表页（/:lang/countries/）专属样式
   ══════════════════════════════════════════════════════════ */
.list-hero{padding:40px 0 8px}
.list-hero .eyebrow{color:var(--ink-mute);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.list-hero h1{font-size:34px;margin:10px 0 10px;line-height:1.25}
.list-hero p.lead{color:var(--ink-soft);font-size:16px;max-width:620px}
.list-hero .stat-line{margin-top:16px;font-size:14px;color:var(--ink-mute)}
.list-hero .stat-line b{color:var(--ink);font-family:'IBM Plex Mono',monospace}

.search-row{margin:24px 0 20px}
.search-box{position:relative;max-width:420px}
.search-box input{width:100%;height:44px;border-radius:22px;border:1px solid var(--border);padding:0 44px 0 18px;font-size:14px;font-family:inherit;background:var(--surface);color:var(--ink)}
.search-box input:focus{outline:none;border-color:var(--grad-start)}
.search-box svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-mute);pointer-events:none}
html[dir="rtl"] .search-box input{padding:0 18px 0 44px}
html[dir="rtl"] .search-box svg{right:auto;left:16px}

.continent-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.continent-tabs button{border:1px solid var(--border);background:var(--surface);color:var(--ink-soft);font-size:13.5px;font-weight:500;padding:8px 18px;border-radius:20px;cursor:pointer;font-family:inherit}
.continent-tabs button:hover{border-color:var(--ink-mute)}
.continent-tabs button.active{background:var(--ink);color:#fff;border-color:var(--ink)}

.country-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;padding-bottom:60px}
.country-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.country-card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.country-card-head img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid var(--border-soft)}
.country-card-head .cname{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15.5px;margin:0}

.trade-row{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--ink-mute);padding:6px 0;border-bottom:1px dashed var(--border-soft)}
.trade-row:last-of-type{border-bottom:none}
.trade-row .val{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink);font-weight:500}
.trade-row .yoy{font-size:11.5px;margin-left:6px;font-weight:600}
html[dir="rtl"] .trade-row .yoy{margin-left:0;margin-right:6px}
.yoy.up{color:var(--up)}
.yoy.down{color:var(--down)}

.card-btns{display:flex;gap:8px;margin-top:14px}
.card-btns a{flex:1;text-align:center;font-size:12.5px;font-weight:600;padding:9px 0;border-radius:8px;border:1px solid var(--border)}
.card-btns a.export{background:var(--surface-alt);color:var(--ink)}
.card-btns a.import{background:var(--ink);color:#fff;border-color:var(--ink)}

.sparse-note{font-size:12px;color:var(--ink-mute);padding:8px 0;font-style:italic}

.empty-state{text-align:center;padding:60px 20px;color:var(--ink-mute)}
.empty-state h2{font-size:18px;color:var(--ink-soft);margin-bottom:8px}

/* 列表页底部说明性内容区块（2026年8月新增）——复用.card容器保持跟
   全站其他内容区块一致的视觉语言，不是突兀地漂浮在页面底部 */
.data-intro p{color:var(--ink-soft);font-size:14px;line-height:1.7;margin:0 0 14px}
.data-intro p:last-child{margin-bottom:0}
.data-intro a{color:var(--grad-end);text-decoration:underline}
.data-intro strong{color:var(--ink);font-weight:600}

/* ================================================
   首页（2026年8月新增）——五屏结构。配色沿用现有:root变量
   （--grad-start/--grad-end蓝紫渐变、--ink深色），不是另起一套
   首页专属色板，保持跟国家页/Blog视觉语言统一
   ================================================ */

/* 第一屏：Data Search，深色背景+渐变光晕，是全站唯一用深色hero的地方，
   用来跟下面几屏的浅色背景形成视觉分层 */
.home-hero{background:var(--ink);padding:72px 0 88px;position:relative;overflow:hidden}
.home-hero::before{content:"";position:absolute;top:-120px;right:-80px;width:420px;height:420px;
  background:radial-gradient(circle,var(--grad-end) 0%,transparent 70%);opacity:.35;pointer-events:none}
.home-hero::after{content:"";position:absolute;bottom:-160px;left:-100px;width:380px;height:380px;
  background:radial-gradient(circle,var(--grad-start) 0%,transparent 70%);opacity:.3;pointer-events:none}
.home-hero-inner{position:relative;text-align:center;max-width:760px;margin:0 auto}
.home-hero h1{font-family:'Space Grotesk',sans-serif;font-size:38px;line-height:1.25;color:#fff;margin:0 0 16px}
.home-hero-sub{color:#B7BAD0;font-size:16px;line-height:1.6;margin:0 auto 36px;max-width:600px}

.home-search-card{background:var(--surface);border-radius:16px;padding:0;max-width:640px;margin:0 auto;
  box-shadow:0 20px 60px rgba(0,0,0,.35);text-align:start;overflow:hidden}
/* Tab左对齐、贴着下面的搜索框——2026年8月调整：原来是flex:1等宽平分
   一整行，看起来跟下面的搜索框像两个独立的东西，用户看不出这三个
   选项是在选"搜索框要搜什么"。现在做成经典的"文件夹标签"贴合效果：
   未选中的tab背景比搜索框区域暗一点、悬空一点（position:relative;
   top:1px让它的底边压在下面搜索框的边框线上），选中的tab背景色
   跟下面搜索框区域完全一致、边框在交界处断开，视觉上连成一个整体 */
.home-search-tabs{display:flex;gap:2px;padding:10px 10px 0}
.home-search-tabs button{flex:none;background:var(--surface-alt);color:var(--ink-mute);
  border:1px solid var(--border);border-bottom:none;border-radius:9px 9px 0 0;
  padding:9px 20px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;
  position:relative;top:1px}
.home-search-tabs button.active{background:var(--surface);color:var(--ink);z-index:2}
.home-search-row{display:flex;gap:8px;padding:14px;border-top:1px solid var(--border);margin-top:0}
.home-search-row input{flex:1;border:1px solid var(--border);border-radius:9px;padding:12px 14px;
  font-size:14px;font-family:inherit;color:var(--ink)}
.home-search-row input:focus{outline:none;border-color:var(--grad-end)}
.home-search-row button{white-space:nowrap}
html[dir="rtl"] .home-search-tabs{justify-content:flex-end}
html[dir="rtl"] .home-search-row{direction:rtl}

/* 第二屏：国家数据——2026年8月调整：原来内容偏少、标题/说明/按钮
   挤在一行里，观感单薄，改成整体居中的独立板块，白底（body默认
   背景是--surface-alt浅灰，这里显式设成白色，跟下面第三屏的渐变
   底、以及往下滚动後page整体默认灰底形成"白-渐变-灰"三段分区节奏），
   上下留白也加大，让每一屏之间的边界更清楚 */
.home-countries{background:var(--surface);padding:96px 0 88px}
.home-countries-inner{max-width:640px;margin:0 auto;text-align:center}
.home-countries-inner h2{font-family:'Space Grotesk',sans-serif;font-size:26px;margin:0 0 18px}
.home-countries-inner .stat-line{font-size:17px;color:var(--ink-soft)}
.home-countries-inner .stat-line b{color:var(--ink)}
.home-section-note{font-size:14px;color:var(--ink-mute);margin:10px 0 28px}
.home-search-note{font-size:13px;color:var(--ink-mute);text-align:center;margin:14px auto 0;max-width:640px}
.soon-badge{display:inline-block;margin-inline-start:6px;padding:1px 7px;border-radius:999px;background:var(--surface-alt);color:var(--ink-mute);font-size:10.5px;font-weight:600;line-height:1.5;vertical-align:middle;white-space:nowrap}
.home-browse-btn{display:inline-block}

/* 国家轮播：固定高度的横向条带，超出裁切，track用CSS动画整体平移，
   数组在模板里已经复制了一份接在后面，动画平移到"第一份"结尾正好
   等于第二份开头，循环时视觉上看不出接缝，不需要用JS计算位置 */
.home-carousel-track-wrap{overflow:hidden;padding:40px 0 4px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.home-carousel-track{display:flex;gap:14px;width:max-content;animation:homeCarouselScroll 40s linear infinite}
.home-carousel-track-wrap:hover .home-carousel-track{animation-play-state:paused}
@keyframes homeCarouselScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.home-country-chip{display:flex;align-items:center;gap:10px;background:var(--surface-card);
  border:1px solid var(--border);border-radius:12px;padding:10px 16px;white-space:nowrap;flex-shrink:0}
.home-country-chip img{width:24px;height:18px;object-fit:cover;border-radius:2px;flex-shrink:0}
.home-country-chip .hcc-name{font-size:13.5px;font-weight:600;color:var(--ink)}
.home-country-chip .hcc-total{font-size:12.5px;color:var(--ink-mute)}
.home-country-chip .hcc-info{display:flex;flex-direction:column;gap:1px;line-height:1.25}
.home-country-chip .hcc-meta{font-size:11px;color:var(--ink-mute);font-weight:400}
html[dir="rtl"] .home-carousel-track{animation-name:homeCarouselScrollRTL}
@keyframes homeCarouselScrollRTL{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* 第三屏：HS编码介绍——2026年8月调整：改成浅蓝浅紫渐变底（直接取
   --grad-start/--grad-end两个变量做低透明度叠加，颜色跟品牌色一致，
   不是另配一套色），加大上下留白，明确跟第二屏（白底）、第四屏
   （默认灰底）区分开 */
.home-hs{background:linear-gradient(135deg,rgba(76,126,243,.10),rgba(155,111,232,.14));padding:100px 0}
.home-hs-inner{max-width:680px;margin:0 auto;text-align:center}
.home-hs-inner h2{font-family:'Space Grotesk',sans-serif;font-size:28px;margin:0 0 16px}
.home-hs-inner p{color:var(--ink-soft);font-size:15px;line-height:1.75;margin:0 0 30px}

/* 第四屏：最新文章——只展示content_type=blog的真实文章（见
   bloglist_handler.go的fetchArticleList），2026年8月调整：标题居中，
   "查看更多"按钮从标题旁边挪到卡片网格下方、居中放置，加大留白 */
.home-articles{padding:96px 0 100px}
.home-articles-inner{text-align:center}
.home-articles-inner h2{font-family:'Space Grotesk',sans-serif;font-size:26px;margin:0 0 36px}
.home-article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;
  text-align:left;margin-bottom:36px}
html[dir="rtl"] .home-article-grid{text-align:right}
.home-article-card{display:block;background:var(--surface-card);border:1px solid var(--border);
  border-radius:14px;overflow:hidden}
.home-article-card img{width:100%;height:140px;object-fit:cover;display:block}
.home-article-body{padding:16px}
.home-article-date{font-size:11.5px;color:var(--ink-mute)}
.home-article-body h3{font-size:15px;line-height:1.4;margin:6px 0 8px;color:var(--ink)}
.home-article-body p{font-size:13px;color:var(--ink-soft);line-height:1.6;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

@media(max-width:640px){
  .home-hero{padding:52px 0 64px}
  .home-hero h1{font-size:28px}
  .home-search-row{flex-direction:column}
  .home-search-row button{width:100%}
  .home-countries{padding:64px 0 56px}
  .home-hs{padding:64px 0}
  .home-articles{padding:64px 0 72px}
}

/* ================================================
   资讯页（About/Contact，2026年8月新增）——结构参考CareerRoost同名
   页面（Hero+若干分段），配色沿用ImportLytics既有变量，不是另配
   一套色板
   ================================================ */
.info-page{max-width:800px}
.info-hero{padding:72px 0 8px;text-align:center}
.info-hero h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(28px,4vw,38px);font-weight:700;color:var(--ink);margin-bottom:14px}
.info-subtitle{font-size:16px;color:var(--ink-mute);line-height:1.7}
.info-body{padding:40px 0 100px}
.info-section{margin-bottom:40px}
.info-section h2{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:700;color:var(--ink);
  margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid var(--border)}
.info-section p{font-size:15px;line-height:1.8;color:var(--ink-soft)}

/* ── RTL（阿拉伯语）补充：方向性装饰 ──
   → 这类箭头字符不会被浏览器自动镜像，模板里用 .arrow-fwd 包起来，RTL下水平翻转 */
.arrow-fwd{display:inline-block}
html[dir="rtl"] .arrow-fwd{transform:scaleX(-1)}
/* 首页顶部背景的两团装饰光斑左右互换，保持视觉重心跟着阅读方向走 */
html[dir="rtl"] .home-hero::before{right:auto;left:-80px}
html[dir="rtl"] .home-hero::after{left:auto;right:-100px}