/* ============================================================
   通用基础 —— 全部用 #ptApp 作用域，隔离 main.css 同名选择器污染
   ============================================================ */
/* 中和 main.css 的 body flex column / font / line-height —— 让布局跟 demo 一致 */
body.theme-a,body.theme-b,body.theme-c{
  display:block !important;flex-direction:initial !important;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif !important;
  font-size:16px !important;line-height:1.4 !important;
}
html:has(body.theme-a),html:has(body.theme-b),html:has(body.theme-c){font-size:16px}

#ptApp *{box-sizing:border-box;margin:0;padding:0}
#ptApp{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  line-height:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background .35s,color .35s;
}
body.theme-a,body.theme-b,body.theme-c{transition:background .35s,color .35s}

/* 整屏布局：内容垂直分布居中，靠满视口 */
#ptApp.container{
  max-width:1280px;margin:0 auto;padding:20px 18px 34px;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;gap:10px;box-sizing:border-box;
  flex:none;width:auto;
}

/* 顶部：标题 + 风格切换 */
#ptApp .demo-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
#ptApp .demo-head h1{font-size:23px;font-weight:800;letter-spacing:.02em}
#ptApp .demo-head .sub{font-size:12.5px;opacity:.65;margin-top:3px}
#ptApp .switcher{display:inline-flex;border-radius:999px;padding:4px;gap:4px}
#ptApp .switcher button{
  border:0;background:transparent;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:13px;font-weight:700;padding:8px 16px;border-radius:999px;cursor:pointer;transition:all .2s;color:inherit;
}
#ptApp .switcher button.on{}

#ptApp .legend{display:flex;flex-wrap:wrap;gap:7px 14px;justify-content:center;margin:6px 0 16px}
#ptApp .legend .it{display:inline-flex;align-items:center;gap:6px;font-size:12px;opacity:.85}
#ptApp .legend .sw{width:13px;height:13px;border-radius:3px;display:inline-block}
#ptApp .legend .swBox{width:13px;height:13px;border-radius:4px;display:inline-block;border:1px solid rgba(128,128,128,.4)}

/* 周期表：cqw 容器单位 → 符号/字体/格间距/格子高度全部按表宽等比例缩放 */
#ptApp .pt-wrap{position:relative;width:100%;container-type:inline-size}
#ptApp .p-grid{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));grid-template-rows:repeat(7,5.28cqw);gap:.5cqw}
#ptApp .f-note{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));grid-template-rows:repeat(2,5.28cqw);gap:.5cqw;margin-top:.5cqw}
#ptApp .cell-placeholder{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-width:0;
  padding:.15cqw .1cqw;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:.76cqw;opacity:.55;line-height:1.1;gap:.24cqw;overflow:hidden;
  aspect-ratio:auto;border:none solid transparent;border-width:0;color:inherit;cursor:default;background:none;
}
#ptApp .cell-placeholder .n{position:absolute;top:.35cqw;left:.5cqw;font-size:.74cqw;opacity:.7;line-height:1}
#ptApp .cell-placeholder .sym{font-size:1.28cqw;line-height:1.05;visibility:hidden}
#ptApp .cell-placeholder .sy{font-size:.76cqw;line-height:1.1;opacity:.9}

/* 底部全屏按钮 */
#ptApp .fs-bar{display:flex;justify-content:center;margin-top:40px}
#ptApp .fs-btn{
  display:inline-flex;align-items:center;gap:7px;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:13px;font-weight:700;padding:9px 20px;border-radius:999px;border:1px solid currentColor;
  cursor:pointer;background:transparent;opacity:.8;transition:opacity .2s;color:inherit;
}
#ptApp .fs-btn:hover{opacity:1}
#ptApp .fs-btn svg{width:15px;height:15px}
#ptApp.theme-a .fs-btn{color:#eef1f8;border-color:#4a5168;background:rgba(123,160,232,.10)}
#ptApp.theme-a .fs-btn:hover{border-color:#7ba0e8;background:rgba(123,160,232,.22)}
#ptApp.theme-b .fs-btn{color:#21324a;border-color:#b6c3d4;background:rgba(255,255,255,.55)}
#ptApp.theme-b .fs-btn:hover{border-color:#6783a6;background:#fff}
#ptApp.theme-c .fs-btn{color:#39d392;border-color:rgba(57,211,146,.5);background:rgba(57,211,146,.08)}
#ptApp.theme-c .fs-btn:hover{border-color:#39d392;background:rgba(57,211,146,.16)}

