/* =========================================================
 * 中国稀土AI大模型 - 主题样式（浅色 Glassmorphism）
 * 对齐 meoo (React+Tailwind) 设计 token，适配 Bootstrap 5.3
 * ========================================================= */
:root{
  --bg-a:#f8fafc; --bg-b:#eff6ff; --bg-c:#f1f5f9;
  --ink:#0f172a;          /* slate-900 */
  --ink-2:#1e293b;        /* slate-800 */
  --ink-3:#334155;        /* slate-700 */
  --muted:#64748b;        /* slate-500 */
  --muted-2:#94a3b8;      /* slate-400 */
  --line:#e2e8f0;         /* slate-200 */
  --line-2:#f1f5f9;       /* slate-100 */
  --brand:#2563eb;        /* blue-600 */
  --brand-2:#1d4ed8;      /* blue-700 */
  --brand-3:#1e40af;      /* blue-800 */
  --brand-50:#eff6ff;
  --brand-100:#dbeafe;
  --cyan:#06b6d4;
  --violet:#8b5cf6;
  --emerald:#10b981;
  --amber:#f59e0b;
  --rose:#f43f5e;
  --red:#ef4444;
  --radius:1rem;
  --radius-lg:1.25rem;
  --radius-xl:1.5rem;
  --shadow-soft:0 10px 30px rgba(30,58,138,.05);
  --shadow-md:0 14px 40px rgba(30,58,138,.08);
  --shadow-blue:0 14px 30px rgba(37,99,235,.18);
  --glass-bg:rgba(255,255,255,.70);
  --glass-bg-strong:rgba(255,255,255,.80);
  --glass-border:rgba(255,255,255,.55);
}
*{ -webkit-tap-highlight-color: transparent; }
html{ height:100%; }
body{
  margin:0;
  min-height:100%;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  color:var(--ink-2);
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(37,99,235,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(6,182,212,.08), transparent 60%),
    linear-gradient(135deg, var(--bg-a) 0%, rgba(239,246,255,.4) 50%, var(--bg-c) 100%);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--brand-2); }
img{ max-width:100%; }

