/* ================================================================
   silkroad-data.css  v1.0  2026-08-23
   丝路跨境数据中心 · 统一设计系统
   深空科技蓝 #0B4F8B + 数据橙 #E8920C + 青光蓝 #00D4FF
   ================================================================ */

:root {
  /* ===== 品牌主色 — 深空科技蓝 ===== */
  --primary: #0B4F8B;
  --primary-light: #1A6FC4;
  --primary-dark: #073561;
  --primary-50: rgba(11,79,139,0.06);
  --primary-100: rgba(11,79,139,0.12);
  --primary-200: rgba(11,79,139,0.20);

  /* ===== 数据橙 ===== */
  --accent: #E8920C;
  --accent-dark: #C77A05;
  --accent-light: #F0A93B;
  --accent-50: rgba(232,146,12,0.08);

  /* ===== 青光蓝 — 数据可视化专用 ===== */
  --cyan: #00B4D8;
  --cyan-light: #48CAE4;
  --cyan-glow: #00D4FF;

  /* ===== 语义色 ===== */
  --success: #16A34A;  --success-light: #DCFCE7;
  --danger: #DC2626;   --danger-light: #FEE2E2;
  --warning: #F59E0B;  --warning-light: #FEF3C7;
  --purple: #7C3AED;   --purple-light: #EDE9FE;
  --info: #0EA5E9;     --info-light: #E0F2FE;

  /* ===== 中性色 — 深墨系 ===== */
  --ink: #1A1F2E;
  --muted: #64748B;
  --subtle: #94A3B8;
  --line: #E2E8F0;
  --line-strong: #CBD5E1;
  --bg: #F7F9FC;
  --bg-alt: #EEF2F7;
  --bg-deep: #0F1729;
  --card: #FFFFFF;
  --card-alt: #F8FAFC;

  /* ===== 圆角 ===== */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ===== 阴影 — 蓝调 ===== */
  --shadow-xs: 0 1px 2px rgba(11,79,139,0.04);
  --shadow-sm: 0 1px 3px rgba(11,79,139,0.06), 0 1px 2px rgba(0,0,0,0.02);
  --shadow: 0 4px 14px rgba(11,79,139,0.08);
  --shadow-lg: 0 12px 32px rgba(11,79,139,0.12);
  --shadow-glow: 0 0 20px rgba(0,212,255,0.15);

  /* ===== 间距 ===== */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* ===== 过渡 ===== */
  --transition: all .2s cubic-bezier(.4,0,.2,1);
  --transition-fast: all .15s ease;
  --transition-slow: all .35s ease;

  /* ===== 容器 ===== */
  --wrap: 1200px;
  --wrap-narrow: 800px;

  /* ===== 旧名兼容映射（向后兼容）===== */
  --blue: var(--primary);
  --blue-dark: var(--primary-dark);
  --blue-light: var(--primary-50);
  --gold: var(--accent);
  --gold-light: var(--accent-50);
  --text: var(--ink);
  --text2: var(--muted);
  --border: var(--line);
  --green: var(--success);
  --red: var(--danger);
}

/* ===== 全局重置 ===== */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.7;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--primary);text-decoration:none;transition:var(--transition-fast)}
a:hover{color:var(--primary-dark);text-decoration:underline}
img{max-width:100%;height:auto}

/* ===== 等宽数字 — 数据表格/看板专用 ===== */
.tnum,.stat-num,.data-num{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum';
}

/* ===== 容器 ===== */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:var(--wrap-narrow);margin:0 auto;padding:0 24px}

/* ================================================================
   全局导航 — 深空蓝底 + 数据橙点缀
   ================================================================ */
.nav-site{
  background:#fff;
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.nav-site .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:60px;
}
.srd-logo{
  font-weight:800;font-size:18px;letter-spacing:.5px;
  color:var(--primary);display:flex;align-items:center;gap:8px;
  text-decoration:none;
}
.srd-logo:hover{text-decoration:none;color:var(--primary-dark)}
.srd-logo .dot{
  width:10px;height:10px;background:var(--accent);
  border-radius:2px;display:inline-block;
  transform:rotate(45deg);
}
.nav-links{display:flex;align-items:center;gap:20px}
.nav-links a{
  color:#334155;font-size:14px;font-weight:500;
  text-decoration:none;transition:var(--transition-fast);
}
.nav-links a:hover{color:var(--primary);text-decoration:none}
.nav-links a.active{color:var(--primary);font-weight:700}
.nav-right{display:flex;align-items:center;gap:12px}

