/* ══════════════════════════════════════════════════════════════
   墨耕 · 设置页专属样式

   这一层只管设置页：题签、供应商列表、模型卡片、档位竹签、批量浮层。
   全局令牌（纸、墨、朱砂、间距、字号）都由 style.css 定义，本文件只用
   var() 取色取尺 —— 暗色主题因此无需另写一套。

   var(--名字, 回退值) 里的回退值不是摆设：令牌由 style.css 提供，
   万一某个令牌还没落地，设置页也得站得住，不能塌成一团。
   ══════════════════════════════════════════════════════════════ */

/* ── 题签：对话框头 ─────────────────────────────────────────── */

.settings-dialog .settings-head {
	position: relative;
	align-items: center;
	gap: var(--sp-4, 16px);
	padding: calc(var(--sp-4, 16px) + 2px) var(--sp-5, 24px) var(--sp-3, 12px);
	border-bottom: 1px solid var(--rule-soft);
	/* 一道自上而下的纸光，把题签从纸面上"托"起来一点 */
	background: linear-gradient(180deg, var(--sheen), transparent 78%), var(--paper);
}

.settings-dialog .settings-head > div {
	min-width: 0;
}

/* 朱砂小方印：阳文一个「墨」字，压在题目左首，像稿纸角上的闲章 */
.settings-dialog .settings-head h3 {
	display: flex;
	align-items: center;
	gap: var(--sp-2, 8px);
	margin: 0;
	font-family: var(--kai);
	font-size: var(--fs-xl, 19px);
	font-weight: 600;
	letter-spacing: 0.22em;
	color: var(--ink);
}

.settings-dialog .settings-head h3::before {
	content: "墨";
	display: grid;
	place-items: center;
	flex: none;
	width: 22px;
	height: 22px;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0;
	/* 印泥色底 + 内描一道浅边，像盖在纸上的印不是贴上去的图 */
	background: var(--seal);
	color: var(--on-cinnabar);
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px var(--seal-edge), 0 1px 2px var(--seal-drop);
	text-shadow: none;
}

/* 副标题做成淡墨小签：左侧一道朱砂短线，读者一眼知道这是"注"不是"正文" */
.settings-dialog .settings-head p {
	display: inline-block;
	/* 原来卡在 52ch。ch 是西文「0」的宽度，中文一行只摊得下二十来个字，
	   于是这行注脚折成两行，末行孤零零剩一个「量」。
	   小签的意义在左边那道朱砂线，不在宽度 —— 让它按内容铺开，一行放得下就一行。 */
	max-width: 100%;
	margin: var(--sp-2, 8px) 0 0;
	padding: 2px 10px 2px 9px;
	border-left: 2px solid var(--cinnabar-edge);
	background: var(--cinnabar-tint);
	color: var(--ink-3);
	font-size: var(--fs-xs, 11.5px);
	line-height: 1.75;
	letter-spacing: 0.03em;
	text-wrap: pretty;
}

.settings-dialog .settings-head .btn {
	flex: none;
	min-height: 34px;
}

/* ── 常用之笔 / 惯用思深 ────────────────────────────────────── */

.settings-dialog .settings-defaults {
	gap: var(--sp-3, 12px) var(--sp-5, 24px);
	padding: var(--sp-3, 12px) var(--sp-5, 24px);
	border-bottom: 0;
	background: var(--paper-lo);
	/* 与下方列表之间只用一条淡线，不堆第二道实线 */
	box-shadow: inset 0 -1px 0 var(--rule-soft);
}

.settings-dialog .settings-defaults label {
	gap: var(--sp-2, 8px);
	font-size: var(--fs-xs, 11.5px);
	letter-spacing: 0.08em;
	color: var(--ink-3);
}

.settings-dialog .settings-defaults select {
	min-width: 220px;
	max-width: min(340px, 46vw);
	font-size: var(--fs-sm, 12.5px);
	font-family: var(--serif);
	background: var(--paper-hi);
	border-color: var(--rule);
}

.settings-dialog .settings-defaults select:focus-visible {
	border-color: var(--cinnabar);
}

.default-extra {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 240px;
}

.default-search-input,
.provider-search,
.model-search {
	font-family: var(--sans);
	font-size: var(--fs-sm, 12.5px);
	padding: 6px 9px;
	border: 1px solid var(--rule);
	background: var(--paper-hi);
	color: var(--ink);
	transition: border-color var(--brush, 220ms cubic-bezier(0.22, 0.61, 0.36, 1)),
		background var(--brush, 220ms cubic-bezier(0.22, 0.61, 0.36, 1));
}

.default-search-input:focus,
.provider-search:focus,
.model-search:focus {
	border-color: var(--cinnabar);
	background: var(--focus-paper);
}

/* 提示与粗估：四级层级里最低的一级，仍要读得清 */
.default-hint,
.default-cost {
	font-size: var(--fs-xs, 11.5px);
	line-height: 1.7;
	color: var(--ink-3);
}

.default-hint.is-warn {
	color: var(--cinnabar);
	font-weight: 500;
}

/* 没有话要说的时候别占着纸面：手机上一行提示就是半屏列表 */
.default-hint:empty,
.default-cost:empty,
.default-search:empty {
	display: none;
}

/* 数字等宽，单位飞白：一串钱数才对得齐 */
.default-cost {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 3px;
	font-family: var(--serif);
	color: var(--ink-3);
}

.default-cost .cost-num {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink-2);
	font-variant-numeric: tabular-nums;
}

.default-cost .cost-unit {
	font-size: var(--fs-xs, 11.5px);
	color: var(--ink-3);
	letter-spacing: 0.02em;
}

/* ── 供应商栏：一行一枚书签 ─────────────────────────────────── */

.providers-rail {
	border-right: 1px solid var(--rule-soft);
	background: var(--paper);
}

.search-wrap {
	padding: var(--sp-3, 12px) var(--sp-3, 12px) var(--sp-1, 4px);
	background: transparent;
}

.provider-search {
	width: 100%;
	border-radius: var(--r-2, 6px);
	background: var(--paper-hi);
	box-shadow: inset 0 1px 2px var(--lift-2);
}