/* 全屏态 */
#ptApp .pt-wrap:fullscreen{
  width:100vw;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  box-sizing:border-box;padding:2vh max(28px,4vw) 2vh max(28px,4vw);overflow:auto;
}
#ptApp .pt-wrap:fullscreen .p-grid,#ptApp .pt-wrap:fullscreen .f-note{width:100%}
#ptApp .pt-wrap:fullscreen .scale-note,#ptApp .pt-wrap:fullscreen .cell-placeholder{box-sizing:border-box}
#ptApp.theme-a .pt-wrap:fullscreen{background:#0a0b0f}
#ptApp.theme-b .pt-wrap:fullscreen{background:#eef3fb}
#ptApp.theme-c .pt-wrap:fullscreen{background:#0d1117}
#ptApp .fs-exit{
  display:none;position:fixed;top:14px;right:14px;z-index:99;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:13px;font-weight:700;padding:9px 16px;border-radius:999px;border:1px solid currentColor;
  background:transparent;cursor:pointer;opacity:.85;color:inherit;
}
#ptApp .pt-wrap:fullscreen .fs-exit{display:block}
#ptApp.theme-a .fs-exit{color:#e7e9ef}
#ptApp.theme-b .fs-exit{color:#31404f}
#ptApp.theme-c .fs-exit{color:#d7deeb}

/* ============================================================
   元素格子核心样式（覆盖 main.css 首页 .cell 同名类）
   ============================================================ */
#ptApp .cell{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;user-select:none;
  min-width:0;height:100%;border-radius:.6cqw;text-align:center;gap:.24cqw;padding:.15cqw .1cqw;overflow:hidden;
  transition:transform .13s,box-shadow .13s,border-color .13s,background .2s,color .2s;
  aspect-ratio:auto;
}
#ptApp .cell .n{
  position:absolute;top:.35cqw;left:.5cqw;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:.74cqw;opacity:.7;line-height:1;
}
#ptApp .cell .sym{font-family:inherit;font-weight:800;font-size:1.28cqw;line-height:1.05}
#ptApp .cell .nm{
  font-size:.76cqw;line-height:1.1;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
}

/* 贴边格悬停向内侧放大 */
#ptApp .cell.lec:hover{transform-origin:left center}
#ptApp .cell.rec:hover{transform-origin:right center}
#ptApp .cell.tec:hover{transform-origin:center top}
#ptApp .cell.bec:hover{transform-origin:center bottom}
#ptApp .cell.tec.lec:hover{transform-origin:left top}
#ptApp .cell.tec.rec:hover{transform-origin:right top}
#ptApp .cell.bec.lec:hover{transform-origin:left bottom}
#ptApp .cell.bec.rec:hover{transform-origin:right bottom}

/* ============================================================
   设计 A —— 熔炉 · 深色矿野
   ============================================================ */
