/* The admin pages ("global settings"): lists inside cards, small forms, the translation editor. */

/* ---- the admin part of the settings menu ---- */

.set-nav-admin {
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--border);
}

.set-nav-admin-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 4px 10px 10px;
	font-size: calc(13px * var(--ui-scale));
	font-weight: 600;
	color: var(--text-strong);
}

.set-admin-badge {
	margin-left: 0;
	background: var(--danger-bg);
	color: var(--danger);
	font-size: calc(11px * var(--ui-scale));
	font-weight: 500;
}

/* ---- shared ---- */

.set-error {
	margin: 6px 0 0;
	font-size: calc(12px * var(--ui-scale));
	color: var(--danger);
	overflow-wrap: anywhere;
}

.set-ok {
	margin: 6px 0 0;
	font-size: calc(12px * var(--ui-scale));
	color: var(--ok);
}

.set-stack.is-busy {
	opacity: 0.7;
	transition: opacity 0.2s var(--ease);
}

.adm-banner {
	margin: 0 0 16px;
	padding: 10px 12px;
	border-radius: var(--radius);
	background: color-mix(in srgb, #f59e0b 12%, transparent);
}

.adm-form > .input {
	flex: 1 1 140px;
	min-width: 0;
	width: auto;
}

.adm-form > .set-select {
	flex: none;
	width: auto;
}

/* `.set-inline .input` stretches every input; these stay small */
.set-inline .input.adm-short,
.set-inline .input.adm-num,
.set-inline .input.adm-face-input {
	flex: none;
	min-width: 0;
}

.adm-short {
	width: 7em;
}

.adm-num {
	width: 6.5em;
}

.adm-textarea {
	resize: vertical;
	min-height: 2.6em;
}

.adm-mono,
.adm-link,
.adm-code {
	font-family: var(--mono);
	overflow-wrap: anywhere;
}

.adm-code {
	font-size: calc(16px * var(--ui-scale));
	letter-spacing: 0.04em;
	color: var(--text-strong);
}

.adm-link {
	font-size: calc(12px * var(--ui-scale));
	color: var(--text);
}

.adm-struck {
	text-decoration: line-through;
}

.adm-copy.is-done {
	color: var(--ok);
}

.adm-actions-end {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

.adm-actions-split {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.adm-actions-split .btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* ---- lists inside a card ---- */

.adm-list {
	padding-top: 0;
}

.adm-item {
	padding: 10px 0;
}

.adm-item + .adm-item {
	border-top: 1px dashed var(--border);
}

.adm-item.is-current .adm-item-title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.adm-item-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.adm-item-title {
	font-weight: 500;
	color: var(--text-strong);
	overflow-wrap: anywhere;
}

.adm-item-side {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	font-size: calc(12px * var(--ui-scale));
	color: var(--muted);
}

.adm-item-actions {
	margin-top: 8px;
	gap: 6px;
}

/* 能用的服务 under an account: small raised pills with a tick; 所有账户 ones greyed and fixed */
.acc-svcs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-top: 8px;
}

/* one machine's services: inline when there is only this machine, a titled line each when there are more */
.acc-svc-group {
	display: contents;
}

.acc-svcs.is-grouped {
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}

.acc-svcs.is-grouped .acc-svc-group {
	display: grid;
	gap: 5px;
}

.acc-svc-where {
	display: flex;
	align-items: baseline;
	gap: 8px;
	color: var(--muted);
	overflow-wrap: anywhere;
}

.acc-svc-quiet {
	color: var(--faint);
}

.acc-svc-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.acc-svc {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px 3px 7px;
	border: 1px solid var(--border);
	border-top-color: var(--edge-top, var(--border));
	border-bottom-color: var(--edge-bottom, var(--border));
	border-radius: 999px;
	background: var(--face, none), var(--surface);
	box-shadow: var(--shadow);
	font-size: calc(13px * var(--ui-scale));
	cursor: pointer;
	transition: transform 120ms var(--ease), box-shadow 120ms var(--ease);
}

.acc-svc:active:not(.is-fixed) {
	transform: translateY(0.5px);
	box-shadow: var(--btn-pressed, none);
}

.acc-svc input {
	margin: 0;
	accent-color: var(--accent);
	cursor: inherit;
}

.acc-svc.is-fixed {
	color: var(--faint);
	box-shadow: none;
	background: transparent;
	cursor: default;
}

.adm-item-actions .btn,
.adm-item-actions a.btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	text-decoration: none;
}

.adm-badge {
	margin-left: 0;
	padding: 0 7px;
	font-size: calc(11px * var(--ui-scale));
}

.adm-badge.is-admin {
	background: var(--surface-2);
	color: var(--text-strong);
}

.adm-badge.is-ok {
	background: var(--ok-bg);
	color: var(--ok);
}

.adm-badge.is-quiet {
	background: var(--surface-2);
	color: var(--muted);
}

/* ---- 机器 (pages/settings/machines.js) ---- */

.mch-code {
	display: grid;
	gap: 4px;
	margin-top: 10px;
}

.mch-left {
	font-variant-numeric: tabular-nums;
}

.mch-url {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.mch-url:hover {
	text-decoration: underline;
}

.mch-url svg {
	flex: none;
	color: var(--muted);
}

/* ---- check boxes and pills ---- */

.adm-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}

.adm-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: calc(13px * var(--ui-scale));
	color: var(--text);
	overflow-wrap: anywhere;
}

.adm-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.adm-pill {
	padding: 3px 10px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: calc(12px * var(--ui-scale));
	cursor: pointer;
}