.settings-providers {
	padding: var(--sp-1, 4px) var(--sp-2, 8px) var(--sp-3, 12px);
	gap: 1px;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
}

.settings-providers .group-label {
	padding: var(--sp-3, 12px) 10px var(--sp-1, 4px);
	font-family: var(--kai);
	font-size: var(--fs-xs, 11.5px);
	letter-spacing: 0.18em;
	color: var(--ink-3);
}

.settings-providers .group-label:empty {
	padding: 0;
}

.provider-row {
	position: relative;
	gap: var(--sp-2, 8px);
	padding: 9px 10px 9px 14px;
	border-radius: var(--r-2, 6px);
	border: 1px solid transparent;
	transition: background var(--brush, 200ms ease), border-color var(--brush, 200ms ease);
}

/* 行首一道状态墨线：内置是茶褐，自定义是朱砂，停用了退成飞白 */
.provider-row::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	bottom: 7px;
	width: 3px;
	border-radius: 0 2px 2px 0;
	background: var(--ink-4);
	opacity: 0.45;
	transition: opacity var(--brush, 200ms ease), background var(--brush, 200ms ease);
}

.provider-row.kind-builtin::before {
	background: var(--tea);
	opacity: 0.65;
}

.provider-row.kind-custom::before {
	background: var(--cinnabar);
	opacity: 0.85;
}

.provider-row.is-off::before {
	background: var(--ink-4);
	opacity: 0.16;
}

.provider-row.is-off .name,
.provider-row.is-off .badge {
	color: var(--ink-3);
}

.provider-row:hover {
	background: var(--hover);
	border-color: var(--rule-soft);
}

.provider-row:hover::before {
	opacity: 0.9;
}

/* 选中：纸面高光 + 朱砂细边，不拿一整块实心色把字压下去 */
.provider-row.is-on {
	background: linear-gradient(90deg, var(--paper-hi) 0%, var(--paper-hi) 62%, var(--cinnabar-glow) 100%);
	border-color: var(--cinnabar-edge);
	box-shadow: inset 0 1px 0 var(--paper-hi);
}

.provider-row.is-on::before {
	opacity: 1;
	box-shadow: 0 0 0 1px var(--cinnabar-faint);
}

.provider-row.is-on .name {
	color: var(--ink);
	font-weight: 600;
}

.provider-row .name {
	font-family: var(--serif);
	font-size: 13px;
	letter-spacing: 0.01em;
	color: var(--ink-2);
}

/* 状态点缩成一小粒墨，别再抢那道墨线 */
.provider-row .dot {
	width: 5px;
	height: 5px;
	background: var(--ink-4);
}

.provider-row .dot.on {
	background: var(--moss);
}

.provider-row .badge {
	font-size: var(--fs-xs, 11.5px);
	font-weight: 400;
	line-height: 1.5;
	padding: 1px 6px;
	border-radius: 2px;
	background: var(--hover);
	color: var(--ink-3);
}

.provider-row .badge.ok {
	color: var(--moss);
	background: var(--moss-wash);
}

.provider-row .badge.custom {
	color: var(--cinnabar);
	background: var(--cinnabar-wash);
}

.provider-row .badge.err-badge {
	color: var(--cinnabar);
	background: var(--cinnabar-faint);
}

.provider-row:focus-visible {
	outline: 2px solid var(--cinnabar);
	outline-offset: -1px;
}

.add-row {
	margin-top: var(--sp-1, 4px);
	border: 1px dashed var(--cinnabar-edge);
}

.add-row::before {
	background: var(--cinnabar);
	opacity: 0.5;
}

.add-row:hover {
	background: var(--cinnabar-tint);
	border-color: var(--cinnabar);
}

.add-row .name {
	font-family: var(--kai);
	color: var(--cinnabar);
}

.add-row .dot {
	background: transparent;
	border: 1px dashed var(--cinnabar);
}

/* ── 详情区：四层字号 ──────────────────────────────────────── */

.settings-detail {
	padding: var(--sp-5, 24px) var(--sp-5, 24px) var(--sp-6, 32px);
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
}

/* 一级：供应商名 */
.settings-detail h4 {
	margin: 0 0 var(--sp-1, 4px);
	font-family: var(--kai);
	font-size: var(--fs-lg, 18px);
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--ink);
	overflow-wrap: anywhere;
}

.settings-detail .sub {
	margin: 0 0 var(--sp-5, 22px);
	font-size: var(--fs-xs, 11.5px);
	line-height: 1.75;
	color: var(--ink-3);
	overflow-wrap: anywhere;
}

/* 二级：分组标题（模型区、凭据区…），右侧拖一条淡线把版面分开 */
.settings-detail h5.detail-h {
	display: flex;
	align-items: center;
	gap: var(--sp-2, 10px);
	margin: var(--sp-5, 26px) 0 var(--sp-2, 6px);
	font-family: var(--kai);
	/* 比字段标签大一号、比供应商名小一号：四级里它居中，靠字距认出来 */
	font-size: var(--fs-sm, 12.5px);
	font-weight: 600;
	letter-spacing: 0.2em;
	color: var(--ink-2);
}

.settings-detail h5.detail-h::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--rule-soft);
}

/* 三级：字段标签 */
.settings-detail .field > label,
.model-field-label,
.batch-title + * .field > label {
	font-size: var(--fs-xs, 11.5px);
	letter-spacing: 0.09em;
	color: var(--ink-3);
}

.settings-detail .field {
	margin-bottom: var(--sp-3, 14px);
}

.settings-detail .field input,
.settings-detail .field select {
	background: var(--paper-hi);
	border: 1px solid var(--rule);
	border-radius: var(--r-2, 4px);
}

.settings-detail .field input:focus,
.settings-detail .field select:focus {
	border-color: var(--cinnabar);
	background: var(--focus-paper);
}

/* 四级：提示文字 */
.settings-detail .hint,
.settings-detail .form-hint {
	font-size: var(--fs-xs, 11.5px);
	line-height: 1.75;
	color: var(--ink-3);
}

