@import "/page/developer/features/keys.css";
@import "/page/admin/manage/css/xapp.css";
.dev-start { display: grid; gap: var(--xui-space-4); }
.dev-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--xui-space-4); }
.dev-product { display: grid; align-content: start; gap: var(--xui-space-3); padding: var(--xui-space-4); border: var(--xui-border) solid var(--xui-line-mid); border-radius: var(--xui-radius-panel); background: var(--xui-surface); }
.dev-product-head { display: flex; align-items: center; gap: var(--xui-space-3); }
.dev-product-head img { width: 44px; height: 44px; object-fit: contain; }
.dev-object-name { display: flex; align-items: center; gap: var(--xui-space-3); min-width: 0; }
.dev-object-name > :is(div, span) { min-width: 0; }
.dev-object-name > span:first-child { flex-shrink: 0; }
.dev-object-link { width: 100%; border: 0; padding: 0; background: transparent; box-shadow: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.dev-object-link:hover strong { color: var(--xui-accent-strong); }
.dev-object-link:focus-visible { outline: 2px solid var(--xui-accent-strong); outline-offset: 3px; border-radius: var(--xui-radius-control); }
.dev-object-name code { display: block; color: var(--xui-ink-muted); font-size: var(--xui-text-xs); overflow-wrap: anywhere; }
.dev-table-wrap { overflow-x: auto; }
.dev-table { min-width: 880px; table-layout: fixed; }
.dev-table th:nth-child(2 of :not(.xui-row-number)) { width: 132px; }
.dev-table th:nth-child(3 of :not(.xui-row-number)) { width: 100px; }
.dev-table th:last-child { width: 300px; }
/* The list occupies the remaining grid track even when it has only a few rows. */
#developerContent:has(> [data-list-content]) { height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; }
#developerContent > [data-list-content] { min-width: 0; min-height: 0; }
html[data-ui-system="xui"] #developerContent > [data-list-content] > .dev-table-wrap { height: 100%; max-height: 100%; }
.dev-table td { vertical-align: middle; }
.dev-table .xui-actions { flex-wrap: nowrap; }
.dev-table .xui-button { white-space: nowrap; }
.dev-drawer { width: min(820px, 100vw); right: 0; }
.dev-drawer-config .dev-drawer-body { padding: 0; }
.dev-drawer-body { padding: var(--xui-space-4); display: grid; align-content: start; gap: var(--xui-space-4); min-width: 0; overflow-y: auto; }
.dev-drawer .xapp-config-drawer-head { margin: 0; top: 0; padding: var(--xui-space-4); }
.dev-drawer .xapp-config-form { padding: var(--xui-space-4); }
.dev-drawer .xapp-config-tabs { margin: var(--xui-space-3) var(--xui-space-4) 0; flex-shrink: 0; }
.dev-prompt { width: 100%; min-height: 240px; resize: vertical; font-family: var(--xui-font); padding: var(--xui-space-3); }
.dev-steps { margin: 0; padding-left: 1.5em; display: grid; gap: var(--xui-space-3); color: var(--xui-ink-muted); line-height: 1.7; }
.dev-connect { display: grid; gap: var(--xui-space-4); max-width: 1080px; }
.dev-connect h2 { font-size: var(--xui-text-lg); }
.dev-template-version { font-size: var(--xui-text-xs); color: var(--xui-ink-muted); }
.dev-inline-confirm { border-top: var(--xui-border) solid var(--xui-line-soft); padding-top: var(--xui-space-3); display: grid; gap: var(--xui-space-3); }