.kotia-admin {
	--kotia-ink: #1d2327;
	--kotia-muted: #646970;
	--kotia-border: #dcdcde;
	--kotia-blue: #3858e9;
	--kotia-green: #008a20;
	--kotia-amber: #996800;
	max-width: 1120px;
	margin-bottom: 32px;
	color: var(--kotia-ink);
}

.kotia-admin *,
.kotia-admin *::before,
.kotia-admin *::after {
	box-sizing: border-box;
}

.kotia-admin h1,
.kotia-admin h2,
.kotia-admin h3,
.kotia-admin p {
	margin-top: 0;
}

.kotia-admin h1,
.kotia-admin h2,
.kotia-admin h3 {
	color: var(--kotia-ink);
	line-height: 1.3;
}

.kotia-admin .notice {
	margin-right: 0;
	margin-left: 0;
}

.kotia-admin a:focus-visible,
.kotia-admin button:focus-visible,
.kotia-admin select:focus-visible,
.kotia-admin input:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 1px;
	box-shadow: 0 0 0 3px var(--kotia-blue);
}

.kotia-token-notice {
	margin-top: 18px !important;
	margin-bottom: 16px !important;
	padding: 14px 16px 14px 12px;
	border-left-width: 4px;
}

.kotia-token-notice-content {
	max-width: 820px;
}

.kotia-token-notice p {
	margin-bottom: 4px;
}

.kotia-token-notice #kotia-new-token-heading {
	font-size: 15px;
}

.kotia-token-notice [role="status"] {
	margin-bottom: 10px;
}

.kotia-page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	margin: 18px 0 14px;
	padding: 22px 24px;
	background: #fff;
	border: 1px solid var(--kotia-border);
	border-top: 3px solid var(--kotia-blue);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
}

.kotia-page-heading {
	min-width: 0;
}

.kotia-product-label {
	margin-bottom: 4px;
	color: var(--kotia-blue);
	font-size: 13px;
	font-weight: 600;
}

.kotia-page-header h1 {
	margin: 0 0 7px;
	padding: 0;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.kotia-page-intro {
	max-width: 720px;
	margin-bottom: 0;
	color: #3c434a;
	font-size: 14px;
	line-height: 1.55;
}

.kotia-page-actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 12px;
}

.kotia-page-actions .button {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 14px;
}

.kotia-panel {
	background: #fff;
	border: 1px solid var(--kotia-border);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
}

.kotia-connection-panel {
	margin-bottom: 20px;
}

.kotia-panel-header {
	padding: 20px 24px 16px;
	border-bottom: 1px solid var(--kotia-border);
}

.kotia-panel-header h2 {
	margin: 0 0 4px;
	font-size: 19px;
	font-weight: 600;
}

.kotia-panel-header p {
	margin-bottom: 0;
	color: var(--kotia-muted);
	font-size: 13px;
}

.kotia-setting {
	padding: 19px 24px 20px;
	border-bottom: 1px solid var(--kotia-border);
}

.kotia-setting:last-child {
	border-bottom: 0;
}

.kotia-setting-label {
	margin-bottom: 4px;
	color: var(--kotia-blue);
	font-size: 12px;
	font-weight: 600;
}

.kotia-setting h3 {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 600;
}

.kotia-setting > p:not(.kotia-setting-label):not(.kotia-token-caution) {
	margin-bottom: 12px;
	color: var(--kotia-muted);
	font-size: 13px;
	line-height: 1.5;
}

.kotia-inline-form,
.kotia-setting form {
	margin: 0;
}

.kotia-field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}

.kotia-field-actions,
.kotia-copy-control {
	display: flex;
	align-items: stretch;
	gap: 8px;
	max-width: 760px;
}

.kotia-field-actions select,
.kotia-copy-control input {
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
	min-height: 36px;
}

.kotia-field-actions .button,
.kotia-copy-control .button {
	flex: 0 0 auto;
	min-height: 36px;
	margin: 0;
}

.kotia-field .description {
	margin: 5px 0 0;
}

.kotia-token-caution {
	max-width: 720px;
	margin: 0 0 12px;
	padding: 7px 10px;
	color: #50575e;
	background: #fff8e5;
	border-left: 3px solid #dba617;
	font-size: 12px;
	line-height: 1.45;
}

.kotia-workflow {
	padding: 20px 24px 22px;
}

.kotia-workflow-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 18px;
}

.kotia-workflow h2 {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
}

.kotia-workflow-header p {
	max-width: 680px;
	margin-bottom: 0;
	color: var(--kotia-muted);
	font-size: 13px;
	line-height: 1.5;
}

.kotia-workflow ol {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: kotia-workflow;
}

.kotia-workflow li {
	position: relative;
	min-height: 32px;
	margin: 0;
	padding-left: 34px;
	counter-increment: kotia-workflow;
}

.kotia-workflow li::before {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--kotia-blue);
	background: #f0f3ff;
	border: 1px solid #c7d2fe;
	border-radius: 50%;
	content: counter(kotia-workflow);
	font-size: 11px;
	font-weight: 700;
}

.kotia-workflow strong,
.kotia-workflow span {
	display: block;
}

.kotia-workflow strong {
	margin-bottom: 2px;
	font-size: 13px;
}

.kotia-workflow span {
	color: var(--kotia-muted);
	font-size: 12px;
	line-height: 1.45;
}

@media screen and (max-width: 960px) {
	.kotia-workflow ol {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 782px) {
	.kotia-admin {
		margin-right: 10px;
	}

	.kotia-page-header {
		align-items: flex-start;
		flex-direction: column;
		gap: 16px;
		padding: 20px;
	}

	.kotia-page-actions {
		width: 100%;
	}

	.kotia-workflow-header {
		flex-direction: column;
		gap: 6px;
	}
}

@media screen and (max-width: 600px) {
	.kotia-field-actions,
	.kotia-copy-control {
		flex-direction: column;
	}

	.kotia-field-actions .button,
	.kotia-copy-control .button {
		width: 100%;
	}

	.kotia-panel-header,
	.kotia-setting {
		padding-right: 18px;
		padding-left: 18px;
	}

	.kotia-workflow {
		padding-right: 18px;
		padding-left: 18px;
	}

	.kotia-workflow ol {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}