/* 字段里的提示还要再退一格：它属于某一行，不属于整段说明 */
.settings-detail .field .hint,
.model-note {
	color: var(--ink-3);
}

.settings-detail .field-row {
	gap: var(--sp-3, 14px);
}

/* ── 字段网格：标签定宽，控件有上限 ──────────────────────────
   详情栏能宽到七八百像素，控件跟着铺满就成了一条没边的长条：
   读着费劲，扫起来更费劲。标签占一列固定宽、控件另起一列，
   到 520 就收住 —— 一眼看过去是一列框，不是三段散纸。
   模型卡片里的字段另有骨架（.model-field 是竖排），不掺和进来。 */
.settings-detail .field:not(.model-field) {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	align-items: center;
	column-gap: var(--sp-3, 14px);
	row-gap: 3px;
	margin-bottom: var(--sp-3, 14px);
	max-width: 660px;
}

.settings-detail .field:not(.model-field) > label {
	margin-bottom: 0;
	line-height: 1.6;
}

/* 提示挂在控件下面那一列，别顶到标签列去 */
.settings-detail .field:not(.model-field) > .hint {
	grid-column: 2;
	margin-top: 0;
}

.settings-detail .field:not(.model-field) > input,
.settings-detail .field:not(.model-field) > select {
	width: 100%;
	max-width: 520px;
	min-height: 38px;
}

/* Base URL 是长地址，比别的框宽一档。
   选择器要带上同样的 :not(.model-field)，否则特异性比上面那条低，
   这条会被盖掉，宽档等于白写。 */
.settings-detail .field:not(.model-field).field--wide {
	max-width: 760px;
}

.settings-detail .field:not(.model-field).field--wide > input {
	max-width: 640px;
}

/* ── 细则折叠块 ──────────────────────────────────────────────
   纯背景解释收进 details：默认收起，标题只留"有几处要留意"，
   想细看的人点开，不必让说明一直占着版面。 */
.fold {
	margin: 0 0 var(--sp-3, 14px);
	max-width: 660px;
	border: 1px solid var(--rule-soft);
	border-radius: var(--r-2, 4px);
	background: var(--paper-hi);
}

.fold-head {
	padding: 8px 12px;
	font-size: var(--fs-xs, 11.5px);
	letter-spacing: 0.08em;
	color: var(--ink-3);
	cursor: pointer;
	list-style-position: inside;
}

.fold-head:hover {
	color: var(--ink-2);
}

.fold-body {
	padding: 2px 12px 10px;
	font-size: var(--fs-xs, 11.5px);
	line-height: 1.8;
	color: var(--ink-3);
}

.fold-body p {
	margin: 0 0 6px;
}

.fold-body p:last-child {
	margin-bottom: 0;
}

.settings-detail .actions {
	gap: var(--sp-2, 8px);
	margin: var(--sp-4, 18px) 0 var(--sp-1, 4px);
	padding-top: var(--sp-3, 12px);
	border-top: 1px solid var(--rule-soft);
}

.settings-detail .switch {
	font-size: var(--fs-sm, 12.5px);
	color: var(--ink-2);
}

/* 模型区这处空状态原本是一整条 746×89 的窄带，背后铺着 --mountains（远山，
   见 style.css「空状态：一痕远山」）。三个椭圆在这个比例下摊成一条横灰影，
   看着像纸被蹭脏 —— 与其糊着一团，不如让它干净：只留一句话。
   山影交还给窄栏里那些真用得上的空状态。底给方一些，字落在中间，不贴边。 */
.empty-hint {
	padding: var(--sp-6, 32px) var(--sp-4, 16px);
	font-family: var(--kai);
	font-size: var(--fs-sm, 13px);
	line-height: 2;
	color: var(--ink-3);
	min-height: 148px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: none;
}

/* 窄屏详情页的「← 返回」，宽屏两栏并排时它没有意义 */
.settings-back {
	display: none;
	align-items: center;
	gap: 4px;
	margin: -4px 0 var(--sp-3, 12px);
	padding: 0 10px 0 6px;
	min-height: 36px;
	font-family: var(--kai);
	letter-spacing: 0.04em;
}

/* ── 模型区的骨架 ────────────────────────────────────────────
   模型卡片这一整套版式只有本文件在管（style.css 里没有模型区的规则），
   所以「怎么摆」必须写全：只给 gap 不给 display，字段会全塌进一列，
   工具条上的按钮也会各占一行。骨架放在前，配色描边在后，谁覆盖谁一目了然。 */

.model-zone-head,
.model-toolbar,
.model-card-head,
.model-card-title,
.model-card-actions,
.level-chips,
.model-cost-row,
.model-think-line,
.model-pick,
.model-pick-all,
.model-reason-label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/* 标题吃掉剩下的宽度，徽标才不会把模型名挤成两行 */
.model-card-title {
	flex: 1 1 auto;
	min-width: 0;
}

/* 一段四个字段：宽屏两列，窄了自动退回一列（窄屏规则见文末） */
.model-card-body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.model-field {
	display: flex;
	flex-direction: column;
}

/* 输入框的固有宽度按 20 字符算，窄栏里会顶破格子 —— 让它随栏走 */
.model-field input,
.model-field select {
	min-width: 0;
	max-width: 100%;
}

.model-batch-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* —— 模型区外壳 —— */

.model-zone {
	margin-top: var(--sp-4, 18px);
	padding-top: var(--sp-3, 14px);
	border-top: 1px solid var(--rule-soft);
}

.model-zone-head {
	gap: var(--sp-2, 8px) var(--sp-4, 14px);
	margin-bottom: var(--sp-3, 12px);
}

.model-zone-head .detail-h {
	margin: 0;
	flex: none;
}

.model-search-wrap {
	flex: 1 1 220px;
	min-width: 0;
}

.model-search {
	width: 100%;
	border-radius: var(--r-2, 6px);
}

