.tool{width:100%;padding:var(--space-lg,1.5rem) 0}.tool-header{margin-bottom:1.5rem}.tool-header h1{margin:0 0 .5rem}.tool-header p{margin:0}.controls-wrapper{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;flex-direction:column;gap:1.25rem;margin-bottom:1.5rem;padding:1.25rem;display:flex}.controls-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.search-filter-bar{flex-wrap:wrap;flex:1;align-items:center;gap:.75rem;display:flex}.search-filter-bar input[type=text]{font:inherit;border:1px solid #ced4da;border-radius:6px;flex:200px;padding:.6rem .75rem}.search-filter-bar select,.btn{font:inherit;cursor:pointer;background:#fff;border:1px solid #ced4da;border-radius:6px;padding:.6rem .75rem;transition:all .2s}.btn:hover{background-color:#f1f3f5}.btn-primary{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.btn-primary:hover{background-color:#0b5ed7}.btn-danger{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:hover{background-color:#bb2d3b}.view-toggle{gap:.25rem;display:flex}.view-toggle button.active-view{color:#fff;background:#212529;border-color:#212529}.temperature-bar{border-top:1px solid #dee2e6;flex-wrap:wrap;align-items:center;gap:1rem;width:100%;padding-top:1rem;display:flex}.temperature-bar input[type=range]{cursor:pointer;flex:200px}.temp-presets{flex-wrap:wrap;gap:.5rem;display:flex}.temp-presets button{cursor:pointer;background:#fff;border:1px solid #ced4da;border-radius:4px;padding:.35rem .6rem;font-size:.85rem}.temp-presets button.active-preset{color:#fff;background:#0d6efd;border-color:#0d6efd}.state-legend{flex-wrap:wrap;align-items:center;gap:.75rem;margin-left:auto;font-size:.85rem;display:flex}.legend-badge{text-transform:uppercase;border-radius:4px;padding:4px 8px;font-size:.75rem;font-weight:600}.legend-badge.state-solid{color:#383d41;background:#e2e3e5;border-left:4px solid #495057}.legend-badge.state-liquid{color:#055160;background:#cff4fc;border-left:4px solid #0dcaf0}.legend-badge.state-gas{color:#0f5132;background:#d1e7dd;border-left:4px solid #198754}.legend-badge.state-unknown{color:#842029;background:#f8d7da;border-left:4px solid #dc3545}.grid-container{padding-bottom:1rem;overflow-x:auto}.periodic-grid{grid-template-rows:repeat(10,auto);grid-template-columns:repeat(18,minmax(55px,1fr));gap:5px;min-width:1000px;display:grid}.element-card{aspect-ratio:1/1.1;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:#fff;border:1px solid #0000001a;border-radius:4px;flex-direction:column;justify-content:space-between;padding:4px;transition:transform .15s,box-shadow .15s,opacity .2s;display:flex;position:relative}.element-card:hover{z-index:5;transform:scale(1.15);box-shadow:0 6px 16px #00000026}.element-card.dimmed{opacity:.15}.element-card.pinned{z-index:3;outline:3px solid #0d6efd}.element-card.phase-solid{border-bottom:4px solid #495057}.element-card.phase-liquid{border-bottom:4px solid #0dcaf0}.element-card.phase-gas{border-bottom:4px solid #198754}.element-card.phase-unknown{border-bottom:4px solid #dc3545}.card-top{opacity:.8;justify-content:space-between;font-size:.65rem;font-weight:700;display:flex}.element-symbol{text-align:center;margin:0;font-size:1.25rem;font-weight:700}.element-name{text-align:center;white-space:nowrap;text-overflow:ellipsis;font-size:.6rem;overflow:hidden}.cat-nonmetal,.cat-diatomic-nonmetal,.cat-polyatomic-nonmetal{background-color:#d1e7dd}.cat-noble-gas{background-color:#cff4fc}.cat-alkali-metal{background-color:#f8d7da}.cat-alkaline-earth-metal{background-color:#ffe69c}.cat-metalloid{background-color:#e2d9f3}.cat-halogen{background-color:#d2f4ea}.cat-post-transition-metal{background-color:#e2e3e5}.cat-transition-metal{background-color:#fef5d1}.cat-lanthanide{background-color:#f3d0d7}.cat-actinide{background-color:#e0bbf5}.list-wrapper{margin-top:1rem;overflow-x:auto}#periodicTable{border-collapse:collapse;width:100%;font-size:.9rem}#periodicTable th,#periodicTable td{text-align:left;border:1px solid #dee2e6;padding:.75rem}#periodicTable th{cursor:pointer;-webkit-user-select:none;user-select:none;z-index:2;background:#e9ecef;position:sticky;top:0}#periodicTable th:hover{background:#ced4da}#periodicTable tbody tr:hover{cursor:pointer;background:#f8f9fa}.comparison-tray{background:#fff;border:1px solid #ced4da;border-radius:8px;margin-top:2rem;padding:1.5rem;box-shadow:0 4px 6px #0000000d}.tray-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.tray-header h3{margin:0}.tray-tip{color:#6c757d;margin:0;font-size:.85rem}.compare-cards{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;display:grid}.compare-card{background:#f8f9fa;border:1px solid #dee2e6;border-radius:6px;padding:1.25rem;position:relative}.compare-card h4{margin:0 0 .75rem;font-size:1.25rem}.compare-card p{border-bottom:1px solid #eee;justify-content:space-between;margin:.25rem 0;padding-bottom:.25rem;font-size:.9rem;display:flex}.compare-card p strong{color:#495057}.remove-compare-btn{color:#dc3545;cursor:pointer;background:0 0;border:none;font-size:1.2rem;line-height:1;position:absolute;top:1rem;right:1rem}.element-modal{border:none;border-radius:8px;width:95%;max-width:700px;padding:0;box-shadow:0 10px 30px #0003}.element-modal::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0009}.modal-content{max-height:85vh;padding:2rem;position:relative;overflow-y:auto}.close-btn{cursor:pointer;color:#6c757d;background:0 0;border:none;font-size:1.5rem;position:absolute;top:1.5rem;right:1.5rem}.close-btn:hover{color:#000}.modal-header{border-bottom:2px solid #eee;align-items:center;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem;display:flex}.modal-symbol{color:#212529;font-size:3rem;font-weight:700;line-height:1}.modal-title h2{margin:0;font-size:1.75rem}.modal-title p{color:#6c757d;margin:0;font-size:1rem}.modal-grid{grid-template-columns:1fr 1fr;gap:2rem;display:grid}.info-section h3{border-bottom:1px solid #dee2e6;margin-top:0;padding-bottom:.5rem;font-size:1.1rem}.info-list{margin:0;padding:0;list-style:none}.info-list li{justify-content:space-between;margin-bottom:.5rem;font-size:.95rem;display:flex}.info-list li strong{color:#495057}.bohr-model{background:#f8f9fa;border-radius:8px;justify-content:center;align-items:center;margin-top:1rem;padding:1rem;display:flex}.hidden{display:none!important}@media (width<=768px){.modal-grid{grid-template-columns:1fr;gap:1rem}.controls-row,.temperature-bar{flex-direction:column;align-items:stretch}}