/*
 * The frame's layout (js/shell.js): the sidebar's three floating cards, the work area with its top bar, the avatar in
 * the top-right corner, and the phone drawer. Then a page's common parts (title, narrow column) and 设置's.
 */

.shell {
	display: flex;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	background: var(--bg);
}

/* ---- the sidebar: three cards floating on the page ---- */

.sb {
	position: relative;
	z-index: 1; /* the cards' shadows reach over the work area */
	display: flex;
	flex: none;
	flex-direction: column;
	gap: var(--gap);
	width: var(--sb-width);
	height: 100%;
	padding: var(--gap) 0 var(--gap) var(--gap);
	background: var(--bg);
}

.sb-card {
	border: 1px solid var(--border);
	border-top-color: var(--edge-top);
	border-bottom-color: var(--edge-bottom);
	border-radius: var(--radius-card);
	background: var(--card-bg);
	box-shadow: var(--card-shadow);
}

.sb-services {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 6px;
	padding: 10px;
}

/* a service, 设置: each its own raised bar on its card, pressed in while it is open */
.sb-tab {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 38px;
	padding: 6px 12px;
	border: 1px solid var(--border);
	border-top-color: var(--edge-top);
	border-bottom-color: var(--edge-bottom);
	border-radius: var(--radius-sm);
	background: var(--face), var(--sb-btn-bg);
	box-shadow: var(--edge-light), var(--edge-dark), var(--elev-1);
	color: var(--text);
	text-decoration: none;
	-webkit-user-drag: none;
	transition:
		translate 220ms var(--ease-grow),
		box-shadow var(--dur-quick),
		background-color var(--dur-quick),
		border-color var(--dur-quick);
}

.sb-tab svg {
	flex: none;
	color: var(--muted);
}

.sb-tab-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sb-tab:hover {
	background: var(--face), var(--sb-btn-hover);
	color: var(--text-strong);
}

.sb-tab:active,
.sb-tab.is-current {
	border-top-color: var(--edge-bottom);
	border-bottom-color: var(--edge-top);
	background: var(--sb-btn-sunk);
	box-shadow: var(--btn-pressed);
	color: var(--text-strong);
}

.sb-tab.is-current {
	font-weight: 600;
}

.sb-tab.is-current svg {
	color: var(--text-strong);
}

.sb-tab:active {
	translate: 0 1px;
	transition-duration: 80ms;
}

.sb-tab:focus-visible {
	outline: 2px solid var(--border-strong);
	outline-offset: 2px;
}

/* a count beside a service (unread messages), at the button's right */
.sb-tab .sb-badge {
	min-width: 18px;
	height: 18px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--danger);
	color: #fff;
	font-size: calc(11px * var(--ui-scale));
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.sb-tab .sb-badge[hidden] {
	display: none;
}

/* between the first two cards: what a service keeps showing whatever page is open (shell.dock) */
.sb-dock {
	display: contents;
}

/* ---- the middle card: the module's list; a deck of two when it says so (the one behind shows its right and bottom
   edge) ---- */
.sb-deck {
	--sb-peek: 0px;
	position: relative;
	flex: 1;
	min-height: 0;
	margin: 0 var(--sb-peek) var(--sb-peek) 0;
}

.sb-deck.is-deck {
	--sb-peek: 7px;
}

.sb-face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition:
		transform 0.35s var(--ease),
		filter 0.35s;
}

.sb-face.is-front {
	z-index: 2;
}

.sb-face.is-back {
	z-index: 1;
	filter: brightness(0.97);
	transform: translate(var(--sb-peek), var(--sb-peek));
}

.sb-deck:not(.is-deck) .sb-face.is-back {
	visibility: hidden;
}