body.theme-a{background:#0a0b0f;color:#e7e9ef}
#ptApp.theme-a .switcher{background:#171927;border:1px solid #262a3a}
#ptApp.theme-a .switcher button{color:#8b91a6}
#ptApp.theme-a .switcher button.on{background:#7ba0e8;color:#0a0b0f}
#ptApp.theme-a .demo-head h1{color:#e7e9ef}

#ptApp.theme-a .cell{background:color-mix(in srgb,var(--cc) 13%,#171927);border:1px solid color-mix(in srgb,var(--cc) 42%,#2a2e40)}
#ptApp.theme-a .cell:hover{transform:scale(1.09);box-shadow:0 0 0 1px var(--cc),0 0 22px color-mix(in srgb,var(--cc) 55%,transparent);z-index:5;background:color-mix(in srgb,var(--cc) 30%,#171927)}
#ptApp.theme-a .cell.lec:hover,#ptApp.theme-a .cell.rec:hover,
#ptApp.theme-a .cell.tec:hover,#ptApp.theme-a .cell.bec:hover{transform:scale(1.06)}

/* ============================================================
   设计 B —— 玻璃实验室 · 浅色教育马卡龙
   ============================================================ */
body.theme-b{background:linear-gradient(150deg,#eef3fb 0%,#f6f1ec 50%,#eef6f1 100%);color:#31404f}
#ptApp.theme-b .switcher{background:#ffffffd9;border:1px solid #e3d7c8;box-shadow:0 4px 14px rgba(120,110,90,.12)}
#ptApp.theme-b .switcher button{color:#6b7582}
#ptApp.theme-b .switcher button.on{background:linear-gradient(120deg,#6aa8ff,#51d0b5);color:#fff;box-shadow:0 4px 12px rgba(100,170,255,.35)}
#ptApp.theme-b .demo-head h1{color:#2a3a4c}
#ptApp.theme-b .cell{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);box-shadow:0 3px 10px rgba(120,120,150,.10);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#ptApp.theme-b .cell .sym{color:var(--cc);-webkit-text-fill-color:currentColor}
#ptApp.theme-b .cell:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 10px 26px color-mix(in srgb,var(--cc) 42%,rgba(120,110,140,.22)),0 0 0 1px color-mix(in srgb,var(--cc) 60%,rgba(255,255,255,.6));background:#ffffff;z-index:5}
#ptApp.theme-b .legend .swBox{background:rgba(255,255,255,.7);border-color:#cfcfdf}

/* ============================================================
   设计 C —— 数据终端 · 单色密集
   ============================================================ */
body.theme-c{background:#0d1017;color:#bfc8d6}
#ptApp.theme-c .switcher{background:#151b26;border:1px solid #232c3b}
#ptApp.theme-c .switcher button{color:#7d8894}
#ptApp.theme-c .switcher button.on{background:#38e1cf;color:#08121a}
#ptApp.theme-c .demo-head h1{color:#d7deeb}
#ptApp.theme-c .cell{background:transparent;border:1px solid #232b38;border-radius:.6cqw}
#ptApp.theme-c .cell .sym{color:#eef2f7}
#ptApp.theme-c .cell:hover{border-color:#38e1cf;background:rgba(56,225,207,.08);box-shadow:0 0 0 1px #38e1cf inset}
#ptApp.theme-c .legend .swBox{border-color:#2b3546}

/* 分类 → 主题色映射（各主题独立 → 每格 --cc 随主题切换） */
#ptApp.theme-a .cat-alkali_metal{--cc:#e2725f}  #ptApp.theme-a .cat-alkaline_earth{--cc:#d9a24d}
#ptApp.theme-a .cat-transition{--cc:#7fa3ba}    #ptApp.theme-a .cat-post_transition{--cc:#bd9260}
#ptApp.theme-a .cat-lanthanide{--cc:#c05c9e}    #ptApp.theme-a .cat-actinide{--cc:#ab51a4}
#ptApp.theme-a .cat-metalloid{--cc:#3fae8f}     #ptApp.theme-a .cat-nonmetal{--cc:#39bfc9}
#ptApp.theme-a .cat-noble_gas{--cc:#9b7fe0}     #ptApp.theme-a .cat-halogen{--cc:#4f86e8}

#ptApp.theme-b .cat-alkali_metal{--cc:#e76f51}  #ptApp.theme-b .cat-alkaline_earth{--cc:#f4a261}
#ptApp.theme-b .cat-transition{--cc:#4a8fe9}    #ptApp.theme-b .cat-post_transition{--cc:#e07a5f}
#ptApp.theme-b .cat-lanthanide{--cc:#9b5de5}    #ptApp.theme-b .cat-actinide{--cc:#7c5cbf}
#ptApp.theme-b .cat-metalloid{--cc:#2a9d8f}     #ptApp.theme-b .cat-nonmetal{--cc:#43aa8b}
#ptApp.theme-b .cat-noble_gas{--cc:#6a4caf}     #ptApp.theme-b .cat-halogen{--cc:#3aa0b7}

#ptApp.theme-c .cat-alkali_metal{--cc:#e2725f}  #ptApp.theme-c .cat-alkaline_earth{--cc:#efbe5c}
#ptApp.theme-c .cat-transition{--cc:#7fb3e0}    #ptApp.theme-c .cat-post_transition{--cc:#cf9a6a}
#ptApp.theme-c .cat-lanthanide{--cc:#c97bb0}    #ptApp.theme-c .cat-actinide{--cc:#a98add}
#ptApp.theme-c .cat-metalloid{--cc:#4fc7a3}     #ptApp.theme-c .cat-nonmetal{--cc:#4ec9cf}
#ptApp.theme-c .cat-noble_gas{--cc:#a98add}     #ptApp.theme-c .cat-halogen{--cc:#5f9ce0}

/* 主题 A：符号随分类着色 */
#ptApp.theme-a .cell .sym{color:var(--cc)}

/* 图例色块（随主题） */
#ptApp.theme-a .lk-alkali_metal{--cc:#e2725f}#ptApp.theme-a .lk-alkaline_earth{--cc:#d9a24d}#ptApp.theme-a .lk-transition{--cc:#7fa3ba}
#ptApp.theme-a .lk-post_transition{--cc:#bd9260}#ptApp.theme-a .lk-lanthanide{--cc:#c05c9e}#ptApp.theme-a .lk-actinide{--cc:#ab51a4}
#ptApp.theme-a .lk-metalloid{--cc:#3fae8f}#ptApp.theme-a .lk-nonmetal{--cc:#39bfc9}#ptApp.theme-a .lk-noble_gas{--cc:#9b7fe0}#ptApp.theme-a .lk-halogen{--cc:#4f86e8}
#ptApp.theme-b .lk-alkali_metal{--cc:#e76f51}#ptApp.theme-b .lk-alkaline_earth{--cc:#f4a261}#ptApp.theme-b .lk-transition{--cc:#4a8fe9}
#ptApp.theme-b .lk-post_transition{--cc:#e07a5f}#ptApp.theme-b .lk-lanthanide{--cc:#9b5de5}#ptApp.theme-b .lk-actinide{--cc:#7c5cbf}
#ptApp.theme-b .lk-metalloid{--cc:#2a9d8f}#ptApp.theme-b .lk-nonmetal{--cc:#43aa8b}#ptApp.theme-b .lk-noble_gas{--cc:#6a4caf}#ptApp.theme-b .lk-halogen{--cc:#3aa0b7}
#ptApp.theme-c .lk-alkali_metal{--cc:#e2725f}#ptApp.theme-c .lk-alkaline_earth{--cc:#efbe5c}#ptApp.theme-c .lk-transition{--cc:#7fb3e0}
#ptApp.theme-c .lk-post_transition{--cc:#cf9a6a}#ptApp.theme-c .lk-lanthanide{--cc:#c97bb0}#ptApp.theme-c .lk-actinide{--cc:#a98add}
#ptApp.theme-c .lk-metalloid{--cc:#4fc7a3}#ptApp.theme-c .lk-nonmetal{--cc:#4ec9cf}#ptApp.theme-c .lk-noble_gas{--cc:#a98add}#ptApp.theme-c .lk-halogen{--cc:#5f9ce0}
#ptApp .legend .sw{width:13px;height:13px;border-radius:3px;background:var(--cc,#777);display:inline-block}

/* ============================================================
   详情面板（随主题出色） —— modalOverlay 在 #ptApp 内部
   ============================================================ */
#ptApp .md-card{
  background:#141722;color:#e6eaf1;width:min(780px,96vw);max-height:88vh;overflow:auto;
  border-radius:16px;position:relative;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.5);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
}
#ptApp.theme-b .md-card{background:#ffffff;color:#2a3a4c;border:1px solid #eee;box-shadow:0 30px 70px rgba(90,90,110,.28)}
#ptApp.theme-c .md-card{background:#0d1017;color:#cdd6e4;border:1px solid #232c3b;border-radius:6px}
#ptApp .md-close{
  position:absolute;top:14px;right:16px;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(128,128,128,.4);background:transparent;color:inherit;
  cursor:pointer;font-size:13px;line-height:1;
}
#ptApp .md-close:hover{background:rgba(128,128,128,.18)}
#ptApp .md-body{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
#ptApp .md-left{flex:0 0 150px;display:flex;flex-direction:column;gap:10px;align-items:center}
#ptApp .md-img{width:150px;height:150px;object-fit:cover;border-radius:12px;background:#222}
#ptApp.theme-b .md-img{background:#f0f1f5}
#ptApp .md-hero{display:flex;gap:10px;align-items:baseline}
#ptApp .md-sym{font-size:46px;font-weight:800;line-height:1}
#ptApp .md-z{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;opacity:.55;font-size:15px}
#ptApp .md-right{flex:1;min-width:240px}
#ptApp .md-right h2{font-size:26px;margin-bottom:2px}
#ptApp .md-en{font-weight:400;opacity:.6;font-size:16px}
#ptApp .md-cat{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:12.5px;opacity:.6;margin-bottom:12px}
#ptApp .md-sum{font-size:14px;line-height:1.65;opacity:.9}
#ptApp .md-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:9px;margin-top:20px}
#ptApp .md-stats .st{background:rgba(128,140,160,.08);border:1px solid rgba(128,140,160,.18);border-radius:9px;padding:9px 12px}
#ptApp .md-stats .st span{display:block;font-size:11px;opacity:.6;margin-bottom:3px}
#ptApp .md-stats .st b{font-size:13.5px;font-weight:600;word-break:break-word}
#ptApp.theme-b .md-stats .st{background:#f4f6fb;border-color:#e5e7f0}
#ptApp .md-hist{margin-top:18px;border-top:1px solid rgba(128,140,160,.22);padding-top:14px}
#ptApp .md-hist b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:11px;letter-spacing:.12em;opacity:.6}
#ptApp .md-hist p{font-size:13.5px;line-height:1.7;margin-top:6px;opacity:.9}
#ptApp .md-facts{margin-top:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
#ptApp .ft h4{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:11px;letter-spacing:.14em;opacity:.85;margin-bottom:8px}
#ptApp .ft-grid{display:flex;flex-direction:column;border:1px solid rgba(128,140,160,.18);border-radius:10px;overflow:hidden}
#ptApp .fr{display:grid;grid-template-columns:112px 1fr;gap:10px;font-size:13px;padding:8px 12px}
#ptApp .fr:nth-child(odd){background:rgba(128,140,160,.06)}
#ptApp .fl{opacity:.6;font-size:12px}
#ptApp .fv{font-weight:500;word-break:break-word;line-height:1.5}
#ptApp .md-block{margin-top:18px;border-top:1px solid rgba(128,140,160,.22);padding-top:14px}
#ptApp .md-block h4{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:11px;letter-spacing:.14em;opacity:.6}
#ptApp .md-block p{font-size:13.5px;line-height:1.7;margin-top:6px;opacity:.92}
#ptApp.theme-b .ft-grid{border-color:#e5e7f0}
#ptApp.theme-b .fr:nth-child(odd){background:#f5f7fc}
#ptApp.theme-b .md-block{border-color:#e5e7f0}
@media (max-width:520px){#ptApp .md-body{flex-direction:column}#ptApp .md-left{flex-direction:row;align-items:center;gap:14px}}

/* ============ 自适应 ============ */
@media (max-width:900px){
  #ptApp.container{padding:14px 10px 40px}
  #ptApp .demo-head{flex-direction:column;align-items:stretch;gap:12px}
  #ptApp .switcher{width:100%}
  #ptApp .switcher button{flex:1;text-align:center;padding:9px 6px}
}
@media (max-width:520px){
  #ptApp .tip{font-size:11px}
  #ptApp .md-card{padding:16px;width:min(92vw,560px)}
  #ptApp .md-img{width:96px;height:96px}
  #ptApp .md-sym{font-size:34px}
  #ptApp .md-right h2{font-size:22px}
  #ptApp .md-facts{grid-template-columns:1fr}
}

/* ============================================================
   页头/页脚配色随周期表主题自适应
   ============================================================ */
body.theme-a .nav,
body.theme-b .nav,
body.theme-c .nav{
  transition:background-color .35s ease,border-color .35s ease,color .35s ease;
}

/* A · 熔炉/深色：与站点默认深色一致 */
body.theme-a .nav{
  --nav-bg:rgba(10,11,15,.92);
  --border:#272b40;--border-light:#383d56;
  --text:#e9ebf3;--text-secondary:#949aaf;--text-muted:#5c6177;
  --bg-elevated:#11131b;--bg-hover:#1e2030;
  --accent:#7ba0e8;--accent-bright:#a9c4ff;
}

/* B · 玻璃/浅色 */
body.theme-b .nav{
  --nav-bg:rgba(255,255,255,.80);
  --border:#e3d7c8;--border-light:#efe7db;
  --text:#31404f;--text-secondary:#6b7582;--text-muted:#9aa6b4;
  --bg-elevated:rgba(255,255,255,.72);--bg-hover:#eef1f8;
  --accent:#4a8fe9;--accent-bright:#2a5aa8;
}
body.theme-b .search-results{box-shadow:0 8px 24px rgba(80,90,110,.14)}
body.theme-b .footer{
  --border:#e3d7c8;--text-muted:#9aa6b4;--text-secondary:#6b7582;--accent-bright:#2a5aa8;
}

/* C · 终端/密集 */
body.theme-c .nav{
  --nav-bg:rgba(13,16,23,.94);
  --border:#232c3b;--border-light:#2b3546;
  --text:#bfc8d6;--text-secondary:#7d8894;--text-muted:#5a6572;
  --bg-elevated:#151b26;--bg-hover:#1a2230;
  --accent:#38e1cf;--accent-bright:#38e1cf;
}
body.theme-c .footer{
  --border:#232c3b;--text-muted:#5a6572;--text-secondary:#7d8894;--accent-bright:#38e1cf;
}