.model-stats {
	font-size: var(--fs-xs, 11.5px);
	color: var(--ink-3);
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

.model-note {
	font-size: var(--fs-xs, 11.5px);
	line-height: 1.8;
	color: var(--ink-3);
	margin: 0 0 var(--sp-3, 12px);
	padding-left: 10px;
	border-left: 2px solid var(--rule-soft);
}

/* ── 工具条 ────────────────────────────────────────────────── */

.model-toolbar {
	gap: var(--sp-2, 8px) var(--sp-3, 12px);
	margin-bottom: var(--sp-3, 12px);
	padding-bottom: var(--sp-2, 8px);
	border-bottom: 1px solid var(--rule-soft);
}

.model-pick-all {
	gap: 7px;
	font-size: var(--fs-sm, 12.5px);
	color: var(--ink-2);
}

.model-pick-all input {
	width: 16px;
	height: 16px;
	accent-color: var(--cinnabar);
}

.model-selected-count {
	font-size: var(--fs-xs, 11.5px);
	color: var(--ink-3);
	min-width: 56px;
	font-variant-numeric: tabular-nums;
}

/* ── 批量：一张宣纸浮层 ────────────────────────────────────── */

.model-batch-host:empty {
	display: none;
}

.model-batch-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	max-height: min(58vh, 520px);
	margin: 0 0 var(--sp-4, 16px);
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--rule);
	border-radius: var(--r-2, 6px);
	background: linear-gradient(180deg, var(--paper-hi), var(--paper) 62%);
	box-shadow: 0 10px 26px var(--lift), inset 0 1px 0 var(--paper-hi);
}

/* 四角界格：界栏纸的角线，只用八道极细的线拼出来 */
.model-batch-panel::after {
	content: "";
	position: absolute;
	inset: 4px;
	pointer-events: none;
	border-radius: var(--r-1, 3px);
	background-image: linear-gradient(var(--rule-strong), var(--rule-strong)),
		linear-gradient(var(--rule-strong), var(--rule-strong)),
		linear-gradient(var(--rule-strong), var(--rule-strong)),
		linear-gradient(var(--rule-strong), var(--rule-strong)),
		linear-gradient(var(--rule-strong), var(--rule-strong)),
		linear-gradient(var(--rule-strong), var(--rule-strong)),
		linear-gradient(var(--rule-strong), var(--rule-strong)),
		linear-gradient(var(--rule-strong), var(--rule-strong));
	background-repeat: no-repeat;
	background-size: 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px;
	background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
	opacity: 0.75;
}

/* 顶部一条题签，像给这叠纸写的签条 */
.batch-title {
	flex: none;
	margin: 0;
	padding: 9px var(--sp-4, 16px);
	border-bottom: 1px solid var(--rule-soft);
	background: var(--cinnabar-tint);
	font-family: var(--kai);
	font-size: var(--fs-sm, 12.5px);
	letter-spacing: 0.1em;
	color: var(--ink-2);
}

.batch-title::before {
	content: "签";
	display: inline-grid;
	place-items: center;
	width: 15px;
	height: 15px;
	margin-right: 7px;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0;
	background: var(--seal);
	color: var(--on-cinnabar);
	border-radius: 1px;
	vertical-align: 1px;
}

/* 只有这一段滚，按钮钉在浮层底边 */
.batch-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--sp-3, 14px) var(--sp-4, 16px);
}

.model-batch-form {
	gap: var(--sp-3, 12px) var(--sp-4, 14px);
}

.model-batch-form .model-field-wide {
	grid-column: 1 / -1;
}

.model-batch-panel .actions {
	flex: none;
	margin: 0;
	padding: var(--sp-2, 10px) var(--sp-4, 16px) calc(var(--sp-2, 10px) + 2px);
	border-top: 1px solid var(--rule-soft);
	background: var(--paper-lo);
}

/* ── 卡片行 ────────────────────────────────────────────────── */

.model-list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2, 10px);
}

.model-card {
	position: relative;
	padding: 11px 13px 9px;
	border: 1px solid var(--rule-soft);
	border-radius: var(--r-2, 6px);
	background: var(--paper-hi);
	transition: border-color var(--brush, 200ms ease), box-shadow var(--brush, 200ms ease);
}

.model-card:hover {
	border-color: var(--rule);
}

.model-card.is-default {
	border-color: var(--cinnabar-edge);
	box-shadow: inset 3px 0 0 var(--cinnabar);
}

/* 勾选待批量的卡片：一道朱边，批量会改到谁一目了然 */
.model-card.is-picked {
	border-color: var(--cinnabar);
	box-shadow: inset 0 0 0 1px var(--cinnabar-faint);
}

.model-card-head {
	gap: var(--sp-1, 6px) 9px;
	margin-bottom: var(--sp-2, 9px);
}

.model-card-title {
	gap: var(--sp-2, 8px);
}

.model-name {
	font-family: var(--kai);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ink);
	overflow-wrap: anywhere;
}

.model-id {
	font-family: var(--mono);
	font-size: var(--fs-xs, 11.5px);
	line-height: 1.6;
	color: var(--ink-3);
	background: var(--paper-sunk);
	border-radius: 2px;
	padding: 1px 6px;
	overflow-wrap: anywhere;
}

/* 待核对：一枚朱砂小印 */
.model-badge {
	font-size: var(--fs-xs, 11px);
	line-height: 1.6;
	padding: 1px 6px;
	border-radius: 2px;
	border: 1px solid var(--rule);
	color: var(--ink-3);
	font-weight: 400;
	letter-spacing: 0.04em;
}

.model-badge.is-warn {
	border-color: var(--seal);
	background: var(--seal);
	color: var(--on-cinnabar);
	box-shadow: inset 0 0 0 1px var(--seal-edge);
	letter-spacing: 0.08em;
}

.model-badge.is-ok {
	color: var(--moss);
	border-color: var(--moss-edge);
	background: var(--moss-soft);
}

.model-badge.is-off {
	color: var(--ink-3);
	border-color: var(--rule);
	border-style: dashed;
}

.model-card-body {
	gap: var(--sp-2, 10px) var(--sp-4, 14px);
	min-width: 0;
}

.model-card-body > * {
	min-width: 0;
}

.model-field {
	min-width: 0;
}

