| |
| .molgate-logo { |
| display: flex; |
| flex-direction: column; |
| gap: 6px; |
| flex-shrink: 0; |
| } |
|
|
| .molgate-logo-main { |
| font-family: 'IBM Plex Mono', monospace; |
| font-size: 52px; |
| font-weight: 800; |
| line-height: 1; |
| letter-spacing: -0.03em; |
| display: flex; |
| align-items: baseline; |
| } |
|
|
| .logo-mol { |
| color: #4a9eff !important; |
| font-weight: 800 !important; |
| } |
|
|
| .logo-gate { |
| color: #2dd4bf !important; |
| font-weight: 800 !important; |
| } |
|
|
| html[data-theme="light"] .logo-mol { |
| color: #2563eb !important; |
| } |
|
|
| html[data-theme="light"] .logo-gate { |
| color: #0d9488 !important; |
| } |
|
|
| .logo-sub { |
| font-family: 'IBM Plex Mono', monospace; |
| font-size: 17px; |
| color: var(--text3); |
| font-weight: 400; |
| line-height: 1.3; |
| } |
|
|
| .mg-toolbar { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| flex-wrap: wrap; |
| } |
|
|
| .nav-btn { |
| font-family: 'IBM Plex Mono', monospace; |
| font-size: 13px; |
| font-weight: 600; |
| padding: 6px 12px; |
| border-radius: 6px; |
| border: 1px solid var(--border2); |
| background: var(--surface2); |
| color: var(--text2); |
| cursor: pointer; |
| } |
|
|
| .nav-btn:hover:not(:disabled) { |
| background: var(--blue-dim); |
| color: var(--blue); |
| border-color: var(--blue); |
| } |
|
|
| .nav-btn:disabled { |
| opacity: 0.35; |
| cursor: not-allowed; |
| } |
|
|
| |
| body[data-molgate-module] { |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .mg-top-bar { |
| display: flex; |
| align-items: center; |
| justify-content: flex-end; |
| padding: 0.5rem 2rem; |
| border-bottom: 1px solid var(--border, #2a2f42); |
| background: var(--bg, #0d0f12); |
| flex-shrink: 0; |
| width: 100%; |
| } |
|
|
| .mg-top-bar .mg-toolbar { |
| justify-content: flex-end; |
| } |
|
|
| .mg-chrome { |
| flex-shrink: 0; |
| width: 100%; |
| border-bottom: 1px solid var(--border, #2a2f42); |
| } |
|
|
| .mg-chrome > .header { |
| padding: 1.15rem 2rem 0.35rem; |
| border-bottom: none; |
| display: flex; |
| align-items: flex-start; |
| } |
|
|
| .mg-chrome > .header-meta { |
| padding: 0 2rem 0.75rem; |
| border-bottom: none; |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| align-items: center; |
| font-family: 'IBM Plex Mono', monospace; |
| font-size: 15px; |
| color: var(--text3, #545d78); |
| line-height: 1.6; |
| } |
|
|
| .mg-chrome > .header-meta.session-info { |
| flex-direction: column; |
| align-items: flex-start; |
| gap: 2px; |
| } |
|
|
| .mg-chrome > .header-meta b { |
| color: var(--text2, #8890aa); |
| } |
|
|
| .mg-chrome > .header-meta:empty { |
| display: none; |
| padding: 0; |
| border-bottom: none; |
| } |
|
|
| .mg-module-stepper { |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| } |
|
|
| .mg-step { |
| font-family: 'IBM Plex Mono', monospace; |
| font-size: 12px; |
| font-weight: 600; |
| padding: 4px 8px; |
| border-radius: 5px; |
| border: 1px solid var(--border2, #363d55); |
| background: transparent; |
| color: var(--text3, #545d78); |
| text-decoration: none; |
| } |
|
|
| .mg-step:hover { |
| color: var(--blue, #4a9eff); |
| border-color: var(--blue, #4a9eff); |
| background: var(--blue-dim, #1a3a6e); |
| } |
|
|
| .mg-step.active { |
| color: var(--blue, #4a9eff); |
| border-color: var(--blue, #4a9eff); |
| background: var(--blue-dim, #1a3a6e); |
| } |
|
|
| .theme-btns, |
| .lang-btns { |
| display: flex; |
| gap: 4px; |
| } |
|
|
| .theme-btn, |
| .lang-btn { |
| font-family: 'IBM Plex Mono', monospace; |
| font-size: 14px; |
| padding: 3px 10px; |
| border-radius: 4px; |
| border: 1px solid var(--border2, #363d55); |
| background: transparent; |
| color: var(--text3, #545d78); |
| cursor: pointer; |
| } |
|
|
| .theme-btn.active, |
| .lang-btn.active { |
| background: var(--blue-dim, #1a3a6e); |
| color: var(--blue, #4a9eff); |
| border-color: var(--blue, #4a9eff); |
| } |
|
|
| .session-pill { |
| font-family: 'IBM Plex Mono', monospace; |
| font-size: 13px; |
| padding: 3px 8px; |
| border-radius: 4px; |
| background: var(--surface2, #1c2030); |
| color: var(--text3, #545d78); |
| border: 1px solid var(--border, #2a2f42); |
| } |
|
|
| |
| .engine .engine-body { |
| display: block !important; |
| } |
|
|
| .engine .engine-chevron { |
| display: none !important; |
| } |
|
|
| .engine > .engine-header { |
| cursor: default; |
| } |
|
|
