/* ============================================================
   PERIODICA — main.css
   金属百科站全局样式：欧美工业风，冷钢色系，双主题
   字号体系：基准 16px，十级梯度（参照 Google Material /
   Microsoft Fluent 等国际大站可读性规范）：
     --fs-mini     11px  密集组件最小字号（周期表格格号/名称、紧凑元信息）
     --fs-label    12px  标签/元信息/表头/区块小标题/页脚
     --fs-nav      13px  导航链接/按钮/筛选 chip/卡片简介
     --fs-body-sm  14px  次要正文/表格单元格/侧栏行
     --fs-body     16px  正文
     --fs-title    17px  卡片标题/Logo
     --fs-h2       20px  区块大标题
     --fs-stat     22px  关键数字/大号展示
     --fs-h1       30px  元素页主标题
     --fs-hero     32px  列表页主标题
   ============================================================ */

/* ---------- RESET & BASE ---------- */
/* 本地自托管字体（已下载到 assets/fonts/） */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/space-grotesk.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono.ttf') format('truetype');
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0b0f;
  --bg-elevated:#11131b;
  --bg-card:#171927;
  --bg-hover:#1e2030;
  --nav-bg:rgba(10,11,15,.92);
  --border:#272b40;
  --border-light:#383d56;
  --text:#e9ebf3;
  --text-secondary:#949aaf;
  --text-muted:#5c6177;
  --accent:#7ba0e8;
  --accent-bright:#a9c4ff;
  --green:#63bf92;
  --red:#d96060;
  --blue:#5f8fe0;
  --amber:#d0a060;
  /* 元素分类频谱（红→橙→青铜→钢→青→青蓝→蓝→紫→玫红→品红） */
  --cat-alkali:#e2725f;
  --cat-alkaline:#d9a24d;
  --cat-transition:#7fa3ba;
  --cat-post:#bd9260;
  --cat-metalloid:#3fae8f;
  --cat-nonmetal:#39bfc9;
  --cat-halogen:#4f86e8;
  --cat-noble-gas:#9b7fe0;
  --cat-lanthanide:#c05c9e;
  --cat-actinide:#ab51a4;
  --metal-bg:#131722;
  --metal-border:#2b3b54;
  --blueprint-bg:#0f0c1c;
  --blueprint-line:rgba(160,150,255,.05);
  --blueprint-ink:#c6cfff;
  --blueprint-dot:#7b9be8;
  --glow:rgba(123,160,232,.26);
  --radius:2px;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --shadow:0 1px 0 rgba(255,255,255,.02) inset;
  /* ---- 统一字号梯度（基准 16px） ---- */
  --fs-mini:.6875rem;     /* 11px */
  --fs-label:.75rem;      /* 12px */
  --fs-nav:.8125rem;      /* 13px */
  --fs-body-sm:.875rem;   /* 14px */
  --fs-body:1rem;         /* 16px */
  --fs-title:1.0625rem;   /* 17px */
  --fs-h2:1.25rem;        /* 20px */
  --fs-stat:1.375rem;     /* 22px */
  --fs-h1:1.875rem;       /* 30px */
  --fs-hero:2rem;         /* 32px */
}
[data-theme="light"]{
  --bg:#f7f7fb;
  --bg-elevated:#ffffff;
  --bg-card:#eff0f6;
  --bg-hover:#e4e5ef;
  --nav-bg:rgba(255,255,255,.88);
  --border:#d9dbe9;
  --border-light:#c1c4d8;
  --text:#16181f;
  --text-secondary:#5a5e71;
  --text-muted:#8b8fa3;
  --accent:#2a5fc0;
  --accent-bright:#1a4aa8;
  --green:#3a7a5a;
  --red:#b04040;
  --blue:#2a5a8a;
  --amber:#8a6a2a;
  --cat-alkali:#c04838;
  --cat-alkaline:#b07a28;
  --cat-transition:#2a6a8a;
  --cat-post:#8a6428;
  --cat-metalloid:#1f8f6a;
  --cat-nonmetal:#159ab0;
  --cat-halogen:#2f5fc0;
  --cat-noble-gas:#6a46c8;
  --cat-lanthanide:#a0327c;
  --cat-actinide:#8a2aa0;
  --metal-bg:#e7ebf3;
  --metal-border:#b6c2d8;
  --blueprint-bg:#eef0f8;
  --blueprint-line:rgba(20,24,60,.07);
  --blueprint-ink:#23263e;
  --blueprint-dot:#2a5fc0;
  --glow:rgba(42,95,200,.16);
}
html{font-size:16px;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit}
::selection{background:var(--accent);color:#fff}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  background:var(--nav-bg);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:0 28px;height:56px;
  display:flex;align-items:center;gap:24px;
}
.nav-logo{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-title);
  letter-spacing:.12em;color:var(--accent-bright);
  display:flex;align-items:center;gap:8px;white-space:nowrap;
}
.nav-logo svg{width:20px;height:20px}
.nav-search{
  flex:1;max-width:420px;position:relative;
  display:flex;align-items:center;gap:8px;
  background:var(--bg-elevated);border:1px solid var(--border);
  padding:6px 12px;border-radius:var(--radius);
  color:var(--text-muted);font-size:var(--fs-body-sm);
}
.nav-search svg{flex-shrink:0}
.nav-search input{
  background:none;border:none;outline:none;color:var(--text);
  font-family:var(--font-body);font-size:var(--fs-body-sm);flex:1;min-width:0;
}
.nav-search input::placeholder{color:var(--text-muted)}
.search-results{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--radius);max-height:360px;overflow-y:auto;
  z-index:200;display:none;box-shadow:0 8px 24px rgba(0,0,0,.35);
}
[data-theme="light"] .search-results{box-shadow:0 8px 24px rgba(0,0,0,.12)}
.search-results.open{display:block}
.search-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--border);
  text-decoration:none;color:inherit;
}
.search-item:last-child{border-bottom:none}
.search-item:hover{background:var(--bg-hover)}
.search-item .s-sym{
  font-family:var(--font-mono);font-size:var(--fs-label);color:var(--accent-bright);
  min-width:34px;text-align:center;
}
.search-item .s-name{font-size:var(--fs-body-sm);color:var(--text)}
.search-item .s-type{
  margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-mini);
  text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);
}
.nav-menu{display:flex;gap:20px;margin-left:auto}
.nav-menu a{
  font-size:var(--fs-nav);letter-spacing:.08em;color:var(--text-secondary);
  text-transform:uppercase;transition:color .15s;
  padding:4px 0;border-bottom:1px solid transparent;white-space:nowrap;
}
.nav-menu a:hover,.nav-menu a.active{color:var(--text);border-bottom-color:var(--accent)}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-hamburger{display:none}
.nav-menu.open{display:flex;flex-direction:column;position:absolute;top:56px;left:0;right:0;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:12px 28px;gap:14px;z-index:150}
.nav-menu.open a{padding:6px 0;border-bottom:none}
.icon-btn{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;color:var(--text-secondary);
  border:1px solid var(--border);border-radius:var(--radius);
  transition:all .12s;flex-shrink:0;
}
.icon-btn:hover{color:var(--text);border-color:var(--border-light)}
.lang-btn{width:auto!important;padding:0 10px;font-family:var(--font-mono);font-size:var(--fs-label)}
.lang-select{
  background:var(--bg-elevated);color:var(--text);
  border:1px solid var(--border);border-radius:var(--radius);
  font-family:var(--font-mono);font-size:var(--fs-label);padding:5px 6px;
  max-width:120px;cursor:pointer;outline:none;
}