.sb-face-in {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

/* swapping: the front card steps aside and sinks behind; the back one swings out and comes forward */
.sb-deck.is-swapping .sb-face {
	transition: none;
}

.sb-deck.is-swapping .sb-face.is-leaving {
	animation: sb-to-back 0.5s var(--ease) both;
}

.sb-deck.is-swapping .sb-face.is-coming {
	animation: sb-to-front 0.5s var(--ease) both;
}

@keyframes sb-to-back {
	0% {
		z-index: 2;
		transform: none;
	}
	45% {
		z-index: 2;
		transform: translate(-3%, -4px) scale(0.97) rotate(-1.5deg);
	}
	55% {
		z-index: 1;
	}
	100% {
		z-index: 1;
		transform: translate(var(--sb-peek), var(--sb-peek));
	}
}

@keyframes sb-to-front {
	0% {
		z-index: 1;
		transform: translate(var(--sb-peek), var(--sb-peek));
	}
	45% {
		z-index: 1;
		transform: translate(12%, 6px) rotate(2deg);
	}
	55% {
		z-index: 3;
	}
	100% {
		z-index: 3;
		transform: none;
	}
}

/* ---- the bottom card: 搜索 and 设置 ---- */
.sb-pages {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
}

.sb-search {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

/* the box: a well of its own; the round button stands outside it, at its right */
.sb-search-well {
	display: flex;
	flex: 1;
	align-items: center;
	min-width: 0;
	padding: 3px 12px;
	border: 1px solid var(--border);
	border-top-color: var(--edge-bottom);
	border-radius: 999px;
	background: var(--surface);
	box-shadow: var(--sunken);
}

.sb-search-field {
	flex: 1;
	min-width: 0;
	height: 30px;
	padding: 0;
	border: 0;
	outline: 0;
	background: none;
	color: var(--text);
	font: inherit;
}

.sb-search-field::-webkit-search-cancel-button {
	display: none;
}

.sb-search-well:focus-within {
	border-color: var(--border-strong);
}

/* the "⋯" in the box: 统一搜索's conditions (components/search-filters.js); colored, with a dot, when not as they start */
.sb-search-more {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-right: -8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--faint);
	cursor: pointer;
	transition: background-color var(--dur-quick), color var(--dur-quick);
}

.sb-search-more:hover {
	background: var(--surface-2);
	color: var(--text-strong);
}

.sb-search-dot {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 7px;
	height: 7px;
	border: 1.5px solid var(--surface);
	border-radius: 50%;
	background: var(--mark);
	transform: scale(0);
	transition: transform var(--dur-quick) var(--ease-grow);
}

.sb-search-more.is-set {
	color: var(--mark);
}

.sb-search-more.is-set .sb-search-dot {
	transform: none;
}

/* its window: rows of chips */
.sf-win {
	--win-max-w: 340px;
}

.sf {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 6px 6px 4px;
}

.sf-label {
	margin: 0 2px 6px;
	font-size: calc(12px * var(--ui-scale));
	color: var(--muted);
}

.sf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sf-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 30px;
	padding: 0 12px;
	border: 0;
	border-radius: 999px;
	background: var(--seg-groove);
	box-shadow: var(--seg-groove-shadow);
	color: var(--seg-text);
	font: inherit;
	font-size: calc(13px * var(--ui-scale));
	cursor: pointer;
	transition: background-color var(--dur-quick), box-shadow var(--dur-quick), color var(--dur-quick);
}

.sf-chip[aria-pressed="true"] {
	background: var(--face), var(--seg-thumb);
	box-shadow: var(--seg-thumb-shadow);
	color: var(--seg-text-on);
}

.sf-hint {
	margin: 0 2px;
	font-size: calc(12px * var(--ui-scale));
	color: var(--muted);
}

.sf-foot {
	display: flex;
	justify-content: flex-end;
}

/* the round button beside it: raised, sinks while pressed */
.sb-search-go {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--border);
	border-top-color: var(--edge-top);
	border-bottom-color: var(--edge-bottom);
	border-radius: 50%;
	background: var(--face), var(--sb-btn-bg);
	box-shadow: var(--edge-light), var(--edge-dark), var(--elev-1);
	color: var(--muted);
	cursor: pointer;
	transition:
		translate 220ms var(--ease-grow),
		box-shadow var(--dur-quick),
		background-color var(--dur-quick);
}

