/* 元素周期表：工具栏 + 图例 + 18 列网格 + 元素详情 */
.pt-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.625rem}
.pt-search{flex:0 1 24rem;min-width:12rem}
.pt-legend{display:flex;flex-wrap:wrap;gap:.375rem;margin-bottom:.75rem}
.pt-chip{display:inline-flex;align-items:center;gap:.375rem;padding:.2rem .6rem;border:1px solid transparent;border-radius:999px;
  background:var(--c-bg);color:var(--c-fg);font-size:12px;line-height:1.5;cursor:pointer}
.pt-chip:before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor;opacity:.7}
.pt-chip.is-on{outline:2px solid currentColor;outline-offset:1px}

.pt-scroll{overflow-x:auto;padding:.25rem .125rem .5rem}
.pt-grid{display:grid;grid-template-columns:1.9rem repeat(18,minmax(3.1rem,1fr));gap:3px;min-width:58rem}
.pt-glabel{display:flex;align-items:center;justify-content:center;font-size:11px;color:#9aa4b2}

.pt-el{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:3.4rem;
  padding:.3rem .1rem .25rem;border:1px solid rgba(255,255,255,.75);border-radius:.375rem;cursor:pointer;
  font-family:inherit;transition:transform .12s ease,box-shadow .12s ease}
.pt-el .pt-no{position:absolute;top:1px;left:3px;font-size:10px;line-height:1;opacity:.75}
.pt-el .pt-sym{font-size:1.05rem;font-weight:700;line-height:1.15}
.pt-el .pt-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:1.25;opacity:.92}
.pt-el:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,23,42,.2);z-index:2}
.pt-el.is-active{outline:2px solid #1f2937;outline-offset:1px;z-index:3}
.pt-el.is-dim{opacity:.22}
.pt-el.is-hit{box-shadow:0 0 0 2px var(--site-primary) inset}

.pt-detail{display:grid;grid-template-columns:11rem 1fr;gap:1.25rem;align-items:start}
.pt-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;padding:1rem .5rem;
  border-radius:.625rem;text-align:center}
.pt-tile .pt-tile-no{font-size:12px;opacity:.8}
.pt-tile .pt-tile-sym{font-size:2.25rem;font-weight:700;line-height:1.1}
.pt-tile .pt-tile-cn{font-size:1.05rem;font-weight:600}
.pt-tile .pt-tile-en{font-size:12px;opacity:.85}

.pt-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.5rem .875rem;margin-bottom:.75rem}
.pt-fields>div{display:flex;flex-direction:column;padding:.4rem .625rem;border:1px solid #eef1f5;border-radius:.5rem;background:#fafbfd}
.pt-fields span{font-size:11px;color:#8a94a3}
.pt-fields b{font-size:14px;font-weight:600;color:#2b3441}
.pt-line{display:flex;gap:.5rem;margin-bottom:.4rem;font-size:13px}
.pt-line>span{flex:0 0 4.5rem;color:#8a94a3}
.pt-line code{padding:.05rem .375rem;border-radius:.25rem;background:#f1f3f7;color:#334155;word-break:break-all}
.pt-use{margin-top:.5rem;padding:.625rem .75rem;border-left:3px solid var(--site-primary);border-radius:.375rem;
  background:var(--site-tint);font-size:13.5px;color:#334155}

@media (max-width:767.98px){
  .pt-detail{grid-template-columns:1fr}
  .pt-tile{flex-direction:row;justify-content:flex-start;gap:.625rem;padding:.75rem 1rem}
  .pt-tile .pt-tile-sym{font-size:1.75rem}
}