/* ---------- LAYOUT ---------- */
.container{max-width:1440px;margin:0 auto;padding:28px 32px;flex:1;width:100%}
.crumbs{
  font-family:var(--font-mono);font-size:var(--fs-label);color:var(--text-muted);
  padding:18px 32px 0;max-width:1440px;margin:0 auto;width:100%;
}
.crumbs a{color:var(--text-secondary)}
.crumbs a:hover{color:var(--accent-bright)}
.crumbs span.sep{margin:0 8px}

/* ---------- HOME: PERIODIC TABLE ---------- */
.home-layout{display:flex;gap:24px;padding:20px 32px;max-width:1600px;margin:0 auto;width:100%}
.sidebar{width:172px;flex-shrink:0;position:sticky;top:80px;align-self:flex-start}
.sidebar h3{
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;
}
.filter-group{display:flex;flex-direction:column;gap:2px;margin-bottom:18px}
.filter-chip{
  text-align:left;padding:5px 10px;font-size:var(--fs-nav);
  color:var(--text-secondary);border-left:2px solid transparent;
  transition:all .12s;border-radius:0;
}
.filter-chip:hover{color:var(--text);background:var(--bg-hover)}
.filter-chip.active{color:var(--accent-bright);border-left-color:var(--accent)}
.filter-chip.active[data-cat="alkali_metal"]{color:var(--cat-alkali);border-left-color:var(--cat-alkali)}
.filter-chip.active[data-cat="alkaline_earth"]{color:var(--cat-alkaline);border-left-color:var(--cat-alkaline)}
.filter-chip.active[data-cat="transition"]{color:var(--cat-transition);border-left-color:var(--cat-transition)}
.filter-chip.active[data-cat="post_transition"]{color:var(--cat-post);border-left-color:var(--cat-post)}
.filter-chip.active[data-cat="lanthanide"]{color:var(--cat-lanthanide);border-left-color:var(--cat-lanthanide)}
.filter-chip.active[data-cat="actinide"]{color:var(--cat-actinide);border-left-color:var(--cat-actinide)}
.filter-chip.active[data-cat="metalloid"]{color:var(--cat-metalloid);border-left-color:var(--cat-metalloid)}
.filter-chip.active[data-cat="nonmetal"]{color:var(--cat-nonmetal);border-left-color:var(--cat-nonmetal)}
.filter-chip.active[data-cat="noble_gas"]{color:var(--cat-noble-gas);border-left-color:var(--cat-noble-gas)}
.filter-chip.active[data-cat="halogen"]{color:var(--cat-halogen);border-left-color:var(--cat-halogen)}
.periodic-wrap{flex:1;min-width:0;container-type:inline-size}
.periodic-legend{
  display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px;
  font-family:var(--font-mono);font-size:var(--fs-label);color:var(--text-muted);
}
.legend-item{display:flex;align-items:center;gap:6px}
.legend-swatch{width:12px;height:12px;border:1px solid var(--border);border-radius:2px}
.legend-swatch.alkali{background:var(--cat-alkali)}
.legend-swatch.alkaline{background:var(--cat-alkaline)}
.legend-swatch.transition{background:var(--cat-transition)}
.legend-swatch.post{background:var(--cat-post)}
.legend-swatch.metalloid{background:var(--cat-metalloid)}
.legend-swatch.nonmetal{background:var(--cat-nonmetal)}
.legend-swatch.halogen{background:var(--cat-halogen)}
.legend-swatch.noble-gas{background:var(--cat-noble-gas)}
.legend-swatch.lanthanide{background:var(--cat-lanthanide)}
.legend-swatch.actinide{background:var(--cat-actinide)}
.legend-swatch.empty{background:transparent;opacity:.32}
.periodic-grid{
  display:grid;
  grid-template-columns:repeat(18,minmax(0,1fr));
  gap:.5cqw;
}
.cell{
  aspect-ratio:1;min-width:0;height:100%;
  background:var(--bg-card);border:1px solid var(--border);
  padding:.15cqw .1cqw;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.24cqw;
  transition:all .12s;position:relative;overflow:hidden;border-radius:.3cqw;
}
/* 主周期格：按 data-cat 取频谱色 --cc；底色/描边/符号由 --cc 统一驱动 */
.cell[data-cat]{background:color-mix(in srgb,var(--cc) 15%,var(--bg-card));border-color:color-mix(in srgb,var(--cc) 55%,var(--border));cursor:pointer}
.cell[data-cat] .num{color:var(--text-muted)}
.cell[data-cat] .sym{color:var(--cc)}
.cell[data-cat]:hover{border-color:var(--cc);box-shadow:0 0 16px var(--glow);transform:scale(1.06);z-index:5}
.cell[data-cat="alkali_metal"]{--cc:var(--cat-alkali)}
.cell[data-cat="alkaline_earth"]{--cc:var(--cat-alkaline)}
.cell[data-cat="transition"]{--cc:var(--cat-transition)}
.cell[data-cat="post_transition"]{--cc:var(--cat-post)}
.cell[data-cat="lanthanide"]{--cc:var(--cat-lanthanide)}
.cell[data-cat="actinide"]{--cc:var(--cat-actinide)}
.cell[data-cat="metalloid"]{--cc:var(--cat-metalloid)}
.cell[data-cat="nonmetal"]{--cc:var(--cat-nonmetal)}
.cell[data-cat="noble_gas"]{--cc:var(--cat-noble-gas)}
.cell[data-cat="halogen"]{--cc:var(--cat-halogen)}
/* 尚未收录的灰色占位格（无 data-cat）仍压暗 */
.cell.nonmetal:not([data-cat]){opacity:.32}
/* 分类筛选高亮：在频谱基色上加强浓淡并描边光晕（JS 给命中格加 hl-<分类>） */
.cell[data-cat][class*="hl-"]{background:color-mix(in srgb,var(--cc) 34%,var(--bg-card));border-color:var(--cc);box-shadow:0 0 16px color-mix(in srgb,var(--cc) 46%,transparent)}
.cell[data-cat][class*="hl-"]:hover{transform:scale(1.06)}
.cell .num{position:absolute;top:.35cqw;left:.5cqw;font-family:var(--font-mono);font-size:.74cqw;color:var(--text-muted);line-height:1}
.cell .sym{font-family:var(--font-display);font-weight:600;font-size:1.28cqw;line-height:1.05}
.cell .name{font-size:.76cqw;color:var(--text-secondary);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell .mass{display:none}
.cell-empty{visibility:hidden}
.cell-placeholder{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.76cqw;color:var(--accent);
  border:1px dashed var(--border);cursor:pointer;border-radius:.3cqw;
}
.cell-placeholder.hl-lanthanide{border-color:var(--cat-lanthanide);color:var(--cat-lanthanide);box-shadow:0 0 8px color-mix(in srgb,var(--cat-lanthanide) 25%,transparent)}
.cell-placeholder.hl-actinide{border-color:var(--cat-actinide);color:var(--cat-actinide);box-shadow:0 0 8px color-mix(in srgb,var(--cat-actinide) 25%,transparent)}
.lanthanides-note{
  margin-top:.5cqw;display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:.5cqw;
}
.lanthanides-note .cell .sym{font-size:1.0cqw}
.lanthanides-note .cell .name{font-size:.6cqw}
.periodic-count{
  margin-top:12px;font-family:var(--font-mono);font-size:var(--fs-label);color:var(--text-muted);
}
.periodic-count .periodic-note{color:var(--text-secondary)}

/* ---------- TRENDING ---------- */
.trending{
  margin:28px auto 0;padding:24px 32px;
  border-top:1px solid var(--border);
  max-width:1600px;
}
.trending h3{
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:14px;
}
.trending-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.trend-card{
  background:var(--bg-card);border:1px solid var(--border);
  padding:14px;cursor:pointer;transition:all .12s;display:block;
}
.trend-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.trend-card .sym{font-family:var(--font-display);font-size:var(--fs-stat);font-weight:700;color:var(--accent-bright)}
.trend-card .label{font-size:var(--fs-body);color:var(--text);margin:4px 0}
.trend-card .sub{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--text-secondary)}

