*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}#app{width:100vw;height:100vh;display:flex;overflow:hidden}#jsme-panel{background:#fafafa;border-right:1px solid #ddd;flex-direction:column;flex-shrink:0;width:33.33%;min-width:280px;padding:10px;display:flex;overflow:hidden}#brand-bar{color:#222;flex-wrap:wrap;flex-shrink:0;align-items:center;gap:6px 8px;padding-bottom:12px;font-size:16px;font-weight:700;display:flex}#brand-bar svg:first-child{width:28px;height:28px}.brand-title{font-size:17px}.brand-version{color:#999;margin-right:auto;font-size:11px;font-weight:400}.brand-btn{color:#555;cursor:pointer;background:0 0;border:1px solid #bbb;border-radius:4px;padding:2px 8px;font-size:11px;transition:all .12s}.brand-btn:hover{color:#48f;border-color:#48f}.brand-select{color:#555;cursor:pointer;background:0 0;border:1px solid #bbb;border-radius:4px;max-width:100px;padding:2px 4px;font-family:inherit;font-size:11px}.brand-select:hover{color:#48f;border-color:#48f}.cs-row{flex-wrap:wrap;gap:3px;margin-top:4px;display:flex}.cs-btn{color:#999;cursor:pointer;background:0 0;border:1px solid #ffffff1f;border-radius:3px;flex:none;padding:3px 6px;font-size:10px;transition:all .1s}.cs-btn:hover{color:#ddd;border-color:#ffffff4d}.cs-btn.active{color:#fff;background:#48f;border-color:#48f}.cs-custom{flex-direction:column;gap:4px;margin-top:6px;display:flex}.cs-custom.hidden{display:none}.cs-channel{align-items:center;gap:6px;height:24px;display:flex}.cs-label{color:#aaa;text-align:right;flex-shrink:0;width:14px;font-size:9px;font-weight:600}.cs-channel input[type=color]{cursor:pointer;background:0 0;border:none;border-radius:3px;flex:1;min-width:0;height:22px;padding:0}.cs-channel input[type=color]::-webkit-color-swatch-wrapper{padding:0}.cs-channel input[type=color]::-webkit-color-swatch{border:1px solid #ffffff26;border-radius:3px}.cs-channel input[type=color]::-moz-color-swatch{border:1px solid #ffffff26;border-radius:3px}.brand-link{color:#666;transition:color .12s;display:flex}.brand-link:hover{color:#222}.brand-copyright{color:#aaa;width:100%;font-size:10px;font-weight:400}#jsme_container{background:#fff;border:1px solid #e0e0e0;border-radius:4px;flex:1;overflow:hidden}#render-btn{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:6px;flex-shrink:0;margin-top:10px;padding:10px 16px;font-size:14px;font-weight:600;transition:background .15s}#render-btn:hover{background:#1d4ed8}#render-btn:active{background:#1e40af}#render-btn:disabled{cursor:default;background:#93c5fd}#splitter{cursor:col-resize;z-index:5;background:0 0;flex-shrink:0;width:5px;position:relative}#splitter:hover,#splitter.active{background:#48f}#canvas-container{flex:1;min-width:200px;position:relative;overflow:hidden}#molecule-info{color:#ccc;z-index:10;backdrop-filter:blur(8px);white-space:nowrap;background:#16161ceb;border:1px solid #ffffff14;border-radius:8px;align-items:center;gap:10px;max-width:80%;padding:6px 14px;font-size:12px;display:flex;position:absolute;top:12px;left:50%;transform:translate(-50%)}#molecule-info.hidden{display:none}#mol-data{color:#ccc;z-index:10;backdrop-filter:blur(8px);background:#16161cf0;border:1px solid #ffffff14;border-radius:8px;min-width:240px;max-width:min(520px,100vw - 24px);font-size:11px;position:absolute;top:54px;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 8px 30px #00000040}#mol-data.hidden{display:none}#mol-data summary{cursor:pointer;color:#8bf;text-transform:uppercase;letter-spacing:.5px;user-select:none;align-items:center;gap:6px;padding:7px 14px;font-size:10px;font-weight:600;list-style:none;display:flex}#mol-data summary::-webkit-details-marker{display:none}#mol-data summary:before{content:"▸";color:#888;transition:transform .12s}#mol-data[open] summary:before{transform:rotate(90deg)}#mol-data-cid{color:#888;text-transform:none;letter-spacing:0;font-weight:400}#mol-data dl{margin:0;padding:0 14px 10px}.data-row{border-top:1px solid #ffffff0f;align-items:baseline;gap:10px;padding:4px 0;display:flex}.data-row:first-child{border-top:none}.data-row dt{color:#888;text-transform:uppercase;letter-spacing:.4px;flex-shrink:0;min-width:84px;font-size:9px}.data-row dd{color:#ddd;word-break:break-word;min-width:0;margin:0}#mol-formula{color:#eee;font-size:14px;font-weight:700}#mol-name{color:#999;font-style:italic}#mol-weight{color:#888;font-size:11px}#mol-source{text-transform:uppercase;letter-spacing:.5px;border-radius:3px;padding:1px 6px;font-size:10px;font-weight:600}#mol-source.pubchem{color:#48f;background:#48f3}#mol-source.cir{color:#f84;background:#f843}#mol-source.local{color:#6c6;background:#64c86433}#mol-link{color:#48f;font-size:11px;text-decoration:none}#mol-link:hover{text-decoration:underline}#controls-panel{color:#ddd;user-select:none;backdrop-filter:blur(6px);z-index:10;background:#1e1e23eb;border-radius:8px;width:190px;padding:0;font-size:12px;position:absolute;top:12px;right:12px;overflow:hidden}#controls-tabs{border-bottom:1px solid #ffffff14;display:flex}.tab-btn{color:#888;cursor:pointer;text-transform:uppercase;letter-spacing:.5px;background:0 0;border:none;flex:1;padding:8px 4px;font-size:10px;font-weight:600;transition:all .12s}.tab-btn:hover{color:#bbb;background:#ffffff08}.tab-btn.active{color:#48f;background:#4488ff14;border-bottom:2px solid #48f}.tab-content{padding:12px;display:none}.tab-content.active{display:block}.ctrl-section{border-bottom:1px solid #ffffff14;margin-bottom:10px;padding-bottom:10px}.ctrl-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.ctrl-label{color:#bbb;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:10px;font-weight:600;display:block}.ctrl-toggle{cursor:pointer;align-items:center;gap:8px;padding:3px 0;display:flex}.ctrl-toggle input[type=checkbox]{accent-color:#48f}.ctrl-slider{flex-direction:column;gap:2px;padding:3px 0;display:flex}.ctrl-slider span{color:#ccc;font-size:11px}.ctrl-slider input[type=range]{accent-color:#48f;width:100%;height:4px}.preset-row{gap:4px;margin-top:4px;display:flex}.preset-btn{color:#bbb;cursor:pointer;background:0 0;border:1px solid #ffffff26;border-radius:4px;flex:1;padding:4px 0;font-size:11px;transition:all .12s}.preset-btn:hover{color:#fff;border-color:#ffffff59}.preset-btn.active{color:#fff;background:#48f;border-color:#48f}.label-mode-select{color:#bbb;cursor:pointer;background:0 0;border:1px solid #ffffff26;border-radius:4px;width:100%;padding:4px 6px;font-family:inherit;font-size:11px;transition:all .12s}.label-mode-select:hover{color:#fff;border-color:#ffffff59}.label-mode-select option{color:#ccc;background:#222}.view-preset-btn{color:#bbb;cursor:pointer;background:0 0;border:1px solid #ffffff26;border-radius:4px;flex:1;padding:4px 0;font-size:11px;transition:all .12s}.view-preset-btn:hover{color:#fff;border-color:#ffffff59}.view-preset-btn.active{color:#fff;background:#48f;border-color:#48f}#orbital-legend{color:#aaa;backdrop-filter:blur(6px);z-index:10;background:#16161ceb;border:1px solid #ffffff14;border-radius:6px;gap:12px;padding:6px 10px;font-size:11px;display:flex;position:absolute;bottom:12px;left:12px}#orbital-legend.hidden{display:none}.legend-item{align-items:center;gap:4px;display:flex}.legend-dot{border-radius:50%;width:10px;height:10px}.legend-dot.sigma{background:#8bf}.legend-dot.pi{background:#fa4}.legend-dot.lone-pair{background:#fd4}.bg-row{align-items:center;gap:4px;margin-top:4px;display:flex}.bg-btn{cursor:pointer;border:2px solid #0000;border-radius:4px;width:24px;height:24px;transition:border-color .12s}.bg-btn:hover{border-color:#fff6}.bg-btn.active{border-color:#48f}#ctrl-bg-custom{cursor:pointer;background:0 0;border:none;border-radius:4px;width:24px;height:24px;padding:0}#ctrl-bg-custom::-webkit-color-swatch-wrapper{padding:0}#ctrl-bg-custom::-webkit-color-swatch{border:2px solid #ffffff26;border-radius:4px}.export-row{align-items:center;gap:8px;margin-top:4px;display:flex}.export-btn{color:#bbb;cursor:pointer;background:0 0;border:1px solid #ffffff26;border-radius:4px;flex:1;padding:6px 0;font-size:11px;font-weight:600;transition:all .12s}.export-btn:hover{color:#fff;background:#48f;border-color:#48f}.export-note{color:#666;font-size:10px}.clipboard-row{align-items:center;gap:8px;margin-top:4px;display:flex}#clipboard-feedback{color:#48f;font-size:10px}#clipboard-feedback.hidden{display:none}.view-row{flex-direction:column;gap:4px;margin-top:4px;display:flex}.view-row .export-btn{width:100%}#ctrl-load-view-input{display:none}#share-feedback{color:#48f;font-size:10px}#share-feedback.hidden{display:none}#annotations-layer{pointer-events:none;z-index:20;position:absolute;inset:0;overflow:hidden}.annotation{pointer-events:auto;cursor:grab;user-select:none;backdrop-filter:blur(4px);background:#1e1e28eb;border:1px solid #fff3;border-radius:6px;align-items:flex-start;gap:4px;min-width:140px;max-width:240px;padding:6px 8px;display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:0 2px 10px #0006}.annotation:active{cursor:grabbing}.annotation-text{resize:none;color:#eee;cursor:text;user-select:text;background:0 0;border:none;outline:none;flex:1;min-height:20px;font-family:inherit;font-size:12px;line-height:1.4}.annotation-text::placeholder{color:#777}.annotation-close{color:#888;cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:0 2px;font-size:14px;line-height:1}.annotation-close:hover{color:#fff}.measure-hint{color:#888;margin-top:6px;font-size:10px;line-height:1.4}#measure-points{color:#aaa;margin-top:6px;font-size:10px;line-height:1.5}#measure-result{color:#eee;margin-top:8px;font-size:12px;font-weight:600}.measure-clear{margin-top:8px;padding:4px 0}#canvas-actions{z-index:10;flex-direction:column;gap:6px;display:flex;position:absolute;bottom:12px;right:12px}#canvas-actions button{color:#aaa;cursor:pointer;backdrop-filter:blur(6px);background:#1e1e23e6;border:1px solid #ffffff1a;border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;transition:all .12s;display:flex}#canvas-actions button:hover{color:#48f;border-color:#48f}#loading-overlay{z-index:100;backdrop-filter:blur(4px);background:#0a0a0fb3;flex-direction:column;justify-content:center;align-items:center;gap:16px;transition:opacity .2s;display:flex;position:absolute;inset:0}#loading-overlay.hidden{display:none}.loading-spinner{border:3px solid #ffffff1a;border-top-color:#48f;border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#loading-text{color:#ccc;font-size:14px}#cite-dialog{z-index:100;background:#00000073;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:fixed;inset:0}#cite-dialog.hidden{opacity:0;pointer-events:none}#cite-content{background:#fff;border-radius:10px;max-width:420px;padding:24px 28px;position:relative;box-shadow:0 8px 30px #00000040}#cite-content h3{color:#222;margin-bottom:10px;font-size:15px}#cite-content p{color:#555;margin-bottom:10px;font-size:13px;line-height:1.5}#cite-text{color:#333;background:#f5f5f5;border-radius:6px;margin-bottom:12px;padding:12px;font-size:12px;line-height:1.6;display:block}#cite-copy{margin-left:auto;display:block}#cite-close{color:#888;cursor:pointer;background:0 0;border:none;font-size:20px;position:absolute;top:8px;right:12px}#cite-close:hover{color:#333}#help-dialog{z-index:100;background:#00000073;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:fixed;inset:0}#help-dialog.hidden{opacity:0;pointer-events:none}#help-content{background:#fff;border-radius:10px;max-width:420px;padding:24px 28px;position:relative;box-shadow:0 8px 30px #00000040}#help-content h3{color:#222;margin-bottom:12px;font-size:15px}#help-content ul{padding:0;list-style:none}#help-content li{color:#555;margin-bottom:8px;font-size:13px;line-height:1.5}#help-content kbd{background:#f0f0f0;border:1px solid #ddd;border-radius:3px;padding:1px 5px;font-family:monospace;font-size:11px}#help-ok{margin-top:12px;margin-left:auto;display:block}#help-close{color:#888;cursor:pointer;background:0 0;border:none;font-size:20px;position:absolute;top:8px;right:12px}#help-close:hover{color:#333}#tooltip{color:#ddd;white-space:nowrap;pointer-events:none;z-index:50;backdrop-filter:blur(4px);background:#141419e6;border:1px solid #ffffff1a;border-radius:5px;padding:4px 9px;font-size:12px;transition:opacity .1s;position:fixed}#tooltip.hidden{opacity:0}