/* 导航CTA按钮 */
.nav-cta{
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  color:#fff !important;
  padding:8px 20px;border-radius:var(--r-pill);
  font-size:13px;font-weight:600;
  text-decoration:none !important;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
}
.nav-cta:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}

/* ================================================================
   页脚 — 统一品牌信息
   ================================================================ */
.footer-site{
  background:var(--bg-deep);
  color:#94A3B8;
  padding:40px 0 20px;
  margin-top:60px;
}
.footer-site .wrap{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;
}
.footer-brand{max-width:360px}
.footer-brand .srd-logo{color:#fff;margin-bottom:12px}
.footer-brand p{font-size:13px;line-height:1.8;color:#64748B}
.footer-links{display:flex;gap:48px}
.footer-links h4{color:#E2E8F0;font-size:13px;font-weight:600;margin-bottom:12px}
.footer-links ul{list-style:none}
.footer-links li{margin-bottom:8px}
.footer-links a{color:#94A3B8;font-size:13px;text-decoration:none}
.footer-links a:hover{color:var(--cyan-glow)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.08);
  margin-top:32px;padding-top:16px;
  text-align:center;font-size:12px;color:#475569;
}

/* Footer Accordion - 移动端折叠导航 */
.footer-accordion{display:none}
.footer-accordion-brand{display:none;margin-bottom:20px}
.footer-accordion-brand .srd-logo{color:#fff;margin-bottom:12px;display:block}
.footer-accordion-brand p{font-size:13px;line-height:1.8;color:#64748B}
.footer-accordion-item{border-bottom:1px solid rgba(255,255,255,0.08)}
.footer-accordion-header{
  display:none;width:100%;background:none;border:none;cursor:pointer;
  padding:14px 0;display:none;justify-content:space-between;align-items:center;
  color:#E2E8F0;font-size:14px;font-weight:600;transition:color .2s;
  outline:none;
}
.footer-accordion-header:focus{outline:none}
.footer-accordion-icon{
  font-size:18px;font-weight:300;transition:transform .3s;color:var(--cyan-glow);
}
.footer-accordion-header.active .footer-accordion-icon{transform:rotate(45deg)}
.footer-accordion-content{display:none;padding:0 0 12px}
.footer-accordion-header.active+.footer-accordion-content{display:block}
.footer-accordion-content a{
  display:block;color:#94A3B8;font-size:13px;text-decoration:none;padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.footer-accordion-content a:last-child{border-bottom:none}
.footer-accordion-content a:hover{color:var(--cyan-glow)}
.footer-accordion-item:last-child{border-bottom:none}

/* 平板断点 */
@media(min-width:769px) and (max-width:1024px){
  .footer-links{gap:24px}
  .footer-brand{max-width:280px}
}

/* ================================================================
   卡片组件
   ================================================================ */
.card{
  background:var(--card);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
  transition:var(--transition);
}
.card:hover{
  box-shadow:var(--shadow);
  border-color:var(--primary-100);
}
.card-pad{padding:var(--s-6)}

/* 区块头部三件套 */
.section-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--s-6);
}
.section-head .title{
  font-size:20px;font-weight:700;color:var(--ink);
  display:flex;align-items:center;gap:8px;
}
.section-head .title::before{
  content:'';width:4px;height:20px;
  background:var(--primary);border-radius:2px;
}
.section-head .more{
  font-size:13px;color:var(--primary);font-weight:500;
}

/* ================================================================
   按钮
   ================================================================ */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 20px;border-radius:var(--r-sm);
  font-size:14px;font-weight:600;
  cursor:pointer;border:none;transition:var(--transition);
  text-decoration:none;
}
.btn-primary{
  background:var(--primary);color:#fff;
}
.btn-primary:hover{
  background:var(--primary-dark);transform:translateY(-1px);
  box-shadow:var(--shadow);text-decoration:none;
}
.btn-accent{
  background:var(--accent);color:#fff;
}
.btn-accent:hover{
  background:var(--accent-dark);transform:translateY(-1px);
  box-shadow:var(--shadow);text-decoration:none;
}
.btn-outline{
  background:transparent;color:var(--primary);
  border:1.5px solid var(--primary);
}
.btn-outline:hover{
  background:var(--primary);color:#fff;text-decoration:none;
}
.btn-sm{padding:6px 14px;font-size:12px}
.btn-lg{padding:12px 28px;font-size:15px}

/* ================================================================
   数据统计卡片 — 数据中台核心组件
   ================================================================ */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--s-4);
}
.stat-card{
  background:var(--card);
  border-radius:var(--r-lg);
  padding:var(--s-5);
  border:1px solid var(--line);
  position:relative;overflow:hidden;
  transition:var(--transition);
}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--primary),var(--cyan-glow));
}
.stat-card:hover{
  box-shadow:var(--shadow);
  transform:translateY(-2px);
}
.stat-card .stat-label{
  font-size:12px;color:var(--muted);font-weight:500;
  margin-bottom:8px;
}
.stat-card .stat-num{
  font-size:28px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;
  line-height:1.2;
}
.stat-card .stat-unit{
  font-size:13px;color:var(--muted);font-weight:400;margin-left:4px;
}
.stat-card .stat-trend{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12px;font-weight:600;margin-top:8px;
}
.stat-trend.up{color:var(--success)}
.stat-trend.down{color:var(--danger)}
.stat-trend.flat{color:var(--muted)}

