.molecular-3d-simulation{position:relative;width:100%;height:100vh;background:linear-gradient(135deg,#0a0a1a,#1a1a2e,#0f0f23);overflow:hidden}.header-3d h1 svg{color:#00b87f}.mode-tabs button.active{background:linear-gradient(135deg,#00b87f,#00a36c);color:#fff}.vsepr-analysis-panel{position:absolute;top:5rem;left:1rem;z-index:100;width:300px;background:#0f172af2;border:1px solid rgba(0,184,127,.3);border-radius:1rem;padding:1.25rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.analysis-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid rgba(0,184,127,.2)}.analysis-header h2{font-size:1.125rem;color:#fff;margin:0}.formula-large{font-size:1.25rem;color:#00b87f;font-weight:700}.analysis-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:1rem}.analysis-item{display:flex;flex-direction:column;padding:.5rem;background:#00b87f1a;border-radius:.5rem}.analysis-item .label{font-size:.65rem;color:#64748b;margin-bottom:.25rem}.analysis-item .value{font-size:.875rem;color:#e2e8f0;font-weight:600}.analysis-item .value.highlight{color:#00b87f}.geometry-section{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.geometry-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.05)}.geometry-row:last-child{border-bottom:none}.geometry-row .label{font-size:.75rem;color:#64748b}.geometry-row .value{font-size:.875rem;color:#e2e8f0;font-weight:500}.geometry-row .value.geometry{color:#ff9a44;font-weight:700}.geometry-row .value.highlight{color:#00b87f;font-size:1rem}.geometry-row .value.hybridization{color:#9b59b6;font-weight:700;font-style:italic}.polarity-badge{display:inline-block;padding:.5rem 1rem;border-radius:2rem;font-size:.875rem;font-weight:700;text-align:center;margin-bottom:1rem}.polarity-badge.polar{background:linear-gradient(135deg,#e74c3c33,#e74c3c1a);border:1px solid rgba(231,76,60,.4);color:#e74c3c}.polarity-badge.nonpolar{background:linear-gradient(135deg,#2ecc7133,#2ecc711a);border:1px solid rgba(46,204,113,.4);color:#2ecc71}.description{font-size:.75rem;color:#94a3b8;line-height:1.5;margin:0;padding-top:.75rem;border-top:1px solid rgba(0,184,127,.2)}.molecule-grid-advanced{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.molecule-btn-advanced{display:flex;flex-direction:column;align-items:center;padding:.625rem .5rem;background:#00b87f1a;border:1px solid rgba(0,184,127,.2);border-radius:.5rem;cursor:pointer;transition:all .2s ease}.molecule-btn-advanced:hover{background:#00b87f33;border-color:#00b87f66;transform:translateY(-2px)}.molecule-btn-advanced.active{background:linear-gradient(135deg,#00b87f4d,#00b87f26);border-color:#00b87f}.molecule-btn-advanced.easy{border-left:3px solid #2ECC71}.molecule-btn-advanced.medium{border-left:3px solid #F39C12}.molecule-btn-advanced.hard{border-left:3px solid #E74C3C}.molecule-btn-advanced.expert{border-left:3px solid #9B59B6}.mol-shape{font-size:.625rem;color:#64748b;margin-top:.25rem}.toggle-group input[type=checkbox]{width:1rem;height:1rem;accent-color:#00B87F}.challenge-header h3{margin:0;font-size:1rem;color:#ff9a44}.challenge-option{display:flex;align-items:center;justify-content:space-between;padding:.75rem;background:#00b87f1a;border:1px solid rgba(0,184,127,.2);border-radius:.5rem;color:#e2e8f0;font-size:.8rem;cursor:pointer;transition:all .2s ease;text-align:left}.challenge-option:hover:not(:disabled){background:#00b87f33;border-color:#00b87f66}.next-btn{display:inline-flex;align-items:center;gap:.5rem;margin-top:.75rem;padding:.625rem 1.25rem;background:linear-gradient(135deg,#00b87f,#00a36c);border:none;border-radius:.5rem;color:#fff;font-size:.875rem;font-weight:600;cursor:pointer;transition:transform .2s}.next-btn:hover{transform:translateY(-2px)}.learn-card{padding:.75rem;background:#00b87f1a;border:1px solid rgba(0,184,127,.2);border-radius:.5rem}.learn-card h4{font-size:.8rem;color:#00b87f;margin:0 0 .5rem}.learn-card ul{margin:.5rem 0 0;padding-left:1rem}.build-panel{padding:0}.build-description{font-size:.75rem;color:#94a3b8;line-height:1.5;margin:0 0 1rem}.formula-input-group{display:flex;gap:.5rem;margin-bottom:.75rem}.formula-input{flex:1;padding:.625rem .75rem;background:#0000004d;border:1px solid rgba(0,184,127,.3);border-radius:.5rem;color:#fff;font-size:.875rem;font-weight:600;outline:none;transition:border-color .2s}.formula-input:focus{border-color:#00b87f}.formula-input::placeholder{color:#64748b;font-weight:400}.build-btn{display:flex;align-items:center;gap:.375rem;padding:.625rem .875rem;background:linear-gradient(135deg,#00b87f,#00a36c);border:none;border-radius:.5rem;color:#fff;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s}.build-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00b87f4d}.custom-error{padding:.5rem .75rem;background:#e74c3c26;border:1px solid rgba(231,76,60,.3);border-radius:.5rem;color:#e74c3c;font-size:.75rem;margin-bottom:.75rem}.custom-success{padding:.5rem .75rem;background:#2ecc7126;border:1px solid rgba(46,204,113,.3);border-radius:.5rem;color:#2ecc71;font-size:.75rem;margin-bottom:.75rem}.example-formulas{display:flex;flex-wrap:wrap;gap:.375rem}.example-formula-btn{padding:.375rem .625rem;background:#2e7d9926;border:1px solid rgba(46,125,153,.3);border-radius:.375rem;color:#94a3b8;font-size:.7rem;font-weight:600;cursor:pointer;transition:all .2s}.example-formula-btn:hover{background:#2e7d994d;border-color:#2e7d99;color:#fff}.supported-elements{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.element-badge{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;background:#0003;border:1px solid;border-radius:.375rem}.element-symbol{font-size:.875rem;font-weight:700}.element-name{font-size:.625rem;color:#64748b}.atom-label-advanced{padding:.25rem .5rem;border-radius:.25rem;color:#fff;font-size:.7rem;font-weight:700;pointer-events:none;box-shadow:0 2px 8px #0000004d}.angle-indicator{padding:.25rem .5rem;background:#ff9a44e6;border-radius:.25rem;color:#fff;font-size:.65rem;font-weight:700;pointer-events:none}.info-modal-3d{width:100%;max-width:550px;max-height:85vh;overflow-y:auto;background:linear-gradient(135deg,#1a1a2e,#0f0f23);border:1px solid rgba(0,184,127,.4);border-radius:1.5rem}.info-modal-3d .modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(0,184,127,.2);position:sticky;top:0;background:inherit}.info-modal-3d .modal-header h2 svg{color:#00b87f}.info-modal-3d li strong{color:#00b87f}@media(max-width:1024px){.vsepr-analysis-panel{display:none}}.atom-builder-3d-simulation{position:relative;width:100%;height:100vh;background:linear-gradient(135deg,#0a0a1a,#1a1a2e,#0f0f23);overflow:hidden}.back-btn-3d{position:absolute;top:1rem;left:1rem;z-index:100;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;background:#0f172ae6;border:1px solid rgba(46,125,153,.5);border-radius:.75rem;color:#94a3b8;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.back-btn-3d:hover{border-color:#2e7d99;color:#fff;transform:scale(1.05)}.header-3d{position:absolute;top:1rem;left:50%;transform:translate(-50%);z-index:100;display:flex;align-items:center;gap:1rem;padding:.75rem 1.5rem;background:#0f172af2;border:1px solid rgba(46,125,153,.3);border-radius:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.action-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:#2e7d9933;border:1px solid rgba(46,125,153,.4);border-radius:.5rem;color:#94a3b8;cursor:pointer;transition:all .2s ease}.action-btn:hover,.action-btn.active{background:#2e7d9966;color:#fff}.element-info-panel{position:absolute;top:5rem;left:1rem;z-index:100;width:280px;background:#0f172af2;border:1px solid rgba(231,76,60,.3);border-radius:1rem;padding:1.25rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.element-symbol-large{width:80px;height:80px;display:flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:700;color:#fff;border-radius:.75rem;margin:0 auto 1rem;box-shadow:0 4px 15px #0000004d}.element-details{text-align:center;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid rgba(231,76,60,.2)}.element-details h2{font-size:1.25rem;color:#fff;margin:0}.element-name-en{font-size:.875rem;color:#64748b;margin:.25rem 0 0}.particle-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1rem}.particle-item{display:flex;flex-direction:column;align-items:center;padding:.5rem;background:#0003;border-radius:.5rem}.particle-icon{font-size:1.25rem}.particle-item.proton .particle-icon{color:#e74c3c}.particle-item.neutron .particle-icon{color:#3498db}.particle-item.electron .particle-icon{color:#2ecc71}.particle-label{font-size:.6rem;color:#64748b;margin-top:.25rem}.particle-value{font-size:1rem;font-weight:700;color:#fff}.atom-properties{margin-bottom:1rem}.property-row{display:flex;justify-content:space-between;padding:.375rem 0;border-bottom:1px solid rgba(255,255,255,.05)}.property-row span:first-child{font-size:.75rem;color:#64748b}.property-row .value{font-size:.875rem;font-weight:600;color:#e2e8f0}.property-row .value.charge.positive{color:#e74c3c}.property-row .value.charge.negative{color:#3498db}.property-row .value.charge.neutral{color:#2ecc71}.property-row .value.config{font-family:monospace;font-size:.75rem}.shell-diagram h4{font-size:.75rem;color:#94a3b8;margin:0 0 .5rem}.shells-visual{display:flex;gap:.375rem}.shell-badge{display:flex;flex-direction:column;align-items:center;padding:.375rem .5rem;background:#2ecc7126;border:1px solid rgba(46,204,113,.3);border-radius:.375rem}.shell-name{font-size:.6rem;color:#2ecc71}.shell-count{font-size:.875rem;font-weight:700;color:#fff}.control-panel-3d{position:absolute;top:5rem;right:1rem;z-index:100;width:280px;max-height:calc(100vh - 7rem);overflow-y:auto;background:#0f172af2;border:1px solid rgba(46,125,153,.3);border-radius:1rem;padding:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control-panel-3d::-webkit-scrollbar-thumb{background:#2e7d9980;border-radius:2px}.panel-section{padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid rgba(46,125,153,.2)}.particle-controls{display:flex;flex-direction:column;gap:.625rem}.particle-controls.compact{gap:.5rem}.control-row{display:flex;align-items:center;justify-content:space-between}.control-label{font-size:.8rem;font-weight:600}.control-label.proton-label{color:#e74c3c}.control-label.neutron-label{color:#3498db}.control-label.electron-label{color:#2ecc71}.control-buttons{display:flex;align-items:center;gap:.5rem}.control-buttons button{width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;background:#2e7d9933;border:1px solid rgba(46,125,153,.4);border-radius:.375rem;color:#94a3b8;cursor:pointer;transition:all .2s}.control-buttons button:hover:not(:disabled){background:#2e7d9966;color:#fff}.control-buttons button:disabled{opacity:.4;cursor:not-allowed}.control-value{min-width:2rem;text-align:center;font-size:1rem;font-weight:700;color:#fff}.reset-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.75rem;padding:.625rem;background:#e74c3c26;border:1px solid rgba(231,76,60,.3);border-radius:.5rem;color:#e74c3c;font-size:.8rem;cursor:pointer;transition:all .2s}.element-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.375rem}.element-btn{display:flex;flex-direction:column;align-items:center;padding:.375rem;background:#0003;border:2px solid;border-radius:.375rem;cursor:pointer;transition:all .2s}.element-btn:hover{transform:translateY(-2px)}.element-btn.active{background:#ffffff1a;box-shadow:0 0 10px #fff3}.el-number{font-size:.5rem;color:#64748b}.el-symbol{font-size:.75rem;font-weight:700;color:#e2e8f0}.challenge-question{margin-bottom:1rem}.challenge-question p{font-size:.875rem;color:#e2e8f0;margin:0 0 .5rem}.challenge-question .hint{font-size:.8rem;color:#f39c12;font-style:italic}.check-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.75rem;padding:.75rem;background:linear-gradient(135deg,#e74c3c,#c0392b);border:none;border-radius:.5rem;color:#fff;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s}.check-btn:hover{transform:translateY(-2px)}.correct-text{display:flex;align-items:center;justify-content:center;gap:.5rem;color:#2ecc71;font-weight:600}.incorrect-text{display:flex;align-items:center;justify-content:center;gap:.5rem;color:#e74c3c;font-weight:600}.next-btn,.retry-btn{display:inline-flex;align-items:center;gap:.5rem;margin-top:.75rem;padding:.625rem 1.25rem;border:none;border-radius:.5rem;font-size:.875rem;font-weight:600;cursor:pointer}.next-btn{background:linear-gradient(135deg,#2ecc71,#27ae60);color:#fff}.retry-btn{background:#e74c3c26;border:1px solid rgba(231,76,60,.3);color:#e74c3c}.challenge-complete button{padding:.5rem 1.5rem;background:#2e7d994d;border:1px solid #2E7D99;border-radius:.5rem;color:#fff;cursor:pointer}.learn-card li{font-size:.7rem;color:#94a3b8;margin-bottom:.25rem;display:flex;align-items:center;gap:.375rem}.proton-dot,.neutron-dot,.electron-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.proton-dot{background:#e74c3c}.neutron-dot{background:#3498db}.electron-dot{background:#2ecc71}.reaction-dynamics-3d-simulation{position:relative;width:100%;height:100vh;background:linear-gradient(135deg,#0a0a1a,#1a1a2e,#0f0f23);overflow:hidden}.back-btn-3d{position:absolute;top:1rem;left:1rem;z-index:100;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;background:#0f172ae6;border:1px solid rgba(231,76,60,.5);border-radius:.75rem;color:#94a3b8;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.back-btn-3d:hover{border-color:#e74c3c;color:#fff;transform:scale(1.05)}.header-3d{position:absolute;top:1rem;left:50%;transform:translate(-50%);z-index:100;display:flex;align-items:center;gap:1rem;padding:.75rem 1.5rem;background:#0f172af2;border:1px solid rgba(231,76,60,.3);border-radius:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.header-3d h1 svg{color:#e74c3c}.mode-tabs button.active{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff}.action-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:#e74c3c33;border:1px solid rgba(231,76,60,.4);border-radius:.5rem;color:#94a3b8;cursor:pointer;transition:all .2s ease}.action-btn:hover,.action-btn.active{background:#e74c3c66;color:#fff}.reaction-info-panel{position:absolute;top:5rem;left:1rem;z-index:100;width:300px;background:#0f172af2;border:1px solid rgba(231,76,60,.3);border-radius:1rem;padding:1.25rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.reaction-info-panel h2{font-size:1.125rem;color:#fff;margin:0 0 .5rem}.reaction-info-panel .equation{font-size:1.25rem;font-weight:700;color:#e74c3c;margin:0 0 1rem;padding-bottom:1rem;border-bottom:1px solid rgba(231,76,60,.2)}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-bottom:1rem}.stat-item{display:flex;flex-direction:column;padding:.5rem;background:#0003;border-radius:.5rem}.stat-label{font-size:.65rem;color:#64748b}.stat-value.success{color:#2ecc71}.energy-info{margin-bottom:1rem;padding:.75rem;background:#e74c3c1a;border:1px solid rgba(231,76,60,.2);border-radius:.5rem}.energy-row{display:flex;justify-content:space-between;padding:.375rem 0}.energy-row span:first-child{font-size:.75rem;color:#94a3b8}.energy-row span:last-child{font-size:.875rem;font-weight:600;color:#e2e8f0}.energy-row span.reduced{color:#2ecc71;text-decoration:line-through;text-decoration-color:#e74c3c}.energy-row span.exo{color:#e74c3c}.energy-row span.endo{color:#3498db}.reaction-type{text-align:center;font-size:.875rem;font-weight:700;color:#f39c12;margin-top:.5rem;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.1)}.energy-label{padding:.25rem .5rem;background:#000c;border-radius:.25rem;font-size:.6rem;color:#e2e8f0;white-space:nowrap}.energy-label.peak{color:#f39c12;font-weight:700}.energy-label.delta{color:#2ecc71}.control-panel-3d{position:absolute;top:5rem;right:1rem;z-index:100;width:280px;max-height:calc(100vh - 7rem);overflow-y:auto;background:#0f172af2;border:1px solid rgba(231,76,60,.3);border-radius:1rem;padding:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control-panel-3d::-webkit-scrollbar-thumb{background:#e74c3c80;border-radius:2px}.panel-section{padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid rgba(231,76,60,.2)}.reaction-btn{padding:.625rem .75rem;background:#e74c3c1a;border:1px solid rgba(231,76,60,.2);border-radius:.5rem;color:#e2e8f0;font-size:.75rem;text-align:left;cursor:pointer;transition:all .2s}.reaction-btn:hover{background:#e74c3c33;border-color:#e74c3c66}.reaction-btn.active{background:linear-gradient(135deg,#e74c3c4d,#e74c3c26);border-color:#e74c3c}.temp-labels{display:flex;justify-content:space-between;margin-top:.375rem;font-size:.65rem;color:#64748b}.toggle-group input[type=checkbox]{width:1rem;height:1rem;accent-color:#E74C3C}.challenge-header h3{margin:0;color:#e74c3c}.challenge-option{display:flex;align-items:center;justify-content:space-between;padding:.75rem;background:#e74c3c1a;border:1px solid rgba(231,76,60,.2);border-radius:.5rem;color:#e2e8f0;font-size:.8rem;cursor:pointer;transition:all .2s ease;text-align:left}.challenge-option:hover:not(:disabled){background:#e74c3c33;border-color:#e74c3c66}.next-btn{display:inline-flex;align-items:center;gap:.5rem;margin-top:.75rem;padding:.625rem 1.25rem;background:linear-gradient(135deg,#e74c3c,#c0392b);border:none;border-radius:.5rem;color:#fff;font-size:.875rem;font-weight:600;cursor:pointer}.challenge-complete button{padding:.5rem 1.5rem;background:#e74c3c4d;border:1px solid #E74C3C;border-radius:.5rem;color:#fff;cursor:pointer}.learn-card{padding:.75rem;background:#e74c3c1a;border:1px solid rgba(231,76,60,.2);border-radius:.5rem}.learn-card h4{font-size:.8rem;color:#e74c3c;margin:0 0 .5rem}.info-modal-3d{width:100%;max-width:550px;max-height:85vh;overflow-y:auto;background:linear-gradient(135deg,#1a1a2e,#0f0f23);border:1px solid rgba(231,76,60,.4);border-radius:1.5rem}.info-modal-3d .modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(231,76,60,.2);position:sticky;top:0;background:inherit}.info-modal-3d .modal-header h2 svg{color:#e74c3c}.info-modal-3d li strong{color:#e74c3c}.lewis-structure-3d-simulation{position:relative;width:100%;height:100vh;background:linear-gradient(135deg,#0a0a1a,#1a1a2e,#0f0f23);overflow:hidden}.structure-info-panel{position:absolute;top:5rem;left:1rem;z-index:100;width:280px;background:#0f172af2;border:1px solid rgba(155,89,182,.3);border-radius:1rem;padding:1.25rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.structure-info-panel h2{font-size:1.125rem;color:#fff;margin:0 0 .25rem}.structure-info-panel .formula{font-size:1.5rem;font-weight:700;color:#9b59b6;margin:0 0 1rem;padding-bottom:1rem;border-bottom:1px solid rgba(155,89,182,.2)}.electron-counts{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.count-item{display:flex;justify-content:space-between;padding:.375rem 0}.count-label{font-size:.75rem;color:#94a3b8}.count-value{font-size:.875rem;font-weight:700;color:#e2e8f0}.count-value.bonding{color:#2ecc71}.count-value.nonbonding{color:#9b59b6}.bond-order-display{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:#9b59b626;border:1px solid rgba(155,89,182,.3);border-radius:.5rem;margin-bottom:1rem}.bond-order-display span:first-child{font-size:.875rem;color:#e2e8f0}.bond-order-value{font-size:1.5rem;font-weight:700;color:#9b59b6}.structure-info-panel .description{font-size:.75rem;color:#94a3b8;line-height:1.5;margin:0}.atom-label-lewis{padding:.25rem .5rem;border-radius:.25rem;color:#fff;font-size:.8rem;font-weight:700;pointer-events:none;box-shadow:0 2px 8px #0000004d;position:relative}.formal-charge{position:absolute;top:-.5rem;right:-.5rem;font-size:.6rem;background:#e74c3c;padding:.1rem .25rem;border-radius:.25rem}.orbital-label{font-size:.65rem;font-weight:700;white-space:nowrap}.axis-label{font-size:.6rem;color:#94a3b8}.panel-section h3{font-size:.875rem;font-weight:600;color:#e2e8f0;margin:0 0 .75rem}.molecule-buttons{display:flex;flex-direction:column;gap:.375rem}.molecule-btn{display:flex;align-items:center;justify-content:space-between;padding:.625rem .75rem;background:#9b59b61a;border:1px solid rgba(155,89,182,.2);border-radius:.5rem;cursor:pointer;transition:all .2s}.molecule-btn:hover{background:#9b59b633;border-color:#9b59b666}.molecule-btn.active{background:linear-gradient(135deg,#9b59b64d,#9b59b626);border-color:#9b59b6}.mol-formula{font-size:.875rem;font-weight:700;color:#e2e8f0}.mol-name{font-size:.7rem;color:#64748b}.toggle-group{display:flex;flex-direction:column;gap:.5rem}.toggle-group label{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:#94a3b8;cursor:pointer}.toggle-group input[type=checkbox]{width:1rem;height:1rem;accent-color:#9B59B6}.learn-card .formula-note{font-size:.65rem;color:#64748b;margin-top:.25rem}@media(max-width:1024px){.structure-info-panel{display:none}}.equilibrium-dynamics-3d-simulation{position:relative;width:100%;height:100vh;background:linear-gradient(135deg,#0a0a1a,#1a1a2e,#0f0f23);overflow:hidden}.back-btn-3d{position:absolute;top:1rem;left:1rem;z-index:100;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;background:#0f172ae6;border:1px solid rgba(46,204,113,.5);border-radius:.75rem;color:#94a3b8;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.back-btn-3d:hover{border-color:#2ecc71;color:#fff;transform:scale(1.05)}.header-3d{position:absolute;top:1rem;left:50%;transform:translate(-50%);z-index:100;display:flex;align-items:center;gap:1rem;padding:.75rem 1.5rem;background:#0f172af2;border:1px solid rgba(46,204,113,.3);border-radius:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.header-3d h1 svg{color:#2ecc71}.mode-tabs button.active{background:linear-gradient(135deg,#2ecc71,#27ae60);color:#fff}.action-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:#2ecc7133;border:1px solid rgba(46,204,113,.4);border-radius:.5rem;color:#94a3b8;cursor:pointer;transition:all .2s ease}.action-btn:hover,.action-btn.active{background:#2ecc7166;color:#fff}.container-label{padding:.375rem .75rem;border-radius:.375rem;font-size:.75rem;font-weight:700;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.container-label.reactant{background:#3498dbcc}.container-label.product{background:#e74c3ccc}.equilibrium-info-panel{position:absolute;top:5rem;left:1rem;z-index:100;width:300px;background:#0f172af2;border:1px solid rgba(46,204,113,.3);border-radius:1rem;padding:1.25rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.equilibrium-info-panel h2{font-size:1.125rem;color:#fff;margin:0 0 .25rem}.equilibrium-info-panel .equation{font-size:1.125rem;font-weight:700;color:#2ecc71;margin:0 0 1rem;padding-bottom:1rem;border-bottom:1px solid rgba(46,204,113,.2)}.equilibrium-status{text-align:center;margin-bottom:1rem}.status-badge{display:inline-block;padding:.5rem 1rem;border-radius:2rem;font-size:.875rem;font-weight:700}.status-badge.balanced{background:#2ecc7133;border:1px solid #2ECC71;color:#2ecc71}.status-badge.shifting{background:#f39c1233;border:1px solid #F39C12;color:#f39c12;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.concentration-bars{margin-bottom:1rem}.conc-bar{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.conc-label{font-size:.7rem;color:#94a3b8;width:50px}.bar-container{flex:1;height:12px;background:#0000004d;border-radius:6px;overflow:hidden}.bar{height:100%;border-radius:6px;transition:width .3s ease}.bar.reactant{background:linear-gradient(90deg,#3498db,#2980b9)}.bar.product{background:linear-gradient(90deg,#e74c3c,#c0392b)}.conc-value{font-size:.75rem;font-weight:700;color:#e2e8f0;width:50px;text-align:right}.constants-display{margin-bottom:1rem;padding:.75rem;background:#2ecc711a;border:1px solid rgba(46,204,113,.2);border-radius:.5rem}.constant-row{display:flex;justify-content:space-between;padding:.25rem 0}.constant-row span:first-child{font-size:.75rem;color:#94a3b8}.constant-value{font-size:.875rem;font-weight:700;color:#e2e8f0}.constant-value.exo{color:#e74c3c}.constant-value.endo{color:#3498db}.last-change{padding:.5rem .75rem;background:#f39c1226;border:1px solid rgba(243,156,18,.3);border-radius:.5rem;font-size:.75rem;color:#f39c12;margin-bottom:1rem}.equilibrium-info-panel .description{font-size:.75rem;color:#94a3b8;line-height:1.5;margin:0}.control-panel-3d{position:absolute;top:5rem;right:1rem;z-index:100;width:280px;max-height:calc(100vh - 7rem);overflow-y:auto;background:#0f172af2;border:1px solid rgba(46,204,113,.3);border-radius:1rem;padding:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control-panel-3d::-webkit-scrollbar-thumb{background:#2ecc7180;border-radius:2px}.panel-section{padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid rgba(46,204,113,.2)}.reaction-btn{padding:.625rem .75rem;background:#2ecc711a;border:1px solid rgba(46,204,113,.2);border-radius:.5rem;color:#e2e8f0;font-size:.75rem;text-align:left;cursor:pointer;transition:all .2s}.reaction-btn:hover{background:#2ecc7133;border-color:#2ecc7166}.reaction-btn.active{background:linear-gradient(135deg,#2ecc714d,#2ecc7126);border-color:#2ecc71}.temp-slider{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,#3498db,#f39c12,#e74c3c);border-radius:3px;outline:none}.temp-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0000004d}.slider-labels{display:flex;justify-content:space-between;margin-top:.375rem;font-size:.65rem;color:#64748b}.conc-buttons{display:flex;gap:.5rem}.add-btn{flex:1;padding:.625rem;border:none;border-radius:.5rem;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s}.add-btn.reactant{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff}.add-btn.product{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff}.add-btn:hover{transform:translateY(-2px)}.play-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;background:linear-gradient(135deg,#2ecc71,#27ae60);border:none;border-radius:.5rem;color:#fff;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s}.challenge-header h3{margin:0;color:#2ecc71}.score-display{font-size:.875rem;font-weight:700;color:#2ecc71;background:#2ecc7126;padding:.375rem .75rem;border-radius:1rem}.challenge-option{display:flex;align-items:center;justify-content:space-between;padding:.75rem;background:#2ecc711a;border:1px solid rgba(46,204,113,.2);border-radius:.5rem;color:#e2e8f0;font-size:.8rem;cursor:pointer;transition:all .2s ease;text-align:left}.challenge-option:hover:not(:disabled){background:#2ecc7133;border-color:#2ecc7166}.next-btn{display:inline-flex;align-items:center;gap:.5rem;margin-top:.75rem;padding:.625rem 1.25rem;background:linear-gradient(135deg,#2ecc71,#27ae60);border:none;border-radius:.5rem;color:#fff;font-size:.875rem;font-weight:600;cursor:pointer}.challenge-complete{padding:1rem 0}.challenge-complete button{padding:.5rem 1.5rem;background:#2ecc714d;border:1px solid #2ECC71;border-radius:.5rem;color:#fff;cursor:pointer}.learn-card{padding:.75rem;background:#2ecc711a;border:1px solid rgba(46,204,113,.2);border-radius:.5rem}.learn-card h4{font-size:.8rem;color:#2ecc71;margin:0 0 .5rem}.info-modal-3d{width:100%;max-width:550px;max-height:85vh;overflow-y:auto;background:linear-gradient(135deg,#1a1a2e,#0f0f23);border:1px solid rgba(46,204,113,.4);border-radius:1.5rem}.info-modal-3d .modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(46,204,113,.2);position:sticky;top:0;background:inherit}.info-modal-3d .modal-header h2 svg{color:#2ecc71}.info-modal-3d li strong{color:#2ecc71}@media(max-width:1024px){.equilibrium-info-panel{display:none}}@media(max-width:768px){.header-3d{flex-wrap:wrap;justify-content:center}.header-3d h1{font-size:.875rem}.control-panel-3d{position:fixed;inset:auto 0 0;width:100%;max-height:45vh;border-radius:1rem 1rem 0 0}}.organic-chemistry-3d-simulation{position:relative;width:100%;height:100vh;background:linear-gradient(135deg,#0a0a1a,#1a1a2e,#0f0f23);overflow:hidden}.molecule-label{padding:.375rem .75rem;border-radius:.375rem;font-size:.75rem;font-weight:700;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.molecule-label.reactant{background:#3498dbcc}.molecule-label.product{background:#2ecc71cc}.reaction-info-panel{position:absolute;top:5rem;left:1rem;z-index:100;width:320px;background:#0f172af2;border:1px solid rgba(155,89,182,.3);border-radius:1rem;padding:1.25rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.reaction-info-panel h2{font-size:1.125rem;color:#fff;margin:0 0 .25rem}.reaction-info-panel .equation{font-size:1.125rem;font-weight:700;color:#9b59b6;margin:0 0 1rem;padding-bottom:1rem;border-bottom:1px solid rgba(155,89,182,.2)}.reaction-type-badge{display:inline-block;padding:.375rem .75rem;border-radius:1rem;font-size:.75rem;font-weight:700;margin-bottom:1rem}.reaction-type-badge.sn1{background:#3498db33;border:1px solid #3498DB;color:#3498db}.reaction-type-badge.sn2{background:#2ecc7133;border:1px solid #2ECC71;color:#2ecc71}.reaction-type-badge.e1{background:#f39c1233;border:1px solid #F39C12;color:#f39c12}.reaction-type-badge.e2{background:#e74c3c33;border:1px solid #E74C3C;color:#e74c3c}.reaction-type-badge.addition{background:#9b59b633;border:1px solid #9B59B6;color:#9b59b6}.mechanism-steps{margin-bottom:1rem}.mechanism-steps h4{font-size:.8rem;color:#e2e8f0;margin:0 0 .75rem}.step-list{display:flex;flex-direction:column;gap:.5rem}.step-item{display:flex;align-items:flex-start;gap:.75rem;padding:.625rem;background:#9b59b61a;border:1px solid rgba(155,89,182,.2);border-radius:.5rem;transition:all .2s}.step-item.active{background:#9b59b633;border-color:#9b59b6}.step-item.completed{background:#2ecc711a;border-color:#2ecc7166}.step-number{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;background:#9b59b64d;border-radius:50%;font-size:.7rem;font-weight:700;color:#fff;flex-shrink:0}.step-item.active .step-number{background:#9b59b6}.step-item.completed .step-number{background:#2ecc71}.step-content{flex:1}.step-content p{font-size:.75rem;color:#94a3b8;margin:0;line-height:1.4}.step-item.active .step-content p{color:#e2e8f0}.characteristics-list{display:flex;flex-wrap:wrap;gap:.375rem;margin-bottom:1rem}.char-badge{padding:.25rem .5rem;background:#9b59b626;border-radius:.375rem;font-size:.65rem;color:#94a3b8}.reaction-info-panel .description{font-size:.75rem;color:#94a3b8;line-height:1.5;margin:0}.reaction-buttons{display:flex;flex-direction:column;gap:.375rem}.reaction-btn{padding:.625rem .75rem;background:#9b59b61a;border:1px solid rgba(155,89,182,.2);border-radius:.5rem;color:#e2e8f0;font-size:.75rem;text-align:left;cursor:pointer;transition:all .2s}.reaction-btn:hover{background:#9b59b633;border-color:#9b59b666}.reaction-btn.active{background:linear-gradient(135deg,#9b59b64d,#9b59b626);border-color:#9b59b6}.reaction-btn .reaction-name{font-weight:600;display:block;margin-bottom:.25rem}.reaction-btn .reaction-type{font-size:.65rem;color:#94a3b8}.mechanism-controls{display:flex;flex-direction:column;gap:.75rem}.step-nav{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.step-label{font-size:.8rem;color:#e2e8f0;font-weight:600}.nav-buttons{display:flex;gap:.375rem}.nav-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:#9b59b633;border:1px solid rgba(155,89,182,.3);border-radius:.375rem;color:#94a3b8;cursor:pointer;transition:all .2s}.nav-btn:hover:not(:disabled){background:#9b59b666;color:#fff}.nav-btn:disabled{opacity:.4;cursor:not-allowed}.toggle-container{display:flex;align-items:center;justify-content:space-between}.toggle-label{font-size:.8rem;color:#94a3b8}.toggle-switch{position:relative;width:44px;height:24px;background:#0000004d;border-radius:12px;cursor:pointer;transition:background .2s}.toggle-switch.active{background:linear-gradient(135deg,#9b59b6,#8e44ad)}.toggle-switch:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s}.toggle-switch.active:after{transform:translate(20px)}.control-buttons{display:flex;gap:.5rem}.play-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;background:linear-gradient(135deg,#9b59b6,#8e44ad);border:none;border-radius:.5rem;color:#fff;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s}.play-btn.playing{background:linear-gradient(135deg,#f39c12,#e67e22)}.play-btn:hover{transform:translateY(-2px)}.reset-btn{display:flex;align-items:center;gap:.375rem;padding:.75rem 1rem;background:#e74c3c26;border:1px solid rgba(231,76,60,.3);border-radius:.5rem;color:#e74c3c;font-size:.8rem;cursor:pointer;transition:all .2s}.learn-card{padding:.75rem;background:#9b59b61a;border:1px solid rgba(155,89,182,.2);border-radius:.5rem}.learn-card h4{font-size:.8rem;color:#9b59b6;margin:0 0 .5rem}.functional-groups{display:flex;flex-direction:column;gap:.375rem}.functional-group-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#0003;border-radius:.375rem}.fg-color{width:.75rem;height:.75rem;border-radius:.25rem}.fg-name{font-size:.7rem;color:#e2e8f0;flex:1}.fg-formula{font-size:.65rem;color:#94a3b8;font-family:monospace}.tip-section{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem;background:#ff9a441a;border:1px solid rgba(255,154,68,.2);border-radius:.5rem}.tip-section svg{color:#ff9a44;flex-shrink:0;margin-top:2px}.electron-arrow{animation:electronFlow 2s ease-in-out infinite}@keyframes electronFlow{0%,to{opacity:.6}50%{opacity:1}}.titration-3d-simulation{position:relative;width:100%;height:100vh;background:linear-gradient(135deg,#0a0a1a,#1a1a2e,#0f0f23);overflow:hidden}.back-btn-3d{position:absolute;top:1rem;left:1rem;z-index:100;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;background:#0f172ae6;border:1px solid rgba(78,205,196,.5);border-radius:.75rem;color:#94a3b8;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.back-btn-3d:hover{border-color:#4ecdc4;color:#fff;transform:scale(1.05)}.header-3d{position:absolute;top:1rem;left:50%;transform:translate(-50%);z-index:100;display:flex;align-items:center;gap:1rem;padding:.75rem 1.5rem;background:#0f172af2;border:1px solid rgba(78,205,196,.3);border-radius:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.header-3d h1 svg{color:#4ecdc4}.mode-tabs button.active{background:linear-gradient(135deg,#4ecdc4,#45b7aa);color:#fff}.action-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:#4ecdc433;border:1px solid rgba(78,205,196,.4);border-radius:.5rem;color:#94a3b8;cursor:pointer;transition:all .2s ease}.action-btn:hover,.action-btn.active{background:#4ecdc466;color:#fff}.burette-label{padding:.25rem .5rem;background:#4ecdc4cc;border-radius:.25rem;font-size:.7rem;font-weight:700;color:#fff}.flask-label{display:flex;flex-direction:column;align-items:center;padding:.375rem .75rem;background:#0f172ae6;border:1px solid rgba(78,205,196,.3);border-radius:.5rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.flask-label .formula{font-size:.875rem;font-weight:700;color:#ff6b6b}.flask-label .info{font-size:.625rem;color:#94a3b8}.ph-display-3d{display:flex;flex-direction:column;align-items:center;padding:.5rem 1rem}.ph-display-3d .ph-value{font-size:2rem;font-weight:700;font-family:Roboto Mono,monospace;text-shadow:0 0 10px currentColor}.ph-display-3d .ph-label{font-size:.75rem;color:#94a3b8}.titration-curve-panel{padding:.75rem;background:#0f172af2;border:1px solid rgba(78,205,196,.3);border-radius:.75rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.titration-curve-panel h4{font-size:.75rem;color:#e2e8f0;margin:0 0 .5rem}.curve-legend{display:flex;gap:.75rem;margin-top:.5rem;font-size:.625rem;color:#94a3b8}.titration-info-panel{position:absolute;top:5rem;left:1rem;z-index:100;width:280px;background:#0f172af2;border:1px solid rgba(78,205,196,.3);border-radius:1rem;padding:1.25rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.titration-info-panel h2{font-size:1rem;color:#fff;margin:0 0 .25rem}.reaction-equation{font-size:.875rem;font-weight:600;color:#4ecdc4;margin:0 0 1rem;padding-bottom:.75rem;border-bottom:1px solid rgba(78,205,196,.2)}.titration-stats{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1rem}.stat-item{display:flex;flex-direction:column;padding:.5rem;background:#4ecdc41a;border-radius:.5rem}.stat-label{font-size:.625rem;color:#94a3b8;margin-bottom:.25rem}.stat-value{font-size:1rem;font-weight:700;color:#e2e8f0}.stat-value.ph{font-family:Roboto Mono,monospace;font-size:1.25rem}.status-badge{padding:.5rem .75rem;background:#4ecdc426;border:1px solid rgba(78,205,196,.3);border-radius:.5rem;font-size:.75rem;color:#4ecdc4;text-align:center;margin-bottom:.75rem}.status-badge.warning{background:#f39c1226;border-color:#f39c124d;color:#f39c12}.solution-type{font-size:.8rem;color:#94a3b8;text-align:center}.control-panel-3d{position:absolute;top:5rem;right:1rem;z-index:100;width:280px;max-height:calc(100vh - 7rem);overflow-y:auto;background:#0f172af2;border:1px solid rgba(78,205,196,.3);border-radius:1rem;padding:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control-panel-3d::-webkit-scrollbar-thumb{background:#4ecdc480;border-radius:2px}.panel-section{padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid rgba(78,205,196,.2)}.select-group select{width:100%;padding:.5rem;background:#0000004d;border:1px solid rgba(78,205,196,.3);border-radius:.375rem;color:#e2e8f0;font-size:.75rem;cursor:pointer}.select-group select:focus{outline:none;border-color:#4ecdc4}.slider-group{margin-bottom:.75rem}.slider-group label{display:block;font-size:.75rem;color:#94a3b8;margin-bottom:.375rem}.slider-group input[type=range]{width:100%;height:6px;background:#4ecdc433;border-radius:3px;outline:none;cursor:pointer;-webkit-appearance:none}.slider-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:linear-gradient(135deg,#4ecdc4,#45b7aa);border-radius:50%;cursor:pointer;transition:transform .2s}.slider-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.drop-btn{width:100%;padding:.75rem;background:linear-gradient(135deg,#4ecdc4,#45b7aa);border:none;border-radius:.5rem;color:#fff;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s;margin-bottom:.5rem}.drop-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #4ecdc44d}.drop-btn.active{background:linear-gradient(135deg,#3498db,#2980b9);animation:pulse .5s infinite alternate}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(.98)}}.challenge-header h3{margin:0;color:#4ecdc4}.score-display{font-size:.875rem;font-weight:700;color:#4ecdc4;background:#4ecdc426;padding:.375rem .75rem;border-radius:1rem}.challenge-option{display:flex;align-items:center;justify-content:space-between;padding:.75rem;background:#4ecdc41a;border:1px solid rgba(78,205,196,.2);border-radius:.5rem;color:#e2e8f0;font-size:.8rem;cursor:pointer;transition:all .2s ease;text-align:left}.challenge-option:hover:not(:disabled){background:#4ecdc433;border-color:#4ecdc466}.next-btn{display:inline-flex;align-items:center;gap:.5rem;margin-top:.75rem;padding:.625rem 1.25rem;background:linear-gradient(135deg,#4ecdc4,#45b7aa);border:none;border-radius:.5rem;color:#fff;font-size:.875rem;font-weight:600;cursor:pointer}.challenge-complete button{padding:.5rem 1.5rem;background:#4ecdc44d;border:1px solid #4ECDC4;border-radius:.5rem;color:#fff;cursor:pointer}.learn-card{padding:.75rem;background:#4ecdc41a;border:1px solid rgba(78,205,196,.2);border-radius:.5rem}.learn-card h4{font-size:.8rem;color:#4ecdc4;margin:0 0 .5rem}.tip-section{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem;background:#4ecdc41a;border:1px solid rgba(78,205,196,.2);border-radius:.5rem}.tip-section svg{color:#4ecdc4;flex-shrink:0;margin-top:2px}.info-modal-3d{width:100%;max-width:550px;max-height:85vh;overflow-y:auto;background:linear-gradient(135deg,#1a1a2e,#0f0f23);border:1px solid rgba(78,205,196,.4);border-radius:1.5rem}.info-modal-3d .modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(78,205,196,.2);position:sticky;top:0;background:inherit}.info-modal-3d .modal-header h2 svg{color:#4ecdc4}.info-modal-3d li strong{color:#4ecdc4}@media(max-width:1024px){.titration-info-panel{display:none}}.electrochemistry-3d-simulation{position:relative;width:100%;height:100vh;background:linear-gradient(135deg,#0a0a1a,#1a1a2e,#0f0f23);overflow:hidden}.beaker-label{display:flex;flex-direction:column;align-items:center;padding:.5rem .75rem;background:#0f172af2;border-radius:.5rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.beaker-label.anode{border:1px solid rgba(231,76,60,.5)}.beaker-label.cathode{border:1px solid rgba(46,204,113,.5)}.beaker-label .electrode-type{font-size:.75rem;font-weight:700;color:#e2e8f0}.beaker-label.anode .electrode-type{color:#e74c3c}.beaker-label.cathode .electrode-type{color:#2ecc71}.beaker-label .symbol{font-size:1.25rem;font-weight:700;color:#fff}.beaker-label .reaction{font-size:.625rem;color:#94a3b8}.salt-bridge-label{padding:.25rem .5rem;background:#f39c12e6;border-radius:.25rem;font-size:.625rem;font-weight:600;color:#fff}.voltmeter-display{display:flex;flex-direction:column;align-items:center;padding:.5rem}.voltmeter-display .voltage{font-size:1.5rem;font-weight:700;font-family:Roboto Mono,monospace}.voltmeter-display .voltage.positive{color:#2ecc71;text-shadow:0 0 10px rgba(46,204,113,.5)}.voltmeter-display .voltage.negative{color:#e74c3c;text-shadow:0 0 10px rgba(231,76,60,.5)}.voltmeter-display .status{font-size:.625rem;color:#94a3b8}.reaction-label{display:flex;flex-direction:column;align-items:center;padding:.5rem .75rem;background:#0f172af2;border-radius:.5rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.reaction-label.anode{border:1px solid rgba(231,76,60,.3)}.reaction-label.cathode{border:1px solid rgba(46,204,113,.3)}.reaction-label .title{font-size:.7rem;font-weight:600;margin-bottom:.25rem}.reaction-label.anode .title{color:#e74c3c}.reaction-label.cathode .title{color:#2ecc71}.reaction-label .equation{font-size:.75rem;color:#e2e8f0;font-family:Roboto Mono,monospace}.electron-flow-label{display:flex;flex-direction:column;align-items:center;padding:.375rem .75rem;background:#3498db33;border:1px solid rgba(52,152,219,.5);border-radius:.5rem}.electron-flow-label span:first-child{font-size:1rem;font-weight:700;color:#3498db}.electron-flow-label span:last-child{font-size:.6rem;color:#94a3b8}.electro-info-panel{position:absolute;top:5rem;left:1rem;z-index:100;width:280px;background:#0f172af2;border:1px solid rgba(243,156,18,.3);border-radius:1rem;padding:1.25rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.electro-info-panel h2{display:flex;align-items:center;gap:.5rem;font-size:1rem;color:#fff;margin:0 0 .5rem}.electro-info-panel h2 svg{color:#f39c12}.cell-equation{font-size:.875rem;font-weight:600;font-family:Roboto Mono,monospace;color:#f39c12;padding:.5rem;background:#f39c121a;border-radius:.375rem;text-align:center;margin-bottom:1rem}.electro-stats{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:.375rem .5rem;background:#ffffff0d;border-radius:.375rem}.stat-row.highlight{background:#f39c121a;border:1px solid rgba(243,156,18,.3)}.stat-value.anode{color:#e74c3c}.stat-value.cathode,.stat-value.positive{color:#2ecc71}.stat-value.negative{color:#e74c3c}.status-badge{padding:.625rem;border-radius:.5rem;font-size:.875rem;font-weight:600;text-align:center;margin-bottom:1rem}.status-badge.spontaneous{background:#2ecc7126;border:1px solid rgba(46,204,113,.4);color:#2ecc71}.status-badge.non-spontaneous{background:#e74c3c26;border:1px solid rgba(231,76,60,.4);color:#e74c3c}.formula-box{display:flex;flex-direction:column;gap:.25rem;padding:.75rem;background:#f39c121a;border:1px solid rgba(243,156,18,.2);border-radius:.5rem}.formula-box .formula{font-size:.8rem;font-weight:600;color:#f39c12}.formula-box .calculation{font-size:.7rem;color:#94a3b8;font-family:Roboto Mono,monospace}.select-group{margin-bottom:.75rem}.select-group label{display:block;font-size:.75rem;color:#94a3b8;margin-bottom:.25rem}.select-group select{width:100%;padding:.5rem;background:#0000004d;border:1px solid rgba(243,156,18,.3);border-radius:.375rem;color:#e2e8f0;font-size:.75rem;cursor:pointer}.select-group select:focus{outline:none;border-color:#f39c12}.toggle-group input[type=checkbox]{width:1rem;height:1rem;accent-color:#F39C12;cursor:pointer}.reset-btn{display:flex;align-items:center;justify-content:center;gap:.375rem;width:100%;padding:.625rem;background:#e74c3c26;border:1px solid rgba(231,76,60,.3);border-radius:.5rem;color:#e74c3c;font-size:.8rem;cursor:pointer;transition:all .2s}.reset-btn:hover{background:#e74c3c40}.learn-card{padding:.75rem;background:#f39c121a;border:1px solid rgba(243,156,18,.2);border-radius:.5rem}.learn-card h4{font-size:.8rem;color:#f39c12;margin:0 0 .5rem}.info-modal-3d{width:100%;max-width:550px;max-height:85vh;overflow-y:auto;background:linear-gradient(135deg,#1a1a2e,#0f0f23);border:1px solid rgba(243,156,18,.4);border-radius:1.5rem}@media(max-width:1024px){.electro-info-panel{display:none}}.periodic-table-3d-simulation{position:relative;width:100%;height:100vh;background:linear-gradient(135deg,#0a0a1a,#1a1a2e,#0f0f23);overflow:hidden}.view-toggle{display:flex;gap:.25rem;background:#0000004d;padding:.25rem;border-radius:.5rem}.view-toggle button{padding:.5rem .625rem;background:transparent;border:none;border-radius:.375rem;color:#94a3b8;font-size:.7rem;cursor:pointer;transition:all .2s}.view-toggle button.active{background:#3498db4d;color:#3498db}.action-btn:hover{background:#3498db66;color:#fff}.atom-3d-label{display:flex;flex-direction:column;align-items:center;padding:.5rem 1rem;background:#0f172af2;border:1px solid rgba(52,152,219,.4);border-radius:.75rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.atom-3d-label .symbol{font-size:2rem;font-weight:700;color:#3498db}.atom-3d-label .name{font-size:.875rem;color:#e2e8f0}.atom-3d-label .config{font-size:.75rem;color:#94a3b8;font-family:Roboto Mono,monospace}.element-cell-label{display:flex;flex-direction:column;align-items:center;padding:.25rem;cursor:pointer;transition:transform .2s}.element-cell-label.selected{transform:scale(1.1)}.element-cell-label .number{font-size:.5rem;color:#000000b3}.element-cell-label .symbol{font-size:.875rem;font-weight:700;color:#000000e6}.element-info-panel{position:absolute;top:5rem;left:1rem;z-index:100;width:280px;background:#0f172af2;border:1px solid rgba(52,152,219,.3);border-radius:1rem;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.element-header{display:flex;flex-direction:column;align-items:center;padding:1.25rem;border-bottom:1px solid rgba(52,152,219,.2)}.element-number{font-size:.75rem;color:#94a3b8}.element-symbol{font-size:3rem;font-weight:700;color:#fff;line-height:1}.element-mass{font-size:.875rem;color:#94a3b8;font-family:Roboto Mono,monospace}.element-info-panel h2{font-size:1.25rem;color:#fff;margin:0;padding:.75rem 1rem 0;text-align:center}.element-name-en{font-size:.8rem;color:#64748b;text-align:center;margin:.25rem 0 1rem}.element-details{padding:0 1rem 1rem}.detail-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid rgba(52,152,219,.1)}.detail-row:last-child{border-bottom:none}.detail-row span:first-child{font-size:.75rem;color:#94a3b8}.detail-row span:last-child{font-size:.8rem;font-weight:600;color:#e2e8f0}.category-badge{padding:.25rem .5rem;border-radius:.25rem;font-size:.7rem!important;text-transform:capitalize;color:#000c!important}.config{font-family:Roboto Mono,monospace;color:#3498db!important}.valence{font-size:1rem!important;color:#e74c3c!important}.shell-visualization{padding:1rem;background:#3498db1a}.shell-visualization h4{font-size:.75rem;color:#94a3b8;margin:0 0 .75rem}.shells{display:flex;justify-content:center;gap:.5rem}.shell{display:flex;flex-direction:column;align-items:center;padding:.5rem;background:#3498db33;border-radius:.5rem;min-width:45px}.shell-name{font-size:.7rem;color:#64748b}.shell-count{font-size:1.25rem;font-weight:700;color:#3498db}.search-input{width:100%;padding:.625rem;background:#0000004d;border:1px solid rgba(52,152,219,.3);border-radius:.5rem;color:#e2e8f0;font-size:.8rem}.search-input:focus{outline:none;border-color:#3498db}.search-input::placeholder{color:#64748b}.element-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.375rem}.element-btn{display:flex;flex-direction:column;align-items:center;padding:.5rem .25rem;background:#3498db33;border:1px solid rgba(52,152,219,.2);border-radius:.5rem;cursor:pointer;transition:all .2s ease}.element-btn:hover{transform:scale(1.05);border-color:#3498db80}.element-btn.selected{border-color:#3498db;box-shadow:0 0 10px #3498db4d}.element-btn .symbol{font-size:1rem;font-weight:700;color:#fff}.element-btn .number{font-size:.6rem;color:#94a3b8}.more-hint{font-size:.7rem;color:#64748b;text-align:center;margin:.5rem 0 0}.category-legend{display:grid;grid-template-columns:repeat(2,1fr);gap:.375rem}.legend-item{display:flex;align-items:center;gap:.375rem}.legend-color{width:12px;height:12px;border-radius:2px}.legend-label{font-size:.65rem;color:#94a3b8;text-transform:capitalize}.learn-card{padding:.75rem;background:#3498db1a;border:1px solid rgba(52,152,219,.2);border-radius:.5rem}.learn-card h4{font-size:.8rem;color:#3498db;margin:0 0 .5rem}.learn-card li{font-size:.7rem;color:#94a3b8;margin-bottom:.25rem}.info-modal-3d{width:100%;max-width:550px;max-height:85vh;overflow-y:auto;background:linear-gradient(135deg,#1a1a2e,#0f0f23);border:1px solid rgba(52,152,219,.4);border-radius:1.5rem}@media(max-width:1024px){.element-info-panel{display:none}}@media(max-width:480px){.mode-tabs button{padding:.375rem .5rem;font-size:.65rem}.view-toggle{display:none}}.electrolyte-test-3d-simulation{position:relative;width:100%;height:100vh;background:linear-gradient(135deg,#0a0a1a,#1a1a2e,#0f0f23);overflow:hidden}.back-btn-3d{position:absolute;top:1rem;left:1rem;z-index:100;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;background:#0f172ae6;border:1px solid rgba(39,174,96,.5);border-radius:.75rem;color:#94a3b8;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.back-btn-3d:hover{border-color:#27ae60;color:#fff;transform:scale(1.05)}.header-3d{position:absolute;top:1rem;left:50%;transform:translate(-50%);z-index:100;display:flex;align-items:center;gap:1rem;padding:.75rem 1.5rem;background:#0f172af2;border:1px solid rgba(39,174,96,.3);border-radius:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.header-3d h1 svg{color:#27ae60}.mode-tabs button.active{background:linear-gradient(135deg,#27ae60,#1e8449);color:#fff}.action-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:#27ae6033;border:1px solid rgba(39,174,96,.4);border-radius:.5rem;color:#94a3b8;cursor:pointer;transition:all .2s ease}.action-btn:hover,.action-btn.active{background:#27ae6066;color:#fff}.ion-label{padding:.125rem .25rem;border-radius:.25rem;font-size:.6rem;font-weight:700;font-family:Roboto Mono,monospace;white-space:nowrap}.ion-label.positive{background:#e74c3ce6;color:#fff}.ion-label.negative{background:#3498dbe6;color:#fff}.solution-label{display:flex;flex-direction:column;align-items:center;padding:.5rem .75rem;background:#0f172af2;border:1px solid rgba(39,174,96,.4);border-radius:.5rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.solution-label .formula{font-size:1.25rem;font-weight:700;color:#27ae60;font-family:Roboto Mono,monospace}.solution-label .name{font-size:.7rem;color:#94a3b8}.bulb-status{padding:.375rem .75rem;border-radius:1rem;font-size:.75rem;font-weight:700;text-align:center}.bulb-status.bright{background:#ffeb3b4d;border:2px solid #FFEB3B;color:#ffeb3b;animation:glow-pulse 1s ease-in-out infinite}.bulb-status.dim{background:#ffeb3b26;border:1px solid rgba(255,235,59,.5);color:#f39c12}.bulb-status.off{background:#6464644d;border:1px solid #666;color:#666}@keyframes glow-pulse{0%,to{box-shadow:0 0 10px #ffeb3b80}50%{box-shadow:0 0 20px #ffeb3bcc}}.result-indicator{display:flex;flex-direction:column;gap:.75rem;padding:1rem;background:#0f172af2;border:1px solid rgba(39,174,96,.3);border-radius:.75rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:180px;opacity:0;transform:translate(20px);transition:all .3s ease}.result-indicator.active{opacity:1;transform:translate(0)}.type-badge{padding:.5rem 1rem;border-radius:.5rem;font-size:.75rem;font-weight:700;color:#fff;text-align:center}.conductivity-bar{display:flex;flex-direction:column;gap:.25rem}.conductivity-bar .bar-label{font-size:.65rem;color:#94a3b8}.conductivity-bar .bar-container{height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden}.conductivity-bar .bar-fill{height:100%;border-radius:4px;transition:width .5s ease}.conductivity-bar .bar-value{font-size:.7rem;font-weight:600;color:#e2e8f0;text-align:right}.solution-info-panel{position:absolute;top:5rem;left:1rem;z-index:100;width:280px;background:#0f172af2;border:1px solid rgba(39,174,96,.3);border-radius:1rem;padding:1.25rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.solution-info-panel h2 svg{color:#27ae60}.formula-display{font-size:2rem;font-weight:700;font-family:Roboto Mono,monospace;color:#27ae60;text-align:center;padding:.75rem;background:#27ae601a;border-radius:.5rem;margin-bottom:1rem}.info-stats{display:flex;flex-direction:column;gap:.625rem;margin-bottom:1rem}.stat-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.stat-label{font-size:.75rem;color:#94a3b8;flex-shrink:0}.stat-value{font-size:.8rem;font-weight:600;color:#e2e8f0}.progress-bar{flex:1;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.progress-fill{height:100%;border-radius:3px;transition:width .5s ease}.ionization-box{padding:.75rem;background:#27ae601a;border:1px solid rgba(39,174,96,.2);border-radius:.5rem;margin-bottom:1rem}.ionization-box h4{font-size:.75rem;color:#27ae60;margin:0 0 .5rem}.ions-display{display:flex;flex-wrap:wrap;gap:.375rem}.ion-badge{padding:.25rem .5rem;border-radius:.25rem;font-size:.7rem;font-weight:600;font-family:Roboto Mono,monospace}.ion-badge.cation{background:#e74c3c33;color:#e74c3c;border:1px solid rgba(231,76,60,.4)}.ion-badge.anion{background:#3498db33;color:#3498db;border:1px solid rgba(52,152,219,.4)}.no-ions{font-size:.75rem;color:#64748b;font-style:italic;margin:0}.control-panel-3d{position:absolute;top:5rem;right:1rem;z-index:100;width:280px;max-height:calc(100vh - 7rem);overflow-y:auto;background:#0f172af2;border:1px solid rgba(39,174,96,.3);border-radius:1rem;padding:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control-panel-3d::-webkit-scrollbar-thumb{background:#27ae6080;border-radius:2px}.panel-section{padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid rgba(39,174,96,.2)}.filter-buttons button{flex:1;padding:.5rem;background:#27ae601a;border:1px solid rgba(39,174,96,.2);border-radius:.375rem;color:#94a3b8;font-size:.7rem;cursor:pointer;transition:all .2s}.filter-buttons button:hover{background:#27ae6033}.filter-buttons button.active{background:#27ae604d;border-color:#27ae60;color:#27ae60}.solution-btn{display:flex;flex-direction:column;align-items:center;padding:.5rem;background:#27ae600d;border:1px solid rgba(39,174,96,.2);border-radius:.5rem;cursor:pointer;transition:all .2s ease}.solution-btn:hover{background:#27ae6026}.solution-btn.selected{border-width:2px}.solution-btn .sol-formula{font-size:.75rem;font-weight:700;font-family:Roboto Mono,monospace;color:#e2e8f0}.solution-btn .sol-type{font-size:.65rem}.toggle-group input[type=checkbox]{width:1rem;height:1rem;accent-color:#27AE60;cursor:pointer}.challenge-header h3{margin:0;color:#27ae60}.score-display{font-size:.875rem;font-weight:700;color:#27ae60;background:#27ae6026;padding:.375rem .75rem;border-radius:1rem}.challenge-option{display:flex;align-items:center;justify-content:space-between;padding:.75rem;background:#27ae601a;border:1px solid rgba(39,174,96,.2);border-radius:.5rem;color:#e2e8f0;font-size:.8rem;cursor:pointer;transition:all .2s ease;text-align:left}.challenge-option:hover:not(:disabled){background:#27ae6033;border-color:#27ae6066}.next-btn{display:inline-flex;align-items:center;gap:.5rem;margin-top:.75rem;padding:.625rem 1.25rem;background:linear-gradient(135deg,#27ae60,#1e8449);border:none;border-radius:.5rem;color:#fff;font-size:.875rem;font-weight:600;cursor:pointer}.challenge-complete button{padding:.5rem 1.5rem;background:#27ae604d;border:1px solid #27AE60;border-radius:.5rem;color:#fff;cursor:pointer}.learn-card.strong{background:#27ae601a;border:1px solid rgba(39,174,96,.3)}.learn-card.weak{background:#f39c121a;border:1px solid rgba(243,156,18,.3)}.learn-card.non{background:#e74c3c1a;border:1px solid rgba(231,76,60,.3)}.learn-card.formula{background:#3498db1a;border:1px solid rgba(52,152,219,.3)}.learn-card.strong h4{color:#27ae60}.learn-card.weak h4{color:#f39c12}.learn-card.non h4{color:#e74c3c}.learn-card.formula h4{color:#3498db}.tip-section{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem;background:#27ae601a;border:1px solid rgba(39,174,96,.2);border-radius:.5rem}.tip-section svg{color:#27ae60;flex-shrink:0;margin-top:2px}.info-modal-3d{width:100%;max-width:550px;max-height:85vh;overflow-y:auto;background:linear-gradient(135deg,#1a1a2e,#0f0f23);border:1px solid rgba(39,174,96,.4);border-radius:1.5rem}.info-modal-3d .modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(39,174,96,.2);position:sticky;top:0;background:inherit}.info-modal-3d .modal-header h2 svg{color:#27ae60}.info-modal-3d li strong{color:#27ae60}.comparison-table{background:#0000004d;border-radius:.5rem;overflow:hidden}.table-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;padding:.75rem 1rem;font-size:.8rem;color:#e2e8f0}.table-row.header{background:#27ae6033;font-weight:600}.table-row:not(.header){border-top:1px solid rgba(39,174,96,.1)}.acid-base-test-3d-simulation{position:relative;width:100%;height:100vh;background:linear-gradient(135deg,#1a0a1a,#2e1a2e,#0f0a1f);overflow:hidden}.ph-meter-display{display:flex;flex-direction:column;align-items:center;font-family:Roboto Mono,monospace}.ph-meter-display .ph-label{font-size:.6rem;color:#94a3b8}.ph-meter-display .ph-value{font-size:1.5rem;font-weight:700}.meter-label{font-size:.65rem;color:#9b59b6;background:#0f172ae6;padding:.25rem .5rem;border-radius:.25rem;white-space:nowrap}.solution-tube-label{display:flex;flex-direction:column;align-items:center;padding:.5rem .75rem;background:#0f172af2;border:1px solid rgba(155,89,182,.4);border-radius:.5rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.solution-tube-label .formula{font-size:1.25rem;font-weight:700;color:#9b59b6;font-family:Roboto Mono,monospace}.solution-tube-label .name{font-size:.7rem;color:#94a3b8}.ph-scale-label .scale-title{font-size:.75rem;font-weight:600;color:#e2e8f0;background:#0f172ae6;padding:.25rem .5rem;border-radius:.25rem}.ph-number{font-size:.6rem;font-weight:600;color:#e2e8f0;font-family:Roboto Mono,monospace}.ph-category{font-size:.55rem;font-weight:700;padding:.15rem .3rem;border-radius:.2rem}.ph-category.acid{background:#e74c3c4d;color:#e74c3c}.ph-category.neutral{background:#27ae604d;color:#27ae60}.ph-category.base{background:#3498db4d;color:#3498db}.dropper-label{font-size:.65rem;color:#9b59b6;background:#0f172ae6;padding:.25rem .5rem;border-radius:.25rem;white-space:nowrap}.ion-label-small{font-size:.5rem;font-weight:700;padding:.1rem .2rem;border-radius:.15rem;font-family:Roboto Mono,monospace}.ion-label-small.acid{background:#e74c3ccc;color:#fff}.ion-label-small.base{background:#3498dbcc;color:#fff}.result-panel-3d{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;background:#0f172af2;border:1px solid rgba(155,89,182,.3);border-radius:.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:140px;opacity:0;transform:translate(20px);transition:all .3s ease}.result-panel-3d.active{opacity:1;transform:translate(0)}.result-type{padding:.5rem;border-radius:.375rem;font-size:.875rem;font-weight:700;color:#fff;text-align:center}.result-details .detail-row{display:flex;justify-content:space-between;font-size:.7rem;color:#94a3b8;padding:.25rem 0}.result-details .value{font-weight:600;color:#e2e8f0}.indicator-result{margin-top:.5rem;padding-top:.5rem;border-top:1px solid rgba(155,89,182,.2);font-size:.7rem}.indicator-result .ind-name{color:#94a3b8}.indicator-result .ind-color{display:block;font-weight:600;color:#9b59b6}.solution-info-panel{position:absolute;top:5rem;left:1rem;z-index:100;width:280px;background:#0f172af2;border:1px solid rgba(155,89,182,.3);border-radius:1rem;padding:1.25rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.solution-info-panel h2{display:flex;align-items:center;gap:.5rem;font-size:1rem;color:#fff;margin:0 0 .5rem}.solution-info-panel h2 svg{color:#9b59b6}.formula-display{font-size:2rem;font-weight:700;font-family:Roboto Mono,monospace;color:#9b59b6;text-align:center;padding:.75rem;background:#9b59b61a;border-radius:.5rem;margin-bottom:1rem}.info-stats{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.stat-row{display:flex;justify-content:space-between;align-items:center}.stat-label{font-size:.75rem;color:#94a3b8}.stat-value{font-size:.875rem;font-weight:600;font-family:Roboto Mono,monospace}.indicator-result-box{margin-top:1rem;padding:.75rem;background:#9b59b61a;border:1px solid rgba(155,89,182,.3);border-radius:.5rem}.indicator-result-box h4{font-size:.8rem;color:#9b59b6;margin:0 0 .5rem}.indicator-result-box p{font-size:.75rem;color:#e2e8f0;margin:.25rem 0}.control-panel-3d{position:absolute;top:5rem;right:1rem;z-index:100;width:280px;max-height:calc(100vh - 7rem);overflow-y:auto;background:#0f172af2;border:1px solid rgba(155,89,182,.3);border-radius:1rem;padding:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.filter-buttons button{flex:1;padding:.5rem;background:#9b59b61a;border:1px solid rgba(155,89,182,.2);border-radius:.375rem;color:#94a3b8;font-size:.7rem;cursor:pointer;transition:all .2s}.filter-buttons button:hover{background:#9b59b633}.filter-buttons button.active{background:#9b59b64d;border-color:#9b59b6;color:#9b59b6}.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.solution-btn{display:flex;flex-direction:column;align-items:center;padding:.5rem;background:#9b59b60d;border:1px solid rgba(155,89,182,.2);border-radius:.5rem;cursor:pointer;transition:all .2s ease}.solution-btn:hover{background:#9b59b626}.solution-btn.selected{border-width:2px;background:#9b59b633}.solution-btn .sol-formula{font-size:.7rem;font-weight:700;font-family:Roboto Mono,monospace;color:#e2e8f0}.solution-btn .sol-ph{font-size:.6rem}.indicator-list{display:flex;flex-direction:column;gap:.375rem;margin-bottom:.75rem}.indicator-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#9b59b60d;border:1px solid rgba(155,89,182,.2);border-radius:.375rem;cursor:pointer;transition:all .2s}.indicator-btn:hover{background:#9b59b626}.indicator-btn.selected{background:#9b59b633;border-color:#9b59b6}.indicator-btn .ind-colors{display:flex;gap:2px}.indicator-btn .ind-colors span{width:12px;height:12px;border-radius:2px;border:1px solid rgba(255,255,255,.2)}.indicator-btn .ind-name{font-size:.75rem;color:#e2e8f0}.drop-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.75rem;background:linear-gradient(135deg,#9b59b6,#8e44ad);border:none;border-radius:.5rem;color:#fff;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s}.drop-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #9b59b666}.drop-btn:disabled{opacity:.5;cursor:not-allowed}.learn-card.acid{background:#e74c3c1a;border:1px solid rgba(231,76,60,.3)}.learn-card.base{background:#3498db1a;border:1px solid rgba(52,152,219,.3)}.learn-card.formula{background:#9b59b61a;border:1px solid rgba(155,89,182,.3)}.learn-card.indicator{background:#f1c40f1a;border:1px solid rgba(241,196,15,.3)}.learn-card.acid h4{color:#e74c3c}.learn-card.base h4{color:#3498db}.learn-card.formula h4{color:#9b59b6}.learn-card.indicator h4{color:#f1c40f}.learn-card .examples{display:block;margin-top:.5rem;font-size:.7rem;color:#64748b;font-style:italic}.info-modal-3d{width:100%;max-width:550px;max-height:85vh;overflow-y:auto;background:linear-gradient(135deg,#1a1a2e,#0f0f23);border:1px solid rgba(155,89,182,.4);border-radius:1.5rem}.ph-table{background:#0000004d;border-radius:.5rem;overflow:hidden}.ph-row{display:flex;justify-content:space-between;padding:.5rem 1rem;font-size:.8rem;border-bottom:1px solid rgba(155,89,182,.1)}.ph-row:last-child{border-bottom:none}.ph-row span:first-child{font-weight:600;font-family:Roboto Mono,monospace}.ph-row span:last-child{color:#e2e8f0}@media(max-width:1024px){.solution-info-panel{display:none}}@media(max-width:480px){.mode-tabs button{padding:.375rem .5rem;font-size:.65rem}.solution-grid{grid-template-columns:repeat(2,1fr)}}.macromolecule-test-3d-simulation{position:relative;width:100%;height:100vh;background:linear-gradient(135deg,#0a1a0a,#1a2a1a,#0f1f0f);overflow:hidden}.back-btn-3d{position:absolute;top:1rem;left:1rem;z-index:100;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;background:#0f172ae6;border:1px solid rgba(243,156,18,.5);border-radius:.75rem;color:#94a3b8;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.back-btn-3d:hover{border-color:#f39c12;color:#fff;transform:scale(1.05)}.header-3d{position:absolute;top:1rem;left:50%;transform:translate(-50%);z-index:100;display:flex;align-items:center;gap:1rem;padding:.75rem 1.5rem;background:#0f172af2;border:1px solid rgba(243,156,18,.3);border-radius:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.header-3d h1 svg{color:#f39c12}.mode-tabs button.active{background:linear-gradient(135deg,#f39c12,#e67e22);color:#fff}.action-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:#f39c1233;border:1px solid rgba(243,156,18,.4);border-radius:.5rem;color:#94a3b8;cursor:pointer;transition:all .2s ease}.action-btn:hover,.action-btn.active{background:#f39c1266;color:#fff}.tube-label{padding:.375rem .75rem;background:#0f172af2;border:1px solid rgba(243,156,18,.4);border-radius:.375rem;color:#e2e8f0;font-size:.7rem;white-space:nowrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.burner-label{display:flex;align-items:center;gap:.25rem;padding:.25rem .5rem;background:#0f172ae6;border-radius:.25rem;font-size:.65rem;color:#94a3b8}.burner-label.active{color:#f39c12;border:1px solid rgba(243,156,18,.4)}.dropper-label{padding:.25rem .5rem;background:#0f172ae6;border-radius:.25rem;font-size:.6rem;color:#e2e8f0;white-space:nowrap;max-width:120px;text-align:center}.result-panel-macro{display:flex;flex-direction:column;min-width:160px;background:#0f172af2;border:1px solid rgba(243,156,18,.3);border-radius:.75rem;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transform:translate(20px);transition:all .3s ease}.result-panel-macro.active{opacity:1;transform:translate(0)}.result-header{padding:.625rem;font-size:.8rem;font-weight:700;color:#fff;text-align:center}.result-body{padding:.75rem;display:flex;flex-direction:column;gap:.5rem}.result-sample{display:flex;align-items:center;gap:.5rem}.result-sample .sample-icon{font-size:1.25rem}.result-sample .sample-name{font-size:.8rem;color:#e2e8f0}.result-status{padding:.5rem;border-radius:.375rem;text-align:center;font-size:.8rem;font-weight:700}.result-status.positive{background:#2ecc7133;color:#2ecc71}.result-status.negative{background:#e74c3c33;color:#e74c3c}.result-detects,.result-color{display:flex;justify-content:space-between;align-items:center;font-size:.7rem}.result-detects .label,.result-color .label{color:#94a3b8}.result-detects .value{color:#e2e8f0;font-weight:500}.result-color .color-box{width:20px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.2)}.food-sample-display{display:flex;flex-direction:column;align-items:center;padding:1rem;background:#0f172af2;border:1px solid rgba(243,156,18,.3);border-radius:.75rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.food-sample-display .food-icon{font-size:2.5rem;margin-bottom:.5rem}.food-sample-display .food-name{font-size:1rem;font-weight:600;color:#fff;margin-bottom:.5rem}.food-contents{display:flex;flex-wrap:wrap;gap:.25rem;justify-content:center}.content-badge{padding:.2rem .4rem;border-radius:.25rem;font-size:.55rem;font-weight:600}.content-badge.carb{background:#f39c1233;color:#f39c12}.content-badge.protein{background:#9b59b633;color:#9b59b6}.content-badge.fat{background:#e74c3c33;color:#e74c3c}.test-info-panel{position:absolute;top:5rem;left:1rem;z-index:100;width:280px;background:#0f172af2;border:1px solid rgba(243,156,18,.3);border-radius:1rem;padding:1.25rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.test-info-panel h2{display:flex;align-items:center;gap:.5rem;font-size:1rem;margin:0 0 .75rem}.test-target{padding:.5rem;border-radius:.375rem;font-size:.8rem;font-weight:700;color:#fff;text-align:center;margin-bottom:1rem}.test-details{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.test-details .detail-row{display:flex;justify-content:space-between}.test-details .label{font-size:.75rem;color:#94a3b8}.test-details .value{font-size:.75rem;color:#e2e8f0;font-weight:500;text-align:right;max-width:140px}.color-legend{padding:.75rem;background:#f39c121a;border-radius:.5rem;margin-bottom:1rem}.color-legend h4{font-size:.75rem;color:#f39c12;margin:0 0 .5rem}.color-row{display:flex;align-items:center;gap:.5rem;font-size:.7rem;color:#94a3b8}.color-row .color-box{width:24px;height:16px;border-radius:3px;border:1px solid rgba(255,255,255,.2)}.color-label{font-style:italic}.test-description{font-size:.75rem;color:#94a3b8;line-height:1.5;margin:0}.test-result{margin-top:1rem;padding:.75rem;border-radius:.5rem;text-align:center}.test-result.positive{background:#2ecc7126;border:1px solid rgba(46,204,113,.4)}.test-result.negative{background:#e74c3c26;border:1px solid rgba(231,76,60,.4)}.test-result h4{margin:0 0 .25rem;font-size:.875rem}.test-result.positive h4{color:#2ecc71}.test-result.negative h4{color:#e74c3c}.test-result p{margin:0;font-size:.7rem;color:#94a3b8}.control-panel-3d{position:absolute;top:5rem;right:1rem;z-index:100;width:280px;max-height:calc(100vh - 7rem);overflow-y:auto;background:#0f172af2;border:1px solid rgba(243,156,18,.3);border-radius:1rem;padding:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control-panel-3d::-webkit-scrollbar-thumb{background:#f39c1280;border-radius:2px}.panel-section{padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid rgba(243,156,18,.2)}.filter-buttons{display:flex;gap:.375rem;margin-bottom:.75rem}.filter-buttons button{flex:1;padding:.4rem;background:#f39c121a;border:1px solid rgba(243,156,18,.2);border-radius:.375rem;color:#94a3b8;font-size:.65rem;cursor:pointer;transition:all .2s}.filter-buttons button:hover{background:#f39c1233}.filter-buttons button.active{background:#f39c124d;border-color:#f39c12;color:#f39c12}.test-list{display:flex;flex-direction:column;gap:.375rem;max-height:200px;overflow-y:auto}.test-btn{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background:#f39c120d;border:none;border-left:3px solid transparent;border-radius:.375rem;cursor:pointer;transition:all .2s ease}.test-btn:hover{background:#f39c1226}.test-btn.selected{background:#f39c1233}.test-btn .test-name{font-size:.75rem;color:#e2e8f0}.test-btn .test-target-badge{padding:.15rem .3rem;border-radius:.25rem;font-size:.7rem}.sample-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.375rem;max-height:180px;overflow-y:auto}.sample-btn{display:flex;flex-direction:column;align-items:center;padding:.375rem;background:#f39c120d;border:1px solid rgba(243,156,18,.2);border-radius:.375rem;cursor:pointer;transition:all .2s ease}.sample-btn:hover{background:#f39c1226}.sample-btn.selected{border-color:#f39c12;background:#f39c1233}.sample-btn .sample-icon{font-size:1.25rem}.sample-btn .sample-name{font-size:.55rem;color:#e2e8f0;margin-top:.25rem;text-align:center}.start-test-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.875rem;background:linear-gradient(135deg,#f39c12,#e67e22);border:none;border-radius:.5rem;color:#fff;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .2s}.start-test-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #f39c1266}.start-test-btn:disabled{opacity:.6;cursor:not-allowed}.challenge-header h3{margin:0;color:#f39c12}.score-display{font-size:.875rem;font-weight:700;color:#f39c12;background:#f39c1226;padding:.375rem .75rem;border-radius:1rem}.challenge-option{display:flex;align-items:center;justify-content:space-between;padding:.75rem;background:#f39c121a;border:1px solid rgba(243,156,18,.2);border-radius:.5rem;color:#e2e8f0;font-size:.8rem;cursor:pointer;transition:all .2s ease;text-align:left}.challenge-option:hover:not(:disabled){background:#f39c1233;border-color:#f39c1266}.next-btn{display:inline-flex;align-items:center;gap:.5rem;margin-top:.75rem;padding:.625rem 1.25rem;background:linear-gradient(135deg,#f39c12,#e67e22);border:none;border-radius:.5rem;color:#fff;font-size:.875rem;font-weight:600;cursor:pointer}.challenge-complete button{padding:.5rem 1.5rem;background:#f39c124d;border:1px solid #F39C12;border-radius:.5rem;color:#fff;cursor:pointer}.learn-card.carb{background:#f39c121a;border:1px solid rgba(243,156,18,.3)}.learn-card.protein{background:#9b59b61a;border:1px solid rgba(155,89,182,.3)}.learn-card.fat{background:#e74c3c1a;border:1px solid rgba(231,76,60,.3)}.learn-card.tips{background:#3498db1a;border:1px solid rgba(52,152,219,.3)}.learn-card.carb h4{color:#f39c12}.learn-card.protein h4{color:#9b59b6}.learn-card.fat h4{color:#e74c3c}.learn-card.tips h4{color:#3498db}.learn-card li{font-size:.7rem;color:#94a3b8;line-height:1.5;margin-bottom:.25rem}.learn-card p{font-size:.7rem;color:#94a3b8;margin:0;line-height:1.4}.tip-section{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem;background:#f39c121a;border:1px solid rgba(243,156,18,.2);border-radius:.5rem}.tip-section svg{color:#f39c12;flex-shrink:0;margin-top:2px}.info-modal-3d{width:100%;max-width:550px;max-height:85vh;overflow-y:auto;background:linear-gradient(135deg,#1a2a1a,#0f1f0f);border:1px solid rgba(243,156,18,.4);border-radius:1.5rem}.info-modal-3d .modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(243,156,18,.2);position:sticky;top:0;background:inherit}.info-modal-3d .modal-header h2 svg{color:#f39c12}.info-modal-3d li strong{color:#f39c12}.test-table{background:#0000004d;border-radius:.5rem;overflow:hidden}.test-table .table-row{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:.5rem;padding:.625rem .75rem;font-size:.75rem;color:#e2e8f0;border-bottom:1px solid rgba(243,156,18,.1)}.test-table .table-row:last-child{border-bottom:none}.test-table .table-row.header{background:#f39c1233;font-weight:600}@media(max-width:1024px){.test-info-panel{display:none}}@media(max-width:768px){.header-3d{flex-wrap:wrap;justify-content:center}.header-3d h1{font-size:.875rem}.control-panel-3d{position:fixed;inset:auto 0 0;width:100%;max-height:50vh;border-radius:1rem 1rem 0 0}.sample-grid{grid-template-columns:repeat(5,1fr)}}@media(max-width:480px){.mode-tabs button{padding:.375rem .5rem;font-size:.65rem}.sample-grid{grid-template-columns:repeat(4,1fr)}}.hydrolysis-3d-simulation{position:relative;width:100%;height:100vh;background:linear-gradient(135deg,#0a1520,#1a2a40,#0f1a25);overflow:hidden}.back-btn-3d{position:absolute;top:1rem;left:1rem;z-index:100;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;background:#0f172ae6;border:1px solid rgba(52,152,219,.5);border-radius:.75rem;color:#94a3b8;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.back-btn-3d:hover{border-color:#3498db;color:#fff;transform:scale(1.05)}.header-3d{position:absolute;top:1rem;left:50%;transform:translate(-50%);z-index:100;display:flex;align-items:center;gap:1rem;padding:.75rem 1.5rem;background:#0f172af2;border:1px solid rgba(52,152,219,.3);border-radius:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.header-3d h1 svg{color:#3498db}.mode-tabs button.active{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff}.action-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:#3498db33;border:1px solid rgba(52,152,219,.4);border-radius:.5rem;color:#94a3b8;cursor:pointer;transition:all .2s ease}.action-btn:hover,.action-btn.active{background:#3498db66;color:#fff}.ion-label{padding:.15rem .3rem;border-radius:.25rem;font-size:.6rem;font-weight:700;font-family:Roboto Mono,monospace;white-space:nowrap}.ion-label.cation{background:#e74c3ccc;color:#fff}.ion-label.anion{background:#3498dbcc;color:#fff}.ion-label.hydrolyzed{animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.product-label{padding:.15rem .3rem;border-radius:.25rem;font-size:.55rem;font-weight:700;font-family:Roboto Mono,monospace}.product-label.base{background:#3498dbe6;color:#fff}.product-label.acid{background:#e74c3ce6;color:#fff}.beaker-label{display:flex;flex-direction:column;align-items:center;padding:.5rem .75rem;background:#0f172af2;border:1px solid rgba(52,152,219,.4);border-radius:.5rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.beaker-label .formula{font-size:1.25rem;font-weight:700;color:#3498db;font-family:Roboto Mono,monospace}.beaker-label .name{font-size:.7rem;color:#94a3b8}.ph-indicator-3d{display:flex;flex-direction:column;align-items:center;gap:.5rem}.ph-circle{width:70px;height:70px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 20px #0000004d}.ph-circle .ph-value{font-size:1.5rem;font-weight:700;color:#fff}.ph-circle .ph-label{font-size:.6rem;color:#fffc}.hydrolysis-type{font-size:.8rem;font-weight:700;text-transform:uppercase}.reaction-equation{padding:.75rem 1.5rem;background:#0f172af2;border:1px solid rgba(52,152,219,.3);border-radius:.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transform:translateY(-10px);transition:all .3s ease}.reaction-equation.active{opacity:1;transform:translateY(0)}.reaction-equation .equation{font-size:.9rem;font-family:Roboto Mono,monospace;color:#3498db}.salt-info-panel{position:absolute;top:5rem;left:1rem;z-index:100;width:300px;background:#0f172af2;border:1px solid rgba(52,152,219,.3);border-radius:1rem;padding:1.25rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.salt-info-panel h2{display:flex;align-items:center;gap:.5rem;font-size:1rem;color:#fff;margin:0 0 .5rem}.salt-info-panel h2 svg{color:#3498db}.formula-display{font-size:2rem;font-weight:700;font-family:Roboto Mono,monospace;color:#3498db;text-align:center;padding:.75rem;background:#3498db1a;border-radius:.5rem;margin-bottom:1rem}.type-badge-large{padding:.75rem;border-radius:.5rem;font-size:.875rem;font-weight:700;color:#fff;text-align:center;margin-bottom:1rem}.ion-info{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1rem}.ion-box{padding:.75rem;border-radius:.5rem;text-align:center}.ion-box.cation{background:#e74c3c1a;border:1px solid rgba(231,76,60,.3)}.ion-box.anion{background:#3498db1a;border:1px solid rgba(52,152,219,.3)}.ion-box h4{font-size:.7rem;color:#94a3b8;margin:0 0 .375rem}.ion-box .ion-symbol{display:block;font-size:1.125rem;font-weight:700;font-family:Roboto Mono,monospace;margin-bottom:.25rem}.ion-box.cation .ion-symbol{color:#e74c3c}.ion-box.anion .ion-symbol{color:#3498db}.ion-box .ion-source{display:block;font-size:.65rem;color:#64748b;margin-bottom:.25rem}.ion-box .ion-type{display:inline-block;padding:.15rem .4rem;border-radius:.25rem;font-size:.55rem;font-weight:600}.ion-box .ion-type.strong-base,.ion-box .ion-type.strong-acid{background:#27ae6033;color:#27ae60}.ion-box .ion-type.weak-base,.ion-box .ion-type.weak-acid{background:#f39c1233;color:#f39c12}.reaction-box{padding:.75rem;background:#3498db1a;border:1px solid rgba(52,152,219,.2);border-radius:.5rem;margin-bottom:1rem}.reaction-box h4{font-size:.75rem;color:#3498db;margin:0 0 .5rem}.reaction-box .reaction{font-size:.8rem;font-family:Roboto Mono,monospace;color:#e2e8f0;margin:0;word-break:break-word}.ph-display{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid rgba(52,152,219,.2);margin-bottom:.75rem}.ph-display .ph-label{font-size:.8rem;color:#94a3b8}.ph-display .ph-value{font-size:1.25rem;font-weight:700;font-family:Roboto Mono,monospace}.control-panel-3d{position:absolute;top:5rem;right:1rem;z-index:100;width:280px;max-height:calc(100vh - 7rem);overflow-y:auto;background:#0f172af2;border:1px solid rgba(52,152,219,.3);border-radius:1rem;padding:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control-panel-3d::-webkit-scrollbar-thumb{background:#3498db80;border-radius:2px}.panel-section{padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid rgba(52,152,219,.2)}.filter-buttons{display:flex;gap:.375rem}.filter-buttons button{flex:1;padding:.5rem;background:#3498db1a;border:1px solid rgba(52,152,219,.2);border-radius:.375rem;color:#94a3b8;font-size:.7rem;cursor:pointer;transition:all .2s}.filter-buttons button:hover{background:#3498db33}.filter-buttons button.active{background:#3498db4d;border-color:#3498db;color:#3498db}.salt-list{display:flex;flex-direction:column;gap:.375rem;max-height:250px;overflow-y:auto}.salt-btn{display:flex;align-items:center;justify-content:space-between;padding:.625rem .75rem;background:#3498db0d;border:none;border-left:3px solid transparent;border-radius:.375rem;cursor:pointer;transition:all .2s ease}.salt-btn:hover{background:#3498db26}.salt-btn.selected{background:#3498db33}.salt-btn .salt-formula{font-size:.85rem;font-weight:600;font-family:Roboto Mono,monospace;color:#e2e8f0}.salt-btn .salt-ph{font-size:.7rem;font-weight:600}.toggle-group{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;cursor:pointer}.toggle-group input[type=checkbox]{width:1rem;height:1rem;accent-color:#3498DB;cursor:pointer}.challenge-header h3{margin:0;color:#3498db}.score-display{font-size:.875rem;font-weight:700;color:#3498db;background:#3498db26;padding:.375rem .75rem;border-radius:1rem}.challenge-option{display:flex;align-items:center;justify-content:space-between;padding:.75rem;background:#3498db1a;border:1px solid rgba(52,152,219,.2);border-radius:.5rem;color:#e2e8f0;font-size:.8rem;cursor:pointer;transition:all .2s ease;text-align:left}.challenge-option:hover:not(:disabled){background:#3498db33;border-color:#3498db66}.next-btn{display:inline-flex;align-items:center;gap:.5rem;margin-top:.75rem;padding:.625rem 1.25rem;background:linear-gradient(135deg,#3498db,#2980b9);border:none;border-radius:.5rem;color:#fff;font-size:.875rem;font-weight:600;cursor:pointer}.challenge-complete button{padding:.5rem 1.5rem;background:#3498db4d;border:1px solid #3498DB;border-radius:.5rem;color:#fff;cursor:pointer}.learn-card.neutral{background:#27ae601a;border:1px solid rgba(39,174,96,.3)}.learn-card.acidic{background:#e74c3c1a;border:1px solid rgba(231,76,60,.3)}.learn-card.basic{background:#3498db1a;border:1px solid rgba(52,152,219,.3)}.learn-card.partial{background:#9b59b61a;border:1px solid rgba(155,89,182,.3)}.learn-card.formula{background:#f39c121a;border:1px solid rgba(243,156,18,.3)}.learn-card.neutral h4{color:#27ae60}.learn-card.acidic h4{color:#e74c3c}.learn-card.basic h4{color:#3498db}.learn-card.partial h4{color:#9b59b6}.learn-card.formula h4{color:#f39c12}.learn-card .example{display:block;margin-top:.375rem;font-size:.65rem;color:#64748b;font-style:italic}.learn-card ul{margin:0;padding-left:1rem}.learn-card li{font-size:.7rem;color:#94a3b8;line-height:1.5}.learn-card li strong{color:#e2e8f0}.tip-section{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem;background:#3498db1a;border:1px solid rgba(52,152,219,.2);border-radius:.5rem}.tip-section svg{color:#3498db;flex-shrink:0;margin-top:2px}.info-modal-3d{width:100%;max-width:550px;max-height:85vh;overflow-y:auto;background:linear-gradient(135deg,#1a2a40,#0f1a25);border:1px solid rgba(52,152,219,.4);border-radius:1.5rem}.info-modal-3d .modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(52,152,219,.2);position:sticky;top:0;background:inherit}.info-modal-3d .modal-header h2 svg{color:#3498db}.info-modal-3d li strong{color:#3498db}.hydrolysis-table{background:#0000004d;border-radius:.5rem;overflow:hidden}.hydrolysis-table .table-row{display:grid;grid-template-columns:1.5fr 1fr;gap:.5rem;padding:.625rem .75rem;font-size:.75rem;color:#e2e8f0;border-bottom:1px solid rgba(52,152,219,.1)}.hydrolysis-table .table-row:last-child{border-bottom:none}.hydrolysis-table .table-row.header{background:#3498db33;font-weight:600}@media(max-width:1024px){.salt-info-panel{display:none}}.stoichiometry-3d-simulation{position:relative;width:100%;height:100vh;background:linear-gradient(135deg,#0f0a1a,#1a1030,#0a0f15);overflow:hidden}.back-btn-3d{position:absolute;top:1rem;left:1rem;z-index:100;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;background:#0f172ae6;border:1px solid rgba(155,89,182,.5);border-radius:.75rem;color:#94a3b8;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.back-btn-3d:hover{border-color:#9b59b6;color:#fff;transform:scale(1.05)}.header-3d{position:absolute;top:1rem;left:50%;transform:translate(-50%);z-index:100;display:flex;align-items:center;gap:1rem;padding:.75rem 1.5rem;background:#0f172af2;border:1px solid rgba(155,89,182,.3);border-radius:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.header-3d h1{display:flex;align-items:center;gap:.5rem;font-size:1rem;font-weight:700;color:#fff;margin:0}.header-3d h1 svg{color:#9b59b6}.mode-tabs{display:flex;gap:.25rem;background:#0000004d;padding:.25rem;border-radius:.5rem}.mode-tabs button{padding:.5rem .75rem;background:transparent;border:none;border-radius:.375rem;color:#94a3b8;font-size:.75rem;cursor:pointer;transition:all .2s}.mode-tabs button:hover{color:#fff}.mode-tabs button.active{background:linear-gradient(135deg,#9b59b6,#8e44ad);color:#fff}.header-actions{display:flex;gap:.5rem}.action-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:#9b59b633;border:1px solid rgba(155,89,182,.4);border-radius:.5rem;color:#94a3b8;cursor:pointer;transition:all .2s ease}.action-btn:hover,.action-btn.active{background:#9b59b666;color:#fff}.canvas-container{position:absolute;inset:0}.molecule-label{padding:.15rem .35rem;background:#0f172ae6;border-radius:.25rem;font-size:.55rem;font-weight:700;font-family:Roboto Mono,monospace;color:#e2e8f0;white-space:nowrap}.molecule-label.product{background:#2ecc714d;border:1px solid rgba(46,204,113,.5);color:#2ecc71}.molecule-label.excess{background:#f39c124d;border:1px solid rgba(243,156,18,.5);color:#f39c12}.container-label{display:flex;flex-direction:column;align-items:center;padding:.5rem .75rem;background:#0f172af2;border:1px solid rgba(155,89,182,.3);border-radius:.5rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.container-label .formula{font-size:1.125rem;font-weight:700;font-family:Roboto Mono,monospace}.container-label .moles{font-size:.75rem;color:#e2e8f0;margin-top:.25rem}.container-label .particles{font-size:.6rem;color:#64748b}.product-container-label{display:flex;flex-direction:column;align-items:center;padding:.5rem .75rem;background:#0f172af2;border:1px solid rgba(46,204,113,.4);border-radius:.5rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);min-width:100px}.product-container-label .title{font-size:.7rem;font-weight:600;color:#2ecc71;margin-bottom:.375rem}.product-item{display:flex;justify-content:space-between;width:100%;gap:.5rem;margin-top:.25rem}.product-item .formula{font-size:.85rem;font-weight:700;font-family:Roboto Mono,monospace}.product-item .moles{font-size:.7rem;color:#94a3b8}.limiting-badge{padding:.4rem .8rem;background:#f39c1233;border:1px solid #F39C12;border-radius:.5rem;font-size:.7rem;font-weight:600;color:#f39c12;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}.equation-display{padding:.625rem 1.25rem;background:#0f172af2;border:1px solid rgba(155,89,182,.4);border-radius:.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.equation-display .equation{font-size:1rem;font-weight:600;font-family:Roboto Mono,monospace;color:#9b59b6}.reaction-info-panel{position:absolute;top:5rem;left:1rem;z-index:100;width:300px;background:#0f172af2;border:1px solid rgba(155,89,182,.3);border-radius:1rem;padding:1.25rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.reaction-info-panel h2{display:flex;align-items:center;gap:.5rem;font-size:1rem;color:#fff;margin:0 0 .75rem}.reaction-info-panel h2 svg{color:#9b59b6}.equation-box{padding:.75rem;background:#9b59b61a;border:1px solid rgba(155,89,182,.2);border-radius:.5rem;margin-bottom:1rem}.equation-box h4{font-size:.7rem;color:#9b59b6;margin:0 0 .5rem}.equation-box .equation{font-size:1rem;font-weight:600;font-family:Roboto Mono,monospace;color:#e2e8f0;word-break:break-word}.type-badge{display:inline-block;padding:.375rem .75rem;background:#9b59b633;border:1px solid rgba(155,89,182,.4);border-radius:1rem;font-size:.7rem;font-weight:600;color:#9b59b6;margin-bottom:1rem}.calculation-results{padding:.75rem;background:#2ecc710d;border:1px solid rgba(46,204,113,.2);border-radius:.5rem;margin-bottom:1rem}.calculation-results h4{display:flex;align-items:center;gap:.375rem;font-size:.8rem;color:#2ecc71;margin:0 0 .75rem}.result-row{display:flex;justify-content:space-between;align-items:center;padding:.375rem 0;font-size:.75rem}.result-row .label{color:#94a3b8}.result-row .value{color:#e2e8f0;font-weight:600;font-family:Roboto Mono,monospace}.result-row .mass{color:#64748b;font-size:.65rem}.result-row.limiting{padding:.5rem;background:#f39c121a;border-radius:.375rem;margin-bottom:.5rem}.result-row.limiting .value{color:#f39c12}.result-section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid rgba(46,204,113,.2)}.result-section h5{font-size:.7rem;color:#64748b;margin:0 0 .375rem}.result-section.excess{border-top-color:#f39c1233}.result-section.excess h5{color:#f39c12}.description{font-size:.75rem;color:#94a3b8;line-height:1.5;margin:0}.control-panel-3d{position:absolute;top:5rem;right:1rem;z-index:100;width:300px;max-height:calc(100vh - 7rem);overflow-y:auto;background:#0f172af2;border:1px solid rgba(155,89,182,.3);border-radius:1rem;padding:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control-panel-3d::-webkit-scrollbar{width:4px}.control-panel-3d::-webkit-scrollbar-thumb{background:#9b59b680;border-radius:2px}.panel-section{padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid rgba(155,89,182,.2)}.panel-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.panel-section h3{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:600;color:#e2e8f0;margin:0 0 .75rem}.reaction-list{display:flex;flex-direction:column;gap:.375rem;max-height:180px;overflow-y:auto}.reaction-btn{display:flex;align-items:center;justify-content:space-between;padding:.625rem .75rem;background:#9b59b60d;border:1px solid rgba(155,89,182,.2);border-radius:.5rem;cursor:pointer;transition:all .2s ease}.reaction-btn:hover{background:#9b59b626;border-color:#9b59b666}.reaction-btn.selected{background:#9b59b633;border-color:#9b59b6}.reaction-btn .reaction-name{font-size:.8rem;color:#e2e8f0;font-weight:500}.reaction-btn .reaction-type{font-size:.65rem;color:#9b59b6;padding:.2rem .4rem;background:#9b59b626;border-radius:.25rem}.reactant-slider{margin-bottom:1rem}.reactant-slider:last-child{margin-bottom:0}.slider-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.375rem}.slider-header .formula{font-size:.9rem;font-weight:700;font-family:Roboto Mono,monospace}.slider-header .value{font-size:.8rem;color:#e2e8f0;font-family:Roboto Mono,monospace}.reactant-slider input[type=range]{width:100%;height:6px;border-radius:3px;background:#9b59b633;appearance:none;cursor:pointer}.reactant-slider input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:#9b59b6;cursor:pointer}.slider-info{display:flex;justify-content:space-between;margin-top:.25rem;font-size:.65rem;color:#64748b}.toggle-group{display:flex;align-items:center;gap:.5rem;cursor:pointer}.toggle-group input[type=checkbox]{width:1rem;height:1rem;accent-color:#9B59B6;cursor:pointer}.toggle-group span{font-size:.8rem;color:#e2e8f0}.react-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.875rem;background:linear-gradient(135deg,#9b59b6,#8e44ad);border:none;border-radius:.5rem;color:#fff;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .2s}.react-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #9b59b666}.challenge-panel{padding:0}.challenge-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.challenge-header h3{margin:0;color:#9b59b6}.score-display{font-size:.875rem;font-weight:700;color:#9b59b6;background:#9b59b626;padding:.375rem .75rem;border-radius:1rem}.challenge-question{font-size:.875rem;color:#fff;line-height:1.5;margin:0 0 1rem}.challenge-options{display:flex;flex-direction:column;gap:.5rem}.challenge-option{display:flex;align-items:center;justify-content:space-between;padding:.75rem;background:#9b59b61a;border:1px solid rgba(155,89,182,.2);border-radius:.5rem;color:#e2e8f0;font-size:.8rem;cursor:pointer;transition:all .2s ease;text-align:left}.challenge-option:hover:not(:disabled){background:#9b59b633;border-color:#9b59b666}.challenge-option.correct{background:#2ecc7133;border-color:#2ecc71;color:#2ecc71}.challenge-option.incorrect{background:#e74c3c33;border-color:#e74c3c;color:#e74c3c}.challenge-feedback{margin-top:1rem;text-align:center}.correct-text{color:#2ecc71;font-weight:600}.incorrect-text{color:#e74c3c;font-weight:600}.next-btn{display:inline-flex;align-items:center;gap:.5rem;margin-top:.75rem;padding:.625rem 1.25rem;background:linear-gradient(135deg,#9b59b6,#8e44ad);border:none;border-radius:.5rem;color:#fff;font-size:.875rem;font-weight:600;cursor:pointer}.challenge-complete{padding:1rem 0;text-align:center}.challenge-complete svg{color:#f39c12;margin-bottom:.5rem}.challenge-complete p{font-size:1.125rem;color:#fff;margin:0 0 1rem}.challenge-complete button{padding:.5rem 1.5rem;background:#9b59b64d;border:1px solid #9B59B6;border-radius:.5rem;color:#fff;cursor:pointer}.learn-panel h3{display:flex;align-items:center;gap:.5rem;margin:0 0 1rem;color:#e2e8f0}.learn-content{display:flex;flex-direction:column;gap:.75rem}.learn-card{padding:.75rem;border-radius:.5rem}.learn-card.mole{background:#3498db1a;border:1px solid rgba(52,152,219,.3)}.learn-card.ratio{background:#9b59b61a;border:1px solid rgba(155,89,182,.3)}.learn-card.limiting{background:#f39c121a;border:1px solid rgba(243,156,18,.3)}.learn-card.excess{background:#e74c3c1a;border:1px solid rgba(231,76,60,.3)}.learn-card.steps{background:#2ecc711a;border:1px solid rgba(46,204,113,.3)}.learn-card h4{font-size:.8rem;margin:0 0 .5rem}.learn-card.mole h4{color:#3498db}.learn-card.ratio h4{color:#9b59b6}.learn-card.limiting h4{color:#f39c12}.learn-card.excess h4{color:#e74c3c}.learn-card.steps h4{color:#2ecc71}.learn-card p{font-size:.75rem;color:#94a3b8;line-height:1.5;margin:0}.learn-card .formula{display:block;margin-top:.375rem;font-size:.9rem;font-weight:600;font-family:Roboto Mono,monospace;color:#e2e8f0}.learn-card ol{margin:0;padding-left:1rem}.learn-card li{font-size:.7rem;color:#94a3b8;line-height:1.6}.tip-section{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem;background:#9b59b61a;border:1px solid rgba(155,89,182,.2);border-radius:.5rem}.tip-section svg{color:#9b59b6;flex-shrink:0;margin-top:2px}.tip-section p{margin:0;font-size:.7rem;color:#94a3b8;line-height:1.4}.info-overlay-3d{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.info-modal-3d{width:100%;max-width:550px;max-height:85vh;overflow-y:auto;background:linear-gradient(135deg,#1a1030,#0a0f15);border:1px solid rgba(155,89,182,.4);border-radius:1.5rem}.info-modal-3d .modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(155,89,182,.2);position:sticky;top:0;background:inherit}.info-modal-3d .modal-header h2{display:flex;align-items:center;gap:.5rem;font-size:1.125rem;color:#fff;margin:0}.info-modal-3d .modal-header h2 svg{color:#9b59b6}.info-modal-3d .modal-header button{background:none;border:none;color:#94a3b8;cursor:pointer}.info-modal-3d .modal-content{padding:1.5rem}.info-modal-3d section{margin-bottom:1.5rem}.info-modal-3d section:last-child{margin-bottom:0}.info-modal-3d h3{font-size:1rem;color:#e2e8f0;margin:0 0 .75rem}.info-modal-3d p{font-size:.875rem;color:#94a3b8;line-height:1.6;margin:0}.info-modal-3d ul{margin:0;padding-left:1.25rem}.info-modal-3d li{font-size:.875rem;color:#94a3b8;line-height:1.6;margin-bottom:.5rem}.info-modal-3d li strong{color:#9b59b6}.formula-box{padding:1rem;background:#9b59b61a;border:1px solid rgba(155,89,182,.3);border-radius:.5rem}.formula-box p{font-family:Roboto Mono,monospace;margin-bottom:.5rem}.formula-box p:last-child{margin-bottom:0}@media(max-width:1024px){.reaction-info-panel{display:none}}@media(max-width:768px){.header-3d{flex-wrap:wrap;justify-content:center}.header-3d h1{font-size:.875rem}.control-panel-3d{position:fixed;inset:auto 0 0;width:100%;max-height:50vh;border-radius:1rem 1rem 0 0}}@media(max-width:480px){.mode-tabs button{padding:.375rem .5rem;font-size:.65rem}}