/* ---------- SECTION HEADER (list pages) ---------- */
.page-header{
  max-width:1440px;margin:0 auto;padding:28px 32px 12px;width:100%;
}
.page-header h1{font-family:var(--font-display);font-size:var(--fs-hero);font-weight:700;letter-spacing:-.01em}
.page-header p{color:var(--text-secondary);font-size:var(--fs-body-sm);margin-top:4px;max-width:720px}
.page-stats{
  display:flex;gap:24px;margin-top:14px;flex-wrap:wrap;
}
.page-stat{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--text-secondary)}
.page-stat b{color:var(--accent-bright);font-weight:500}

/* ---------- FILTER BAR ---------- */
.filter-bar{
  max-width:1440px;margin:0 auto;padding:0 32px 20px;width:100%;
  display:flex;gap:8px;flex-wrap:wrap;
}
.filter-btn{
  font-family:var(--font-mono);font-size:var(--fs-nav);
  padding:5px 13px;border:1px solid var(--border);
  color:var(--text-secondary);background:var(--bg);
  transition:all .12s;
}
.filter-btn:hover{border-color:var(--border-light);color:var(--text)}
.filter-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- ALLOY CARDS ---------- */
.alloys-grid{
  max-width:1440px;margin:0 auto;padding:0 32px 48px;width:100%;
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.alloy-card{
  background:var(--bg-card);border:1px solid var(--border);
  overflow:hidden;transition:all .12s;cursor:pointer;display:block;
}
.alloy-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.alloy-card .preview{
  height:110px;background:linear-gradient(135deg,#23262a,#191c20);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:1.75rem;font-weight:600;color:var(--accent);
  border-bottom:1px solid var(--border);
}
[data-theme="light"] .alloy-card .preview{background:linear-gradient(135deg,#e8edf1,#dde3e8)}
.alloy-card .body{padding:13px}
.alloy-card .design{font-family:var(--font-display);font-weight:600;font-size:var(--fs-body)}
.alloy-card .name{font-size:var(--fs-body-sm);color:var(--text-secondary);margin-top:2px}
.alloy-card .desc{font-size:var(--fs-nav);color:var(--text-muted);margin-top:8px;line-height:1.55}
.alloy-card .meta{
  display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:var(--fs-mini);color:var(--text-muted);
}
.alloy-card .meta span{border:1px solid var(--border);padding:2px 6px}

/* ---------- METAL DETAIL (new layout) ---------- */
.metal-hero-compact{
  max-width:1440px;margin:0 auto;padding:24px 32px 16px;
  display:flex;align-items:center;gap:24px;width:100%;
}
.ore-wrap{position:relative;flex-shrink:0}
.metal-ore-img{
  width:200px;height:200px;object-fit:cover;
  border:1px solid var(--border);display:block;
  transition:transform .25s ease, box-shadow .25s ease;
  cursor:zoom-in;transform-origin:top left;
}
.ore-placeholder{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:3rem;color:var(--accent);opacity:.4;
  background:var(--bg-card);
}
.metal-ore-img.zoomed{
  /* 点击放大（toggle）：置顶，高于 sticky 导航(100)与全部内容 */
  transform:scale(3);box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:1000;
  position:relative;
}
.ore-chip-overlay{
  position:absolute;bottom:0;left:0;right:0;
  background:rgba(0,0,0,.65);color:#fff;
  padding:6px 10px;display:flex;align-items:baseline;gap:8px;
}
.ore-chip-overlay .sym{font-family:var(--font-display);font-size:1.25rem;font-weight:700;line-height:1}
.ore-chip-overlay .num{font-family:var(--font-mono);font-size:var(--fs-label);color:rgba(255,255,255,.6)}
.metal-title-block h1{
  font-family:var(--font-display);font-size:var(--fs-h1);font-weight:700;line-height:1.1;
}
.metal-title-block h1 .h1-en{color:var(--text-secondary);font-size:var(--fs-body);font-weight:500;margin-left:8px}
.metal-title-block .tagline{font-size:var(--fs-body-sm);color:var(--text-secondary);margin-top:4px}
.metal-title-block .tags{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}

.key-stats{
  position:relative;max-width:1440px;margin:0 auto;padding:20px 32px;
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;width:100%;
}
.key-stats::before,.key-stats::after{
  content:"";position:absolute;left:32px;right:32px;height:1px;background:var(--border-light);
}
.key-stats::before{top:0}
.key-stats::after{bottom:0}
.key-stat{padding:0 20px;border-right:1px solid var(--border-light)}
.key-stat:last-child{border-right:none}
.key-stat .label{
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);
}
.key-stat .value{
  font-family:var(--font-display);font-size:var(--fs-stat);font-weight:600;
  margin-top:4px;color:var(--text);
}
.key-stat .unit{font-size:var(--fs-nav);color:var(--text-secondary);font-weight:400}
.key-stat .value.accent{color:var(--accent-bright)}

/* 原子结构规格条：原子序数 / 原子量 / 价电子数 / 电子排布 */
.atom-info{
  position:relative;max-width:1440px;margin:0 auto;padding:24px 32px 0;width:100%;
  display:flex;gap:32px;flex-wrap:wrap;align-items:flex-start;
}
.atom-info .atom-stat{display:flex;flex-direction:column;gap:4px;min-width:96px}
.atom-info .lbl{
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);
}
.atom-info .val{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:600;color:var(--text)}
.atom-info .val .unit{font-size:var(--fs-label);color:var(--text-secondary);font-weight:400;margin-left:3px}
.atom-info .atom-stat.econf{flex:1 1 300px}
.atom-info .val.mono{font-family:var(--font-mono);font-size:var(--fs-body-sm);font-weight:500;color:var(--accent-bright);letter-spacing:.02em;line-height:1.5}

.metal-main{
  max-width:1440px;margin:0 auto;padding:0 32px 32px;width:100%;
  display:grid;grid-template-columns:1fr 340px;gap:32px;
}
.metal-content{min-width:0}
.metal-sidebar{min-width:0}

.why-block{margin-top:40px;margin-bottom:28px}
.why-block h3{
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:14px;
  padding-bottom:6px;border-bottom:1px solid var(--border);
}
.why-block p{font-size:var(--fs-body-sm);line-height:1.7;color:var(--text)}

.section-block-inner{margin-bottom:28px}
/* 左列首区块与右侧物理性质块顶部对齐（40px）；why-block 存在时不生效（其为首子元素） */
.metal-content .section-block-inner:first-child{margin-top:40px}
.section-block-inner > h3{
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:14px;
  padding-bottom:6px;border-bottom:1px solid var(--border);
}
.section-block-inner > h3 .h3-sub{font-size:var(--fs-mini);color:var(--text-muted);margin-left:8px}

.app-bar-row{
  display:grid;grid-template-columns:140px 1fr 50px;
  align-items:center;gap:12px;padding:5px 0;font-size:var(--fs-body-sm);
}
.app-bar-row .app-name{color:var(--text-secondary)}
.app-bar-row .app-bar-track{height:8px;background:var(--bg-card);overflow:hidden}
.app-bar-row .app-bar-fill{height:100%;background:var(--accent)}
.app-bar-row .app-pct{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--text);text-align:right}
.app-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.app-chip{
  font-family:var(--font-mono);font-size:var(--fs-label);
  padding:5px 14px;background:var(--bg-card);
  border:1px solid var(--border);color:var(--text);
}

.uses-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.uses-col h4{font-family:var(--font-body);font-size:var(--fs-body-sm);font-weight:600;margin-bottom:8px;color:var(--text)}
.uses-col ul{list-style:none;padding:0}
.uses-col li{
  font-size:var(--fs-body-sm);color:var(--text-secondary);padding:4px 0;
  padding-left:14px;position:relative;line-height:1.5;
}
.uses-col li::before{
  content:"";position:absolute;left:0;top:11px;
  width:6px;height:1px;background:var(--border-light);
}

.side-block{
  background:var(--bg-card);border:1px solid var(--border);
  padding:16px 18px;margin-bottom:12px;
}
.metal-sidebar .side-block:first-child{margin-top:40px}
.side-block h4{
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;
}
.side-block h4 .side-sub{
  font-family:var(--font-body);font-size:var(--fs-mini);letter-spacing:.04em;
  text-transform:none;color:var(--text-secondary);margin-left:6px;
}
.side-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:4px 0;font-size:var(--fs-body-sm);
}
.side-row .k{color:var(--text-secondary)}
.side-row .v{font-family:var(--font-mono);color:var(--text);font-size:var(--fs-nav)}
.side-row .v.accent{color:var(--accent-bright)}

