#app { display: grid; grid-template-columns: minmax(0, 1fr) 58px; grid-template-rows: 43px minmax(0, 1fr); overflow: hidden; }
.topbar { grid-column: 1 / -1; display: flex; min-width: 0; background: #ebebeb; }
.native-desktop .topbar { padding-right: 150px; app-region: drag; }
.native-desktop .tabs, .native-desktop .add-tab { app-region: no-drag; }
.application-menu-trigger { margin-left: auto; flex-shrink: 0; width: 48px; height: 43px; display: grid; place-items: center; color: #787878; app-region: no-drag; }
.application-menu-trigger svg { width: 29px; height: 29px; }
.application-menu-trigger:hover, .application-menu-trigger[aria-expanded='true'] { background: #dcdcdc; }
.tabs { display: flex; overflow-x: auto; scrollbar-width: thin; min-width: 0; }
.tab { display: flex; flex: 0 0 250px; position: relative; height: 43px; }
.tab::after { content: ''; position: absolute; right: 0; top: 11px; bottom: 11px; width: 1px; background: #d7d7d7; }
.tab.is-active { background: #fff; border-radius: 7px 7px 0 0; }
.tab.is-active::after { display: none; }
.tab-select { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 0 14px; text-align: left; font-size: 16px; line-height: 20px; font-weight: 700; letter-spacing: 0; color: #0f0f0f; }
.tab-select span { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.tab-select svg { width: 22px; height: 22px; }
.close-tab { align-self: center; margin-right: 10px; border-radius: 4px; color: #787878; }
.close-tab svg { width: 24px; height: 24px; }
.close-tab:hover, .add-tab:hover { background: #dcdcdc; }
.add-tab { width: 44px; height: 43px; display: grid; place-items: center; flex-shrink: 0; color: #787878; }
.add-tab svg { width: 25px; height: 25px; }
.add-tab[hidden] { display: none; }
.workspace-scroll { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; background: #fff; }
.workspace { flex: 1 0 auto; background: #fff; min-width: 0; outline-offset: -2px; }
.brand-seal { position: fixed; left: 20px; bottom: 24px; width: 56px; height: 56px; object-fit: contain; pointer-events: none; user-select: none; }
.workspace-scroll > .brand-seal { position: static; flex-shrink: 0; align-self: flex-start; margin: 16px 20px 24px; }
.sidebar { color: #171717; border-left: 1px solid #e9e9e9; display: flex; flex-direction: column; align-items: center; overflow-y: auto; scrollbar-width: thin; background: #fff; }
.sidebar-top, .sidebar-bottom, .sidebar-help { display: flex; flex-direction: column; align-items: center; width: 100%; flex-shrink: 0; }
.sidebar-top { padding-top: 2px; }
.sidebar-bottom { margin-top: auto; padding-top: 32px; }
.sidebar-button { display: grid; place-items: center; width: 52px; height: 58px; border-radius: 4px; flex-shrink: 0; }
.sidebar-button svg { width: 44px; height: 44px; }
.sidebar-button:hover, .sidebar-button[aria-pressed='true'] { background: #f2f2f2; }
.icon-apps svg { width: 43px; height: 43px; }
.sidebar-help { width: 44px; border-top: 1px solid #e9e9e9; margin-top: 6px; padding-top: 7px; padding-bottom: 0; }
@media (max-width: 640px) { .tab { flex-basis: 190px; } #app { grid-template-columns: minmax(0, 1fr) 56px; } }

.navigation-menu { position: fixed; z-index: 10; right: 64px; bottom: 68px; width: 226px; max-width: calc(100vw - 76px); max-height: calc(100vh - 120px); overflow-y: auto; padding: 8px 0; border: 1px solid #e9e9e9; border-radius: 8px; background: #fff; box-shadow: 0 2px 9px #0000001c; color: #171717; }
.navigation-menu[hidden] { display: none; }
.navigation-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 8px 14px; text-align: left; font-size: 18px; line-height: 24px; font-weight: 400; }
.navigation-menu-item svg { width: 30px; height: 30px; stroke-width: 1.6; }
.navigation-menu-item:hover { background: #f2f2f2; }
.sidebar-button[aria-expanded='true'] { background: #f2f2f2; }
@media (max-width: 640px) { .navigation-menu { right: 62px; } }

.connection-panel { position: fixed; z-index: 10; right: 64px; width: 260px; max-width: calc(100vw - 76px); max-height: calc(100vh - 59px); overflow-y: auto; padding: 0 16px; border: 1px solid #e9e9e9; border-radius: 8px; background: #fff; box-shadow: 0 2px 9px #0000001c; color: #171717; }
.connection-panel[hidden] { display: none; }
.connection-panel > div { padding: 16px 0; }
.connection-panel > div + div { border-top: 1px solid #e9e9e9; }
.connection-panel h2 { margin: 0 0 14px; font-size: 12px; line-height: 16px; font-weight: 400; color: #787878; }
.connection-panel dl { margin: 0; }
.connection-panel dt { margin: 12px 0 3px; color: #787878; font-size: 13px; line-height: 18px; }
.connection-panel dd { margin: 0; font-size: 17px; line-height: 24px; }
@media (max-width: 640px) { .connection-panel { right: 62px; } }