/* ================================================================
   表格 — 数据展示专用
   ================================================================ */
.data-table{
  width:100%;border-collapse:collapse;
  font-size:13px;
}
.data-table th{
  background:var(--bg-alt);
  color:var(--muted);font-weight:600;
  padding:10px 14px;text-align:left;
  border-bottom:2px solid var(--line);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.data-table td{
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
.data-table tbody tr:hover{
  background:var(--primary-50);
}
.data-table .num{
  font-variant-numeric:tabular-nums;
  text-align:right;
}

/* ================================================================
   徽章 / 标签
   ================================================================ */
.badge{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11px;font-weight:600;
  padding:2px 10px;border-radius:var(--r-pill);
  white-space:nowrap;
}
.badge-primary{background:var(--primary-100);color:var(--primary)}
.badge-accent{background:var(--accent-50);color:var(--accent-dark)}
.badge-success{background:var(--success-light);color:var(--success)}
.badge-danger{background:var(--danger-light);color:var(--danger)}
.badge-warning{background:var(--warning-light);color:#92400E}
.badge-info{background:var(--info-light);color:var(--info)}
.badge-neutral{background:var(--bg-alt);color:var(--muted)}

/* ================================================================
   工具入口卡片 — 门户首页专用
   ================================================================ */
.tool-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--s-6);
}
.tool-card{
  background:var(--card);
  border-radius:var(--r-lg);
  padding:var(--s-6);
  border:1px solid var(--line);
  text-decoration:none;color:inherit;
  position:relative;overflow:hidden;
  transition:var(--transition);
  display:flex;flex-direction:column;gap:12px;
}
.tool-card:hover{
  border-color:var(--primary);
  box-shadow:var(--shadow-lg);
  transform:translateY(-3px);
  text-decoration:none;
}
.tool-card .tool-icon{
  width:48px;height:48px;
  border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
}
.tool-card .tool-icon.blue{background:var(--primary-100);color:var(--primary)}
.tool-card .tool-icon.orange{background:var(--accent-50);color:var(--accent-dark)}
.tool-card .tool-icon.cyan{background:rgba(0,180,216,0.1);color:var(--cyan)}
.tool-card .tool-name{
  font-size:18px;font-weight:700;color:var(--ink);
}
.tool-card .tool-desc{
  font-size:13px;color:var(--muted);line-height:1.6;
}
.tool-card .tool-meta{
  display:flex;align-items:center;gap:12px;
  font-size:12px;color:var(--subtle);
  margin-top:auto;
}
.tool-card .tool-arrow{
  position:absolute;top:var(--s-6);right:var(--s-6);
  color:var(--subtle);font-size:18px;
  transition:var(--transition);
}
.tool-card:hover .tool-arrow{
  color:var(--primary);transform:translateX(4px);
}

/* ================================================================
   Hero区 — 门户首页
   ================================================================ */
.hero{
  background:linear-gradient(135deg,var(--bg-deep) 0%,#1A2540 50%,#0B4F8B 100%);
  color:#fff;
  padding:64px 0 48px;
  position:relative;overflow:hidden;
}
.hero::after{
  content:'';position:absolute;
  top:-50%;right:-20%;width:500px;height:500px;
  background:radial-gradient(circle,rgba(0,212,255,0.08) 0%,transparent 70%);
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:1}
.hero h1{
  font-size:36px;font-weight:800;
  letter-spacing:1px;
  margin-bottom:16px;
}
.hero h1 .accent{color:var(--cyan-glow)}
.hero .subtitle{
  font-size:16px;color:#94A3B8;
  max-width:600px;line-height:1.8;
}
.hero-stats{
  display:flex;gap:48px;margin-top:36px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.1);
}
.hero-stat .num{
  font-size:32px;font-weight:800;
  color:var(--cyan-glow);
  font-variant-numeric:tabular-nums;
}
.hero-stat .label{
  font-size:13px;color:#94A3B8;margin-top:4px;
}

/* ================================================================
   API状态指示器
   ================================================================ */
.api-status{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:500;
}
.api-status .dot{
  width:8px;height:8px;border-radius:50%;
  animation:pulse 2s infinite;
}
.api-status.online .dot{background:var(--success)}
.api-status.offline .dot{background:var(--danger)}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.85)}
}

