/* ============================================================
   site.css — 数由图说 DataOnMap 全站统一共享样式
   由各页 <style> 中抽出的顶栏 / 专题弹框 / 回到顶部 共享块，
   以及统一的容器宽度与页面底色。
   统一规则：内容宽度 1200px，页面底色 #f5f7fa。
   ============================================================ */

:root{
  --bg:#f5f7fa;
}

/* 页面底色（统一） */
body{
  background:var(--bg);
}

/* 内容容器（统一宽度） */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}
@media (max-width:540px){
  .container{padding:0 16px}
}

/* ===== 固定顶栏 + 专题弹框 + 回到顶部（站点统一） ===== */
body{padding-top:60px}
.topbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(244,246,249,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #e5e9f0}
.topbar-inner{max-width:1200px;margin:0 auto;padding:0 24px}
.topbar .navbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding:12px 0;margin:0;border:0;background:none;box-shadow:none}
.topbar .logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.4rem;letter-spacing:-.3px;text-decoration:none}
.topbar .logo .logo-text{white-space:nowrap;background:linear-gradient(135deg,#1976d2,#43a047);-webkit-background-clip:text;background-clip:text;color:transparent}
.topbar .logo .logo-icon img{height:28px;width:auto;display:block}
.topbar .nav-links{list-style:none;display:flex;gap:24px;align-items:center;margin:0;padding:0}
.topbar .nav-links a{text-decoration:none;font-weight:500;font-size:.95rem;color:#4a627a;transition:color .2s}
.topbar .nav-links a:hover{color:#43a047}
.nav-trigger{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;font:inherit;font-weight:500;font-size:.95rem;color:#4a627a;cursor:pointer;transition:color .2s}
.nav-trigger:hover{color:#43a047}
.nav-trigger .caret{font-size:.68rem;transition:transform .2s}
.nav-trigger[aria-expanded="true"]{color:#43a047}
.nav-trigger[aria-expanded="true"] .caret{transform:rotate(180deg)}
.mega-panel{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid #e5e9f0;box-shadow:0 10px 30px rgba(15,23,42,.08);max-height:76vh;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease,visibility .18s}
.mega-panel.open{opacity:1;visibility:visible;transform:translateY(0)}
.mega-inner{max-width:1200px;margin:0 auto;padding:20px 24px 22px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px 30px}
.mega-cat{display:inline-block;font-size:.82rem;font-weight:800;color:#2563eb;text-decoration:none;margin-bottom:6px;letter-spacing:.3px}
.mega-cat:hover{text-decoration:underline}
.mega-link{display:block;font-size:.85rem;color:#475569;text-decoration:none;padding:4px 0;line-height:1.45;transition:color .15s}
.mega-link:hover{color:#2563eb}
.mega-mask{position:fixed;inset:0;background:rgba(15,23,42,.28);z-index:990;opacity:0;visibility:hidden;transition:opacity .18s}
.mega-mask.open{opacity:1;visibility:visible}
.bc-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.82rem;color:#64748b;padding:14px 0 0}
.bc-nav a{color:#475569;text-decoration:none}
.bc-nav a:hover{color:#2563eb}
.bc-nav .sep{color:#cbd5e1}
.backtop{position:fixed;right:22px;bottom:22px;z-index:900;display:inline-flex;align-items:center;gap:6px;padding:9px 15px;background:#fff;border:1px solid #e5e9f0;border-radius:999px;color:#2563eb;text-decoration:none;font-size:.8rem;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,.08);opacity:0;visibility:hidden;margin:0;transition:opacity .2s ease,transform .2s ease,visibility .2s}
.backtop.show{opacity:1;visibility:visible}
.backtop:hover{transform:translateY(-2px)}
@media(max-width:900px){.mega-inner{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.mega-inner{grid-template-columns:repeat(2,1fr);gap:14px 20px}}
@media(max-width:460px){.mega-inner{grid-template-columns:1fr}}

/* 图标：用 emoji 取代 Font Awesome（.ico 包裹） */
.ico{display:inline-block;vertical-align:middle;font-style:normal;line-height:1}

/* 移动端：顶栏 Logo 居左，全部专题 固定右上角（禁止换行，避免掉到下一行） */
@media (max-width:600px){
  .topbar .navbar{flex-wrap:nowrap;justify-content:space-between;gap:8px;padding:10px 0}
  .topbar .logo{font-size:1.1rem;min-width:0}
  .topbar .logo .logo-text{white-space:nowrap;background:linear-gradient(135deg,#1976d2,#43a047);-webkit-background-clip:text;background-clip:text;color:transparent}
  .topbar .nav-links{margin-left:auto;flex-shrink:0}
  .nav-trigger{font-size:.9rem;white-space:nowrap}
}

/* 资料来源 / 更新时间 统一版块（模板自 asian-games-medal-standings.html，所有内容页共用） */
.src-meta{max-width:1200px;margin:24px auto 40px;padding:0 24px}
/* callout 对齐线上已部署模板（dataonmap.net）：四周浅蓝细框 + 更浅蓝底，覆盖 site.css */
.callout{background:#eff6ff;border:1px solid #cfe0fb;border-radius:14px;padding:1.1rem 1.3rem;margin:1.2rem 0}
.callout h4{font-size:.92rem;font-weight:700;color:#1e40af;margin-bottom:.4rem}
.callout p{font-size:.87rem;margin-bottom:.5rem;color:#3b5b8c}
.callout p:last-child{margin-bottom:0}
/* .callout{background:#f4f8fc;border-left:4px solid #2e7bb0;border-radius:10px;padding:14px 18px;margin:14px 0;font-size:.92rem;color:#33465c}
.callout h4{margin:0 0 6px;font-size:.95rem;font-weight:700;color:#1f4e6b}
.callout p{margin:0 0 .5rem;line-height:1.7}
.callout p:last-child{margin-bottom:0} */
/* 语义化变体：world-storage-industry 等页面的橙色 DRAM / 紫色 HDD 提示块，统一到本文件 */
.callout.orange{background:#fff7ed;}
.callout.purple{background:#f5f3ff;}