.periodic-app{display:grid;gap:18px}
.periodic-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) minmax(180px,260px);gap:10px}
.periodic-toolbar input,.periodic-toolbar select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:inherit}
.periodic-toolbar input:focus,.periodic-toolbar select:focus{outline:3px solid color-mix(in srgb,var(--accent) 18%,transparent);border-color:var(--accent)}
.periodic-scroll{overflow-x:auto;padding:4px 4px 12px}
.periodic-board{min-width:1120px}
.group-labels,.period-row{display:grid;grid-template-columns:42px repeat(18,minmax(52px,1fr));gap:5px;margin-bottom:5px}
.group-label,.period-label{display:grid;place-items:center;min-height:22px;color:var(--muted);font-size:11px;font-weight:800}
.period-label{font-size:13px}
.element-cell{position:relative;min-height:62px;padding:5px 4px;border:1px solid #dbe1e8;border-radius:9px;background:#fff;color:var(--ink);text-align:center;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.element-cell .z{position:absolute;left:5px;top:4px;color:#778292;font-size:9px;font-weight:700}
.element-cell b{display:block;margin-top:6px;color:var(--element-color,var(--accent));font-size:20px;line-height:1}
.element-cell small{display:block;margin-top:4px;overflow:hidden;color:#657083;font-size:9px;white-space:nowrap;text-overflow:ellipsis}
.element-cell:hover,.element-cell.active{z-index:2;transform:translateY(-2px);border-color:var(--element-color,var(--accent));box-shadow:0 8px 20px rgba(35,50,72,.14)}
.element-cell.active{outline:3px solid color-mix(in srgb,var(--element-color,var(--accent)) 22%,transparent)}
.element-cell.dim{opacity:.18}
.f-placeholder{display:grid;place-items:center;min-height:62px;border:1px dashed #bfc9d6;border-radius:9px;color:#667386;background:#f6f8fb;font-size:10px;font-weight:800;line-height:1.35;white-space:pre-line}
.series-wrap{display:grid;gap:5px;margin:12px 0 0 128px}
.series-row{display:grid;grid-template-columns:86px repeat(15,minmax(52px,1fr));gap:5px}
.series-label{display:grid;place-items:center;color:var(--muted);font-size:11px;font-weight:900;text-align:center}
.periodic-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:12px;color:var(--muted);font-size:11px}
.periodic-legend span{display:inline-flex;align-items:center;gap:6px}
.periodic-legend i{width:10px;height:10px;border-radius:50%;background:var(--legend)}
.element-detail{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:18px}
.atom-visual,.element-facts{border:1px solid var(--line);border-radius:20px;background:#fff}
.atom-visual{display:grid;place-items:center;padding:18px;background:linear-gradient(145deg,#fff,var(--accent-soft))}
.atom-visual canvas{display:block;width:min(100%,270px);height:auto;aspect-ratio:1}
.visual-caption{margin-top:6px;color:var(--muted);font-size:11px;text-align:center}
.element-facts{padding:22px}
.element-heading{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.element-symbol{width:76px;height:76px;display:grid;place-items:center;flex:0 0 auto;border:1px solid color-mix(in srgb,var(--element-color) 55%,#d9e0e8);border-radius:18px;color:var(--element-color);background:color-mix(in srgb,var(--element-color) 10%,#fff);font-size:36px;font-weight:900}
.element-heading h2{margin:0;font-size:30px}.element-heading p{margin:4px 0 0;color:var(--muted)}
.fact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:16px}
.fact{padding:11px;border-radius:12px;background:#f6f8fb}.fact small{display:block;color:var(--muted);font-size:10px}.fact strong{display:block;margin-top:4px;font-size:14px}
.config-block{display:grid;gap:10px}.config-line{padding:12px 14px;border-radius:12px;background:#f7f8fb;line-height:1.7;overflow-wrap:anywhere}
.config-line b{display:block;margin-bottom:2px;color:var(--muted);font-size:11px}.config-line strong{font-family:"Times New Roman","Songti SC",serif;font-size:18px}
.orbital-panel{margin-top:15px;padding-top:15px;border-top:1px solid var(--line)}
.orbital-panel h3{margin:0 0 11px;font-size:15px}.orbital-diagram{display:flex;align-items:flex-end;flex-wrap:wrap;gap:13px}
.subshell{display:grid;gap:5px}.subshell-label{color:var(--muted);font-family:"Times New Roman",serif;font-size:13px;font-weight:800;text-align:center}
.orbital-boxes{display:flex;gap:3px}.orbital-box{position:relative;width:29px;height:34px;border:1.5px solid #677386;border-top:0;border-radius:0 0 3px 3px}
.arrow{position:absolute;bottom:3px;color:var(--accent);font-size:23px;font-weight:900;line-height:1}.arrow.up{left:3px}.arrow.down{right:3px;color:#e27d39}
.data-note{margin-top:12px;color:var(--muted);font-size:11px;line-height:1.65}
@media(max-width:900px){
  .element-detail{grid-template-columns:1fr}.atom-visual{grid-template-columns:minmax(180px,260px) 1fr;align-items:center}.visual-caption{text-align:left}
  .fact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .periodic-toolbar{grid-template-columns:1fr}.element-detail{gap:12px}.atom-visual{grid-template-columns:1fr}.visual-caption{text-align:center}
  .element-facts{padding:16px}.element-heading h2{font-size:25px}.element-symbol{width:64px;height:64px;font-size:30px}
}