.tag{
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.05em;
  padding:3px 10px;border:1px solid var(--border-light);
  color:var(--text-secondary);text-transform:uppercase;white-space:nowrap;
}
.tag.accent{color:var(--accent-bright);border-color:var(--accent)}
.tag.green{color:var(--green);border-color:var(--green)}
.tag.red{color:var(--red);border-color:var(--red)}
.tag.amber{color:var(--amber);border-color:var(--amber)}

.section-block-inner table{width:100%;table-layout:fixed;border-collapse:collapse}
.section-block-inner th,.section-block-inner td{
  padding:10px 12px;font-size:var(--fs-body-sm);text-align:left;border-bottom:1px solid var(--border-light);
}
.section-block-inner thead th{
  font-size:var(--fs-label);font-weight:600;color:var(--text-muted);border-bottom:1px solid var(--border);
}
.section-block-inner tbody tr{transition:background .12s}
.section-block-inner tbody tr:hover{background:var(--bg-card)}
.section-block-inner td.num{font-family:var(--font-mono);text-align:right}

/* ---------- TABLES ---------- */
.section-block{max-width:1440px;margin:0 auto 36px;padding:0 32px;width:100%}
.section-block h2{
  font-family:var(--font-display);font-size:var(--fs-h2);margin-bottom:14px;letter-spacing:-.01em;
}
/* 全宽区块标题统一为 h3 小标题（与应用/矿山表同款，全站字体体系一致） */
.section-block h3{
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:14px;
  padding-bottom:6px;border-bottom:1px solid var(--border);
}
.section-block h3 .h2-sub{font-family:var(--font-mono);font-size:var(--fs-mini);color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;margin-left:8px}
.section-block h2 .h2-sub{font-family:var(--font-mono);font-size:var(--fs-mini);color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;margin-left:10px}
/* 应用详解小节标题（正文内的二级小标题） */
.section-block h3.apps-sub-h{
  font-family:var(--font-mono);font-size:var(--fs-body);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text);margin:20px 0 4px;
}
/* 应用详解收进左列：去掉 section-block 全宽内边距与居中，在列内撑满 */
#appsDetail{width:100%;max-width:none;padding:0;margin:0 0 28px}
#appsDetail .prose{max-width:100%}
#appsDetail .apps-sub-h{margin-top:20px}
/* 长文正文 */
.prose{
  font-size:var(--fs-body);line-height:1.9;color:var(--text);
  max-width:860px;margin:0 0 12px;
}
table{width:100%;border-collapse:collapse;font-size:var(--fs-body-sm)}
th{
  text-align:left;font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);
  padding:9px 12px;border-bottom:1px solid var(--border-light);white-space:nowrap;
}
td{padding:9px 12px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:top}
td.num{font-family:var(--font-mono)}
tr:hover td{background:var(--bg-hover)}
.table-scroll{overflow-x:auto}

