@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap);:root{--header-height:60px;--control-height:36px;--primary-color:#0f172a;--text-muted:#64748b;--accent-color:#0ea5e9;--accent-hover:#0284c7;--bg-main:#f8fafc;--bg-panel:#fff;--border-color:#e2e8f0;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--shadow-soft:0 4px 12px #0f172a0d;--shadow-glass:0 0 30px 0 #0f172a1f,0 2px 10px 0 #0f172a14;--transition-smooth:0.25s cubic-bezier(0.16,1,0.3,1)}body,html{-webkit-font-smoothing:antialiased;background-color:#f8fafc;background-color:var(--bg-main);color:#0f172a;color:var(--primary-color);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;height:100%;margin:0;overflow:hidden}.app-container{display:flex;flex-direction:column;height:100vh;width:100vw}.app-header{background-color:#fff;border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--border-color);box-sizing:border-box;flex-wrap:wrap;gap:16px;justify-content:space-between;min-height:60px;min-height:var(--header-height);padding:8px 24px;z-index:20}.app-header,.app-title{align-items:center;display:flex}.app-title{flex:1 1;gap:20px;min-width:0}.brand{align-items:center;color:#0f172a;color:var(--primary-color);display:flex;font-size:18px;font-weight:700;letter-spacing:-.3px;white-space:nowrap}.header-search{flex:1 1;max-width:480px;min-width:200px}.search-loading{color:#64748b;color:var(--text-muted);font-size:.9rem}.header-controls{align-items:center;display:flex;gap:16px}.toolbar-group{align-items:center;display:flex;gap:6px}.toolbar-divider{background-color:#e2e8f0;background-color:var(--border-color);height:20px;margin:0 4px;width:1px}.status-pill{align-items:center;background:#f1f5f9;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:999px;color:#64748b;color:var(--text-muted);display:inline-flex;font-family:JetBrains Mono,monospace;font-size:12px;font-weight:500;gap:8px;height:32px;padding:0 14px;transition:all .25s cubic-bezier(.16,1,.3,1);transition:all var(--transition-smooth);white-space:nowrap}.pulse-dot{background:#64748b;background:var(--text-muted);border-radius:50%;height:8px;width:8px}.status-pill.ready{background:#f0fdf4;border-color:#bbf7d0;color:#166534}.status-pill.ready .pulse-dot{animation:pulseGreen 2s infinite;background:#22c55e;box-shadow:0 0 0 #22c55e66}.status-pill.loading{background:#fefce8;border-color:#fef08a;color:#854d0e}.status-pill.loading .pulse-dot{animation:pulseYellow 1.5s infinite;background:#eab308}@keyframes pulseGreen{0%{box-shadow:0 0 0 0 #22c55e66}70%{box-shadow:0 0 0 6px #22c55e00}to{box-shadow:0 0 0 0 #22c55e00}}@keyframes pulseYellow{0%{box-shadow:0 0 0 0 #eab30866}70%{box-shadow:0 0 0 6px #eab30800}to{box-shadow:0 0 0 0 #eab30800}}.action-btn{align-items:center;border:1px solid #0000;border-radius:6px;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;font-family:inherit;font-size:13.5px;font-weight:500;height:36px;height:var(--control-height);justify-content:center;outline:none;padding:0 16px;transition:all .25s cubic-bezier(.16,1,.3,1);transition:all var(--transition-smooth);-webkit-user-select:none;user-select:none}.action-btn:disabled{cursor:not-allowed;opacity:.5}.action-btn.primary{background-color:#0ea5e9;background-color:var(--accent-color);box-shadow:0 2px 8px #0ea5e940;color:#fff}.action-btn.primary:hover:not(:disabled){background-color:#0284c7;background-color:var(--accent-hover);box-shadow:0 4px 12px #0ea5e959;transform:translateY(-1px)}.action-btn.secondary{background:#fff;border-color:#e2e8f0;border-color:var(--border-color);color:#0f172a;color:var(--primary-color)}.action-btn.secondary:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.action-btn.icon{background:#0000;border-color:#0000;color:#64748b;color:var(--text-muted);padding:0;width:36px;width:var(--control-height)}.action-btn.icon:hover:not(:disabled){background:#f1f5f9;color:#0f172a;color:var(--primary-color)}.action-btn.icon.active-tool{background:#e0f2fe;color:#0ea5e9;color:var(--accent-color)}.action-btn.icon.danger.recording{animation:recordPulse 2s infinite;background:#fef2f2;color:#ef4444}@keyframes recordPulse{0%{box-shadow:0 0 0 0 #ef44444d}70%{box-shadow:0 0 0 6px #ef444400}to{box-shadow:0 0 0 0 #ef444400}}.compute-group{border-left:1px solid #e2e8f0;border-left:1px solid var(--border-color);padding-left:12px}.workspace{display:flex;flex:1 1;min-height:0;width:100%}.editor-panel{background:#fff;background:var(--bg-panel);border-right:1px solid #e2e8f0;border-right:1px solid var(--border-color);flex:1 1;min-width:0;position:relative}.editor-panel .Ketcher-root{border:none!important;height:100%!important;width:100%!important}.viewer-panel{background-color:#fcfcfc;flex:1 1;position:relative}.empty-state{align-items:center;color:#94a3b8;display:flex;flex-direction:column;font-size:.95rem;left:50%;pointer-events:none;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%)}.loading-container{align-items:center;color:#64748b;color:var(--text-muted);display:flex;height:100%;justify-content:center}.glass-panel{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:#ffffffd9;border:1px solid #0f172a0d;box-shadow:0 0 30px 0 #0f172a1f,0 2px 10px 0 #0f172a14;box-shadow:var(--shadow-glass)}.floating-hud{border-radius:10px;border-radius:var(--radius-md);display:flex;flex-direction:column;overflow:hidden;position:absolute;z-index:10}.left-hud{left:20px;top:20px;width:240px}.right-hud{bottom:20px;max-width:calc(100% - 40px);right:20px;width:320px}.hud-header{background:#f8fafccc;border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--border-color);color:#64748b;color:var(--text-muted);font-size:11px;font-weight:700;letter-spacing:.5px;padding:12px 16px;text-transform:uppercase}.clickable-header{align-items:center;cursor:pointer;display:flex;justify-content:space-between;transition:color .15s ease;-webkit-user-select:none;user-select:none}.clickable-header:hover{color:#0f172a;color:var(--primary-color)}.toggle-icon{color:#94a3b8;transition:transform .25s cubic-bezier(.16,1,.3,1);transition:transform var(--transition-smooth)}.panel-collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s cubic-bezier(.16,1,.3,1);transition:grid-template-rows var(--transition-smooth)}.panel-collapse.open{grid-template-rows:1fr}.panel-inner{min-height:0;overflow:hidden}.custom-scrollbar{max-height:45vh;overflow-y:auto}.custom-scrollbar::-webkit-scrollbar{width:6px}.custom-scrollbar::-webkit-scrollbar-track{background:#0000}.custom-scrollbar::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#94a3b8}.cluster-item{border-bottom:1px solid #f1f5f9;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:12px 16px;transition:background .15s}.cluster-item:last-child{border-bottom:none}.cluster-item:hover{background:#0f172a0a}.cluster-item.active{background:#0ea5e91a;border-left:3px solid #0ea5e9;border-left:3px solid var(--accent-color);padding-left:13px}.cluster-name{color:#0f172a;color:var(--primary-color);font-size:13.5px;font-weight:600}.cluster-meta{color:#64748b;color:var(--text-muted);display:flex;font-family:JetBrains Mono,monospace;font-size:11px;justify-content:space-between}.badge-min{background:#dcfce7;border-radius:4px;color:#166534;font-size:10px;font-weight:600;padding:2px 6px}.hud-footer{background:#f8fafc;border-top:1px solid #e2e8f0;border-top:1px solid var(--border-color);padding:12px}.full-width{width:100%}.properties-table{display:flex;flex-direction:column;gap:8px;padding:12px 16px}.prop-row{grid-gap:12px;align-items:start;border-bottom:1px dashed #e2e8f0;border-bottom:1px dashed var(--border-color);display:grid;font-size:13px;gap:12px;grid-template-columns:100px 1fr;padding:4px 0}.prop-row:last-child{border-bottom:none}.prop-key{color:#64748b;color:var(--text-muted);font-weight:500}.prop-val{color:#0f172a;color:var(--primary-color);word-break:break-word}.prop-val.smiles{font-family:JetBrains Mono,monospace;font-size:12px}.shared-overlay{align-items:center;-webkit-backdrop-filter:none;backdrop-filter:none;background-color:#ffffffd9;display:flex;flex-direction:column;gap:16px;inset:0;justify-content:center;position:absolute;z-index:50}.shared-text{color:#0f172a;color:var(--primary-color);font-size:1.2rem;font-weight:600}.settings-overlay{align-items:center;animation:fadeIn .2s ease-out;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0003;display:flex;inset:0;justify-content:center;position:fixed;z-index:9999}.settings-modal{animation:slideUp .3s cubic-bezier(.16,1,.3,1);background:#fcfcfc;border-radius:16px;border-radius:var(--radius-lg);max-width:90%;overflow:hidden;width:400px}.settings-header{align-items:center;background:#fff;border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding:16px 24px}.settings-header h2{font-size:1rem;font-weight:600;margin:0}.settings-header button{align-items:center;background:#0000;border:none;border-radius:4px;color:#64748b;color:var(--text-muted);cursor:pointer;display:flex;justify-content:center;padding:4px}.settings-header button:hover{background:#e2e8f0;color:#0f172a;color:var(--primary-color)}.settings-body{gap:16px;padding:24px}.setting-group,.settings-body{display:flex;flex-direction:column}.setting-group{gap:6px}.setting-group label{color:#64748b;color:var(--text-muted);font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.setting-group select{background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:6px;border-radius:var(--radius-sm);color:#0f172a;color:var(--primary-color);cursor:pointer;font-size:14px;outline:none;padding:10px 12px;transition:border-color .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1);transition:border-color var(--transition-smooth),box-shadow var(--transition-smooth)}.setting-group select:focus{border-color:#0ea5e9;border-color:var(--accent-color);box-shadow:0 0 0 3px #0ea5e926}.setting-note{color:#d97706;font-size:11px;margin-top:4px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.pubchem-search{max-width:none;position:relative;width:100%}.pubchem-inputWrap{align-items:center;background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:6px;border-radius:var(--radius-sm);box-sizing:border-box;display:flex;gap:8px;height:36px;height:var(--control-height);padding:0 8px}.pubchem-inputWrap.disabled{opacity:.6}.pubchem-icon{font-size:14px;opacity:.7}.pubchem-input{background:#0000;border:none;color:#0f172a;color:var(--primary-color);font-size:14px;height:100%;outline:none;width:100%}.pubchem-go{background:#e0f2fe;border:none;border-radius:4px;border-radius:calc(var(--radius-sm) - 2px);color:#0ea5e9;color:var(--accent-color);cursor:pointer;font-weight:700;height:28px;height:calc(var(--control-height) - 8px);padding:0 10px}.pubchem-go:disabled{cursor:not-allowed;opacity:.5}.pubchem-dropdown{background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:10px;border-radius:var(--radius-md);box-shadow:0 0 30px 0 #0f172a1f,0 2px 10px 0 #0f172a14;box-shadow:var(--shadow-glass);left:0;overflow:hidden;position:absolute;right:0;top:calc(100% + 6px);z-index:50}.pubchem-list{list-style:none;margin:0;max-height:280px;overflow:auto;padding:6px 0}.pubchem-item{color:#0f172a;color:var(--primary-color);cursor:pointer;font-size:14px;padding:10px 12px}.pubchem-item.active,.pubchem-item:hover{background:#f1f5f9}.pubchem-hint{color:#64748b;color:var(--text-muted)}.pubchem-error,.pubchem-hint{font-size:12px;padding:10px 12px}.pubchem-error{background:#fef2f2;border-bottom:1px solid #fecaca;color:#ef4444}@media (max-width:900px){.header-search{max-width:360px}.left-hud{width:200px}}@media (max-width:768px){.app-header{align-items:flex-start;flex-direction:column;gap:12px;height:auto;padding:12px 16px}.app-title{flex-wrap:wrap;width:100%}.header-search{margin-top:4px;max-width:100%}.header-controls{-webkit-overflow-scrolling:touch;overflow-x:auto;padding-bottom:6px;width:100%}.toolbar-group{flex-shrink:0}.workspace{flex:1 1;flex-direction:column}.editor-panel,.viewer-panel{border-right:none;flex:1 1;min-height:0;width:100%}.editor-panel{border-bottom:2px solid #e2e8f0;border-bottom:2px solid var(--border-color)}.left-hud{left:12px;top:12px;width:180px}.right-hud{bottom:12px;max-width:300px;right:12px;width:calc(100% - 24px)}}@media (max-width:1100px) and (min-width:769px){.header-search{max-width:300px}.app-title{flex:1 1 100%;margin-bottom:4px}.header-controls{justify-content:space-between;width:100%}}