.sb-search-go:hover {
	background: var(--face), var(--sb-btn-hover);
	color: var(--text-strong);
}

.sb-search-go:active {
	background: var(--sb-btn-sunk);
	box-shadow: var(--btn-pressed);
	translate: 0 1px;
	transition-duration: 80ms;
}

.sb-list-head {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 46px;
	padding: 8px 10px 4px 16px;
}

.sb-list-title {
	overflow: hidden;
	font-size: calc(13px * var(--ui-scale));
	font-weight: 600;
	color: var(--text-strong);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sb-list-actions {
	display: flex;
	gap: 6px;
}

.sb-list-body {
	flex: 1;
	min-height: 0;
	overflow: auto;
	padding: 2px 6px 8px;
}

/* the card's own small search (shell.js, lib/find.js): a small well under the title row */
.sb-find {
	display: flex;
	flex: none;
	align-items: center;
	gap: 6px;
	margin: 2px 10px 6px;
	padding: 0 6px 0 10px;
	border: 1px solid var(--border);
	border-top-color: var(--edge-bottom);
	border-radius: 999px;
	background: var(--surface);
	box-shadow: var(--sunken);
	color: var(--faint);
	cursor: text;
}

.sb-find[hidden] {
	display: none;
}

.sb-find:focus-within {
	border-color: var(--border-strong);
	color: var(--muted);
}

.sb-find-field {
	flex: 1;
	min-width: 0;
	height: 26px;
	padding: 0;
	border: 0;
	outline: 0;
	background: none;
	color: var(--text);
	font: inherit;
	font-size: calc(13px * var(--ui-scale));
}

.sb-find-field::-webkit-search-cancel-button {
	display: none;
}

.sb-find-clear {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--surface-2);
	color: var(--muted);
	cursor: pointer;
}

.sb-find-clear[hidden] {
	display: none;
}

.sb-find-none {
	margin: 0;
	padding: 4px 16px 16px;
	color: var(--faint);
	font-size: calc(13px * var(--ui-scale));
}

.sb-find-none[hidden] {
	display: none;
}

/* what is not found goes; what is folded opens meanwhile */
.sb-list-body .is-not-found {
	display: none !important;
}

.sb-list-body.is-finding .set-nav-parts {
	grid-template-rows: 1fr;
}

.sb-list-body.is-finding .set-nav-chevron svg {
	transform: rotate(90deg);
}

/* the old list's card on its way out to the left (shell.js leaveCard) */
.sb-ghost {
	position: absolute;
	z-index: 2;
	flex: none;
	margin: 0;
	pointer-events: none;
}

/* ---- wide screens: the bookmark on the middle card's right edge folds the sidebar away and back ---- */
/* the sidebar and the bookmark travel the same way at the same pace (the bookmark is never left hanging); folded, the
   cards' shadows would still show at the window's edge: hidden once they are there */
.sb {
	transition:
		margin-left var(--dur) var(--ease),
		visibility 0s;
}

:root.sb-collapsed .sb {
	margin-left: calc(-1 * var(--sb-width));
	visibility: hidden;
	transition:
		margin-left var(--dur) var(--ease),
		visibility 0s var(--dur);
}

.sb-edge {
	position: fixed;
	top: 50%;
	left: var(--sb-width);
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 72px;
	padding: 0;
	border: 1px solid var(--border);
	border-top-color: var(--edge-top);
	border-bottom-color: var(--edge-bottom);
	border-left: 0;
	border-radius: 0 10px 10px 0;
	background: var(--card-bg);
	box-shadow: var(--edge-light), var(--elev-1);
	color: var(--muted);
	cursor: pointer;
	transform: translateY(-50%);
	transform-origin: left center;
	transition:
		left var(--dur) var(--ease),
		color var(--dur-quick);
}