/* ================================================================
   空状态 / 加载
   ================================================================ */
.empty-state{
  text-align:center;padding:48px 24px;
  color:var(--muted);
}
.empty-state .icon{font-size:48px;opacity:.3;margin-bottom:12px}
.empty-state .text{font-size:14px}

.loading-skeleton{
  background:linear-gradient(90deg,var(--bg-alt) 25%,var(--bg) 50%,var(--bg-alt) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--r-sm);
}
@keyframes shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}


/* ===== 移动端汉堡菜单 ===== */
.nav-toggle{
  display:none;
  background:none;border:none;cursor:pointer;
  padding:6px;border-radius:6px;
}
.nav-toggle span{
  display:block;width:22px;height:2px;background:#334155;
  border-radius:1px;transition:all .3s;
}
.nav-toggle span+span{margin-top:5px}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ================================================================
   响应式
   ================================================================ */
@media(max-width:768px){
  .nav-toggle{display:block}
  .nav-links{
    display:none;position:fixed;top:54px;left:0;right:0;
    background:#fff;flex-direction:column;gap:0;
    padding:8px 16px 16px;box-shadow:0 4px 12px rgba(0,0,0,.1);
    border-bottom:1px solid var(--line);z-index:99;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--bg-alt);font-size:15px}
  .nav-links a:last-child{border-bottom:none}
  .nav-site .wrap{height:54px}
  .wrap{padding:0 16px}
  .hero{padding:40px 0 32px}
  .hero h1{font-size:24px}
  .hero .subtitle{font-size:14px}
  .hero-stats{flex-wrap:wrap;gap:24px}
  .hero-stat .num{font-size:24px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .tool-grid{grid-template-columns:1fr}
  .footer-site .wrap{flex-direction:column}
  .footer-links{display:none}
  .footer-accordion{display:block}
  .footer-accordion-brand{display:block}
  .footer-accordion-header{display:flex}
}

/* ================================================================
   工具类
   ================================================================ */
.text-center{text-align:center}
.text-right{text-align:right}
.text-primary{color:var(--primary)}
.text-accent{color:var(--accent)}
.text-muted{color:var(--muted)}
.text-success{color:var(--success)}
.text-danger{color:var(--danger)}
.font-bold{font-weight:700}
.font-num{font-variant-numeric:tabular-nums}
.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.flex{display:flex}.flex-between{display:flex;justify-content:space-between;align-items:center}
.gap-2{gap:8px}.gap-4{gap:16px}
.hidden{display:none}