/* ============================================================
   Global Ecommerce Landscape — Site Design System
   Style consistent with Navos capability-map site (dark gradient)
   ============================================================ */
:root{
  --bg-0:#0b1020;
  --bg-1:#0f172a;
  --bg-2:#1e3a8a;
  --bg-3:#3730a3;
  --panel:rgba(255,255,255,.05);
  --panel-border:rgba(255,255,255,.12);
  --text:#eef2ff;
  --text-dim:rgba(238,242,255,.72);
  --text-faint:rgba(238,242,255,.5);
  --accent:#60a5fa;
  --accent-2:#d97757; /* warm terracotta (Claude-brand-adjacent), replaces a blue->violet
                          gradient that reads as generic AI-tool default */
  --good:#34d399;
  --warn:#fbbf24;
  --bad:#f87171;
  --radius:16px;
  --shadow:0 18px 40px rgba(15,23,42,.35);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI","Microsoft YaHei","Noto Sans","Noto Sans JP","Noto Sans KR","Noto Sans Arabic","Noto Sans Devanagari","Noto Sans Thai",Helvetica,Arial,sans-serif;
  color:var(--text);background:var(--bg-1);-webkit-font-smoothing:antialiased;
  min-height:100vh
}
.bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1000px 520px at 12% -10%,rgba(37,99,235,.35),transparent 60%),
    radial-gradient(900px 540px at 96% 108%,rgba(217,119,87,.22),transparent 55%),
    radial-gradient(700px 400px at 50% 50%,rgba(14,165,233,.08),transparent 65%),
    linear-gradient(160deg,var(--bg-1) 0%,#172554 58%,#312e81 100%)
}
.wrap{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 24px}

