@layer external, theme, normalize, base, native_popovers, common_components, components, utilities, top_layer;
@layer components {
	.RootLayout {
		--RootLayout-header-height: 48px;
		@media (max-width: 640px) {
			--RootLayout-header-height: 96px;
		}

		display: grid;
		grid-template:
			var(--RootLayout-header-height) calc(100dvh - var(--RootLayout-header-height)) /
			max-content minmax(0, 1fr);

		min-height: inherit;

		isolation: isolate;

		> .MainAppHeader {
			grid-row: 1;
			grid-column: 1 / -1;
		}

		> .MainAppSidebar {
			grid-row: 2;
			grid-column: 1;
		}

		> .RootLayout-content {
			grid-row: 2;
			grid-column: 2;

			/* Let route pages shrink below their min-content width so narrow viewports do not widen the grid. */
			min-width: 0;
		}
	}
}
@layer components {
	.AppLoadingCard {
		display: flex;
		align-items: center;
		justify-content: center;

		min-height: 100dvh;
		padding: 24px;

		background: var(--color-base-1-02);
	}

	.AppLoadingCard-panel {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;

		width: min(100%, 360px);
		padding: 24px;

		border: 1px solid var(--color-base-1-08);
		border-radius: 16px;

		background: var(--color-base-1-04);
		box-shadow: 0 20px 40px rgb(0 0 0 / 0.2);

		text-align: center;
	}

	.AppLoadingCard-logo {
		margin-bottom: 4px;
	}

	.AppLoadingCard-spinner {
		color: var(--color-accent-07);
	}

	.AppLoadingCard-title {
		font-size: 1rem;
		font-weight: 600;
		color: var(--color-fg-11);
	}

	.AppLoadingCard-description {
		font-size: 0.875rem;
		line-height: 1.5;
		color: var(--color-fg-08);
	}
}
@layer common_components {
	.Logo {
		display: flex;
		align-items: center;
		justify-content: start;
		gap: 8px;

		height: 23px;
		min-width: 73px;

		font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
		font-size: 1.125rem;
		font-weight: 700;
		letter-spacing: 0.05em;

		color: var(--color-accent-06);

		transition: color 0.15s ease;
	}

	.Logo:hover {
		color: var(--color-accent-07);
	}

	.Logo-mark {
		width: 24px;
		height: 24px;
	}

	.Logo-text {
		font: inherit;
		color: inherit;
	}
}
@layer common_components {
	.MySpinner {
		--MySpinner-size: 1em;
		--MySpinner-color: currentColor;
		--MySpinner-duration: 1.4s;

		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--MySpinner-size);
		height: var(--MySpinner-size);
		color: var(--MySpinner-color);
	}

	.MySpinner-circle {
		width: 100%;
		height: 100%;
		animation: MySpinner-rotate var(--MySpinner-duration) linear infinite;
	}

	.MySpinner-path {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
		stroke-linecap: round;
		animation: MySpinner-dash var(--MySpinner-duration) ease-in-out infinite;
	}

	@keyframes MySpinner-rotate {
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes MySpinner-dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}
		50% {
			stroke-dasharray: 89, 200;
			stroke-dashoffset: -35px;
		}
		100% {
			stroke-dasharray: 89, 200;
			stroke-dashoffset: -124px;
		}
	}
}
@layer components {
	.AppRouteError {
		display: flex;
		align-items: center;
		justify-content: center;

		padding: 16px;
	}

	.AppRouteError-layout-embedded {
		height: 100%;
		width: 100%;
	}

	.AppRouteError-layout-fullscreen {
		min-height: 100dvh;
		width: 100%;

		padding: 24px;

		background: var(--color-base-1-02);
	}

	.AppRouteError-content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;

		width: 100%;
		max-width: 560px;

		padding: 16px;
		border-radius: 8px;
		border: 1px solid var(--color-base-1-10);

		background: var(--color-base-1-04);
		color: var(--color-fg-11);

		box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
	}

	.AppRouteError-title {
		font-size: 1.125rem;
		font-weight: 600;
		line-height: 1.25;
		color: var(--color-fg-12);
	}

	.AppRouteError-description {
		color: var(--color-fg-09);
		margin-bottom: 20px;
	}

	.AppRouteError-actions {
		display: flex;
		align-items: center;
		align-self: center;
		margin-bottom: 20px;
	}

	.AppRouteError-technical-details {
		width: 100%;
	}

	.AppRouteError-technical-details-toggle {
		display: flex;
		align-items: center;
		gap: 6px;
		cursor: pointer;
		font-size: 0.875rem;
		color: var(--color-fg-07);

		padding: 8px;

		background: var(--color-base-1-04);

		&:hover {
			color: var(--color-fg-08);
		}
	}

	.AppRouteError-technical-details-toggle-icon {
		flex-shrink: 0;
		color: inherit;
	}

	.AppRouteError-technical-details[open] .AppRouteError-technical-details-toggle-icon {
		transform: rotate(90deg);
	}

	.AppRouteError-technical-details-pre {
		font-size: 0.75rem;
		line-height: 1.5;

		color: var(--color-fg-09);
	}

	.AppRouteError-technical-details-textarea {
		padding: 12px;

		width: 100%;
		height: 280px;

		resize: none;
		border: none;

		background: var(--color-base-1-03);

		overflow: auto;

		white-space: inherit;
	}
}
@layer components {
	.PluginsPublishSessionProvider {
		display: flex;
		flex-direction: column;
		gap: 14px;

		width: min(92vw, 520px);
		padding: 18px;
	}

	.PluginsPublishSessionProvider .MyModalScrollableArea {
		display: flex;
		flex-direction: column;
		gap: 10px;

		& > p {
			margin: 0;
			font-size: 13px;
			color: var(--color-fg-08);
		}
	}

	.PluginsPublishSessionProvider-head {
		display: block;
		padding: 10px;
		border: 1px solid var(--color-base-1-06);
		border-radius: 6px;
		overflow-wrap: anywhere;

		font-family: monospace;
		font-size: 12px;
		color: var(--color-fg-11);
		background: var(--color-base-1-02);
	}

	.PluginsPublishSessionProvider-error {
		color: var(--color-destructive) !important;
	}
}
@layer common_components {
	/* #region root */
	.MyInput {
		contain: content;

		display: flex;
	}

	/* Keep the absolute Background and Box inside the field cell, away from the label and helper. */
	.MyInput-layout-stacked {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"label label"
			"field actions"
			"helper helper";
		align-items: center;
	}

	.MyInput-layout-stacked > .MyInputLabel {
		grid-area: label;
	}

	.MyInput-layout-stacked
		> :is(.MyInputBackground, .MyInputBox, .MyInputArea, .MyInputControl, .MyInputTextAreaControl) {
		grid-area: field;
	}

	.MyInput-layout-stacked > .MyInputActions {
		grid-area: actions;
	}

	.MyInput-layout-stacked > .MyInputHelperText {
		grid-area: helper;
	}
	/* #endregion root */

	/* #region label */
	.MyInputLabel {
		display: block;

		font-size: 0.875rem;
		font-weight: 500;
		/* Unitless so it scales with font-size; prefer this over px/em for line-height. */
		line-height: 1.25;

		color: var(--color-fg-08);

		padding-bottom: 6px;
	}
	/* #endregion label */

	/* #region helper text */
	.MyInputHelperText {
		display: block;
		font-size: 0.8125rem;
		color: var(--color-fg-05);

		padding: 0 12px 0 12px;
	}
	/* #endregion helper text */

	/* #region icon */
	.MyInputIcon {
		color: var(--color-fg-05);

		&:first-child {
			margin-left: 12px;
		}

		&:last-child {
			margin-right: 12px;
		}
	}
	/* #endregion icon */

	/* #region background */
	.MyInputBackground,
	.MyInputBox {
		position: absolute;
		inset: 0;

		width: 100%;
		height: 100%;

		pointer-events: none;

		border-radius: 6px;
	}

	.MyInputBackground {
		background: var(--color-base-1-01);

		.MyInput-variant-floating & {
			background: var(--color-base-alt-1-02);
		}

		.MyInput-variant-transparent & {
			background: transparent;
		}
	}
	/* #endregion background */

	/* #region box */
	.MyInputBox {
		border: 1px solid var(--color-base-1-07);
		outline: 2px solid transparent;
		outline-offset: -2px;

		background: transparent;

		z-index: 1;

		.MyInput:has(:where(.MyInputControl:focus-visible, .MyInputTextAreaControl:focus-visible)) & {
			outline-color: var(--color-fg-12);
		}

		.MyInput-variant-floating & {
			border-color: var(--color-base-alt-1-09);
		}

		.MyInput-variant-transparent & {
			border-color: transparent;
		}

		.MyInput.userInvalid &,
		.MyInput:has(:where(.MyInputControl, .MyInputTextAreaControl)[aria-invalid="true"]) & {
			border-color: var(--color-red-09);
			outline-color: var(--color-red-09);
		}
	}
	/* #endregion box */

	/* #region area */
	.MyInputArea {
		contain: layout;

		display: flex;
		align-items: center;

		flex: 1;
		min-width: 0;
		width: 100%;
		min-height: 36px;

		cursor: text;

		.MyInputControl {
			padding: 4px 12px;
		}

		.MyInputTextAreaControl {
			padding: 14px 12px;
		}
	}
	/* #endregion area */

	/* #region actions */
	.MyInputActions {
		flex-shrink: 0;
		align-self: center;
	}

	.MyInput:has(.MyInputTextAreaControl) .MyInputActions {
		margin: 0 8px 8px 0;
		align-self: end;
	}
	/* #endregion actions */

	/* #region control */
	.MyInputControl,
	.MyInputTextAreaControl {
		position: relative;

		min-width: 0;
		width: 100%;
		border-radius: 6px;

		background: transparent;
		border: none;

		color: var(--color-fg-11);
		font-size: 1rem;
		line-height: 1.5;

		outline: none;

		/* Disabled */
		&:disabled {
			pointer-events: none;
			cursor: not-allowed;
			opacity: 0.5;
		}

		/* Placeholder */
		&::placeholder {
			color: var(--color-fg-07);
		}

		/* File button */
		&::file-selector-button {
			/* The `size of the input area` less the `padding`.
			   36px - 8px */
			height: 28px;
			margin-right: 12px;
			border: 0;
			background: transparent;
			font-size: 0.875rem;
			font-weight: 500;
			color: inherit;
		}
	}

	.MyInputControl {
		height: 36px;
	}
	/* #endregion control */

	/* #region textarea control */
	.MyInputTextAreaControl {
		height: auto;
		min-height: 1lh;
		resize: vertical;
	}
	/* #endregion textarea control */
}
@layer common_components {
	.MyModalBackdrop {
		position: fixed;
		inset: 0;

		background: black;

		filter: opacity(0.8);
		backdrop-filter: blur(2px);
	}

	.MyModalPopover {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		width: 90vw;
		max-width: 600px;
		max-height: 85vh;

		/* A column, so the content area shrinks to fit the header and footer. A fixed guess for their
		   height is too small for a header with a subtitle, and the popover then clips the footer. */
		display: flex;
		flex-direction: column;

		border-radius: 12px;
		border: 1px solid var(--color-base-1-05);

		background: linear-gradient(var(--color-base-1-03), var(--color-base-1-02));
		color: var(--color-fg-11);

		box-shadow:
			inset 0 1px 2px oklch(1 0 0 / 0.2),
			0 4px 6px oklch(0 0 0 / 0.3),
			0 8px 10px oklch(0 0 0 / 0.18);

		outline: none;

		contain: content;
	}

	.MyModalHeader {
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: center;
		gap: 4px;

		padding: 16px 48px 16px 20px;

		border-bottom: 1px solid var(--color-base-1-08);

		min-height: 70px;
		flex: none;
	}

	.MyModalScrollableArea {
		max-height: calc(85vh - 140px);
		min-height: 0;
		overflow-y: auto;
		padding: 20px;
	}

	.MyModalFooter {
		display: flex;
		align-items: center;
		justify-content: end;
		gap: 8px;

		padding: 16px 20px;

		border-top: 1px solid var(--color-base-1-08);

		min-height: 70px;
		flex: none;
	}

	.MyModalHeading {
		margin: 0;
		font-size: 1.25rem;
		font-weight: 600;
		line-height: 1.2;
		color: var(--color-fg-11);
	}

	.MyModalDescription {
		margin: 0;
		color: var(--color-fg-08);
	}

	.MyModalCloseTrigger {
		position: absolute;
		top: 0px;
		right: 0px;

		margin: 16px 16px 16px 0;
	}
}
@layer common_components {
	.MyIconButton.MyButton {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 6px;

		width: 36px;
	}

	.MyIconButtonIcon {
		width: 16px;
		height: 16px;
	}
}
@layer components {
	.RouteOauthMcpCallback {
		display: flex;
		align-items: center;
		justify-content: center;

		min-height: 100dvh;
		padding: 24px;

		background: var(--color-base-1-02);
	}

	.RouteOauthMcpCallback-panel {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;

		width: min(100%, 360px);
		padding: 24px;

		border: 1px solid var(--color-base-1-08);
		border-radius: 16px;

		background: var(--color-base-1-04);

		text-align: center;
	}

	.RouteOauthMcpCallback-title {
		font-size: 1rem;
		font-weight: 600;
		color: var(--color-fg-11);
	}

	.RouteOauthMcpCallback-description {
		font-size: 0.875rem;
		line-height: 1.5;
		color: var(--color-fg-08);
	}
}
@layer components {
	/* #region root */
	.RouteApiKeys {
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}

	.RouteApiKeys-content {
		display: flex;
		flex-direction: column;
		gap: 20px;

		width: min(100%, 960px);
		margin-inline: auto;
		padding: 24px;
	}

	.RouteApiKeys-loading {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;

		min-height: 180px;

		color: var(--color-fg-08);
	}

	.RouteApiKeys-error {
		display: flex;
		align-items: start;
		gap: 10px;

		padding: 16px;
		border: 1px solid var(--color-red-06);
		border-radius: 8px;

		background: var(--color-red-02);
		color: var(--color-red-11);

		& > svg {
			width: 18px;
			height: 18px;
			flex: none;
		}

		& > div {
			display: flex;
			flex-direction: column;
			gap: 3px;
		}

		& span {
			font-size: 13px;
			line-height: 1.45;
		}
	}
	/* #endregion root */

	/* #region header */
	.RouteApiKeysHeader {
		display: flex;
		align-items: start;
		justify-content: space-between;
		gap: 16px;
	}

	.RouteApiKeysHeader-title {
		margin: 0;

		font-size: 24px;
		font-weight: 650;
		line-height: 1.2;
		color: var(--color-fg-12);
	}

	.RouteApiKeysHeader-description {
		margin: 6px 0 0;

		font-size: 14px;
		line-height: 1.45;
		color: var(--color-fg-08);
	}

	.RouteApiKeysHeader-toolbar {
		display: flex;
		align-items: center;
		justify-content: end;
		gap: 8px;
	}
	/* #endregion header */

	/* #region security */
	.RouteApiKeysSecurity {
		display: flex;
		align-items: start;
		gap: 12px;

		padding: 15px 16px;
		border: 1px solid var(--color-base-1-07);
		border-radius: 8px;

		background: var(--color-base-1-03);
		color: var(--color-fg-09);

		& > svg {
			width: 20px;
			height: 20px;
			flex: none;
			margin-block-start: 1px;
			color: var(--color-fg-08);
		}
	}

	.RouteApiKeysSecurity-content {
		display: flex;
		flex-direction: column;
		gap: 3px;

		font-size: 13px;
		line-height: 1.45;

		& > strong {
			color: var(--color-fg-11);
		}
	}
	/* #endregion security */

	/* #region list */
	.RouteApiKeysList {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.RouteApiKeysList-header {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.RouteApiKeysList-title,
	.RouteApiKeysQuickStart-title {
		margin: 0;

		font-size: 18px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--color-fg-12);
	}

	.RouteApiKeysList-description,
	.RouteApiKeysQuickStart-description {
		margin: 0;

		font-size: 13px;
		line-height: 1.45;
		color: var(--color-fg-08);
	}

	.RouteApiKeysList-items {
		display: flex;
		flex-direction: column;
		gap: 0;
		container-type: inline-size;

		margin: 0;
		padding: 0;
		border: 1px solid var(--color-base-1-07);
		border-radius: 8px;
		overflow: hidden;

		list-style: none;
	}

	.RouteApiKeysList-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;

		padding: 28px 18px;
		border: 1px dashed var(--color-base-1-07);
		border-radius: 8px;

		text-align: center;
		color: var(--color-fg-08);

		& > svg {
			width: 24px;
			height: 24px;
			color: var(--color-fg-07);
		}
	}

	.RouteApiKeysList-emptyTitle {
		margin: 0;

		font-size: 15px;
		font-weight: 600;
		color: var(--color-fg-11);
	}

	.RouteApiKeysList-emptyDescription {
		max-width: 52ch;
		margin: -4px 0 2px;

		font-size: 13px;
		line-height: 1.45;
	}

	.RouteApiKeysList-revoked {
		border: 1px solid var(--color-base-1-07);
		border-radius: 8px;
		overflow: hidden;

		&[open] > .RouteApiKeysList-revokedSummary {
			border-block-end: 1px solid var(--color-base-1-07);
		}

		& > .RouteApiKeysList-items {
			border: 0;
			border-radius: 0;
		}
	}

	.RouteApiKeysList-revokedSummary {
		padding: 12px 14px;

		font-size: 13px;
		font-weight: 600;
		color: var(--color-fg-09);

		cursor: pointer;
		outline-offset: -2px;

		&:hover {
			background: var(--color-base-1-04);
			color: var(--color-fg-11);
		}

		&:focus-visible {
			outline-color: var(--color-fg-12);
		}
	}
	/* #endregion list */

	/* #region list item */
	.RouteApiKeysListItem {
		display: grid;
		grid-template-columns: minmax(180px, 1.2fr) minmax(190px, 1fr) minmax(140px, 0.8fr) auto;
		align-items: center;
		gap: 14px;

		min-width: 0;
		padding: 14px;

		background: var(--color-base-1-03);

		& + & {
			border-block-start: 1px solid var(--color-base-1-07);
		}
	}

	.RouteApiKeysListItem-main {
		display: flex;
		flex-direction: column;
		gap: 6px;
		min-width: 0;
	}

	.RouteApiKeysListItem-titleRow {
		display: flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
	}

	.RouteApiKeysListItem-name {
		min-width: 0;
		margin: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		font-size: 14px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--color-fg-12);
	}

	.RouteApiKeysListItem-key {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		font-family: monospace;
		font-size: 12px;
		color: var(--color-fg-08);
	}

	.RouteApiKeysListItem-meta {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px 12px;

		min-width: 0;
		margin: 0;
	}

	.RouteApiKeysListItem-metaItem {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}

	.RouteApiKeysListItem-metaLabel {
		font-size: 11px;
		line-height: 1.2;
		color: var(--color-fg-07);
	}

	.RouteApiKeysListItem-metaValue {
		margin: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		font-size: 12px;
		line-height: 1.3;
		color: var(--color-fg-09);
	}

	.RouteApiKeysListItem-scopes {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px;
		min-width: 0;
	}

	.RouteApiKeysListItem-actions {
		display: flex;
		align-items: center;
		justify-content: end;
		gap: 6px;
	}
	/* #endregion list item */

	/* #region quick start */
	.RouteApiKeysQuickStart {
		display: flex;
		flex-direction: column;
		gap: 14px;

		padding-block-start: 20px;
		border-block-start: 1px solid var(--color-base-1-06);
		min-width: 0;
	}

	.RouteApiKeysQuickStart-header {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.RouteApiKeysQuickStart-tabs {
		min-width: 0;

		& .MyTabsPanels,
		& .MyTabsPanel {
			min-width: 0;
		}
	}

	.RouteApiKeysQuickStart-notes {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.RouteApiKeysQuickStart-note {
		display: flex;
		align-items: start;
		gap: 8px;

		margin: 0;

		font-size: 12px;
		line-height: 1.45;
		color: var(--color-fg-08);

		& > svg {
			width: 15px;
			height: 15px;
			flex: none;
			margin-block-start: 1px;
		}
	}
	/* #endregion quick start */

	/* #region code block */
	.RouteApiKeysCodeBlock {
		min-width: 0;
		border: 1px solid var(--color-base-1-06);
		border-radius: 6px;
		overflow: hidden;

		background: var(--color-base-1-02);
	}

	.RouteApiKeysCodeBlock-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;

		min-height: 34px;
		padding: 3px 5px 3px 10px;
	}

	.RouteApiKeysCodeBlock-language {
		font-family: monospace;
		font-size: 12px;
		color: var(--color-fg-07);
	}

	.RouteApiKeysCodeBlock > .TextMonospaceBlock {
		border: 0;
		border-block-start: 1px solid var(--color-base-1-06);
		border-radius: 0;
		white-space: pre;
	}
	/* #endregion code block */

	/* #region verification status */
	.RouteApiKeysVerificationStatus {
		display: flex;
		align-items: center;
		gap: 8px;

		padding: 10px 12px;
		border: 1px solid var(--color-base-1-07);
		border-radius: 6px;

		font-size: 13px;
		line-height: 1.4;

		& > svg {
			width: 16px;
			height: 16px;
			flex: none;
		}
	}

	.RouteApiKeysVerificationStatus-state-pending {
		color: var(--color-fg-08);
	}

	.RouteApiKeysVerificationStatus-state-success {
		border-color: var(--color-green-06);
		background: var(--color-green-02);
		color: var(--color-green-11);
	}

	.RouteApiKeysVerificationStatus-state-error {
		border-color: var(--color-red-06);
		background: var(--color-red-02);
		color: var(--color-red-11);
	}
	/* #endregion verification status */

	/* #region create modal */
	.RouteApiKeysCreateModal {
		width: min(92vw, 520px);
	}

	.RouteApiKeysCreateModal-form {
		display: contents;
	}

	.RouteApiKeysCreateModal-fields {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.RouteApiKeysCreateModal-permissions {
		margin: 0;
		padding: 14px;
		border: 1px solid var(--color-base-1-07);
		border-radius: 8px;
	}

	.RouteApiKeysCreateModal-permissionsTitle {
		padding-inline: 4px;

		font-size: 13px;
		font-weight: 600;
		color: var(--color-fg-10);
	}

	.RouteApiKeysCreateModal-permissionsHint {
		margin: 0 0 10px;

		font-size: 12px;
		line-height: 1.4;
		color: var(--color-fg-08);
	}

	.RouteApiKeysCreateModal-permissionList {
		display: flex;
		flex-direction: column;
		gap: 4px;

		margin: 0;
		padding: 0;

		list-style: none;
	}

	/* A scope row needs a label and a description, so the row must wrap and grow. The base
	   MyButton is one nowrap line 36px tall, which would cut both off. */
	.RouteApiKeysCreateModal-permission {
		align-items: start;
		justify-content: start;
		white-space: normal;

		width: 100%;
		height: auto;
		padding: 8px 10px;

		text-align: start;
	}

	.RouteApiKeysCreateModal-permission .MyCheckboxButton-box {
		margin-top: 1px;
	}

	.RouteApiKeysCreateModal-permissionText {
		display: flex;
		flex-direction: column;
		gap: 2px;

		min-width: 0;
	}

	.RouteApiKeysCreateModal-permissionTitle {
		font-size: 13px;
		font-weight: 600;
		color: var(--color-fg-11);
	}

	.RouteApiKeysCreateModal-permissionDescription {
		font-size: 12px;
		line-height: 1.4;
		/* Reset the MyButton font weight the checkbox row label inherits. */
		font-weight: 400;
		color: var(--color-fg-08);
	}

	.RouteApiKeysCreateModal-writeWarning {
		display: flex;
		align-items: start;
		gap: 8px;

		margin: 10px 0 0;
		padding: 10px 12px;
		border: 1px solid var(--color-accent-06);
		border-radius: 6px;

		background: var(--color-accent-02);
		font-size: 12px;
		line-height: 1.4;
		color: var(--color-accent-10);

		& > svg {
			width: 15px;
			height: 15px;
			flex: none;
			margin-block-start: 1px;
		}
	}

	.RouteApiKeysCreateModal [role="alert"],
	.RouteApiKeysConfirmationModal [role="alert"] {
		font-size: 13px;
		line-height: 1.4;
		color: var(--color-red-11);
	}
	/* #endregion create modal */

	/* #region reveal modal */
	.RouteApiKeysRevealModal {
		width: min(92vw, 560px);
	}

	.RouteApiKeysRevealModal-content {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.RouteApiKeysRevealModal-warning {
		display: flex;
		align-items: start;
		gap: 9px;

		padding: 11px 12px;
		border: 1px solid var(--color-accent-06);
		border-radius: 6px;

		background: var(--color-accent-02);
		font-size: 13px;
		line-height: 1.4;
		color: var(--color-accent-10);

		& > svg {
			width: 17px;
			height: 17px;
			flex: none;
			margin-block-start: 1px;
		}
	}

	.RouteApiKeysRevealModal-secret {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 8px;
		min-width: 0;
	}

	.RouteApiKeysRevealModal-secret > .TextMonospaceBlock {
		white-space: pre;
	}

	.RouteApiKeysRevealModal-copy.MyIconButton {
		align-self: stretch;
		height: auto;
	}
	/* #endregion reveal modal */

	/* #region confirmation modal */
	.RouteApiKeysConfirmationModal {
		width: min(92vw, 480px);
	}

	.RouteApiKeysConfirmationModal-content {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.RouteApiKeysConfirmationModal-key {
		display: block;
		padding: 10px 12px;
		border: 1px solid var(--color-base-1-07);
		border-radius: 6px;
		overflow-wrap: anywhere;

		background: var(--color-base-1-03);
		font-family: monospace;
		font-size: 12px;
		color: var(--color-fg-09);
	}
	/* #endregion confirmation modal */

	@container (max-width: 820px) {
		.RouteApiKeysListItem {
			grid-template-columns: minmax(0, 1fr) auto;
		}

		.RouteApiKeysListItem-meta,
		.RouteApiKeysListItem-scopes {
			grid-column: 1 / -1;
		}

		.RouteApiKeysListItem-actions {
			grid-row: 1;
			grid-column: 2;
		}
	}

	@container (max-width: 520px) {
		.RouteApiKeysListItem {
			grid-template-columns: minmax(0, 1fr);
			gap: 12px;
		}

		.RouteApiKeysListItem-meta,
		.RouteApiKeysListItem-scopes,
		.RouteApiKeysListItem-actions {
			grid-row: auto;
			grid-column: 1;
		}

		.RouteApiKeysListItem-actions {
			justify-content: start;
			flex-wrap: wrap;
		}
	}

	@media (max-width: 640px) {
		.RouteApiKeys-content {
			padding: 16px;
		}

		.RouteApiKeysHeader {
			flex-direction: column;
			align-items: stretch;
		}

		.RouteApiKeysHeader-toolbar {
			justify-content: start;
		}

		.RouteApiKeysRevealModal-secret {
			grid-template-columns: minmax(0, 1fr);
		}

		.RouteApiKeysRevealModal-copy.MyIconButton {
			align-self: auto;
			height: 36px;
		}

		.RouteApiKeysRevealModal .MyModalFooter,
		.RouteApiKeysConfirmationModal .MyModalFooter,
		.RouteApiKeysCreateModal .MyModalFooter {
			flex-wrap: wrap;
		}
	}
}
@layer components {
	/* Fill the content area (viewport minus header) so both panels get the full height. */
	.RouteWebBrowser {
		width: 100%;
		height: 100%;
	}

	.RouteWebBrowser-panel {
		height: 100%;
		padding: 12px;
	}

	.RouteWebBrowser-agent {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
}
@layer components {
	/* Fill the content area (viewport minus header) so the chat panel gets the full height. */
	.RouteChat {
		width: 100%;
		height: 100%;
	}
}
@layer components {
	/* #region root */
	.RouteFilesPath {
		display: flex;
		align-items: center;
		justify-content: center;

		height: 100%;
		width: 100%;
		min-width: 0;
	}

	.RouteFilesPath-loading-text {
		padding: 1rem;

		font-size: 0.875rem;
		line-height: 1.25rem;
		color: var(--color-fg-07);
	}
	/* #endregion root */

	/* #region not found */
	.RouteFilesPathNotFound {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 12px;

		padding: 48px 24px;

		text-align: center;
	}

	.RouteFilesPathNotFound-title {
		margin: 0;

		font-size: 1.125rem;
		font-weight: 600;
		color: var(--color-fg-11);
	}

	.RouteFilesPathNotFound-description {
		max-width: 420px;
		margin: 0;

		font-size: 1rem;
		line-height: 1.4;
		color: var(--color-fg-07);
	}

	.RouteFilesPathNotFound-path {
		max-width: 100%;
		padding: 6px 10px;

		overflow-wrap: anywhere;

		font-family: monospace;
		font-size: 0.875rem;
		color: var(--color-fg-09);

		background-color: var(--color-base-1-04);
		border-radius: 6px;
	}

	.RouteFilesPathNotFound-actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 8px;

		margin-top: 4px;
	}
	/* #endregion not found */
}
@layer components {
	.RouteBrowser {
		height: 100dvh;
		padding: 12px;

		background: var(--color-base-1-01);
	}

	.RouteBrowser-message {
		margin: 0;
		padding: 24px;

		font-size: 0.875rem;
		color: var(--color-fg-07);
	}
}
@layer components {
	/* #region root */
	/* Full-width scroll owner so the bar sits on the page's right edge; -content is the centered column. */
	.RouteMcpServers {
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}

	.RouteMcpServers-content {
		display: flex;
		flex-direction: column;
		gap: 28px;

		width: min(100%, 960px);
		margin-inline: auto;
		padding: 24px;
	}

	.RouteMcpServers-loading {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;

		min-height: 180px;

		color: var(--color-fg-08);
	}

	.RouteMcpServersHeader-title {
		margin: 0;

		font-size: 24px;
		font-weight: 650;
		line-height: 1.2;
		color: var(--color-fg-12);
	}

	.RouteMcpServersHeader-description {
		margin: 6px 0 0;

		font-size: 14px;
		line-height: 1.45;
		color: var(--color-fg-08);
	}
	/* #endregion root */

	/* #region plugin server */
	.RouteMcpServersPluginServer {
		display: flex;
		align-items: start;
		justify-content: space-between;
		gap: 14px;

		min-width: 0;
		padding: 14px;

		background: var(--color-base-1-03);

		& + & {
			border-block-start: 1px solid var(--color-base-1-07);
		}
	}

	.RouteMcpServersPluginServer-main {
		display: flex;
		flex-direction: column;
		gap: 6px;
		min-width: 0;
	}

	.RouteMcpServersPluginServer-titleRow {
		display: flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
	}

	.RouteMcpServersPluginServer-name {
		min-width: 0;
		margin: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		font-size: 14px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--color-fg-12);
	}

	.RouteMcpServersPluginServer-details {
		margin: 0;

		font-size: 13px;
		line-height: 1.45;
		color: var(--color-fg-08);
		overflow-wrap: anywhere;
	}

	.RouteMcpServersPluginServer-actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: end;
		gap: 8px;

		flex: none;
	}
	/* #endregion plugin server */

	/* #region plugin servers */
	.RouteMcpServersPluginServers {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.RouteMcpServersPluginServers-header {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.RouteMcpServersPluginServers-title {
		margin: 0;

		font-size: 18px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--color-fg-12);
	}

	.RouteMcpServersPluginServers-description {
		margin: 0;

		font-size: 13px;
		line-height: 1.45;
		color: var(--color-fg-08);
	}

	.RouteMcpServersPluginServers-items {
		display: flex;
		flex-direction: column;

		margin: 0;
		padding: 0;
		border: 1px solid var(--color-base-1-07);
		border-radius: 8px;
		overflow: hidden;

		list-style: none;
	}

	.RouteMcpServersPluginServers-empty {
		margin: 0;
		padding: 18px;
		border: 1px dashed var(--color-base-1-07);
		border-radius: 8px;

		text-align: center;
		font-size: 13px;
		color: var(--color-fg-07);
	}
	/* #endregion plugin servers */

	/* #region saved server */
	.RouteMcpServersSavedServer {
		display: flex;
		align-items: start;
		justify-content: space-between;
		gap: 14px;

		min-width: 0;
		padding: 14px;

		background: var(--color-base-1-03);

		& + & {
			border-block-start: 1px solid var(--color-base-1-07);
		}
	}

	.RouteMcpServersSavedServer-main {
		display: flex;
		flex-direction: column;
		gap: 6px;
		min-width: 0;
	}

	.RouteMcpServersSavedServer-titleRow {
		display: flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
	}

	.RouteMcpServersSavedServer-name {
		min-width: 0;
		margin: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		font-size: 14px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--color-fg-12);
	}

	.RouteMcpServersSavedServer-details {
		margin: 0;

		font-size: 13px;
		line-height: 1.45;
		color: var(--color-fg-08);
		overflow-wrap: anywhere;
	}

	.RouteMcpServersSavedServer-headers {
		display: flex;
		flex-direction: column;
		gap: 2px;

		margin: 0;
		padding: 0;

		list-style: none;
	}

	.RouteMcpServersSavedServer-header {
		font-size: 12px;
		color: var(--color-fg-09);
		overflow-wrap: anywhere;

		& > code {
			font-family: monospace;
		}
	}

	.RouteMcpServersSavedServer-secret {
		padding: 0 6px;
		border: 1px solid var(--color-base-1-07);
		border-radius: 4px;

		font-size: 11px;
		color: var(--color-fg-10);
	}

	.RouteMcpServersSavedServer-test {
		margin: 0;

		font-size: 13px;
		color: var(--color-fg-10);
	}

	.RouteMcpServersSavedServer-test-error {
		color: var(--color-red-11);
	}

	.RouteMcpServersSavedServer-actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: end;
		gap: 8px;

		flex: none;
	}
	/* #endregion saved server */

	/* #region saved servers */
	.RouteMcpServersSavedServers {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.RouteMcpServersSavedServers-header {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.RouteMcpServersSavedServers-title {
		margin: 0;

		font-size: 18px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--color-fg-12);
	}

	.RouteMcpServersSavedServers-description {
		margin: 0;

		font-size: 13px;
		line-height: 1.45;
		color: var(--color-fg-08);
	}

	.RouteMcpServersSavedServers-items {
		display: flex;
		flex-direction: column;

		margin: 0;
		padding: 0;
		border: 1px solid var(--color-base-1-07);
		border-radius: 8px;
		overflow: hidden;

		list-style: none;
	}

	.RouteMcpServersSavedServers-empty {
		margin: 0;
		padding: 18px;
		border: 1px dashed var(--color-base-1-07);
		border-radius: 8px;

		text-align: center;
		font-size: 13px;
		color: var(--color-fg-07);
	}
	/* #endregion saved servers */

	/* #region draft */
	.RouteMcpServersDraft {
		display: flex;
		flex-direction: column;
		gap: 10px;

		padding: 14px;
		border: 1px solid var(--color-base-1-07);
		border-radius: 8px;

		background: var(--color-base-1-03);
	}

	.RouteMcpServersDraft-header {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.RouteMcpServersDraft-title {
		margin: 0;

		font-size: 14px;
		font-weight: 600;
		color: var(--color-fg-12);
	}

	.RouteMcpServersDraft-note,
	.RouteMcpServersDraft-preview {
		margin: 0;

		font-size: 13px;
		line-height: 1.45;
		color: var(--color-fg-08);
		overflow-wrap: anywhere;

		& code {
			font-family: monospace;
			color: var(--color-fg-10);
		}
	}

	.RouteMcpServersDraft-refusal,
	.RouteMcpServersDraft-warning {
		display: flex;
		align-items: start;
		gap: 8px;

		margin: 0;

		font-size: 13px;
		line-height: 1.45;

		& > svg {
			width: 16px;
			height: 16px;
			flex: none;
			margin-block-start: 1px;
		}
	}

	.RouteMcpServersDraft-refusal {
		color: var(--color-red-11);
	}

	.RouteMcpServersDraft-warning {
		color: var(--color-fg-10);
	}

	.RouteMcpServersDraft-form {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.RouteMcpServersDraft-headerGroup {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.RouteMcpServersDraft-notSecret {
		display: inline-flex;
		align-items: center;
		gap: 8px;

		font-size: 13px;
		color: var(--color-fg-09);
	}

	.RouteMcpServersDraft-result {
		margin: 0;

		font-size: 13px;
		color: var(--color-fg-10);
	}

	.RouteMcpServersDraft-result-error {
		color: var(--color-red-11);
	}

	.RouteMcpServersDraft-actions {
		display: flex;
		justify-content: end;
	}
	/* #endregion draft */

	/* #region editor */
	.RouteMcpServersEditor {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.RouteMcpServersEditor-editor {
		overflow: hidden;
		border: 1px solid var(--color-base-1-07);
		border-radius: 8px;
	}

	.RouteMcpServersEditor-errors {
		display: flex;
		flex-direction: column;
		gap: 2px;

		margin: 0;
		padding-inline-start: 18px;

		font-size: 13px;
		color: var(--color-red-11);
	}
	/* #endregion editor */

	/* #region add */
	.RouteMcpServersAdd {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.RouteMcpServersAdd-header {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.RouteMcpServersAdd-title {
		margin: 0;

		font-size: 18px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--color-fg-12);
	}

	.RouteMcpServersAdd-description {
		margin: 0;

		font-size: 13px;
		line-height: 1.45;
		color: var(--color-fg-08);
	}

	.RouteMcpServersAdd-editing {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;

		font-size: 13px;
		color: var(--color-fg-09);
	}

	.RouteMcpServersAdd-notice {
		margin: 0;
		padding: 12px 14px;
		border: 1px solid var(--color-base-1-07);
		border-radius: 8px;

		font-size: 13px;
		line-height: 1.45;
		color: var(--color-fg-09);
	}

	.RouteMcpServersAdd-drafts {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	/* #endregion add */

	/* #region delete modal */
	.RouteMcpServersDeleteModal {
		width: min(92vw, 480px);
	}

	.RouteMcpServersDeleteModal-content {
		display: flex;
		flex-direction: column;
		gap: 10px;

		& > code {
			font-family: monospace;
			font-size: 12px;
			color: var(--color-fg-09);
			overflow-wrap: anywhere;
		}
	}
	/* #endregion delete modal */

	@media (max-width: 640px) {
		.RouteMcpServers-content {
			padding: 16px;
		}

		.RouteMcpServersPluginServer,
		.RouteMcpServersSavedServer {
			flex-direction: column;
		}

		.RouteMcpServersPluginServer-actions,
		.RouteMcpServersSavedServer-actions {
			justify-content: start;
		}
	}
}
@layer components {
	.RouteMessages {
		display: flex;
		flex: 1;
		min-height: 0;
		min-width: 0;
		height: 100%;
	}
}
@layer components {
	.RouteChannel {
		display: flex;
		flex: 1;
		min-height: 0;
		min-width: 0;
		height: 100%;
	}
}
@layer components {
	.RouteChannelsActivity {
		display: flex;
		flex: 1;
		min-height: 0;
		min-width: 0;
		height: 100%;
	}
}
@layer components {
	.RouteBrowseChannels {
		display: flex;
		flex: 1;
		min-height: 0;
		min-width: 0;
		height: 100%;
	}
}
@layer components {
	.RouteChannelsSearch {
		display: flex;
		flex: 1;
		min-height: 0;
		min-width: 0;
		height: 100%;
	}
}
@layer components {
	.RouteChannelsThreads {
		display: flex;
		flex: 1;
		min-height: 0;
		min-width: 0;
		height: 100%;
	}
}
@layer components {
	/* #region root */
	/* Full-width scroll owner so the bar sits on the page's right edge; -content is the centered column. */
	.RoutePlugins {
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}

	.RoutePlugins-content {
		display: flex;
		flex-direction: column;
		gap: 20px;

		width: min(100%, 960px);
		margin-inline: auto;
		padding: 24px;
	}

	.RoutePlugins-loading {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;

		min-height: 180px;

		color: var(--color-fg-08);
	}

	/* #endregion root */

	/* #region header */
	.RoutePluginsHeader {
		display: flex;
		align-items: start;
		justify-content: space-between;
		gap: 16px;
	}

	.RoutePluginsHeader-title {
		margin: 0;

		font-size: 24px;
		font-weight: 650;
		line-height: 1.2;
		color: var(--color-fg-12);
	}

	.RoutePluginsHeader-description {
		margin: 6px 0 0;

		font-size: 14px;
		line-height: 1.45;
		color: var(--color-fg-08);
	}

	.RoutePluginsHeader-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
	/* #endregion header */

	/* #region gallery */
	.RoutePluginsGallery {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.RoutePluginsGallery-search {
		width: min(100%, 360px);
	}

	.RoutePluginsGallery-empty {
		padding: 18px;
		border: 1px dashed var(--color-base-1-07);
		border-radius: 8px;

		text-align: center;
		font-size: 13px;
		color: var(--color-fg-07);
	}

	.RoutePluginsGallery-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
		gap: 10px;
	}
	/* #endregion gallery */

	@media (max-width: 640px) {
		.RoutePlugins-content {
			padding: 16px;
		}

		.RoutePluginsHeader {
			flex-direction: column;
			align-items: stretch;
		}

		.RoutePluginsGallery-search {
			width: 100%;
		}
	}
}
@layer components {
	/* #region root */
	/* Full-width scroll owner so the bar sits on the page's right edge; -content is the centered column. */
	.RoutePluginsPlugin {
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}

	.RoutePluginsPlugin-content {
		display: flex;
		flex-direction: column;
		gap: 0;

		width: min(100%, 960px);
		margin-inline: auto;
		padding: 24px;
	}

	.RoutePluginsPlugin-loading {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;

		min-height: 180px;

		color: var(--color-fg-08);
	}

	.RoutePluginsPlugin-missing {
		padding: 18px;
		border: 1px dashed var(--color-base-1-07);
		border-radius: 8px;

		text-align: center;
		font-size: 13px;
		color: var(--color-fg-07);
	}

	/* #endregion root */

	/* #region hero */
	.RoutePluginsPluginHero {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: start;
		gap: 16px;

		padding-block: 16px 28px;
		border-block-end: 1px solid var(--color-base-1-06);
	}

	.RoutePluginsPluginHero-icon {
		width: 32px;
		height: 32px;
		padding-block-start: 1px;

		color: var(--color-fg-08);
	}

	.RoutePluginsPluginHero-info {
		display: flex;
		flex-direction: column;
		gap: 6px;
		min-width: 0;
	}

	.RoutePluginsPluginHero-titleRow {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
		min-width: 0;
	}

	.RoutePluginsPluginHero-title {
		margin: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		font-size: 22px;
		font-weight: 650;
		line-height: 1.25;
		color: var(--color-fg-12);
	}

	.RoutePluginsPluginHero-statuses {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px;
	}

	.RoutePluginsPluginHero-meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 14px;
		min-width: 0;

		font-size: 13px;
		color: var(--color-fg-07);
	}

	.RoutePluginsPluginHero-repoLink {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		min-height: 24px;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		font-family: monospace;
		font-size: 12px;
		color: var(--color-fg-08);
		text-decoration: none;

		& > svg {
			width: 13px;
			height: 13px;
			flex: none;
			color: var(--color-fg-06);
		}

		&:hover {
			color: var(--color-fg-10);
			text-decoration: underline;
			text-underline-offset: 3px;
		}
	}

	.RoutePluginsPluginHero-description {
		margin: 2px 0 0;

		font-size: 14px;
		line-height: 1.5;
		max-width: 72ch;
		color: var(--color-fg-08);
	}

	.RoutePluginsPluginHero-actions {
		display: flex;
		flex-direction: column;
		align-items: end;
		gap: 8px;
	}

	.RoutePluginsPluginHero-actions-buttons {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.RoutePluginsPluginHero-action-note {
		margin: 0;
		max-width: 240px;

		text-align: right;
		font-size: 12px;
		line-height: 1.4;
		color: var(--color-red-10);
	}
	/* #endregion hero */

	/* #region consent modal */
	.RoutePluginsPluginConsentModal {
		display: flex;
		flex-direction: column;
		gap: 14px;

		width: min(92vw, 480px);
		padding: 18px;

		/* Scroll inside the 85vh cap from MyModalPopover. A plugin with MCP servers, skills, and grants
		   is taller than that, and the install button would end up off screen. */
		overflow-y: auto;
	}

	.RoutePluginsPluginConsentModal-baseline {
		margin: 0;

		font-size: 13px;
		line-height: 1.45;
		color: var(--color-fg-08);
	}

	.RoutePluginsPluginConsentModal-sectionTitle {
		font-size: 12px;
		font-weight: 600;
		line-height: 1.25;
		color: var(--color-fg-08);
	}

	.RoutePluginsPluginConsentModal-list {
		display: flex;
		flex-direction: column;
		gap: 4px;

		margin: 0;
		padding-inline-start: 18px;
	}

	.RoutePluginsPluginConsentModal-item {
		display: flex;
		align-items: center;
		gap: 8px;

		font-family: monospace;
		font-size: 13px;
		line-height: 1.35;
		color: var(--color-fg-11);
	}

	.RoutePluginsPluginConsentModal-empty {
		font-size: 13px;
		color: var(--color-fg-08);
	}

	.RoutePluginsPluginConsentModal-actions {
		display: flex;
		align-items: center;
		justify-content: end;
		gap: 8px;
	}
	/* #endregion consent modal */

	/* #region health */
	.RoutePluginsPluginHealth {
		display: flex;
		flex-direction: column;
		gap: 14px;

		padding-block: 24px;
		border-block-end: 1px solid var(--color-base-1-06);
	}

	.RoutePluginsPluginHealth-header {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	.RoutePluginsPluginHealth-title {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;

		font-size: 18px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--color-fg-12);

		& > svg {
			width: 17px;
			height: 17px;
			flex: none;
			color: var(--color-fg-08);
		}
	}

	.RoutePluginsPluginHealth-status {
		display: flex;
		align-items: center;
		gap: 6px;
		margin: 0;

		font-size: 13px;
		line-height: 1.45;
		color: var(--color-fg-08);

		& > svg {
			width: 14px;
			height: 14px;
			flex: none;
		}
	}

	/* The words and icon carry the state; the color only reinforces it. */
	.RoutePluginsPluginHealth-status-incomplete {
		color: var(--color-red-10);
	}

	.RoutePluginsPluginHealth-list {
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: 0;

		list-style: none;
		border-block: 1px solid var(--color-base-1-05);
	}

	.RoutePluginsPluginHealthIssue {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: start;
		gap: 12px;

		padding-block: 12px;

		& + & {
			border-block-start: 1px solid var(--color-base-1-05);
		}
	}

	.RoutePluginsPluginHealthIssue-icon {
		width: 16px;
		height: 16px;
		flex: none;
		margin-block-start: 2px;

		color: var(--color-red-10);
	}

	.RoutePluginsPluginHealthIssue-icon-notice {
		color: var(--color-fg-08);
	}

	.RoutePluginsPluginHealthIssue-body {
		display: flex;
		flex-direction: column;
		gap: 4px;
		min-width: 0;
	}

	.RoutePluginsPluginHealthIssue-title {
		font-size: 14px;
		font-weight: 600;
		color: var(--color-fg-12);

		& > code {
			font-family: monospace;
			font-size: 13px;
		}
	}

	.RoutePluginsPluginHealthIssue-text {
		margin: 0;

		font-size: 13px;
		line-height: 1.45;
		color: var(--color-fg-08);
	}

	/* Publisher-authored text: attributed and visually secondary. */
	.RoutePluginsPluginHealthIssue-note {
		margin: 0;

		font-size: 13px;
		line-height: 1.45;
		font-style: italic;
		color: var(--color-fg-08);
	}

	.RoutePluginsPluginHealthIssue-error {
		margin: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		font-size: 13px;
		color: var(--color-destructive);
	}
	/* #endregion health */

	/* #region secrets */
	/* A header-plus-button row: the secrets themselves live in the modal, so the section stays one line tall. */
	.RoutePluginsPluginSecrets {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 16px;

		padding-block: 24px;
		border-block-end: 1px solid var(--color-base-1-06);
	}

	.RoutePluginsPluginSecrets-header {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	.RoutePluginsPluginSecrets-title {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;

		font-size: 18px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--color-fg-12);

		& > svg {
			width: 17px;
			height: 17px;
			flex: none;
			color: var(--color-fg-08);
		}
	}

	.RoutePluginsPluginSecrets-description {
		margin: 0;

		font-size: 13px;
		line-height: 1.45;
		color: var(--color-fg-08);
	}
	/* #endregion secrets */

	/* #region secrets modal */
	.RoutePluginsPluginSecretsModal .MyTabsPanels {
		margin-block-start: 14px;
	}
	/* #endregion secrets modal */

	/* #region secrets modal panel */
	.RoutePluginsPluginSecretsModalPanel {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.RoutePluginsPluginSecretsModalPanel-note {
		margin: 0;

		font-size: 13px;
		line-height: 1.45;
		color: var(--color-fg-08);
	}

	.RoutePluginsPluginSecretsModalPanel-empty {
		font-size: 14px;
		color: var(--color-fg-08);
	}

	.RoutePluginsPluginSecretsModalPanel-list {
		display: flex;
		flex-direction: column;
		border-block: 1px solid var(--color-base-1-05);
	}

	.RoutePluginsPluginSecretsModalPanel-form {
		display: grid;
		grid-template-columns: minmax(0, 180px) minmax(0, 1fr) auto;
		align-items: end;
		gap: 8px;
	}

	.RoutePluginsPluginSecretsModalPanel-hint {
		margin: 0;

		font-size: 12px;
		line-height: 1.4;
		color: var(--color-fg-07);
	}

	.RoutePluginsPluginSecretItem {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 12px;

		padding-block: 10px;

		& + & {
			border-block-start: 1px solid var(--color-base-1-05);
		}
	}

	.RoutePluginsPluginSecretItem-identity {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}

	.RoutePluginsPluginSecretItem-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		font-family: monospace;
		font-size: 13px;
		font-weight: 600;
		color: var(--color-fg-12);
	}

	/* A same-name workspace secret wins at runtime, so the shadowed plugin value reads dimmer. */
	.RoutePluginsPluginSecretItem-name-overridden {
		color: var(--color-fg-08);
	}

	.RoutePluginsPluginSecretItem-meta {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		font-size: 12px;
		color: var(--color-fg-08);
	}
	/* #endregion secrets modal panel */

	/* #region service */
	.RoutePluginsPluginService {
		display: flex;
		flex-direction: column;
		gap: 14px;

		padding-block: 24px;
		border-block-end: 1px solid var(--color-base-1-06);
	}

	.RoutePluginsPluginService-header {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	.RoutePluginsPluginService-title {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;

		font-size: 18px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--color-fg-12);

		& > svg {
			width: 17px;
			height: 17px;
			flex: none;
			color: var(--color-fg-08);
		}
	}

	.RoutePluginsPluginService-description {
		margin: 0;

		font-size: 13px;
		line-height: 1.45;
		color: var(--color-fg-08);
	}
	/* #endregion service */

	/* #region service controls */
	.RoutePluginsPluginServiceControls {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.RoutePluginsPluginServiceControls-status {
		margin: 0;

		font-size: 13px;
		line-height: 1.45;
		color: var(--color-fg-08);
	}

	.RoutePluginsPluginServiceControls-scopes {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.RoutePluginsPluginServiceControls-actions {
		display: flex;
		gap: 8px;
	}

	.RoutePluginsPluginServiceControls-secret {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 12px;

		padding: 10px 12px;
		border: 1px solid var(--color-base-1-06);
		border-radius: 8px;
	}

	.RoutePluginsPluginServiceControls-secret-value {
		overflow-wrap: anywhere;

		font-family: monospace;
		font-size: 13px;
		color: var(--color-fg-12);
	}

	.RoutePluginsPluginServiceControls-secret-note {
		margin: 4px 0 0;

		font-size: 12px;
		line-height: 1.4;
		color: var(--color-fg-07);
	}
	/* #endregion service controls */

	/* #region configuration */
	.RoutePluginsPluginConfiguration {
		display: flex;
		flex-direction: column;
		gap: 16px;
		min-width: 0;

		padding-block: 24px;
		border-block-end: 1px solid var(--color-base-1-06);
	}

	.RoutePluginsPluginConfiguration-header {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	.RoutePluginsPluginConfiguration-title {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;

		font-size: 18px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--color-fg-12);

		& > svg {
			width: 17px;
			height: 17px;
			flex: none;
			color: var(--color-fg-08);
		}
	}

	.RoutePluginsPluginConfiguration-description,
	.RoutePluginsPluginConfiguration-example {
		margin: 0;

		font-size: 13px;
		line-height: 1.45;
		color: var(--color-fg-08);
	}

	.RoutePluginsPluginConfiguration-example code {
		font-family: monospace;
		color: var(--color-fg-10);
	}

	.RoutePluginsPluginConfiguration-editor {
		overflow: hidden;
		border: 1px solid var(--color-base-1-07);
		border-radius: 8px;
	}

	.RoutePluginsPluginConfiguration-actions {
		display: flex;
		align-items: center;
		justify-content: end;
		gap: 12px;
	}

	.RoutePluginsPluginConfiguration-status {
		margin: 0 auto 0 0;

		font-size: 13px;
		line-height: 1.4;
		color: var(--color-fg-08);
	}

	.RoutePluginsPluginConfiguration-status-error {
		color: var(--color-destructive);
	}
	/* #endregion configuration */

	/* #region scheduled runs */
	.RoutePluginsSchedule {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding-block: 24px;
		border-block-end: 1px solid var(--color-base-1-06);

		& > h2,
		& > p {
			margin: 0;
		}

		& > h2 {
			font-size: 16px;
		}
	}

	.RoutePluginsSchedule-facts {
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr);
		gap: 8px 16px;
		margin: 0;
		font-size: 13px;

		& > dt {
			color: var(--color-fg-08);
		}

		& > dd {
			margin: 0;
			overflow-wrap: anywhere;
		}
	}

	.RoutePluginsSchedule-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.RoutePluginsSchedule-error {
		color: var(--color-destructive);
	}
	/* #endregion scheduled runs */

	/* #region mounts */
	.RoutePluginsMounts {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding-block: 24px;
		border-block-end: 1px solid var(--color-base-1-06);

		& > h2,
		& > p {
			margin: 0;
		}

		& > h2 {
			font-size: 16px;
		}
	}

	.RoutePluginsMounts-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.RoutePluginsMounts-volume {
		padding: 12px;
		border: 1px solid var(--color-base-1-06);
		border-radius: 8px;
		overflow-wrap: anywhere;
		font-size: 13px;

		& > p {
			margin-block: 8px 0;
		}
	}

	.RoutePluginsMounts-usage {
		font-size: 13px;
		line-height: 1.5;
	}
	/* #endregion mounts */

	/* #region installed runs */
	.RoutePluginsInstalledRuns {
		padding-block: 10px 24px;
	}

	.RoutePluginsInstalledRuns-summary {
		display: flex;
		align-items: center;
		gap: 8px;
		min-height: 40px;
		padding-block: 6px;

		cursor: pointer;
		list-style: none;
	}
	.RoutePluginsInstalledRuns-summary::-webkit-details-marker {
		display: none;
	}

	.RoutePluginsInstalledRuns-chevron {
		flex: none;
		width: 16px;
		height: 16px;

		color: var(--color-fg-08);
		transition: rotate 120ms ease;
	}

	.RoutePluginsInstalledRuns[open] > .RoutePluginsInstalledRuns-summary .RoutePluginsInstalledRuns-chevron {
		rotate: 90deg;
	}

	.RoutePluginsInstalledRuns-title {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;

		font-size: 14px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--color-fg-12);
	}

	.RoutePluginsInstalledRuns-description {
		margin: 4px 0 0;

		font-size: 13px;
		line-height: 1.45;
		color: var(--color-fg-08);
	}

	.RoutePluginsInstalledRuns-empty {
		margin-block-start: 10px;

		font-size: 14px;
		color: var(--color-fg-08);
	}

	.RoutePluginsInstalledRuns-list {
		display: flex;
		flex-direction: column;

		margin-block-start: 10px;
	}

	.RoutePluginsInstalledRunItem {
		display: flex;
		flex-direction: column;
		gap: 4px;
		min-width: 0;

		padding-block: 10px;

		& + & {
			border-block-start: 1px solid var(--color-base-1-05);
		}
	}

	.RoutePluginsInstalledRunItem-header {
		display: flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
	}

	.RoutePluginsInstalledRunItem-path {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		font-family: monospace;
		font-size: 13px;
		color: var(--color-fg-11);
	}

	.RoutePluginsInstalledRunItem-meta {
		font-size: 12px;
		line-height: 1.35;
		color: var(--color-fg-08);
		overflow-wrap: anywhere;
	}

	.RoutePluginsInstalledRunItem-error {
		font-size: 13px;
		color: var(--color-destructive);
	}
	/* #endregion installed runs */

	/* #region access and automation */
	.RoutePluginsPluginAccess {
		display: flex;
		flex-direction: column;
		gap: 18px;
		min-width: 0;

		padding-block: 24px;
		border-block-end: 1px solid var(--color-base-1-06);
	}

	.RoutePluginsPluginAccess-header {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	.RoutePluginsPluginAccess-title {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;

		font-size: 18px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--color-fg-12);

		& > svg {
			width: 17px;
			height: 17px;
			flex: none;
			color: var(--color-fg-08);
		}
	}

	.RoutePluginsPluginAccess-description {
		margin: 0;

		font-size: 13px;
		line-height: 1.45;
		color: var(--color-fg-08);
	}

	.RoutePluginsPluginAccess-group {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.RoutePluginsPluginAccess-group-title {
		margin: 0;

		font-size: 14px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--color-fg-12);
	}

	.RoutePluginsPluginAccess-list {
		display: flex;
		flex-direction: column;
		gap: 5px;

		margin: 0;
		padding-inline-start: 18px;
		list-style: disc;

		& li::marker {
			color: var(--color-fg-06);
		}
	}

	.RoutePluginsPluginAccess-item {
		max-width: 100%;

		overflow-wrap: anywhere;
		font-family: monospace;
		font-size: 12px;
		line-height: 1.35;
		color: var(--color-fg-10);
	}

	.RoutePluginsPluginAccess-item-actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;

		margin-block-start: 6px;
	}

	.RoutePluginsPluginAccess-empty {
		font-size: 13px;
		color: var(--color-fg-08);
	}

	.RoutePluginsPluginAccess-trigger {
		display: list-item;
		width: 100%;
	}

	.RoutePluginsPluginAccess-trigger-name {
		display: block;

		font-size: 13px;
		font-weight: 500;
		color: var(--color-fg-11);
	}

	.RoutePluginsPluginAccess-trigger-types {
		display: block;
		margin-block-start: 3px;
		overflow-wrap: anywhere;

		font-family: monospace;
		font-size: 11px;
		line-height: 1.4;
		color: var(--color-fg-07);
	}

	.RoutePluginsPluginAccess-trigger-policy {
		display: block;
		margin-block-start: 3px;
		overflow-wrap: anywhere;

		font-size: 12px;
		line-height: 1.4;
		color: var(--color-fg-08);
	}
	/* #endregion access and automation */

	/* #region publisher releases */
	.RoutePluginsPluginPublisherReleases {
		display: flex;
		flex-direction: column;
		gap: 12px;
		min-width: 0;

		padding-block: 24px;
		border-block-end: 1px solid var(--color-base-1-06);
	}

	.RoutePluginsPluginPublisherReleases-title {
		display: flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
		margin: 0;

		font-size: 18px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--color-fg-12);

		& > svg {
			width: 17px;
			height: 17px;
			flex: none;
			color: var(--color-fg-08);
		}
	}

	.RoutePluginsPluginPublisherReleases-lastAttempt {
		display: flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
	}

	.RoutePluginsPluginPublisherReleases-lastAttemptMessage {
		min-width: 0;
		overflow-wrap: anywhere;

		font-size: 13px;
		line-height: 1.4;
		color: var(--color-fg-09);
	}

	.RoutePluginsPluginPublisherReleases-limitNotice {
		font-size: 13px;
		line-height: 1.4;
		color: var(--color-fg-07);
	}

	.RoutePluginsPluginPublisherReleases-empty {
		font-size: 14px;
		color: var(--color-fg-08);
	}

	.RoutePluginsPluginPublisherReleases-list {
		display: flex;
		flex-direction: column;
	}

	.RoutePluginsPluginPublisherReleaseItem {
		display: flex;
		flex-direction: column;
		gap: 6px;

		padding-block: 10px;

		& + & {
			border-block-start: 1px solid var(--color-base-1-05);
		}
	}

	.RoutePluginsPluginPublisherReleaseItem-header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
	}

	.RoutePluginsPluginPublisherReleaseItem-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		font-family: monospace;
		font-size: 13px;
		font-weight: 600;
		color: var(--color-fg-12);
	}

	.RoutePluginsPluginPublisherReleaseItem-meta {
		order: 1;
		flex: 0 0 100%;
		overflow-wrap: anywhere;

		font-size: 12px;
		line-height: 1.4;
		color: var(--color-fg-07);
	}

	.RoutePluginsPluginPublisherReleaseItem-findings {
		margin: 0;
		padding-inline-start: 18px;

		font-size: 13px;
		line-height: 1.5;
		color: var(--color-fg-09);

		& li::marker {
			color: var(--color-fg-06);
		}
	}

	/* Dimmer than the blocking list above so the two never read as one set of reasons. */
	.RoutePluginsPluginPublisherReleaseItem-advisory-title {
		font-size: 12px;
		font-weight: 600;
		color: var(--color-fg-06);
	}

	.RoutePluginsPluginPublisherReleaseItem-advisory {
		margin: 0;
		padding-inline-start: 18px;

		font-size: 13px;
		line-height: 1.5;
		color: var(--color-fg-06);

		& li::marker {
			color: var(--color-fg-04);
		}
	}

	.RoutePluginsPluginPublisherReleaseItem-note {
		font-size: 13px;
		color: var(--color-destructive);
	}
	/* #endregion publisher releases */

	.RoutePluginsPluginConsentModal-accountFields {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 16px;
		border: 1px solid var(--color-base-1-07);
		border-radius: 10px;
		font-size: 13px;
		overflow-wrap: anywhere;
	}

	@media (max-width: 640px) {
		.RoutePluginsPlugin-content {
			padding: 16px;
		}

		.RoutePluginsPluginHero {
			grid-template-columns: auto minmax(0, 1fr);
		}

		.RoutePluginsPluginHero-actions {
			grid-column: 1 / -1;
			align-items: stretch;
		}

		.RoutePluginsPluginHero-actions-buttons {
			flex-direction: column;
			align-items: stretch;
		}

		/* The overflow trigger keeps its square size, so center it under the stacked buttons. */
		.RoutePluginsPluginHero-actions-buttons > .MyIconButton {
			align-self: center;
		}

		.RoutePluginsPluginHero-action-note {
			max-width: none;
			text-align: left;
		}

		.RoutePluginsPluginSecrets {
			grid-template-columns: minmax(0, 1fr);
		}

		.RoutePluginsPluginSecretsModalPanel-form {
			grid-template-columns: minmax(0, 1fr);
			align-items: stretch;
		}

		.RoutePluginsPluginConfiguration-actions {
			flex-direction: column;
			align-items: stretch;
		}

		.RoutePluginsPluginConfiguration-status {
			margin: 0;
		}

		.RoutePluginsPluginConfiguration-actions > .MyButton {
			width: 100%;
			min-width: 0;
			height: auto;
			min-height: 36px;
			white-space: normal;
		}
	}
}
@layer common_components {
	/* #region root */
	.MyBadge {
		position: relative;

		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 4px;

		padding: 2px 8px;
		border-radius: 6px;
		border: 1px solid transparent;
		outline-offset: -2px;

		font-size: 0.75rem;
		font-weight: 500;
		line-height: 1;

		white-space: nowrap;
		flex-shrink: 0;
		contain: content;

		transition:
			color 0.15s ease,
			box-shadow 0.15s ease;

		&:focus-visible {
			outline-color: var(--color-fg-12);
		}

		&[aria-invalid="true"] {
			outline-color: var(--color-red-06);
		}

		& svg {
			width: 12px;
			height: 12px;
			pointer-events: none;
			flex-shrink: 0;
		}

		&[href]:hover {
			text-decoration: none;
		}
	}

	.MyBadge-variant-default {
		background: var(--color-base-1-04);
		color: var(--color-fg-09);

		&[href]:hover {
			background: var(--color-base-1-05);
		}
	}

	.MyBadge-variant-secondary {
		background: var(--color-base-1-07);
		color: var(--color-fg-10);

		&[href]:hover {
			background: var(--color-base-1-08);
		}
	}

	.MyBadge-variant-destructive {
		background: var(--color-red-06);
		color: var(--color-fg-10);

		&[href]:hover {
			background: var(--color-red-07);
		}
	}

	.MyBadge-variant-outline {
		background: transparent;
		/* fg-07 is the dimmest fg that still clears 4.5:1 AA on these dark surfaces; fg-06 fails. */
		color: var(--color-fg-07);
		border-color: var(--color-fg-04);

		&[href]:hover {
			background: var(--color-base-1-04);
			color: var(--color-fg-10);
		}
	}
	/* #endregion root */
}
@layer components {
	/* #region root */
	.RouteRoles {
		display: flex;
		flex-direction: column;
		gap: 20px;

		width: min(100%, 960px);
		min-height: 0;
		height: 100%;
		margin-inline: auto;
		padding: 24px;
		overflow: auto;
	}

	.RouteRoles-loading,
	.RouteRoles-unavailable {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;

		min-height: 180px;

		color: var(--color-fg-08);
	}

	.RouteRoles-list {
		display: flex;
		flex-direction: column;
		gap: 12px;

		margin: 0;
		padding: 0;

		list-style: none;
	}

	.RouteRoles-section {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.RouteRoles-section-title {
		margin: 0;

		font-size: 15px;
		font-weight: 600;
		color: var(--color-fg-12);
	}

	.RouteRoles-section-description {
		margin: 4px 0 0;

		font-size: 13px;
		line-height: 1.45;
		color: var(--color-fg-08);
	}

	.RouteRoles-section-empty {
		padding: 24px;
		border: 1px dashed var(--color-base-1-07);
		border-radius: 10px;

		font-size: 13px;
		text-align: center;
		color: var(--color-fg-08);
	}
	/* #endregion root */

	/* #region header */
	.RouteRolesHeader {
		display: flex;
		align-items: start;
		justify-content: space-between;
		gap: 16px;
	}

	.RouteRolesHeader-title {
		margin: 0;

		font-size: 24px;
		font-weight: 650;
		line-height: 1.2;
		color: var(--color-fg-12);
	}

	.RouteRolesHeader-description {
		margin: 6px 0 0;

		font-size: 14px;
		line-height: 1.45;
		color: var(--color-fg-08);
	}

	.RouteRolesHeader-toolbar {
		display: flex;
		align-items: center;
		justify-content: end;
		gap: 8px;
	}
	/* #endregion header */

	/* #region role list item */
	.RouteRolesListItem {
		display: flex;
		flex-direction: column;
		gap: 10px;

		padding: 14px 16px;
		border: 1px solid var(--color-base-1-07);
		border-radius: 10px;

		background: var(--color-base-1-03);
	}

	.RouteRolesListItem-head {
		display: flex;
		align-items: start;
		justify-content: space-between;
		gap: 12px;
	}

	.RouteRolesListItem-identity {
		display: flex;
		flex-direction: column;
		gap: 2px;

		min-width: 0;
	}

	/* A role name is free text up to 40 characters with no spaces required, so it has to be allowed to
	   break. Without this one long word pushes the Edit and Delete buttons off the card. */
	.RouteRolesListItem-name {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-wrap: wrap;

		min-width: 0;

		font-size: 14px;
		font-weight: 600;
		color: var(--color-fg-12);
		overflow-wrap: anywhere;
	}

	.RouteRolesListItem-description {
		min-width: 0;

		font-size: 13px;
		line-height: 1.45;
		color: var(--color-fg-08);
		overflow-wrap: anywhere;
	}

	.RouteRolesListItem-actions {
		display: flex;
		align-items: center;
		gap: 8px;
		flex: none;
	}

	.RouteRolesListItem-permissions {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;

		margin: 0;
		padding: 0;

		list-style: none;
	}
	/* #endregion role list item */

	/* #region permission picker */
	.RouteRolesPermissionPicker {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.RouteRolesPermissionPicker-group {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.RouteRolesPermissionPicker-group-title {
		padding: 0 0 6px;

		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.02em;
		color: var(--color-fg-08);
	}

	.RouteRolesPermissionPicker-list {
		display: flex;
		flex-direction: column;
		gap: 4px;

		margin: 0;
		padding: 0;

		list-style: none;
	}

	/* A permission needs a label and an explanation, so this row has to wrap and grow. The base
	   MyButton is one nowrap line 36px tall, which would cut both off. */
	.RouteRolesPermissionPicker-permission {
		align-items: start;
		justify-content: start;
		white-space: normal;

		width: 100%;
		height: auto;
		padding: 8px 10px;

		text-align: start;
	}

	.RouteRolesPermissionPicker-permission .MyCheckboxButton-box {
		margin-top: 1px;
	}

	/* Matches the checkbox row above it: same padding and a transparent border, so a locked permission
	   sits on the same grid as the ones you can switch. */
	.RouteRolesPermissionPicker-permission-locked {
		display: flex;
		align-items: start;
		gap: 8px;

		width: 100%;
		padding: 8px 10px;
		border: 1px solid transparent;

		color: var(--color-fg-08);
	}

	.RouteRolesPermissionPicker-permission-locked-icon {
		flex: none;
		width: 16px;
		height: 16px;

		margin-top: 2px;
	}

	.RouteRolesPermissionPicker-permission-text {
		display: flex;
		flex-direction: column;
		gap: 2px;

		min-width: 0;
	}

	.RouteRolesPermissionPicker-permission-label {
		font-size: 13px;
		font-weight: 500;
	}

	.RouteRolesPermissionPicker-permission-description {
		font-size: 12px;
		line-height: 1.4;
		font-weight: 400;
		color: var(--color-fg-08);
	}
	/* #endregion permission picker */

	/* #region role editor modal */
	.RouteRolesEditorModal-fields {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	/* #endregion role editor modal */

	@media (max-width: 640px) {
		.RouteRoles {
			padding: 16px;
		}

		.RouteRolesHeader {
			flex-direction: column;
			align-items: stretch;
		}

		.RouteRolesHeader-toolbar {
			justify-content: start;
		}

		.RouteRolesListItem-head {
			flex-direction: column;
		}
	}
}
@layer components {
	.RouteServiceAccounts {
		display: flex;
		flex-direction: column;
		gap: 20px;
		width: min(100%, 960px);
		min-height: 0;
		height: 100%;
		margin-inline: auto;
		padding: 24px;
		overflow: auto;
	}

	.RouteServiceAccounts-header,
	.RouteServiceAccounts-item {
		display: flex;
		align-items: start;
		justify-content: space-between;
		gap: 16px;
	}

	.RouteServiceAccounts-header h1 {
		margin: 0;
		font-size: 24px;
		font-weight: 650;
	}
	.RouteServiceAccounts-header p,
	.RouteServiceAccounts-description {
		margin: 6px 0 0;
		font-size: 13px;
		line-height: 1.45;
		color: var(--color-fg-08);
	}
	.RouteServiceAccounts-list,
	.RouteServiceAccounts-fields {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.RouteServiceAccounts-item {
		padding: 14px 16px;
		border: 1px solid var(--color-base-1-07);
		border-radius: 10px;
		background: var(--color-base-1-03);
	}
	.RouteServiceAccounts-name {
		font-size: 14px;
		overflow-wrap: anywhere;
	}
	.RouteServiceAccounts-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
	.RouteServiceAccounts-error {
		color: var(--color-red-11);
		font-size: 13px;
	}

	@media (max-width: 640px) {
		.RouteServiceAccounts {
			padding: 16px;
		}
		.RouteServiceAccounts-header,
		.RouteServiceAccounts-item {
			flex-direction: column;
			align-items: stretch;
		}
	}
}
@layer components {
	/* #region root */
	.RouteUsers {
		display: flex;
		flex-direction: column;
		gap: 20px;

		width: min(100%, 960px);
		min-height: 0;
		height: 100%;
		margin-inline: auto;
		padding: 24px;
		overflow: auto;
	}

	.RouteUsers-loading,
	.RouteUsers-empty {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;

		min-height: 180px;

		color: var(--color-fg-08);
	}

	/* #endregion root */

	/* #region user list */
	.RouteUsers-list {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	/* #endregion user list */

	/* #region header */
	.RouteUsersHeader {
		display: flex;
		align-items: start;
		justify-content: space-between;
		gap: 16px;
	}

	.RouteUsersHeader-title {
		margin: 0;

		font-size: 24px;
		font-weight: 650;
		line-height: 1.2;
		color: var(--color-fg-12);
	}

	.RouteUsersHeader-description {
		margin: 6px 0 0;

		font-size: 14px;
		line-height: 1.45;
		color: var(--color-fg-08);
	}

	.RouteUsersHeader-toolbar {
		display: flex;
		align-items: center;
		justify-content: end;
		gap: 8px;
	}
	/* #endregion header */

	/* #region user list item */
	.RouteUsersUserListItem {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: 12px;

		padding: 14px;
		border: 1px solid var(--color-base-1-07);
		border-radius: 8px;

		background: var(--color-base-1-03);
	}

	.RouteUsersUserListItem-avatar {
		grid-column: 1;
	}

	.RouteUsersUserListItem-main {
		grid-column: 2;
		display: grid;
		gap: 2px;
		min-width: 0;
	}

	.RouteUsersUserListItem-title {
		display: flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
	}

	.RouteUsersUserListItem-name {
		min-width: 0;
		contain: content;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		font-size: 15px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--color-fg-12);
	}

	.RouteUsersUserListItem-email {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		font-size: 13px;
		line-height: 1.3;
		color: var(--color-fg-08);
	}

	/* The role select sits where the badge used to, so it stays
	   small next to the name instead of
	   growing to the button height the rest of the row uses. */
	.RouteUsersUserListItem-role-select {
		gap: 4px;

		height: 26px;
		padding: 2px 6px;

		font-size: 12px;
		font-weight: 500;
	}

	.RouteUsersUserListItem-actions {
		grid-column: 3;

		display: flex;
		align-items: center;
		justify-content: end;
		gap: 8px;
	}
	/* #endregion user list item */

	/* #region invite modal */
	.RouteUsersInviteModal {
		display: flex;
		flex-direction: column;
		gap: 16px;

		width: min(92vw, 480px);
		padding: 18px;
	}

	.RouteUsersInviteModal-form {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.RouteUsersInviteModal-workspace-trigger {
		width: 100%;
		justify-content: space-between;
	}

	.RouteUsersInviteModal-actions {
		display: flex;
		align-items: center;
		justify-content: end;
		gap: 8px;
		flex-wrap: wrap;
	}
	/* #endregion invite modal */

	/* #region transfer modal */
	.RouteUsersTransferModal {
		display: flex;
		flex-direction: column;
		gap: 16px;

		width: min(92vw, 480px);
		padding: 18px;
	}

	.RouteUsersTransferModal-form {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.RouteUsersTransferModal-actions {
		display: flex;
		align-items: center;
		justify-content: end;
		gap: 8px;
		flex-wrap: wrap;
	}
	/* #endregion transfer modal */

	@media (max-width: 640px) {
		.RouteUsers {
			padding: 16px;
		}

		.RouteUsersHeader {
			flex-direction: column;
			align-items: stretch;
		}

		.RouteUsersHeader-toolbar {
			justify-content: start;
		}

		.RouteUsersUserListItem {
			grid-template-columns: auto minmax(0, 1fr);
		}

		.RouteUsersUserListItem-actions {
			grid-column: 1 / -1;
			justify-content: start;
			flex-wrap: wrap;
		}
	}
}
@layer components {
	/* #region root */
	/* Full-width scroll owner so the bar sits on the page's right edge; -content is the centered column. */
	.RoutePluginsPublisher {
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}

	.RoutePluginsPublisher-content {
		display: flex;
		flex-direction: column;
		gap: 20px;

		width: min(100%, 960px);
		margin-inline: auto;
		padding: 24px;
	}

	.RoutePluginsPublisher-loading {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;

		min-height: 180px;

		color: var(--color-fg-08);
	}

	/* #endregion root */

	/* #region header */
	.RoutePluginsPublisherHeader {
		display: flex;
		align-items: start;
		justify-content: space-between;
		gap: 16px;
	}

	.RoutePluginsPublisherHeader-title {
		margin: 0;

		font-size: 24px;
		font-weight: 650;
		line-height: 1.2;
		color: var(--color-fg-12);
	}

	.RoutePluginsPublisherHeader-description {
		margin: 6px 0 0;

		font-size: 14px;
		line-height: 1.45;
		color: var(--color-fg-08);
	}

	.RoutePluginsPublisherIdentity {
		display: flex;
		align-items: center;
		gap: 10px;

		padding: 8px 14px;
		border: 1px solid var(--color-base-1-06);
		border-radius: 8px;

		background: var(--color-base-1-02);

		& > svg {
			width: 18px;
			height: 18px;
			flex: none;
			color: var(--color-fg-07);
		}
	}

	.RoutePluginsPublisherIdentity-text {
		display: flex;
		flex-direction: column;
		gap: 1px;
		min-width: 0;
	}

	.RoutePluginsPublisherIdentity-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		font-size: 13px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--color-fg-11);
	}

	.RoutePluginsPublisherIdentity-email {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		font-family: monospace;
		font-size: 12px;
		line-height: 1.3;
		color: var(--color-fg-07);
	}
	/* #endregion header */

	/* #region sign in */
	.RoutePluginsPublisherSignIn {
		display: flex;
		flex-direction: column;
		gap: 14px;

		padding: 16px 18px;
		border: 1px solid var(--color-base-1-07);
		border-radius: 10px;

		background: var(--color-base-1-03);
	}

	.RoutePluginsPublisherSignIn-header {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	.RoutePluginsPublisherSignIn-title {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;

		font-size: 15px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--color-fg-12);

		& > svg {
			width: 17px;
			height: 17px;
			flex: none;
			color: var(--color-fg-08);
		}
	}

	.RoutePluginsPublisherSignIn-description {
		margin: 0;

		font-size: 13px;
		line-height: 1.5;
		max-width: 72ch;
		color: var(--color-fg-08);
	}

	.RoutePluginsPublisherSignIn-actions {
		display: flex;
		align-items: center;
		justify-content: start;
		gap: 8px;
	}
	/* #endregion sign in */

	/* #region last attempt */
	.RoutePluginsPublisherLastAttempt {
		display: flex;
		align-items: start;
		gap: 8px;
	}

	.RoutePluginsPublisherLastAttempt-message {
		overflow-wrap: anywhere;

		font-size: 12px;
		line-height: 1.45;
		color: var(--color-fg-08);
	}
	/* #endregion last attempt */

	/* #region plugins */
	.RoutePluginsPublisherPlugins {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.RoutePluginsPublisherPlugins-form {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		gap: 8px;

		max-width: 640px;
	}

	.RoutePluginsPublisherPlugins-empty {
		padding: 18px;
		border: 1px dashed var(--color-base-1-07);
		border-radius: 8px;

		text-align: center;
		font-size: 13px;
		color: var(--color-fg-07);
	}

	.RoutePluginsPublisherPlugins-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
		gap: 10px;
	}

	/* Let this wrapper absorb the grid row's extra height. Keep both base card types at their content
	   height so one repository's failure does not move a sibling card's footer. */
	.RoutePluginsPublisherRepositoryItem {
		display: flex;
		flex-direction: column;
		gap: 12px;

		min-width: 0;
	}

	.RoutePluginsPublisherUnpublishedCard {
		display: flex;
		flex-direction: column;
		gap: 12px;

		padding: 16px;
		border: 1px solid var(--color-base-1-06);
		border-radius: 8px;

		background: var(--color-base-1-02);
	}

	.RoutePluginsPublisherUnpublishedCard-header {
		display: flex;
		align-items: center;
		gap: 10px;
		min-width: 0;
	}

	.RoutePluginsPublisherUnpublishedCard-icon {
		box-sizing: content-box;
		flex: none;
		width: 18px;
		height: 18px;
		padding: 8px;
		border: 1px solid var(--color-base-1-06);
		border-radius: 8px;

		background: var(--color-base-1-04);
		color: var(--color-fg-09);
	}

	.RoutePluginsPublisherUnpublishedCard-identity {
		display: flex;
		flex-direction: column;
		flex: 1;
		gap: 2px;
		min-width: 0;
	}

	.RoutePluginsPublisherUnpublishedCard-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		font-size: 15px;
		font-weight: 600;
		color: var(--color-fg-12);
	}

	.RoutePluginsPublisherUnpublishedCard-subtitle {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		font-family: monospace;
		font-size: 12px;
		color: var(--color-fg-07);
	}

	.RoutePluginsPublisherUnpublishedCard-description {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;

		/* two clamped lines, so footers align with the gallery cards around it */
		min-height: 38px;
		margin: 0;

		font-size: 13px;
		line-height: 1.45;
		color: var(--color-fg-08);
	}

	.RoutePluginsPublisherUnpublishedCard-footer {
		display: flex;
		align-items: center;
		justify-content: end;
		gap: 8px;

		margin-block-start: auto;
	}
	/* #endregion plugins */

	@media (max-width: 640px) {
		.RoutePluginsPublisher-content {
			padding: 16px;
		}

		.RoutePluginsPublisherHeader {
			flex-direction: column;
			align-items: stretch;
		}

		.RoutePluginsPublisherPlugins-form {
			grid-template-columns: minmax(0, 1fr);
			align-items: stretch;
			max-width: none;
		}
	}
}
@layer components {
	/* #region root */
	/* Column filling the content area (viewport minus header) so the iframe gets all leftover height. */
	.RoutePluginsPluginPage {
		/* Anchors the starting cover in the frame region below. The breadcrumb goes to the app header
		   through a portal, so this element holds nothing the cover has to stay clear of. */
		position: relative;

		display: flex;
		flex-direction: column;

		width: 100%;
		height: 100%;
	}

	/* Shown while the list of plugin pages is still loading. There is no frame under it yet, so it
	   keeps a box of its own instead of covering anything. */
	.RoutePluginsPluginPage-loading {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;

		min-height: 180px;

		color: var(--color-fg-08);
	}

	.RoutePluginsPluginPage-missing {
		margin: 24px;
		padding: 18px;
		border: 1px dashed var(--color-base-1-07);
		border-radius: 8px;

		text-align: center;
		font-size: 13px;
		color: var(--color-fg-07);
	}
	/* #endregion root */

	/* #region frame */
	.RoutePluginsPluginPageFrame {
		display: flex;
		flex-direction: column;

		flex: 1;
		min-height: 0;
	}

	/* Covers the frame while it starts, instead of sitting above it. An in-flow placeholder took
	   180px off the frame, so the plugin laid itself out in a viewport that short and the page jumped
	   when the handshake finished. The element carrying this class swaps to `sr-only` once the frame
	   starts, so this rule describes the waiting state only.

	   `inset: 0` measures against the parent `.RoutePluginsPluginPage`, which is `position: relative`
	   for exactly this. Drop that and the cover falls back to the initial containing block, which
	   means it covers the app header and the sidebar too. */
	.RoutePluginsPluginPageFrame-starting {
		position: absolute;
		inset: 0;

		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;

		color: var(--color-fg-08);

		/* The same surface as the page around it, so the blank frame does not show through. */
		background-color: var(--color-base-1-01);
	}

	.RoutePluginsPluginPageFrame-error {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;

		margin: 24px;
		padding: 18px;
		border: 1px dashed var(--color-base-1-07);
		border-radius: 8px;

		text-align: center;
		font-size: 13px;
		color: var(--color-destructive);
	}
	/* #endregion frame */
}