.periodic-table-page{max-width:1400px;margin:30px auto;text-align:center;background-color:#fff;padding:30px 30px 40px;border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,.08)}.periodic-table-title{font-size:1.4rem;margin-bottom:20px;color:#181818}.group-filter-wrapper{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px}.group-filter-item{font-size:.75rem;padding:6px 10px;border-radius:4px;color:#000;font-weight:700;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:.9;transition:all .2s ease}.group-filter-item.active,.group-filter-item:hover{opacity:1;transform:scale(1.05)}.periodic-table-container{width:100%;overflow-x:auto;display:flex;justify-content:center}.periodic-table-grid{display:grid;grid-template-columns:repeat(18,55px);grid-template-rows:repeat(7,55px) 6px repeat(2,55px);gap:5px;min-width:990px}.periodic-element{border:1px solid #ccc;border-radius:5px;width:55px;height:55px;padding:3px;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .2s ease;background-color:#fff}.periodic-element:hover{transform:scale(1.07)}.element-number{font-size:.65rem;color:#000;margin-bottom:1px}.element-symbol{font-size:1rem;font-weight:700;margin-bottom:2px;color:#000}.element-name{font-size:.5rem;font-weight:500;color:#000;text-align:center}.element-details{font-size:1rem;font-weight:700}.element-description,.element-group,.element-other-info p{margin-bottom:8px}.group-color{display:inline-block;width:16px;height:16px;border-radius:50%;margin-left:5px;vertical-align:middle}.ptable-divider{border:none;height:1px;background-color:#000;width:100%;margin:60px 0 40px}.ptable-description{width:100%;margin:0 0 60px;padding-left:0;padding-right:0;text-align:left;color:#333;font-size:1rem;line-height:1.7}.ptable-description-title{font-size:1.4rem;font-weight:600;margin-bottom:1rem;color:#2c3e50;text-align:left}@media (max-width:768px){.periodic-table-container{display:block;overflow-x:auto}.periodic-table-grid{grid-template-columns:repeat(18,42px);grid-template-rows:repeat(7,42px) 4px repeat(2,42px);gap:4px;min-width:unset}.periodic-element{width:42px;height:42px;padding:2px}.element-number{font-size:.55rem}.element-symbol{font-size:.85rem}.element-name{font-size:.45rem}.group-filter-item{font-size:.65rem;padding:4px 8px}}