.model-field-label {
	margin-bottom: 5px;
}

/* 标签里的单位：飞白小字，跟数字分开读 */
.model-unit {
	margin-left: 5px;
	font-size: var(--fs-xs, 11.5px);
	color: var(--ink-3);
	letter-spacing: 0.02em;
}

.model-field-wide {
	grid-column: 1 / -1;
}

.model-value {
	font-size: var(--fs-sm, 12.5px);
	color: var(--ink-2);
	padding: 6px 0;
	overflow-wrap: anywhere;
}

.model-id-input {
	font-family: var(--mono);
	font-size: 12px;
	border: 1px solid var(--rule);
	background: var(--paper-sunk);
}

.model-num {
	font-family: var(--mono);
	font-size: var(--fs-sm, 12.5px);
	font-variant-numeric: tabular-nums;
	border: 1px solid var(--rule);
	background: var(--paper-sunk);
	color: var(--ink);
}

.model-num:focus,
.model-id-input:focus {
	border-color: var(--cinnabar);
	background: var(--focus-paper);
}

.model-num.is-placeholder {
	border-style: dashed;
	color: var(--ink-3);
	background: transparent;
}

.model-num.is-placeholder:focus {
	border-style: solid;
	color: var(--ink);
	background: var(--focus-paper);
}

.model-cost-row {
	gap: var(--sp-2, 8px) 10px;
}

.model-cost-num {
	flex: 1 1 90px;
	width: auto;
}

.model-think-line {
	gap: var(--sp-2, 8px) var(--sp-4, 14px);
}

.model-reason-label {
	gap: 7px;
	font-size: var(--fs-sm, 12.5px);
	color: var(--ink-2);
}

.model-reason {
	width: 16px;
	height: 16px;
	accent-color: var(--cinnabar);
}

/* 卡片里分组之间：淡线 + 留白，不再是一道实线压一道实线 */
.model-card-actions {
	gap: var(--sp-2, 8px);
	margin-top: var(--sp-3, 12px);
	padding-top: var(--sp-2, 9px);
	border-top: 1px solid var(--rule-soft);
}

/* ── 思考档位：七枚竹签，由浅入深 ──────────────────────────── */

.level-chips {
	gap: 7px;
}

.level-chip {
	--tick: 8px;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 9px 4px 8px;
	border: 1px solid var(--rule);
	border-radius: var(--r-1, 3px);
	background: linear-gradient(180deg, var(--paper-hi), var(--paper));
	color: var(--ink-3);
	font-size: var(--fs-sm, 12px);
	box-shadow: inset 0 1px 0 var(--paper-hi), 0 1px 0 var(--lift-2);
	transition: border-color var(--brush, 200ms ease), background var(--brush, 200ms ease),
		color var(--brush, 200ms ease);
}

/* 竹节刻痕：越往「尽思」越长，一眼看出递进 */
.level-chip::before {
	content: "";
	flex: none;
	width: 2px;
	height: var(--tick);
	border-radius: 1px;
	background: var(--rule-strong);
	opacity: 0.85;
}

/* 「关」只留一道极短的刻痕，让 4→14px 这一串从「几乎没有」开始长起来 */
.level-chip[data-level="off"] {
	--tick: 2px;
}

.level-chip[data-level="minimal"] {
	--tick: 4px;
}

.level-chip[data-level="low"] {
	--tick: 6px;
}

.level-chip[data-level="medium"] {
	--tick: 8px;
}

.level-chip[data-level="high"] {
	--tick: 10px;
}

.level-chip[data-level="xhigh"] {
	--tick: 12px;
}

.level-chip[data-level="max"] {
	--tick: 14px;
}

.level-chip[data-level="max"]::before,
.level-chip[data-level="xhigh"]::before {
	background: var(--cinnabar);
	opacity: 0.6;
}

.level-chip:hover {
	border-color: var(--rule-strong);
	background: var(--paper-hi);
	color: var(--ink-2);
}

.level-chip:focus-within {
	border-color: var(--cinnabar);
}

.level-chip input {
	width: 14px;
	height: 14px;
	accent-color: var(--cinnabar);
}

.level-chip .level-text {
	font-family: var(--kai);
	letter-spacing: 0.06em;
}

.level-chip .level-code {
	font-family: var(--mono);
	font-size: var(--fs-xs, 11px);
	color: var(--ink-3);
	letter-spacing: 0;
}

/* 选中：朱砂描边 + 朱印底纹（斜纹像印泥吃进纸里） */
.level-chip.is-on {
	border-color: var(--cinnabar);
	color: var(--ink);
	background-image: repeating-linear-gradient(
			45deg,
			var(--cinnabar-tint) 0 3px,
			transparent 3px 8px
		),
		linear-gradient(180deg, var(--paper-hi), var(--paper));
	box-shadow: inset 0 0 0 1px var(--cinnabar-faint), inset 0 1px 0 var(--paper-hi);
}

.level-chip.is-on::before {
	background: var(--cinnabar);
	opacity: 1;
}

.level-chip.is-on .level-code {
	color: var(--cinnabar);
}

.level-chip.is-locked {
	border-style: dashed;
	background: var(--paper-lo);
	color: var(--ink-3);
	box-shadow: none;
}

.level-chip.is-locked::before {
	background: var(--ink-4);
	opacity: 0.4;
	height: 4px;
}

.level-chip.is-locked:hover {
	border-color: var(--rule);
	color: var(--ink-3);
	background: var(--paper-lo);
}

.level-note {
	font-size: var(--fs-xs, 11.5px);
	color: var(--ink-3);
	line-height: 1.7;
}

/* ── 提示条 ────────────────────────────────────────────────── */

.notice {
	padding: 9px 12px;
	border: 1px solid var(--rule-soft);
	border-left-width: 3px;
	border-radius: 0 var(--r-2, 4px) var(--r-2, 4px) 0;
	background: var(--lift-2);
	color: var(--ink-2);
	font-size: var(--fs-sm, 12px);
	line-height: 1.75;
}

