:root{--bg-color:#0b0f19;--bg-panel:#1e293b99;--border-color:#ffffff1a;--text-main:#f1f5f9;--text-muted:#94a3b8;--accent:#ec4899;--accent-hover:#db2777}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);background-image:radial-gradient(circle at 10% 20%,#ec48991a 0%,#0000 20%),radial-gradient(circle at 90% 80%,#6366f126 0%,#0000 25%);background-attachment:fixed;font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.app-container{min-height:100vh;display:flex}.sidebar{background:var(--bg-panel);border-right:1px solid var(--border-color);-webkit-backdrop-filter:blur(12px);flex-direction:column;width:250px;padding:30px 20px;display:flex}.logo{align-items:center;gap:15px;margin-bottom:50px;display:flex}.logo h2{letter-spacing:-.5px;font-size:1.5rem;font-weight:700}.nav-links{flex-direction:column;gap:10px;list-style:none;display:flex}.nav-links li{cursor:pointer;color:var(--text-muted);border-radius:10px;align-items:center;gap:15px;padding:12px 15px;transition:all .2s;display:flex}.nav-links li:hover{color:var(--text-main);background:#ffffff0d}.nav-links li.active{color:var(--accent);border-left:3px solid var(--accent);background:#ec489926}.main-content{flex:1;padding:40px 60px;overflow-y:auto}.header{margin-bottom:40px}.header h1{margin-bottom:10px;font-size:2.5rem;font-weight:700}.header p{color:var(--text-muted);font-size:1.1rem}.search-bar{background:var(--bg-panel);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:12px;align-items:center;max-width:700px;padding:5px 5px 5px 20px;display:flex;box-shadow:0 10px 25px #0003}.search-icon{color:var(--text-muted)}.search-bar input{color:var(--text-main);background:0 0;border:none;outline:none;flex:1;padding:15px;font-family:inherit;font-size:1.1rem}.search-bar button{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:12px 25px;font-size:1rem;font-weight:500;transition:background .2s}.search-bar button:hover{background:var(--accent-hover)}.search-bar button:disabled{opacity:.7;cursor:not-allowed}.error-message{color:#f87171;background:#f871711a;border:1px solid #f8717133;border-radius:8px;margin-top:20px;padding:15px;display:inline-block}.results-section{margin-top:40px;animation:.4s ease-out fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.compound-card{background:var(--bg-panel);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:15px;max-width:900px;display:flex;overflow:hidden;box-shadow:0 15px 35px #0003}.compound-image{background:#0003;flex:0 0 350px;justify-content:center;align-items:center;padding:20px;display:flex}.compound-image img{filter:drop-shadow(0 10px 15px #00000080)invert()hue-rotate(180deg);max-width:100%;max-height:300px}.compound-details{flex:1;padding:40px}.compound-details h2{color:var(--accent);margin-bottom:25px;font-size:2rem}.detail-item{flex-direction:column;gap:5px;margin-bottom:15px;display:flex}.detail-item .label{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-size:.9rem}.detail-item .value{word-break:break-all;font-size:1.1rem}.formula{color:#22d3ee;font-family:monospace;font-size:1.3rem!important}.smiles{color:#a78bfa;background:#0000004d;border-radius:5px;padding:5px 10px;font-family:monospace}.pt-container{flex-direction:column;display:flex}.pt-layout{flex-direction:column;gap:20px;display:flex}.periodic-table{grid-template-columns:repeat(18,1fr);gap:4px;padding-bottom:20px;display:grid;overflow-x:auto}.element-cell{aspect-ratio:1;cursor:pointer;color:#fff;text-shadow:1px 1px 2px #00000080;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;min-width:45px;padding:2px;transition:transform .2s,filter .2s;display:flex;box-shadow:0 2px 5px #0003}.element-cell:hover{z-index:10;filter:brightness(1.2);transform:scale(1.1)}.element-cell.selected{z-index:10;outline:2px solid #fff;transform:scale(1.1)}.el-number{align-self:flex-start;margin-left:2px;font-size:.6rem}.el-symbol{font-size:1rem;font-weight:700}.el-name{text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:.45rem;overflow:hidden}.element-details-panel{background:var(--bg-panel);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:15px;padding:20px;animation:.3s fadeIn;position:relative}.close-btn{color:#fff;cursor:pointer;background:0 0;border:none;font-size:1.5rem;position:absolute;top:10px;right:15px}.element-header{border-radius:10px;align-items:center;gap:15px;margin-bottom:20px;padding:15px;display:flex}.el-big-symbol{font-size:2.5rem;font-weight:700}.el-big-name{font-size:1.5rem}.element-stats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:20px;display:grid}.element-stats .stat{flex-direction:column;display:flex}.element-desc{color:var(--text-muted);line-height:1.6}.reactions-grid{align-items:flex-start;gap:30px;display:flex}.reactions-list{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:10px;flex:0 0 250px;padding:20px}.reactions-list h3{color:var(--accent);margin-bottom:15px}.reactions-list ul{flex-direction:column;gap:5px;list-style:none;display:flex}.reactions-list li{cursor:pointer;border-radius:6px;padding:10px;transition:background .2s}.reactions-list li:hover{background:#ffffff0d}.reactions-list li.active{background:var(--accent);color:#fff}.reaction-detail{flex:1}.reaction-card{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:15px;padding:30px}.reaction-card h2{margin-bottom:20px;font-size:1.8rem}.equation-display{color:#22d3ee;text-align:center;background:#0000004d;border-radius:10px;margin-bottom:20px;padding:20px;font-family:monospace;font-size:2rem}.reaction-stats{gap:30px;margin-bottom:20px;display:flex}.ref-grid{grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:20px;display:grid}.ref-card{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:15px;padding:25px}.ref-card.full-width{grid-column:1/-1}.ref-card h2{color:var(--accent);margin-bottom:20px}.ref-card ul{flex-direction:column;gap:15px;list-style:none;display:flex}.ref-card li{background:#0003;border-radius:8px;flex-direction:column;gap:5px;padding:15px;display:flex}.formula-text{color:#22d3ee;font-family:monospace;font-size:1.2rem}.steps-list{padding-left:20px;line-height:1.8}.steps-list li{margin-bottom:10px}@media (width<=850px){.app-container{flex-direction:column}.sidebar{border-right:none;border-bottom:1px solid var(--border-color);width:100%;padding:20px}.logo{justify-content:center;margin-bottom:20px}.nav-links{flex-direction:row;padding-bottom:5px;overflow-x:auto}.nav-links li{white-space:nowrap}.main-content{padding:20px}.header h1{font-size:2rem}.compound-card{flex-direction:column}.compound-image{flex:none;width:100%;padding:20px}.compound-details{padding:20px}.search-bar{border-radius:15px;flex-direction:column;gap:10px;padding:15px}.search-bar input{text-align:center;width:100%;padding:10px 0}.search-bar button{width:100%}}.quick-categories{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:15px;display:flex}.pill-btn{cursor:pointer;color:#fff;border:none;border-radius:20px;padding:8px 16px;font-weight:700}.pill-btn.bg-red{background:#ef4444}.pill-btn.bg-purple{background:#a855f7}.pill-btn.bg-blue{background:#3b82f6}.pill-btn.bg-green{background:#10b981}.pill-btn.bg-yellow{background:#eab308}.pill-btn.bg-gray{background:#64748b}.compound-visuals{background:#0003;flex-direction:column;flex:0 0 350px;align-items:center;padding:20px;display:flex}.view-toggles{justify-content:center;gap:10px;margin-bottom:10px;display:flex}.view-toggles button{color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:5px;padding:5px 15px}.view-toggles button.active{background:var(--accent);border-color:var(--accent)}.visual-container{justify-content:center;align-items:center;width:100%;height:300px;display:flex}.visual-container img{filter:drop-shadow(0 10px 15px #00000080)invert()hue-rotate(180deg);max-width:100%;max-height:100%}.molecule-iframe{background:#fff;border-radius:10px;width:100%;height:100%}.lab-bench{flex-direction:column;gap:30px;margin-top:20px;padding:30px;display:flex}.selectors{justify-content:space-between;align-items:center;gap:20px;display:flex}.selector{flex-direction:column;flex:1;gap:10px;display:flex}.selector select{color:#fff;border:1px solid var(--border-color);background:#0000004d;border-radius:8px;padding:10px;font-size:1.1rem}.selector select option{background:var(--bg-color)}.mix-control{flex:none}.mix-btn{background:var(--accent);color:#fff;cursor:pointer;box-shadow:0 0 15px var(--accent);border:none;border-radius:8px;padding:15px 30px;font-size:1.2rem;font-weight:700;transition:all .2s}.mix-btn:hover:not(:disabled){box-shadow:0 0 25px var(--accent);transform:scale(1.05)}.mix-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.reaction-stage{background:#0006;border-radius:15px;justify-content:center;align-items:center;min-height:250px;padding:20px;display:flex;position:relative;overflow:hidden}.empty-stage{color:var(--text-muted);font-size:1.2rem}.animating-flask{border:4px solid #fff;border-top:none;border-radius:0 0 50px 50px;width:100px;height:100px;position:relative}.animating-flask:before{content:"";border:4px solid #fff;border-bottom:none;width:32px;height:30px;position:absolute;top:-30px;left:30px}.liquid{background:var(--accent);border-radius:0 0 45px 45px;height:50%;animation:.5s infinite alternate bubble;position:absolute;bottom:0;left:0;right:0}.shaking{animation:.2s infinite shake}@keyframes bubble{0%{height:40%}to{background:#3b82f6;height:80%}}@keyframes shake{0%{transform:translate(2px,1px)rotate(0)}10%{transform:translate(-1px,-2px)rotate(-1deg)}20%{transform:translate(-3px)rotate(1deg)}30%{transform:translateY(2px)rotate(0)}40%{transform:translate(1px,-1px)rotate(1deg)}50%{transform:translate(-1px,2px)rotate(-1deg)}60%{transform:translate(-3px,1px)rotate(0)}70%{transform:translate(2px,1px)rotate(-1deg)}80%{transform:translate(-1px,-1px)rotate(1deg)}90%{transform:translate(2px,2px)rotate(0)}to{transform:translate(1px,-2px)rotate(-1deg)}}.reaction-result{text-align:center;flex-direction:column;align-items:center;gap:15px;max-width:600px;display:flex}.reaction-result h2{font-size:2rem}.type-explosion h2{color:#ef4444}.type-geyser h2{color:#f59e0b}.type-toxic h2{color:#10b981}.type-neutralization h2{color:#3b82f6}.effect{font-size:5rem;animation:.5s cubic-bezier(.175,.885,.32,1.275) forwards popIn}@keyframes popIn{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.glass-panel{background:var(--bg-panel);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:15px}@media (width<=640px){.lab-bench{gap:15px;padding:15px}.selectors{flex-direction:column;align-items:stretch}.mix-control,.mix-btn{width:100%}.compound-visuals{flex:auto;width:100%}}