.sb-edge:hover {
	color: var(--text-strong);
}

.sb-edge:focus-visible {
	outline: 2px solid var(--border-strong);
	outline-offset: 2px;
}

.sb-edge svg {
	transition: transform var(--dur) var(--ease);
}

:root.sb-collapsed .sb-edge {
	left: 0;
}

:root.sb-collapsed .sb-edge svg {
	transform: rotate(180deg);
}

/* 设置 › 外观 › 侧边栏边缘开关: a thin handle instead of the bookmark */
:root[data-sidebar-toggle="handle"] .sb-edge {
	width: 14px;
	margin-left: 2px;
	border: 0;
	background: none;
	box-shadow: none;
}

:root[data-sidebar-toggle="handle"] .sb-edge::before {
	content: "";
	width: 4px;
	height: 44px;
	border-radius: 999px;
	background: var(--border-strong);
	transition:
		height var(--dur-quick),
		background-color var(--dur-quick);
}

:root[data-sidebar-toggle="handle"] .sb-edge:hover::before {
	height: 60px;
	background: var(--muted);
}

:root[data-sidebar-toggle="handle"] .sb-edge svg {
	display: none;
}

/* …or none: a button left of the module's in the middle card's head, and, folded, a round one in the corner */
.sb-list-tools {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* a page's own buttons (setPageTools: 文档's 搜索 and 共享), small and round like the module's "+" */
.sb-page-tools {
	display: flex;
	gap: 6px;
}

.sb-page-tools:empty {
	display: none;
}

.sb-page-tools .round {
	width: 26px;
	height: 26px;
}

.sb-page-tools .round svg {
	width: 15px;
	height: 15px;
}

/* a picker as the card's title (文档's space): its shadow is not cut off at the title's edge, and it is as wide as
   its name while there is room (narrower only when the buttons need it) */
.sb-list-title:has(.picker) {
	display: flex;
	flex: 0 1 auto;
	min-width: 0;
	overflow: visible;
}

.sb-collapse,
.sb-expand,
:root[data-sidebar-toggle="none"] .sb-edge {
	display: none;
}

/* folded: the top-left corner's round buttons, 新建 over 展开 (shell.js; the avatar's look, in the other corner) */
.sb-corners {
	position: fixed;
	top: calc(var(--gap) + 3px);
	left: calc(var(--gap) + 6px);
	z-index: 20;
	display: none;
	flex-direction: column;
	gap: 10px;
}

.sb-corners .round,
.sb-fly.sb-corner-new,
.sb-fly.sb-corner-tool,
.sb-fly.sb-expand {
	width: 36px;
	height: 36px;
	border: 1px solid var(--border);
	background: var(--surface);
	box-shadow: var(--edge-light), var(--elev-2);
	color: var(--text);
}

.sb-corner-tools {
	display: contents;
}

.sb-corner-tool svg {
	width: 16px;
	height: 16px;
}

.sb-corner-new[hidden] {
	display: none !important;
}

@media (min-width: 768px) {
	:root[data-sidebar-toggle="none"] .sb-collapse {
		display: inline-flex;
	}

	:root.sb-collapsed .sb-corners {
		display: flex;
	}

	:root[data-sidebar-toggle="none"].sb-collapsed .sb-expand {
		display: inline-flex;
	}

	/* the top bar's own buttons keep clear of them */
	:root.sb-collapsed .work-top {
		padding-left: calc(var(--gap) + 56px);
	}
}