/* ---------- COMPARE ---------- */
.compare-bar{
  max-width:1440px;margin:0 auto;padding:0 32px 20px;width:100%;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.compare-bar .add-btn{
  font-family:var(--font-mono);font-size:var(--fs-nav);
  padding:6px 14px;border:1px dashed var(--border-light);
  color:var(--text-secondary);transition:all .12s;
}
.compare-bar .add-btn:hover{border-color:var(--accent);color:var(--accent-bright)}
.compare-bar .hint{
  font-family:var(--font-mono);font-size:var(--fs-label);color:var(--text-muted);
}
.compare-pick{
  position:absolute;top:calc(100% + 4px);left:0;z-index:120;
  background:var(--bg-elevated);border:1px solid var(--border);
  max-height:280px;overflow-y:auto;width:240px;display:none;
}
.compare-pick.open{display:block}
.compare-pick .opt{padding:6px 12px;font-size:var(--fs-body-sm);cursor:pointer;border-bottom:1px solid var(--border)}
.compare-pick .opt:hover{background:var(--bg-hover)}
.compare-pick .opt .sym{font-family:var(--font-mono);color:var(--accent-bright);margin-right:8px}
.compare-table-wrap{
  max-width:1440px;margin:0 auto;padding:0 32px 48px;width:100%;
  overflow-x:auto;
}
.compare-table{min-width:760px}
.compare-table td,.compare-table th{padding:10px 14px}
.compare-table td.blank{color:var(--text-muted);font-style:italic}
.compare-table .metric-cell{white-space:nowrap}
.compare-head-sym{font-family:var(--font-display);font-size:var(--fs-stat);color:var(--accent-bright)}
.compare-head-name{font-family:var(--font-body);font-size:var(--fs-body-sm);text-transform:none;letter-spacing:0}
.compare-head-en{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--text-muted)}
.compare-remove-btn{padding:2px 8px;font-size:var(--fs-mini)}
.compare-empty{
  max-width:1440px;margin:0 auto;padding:40px 32px;width:100%;
  text-align:center;color:var(--text-muted);font-size:var(--fs-body-sm);
  border:1px dashed var(--border);
}

