body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#0f172a,#1e293b);color:#e2e8f0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.App,body{min-height:100vh}.App{display:flex;flex-direction:column}.App-header{background:#0f172acc;border-bottom:1px solid #334155;padding:2rem;text-align:center}.app-title{-webkit-text-fill-color:#0000;background:linear-gradient(90deg,#60a5fa,#a78bfa);-webkit-background-clip:text;background-clip:text;font-size:2.5rem;margin-bottom:.5rem}.app-subtitle{color:#94a3b8;font-size:1.1rem}.loading-container{align-items:center;display:flex;flex:1 1;flex-direction:column;gap:1rem;justify-content:center}.loading-spinner{animation:spin 1s linear infinite;border:3px solid #334155;border-radius:50%;border-top-color:#60a5fa;height:50px;width:50px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.dashboard{display:flex;flex:1 1;flex-direction:column;gap:2rem;padding:2rem}.periodic-table-container{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1e293b99;border:1px solid #475569;border-radius:12px;padding:1.5rem}.visualization-panel{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));width:100%}.placeholder{align-items:center;background:#1e293b99;border:2px dashed #475569;border-radius:12px;display:flex;flex-direction:column;height:100%;justify-content:center;padding:3rem;text-align:center}.placeholder-icon{font-size:4rem;margin-bottom:1rem}.App-footer{background:#0f172acc;border-top:1px solid #334155;color:#94a3b8;padding:1.5rem;text-align:center}@media (max-width:1024px){.dashboard{grid-template-columns:1fr}.periodic-table-container{order:2}.visualization-panel{order:1}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#1e293b}::-webkit-scrollbar-thumb{background:#475569;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#64748b}.periodic-table{overflow-x:auto;padding-bottom:1rem;position:relative;width:100%}.table-legend{background:#1e293bcc;border:1px solid #475569;border-radius:8px;left:0;margin-bottom:1.5rem;padding:1rem;position:-webkit-sticky;position:sticky}.legend-title{color:#cbd5e1;font-size:.9rem;font-weight:600;letter-spacing:.05em;margin-bottom:.75rem;text-transform:uppercase}.legend-items{display:flex;flex-wrap:wrap;gap:.75rem}.legend-color{border:1px solid #ffffff1a;border-radius:4px}.legend-label{color:#94a3b8;font-size:.8rem;text-transform:capitalize}.table-content-wrapper{min-width:900px;padding-right:1rem}.main-table{grid-gap:4px;display:grid;gap:4px;grid-template-rows:repeat(7,1fr);margin-bottom:1rem;min-width:900px;width:100%}.period-row{grid-gap:4px;display:grid;gap:4px;grid-template-columns:repeat(18,1fr)}.element-cell{align-items:center;aspect-ratio:1;border:none;border-radius:4px;box-shadow:0 1px 3px #0003;color:#fff;cursor:pointer;display:flex;flex-direction:column;font-family:inherit;justify-content:center;overflow:hidden;padding:2px;position:relative;transition:all .2s ease;width:100%}.element-cell:hover{box-shadow:0 8px 20px #0006;transform:scale(1.2);z-index:50}.element-cell.selected{box-shadow:0 0 0 2px #60a5fa80,0 4px 15px #60a5fa4d;transform:scale(1.15);z-index:40}.element-number{font-size:.6rem;font-weight:500;left:3px;opacity:.85;position:absolute;top:2px}.element-symbol{font-size:1.1rem;font-weight:700;margin-bottom:1px;margin-top:4px;text-shadow:0 1px 2px #0000004d}.element-name{display:block;font-size:.5rem;line-height:1;max-width:100%;opacity:.9;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.f-block-container{border-top:1px solid #475569;display:flex;flex-direction:column;gap:.5rem;margin-top:1.5rem;min-width:900px;padding-top:1rem}.f-block-row{display:flex;gap:4px;justify-content:center}.f-block-row .element-cell{flex-shrink:0;width:5.55%}.f-block-label{color:#94a3b8;font-size:.75rem;font-weight:500;margin-bottom:2px;margin-left:10%}.element-tooltip{animation:fadeIn .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f172af2;border:1px solid #475569;border-radius:8px;bottom:20px;box-shadow:0 8px 32px #00000080;padding:1rem;position:fixed;right:20px;top:auto;width:250px;z-index:1000}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.tooltip-header{align-items:center;border-bottom:1px solid #334155;display:flex;gap:.75rem;margin-bottom:.75rem;padding-bottom:.75rem}.tooltip-symbol{color:#60a5fa;font-size:1.5rem;font-weight:700}.tooltip-name{font-size:1.1rem;font-weight:500}.tooltip-details p{color:#cbd5e1;font-size:.85rem;margin-bottom:.25rem}.element-card{background:#1e293bcc;border:1px solid #475569;border-radius:12px;display:flex;flex-direction:column;height:100%;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}.element-card:hover{box-shadow:0 8px 32px #0003;transform:translateY(-2px)}.card-header{color:#fff;padding:1.5rem;position:relative}.header-content{align-items:flex-start;display:flex;justify-content:space-between}.element-basic-info{display:flex;flex-direction:column;gap:.5rem}.atomic-number{font-size:.9rem;font-weight:500;opacity:.9}.element-symbol-large{font-size:3rem;font-weight:700;line-height:1}.element-name-large{font-size:1.5rem;font-weight:500;opacity:.95}.atomic-mass{font-size:1.2rem;font-weight:500;opacity:.9}.card-body{padding:1.5rem}.property-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(2,1fr);margin-bottom:1.5rem}.property{display:flex;flex-direction:column;gap:.25rem}.property-label{color:#94a3b8;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase}.property-value{color:#e2e8f0;font-size:.95rem;font-weight:500}.electron-config{color:#60a5fa;font-family:Courier New,monospace;font-size:.85rem}.element-description{border-top:1px solid #475569;padding-top:1rem}.element-description h4{color:#cbd5e1;font-size:1.1rem;margin-bottom:.75rem}.element-description p{color:#94a3b8;font-size:.9rem;line-height:1.6}@media (max-width:768px){.property-grid{grid-template-columns:1fr}.element-symbol-large{font-size:2.5rem}.element-name-large{font-size:1.2rem}}.element-3d-viewer{background:#1e293bcc;border:1px solid #475569;border-radius:12px;display:flex;flex-direction:column;height:100%;padding:1.5rem}.viewer-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.viewer-header h3{color:#e2e8f0;font-size:1.2rem}.control-button{background:#60a5fa33;border:1px solid #60a5fa;border-radius:6px;color:#60a5fa;cursor:pointer;font-size:.85rem;padding:.5rem 1rem;transition:all .2s ease}.control-button:hover{background:#60a5fa4d;transform:translateY(-1px)}.canvas-container{background:#0f172acc;border-radius:8px;height:400px;margin-bottom:1rem;overflow:hidden;position:relative;width:100%}.atom-label{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f172ae6;border:1px solid #475569;border-radius:6px;color:#e2e8f0;font-size:.9rem;font-weight:500;min-width:200px;padding:.75rem 1rem;text-align:center}.atom-stats{color:#94a3b8;display:flex;font-size:.8rem;justify-content:space-between;margin-top:.5rem}.viewer-info{border-top:1px solid #475569;padding-top:1rem}.viewer-info p{color:#94a3b8;font-size:.9rem;margin-bottom:1rem}.legend{display:flex;flex-wrap:wrap;gap:1.5rem}.legend-item{align-items:center;color:#cbd5e1;display:flex;font-size:.85rem;gap:.5rem}.legend-color{border-radius:50%;height:16px;width:16px}.legend-color.proton{background-color:#ef4444;box-shadow:0 0 8px #ef4444}.legend-color.neutron{background-color:#3b82f6;box-shadow:0 0 8px #3b82f6}.legend-color.electron{background-color:#60a5fa;box-shadow:0 0 8px #60a5fa}.element-properties{background:#1e293bcc;border:1px solid #475569;border-radius:12px;display:flex;flex-direction:column;height:100%;padding:1.5rem}.element-properties h3{color:#e2e8f0;font-size:1.2rem;margin-bottom:1.5rem}.property-cards{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-bottom:1.5rem}.property-card{align-items:center;background:#0f172a99;border-left:4px solid;border-radius:8px;display:flex;gap:1rem;padding:1rem;transition:transform .2s ease}.property-card:hover{background:#0f172acc;transform:translateY(-2px)}.card-icon{font-size:2rem;opacity:.9}.card-content{flex:1 1;min-width:0}.card-title{color:#94a3b8;font-size:.75rem;-webkit-hyphens:auto;hyphens:auto;letter-spacing:.05em;margin-bottom:.25rem;text-transform:uppercase;word-break:break-word}.card-value{color:#e2e8f0;font-size:1.1rem;font-weight:600}.charts-container{grid-gap:1.5rem;display:grid;gap:1.5rem;margin-bottom:1.5rem}.chart{background:#0f172a99;border-radius:8px;padding:1rem}.chart h4{color:#cbd5e1;font-size:1rem;margin-bottom:1rem}.additional-info{border-top:1px solid #475569;padding-top:1rem}.additional-info h4{color:#cbd5e1;font-size:1rem;margin-bottom:1rem}.info-grid{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr)}.info-item{display:flex;flex-direction:column;gap:.25rem}.info-label{color:#94a3b8;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase}.info-value{color:#e2e8f0;font-size:.9rem;font-weight:500}@media (max-width:768px){.info-grid,.property-cards{grid-template-columns:1fr}}