.notice.ok {
	border-color: var(--moss-edge);
	border-left-color: var(--moss);
	background: var(--moss-soft);
	color: var(--moss);
}

.notice.err {
	border-color: var(--cinnabar-edge);
	border-left-color: var(--cinnabar);
	background: var(--cinnabar-soft);
	color: var(--cinnabar);
}

/* ══════════════════════════════════════════════════════════════
   窄屏：平板竖持（≤900px）
   供应商栏不能整个藏掉 —— 藏了就换不了供应商，模型区也就走不到。
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
	.settings-body {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
		overflow: hidden;
	}

	.settings-body .providers-rail {
		display: flex;
		max-height: 152px;
		border-right: 0;
		border-bottom: 1px solid var(--rule-soft);
	}

	.search-wrap {
		padding: 10px 12px 2px;
	}

	.model-card-body,
	.model-batch-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.model-zone-head {
		align-items: stretch;
		flex-direction: column;
		gap: var(--sp-2, 8px);
	}

	.model-stats {
		white-space: normal;
	}

	.settings-detail {
		padding: var(--sp-4, 16px) var(--sp-3, 14px) calc(var(--sp-6, 32px) + var(--safe-b, 0px));
	}

	.settings-defaults {
		padding: var(--sp-3, 12px) var(--sp-4, 14px);
		gap: var(--sp-2, 12px) var(--sp-4, 16px);
	}

	.settings-defaults select {
		max-width: none;
		min-width: 0;
		flex: 1 1 auto;
	}

	.model-toolbar .btn,
	.model-card-actions .btn {
		flex: 1 1 auto;
	}

	.default-cost {
		gap: 0 2px;
	}
}

/* ══════════════════════════════════════════════════════════════
   手机（≤640px）：对话框全屏，列表与详情分作两页
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
	.settings-dialog {
		width: 100vw;
		max-width: 100vw;
		height: 100vh;
		height: 100dvh;
		max-height: 100vh;
		max-height: 100dvh;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: var(--paper);
	}

	/* 题签避开刘海与状态栏 */
	.settings-dialog .settings-head {
		padding: calc(var(--safe-t, 0px) + 12px) var(--sp-4, 16px) var(--sp-2, 10px);
		gap: var(--sp-2, 10px);
	}

	.settings-dialog .settings-head h3 {
		font-size: var(--fs-lg, 18px);
		letter-spacing: 0.16em;
		gap: var(--sp-2, 8px);
	}

	.settings-dialog .settings-head h3::before {
		width: 20px;
		height: 20px;
		font-size: 12px;
	}

	.settings-dialog .settings-head p {
		max-width: none;
		font-size: var(--fs-xs, 11.5px);
		line-height: 1.65;
	}

	/* 关闭键要够大，拇指才点得准 */
	.settings-dialog .settings-head .btn {
		min-height: var(--tap-lg, 48px);
		min-width: var(--tap-lg, 48px);
		padding: 0 12px;
	}

	.settings-dialog .settings-defaults {
		flex-direction: column;
		align-items: stretch;
		gap: var(--sp-2, 8px);
		padding: var(--sp-2, 10px) var(--sp-4, 14px) var(--sp-3, 12px);
	}

	.settings-dialog .settings-defaults label {
		flex-wrap: wrap;
		gap: var(--sp-1, 6px);
	}

	.settings-dialog .settings-defaults select {
		width: 100%;
		min-width: 0;
		font-size: 16px;
		min-height: var(--tap-lg, 48px);
	}

	.default-search-input,
	.provider-search,
	.model-search,
	.model-num,
	.model-id-input {
		/* 安卓/iOS 上小于 16px 的输入框一聚焦就放大整页，视线全跑掉 */
		font-size: 16px;
		min-height: var(--tap-lg, 48px);
	}

	/* 手机上一列放不下标签 + 控件：改成标签在上、控件在下 */
	.settings-detail .field:not(.model-field) {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 4px;
		max-width: none;
	}

	.settings-detail .field:not(.model-field) > .hint {
		grid-column: 1;
	}

	.settings-detail .field:not(.model-field) > input,
	.settings-detail .field:not(.model-field) > select {
		max-width: none;
		min-height: var(--tap-lg, 48px);
		font-size: 16px;
	}

	.settings-detail .field:not(.model-field).field--wide {
		max-width: none;
	}

	.settings-detail .field:not(.model-field).field--wide > input {
		max-width: none;
	}

	.fold {
		max-width: none;
	}

	.default-extra {
		flex: 1 1 auto;
	}

	/* —— 两页 ——
	   用 .settings-dialog 前缀压过 style.css 里 `.sheet-wide .settings-body`
	   的 overflow-y:auto：整页滚会让「返回」跟着滚走，滚动必须交给列表/详情
	   各自那一层。 */
	.settings-dialog .settings-body {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr);
		overflow: hidden;
		padding-bottom: var(--safe-b, 0px);
	}

	.settings-body .providers-rail {
		display: flex;
		height: 100%;
		max-height: none;
		border-bottom: 0;
	}

	.settings-body .settings-detail {
		display: none;
		height: 100%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* 点了某一家：列表让位，详情上场 */
	.settings-dialog.is-pane-detail .settings-body .providers-rail {
		display: none;
	}

	.settings-dialog.is-pane-detail .settings-body .settings-detail {
		display: block;
	}

	/* 返回键钉在详情顶上，滚到哪儿都找得到 */
	.settings-back {
		display: inline-flex;
		position: sticky;
		top: calc(var(--sp-1, 4px) * -1);
		z-index: 3;
		margin-left: -4px;
		background: var(--paper);
		box-shadow: 0 4px 10px var(--lift-2);
		min-height: var(--tap-lg, 48px);
		padding-right: 14px;
	}

	.settings-providers {
		padding: var(--sp-1, 4px) var(--sp-2, 8px) calc(var(--sp-4, 16px) + var(--safe-b, 0px));
	}

	/* 触控：行高、间距都按手指来 */
	.provider-row {
		min-height: var(--tap-lg, 48px);
		padding: 10px 10px 10px 14px;
	}

	.settings-providers {
		gap: var(--sp-1, 4px);
	}

	.settings-providers .group-label {
		padding: var(--sp-3, 12px) 10px var(--sp-1, 4px);
	}

	.provider-row .badge {
		font-size: var(--fs-xs, 11.5px);
	}

	.settings-detail h4 {
		font-size: var(--fs-lg, 17px);
	}

	.settings-detail .actions {
		gap: var(--sp-2, 8px);
	}

	.settings-detail .actions .btn {
		min-height: var(--tap-lg, 48px);
		padding: 0 14px;
	}

	.model-toolbar .btn,
	.model-card-actions .btn,
	.model-batch-panel .btn {
		min-height: var(--tap-lg, 48px);
		padding: 0 14px;
	}

	.level-chip {
		min-height: var(--tap-lg, 48px);
		padding: 0 12px 0 10px;
		gap: 7px;
		font-size: var(--fs-sm, 13px);
	}

	.level-chip input {
		width: 18px;
		height: 18px;
	}

	.model-check,
	.model-reason {
		width: 20px;
		height: 20px;
	}

	.model-pick,
	.model-reason-label {
		min-height: var(--tap-lg, 48px);
	}

	.model-batch-panel {
		max-height: min(72vh, 620px);
	}

	.batch-title {
		padding: 10px var(--sp-3, 14px);
	}

	.batch-body {
		padding: var(--sp-3, 12px) var(--sp-3, 14px);
	}

	.model-batch-panel .actions {
		padding: var(--sp-2, 10px) var(--sp-3, 14px) calc(var(--sp-2, 10px) + var(--safe-b, 0px));
	}

	/* 两页切换时不要横向晃 */
	.settings-body,
	.settings-detail,
	.providers-rail {
		max-width: 100%;
		overflow-x: hidden;
	}
}