/* ============ 通用工具类 ============ */
.text-ink{ color:var(--ink-2)!important; }
.text-muted-1{ color:var(--muted)!important; }
.text-muted-2{ color:var(--muted-2)!important; }
.text-brand{ color:var(--brand)!important; }
.text-cyan-x{ color:var(--cyan)!important; }
.text-violet-x{ color:var(--violet)!important; }
.text-emerald-x{ color:var(--emerald)!important; }
.text-amber-x{ color:var(--amber)!important; }
.text-rose-x{ color:var(--rose)!important; }
.bg-brand{ background:var(--brand)!important; color:#fff!important; }
.rounded-2xl{ border-radius:var(--radius-lg)!important; }
.rounded-xl{ border-radius:var(--radius)!important; }

/* 渐变文字 */
.text-gradient-brand{
  background:linear-gradient(90deg,var(--brand),var(--brand-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.text-gradient-brand-violet{
  background:linear-gradient(90deg,var(--brand),var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ============ 毛玻璃卡片 ============ */
.glass-card{
  background:var(--glass-bg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:1.25rem;
  transition:transform .25s ease, box-shadow .25s ease;
}
.glass-card-strong{
  background:var(--glass-bg-strong);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}
.glass-card-sm{ padding:1rem; }
.glass-hover:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}
.glass-plain{
  background:rgba(255,255,255,.60);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.5);
  border-radius:.85rem;
}

/* ============ 顶部悬浮导航 ============ */
.nav-wrap{
  position:sticky; top:0; z-index:1030;
  padding:12px 16px 0;
}
.navbar-xt{
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.55);
  border-radius:var(--radius);
  box-shadow:0 10px 25px rgba(30,58,138,.06);
  padding:.65rem 1rem;
}
.navbar-xt .brand{
  display:flex; align-items:center; gap:.75rem;
  color:var(--ink-2); font-weight:700;
}
.navbar-xt .brand:hover{ color:var(--brand); }
.navbar-xt .brand .logo{
  width:40px; height:40px; border-radius:12px;
  background:linear-gradient(135deg,var(--brand),var(--brand-3));
  color:#fff; font-weight:800; font-size:18px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(37,99,235,.28);
}
.navbar-xt .brand .title{ font-size:1.05rem; line-height:1.1; }
.navbar-xt .brand .sub{ font-size:.72rem; color:var(--muted); margin-top:2px; }
.navbar-xt .nav-link{
  padding:.5rem .9rem;
  border-radius:.75rem;
  color:var(--muted)!important;
  font-weight:500; font-size:.92rem;
  transition:all .2s ease;
}
.navbar-xt .nav-link:hover{ background:var(--brand-50); color:var(--brand)!important; }
.navbar-xt .nav-link.active{
  background:var(--brand)!important;
  color:#fff!important;
  box-shadow:0 6px 16px rgba(37,99,235,.25);
}
.navbar-xt .btn-hamburger{
  background:transparent; border:0; padding:.4rem;
  border-radius:.6rem; color:var(--ink-2);
}
.navbar-xt .btn-hamburger:hover{ background:var(--line-2); }

/* 移动端 offcanvas */
.offcanvas-xt{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border:0;
}
.offcanvas-xt .nav-link{
  display:flex; align-items:center; gap:.75rem;
  padding:.85rem 1rem; margin-bottom:.25rem;
  border-radius:.75rem; color:var(--ink-3); font-weight:500;
}
.offcanvas-xt .nav-link:hover{ background:var(--brand-50); color:var(--brand); }
.offcanvas-xt .nav-link.active{ background:var(--brand); color:#fff; }

/* ============ 按钮 ============ */
.btn-brand{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#fff; border:0;
  padding:.8rem 1.8rem; border-radius:.85rem;
  font-weight:600; letter-spacing:.3px;
  box-shadow:0 10px 24px rgba(37,99,235,.25);
  transition:all .25s ease;
}
.btn-brand:hover{
  color:#fff; transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(37,99,235,.35);
}
.btn-soft{
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(12px);
  border:1px solid var(--line);
  color:var(--ink-3);
  padding:.8rem 1.6rem; border-radius:.85rem; font-weight:600;
  transition:all .2s ease;
}
.btn-soft:hover{ border-color:#93c5fd; color:var(--brand); background:#fff; }
.btn-outline-brand{
  background:transparent; border:1px solid var(--brand); color:var(--brand);
  padding:.5rem 1rem; border-radius:.6rem; font-weight:500;
}
.btn-outline-brand:hover{ background:var(--brand); color:#fff; }

/* 胶囊标签 */
.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .9rem; border-radius:999px;
  font-size:.82rem; font-weight:500;
  background:rgba(219,234,254,.5); color:var(--brand-3);
  border:1px solid rgba(37,99,235,.15);
}
.pill-muted{
  background:rgba(241,245,249,.8); color:var(--muted);
  border:1px solid var(--line);
}
.pill-gradient{
  background:linear-gradient(90deg, rgba(37,99,235,.10), rgba(139,92,246,.10));
  border:1px solid rgba(37,99,235,.18);
  color:var(--ink-3);
}
.pill-red{
  background:linear-gradient(90deg, rgba(239,68,68,.10), rgba(245,158,11,.10));
  border:1px solid rgba(239,68,68,.18); color:var(--ink-3);
}

/* 小型 badge（tab bar / 状态） */
.xt-chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 10px; border-radius:999px;
  font-size:.72rem; font-weight:500;
}
.xt-chip-up{ background:#dcfce7; color:#16a34a; }
.xt-chip-down{ background:#fee2e2; color:#dc2626; }
.xt-chip-blue{ background:#dbeafe; color:#1d4ed8; }
.xt-chip-amber{ background:#fef3c7; color:#b45309; }
.xt-chip-red{ background:#fee2e2; color:#dc2626; }
.xt-chip-emerald{ background:#d1fae5; color:#059669; }
.xt-chip-slate{ background:#f1f5f9; color:var(--muted); }

/* ============ 功能彩色 icon 方块 ============ */
.feature-icon{
  width:48px; height:48px; border-radius:.85rem;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; box-shadow:0 8px 20px rgba(15,23,42,.12);
  font-size:22px;
}
.fi-blue{ background:linear-gradient(135deg,#3b82f6,#2563eb); }
.fi-emerald{ background:linear-gradient(135deg,#10b981,#059669); }
.fi-amber{ background:linear-gradient(135deg,#f59e0b,#d97706); }
.fi-violet{ background:linear-gradient(135deg,#8b5cf6,#7c3aed); }
.fi-rose{ background:linear-gradient(135deg,#f43f5e,#e11d48); }
.fi-cyan{ background:linear-gradient(135deg,#06b6d4,#0891b2); }
.fi-slate{ background:linear-gradient(135deg,#64748b,#475569); }

.feature-icon-sm{ width:40px; height:40px; border-radius:.75rem; font-size:18px; }

/* soft tint 方块（统计卡 icon 框） */
.tint-icon{
  width:40px; height:40px; border-radius:.75rem;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:18px;
}
.ti-blue{ background:#dbeafe; color:var(--brand); }
.ti-emerald{ background:#d1fae5; color:#059669; }
.ti-amber{ background:#fef3c7; color:#b45309; }
.ti-violet{ background:#ede9fe; color:#7c3aed; }
.ti-cyan{ background:#cffafe; color:#0891b2; }
.ti-rose{ background:#ffe4e6; color:#e11d48; }
.ti-indigo{ background:#e0e7ff; color:#4338ca; }
.ti-orange{ background:#ffedd5; color:#c2410c; }

/* ============ 统计卡（深蓝渐变） ============ */
.stat-card{
  background:linear-gradient(135deg,var(--brand),var(--brand-3));
  color:#fff; border-radius:var(--radius-lg);
  padding:1.5rem 1.25rem;
  box-shadow:var(--shadow-blue);
  text-align:center;
}
.stat-card .stat-value{ font-size:2rem; font-weight:800; line-height:1.1; margin:.5rem 0 .25rem; }
.stat-card .stat-label{ color:rgba(219,234,254,.95); font-size:.85rem; }
.stat-card .stat-icon{ opacity:.85; }

/* ============ CTA 深色区块 ============ */
.cta-dark{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#0f172a,#1e293b 55%,#1e3a8a);
  color:#fff; border-radius:var(--radius-xl);
  padding:2.5rem 1.75rem; text-align:center;
}
.cta-dark h2{ color:#fff; font-weight:700; }
.cta-dark p{ color:#cbd5e1; }
.cta-dark .btn-cta{
  background:#fff; color:#0f172a; font-weight:600;
  padding:.85rem 1.8rem; border-radius:.85rem;
  display:inline-flex; align-items:center; gap:.5rem;
  transition:background .2s ease;
}
.cta-dark .btn-cta:hover{ background:var(--brand-50); color:var(--brand-3); }

/* ============ 页眉区块 ============ */
.page-hero{ text-align:center; padding:2rem 0 1.25rem; }
.page-hero h1{ color:var(--ink-2); font-weight:800; font-size:clamp(1.65rem,3.5vw,2.25rem); margin:0 0 .5rem; }
.page-hero p{ color:var(--muted); max-width:720px; margin:0 auto; }

/* ============ Tab 切换条（浅色胶囊） ============ */
.xt-tabs{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.xt-tab{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1.1rem; border-radius:.85rem;
  background:rgba(255,255,255,.70); backdrop-filter:blur(10px);
  color:var(--muted); font-weight:500; font-size:.92rem;
  border:1px solid var(--glass-border);
  cursor:pointer; transition:all .2s ease;
}
.xt-tab:hover{ background:#fff; box-shadow:var(--shadow-soft); color:var(--ink-3); }
.xt-tab.active{
  background:var(--brand); color:#fff; border-color:transparent;
  box-shadow:0 6px 16px rgba(37,99,235,.25);
}

/* ============ 图表容器 ============ */
.chart-box{ width:100%; height:288px; }
.chart-box-sm{ height:220px; }
.chart-box-lg{ height:360px; }

/* ============ 表单 ============ */
.form-control, .form-select{
  border:1px solid var(--line); border-radius:.75rem;
  padding:.6rem .9rem; background:#fff; color:var(--ink-2);
}
.form-control:focus, .form-select:focus{
  border-color:#93c5fd;
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

/* ============ AI 聊天 ============ */
.chat-wrap{ max-width:960px; margin:0 auto; }
.chat-body{
  height:min(60vh, 500px); overflow-y:auto;
  padding:1rem; display:flex; flex-direction:column; gap:1rem;
}
.chat-body::-webkit-scrollbar{ width:6px; }
.chat-body::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:3px; }
.msg{ display:flex; gap:.75rem; }
.msg-user{ flex-direction:row-reverse; }
.msg .avatar{
  width:32px; height:32px; border-radius:.6rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.msg-user .avatar{ background:var(--brand); }
.msg-ai .avatar{ background:linear-gradient(135deg,#3b82f6,#1d4ed8); }
.msg .bubble{
  max-width:78%; padding:.7rem 1rem; border-radius:1rem;
  font-size:.92rem; line-height:1.65; white-space:pre-wrap; word-break:break-word;
}
.msg-user .bubble{ background:var(--brand); color:#fff; border-bottom-right-radius:.35rem; }
.msg-ai .bubble{ background:#f1f5f9; color:var(--ink-2); border-bottom-left-radius:.35rem; }
.cursor-blink{ display:inline-block; width:7px; height:1em; background:var(--brand); margin-left:3px; animation:blink 1s steps(2) infinite; vertical-align:text-bottom; }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:0} }
.typing-dots{ display:inline-flex; gap:4px; padding:.7rem 1rem; background:#f1f5f9; border-radius:1rem; }
.typing-dots span{ width:7px; height:7px; border-radius:50%; background:#94a3b8; animation:bounce 1s infinite; }
.typing-dots span:nth-child(2){ animation-delay:.2s; }
.typing-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes bounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

/* 快捷提问（对齐 meoo） */
.btn-quick-q{
  display:flex; align-items:center; gap:.5rem;
  width:100%;
  padding:.55rem .85rem;
  background:rgba(255,255,255,.60);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.55);
  border-radius:.85rem;
  color:#475569;
  font-size:.78rem;
  line-height:1.4;
  text-align:left;
  box-shadow:0 2px 6px rgba(30,58,138,.04);
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
  cursor:pointer;
}
.btn-quick-q i{ color:#64748b; transition:color .18s ease; font-size:.85rem; }
.btn-quick-q .q-text{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.btn-quick-q:hover{
  background:#ffffff;
  border-color:#bfdbfe;
  color:#2563eb;
  transform:scale(1.02);
  box-shadow:0 8px 18px rgba(37,99,235,.10);
}
.btn-quick-q:hover i{ color:#2563eb; }
.btn-quick-q:active{ transform:scale(.98); }
.btn-quick-q:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* ============ 时间线 ============ */
.tl{ position:relative; padding-left:1.5rem; }
.tl::before{ content:""; position:absolute; top:0; bottom:0; left:6px; width:2px; background:linear-gradient(to bottom,var(--brand),transparent); }
.tl-item{ position:relative; padding-bottom:1.25rem; }
.tl-item::before{ content:""; position:absolute; left:-22px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px rgba(37,99,235,.15); }
.tl-item .t{ font-size:.78rem; color:var(--brand); font-weight:600; }
.tl-item .h{ color:var(--ink-2); font-weight:600; margin:.15rem 0; }

/* ============ 进度条 ============ */
.bar-wrap{ height:8px; background:var(--line-2); border-radius:999px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,var(--brand),var(--cyan)); transition:width .6s ease; }
.bar-fill-amber{ background:linear-gradient(90deg,var(--amber),#fb923c); }

/* ============ 表格 ============ */
.xt-table{ width:100%; font-size:.9rem; }
.xt-table th{ text-align:left; padding:.75rem 1rem; color:var(--muted); font-weight:500; background:rgba(241,245,249,.5); }
.xt-table td{ padding:.75rem 1rem; border-top:1px solid var(--line); color:var(--ink-3); }
.xt-table tr:hover td{ background:rgba(239,246,255,.4); }

/* ============ 页脚 ============ */
.footer-xt{
  border-top:1px solid rgba(226,232,240,.6);
  background:rgba(255,255,255,.50);
  backdrop-filter:blur(10px);
  padding:2.5rem 0 1.5rem;
  margin-top:3rem;
}
.footer-xt h6{ color:var(--ink-2); font-weight:600; margin-bottom:.75rem; }
.footer-xt a{ display:block; color:var(--muted); font-size:.9rem; padding:.15rem 0; }
.footer-xt a:hover{ color:var(--brand); }
.footer-xt .copy{ border-top:1px solid rgba(226,232,240,.6); margin-top:2rem; padding-top:1.25rem; text-align:center; color:var(--muted-2); font-size:.85rem; }

/* ============ 动画（滚动入场） ============ */
.xt-reveal{ opacity:0; transform:translateY(18px); transition:all .6s ease; }
.xt-reveal.in{ opacity:1; transform:none; }

/* ============ 响应式微调 ============ */
@media (max-width: 991.98px){
  .navbar-xt{ padding:.55rem .8rem; }
  .stat-card{ padding:1.15rem .85rem; }
  .stat-card .stat-value{ font-size:1.5rem; }
  .cta-dark{ padding:2rem 1.25rem; }
}
@media (max-width: 575.98px){
  .page-hero{ padding:1rem 0 .5rem; }
  .chart-box{ height:240px; }
  .msg .bubble{ max-width:86%; }
}