/* ====== 对比页功能增强 ====== */
.compare-bar{position:relative}
.compare-bar .count-indicator{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--text-muted)}
.compare-bar .compare-clear-btn{margin-left:auto}

/* 预设对比组 */
.compare-presets{
  max-width:1440px;margin:0 auto;padding:0 32px 24px;width:100%;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.compare-presets .presets-label{
  font-family:var(--font-mono);font-size:var(--fs-label);color:var(--text-muted);
}
.compare-presets .preset-btn{font-size:var(--fs-body-sm)}

/* 表头增强：分类色块 + 原子序数/族/周期 */
.compare-col{
  background:var(--bg-elevated);border-bottom:2px solid var(--cat-color,var(--accent));
  text-align:center;padding:16px 14px 12px;
}
.compare-col .compare-head-cat-bar{height:3px;width:100%;border-radius:1px;margin-bottom:8px;opacity:.85}
.compare-col .compare-head-sym{font-family:var(--font-display);font-size:var(--fs-stat);color:var(--accent-bright);letter-spacing:.02em}
.compare-col .compare-head-name{font-family:var(--font-body);font-size:var(--fs-body-sm);font-weight:500;margin-top:2px}
.compare-col .compare-head-en{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--text-muted);margin-top:1px}
.compare-col .compare-head-cat{font-family:var(--font-mono);font-size:var(--fs-mini);color:var(--text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.06em}
.compare-col .compare-head-nums{font-family:var(--font-mono);font-size:var(--fs-mini);color:var(--text-muted);margin-top:6px}
.compare-col .compare-head-nums .sep{margin:0 4px;opacity:.5}
.compare-col .compare-num{font-family:var(--font-mono);color:var(--text-secondary)}

/* 表格主体 */
.compare-table-wrap{overflow-x:auto;scrollbar-width:thin}
.compare-table{
  border-collapse:separate;border-spacing:0;
  table-layout:fixed;width:100%;min-width:820px;
}
.compare-table col.col-metric{width:140px}
.compare-table col.col-metal{width:auto}
.compare-table thead th{background:var(--bg-elevated);font-weight:normal}
.compare-table tbody tr:hover td{background:var(--bg-hover)}
.compare-table td,.compare-table th{padding:11px 14px;border-bottom:1px solid var(--border-light);border-right:1px solid var(--border-light);text-align:left}
.compare-table td:last-child,.compare-table th:last-child{border-right:none}
.compare-table td.blank{color:var(--text-muted);font-style:italic}
.compare-table td.txt{text-align:left;font-size:var(--fs-body-sm);line-height:1.5;max-width:220px}
.compare-table .metric-cell{white-space:nowrap;text-align:left;font-family:var(--font-mono);font-size:var(--fs-label);color:var(--text-secondary);background:var(--bg)}
.compare-table tbody .metric-cell:hover{color:var(--text);font-weight:500}

/* sticky 第一列（指标名） */
.metric-sticky{
  position:sticky;left:0;z-index:2;
  background:var(--bg);
  box-shadow:1px 0 0 0 var(--border-light);
}
.compare-table thead .metric-sticky{background:var(--bg-elevated);z-index:3}

/* 分组行 */
.compare-table .group-row td{
  padding:14px 14px 8px;border-bottom:none;background:var(--bg);
}
.compare-table .group-row .group-label{
  font-family:var(--font-display);font-size:var(--fs-body);font-weight:600;
  color:var(--accent-bright);letter-spacing:.02em;
  padding-left:12px;border-left:3px solid var(--accent);
  position:sticky;left:0;z-index:2;
}

/* 数值类 + 差值高亮 */
.compare-table td.num{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--fs-body);color:var(--text);
  transition:background .15s,color .15s;
}
.compare-table td.h-max{color:var(--h-max,var(--ok,var(--accent-bright)));font-weight:600}
.compare-table td.h-min{color:var(--h-min,var(--warn,#e8a13a));font-weight:500}

/* bool 关键矿产 */
.compare-table td.bool-yes{
  font-family:var(--font-mono);color:var(--accent-bright);font-weight:500;
}
.compare-table td.bool-no{color:var(--text-muted);font-style:italic}

/* 选择器分组 */
.compare-pick{width:300px;max-height:380px}
.compare-pick .pick-group{border-bottom:1px solid var(--border-light)}
.compare-pick .pick-group:last-child{border-bottom:none}
.compare-pick .pick-group-header{
  padding:5px 12px;font-family:var(--font-mono);font-size:var(--fs-mini);
  color:var(--text-muted);background:var(--bg-elevated);
  display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.08em;
}
.compare-pick .pick-group-sym{
  background:var(--cat-color,var(--accent));color:#fff;
  padding:1px 6px;border-radius:2px;font-size:10px;letter-spacing:0;
}
.compare-pick .pick-group-name{flex:1}
.compare-pick .pick-group-count{font-family:var(--font-mono);color:var(--text-muted)}
.compare-pick .opt{
  padding:6px 12px;cursor:pointer;display:flex;align-items:center;gap:8px;
  border-bottom:none;transition:background .08s;
}
.compare-pick .opt:hover{background:var(--bg-hover)}
.compare-pick .opt .sym{font-family:var(--font-mono);color:var(--accent-bright);min-width:28px;font-size:var(--fs-label)}
.compare-pick .opt .opt-name{flex:1;font-size:var(--fs-body-sm)}
.compare-pick .opt .opt-alt{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--text-muted)}
.compare-pick .pick-group-header + .opt{border-top:1px solid var(--border-light)}

/* 移动端 */
@media(max-width:1100px){
  .compare-col{padding:14px 10px}
  .compare-col .compare-head-sym{font-size:calc(var(--fs-stat)*.85)}
  .compare-col .compare-head-name{font-size:var(--fs-nav)}
  .compare-col .compare-head-nums{display:none}
  .compare-presets{padding-left:16px;padding-right:16px}
  .compare-bar{padding-left:16px;padding-right:16px}
}

/* ---------- FOOTER ---------- */
.footer{
  border-top:1px solid var(--border);
  padding:20px 32px;margin-top:auto;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:var(--fs-label);color:var(--text-muted);
  max-width:1600px;margin-left:auto;margin-right:auto;width:100%;
}
.footer a{color:var(--text-secondary)}
.footer a:hover{color:var(--accent-bright)}
.footer a.footer-ext{
  text-decoration:underline;
  text-decoration-color:transparent;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .15s ease,text-decoration-color .15s ease;
}
.footer a.footer-ext:hover{color:var(--accent-bright);text-decoration-color:currentColor}
.footer a:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px;border-radius:2px}
/* 可抓取的语言入口 + 更新时间标注（SEO：语言页内部链接；GEO：时间维度） */
.footer-langs{display:flex;gap:12px;flex-wrap:wrap;align-items:center;width:100%}
.footer-langs a[aria-current="true"]{color:var(--text-primary);text-decoration:underline;text-underline-offset:3px}
.footer-updated{color:var(--text-muted);width:100%}

/* ---------- FAQ（长尾问答区块） ---------- */
.faq-block{margin-top:8px}
.faq-block .faq-note{font-size:var(--fs-label);color:var(--text-muted);margin:0 0 12px}
.faq-list{display:flex;flex-direction:column;gap:4px}
.faq-item{border:1px solid var(--border);border-radius:6px;background:var(--bg-elev,transparent)}
.faq-item > summary{
  cursor:pointer;padding:10px 14px;font-weight:600;color:var(--text-primary);
  list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
}
.faq-item > summary::-webkit-details-marker{display:none}
.faq-item > summary::after{content:"+";color:var(--text-muted);flex:0 0 auto;font-weight:400}
.faq-item[open] > summary::after{content:"–"}
.faq-item > summary:focus-visible{outline:2px solid var(--accent-bright);outline-offset:-2px;border-radius:6px}
.faq-answer{padding:0 14px 12px;color:var(--text-secondary);line-height:1.6}

/* ---------- ACCESSIBILITY ---------- */
.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;
}