/* ── 触控设备：宁可大一号 ──────────────────────────────────── */

@media (pointer: coarse) and (min-width: 641px) {
	.model-toolbar .btn,
	.model-card-actions .btn,
	.model-batch-panel .btn {
		min-height: var(--tap-lg, 44px);
		padding: 8px 14px;
	}

	.level-chip {
		min-height: var(--tap-lg, 44px);
		padding: 6px 12px;
	}

	.model-check,
	.model-reason {
		width: 20px;
		height: 20px;
	}

	.model-pick,
	.model-reason-label {
		min-height: var(--tap-lg, 44px);
	}

	.provider-row {
		min-height: 44px;
	}
}

/* ── 滚动：列表很长，滚到底不要带着整页动 ───────────────────── */

.settings-providers,
.settings-detail,
.batch-body {
	scrollbar-width: thin;
	scrollbar-color: var(--ink-4) transparent;
	-webkit-overflow-scrolling: touch;
}

.settings-providers::-webkit-scrollbar,
.settings-detail::-webkit-scrollbar,
.batch-body::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.settings-providers::-webkit-scrollbar-track,
.settings-detail::-webkit-scrollbar-track,
.batch-body::-webkit-scrollbar-track {
	background: transparent;
}

.settings-providers::-webkit-scrollbar-thumb,
.settings-detail::-webkit-scrollbar-thumb,
.batch-body::-webkit-scrollbar-thumb {
	background: var(--rule-strong);
	border-radius: 4px;
	border: 2px solid transparent;
	background-clip: content-box;
}

.settings-providers::-webkit-scrollbar-thumb:hover,
.settings-detail::-webkit-scrollbar-thumb:hover,
.batch-body::-webkit-scrollbar-thumb:hover {
	background: var(--ink-4);
	background-clip: content-box;
}

/* 键盘走到的每一处都得看得见 */
.settings-dialog :focus-visible {
	outline: 2px solid var(--cinnabar);
	outline-offset: 2px;
	border-radius: 3px;
}

.settings-dialog .level-chip:focus-visible {
	outline: none;
}

/* ── 窄容器兜底：任何卡片都不许横向撑破 ───────────────────── */

@media (max-width: 460px) {
	.model-card-body,
	.model-batch-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.model-card-head {
		gap: 6px 7px;
	}

	.model-cost-row {
		flex-direction: column;
		align-items: stretch;
	}

	.settings-detail {
		padding-left: var(--sp-3, 12px);
		padding-right: var(--sp-3, 12px);
	}
}