.adm-pill:hover {
	background: var(--surface-2);
}

.adm-pill.is-on {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--accent-text);
}

/* ---- accounts: the invite just made ---- */

.adm-invite {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding: 12px;
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius);
}

.adm-qr {
	flex: none;
	width: 150px;
	height: 150px;
}

.adm-qr svg {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 6px;
}

.adm-invite-text {
	display: flex;
	flex: 1 1 220px;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.adm-dismiss {
	align-self: flex-start;
	margin-top: 4px;
}

.adm-invite-state.is-ok {
	color: var(--ok);
}

.adm-invite-state.is-used {
	color: var(--muted);
}

.adm-invite-state.is-expired {
	color: var(--faint);
	text-decoration: line-through;
}

/* ---- providers ---- */

.adm-fields {
	margin-top: 10px;
	gap: 10px;
}

/* ---- agent avatars ---- */

.adm-face-main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.adm-face-text {
	flex: 1;
	min-width: 0;
}

.adm-face-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.adm-face-actions > .input,
.adm-face-actions > .btn {
	height: 38px;
}

.adm-face-input {
	width: 4.5em;
	text-align: center;
}

.adm-face-actions .set-select {
	flex: none;
	width: auto;
}

/* the buttons with the colour swatches centred under them */
.adm-face-tools {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.adm-face-swatches {
	justify-content: center;
	gap: 8px;
	margin-top: 0;
}

.adm-face-swatch {
	width: 22px;
	height: 22px;
}

/* "automatic": a little of every colour */
.adm-face-swatch.is-auto {
	background: conic-gradient(rgb(60 120 216), rgb(72 168 117), rgb(214 156 41), rgb(214 78 66), rgb(128 90 208), rgb(60 120 216));
}

.adm-face-desc {
	margin-top: 2px;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.adm-face-describe {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}

.adm-face-describe .set-hint {
	margin: 0;
}

/* what users are told it can do: three chips under the name, pressed (sunk) = yes */
.adm-face-abilities {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 8px;
}

.btn.adm-ability {
	gap: 4px;
	padding: 3px 8px 3px 6px;
	border-radius: 999px;
	font-size: calc(12px * var(--ui-scale));
	font-weight: 400;
	color: var(--muted);
}

.btn.adm-ability.is-pressed {
	background: var(--surface-2);
	color: var(--text-strong);
	font-weight: 500;
}

/* the drag grip, left of the avatar */
.adm-face-grip {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	width: 22px;
	margin-right: -6px;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	background: none;
	color: var(--faint);
	cursor: grab;
	touch-action: none;
}

.adm-face-grip:hover {
	color: var(--muted);
}

.set-rows:has(> .adm-face) {
	position: relative;
}

/* while sorting, every row folds to its grip, avatar and name */
.set-rows.is-sorting {
	cursor: grabbing;
	user-select: none;
}

.set-rows.is-sorting .adm-face-tools,
.set-rows.is-sorting .adm-face-describe,
.set-rows.is-sorting .adm-face-text > :not(.adm-face-name),
.set-rows.is-sorting .adm-face-rename {
	display: none;
}

.set-rows.is-sorting .adm-face-name .set-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.set-rows.is-sorting .adm-face:not(.is-dragged) {
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.adm-face.is-dragged {
	position: relative;
	z-index: 2;
	margin: 0 -10px;
	padding-right: 10px;
	padding-left: 10px;
	border-top-color: transparent;
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--menu-shadow);
}

.adm-face.is-dragged .adm-face-grip {
	color: var(--text-strong);
	cursor: grabbing;
}

/* ---- reasoning ---- */

.adm-expand {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.adm-expand-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	overflow-wrap: anywhere;
}

.adm-expand-arrow {
	display: inline-flex;
	color: var(--faint);
	transition: transform 0.2s var(--ease);
}

.adm-expand-arrow.is-open {
	transform: rotate(90deg);
}

.adm-levels {
	margin-top: 12px;
}

.adm-level {
	display: grid;
	grid-template-columns: 7.5em 1fr auto;
	align-items: center;
	gap: 4px 10px;
}

.adm-level .field-hint-error {
	grid-column: 2 / 4;
}

/* sampling (admin): name · slider · number, one row per parameter */
.adm-samples {
	display: grid;
	gap: 12px;
}

.adm-sample {
	display: grid;
	grid-template-columns: 9em 1fr 7.5em;
	align-items: center;
	gap: 4px 12px;
}

.adm-sample-name {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* the name and its "?" on one line */
.adm-sample-label {
	display: flex;
	align-items: center;
	gap: 6px;
}

.adm-sample-value {
	display: flex;
	align-items: center;
	gap: 2px;
}

.adm-sample-num {
	min-width: 0;
	text-align: right;
}

.adm-sample .field-hint-error {
	grid-column: 2 / 4;
}

.adm-sample .field-hint-error:empty {
	display: none;
}

/* the slider: a groove like the switches' and a domed knob; dimmed while nothing is set */
.adm-range {
	width: 100%;
	height: 22px;
	margin: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.adm-range::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 3px;
	background: var(--switch-groove, var(--border-strong));
	box-shadow: var(--switch-groove-shadow, none);
}

.adm-range::-moz-range-track {
	height: 6px;
	border-radius: 3px;
	background: var(--switch-groove, var(--border-strong));
	box-shadow: var(--switch-groove-shadow, none);
}

.adm-range::-webkit-slider-thumb {
	width: 18px;
	height: 18px;
	margin-top: -6px;
	border: 0;
	border-radius: 50%;
	background: var(--switch-knob, #fff);
	box-shadow: var(--switch-knob-shadow, 0 1px 3px rgb(0 0 0 / 0.3));
	transition: opacity 160ms ease, transform 120ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.adm-range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border: 0;
	border-radius: 50%;
	background: var(--switch-knob, #fff);
	box-shadow: var(--switch-knob-shadow, 0 1px 3px rgb(0 0 0 / 0.3));
	transition: opacity 160ms ease, transform 120ms ease;
}

.adm-range:active::-webkit-slider-thumb {
	transform: scale(0.92);
}

.adm-range:active::-moz-range-thumb {
	transform: scale(0.92);
}

.adm-range.is-unset::-webkit-slider-thumb {
	opacity: 0.45;
}

.adm-range.is-unset::-moz-range-thumb {
	opacity: 0.45;
}

.adm-level .field-hint-error:empty {
	display: none;
}

/* ---- preset prompts ---- */

.adm-prompt {
	display: flex;
	gap: 8px;
}

.adm-prompt-fields {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.adm-prompt-tools {
	display: flex;
	flex-direction: column;
}

/* ---- built-in tools ---- */

.adm-quota {
	gap: 8px;
}

.adm-quota-label {
	flex: none;
	min-width: 4em;
	font-size: calc(12px * var(--ui-scale));
	color: var(--muted);
}

/* ---- translations ---- */

.adm-tr-editor {
	scroll-margin-top: 16px;
}

.adm-tr-tools {
	margin: 10px 0 8px;
}

.adm-tr-tools > .input[type="search"] {
	flex: 1 1 200px;
	width: auto;
}

.adm-tr-tools > .set-select {
	flex: none;
	width: auto;
}

/* Stays in view while scrolling the long list, so saving is always one click away. */
.adm-tr-bar {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin: 10px 0;
	padding: 8px 0;
	background: var(--surface);
}

.adm-tr-entry {
	padding: 10px 0;
}

.adm-tr-entry + .adm-tr-entry {
	border-top: 1px dashed var(--border);
}

.adm-tr-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.adm-tr-key {
	font-family: var(--mono);
	font-size: calc(12px * var(--ui-scale));
	color: var(--muted);
	overflow-wrap: anywhere;
}

.adm-tr-ref {
	margin: 4px 0;
	font-size: calc(12px * var(--ui-scale));
	color: var(--faint);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.adm-tr-input {
	width: 100%;
	resize: vertical;
}

.adm-tr-input.is-dirty {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent);
}

.adm-issues ul {
	margin: 4px 0 0;
	padding-left: 18px;
}

@media (max-width: 767px) {
	.adm-level {
		grid-template-columns: 1fr auto;
	}

	.adm-level .input {
		grid-column: 1 / 3;
		grid-row: 2;
	}

	.adm-sample {
		grid-template-columns: 1fr 7.5em;
	}

	.adm-sample .adm-range {
		grid-column: 1 / 3;
		grid-row: 2;
	}

	.adm-sample .field-hint-error {
		grid-column: 1 / 3;
	}

	.adm-level .field-hint-error {
		grid-column: 1 / 3;
	}

}

/* ---- 品牌与外观 (admin/branding.js) ---- */

.adm-brand-slot {
	align-items: center;
}

/* a picture on the background of its theme */
.adm-brand-preview {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	height: 48px;
	padding: 6px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: #fff;
	color: #111827;
}

.adm-brand-preview.is-dark {
	background: #111827;
	color: #f9fafb;
}

.adm-brand-preview img {
	max-width: 200px;
	max-height: 100%;
	object-fit: contain;
}

.adm-brand-preview-text {
	min-width: 0;
	background: var(--sb-card-bg);
	color: var(--text-strong);
	font-size: calc(15px * var(--ui-scale));
}

.adm-brand-text {
	flex: 1;
	min-width: 0;
	max-width: 280px;
}

.adm-brand-count {
	font-variant-numeric: tabular-nums;
}

.adm-brand-style {
	width: 38px;
	padding-inline: 0;
	font-family: Georgia, "Times New Roman", serif;
}

.adm-brand-bold {
	font-weight: 800;
}

.adm-brand-italic {
	font-style: italic;
}

.adm-brand-underline {
	text-decoration: underline;
}

.adm-brand-style[aria-pressed="true"] {
	border-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
	color: var(--accent);
}

.adm-brand-link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
	gap: 8px;
	align-items: center;
}

@media (max-width: 767px) {
	.adm-brand-link {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.adm-brand-link .adm-brand-link-url {
		grid-column: 1;
		grid-row: 2;
	}
}

/* ---- 部署 (admin/deploy.js) ---- */

.adm-deploy-facts {
	display: grid;
	/* the names' column as wide as the longest name (PANEO_DATA_DIR) */
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 6px 10px;
	align-items: baseline;
	margin: 10px 0;
}

.adm-deploy-fact {
	display: contents;
}

.adm-deploy-checks {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.adm-deploy-checks li {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.adm-deploy-checks svg {
	flex: none;
	margin-top: 3px;
}

.adm-deploy-checks .is-ok svg {
	color: var(--ok, #16a34a);
}

.adm-deploy-checks .is-warn svg {
	color: var(--warn, #d97706);
}

.adm-deploy-conf-wrap {
	position: relative;
}

.adm-deploy-conf {
	margin: 0;
	max-height: 420px;
	overflow: auto;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface-2);
	font-size: calc(12.5px * var(--ui-scale));
	line-height: 1.5;
	tab-size: 4;
	white-space: pre;
}

.adm-deploy-conf-tools {
	display: flex;
	align-items: center;
	gap: 6px;
	justify-content: flex-end;
	margin-top: 8px;
}

.adm-deploy-conf-tools > span {
	display: flex;
}

.adm-deploy-steps {
	display: grid;
	gap: 4px;
	margin: 0;
	padding-left: 20px;
}

/* a whole command on its own lines under its step: long, so it wraps anywhere; one click selects it all */
.adm-deploy-cmd {
	display: block;
	margin-top: 4px;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
	user-select: all;
}

/* the built-in https proxy: a red bar per problem, at the top of its card */
.adm-proxy-alert {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-top: 10px;
	padding: 10px 12px;
	border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
	border-radius: var(--radius);
	background: var(--danger-bg);
	color: var(--danger);
	font-size: calc(13px * var(--ui-scale));
}

.adm-proxy-alert > svg {
	flex: none;
	margin-top: 2px;
}

.adm-proxy-alert-text {
	display: grid;
	flex: 1;
	gap: 6px;
	min-width: 0;
	overflow-wrap: anywhere;
}

.adm-proxy-alert-text .set-code {
	color: var(--text);
}

.adm-proxy-alert-more {
	font-size: calc(12px * var(--ui-scale));
}

/* the command to type, and a button to copy it */
.adm-proxy-cmd {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.adm-proxy-cmd > code {
	flex: 1;
	min-width: 0;
	margin-top: 0;
}

.adm-proxy-state {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}

.adm-proxy-dot {
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--muted);
}

.adm-proxy-dot.is-on {
	background: var(--ok);
}

.adm-proxy-dot.is-bad {
	background: var(--danger);
}

.adm-proxy-log {
	max-height: 260px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* the mark beside the domain's name, the button level with the whole entry */
.adm-proxy-certs svg {
	margin-top: 5px;
}

.adm-proxy-cert {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: 2px 10px;
	align-items: baseline;
	min-width: 0;
	overflow-wrap: anywhere;
}

.adm-proxy-certs .btn {
	flex: none;
	align-self: center;
}

/* a wildcard's TXT records to add by hand: name / value rows, each with its copy button */
.adm-proxy-dns {
	display: grid;
	flex-basis: 100%;
	gap: 6px;
	margin-top: 6px;
}

.adm-proxy-dns > p {
	margin: 0;
}

.adm-proxy-dns-grid {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 6px 10px;
	align-items: center;
}

.adm-proxy-dns-grid > code {
	margin-top: 0;
	overflow-wrap: anywhere;
}

.adm-proxy-dns-end {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: flex-end;
}

.adm-proxy-dns-seen {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	color: var(--muted);
	font-size: calc(12px * var(--ui-scale));
	white-space: nowrap;
}

.adm-proxy-dns-seen.is-ok {
	color: var(--ok);
}

.adm-proxy-certs .adm-proxy-dns svg {
	margin-top: 0;
}

/* the Cloudflare token: its box, and "Remove" beside it */
.set-below.adm-proxy-token {
	display: flex;
	flex-direction: row;
	gap: 8px;
	align-items: center;
}

.adm-proxy-token > .input {
	flex: 1;
	min-width: 0;
}

/* a phone: the button under the records, each value's mark and copy button on a line of their own */
@media (max-width: 767px) {
	.adm-proxy-certs > li:has(.adm-proxy-dns) {
		flex-wrap: wrap;
	}

	.adm-proxy-certs > li:has(.adm-proxy-dns) > .adm-proxy-cert {
		flex-basis: calc(100% - 30px);
	}

	.adm-proxy-certs > li:has(.adm-proxy-dns) > .btn {
		margin-left: 22px;
	}

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

	.adm-proxy-dns-end {
		grid-column: 2;
		justify-content: flex-start;
		margin-top: -2px;
	}
}

/* other services behind the proxy: one panel per entry (domain → address, edit), its state below; the form in its place while edited */
.adm-svc-list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.adm-svc {
	display: grid;
	gap: 6px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface-2);
}

.adm-svc-head {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* domain → address; on a narrow screen the address goes under the domain */
.adm-svc-route {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: 4px 8px;
	align-items: center;
	min-width: 0;
}

.adm-svc-route > code {
	margin-top: 0;
	overflow-wrap: anywhere;
}

.adm-svc-head > .btn {
	flex: none;
}

.adm-svc-arrow {
	color: var(--muted);
}

.adm-svc-access {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 8px;
	align-items: center;
	color: var(--muted);
	font-size: calc(13px * var(--ui-scale));
}

.adm-svc-access > svg {
	flex: none;
}

.adm-svc-access > .set-warning {
	flex-basis: 100%;
	margin: 0;
}

/* the picker keeps its own width, not the whole row */
.adm-svc-field > .seg {
	justify-self: start;
}

.adm-svc-state {
	font-size: calc(13px * var(--ui-scale));
}

/* not known yet: a hollow ring where the mark goes */
.adm-svc-wait {
	flex: none;
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	margin-top: 3px;
	border: 1.5px solid var(--muted);
	border-radius: 50%;
	opacity: 0.7;
}

.adm-svc-form {
	display: grid;
	gap: 8px;
}

.adm-svc-form > p {
	margin: 0;
}

.adm-svc-field {
	display: grid;
	gap: 4px;
}

.adm-svc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.adm-svc-add {
	display: flex;
	padding: 0 0 12px;
}

/* the systemd service an entry is tied to: name and state, then its buttons and start-at-boot switch; its log below */
.adm-svc-unit-wrap {
	display: grid;
	gap: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--border);
}

.adm-svc-unit {
	display: grid;
	gap: 8px;
}

.adm-svc-unit > p {
	margin: 0;
}

.adm-svc-unit-head {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: center;
	font-size: calc(13px * var(--ui-scale));
}

.adm-svc-unit-head > code {
	margin-top: 0;
	overflow-wrap: anywhere;
}

.adm-svc-unit-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.adm-svc-boot {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin-left: auto;
	font-size: calc(13px * var(--ui-scale));
	color: var(--muted);
}

.adm-svc-log-box {
	display: grid;
	gap: 8px;
}

.adm-svc-log-box:empty {
	display: none;
}

.adm-svc-log-box > p {
	margin: 0;
}

.adm-svc-log {
	max-height: 320px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.adm-svc-unit-pick {
	display: grid;
	gap: 4px;
	justify-items: start;
}

.adm-svc-unit-pick > p {
	margin: 0;
}

/* a page shown inside another one (the users' agents under the providers): a gap and a smaller title */
.adm-subpage {
	margin-top: 36px;
}

.adm-subpage .set-title {
	font-size: calc(17px * var(--ui-scale));
}

/* customising agents: the name with its pencil, and the name being edited */
.adm-face-name {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

.adm-face-name .set-label {
	overflow-wrap: anywhere;
}

.adm-face-edit {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 4px;
}

.adm-face-edit .adm-face-name-input {
	max-width: 260px;
}

.adm-face-known {
	display: flex;
	align-items: center;
	gap: 8px;
}

.adm-face-known .set-hint {
	cursor: pointer;
}

/* WebKit cuts the text of a drop-down given a fixed height: let the padding size it */
.adm-face-actions > select.input {
	height: auto;
	padding-top: 9px;
	padding-bottom: 9px;
	line-height: 1.3;
}

/* ---- 公司首页: the news list ---- */
.adm-news {
	display: flex;
	align-items: center;
	gap: 12px;
}
.adm-news .adm-prompt-tools {
	flex-direction: row;
	gap: 2px;
}
.adm-news-text {
	flex: 1;
	min-width: 0;
}
.adm-news-title {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text-strong);
	font-weight: 600;
}
.adm-news-title span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.adm-news-pin {
	flex: none;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--accent-text);
	font-size: calc(12px * var(--ui-scale));
	font-weight: 500;
}
.adm-news-empty {
	padding: 12px 16px;
}

/* 挂到主站 (pages/settings/deploy.js): what pairing deletes */
.mlk-warn {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-top: 8px;
}

.mlk-warn svg {
	flex: none;
	margin-top: 2px;
	color: var(--muted);
}

.mlk-open {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
}

/* ---- Meol's page: tabs under the bar, and in them lists whose rows open where they are (components/meol/) ---- */

.mt-strip {
	flex: none;
	display: flex;
	padding: 10px 18px;
	border-bottom: 1px solid var(--border);
	background: var(--bg);
	overflow-x: auto;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.mt-strip::-webkit-scrollbar {
	display: none;
}

.mt-strip > .seg {
	height: auto;
	margin-inline: auto;
}

.svc-body > .mt-body {
	max-width: 860px;
}

.mt-panel,
.mx,
.mx > .set-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mx > .set-status[hidden] {
	display: none;
}

.mx-list {
	padding-top: 0;
	padding-bottom: 0;
}

.mx-item + .mx-item {
	border-top: 1px dashed var(--border);
}

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

.mx-toggle {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 12px 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.mx-toggle-text {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	min-width: 0;
}

.mx-title {
	font-weight: 500;
	color: var(--text-strong);
	overflow-wrap: anywhere;
}

.mx-meta {
	color: var(--muted);
	font-size: calc(12px * var(--ui-scale));
	overflow-wrap: anywhere;
}

.mx-chevron {
	display: inline-flex;
	margin-left: auto;
	color: var(--faint);
	transition: transform 0.3s var(--ease);
}

.mx-item.is-open > .mx-head .mx-chevron {
	transform: rotate(180deg);
}

.mx-toggle:hover .mx-chevron,
.mx-toggle:hover .mx-title {
	color: var(--text-strong);
}

/* what a row opens to: a sunken panel, lit from the top left */
.mx-detail {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0 0 14px;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--surface-2);
	box-shadow:
		inset 1px 1px 2px rgb(0 0 0 / 0.06),
		inset -1px -1px 0 rgb(255 255 255 / 0.5);
}

:root[data-theme="dark"] .mx-detail {
	background: var(--bg);
	box-shadow:
		inset 1px 1px 3px rgb(0 0 0 / 0.4),
		inset -1px -1px 0 rgb(255 255 255 / 0.04);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mx-detail {
		background: var(--bg);
		box-shadow:
			inset 1px 1px 3px rgb(0 0 0 / 0.4),
			inset -1px -1px 0 rgb(255 255 255 / 0.04);
	}
}

.mx-fields {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mx-field {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.mx-field > .input,
.mx-field > .set-select {
	flex: 0 1 18em;
	min-width: 0;
	background: var(--surface);
}

.mx-seg {
	display: flex;
	max-width: 100%;
	overflow-x: auto;
}

.mx-field > .input.mx-num {
	flex: none;
}

.mx-value {
	flex: none;
	color: var(--muted);
	font-size: calc(13px * var(--ui-scale));
	font-variant-numeric: tabular-nums;
}

.mx-field-text,
.mx-stacked {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mx-stacked {
	gap: 4px;
}

.mx-label {
	color: var(--text);
	font-size: calc(14px * var(--ui-scale));
}

.mx-detail .input {
	background: var(--surface);
}

.mx-text {
	width: 100%;
	min-height: 4.5em;
	resize: vertical;
	font: inherit;
	line-height: 1.5;
}

.mx-code {
	font-family: var(--mono);
	font-size: calc(12px * var(--ui-scale));
}

.mx-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--border);
}

.mx-section-title {
	color: var(--muted);
	font-size: calc(12px * var(--ui-scale));
	font-weight: 600;
	letter-spacing: 0.02em;
}

.mx-lines {
	display: flex;
	flex-direction: column;
}

.mx-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	padding: 6px 0;
}

.mx-line + .mx-line {
	border-top: 1px dashed var(--border);
}

.mx-line-text {
	color: var(--text-strong);
}

.mx-line-side {
	flex: 1;
	color: var(--muted);
	font-size: calc(12px * var(--ui-scale));
}

.mx-add .input {
	max-width: 18em;
}

.mx-pair {
	flex: 0 1 22em;
	flex-wrap: nowrap;
}

.mx-pair .input {
	min-width: 0;
}

.mx-fold {
	padding-top: 10px;
	border-top: 1px solid var(--border);
}

.mx-fold-head {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 2px 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.mx-fold-head .mx-chevron {
	margin-left: 0;
}

.mx-fold.is-open .mx-fold-head .mx-chevron {
	transform: rotate(90deg);
}

.mx-fold-head:hover .mx-section-title {
	color: var(--text);
}

.mx-fold-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 12px;
}

.mx-dates,
.mx-days {
	gap: 8px;
}

.mx-dates .input.mx-date {
	flex: 0 1 11em;
	width: auto;
}

.mx-days .input.adm-num {
	width: 5em;
}

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

.mx-buttons {
	gap: 8px;
}

.mx-record {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mx-record-value {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

.mx-record-value code {
	flex: 1;
	min-width: 0;
	max-height: 6.5em;
	overflow: auto;
	padding: 6px 8px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--surface);
	font-family: var(--mono);
	font-size: calc(12px * var(--ui-scale));
	overflow-wrap: anywhere;
	user-select: all;
}

.modal .mx-text {
	margin-top: 4px;
}

.mx-sentence .set-select {
	flex: none;
	width: auto;
}

.mx-sentence > .input:not(.mx-num) {
	flex: 0 1 16em;
	min-width: 0;
}

.mx-sentence {
	gap: 6px 8px;
	color: var(--text);
	font-size: calc(14px * var(--ui-scale));
}

.set-inline .input.mx-num,
.mx-num {
	width: 5.5em;
	flex: none;
	text-align: center;
}

.mx-dot {
	color: var(--faint);
}

.mx-score {
	flex: none;
	flex-wrap: nowrap;
	gap: 8px;
}

.set-inline .input.mx-note {
	flex: 0 1 12em;
}

.set-inline .input.mx-ip {
	flex: 0 1 13em;
}

.mx-group-title {
	padding-top: 4px;
}

.mx-empty {
	padding: 6px 0 10px;
}

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

.mx-try {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mx-verdict {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	padding: 10px 12px;
	border-radius: var(--radius);
	background: var(--surface-2);
}

.mx-verdict.is-ok {
	background: var(--ok-bg);
	color: var(--ok);
}

.mx-verdict.is-warn {
	background: rgb(234 179 8 / 0.15);
	color: #a16207;
}

.mx-verdict.is-bad {
	background: var(--danger-bg);
	color: var(--danger);
}

:root[data-theme="dark"] .mx-verdict.is-warn {
	color: #facc15;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mx-verdict.is-warn {
		color: #facc15;
	}
}

.mx-check .mx-line-side {
	flex-basis: 100%;
	order: 5;
	overflow-wrap: anywhere;
}

.mx-points {
	margin-left: auto;
	color: var(--text-strong);
	font-variant-numeric: tabular-nums;
}

.mx-headers summary {
	color: var(--muted);
	font-size: calc(13px * var(--ui-scale));
	cursor: pointer;
}

.mx-headers pre {
	margin: 6px 0 0;
	padding: 8px 10px;
	border-radius: 6px;
	background: var(--surface-2);
	font-family: var(--mono);
	font-size: calc(12px * var(--ui-scale));
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.adm-badge.is-danger {
	background: var(--danger-bg);
	color: var(--danger);
}

/* 发信队列, 日志, 备份 */

.mx-empty-big {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	color: var(--ok);
}

.mx-said {
	flex-basis: 100%;
	padding: 4px 8px;
	border-radius: 6px;
	background: var(--surface);
	font-family: var(--mono);
	font-size: calc(12px * var(--ui-scale));
	overflow-wrap: anywhere;
}

.mx-warn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--danger);
}

.mx-log-bar {
	gap: 10px 14px;
}

.mx-log-bar .set-select {
	flex: none;
	width: auto;
}

.mx-log-problems {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--text);
	font-size: calc(14px * var(--ui-scale));
	white-space: nowrap;
}

.set-inline .input.mx-log-search {
	flex: 1 1 12em;
}

.mx-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.mx-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 8px 3px 10px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--text);
	font: inherit;
	font-size: calc(12px * var(--ui-scale));
	cursor: pointer;
	box-shadow: var(--shadow);
}

.mx-chip:hover {
	border-color: var(--border-strong);
}

.mx-log {
	padding: 6px 0;
}

.mx-log-lines {
	display: flex;
	flex-direction: column;
}

.mx-log-none {
	padding: 14px 18px;
}

.mx-log-line {
	padding: 6px 18px;
	border-left: 3px solid transparent;
}

.mx-log-line + .mx-log-line {
	border-top: 1px solid var(--border);
}

.mx-log-line.is-warn {
	border-left-color: #eab308;
}

.mx-log-line.is-error {
	border-left-color: var(--danger);
	background: color-mix(in srgb, var(--danger-bg) 55%, transparent);
}

.mx-log-line.is-in,
.mx-log-line.is-out {
	padding-top: 2px;
	padding-bottom: 2px;
	border-top: 0;
}

.mx-log-line.is-in .mx-log-head,
.mx-log-line.is-out .mx-log-head {
	display: none;
}

.mx-log-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 10px;
	color: var(--muted);
	font-size: calc(12px * var(--ui-scale));
}

.mx-log-time {
	font-variant-numeric: tabular-nums;
}

.mx-log-source {
	color: var(--text);
	font-weight: 500;
}

.mx-log-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--muted);
	font: inherit;
	font-family: var(--mono);
	text-decoration: underline dotted;
	text-underline-offset: 3px;
	cursor: pointer;
}

.mx-log-link:hover {
	color: var(--text-strong);
}

.mx-log-text {
	color: var(--text);
	font-family: var(--mono);
	font-size: calc(12px * var(--ui-scale));
	line-height: 1.5;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.mx-log-line.is-in .mx-log-text,
.mx-log-line.is-out .mx-log-text {
	color: var(--muted);
}

.mx-log-line.is-error .mx-log-text {
	color: var(--danger);
}

.mx-log-more {
	padding: 10px 18px 6px;
	justify-content: center;
}

.mx-log-more:empty {
	display: none;
}

.mx-file-actions {
	flex: none;
	gap: 6px;
}

.mx-progress {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 12px;
}

.mx-bar {
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--surface-2);
	box-shadow: inset 1px 1px 2px rgb(0 0 0 / 0.12);
}

.mx-bar-fill {
	height: 100%;
	border-radius: inherit;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s linear;
}

.mx-bar.is-busy .mx-bar-fill {
	width: 35%;
	transform: none;
	animation: mx-sweep 1.2s var(--ease) infinite;
}

@keyframes mx-sweep {
	from {
		translate: -100% 0;
	}
	to {
		translate: 290% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mx-bar.is-busy .mx-bar-fill {
		width: 100%;
		opacity: 0.5;
		animation: none;
	}
}

.mx-dialog-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 6px 0 4px;
}

@media (max-width: 640px) {
	.mt-strip {
		padding: 8px 12px;
	}

	.mt-strip > .seg {
		margin-inline: 0;
	}

	.mx-head {
		flex-wrap: wrap;
	}

	.mx-head > .mm-owner {
		margin: -6px 0 10px;
	}

	.mx-field {
		flex-wrap: wrap;
	}

	.mx-field > .input,
	.mx-field > .set-select,
	.mx-pair {
		flex: 1 1 100%;
	}

	.mx-detail {
		padding: 12px;
	}

	.mx-try-form {
		grid-template-columns: 1fr;
	}

	.mx-head > .mx-score {
		margin: -6px 0 10px;
	}

	/* the name keeps its room; what is beside it goes under when they do not fit */
	.mx-toggle {
		flex: 1 1 14em;
	}

	.mx .adm-form > .input:first-child {
		flex: 1 1 100%;
	}

	.mx-log-line {
		padding-inline: 14px;
	}

	.mx-file-actions {
		flex-basis: 100%;
		justify-content: flex-end;
	}
}

.mm-local {
	width: 9em;
	flex: 0 1 auto;
}

.mm-for {
	margin-left: 4px;
}

.mm-owner {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mm-owner .set-select {
	min-width: 7em;
}

.mm-domain {
	max-width: 16em;
}

.mm-owner .set-select {
	color: var(--text);
	font-size: calc(13px * var(--ui-scale));
}

.mm-auto {
	gap: 4px;
}

.mm-auto .set-select {
	width: auto;
	flex: none;
}

/* ---- Meol's page: 运行状况 and 端口 (概况), 检查 DNS, folders, the relay, address rules (components/meol/) ---- */

/* the counts: small raised tiles, the number large, light from the top left */
.mx-stats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(6.5em, 1fr));
	gap: 8px;
}

.mx-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 10px;
	border: 1px solid var(--edge-top);
	border-bottom-color: var(--edge-bottom);
	border-radius: 10px;
	background: var(--surface);
	box-shadow: var(--edge-light), var(--elev-1);
}

.mx-stat-value {
	color: var(--text-strong);
	font-size: calc(18px * var(--ui-scale));
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.mx-stat-label {
	color: var(--muted);
	font-size: calc(12px * var(--ui-scale));
}

.mx-stat.is-danger .mx-stat-value {
	color: var(--danger);
}

.mx-stat.is-warn .mx-stat-value {
	color: #a16207;
}

:root[data-theme="dark"] .mx-stat.is-warn .mx-stat-value {
	color: #facc15;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mx-stat.is-warn .mx-stat-value {
		color: #facc15;
	}
}

/* a port: listening (a green light) or off */
.mx-port {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--muted);
	font-size: calc(12px * var(--ui-scale));
}

.mx-port::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1.5px solid var(--faint);
	box-sizing: border-box;
}

.mx-port.is-on {
	color: var(--ok);
}

.mx-port.is-on::before {
	border: none;
	background: var(--ok);
	box-shadow: 0 0 0 3px var(--ok-bg);
}

/* 检查 DNS: a mark, what, and what was found */
.mx-dns .mx-line-text {
	min-width: 5em;
	overflow-wrap: anywhere;
}

.mx-dns .mx-line-side {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	overflow-wrap: anywhere;
}

.mx-dns-mark {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	font-size: calc(12px * var(--ui-scale));
	font-weight: 700;
}

.mx-dns.is-ok .mx-dns-mark {
	background: var(--ok-bg);
	color: var(--ok);
}

.mx-dns.is-bad .mx-dns-mark {
	background: var(--danger-bg);
	color: var(--danger);
}

.mx-dns.is-warn .mx-dns-mark {
	background: rgb(234 179 8 / 0.15);
	color: #a16207;
}

.mx-dns.is-bad .mx-line-side {
	color: var(--danger);
}

.mx-dns-value,
.mx-dns-ip {
	font-size: calc(12px * var(--ui-scale));
	overflow-wrap: anywhere;
}

/* folders and the ways of an address rule: a small table, sliding sideways when narrow */
.mx-table-wrap {
	overflow-x: auto;
}

.mx-table {
	width: 100%;
	border-collapse: collapse;
	font-size: calc(13px * var(--ui-scale));
	font-variant-numeric: tabular-nums;
}

.mx-table th {
	color: var(--muted);
	font-size: calc(12px * var(--ui-scale));
	font-weight: 600;
	text-align: left;
}

.mx-table th,
.mx-table td {
	padding: 6px 8px 6px 0;
	white-space: nowrap;
}

.mx-table tbody tr + tr > * {
	border-top: 1px dashed var(--border);
}

.mx-table tbody th {
	color: var(--text);
	font-size: inherit;
	font-weight: 400;
}

.mx-folder-name {
	max-width: 14em;
	overflow: hidden;
	color: var(--text-strong);
	text-overflow: ellipsis;
}

.mx-table td.is-unseen {
	color: var(--text-strong);
	font-weight: 600;
}

.mx-folder-action {
	width: 1%;
	text-align: right;
}

.mx-folder-more {
	width: 30px;
	height: 30px;
}

.mx-ways {
	width: auto;
}

.mx-ways td {
	padding-right: 20px;
}

.mx-check-box {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	cursor: pointer;
}

.mx-check-box input {
	width: 16px;
	height: 16px;
	accent-color: var(--accent);
}

/* the relay's 试一试 and its result in a row with 保存 */
.mx-relay-end {
	flex-wrap: wrap;
	align-items: center;
}

.mx-tried {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	font-size: calc(13px * var(--ui-scale));
}

.mx-date {
	width: auto;
	flex: none;
}

/* Meol's 拉信 tab (components/meol/fetch.js) */
.mx-fetch-meta {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.mx-fetch-bad {
	color: var(--danger);
}

.mx-fetch-new {
	margin-top: 4px;
}

/* Meol's rules (components/meol/rules.js): the 规则 tab, and a mailbox's own in its row */
.mx-rule-moves {
	display: flex;
	flex-direction: column;
	flex: none;
}

.mx-rule-moves .icon-btn {
	width: 26px;
	height: 20px;
}

.mx-rule {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mx-rule-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
}

.mx-rule-part {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* inputs as tall as the selects beside them */
.mx-rule-line {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 6px;
}

.mx-rule-line > .btn,
.mx-rule-line > .icon-btn,
.mx-rule-line > .mx-value,
.mx-rule-line > .mx-rule-says {
	align-self: center;
}

.mx-rule-line > .set-select {
	flex: none;
	min-width: 0;
	background: var(--surface);
}

.mx-rule-line > .input.mx-rule-value {
	flex: 1 1 12em;
	min-width: 8em;
}

.mx-rule-line > .input.mx-rule-header {
	flex: 0 1 9em;
	min-width: 6em;
}

.mx-rule-line > .input.mx-num {
	flex: none;
	width: 7em;
}

.mx-rule-line > .mx-rule-x {
	margin-left: auto;
}

.mx-rule-says {
	flex: 1 1 12em;
}

.mx-rule-add {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.mx-rule-line > .btn.is-on {
	color: var(--accent);
}

.mx-rule-try {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	padding-left: 12px;
	border-left: 2px solid var(--border);
}

.mx-rule-try > .input {
	flex: 1 1 14em;
	min-width: 8em;
}

.mx-rule-tried {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--muted);
	font-size: calc(13px * var(--ui-scale));
}

.mx-rule-tried.is-ok {
	color: var(--ok);
}

.mx-rule-tried.is-bad {
	color: var(--danger);
}

.mx-rule-undo:empty {
	display: none;
}

/* a mailbox's rules open inside its own sunken panel: raised a little there */
.mx-detail .mx-rules .mx-detail {
	background: var(--surface);
	box-shadow:
		inset 1px 1px 2px rgb(0 0 0 / 0.06),
		0 0 0 1px var(--border);
}

/* Meol's 公共文件夹 tab (components/meol/public.js): 谁能用 lines are rule lines, the person's box the wide one */
.mx-access > .set-select:first-child {
	flex: 1 1 12em;
}

/* on a phone: who on a line of its own, what they may do and ✕ under it */
@media (max-width: 560px) {
	.mx-access > .set-select:first-child {
		flex-basis: 100%;
	}

	.mx-access > .set-select:nth-child(2) {
		flex: 1 1 auto;
	}
}

.mx-sub-list {
	display: flex;
	flex-direction: column;
}

.mx-sub {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	padding: 6px 0;
}

.mx-sub + .mx-sub {
	border-top: 1px dashed var(--border);
}

.mx-sub-name {
	color: var(--text-strong);
	overflow-wrap: anywhere;
}

.mx-sub-new {
	margin-top: 8px;
}