/* ---------- Header / Nav ---------- */
header.top{position:sticky;top:0;z-index:50;background:rgba(11,16,32,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--panel-border)}
.nav{display:flex;align-items:center;gap:22px;padding:14px 0;flex-wrap:wrap}
.brand{font-weight:800;font-size:17px;letter-spacing:-.2px;color:#fff;text-decoration:none;display:flex;align-items:center;gap:9px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 12px rgba(96,165,250,.8)}
.nav-links{display:flex;gap:4px;flex-wrap:wrap}
.nav-links a{color:var(--text-dim);text-decoration:none;padding:7px 13px;border-radius:10px;font-size:13.5px;transition:.15s}
.nav-links a:hover,.nav-links a.active{color:#fff;background:rgba(255,255,255,.1)}
/* Breadcrumb: every page below the 6 top-nav sections renders one (see
   site_common.py breadcrumb_html()) — the nav only highlights the active
   top-level item, so a page 2-3 levels deep (e.g. 首页 › 区域 › 中国) has
   no other way to show exact position or a one-click way back up. */
.breadcrumb{padding:11px 0;border-bottom:1px solid var(--panel-border);font-size:12.5px}
.breadcrumb nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.breadcrumb a{color:var(--text-dim);text-decoration:none}
.breadcrumb a:hover{color:#fff}
.breadcrumb span[aria-current]{color:var(--text-faint)}
.crumb-sep{color:var(--text-faint);opacity:.55;font-size:11px}
.lang-switch{margin-left:auto;display:flex;align-items:center;gap:6px}
.lang-btn{background:rgba(255,255,255,.08);border:1px solid var(--panel-border);color:var(--text);border-radius:9px;padding:6px 10px;font-size:12.5px;cursor:pointer;transition:.15s}
.lang-btn:hover,.lang-btn.active{background:rgba(96,165,250,.25);border-color:var(--accent)}

/* ---------- Hero ---------- */
.hero{padding:72px 0 48px}
.kicker{font-size:11.5px;letter-spacing:2.4px;font-weight:700;opacity:.7;margin:0 0 16px;text-transform:uppercase}
h1{font-size:44px;letter-spacing:-.8px;line-height:1.12;margin:0 0 14px;font-weight:800}
h1 .grad{background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{max-width:760px;color:var(--text-dim);font-size:16.5px;margin:0 0 30px}
.kpis{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.kpi{background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;padding:16px 20px;min-width:150px}
.kpi b{display:block;font-size:26px;font-weight:800;letter-spacing:-.3px}
.kpi b small{font-size:15px;font-weight:600;color:var(--text-dim)}
.kpi span{font-size:12px;color:var(--text-faint)}
.kpi .up{color:var(--good)} .kpi .down{color:var(--bad)}

/* ---------- Sections / Cards ---------- */
.section{margin:44px 0}
h2{font-size:26px;letter-spacing:-.4px;margin:0 0 6px;font-weight:800}
h2 .num{color:var(--text-faint);font-weight:600;margin-right:10px;font-size:18px}
.section-lead{color:var(--text-dim);max-width:820px;margin:0 0 24px;font-size:14.5px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.card{
  background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);
  padding:24px 24px 20px;text-decoration:none;color:var(--text);display:block;
  transition:transform .18s ease, border-color .18s ease;position:relative;overflow:hidden
}
.card:hover{transform:translateY(-3px);border-color:rgba(96,165,250,.45)}
.card .tag{font-size:10.5px;letter-spacing:1.6px;font-weight:700;color:var(--accent);text-transform:uppercase;margin:0 0 8px}
.card h3{font-size:20px;margin:0 0 8px;letter-spacing:-.2px}
.card p{margin:0;color:var(--text-dim);font-size:13.5px;line-height:1.55}
.card .metric{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--panel-border);margin-top:14px;padding-top:12px;font-size:13px}
.card .metric b{font-size:16px}

/* Dual-report axis (homepage #01/#02): the site's two flagship reports,
   shown side by side with equal weight instead of stacked, each a wide
   "hero" card instead of a narrow box floating in empty space. */
.report-axis{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;margin:44px 0}
.report-axis .section{margin:0}

/* Explicit even-N column grids — .cards' auto-fill wraps unpredictably
   whenever the item count doesn't divide evenly into however many
   330px-min columns happen to fit (5 items -> 3+2, orphaning the last
   row with a wall of empty space next to it). Used wherever the item
   count is known and fixed (home's 4 secondary module cards, a
   platform's 4 secondary flagships). */
.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:960px){.cards-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards-4{grid-template-columns:1fr}}

/* Small muted label on a hub card indicating which group it belongs to
   (e.g. region cards' macro-area) — carries grouping information without
   forcing a one-group-per-row section layout, which breaks down hard
   when most groups have only 1-2 members (see /regions/: 7 of 8 macro
   groups have exactly 1 region — a full-width section per group meant
   7 nearly-empty rows). */
.group-chip{display:block;font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--text-faint);margin:0 0 8px;opacity:.85}
.card-hero{display:flex;align-items:center;gap:24px;padding:28px}
.card-hero .card-hero-main{flex:1;min-width:0}
.card-hero h3{font-size:22px}
.card-hero .metric{
  flex:0 0 auto;flex-direction:column;align-items:flex-start;gap:2px;
  border-top:none;border-left:1px solid var(--panel-border);margin-top:0;padding:0 0 0 24px
}
.card-hero .metric b{font-size:28px;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:900px){
  .report-axis{grid-template-columns:1fr}
}
@media(max-width:560px){
  .card-hero{flex-direction:column;align-items:stretch}
  .card-hero .metric{flex-direction:row;justify-content:space-between;border-left:none;border-top:1px solid var(--panel-border);padding:14px 0 0}
}

/* Region cards (homepage #regionCards): the region name is the scannable
   identity, so it stays in the standard .card h3 slot. The market-size
   stat and the long analysis sentence are supporting text, clamped so
   ten cards stay comparable in height instead of becoming a text wall. */
.region-card .tag{
  text-transform:none;letter-spacing:0;font-weight:600;color:var(--text-faint);
  font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.region-card .region-summary{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:8px
}
.region-card .region-platforms{color:var(--text-faint);font-size:12.5px}

/* ---------- Tables ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--panel-border);border-radius:var(--radius);background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:760px}
thead th{background:rgba(255,255,255,.06);text-align:left;padding:12px 14px;font-size:11.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--text-faint);white-space:nowrap}
tbody td{padding:12px 14px;border-top:1px solid rgba(255,255,255,.07);vertical-align:top}
tbody tr:hover{background:rgba(255,255,255,.04)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rank-badge{display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center;border-radius:8px;font-weight:800;font-size:13px;background:rgba(96,165,250,.18);color:var(--accent)}
.txt-faint{color:var(--text-faint);font-size:12px;margin-top:2px}
/* Top-markets chart (homepage): unlike the report tables, this is meant
   to be read at a glance, so on narrow viewports it drops the shared
   min-width:760px (which would hide the comparison bars off-screen)
   and lets the 4 columns compress instead. */
@media(max-width:560px){
  #topMarkets table{min-width:0}
  #topMarkets td,#topMarkets th{padding:9px 8px;font-size:12.5px}
  #topMarkets .compare .bar{min-width:44px}
}
.flag-chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;background:rgba(217,119,87,.16);color:#f0a988;margin:0 4px 4px 0}

/* ---------- Tracking / Snapshots ---------- */
.track-tabs{display:flex;gap:8px;margin:0 0 20px;flex-wrap:wrap}
.track-tab{background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;padding:9px 16px;font-size:13px;cursor:pointer;color:var(--text-dim);transition:.15s}
.track-tab:hover,.track-tab.active{color:#fff;background:rgba(96,165,250,.2);border-color:var(--accent)}
.snapshot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.snapshot{background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;padding:18px}
.snapshot .label{font-size:12px;color:var(--text-faint);margin-bottom:6px}
.snapshot .value{font-size:24px;font-weight:800;letter-spacing:-.3px}
.snapshot .delta{font-size:12.5px;margin-top:4px}
.delta .up{color:var(--good)} .delta .down{color:var(--bad)} .delta .flat{color:var(--warn)}

/* ---------- Compare rows ---------- */
.compare{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.compare .bar{flex:1;height:12px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}
.compare .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:99px}

/* ---------- Footer ---------- */
footer{margin-top:64px;padding:34px 0 46px;border-top:1px solid var(--panel-border);color:var(--text-faint);font-size:12.5px;text-align:center}

/* ---------- Responsive ---------- */
@media(max-width:760px){
  .wrap{padding:0 16px}
  .hero{padding:46px 0 30px}
  h1{font-size:30px}
  .nav{gap:14px}
  .lang-switch{margin-left:0;width:100%;justify-content:flex-start}
  .kpi{min-width:130px;flex:1}
}
/* Language-specific font tweaks */
[lang="ar"] body{direction:rtl}
[lang="ja"] body,[lang="ko"] body,[lang="zh-CN"] body,[lang="zh-TW"] body{letter-spacing:.01em}