/* ── 设置总览：模型与联网资料分区，参数按需展开 ─────────────── */
.settings-dialog { max-width: 1180px; }
/* 打开时把焦点交给标题，是为读屏交代上下文；标题不是可操作控件，不画焦点框。 */
.settings-dialog .settings-head h3:focus { outline: none; }
.settings-nav { display: flex; align-items: center; gap: 4px; padding: 0 var(--sp-5, 24px); border-bottom: 1px solid var(--rule-soft); background: var(--paper); }
.settings-tab { min-height: 46px; padding: 0 15px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-3); font: 500 13px var(--sans); cursor: pointer; }
.settings-tab:hover { color: var(--ink); background: var(--hover); }
.settings-tab.is-on { color: var(--ink); border-bottom-color: var(--cinnabar); }
.settings-nav-dot { margin-left: 6px; font-size: 10px; color: var(--ink-3); }
.settings-nav-dot.is-ok { color: var(--moss); }
.settings-nav-dot.is-warn { color: var(--cinnabar); }
.settings-save-status { margin-left: auto; max-width: 45%; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
.settings-save-status.is-ok { color: var(--moss); }
.settings-save-status.is-err { color: var(--cinnabar); }
#settings-models-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#settings-models-panel[hidden], #settings-web-panel[hidden] { display: none; }
.settings-defaults { display: grid; grid-template-columns: minmax(190px, .34fr) minmax(0, 1fr); align-items: start; }
.defaults-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 7px 22px; min-width: 0; }
.defaults-fields > label { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.defaults-fields > label > span { margin-bottom: 5px; font-size: 10.5px; letter-spacing: .12em; }
.defaults-fields select { min-width: 0; max-width: none; width: 100%; }
.defaults-caption { display: flex; flex-direction: column; gap: 4px; padding: 18px 0 0; }
.defaults-caption > span { font: 600 14px var(--kai); color: var(--ink); letter-spacing: .08em; }
.defaults-caption small { color: var(--ink-3); font-size: 11px; line-height: 1.6; }
.default-extra { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 18px; }
.default-extra .default-hint, .default-extra .default-cost { margin: 0; font-size: 11px; }
.default-filter { grid-column: 1 / -1; color: var(--ink-3); font-size: 11px; }
.default-filter > summary { padding: 5px 0; cursor: pointer; }
.default-filter > summary:hover { color: var(--ink); }
.default-filter .default-search-input { width: min(100%, 360px); min-height: 36px; margin-top: 6px; padding: 6px 9px; background: var(--paper-hi); border: 1px solid var(--rule); color: var(--ink); }
.providers-rail-title { display: flex; align-items: baseline; justify-content: space-between; padding: 17px 20px 4px; font: 600 13px var(--kai); color: var(--ink-2); }
.providers-rail-title small { font: 10.5px var(--sans); color: var(--ink-3); }
.provider-row .dot.on { box-shadow: 0 0 0 3px var(--moss-wash); }
.model-card-summary { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0 12px 10px; font-size: 11px; color: var(--ink-3); }
.model-card-summary span + span::before { content: "·"; margin-right: 18px; color: var(--ink-4); }
.model-card-details > summary { margin: 0 12px; padding: 9px 0; border-top: 1px solid var(--rule-soft); color: var(--ink-3); font-size: 11.5px; cursor: pointer; }
.model-card-details > summary:hover { color: var(--ink); }
.model-card-details[open] > summary { color: var(--ink-2); }
.model-card-details .model-card-body { border-top: 0; }
.settings-web-panel { flex: 1; min-height: 0; overflow-y: auto; padding: 32px clamp(22px, 5vw, 72px) 48px; overscroll-behavior: contain; }
.web-intro { position: relative; max-width: 760px; padding-bottom: 24px; border-bottom: 1px solid var(--rule-soft); }
.settings-eyebrow { display: block; margin-bottom: 8px; font: 10px var(--mono); letter-spacing: .12em; color: var(--cinnabar); }
.web-intro h4 { margin: 0 0 9px; font: 600 25px var(--kai); letter-spacing: .08em; color: var(--ink); }
.web-intro p { max-width: 590px; margin: 0; font-size: 12.5px; line-height: 1.9; color: var(--ink-3); }
.web-state { position: absolute; right: 0; top: 2px; padding: 3px 8px; border: 1px solid var(--rule); color: var(--ink-3); font-size: 11px; }
.web-state.is-on { color: var(--moss); border-color: var(--moss); background: var(--moss-wash); }
.web-enable { display: flex; align-items: flex-start; gap: 12px; max-width: 760px; padding: 22px 0; cursor: pointer; }
.web-enable input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--cinnabar); }
.web-enable strong, .web-enable small { display: block; }
.web-enable strong { font-size: 14px; color: var(--ink); }
.web-enable small { margin-top: 5px; font-size: 11.5px; line-height: 1.7; color: var(--ink-3); }
.web-section { max-width: 760px; padding: 20px 0; border-top: 1px solid var(--rule-soft); }
.web-section h5 { margin: 0; font: 600 13px var(--kai); letter-spacing: .08em; color: var(--ink-2); }
.settings-section-note { margin: 6px 0 18px; font-size: 11.5px; line-height: 1.8; color: var(--ink-3); }
.web-section .field { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 4px 16px; margin: 12px 0; }
.web-section .field > label { font-size: 12px; color: var(--ink-2); }
.web-section .field > .hint { grid-column: 2; font-size: 11px; color: var(--ink-3); }
.web-section select, .web-section input[type=password], .web-section input[type=text] { min-height: 40px; width: 100%; background: var(--paper-hi); border: 1px solid var(--rule); color: var(--ink); }
.key-input-row { display: flex; align-items: stretch; gap: 6px; }
.key-input-row input { flex: 1; min-width: 0; font-family: var(--mono); }
.web-key-line { display: flex; align-items: stretch; gap: 6px; }
.web-key-line input { min-width: 0; font-family: var(--mono); }
.web-content-switch { display: flex; align-items: center; gap: 9px; margin: 16px 0 0 146px; font-size: 12px; line-height: 1.7; color: var(--ink-2); }
.web-content-switch input { flex: none; }
.web-billing { max-width: 760px; margin-top: 14px; padding: 16px 18px; border-left: 2px solid var(--tea); background: var(--paper-lo); }
.web-billing strong { font: 600 12px var(--kai); letter-spacing: .08em; color: var(--ink-2); }
.web-billing p { margin: 7px 0 10px; font-size: 11px; line-height: 1.8; color: var(--ink-3); }
.web-billing a { color: var(--cinnabar); font-size: 11.5px; text-underline-offset: 3px; }
@media (max-width: 760px) {
	.settings-nav { padding: 0 14px; }
	.settings-tab { padding: 0 9px; }
	.settings-save-status { max-width: 35%; font-size: 10.5px; }
	.settings-defaults { grid-template-columns: 1fr; padding: 14px; gap: 10px; }
	.defaults-caption { grid-column: auto; padding-top: 0; }
	.defaults-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.default-extra { grid-template-columns: 1fr; }
	.default-search { grid-row: auto; }
	.settings-web-panel { padding: 24px 18px 36px; }
	.web-section .field { grid-template-columns: 1fr; }
	.web-section .field > .hint { grid-column: 1; }
	.web-content-switch { margin-left: 0; }
}
@media (max-width: 460px) {
	.settings-save-status { position: absolute; top: 15px; left: 16px; right: 76px; max-width: none; }
	.settings-head { padding-top: 38px !important; }
	.settings-tab { font-size: 12px; }
	.settings-defaults { grid-template-columns: 1fr; }
	.defaults-fields { grid-template-columns: 1fr; }
	.defaults-caption { grid-column: auto; }
	.web-intro h4 { font-size: 22px; }
	.web-state { position: static; display: inline-block; margin-top: 12px; }
}