/* ---------- EMPTY STATE ---------- */
.empty-state{
  max-width:1440px;margin:0 auto;padding:60px 32px;width:100%;
  text-align:center;color:var(--text-muted);font-size:var(--fs-body-sm);
}
.empty-state .big{font-family:var(--font-display);font-size:3rem;color:var(--border-light);margin-bottom:12px}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1100px){
  .home-layout{flex-direction:column}
  .sidebar{width:100%;position:static;display:flex;flex-wrap:wrap;gap:8px}
  .sidebar h3{display:none}
  .filter-group{flex-direction:row;flex-wrap:wrap;margin-bottom:0}
  .filter-chip{border-left:none;border:1px solid var(--border);border-radius:2px}
  .metal-main{grid-template-columns:1fr;gap:20px}
  .key-stats{grid-template-columns:repeat(2,1fr)}
  .uses-grid{grid-template-columns:1fr}
  .metal-ore-img{width:100px;height:100px}
  .app-bar-row{grid-template-columns:100px 1fr 40px}
  .alloys-grid{grid-template-columns:repeat(2,1fr)}
  .trending-grid{grid-template-columns:repeat(2,1fr)}
  .nav-menu{display:none}
  .nav-hamburger{display:flex}
}
@media(max-width:640px){
  .container{padding:20px 16px}
  .home-layout,.trending{padding:16px}
  .crumbs{padding:14px 16px 0}
  .page-header,.filter-bar,.data-grid,.section-block,.compare-bar,.compare-table-wrap{padding-left:16px;padding-right:16px}
  .alloys-grid{grid-template-columns:1fr;padding-left:16px;padding-right:16px}
  .trending-grid{grid-template-columns:1fr}
  .nav{padding:0 16px;gap:12px}
  .nav-search{max-width:100%}
  .nav-menu{display:none}
  .periodic-grid .cell .name{display:none}
  .periodic-grid .cell .mass{display:none}
}

/* 左列无数据时的占位提示 */
.empty-note{
  border:1px dashed var(--border);border-radius:var(--radius);
  padding:28px 20px;text-align:center;
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.08em;
  color:var(--text-muted);text-transform:uppercase;
}
/* 元素详情页 utility class */
.electron-config{font-size:var(--fs-nav);word-break:break-all}
.data-source-note{font-size:var(--fs-label)}
.chart-box{width:100%;height:230px}
.pb-40{padding-bottom:40px}
.pb-48{padding-bottom:48px}
.pb-8{padding-bottom:8px}
/* 元素详情页数据表列宽 */
.section-block-inner col.col-20{width:20%}
.section-block-inner col.col-12{width:12%}
.section-block-inner col.col-16{width:16%}
.section-block-inner col.col-12b{width:12%}
.section-block-inner col.col-24{width:24%}