/* folding and unfolding: the stand-ins flying between the list and the corner; the real ones wait out of sight */
.sb-fly {
	position: fixed;
	z-index: 21;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

.sb-waiting {
	visibility: hidden;
}

/* ---- the work area ---- */

.work {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	padding-right: var(--side-w, 0px); /* the side card stands there (components/pop.js) */
	transition: padding-right var(--dur) var(--ease);
}

.work-top {
	position: relative;
	z-index: 5; /* over a page that fills the window under it (Eolite's map) */
	display: flex;
	flex: none;
	align-items: center;
	gap: 10px;
	height: 56px;
	padding: var(--gap) calc(var(--gap) + 44px) 0 calc(var(--gap) + 6px); /* right: room for the avatar */
}

/* the side card covers the avatar's corner: the avatar moves to the left of it, and nothing else has to */
:root.has-side .work-top {
	padding-right: calc(var(--gap) + 44px);
}

.work-menu {
	display: none;
}

.work-tools {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.work-main {
	position: relative; /* the leaving page sits on top while it goes (lib/motion.js swapPage) */
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

.page {
	height: 100%;
	overflow: auto;
	padding: 12px 28px 40px;
}

.page--narrow > * {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.page-title {
	margin: 8px auto 16px;
	font-size: calc(22px * var(--ui-scale));
	font-weight: 650;
	color: var(--text-strong);
}

.page-title:has(+ .page-subtitle) {
	margin-bottom: 4px;
}

.page-subtitle {
	margin: 0 auto 20px;
	color: var(--muted);
}

.boot-error {
	padding: 48px 16px;
	text-align: center;
	color: var(--muted);
}

/* ---- the avatar, alone in the top-right corner ---- */

.shell-avatar {
	position: fixed;
	top: calc(var(--gap) + 3px);
	right: calc(var(--gap) + 6px + var(--side-w, 0px));
	z-index: 20;
	width: 36px;
	height: 36px;
	box-shadow: var(--edge-light), var(--elev-2);
	transition:
		right var(--dur) var(--ease),
		box-shadow var(--dur-quick);
}

.shell-avatar .avatar {
	width: 30px !important;
	height: 30px !important;
}

/* its window: who one is on top */
.acct-win .acct-card {
	min-height: 56px;
}

.acct-who {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.acct-who b {
	color: var(--text-strong);
	font-weight: 600;
}

.acct-who small {
	overflow: hidden;
	color: var(--muted);
	font-size: calc(12px * var(--ui-scale));
	text-overflow: ellipsis;
}

/* a short note grown out of a "?" */
.win--note .win-body {
	padding: 12px 14px 14px;
}

.help-pop-title {
	font-weight: 600;
	color: var(--text-strong);
}

.help-pop-text {
	margin: 6px 0 0;
	font-size: calc(13px * var(--ui-scale));
	color: var(--muted);
}

/* ---- phones: the sidebar is a drawer ---- */

.sb-shade {
	display: none;
}

@media (max-width: 767px) {
	.sb {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 40;
		width: min(320px, 86vw);
		padding-right: var(--gap);
		background: transparent;
		transform: translateX(-105%);
		transition: transform var(--dur) var(--ease);
	}

	:root.sb-open .sb {
		transform: none;
	}

	/* phones: the drawer, never folded */
	:root.sb-collapsed .sb {
		margin-left: 0;
		visibility: visible;
	}

	.sb-edge {
		display: none;
	}

	.sb-shade {
		position: fixed;
		inset: 0;
		z-index: 39;
		display: block;
		background: var(--veil-dim);
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--dur) var(--ease);
	}

	:root.sb-open .sb-shade {
		opacity: 1;
		pointer-events: auto;
	}

	:root[data-backdrop="none"] .sb-shade {
		background: transparent;
	}

	:root[data-backdrop="blur"] .sb-shade {
		background: rgb(0 0 0 / 0.08);
		backdrop-filter: blur(var(--veil-blur));
		-webkit-backdrop-filter: blur(var(--veil-blur));
	}

	.work {
		padding-right: 0;
	}

	.work-top,
	:root.has-side .work-top {
		height: 52px;
		padding: var(--gap) calc(var(--gap) + 44px) 0 var(--gap);
	}

	.work-menu {
		display: inline-flex;
		width: 36px;
		height: 36px;
	}

	.shell-avatar {
		right: var(--gap);
	}

	.page {
		padding: 8px 14px 32px;
	}

	.page-title {
		font-size: calc(19px * var(--ui-scale));
	}
}

/* ---- 设置 ---- */

.set-nav-group {
	padding: 12px 10px 4px;
	font-size: calc(12px * var(--ui-scale));
	color: var(--muted);
}

.set-nav-group:first-child {
	padding-top: 2px;
}

/* a section with parts (AI 助手: 常规, 显示…): an arrow in its icon's place, and the parts under the row open and close
   like a workspace of AI 助手's (0fr ↔ 1fr animates the height without measuring it); the line hangs from the arrow's
   middle (the row's padding 10px + half the 16px icon) */
.set-nav-chevron {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin: -4px 0;
	padding: 4px 0;
	box-sizing: content-box;
	color: var(--muted);
}

.set-nav-chevron svg {
	transition: transform var(--dur) var(--ease);
}

.set-nav-sec.is-open > .flat .set-nav-chevron svg {
	transform: rotate(90deg);
}

.set-nav-parts {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--dur) var(--ease);
}

.set-nav-sec.is-open > .set-nav-parts {
	grid-template-rows: 1fr;
}

.set-nav-inner {
	min-height: 0;
	overflow: hidden;
}

.set-nav-tree {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 1px 0 4px 17.5px;
	padding-left: 10px;
	border-left: 1px solid var(--border-strong);
}

/* 全局设置's button in the bottom card (shell.js): who one is for it on its right, in red */
.sb-tab-tag {
	flex: none;
	margin-left: auto;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--danger-bg);
	color: var(--danger);
	font-size: calc(11px * var(--ui-scale));
	font-weight: 600;
	line-height: 18px;
}

.set-nav-part {
	min-height: 32px;
	font-size: calc(13px * var(--ui-scale));
}



/* ---- arriving under water (lib/jump.js: signing in, another machine): the water over everything ---- */
html.jump-in body::after {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	background: rgb(7 55 99);
	content: "";
}

.jump-stage {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	pointer-events: none;
}

.jump-stage canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.jump-words {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	padding: 0 16px;
	color: #fff;
	font-size: clamp(22px, 5.5vw, 40px);
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
	text-shadow: 0 2px 12px rgb(0 0 0 / 0.25);
	white-space: pre-line;
	translate: 0 -50%;
}

/* ---- the admin's logo or words (lib/branding.js, 设置 › 管理 › 系统 › 品牌) at the top of the services card; a picture
   shows the one for the current theme ---- */
.sb-brand {
	display: flex;
	justify-content: center;
	min-width: 0;
	padding: 8px 10px 10px;
	border-radius: var(--radius);
	color: var(--text-strong);
	text-decoration: none;
	transition: transform var(--dur-quick) var(--ease-out);
	-webkit-user-drag: none;
}

.sb-brand[hidden] {
	display: none;
}

.sb-brand:active {
	transform: scale(0.97);
}

.sb-brand:focus-visible {
	outline: 2px solid var(--border-strong);
	outline-offset: 2px;
}

.sb-brand-mark {
	min-width: 0;
	font-size: calc(20px * var(--ui-scale));
	line-height: 1.25;
}

.sb-brand-mark.brand-text {
	text-align: center;
	white-space: normal;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.sb-brand-mark.brand-logo {
	justify-content: center;
	height: 44px;
}

.sb-brand-mark.brand-logo img {
	object-position: center;
}

.brand-text {
	overflow: hidden;
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.brand-text.is-bold {
	font-weight: 700;
}

.brand-text.is-italic {
	font-style: italic;
}

.brand-text.is-underline {
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

.brand-logo {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	max-width: 100%;
}

.brand-logo img {
	display: block;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
}

.brand-logo-dark {
	display: none !important;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .brand-logo-light {
		display: none !important;
	}

	:root:not([data-theme="light"]) .brand-logo-dark {
		display: block !important;
	}
}

:root[data-theme="dark"] .brand-logo-light {
	display: none !important;
}

:root[data-theme="dark"] .brand-logo-dark {
	display: block !important;
}