:root{--bg-color: #10101a;--card-bg: #1f1f2e;--text-color: #ffffff;--element-size: 58px;--table-gap: 6px;--c-alkali: #ff4d4d;--c-alkaline: #ff9f43;--c-transition: #ffca28;--c-post-trans: #00d2d3;--c-metalloid: #54a0ff;--c-nonmetal: #1dd1a1;--c-halogen: #5f27cd;--c-noble: #c8d6e5;--c-lanthanide: #ff9ff3;--c-actinide: #feca57;--c-unknown: #576574}body{font-family:Segoe UI,Microsoft YaHei,sans-serif;background-color:var(--bg-color);color:#fff;margin:0;padding:20px;display:flex;flex-direction:column;align-items:center;min-height:100vh;box-sizing:border-box;overflow-x:hidden}*,*:before,*:after{box-sizing:inherit}h1{margin-bottom:10px;letter-spacing:2px;text-align:center}.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:20px;font-size:12px;max-width:1000px}.legend-item{display:flex;align-items:center;margin-right:10px}.dot{width:12px;height:12px;border-radius:3px;margin-right:5px}.table-scroll{width:100%;max-width:1186px;overflow-x:auto;overflow-y:hidden;border-radius:10px;-webkit-overflow-scrolling:touch}.periodic-table{display:grid;grid-template-columns:repeat(18,var(--element-size));grid-template-rows:repeat(10,var(--element-size));gap:var(--table-gap);width:max-content;min-width:max-content;padding:20px;background:#ffffff05;border-radius:10px;justify-content:start;box-shadow:0 10px 30px #0000004d}.element{background:var(--card-bg);border:1px solid rgba(255,255,255,.05);border-radius:4px;display:flex;flex-direction:column;justify-content:space-between;padding:4px;cursor:pointer;transition:transform .2s,box-shadow .2s,filter .2s;position:relative;-webkit-user-select:none;user-select:none}.element:hover{transform:scale(1.25);z-index:100;box-shadow:0 0 20px #00000080;filter:brightness(1.2);border-color:#fff}.atomic-number{font-size:10px;opacity:.8;align-self:flex-start}.symbol{font-size:18px;font-weight:700;align-self:center}.name{font-size:9px;align-self:center;white-space:nowrap;overflow:hidden}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:none;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s}.modal-overlay.active{display:flex;opacity:1}.modal-content{background:#2d3436;width:400px;max-width:90%;border-radius:15px;padding:30px;box-shadow:0 20px 50px #00000080;position:relative;border:2px solid;transform:scale(.8);transition:transform .3s}.modal-overlay.active .modal-content{transform:scale(1)}.close-btn{position:absolute;top:15px;right:15px;background:none;border:none;color:#aaa;font-size:24px;cursor:pointer}.close-btn:hover{color:#fff}.modal-header{display:flex;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:15px;margin-bottom:15px}.modal-big-symbol{font-size:64px;font-weight:700;width:100px;display:flex;justify-content:center;align-items:center;background:#0003;border-radius:10px;margin-right:20px}.modal-text h2{margin:0 0 5px;font-size:28px}.modal-cat{padding:4px 8px;border-radius:4px;font-size:12px;display:inline-block;color:#000;font-weight:700}.modal-details p{margin:8px 0;font-size:14px;line-height:1.5;border-bottom:1px dashed rgba(255,255,255,.1);padding-bottom:5px}.modal-details strong{color:#bdc3c7}@media (max-width: 720px){:root{--element-size: 44px;--table-gap: 4px}body{padding:12px;align-items:stretch}h1{font-size:22px;line-height:1.25;margin:4px 0 12px;letter-spacing:1px}.legend{justify-content:flex-start;gap:8px 10px;margin-bottom:12px;font-size:11px}.legend-item{margin-right:0}.periodic-table{padding:12px;border-radius:8px}.element{padding:3px;min-width:0}.atomic-number{font-size:8px}.symbol{font-size:14px}.name{max-width:100%;font-size:8px;text-overflow:ellipsis}.modal-overlay{align-items:flex-start;padding:16px 0;overflow-y:auto}.modal-content{width:calc(100vw - 24px);max-width:none;padding:20px;border-radius:12px}.modal-header{align-items:center;padding-right:28px}.modal-big-symbol{width:72px;height:72px;flex:0 0 72px;margin-right:14px;font-size:44px}.modal-text h2{font-size:24px}}@media (hover: none){.element:hover{transform:none}}