/*
 * 全站的颜色、表面层次、圆角、强调色。颜色变量只在这里定义一份，别的 CSS 只用 var()，页面里不要再写颜色值。
 * 这个文件最后加载，后半段是全站共用的控件规则（侧边栏、圆角、字重），不放某一页的东西。
 *
 * 原则（用户看过压低饱和度的一版，觉得没精神，所以回到苹果系统色）：
 * - 颜色用苹果系统色的无障碍色值，清爽、有精神。状态色含义不变：进行中蓝、测试中紫、待验收橙、已阻塞红、已完成绿。
 * - 侧边栏学 Mac 的邮件：图标用强调色，选中是灰底，待办数字是红角标。
 * - 三层表面：页面底色（苹果的分组背景）、白卡片、浅侧边栏。卡片有很轻的影子。
 * - 深色用苹果的纯黑底：越靠近人的表面越亮。
 * - 文字对比度不低于 4.5:1，test/theme.test.js 直接读这个文件逐对算，改了颜色要跑一遍。
 */

/* ---------- 强调色：每个颜色都写好浅色（-l）和深色（-d）两套，白字压在填充色上都够 4.5:1 ---------- */
:root, [data-accent="blue"] {
  --a-swatch: #007AFF;
  --a-fill-l: #0071E3; --a-press-l: #0062C9; --a-text-l: #0058BD; --a-soft-l: rgba(0, 122, 255, .12); --a-focus-l: rgba(0, 122, 255, .4);
  --a-fill-d: #0A6FE0; --a-press-d: #0A62C8; --a-text-d: #64ACFF; --a-soft-d: rgba(10, 132, 255, .28); --a-focus-d: rgba(100, 172, 255, .55);
}
[data-accent="indigo"] {
  --a-swatch: #5856D6;
  --a-fill-l: #5552CE; --a-press-l: #4A47BE; --a-text-l: #4643B5; --a-soft-l: rgba(85, 82, 206, .12); --a-focus-l: rgba(85, 82, 206, .4);
  --a-fill-d: #5F5DD8; --a-press-d: #5451C8; --a-text-d: #ADABFF; --a-soft-d: rgba(95, 93, 216, .34); --a-focus-d: rgba(173, 171, 255, .55);
}
[data-accent="purple"] {
  --a-swatch: #AF52DE;
  --a-fill-l: #8F45BF; --a-press-l: #813BAF; --a-text-l: #7B37A8; --a-soft-l: rgba(143, 69, 191, .12); --a-focus-l: rgba(143, 69, 191, .4);
  --a-fill-d: #9047C0; --a-press-d: #813CAF; --a-text-d: #D49BF5; --a-soft-d: rgba(144, 71, 192, .34); --a-focus-d: rgba(212, 155, 245, .55);
}
[data-accent="green"] {
  --a-swatch: #34C759;
  --a-fill-l: #1E7F3C; --a-press-l: #1A7135; --a-text-l: #176B31; --a-soft-l: rgba(30, 127, 60, .12); --a-focus-l: rgba(30, 127, 60, .4);
  --a-fill-d: #1F7F3F; --a-press-d: #1B7238; --a-text-d: #6FD48F; --a-soft-d: rgba(31, 127, 63, .34); --a-focus-d: rgba(111, 212, 143, .55);
}
[data-accent="orange"] {
  --a-swatch: #FF9500;
  --a-fill-l: #B95500; --a-press-l: #A84C00; --a-text-l: #9A4600; --a-soft-l: rgba(185, 85, 0, .12); --a-focus-l: rgba(185, 85, 0, .4);
  --a-fill-d: #B55500; --a-press-d: #A44C00; --a-text-d: #F5A95C; --a-soft-d: rgba(181, 85, 0, .34); --a-focus-d: rgba(245, 169, 92, .55);
}
[data-accent="graphite"] {
  --a-swatch: #8E8E93;
  --a-fill-l: #5E5E63; --a-press-l: #525257; --a-text-l: #4C4C50; --a-soft-l: rgba(94, 94, 99, .14); --a-focus-l: rgba(94, 94, 99, .4);
  --a-fill-d: #636368; --a-press-d: #57575C; --a-text-d: #D1D1D6; --a-soft-d: rgba(142, 142, 147, .3); --a-focus-d: rgba(209, 209, 214, .55);
}

/* ---------- 浅色 ---------- */
:root {
  --r-control: 8px; --r-card: 12px; --r-pop: 14px;

  /* 三层表面：苹果的分组背景、纯白卡片、比底色更浅的侧边栏。弹层和卡片同色，靠影子浮起来 */
  --bg: #F2F2F7;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --sidebar: #F9F9FB;
  --modal-bg: #F2F2F7;
  --material: rgba(249, 249, 251, .86);

  /* 控件底色 */
  --fill: rgba(118, 118, 128, .12);
  --fill-strong: rgba(118, 118, 128, .2);
  --fill-soft: rgba(118, 118, 128, .06);
  --sep: rgba(60, 60, 67, .13);

  /* 文字 */
  --label: #1D1D1F;
  --label-2: #55555B;
  --label-3: #68686E;

  /* 强调色 */
  --accent: var(--a-fill-l);
  --accent-press: var(--a-press-l);
  --accent-text: var(--a-text-l);
  --accent-soft: var(--a-soft-l);
  --focus: var(--a-focus-l);

  /* 状态色：苹果系统色的无障碍色值，-soft 是同色的浅底 */
  --blue: #004CC7;    --blue-soft: rgba(0, 122, 255, .15);
  --green: #146A2B;   --green-soft: rgba(52, 199, 89, .2);
  --red: #BD0012;     --red-soft: rgba(255, 59, 48, .14);
  --orange: #A53400;  --orange-soft: rgba(255, 149, 0, .2);
  --purple: #7A349F;  --purple-soft: rgba(175, 82, 222, .16);
  --teal: #006A78;    --teal-soft: rgba(48, 176, 199, .18);
  --indigo: #3634A3;  --indigo-soft: rgba(88, 86, 214, .15);
  --yellow: #805300;  --yellow-soft: rgba(255, 204, 0, .26);
  --pink: #B90C3B;    --pink-soft: rgba(255, 45, 85, .13);
  --brown: #72552F;   --brown-soft: rgba(162, 132, 94, .2);
  --graphite: #3A3A3C; --graphite-soft: rgba(60, 60, 67, .1);

  /* 白字压在上面的红：通知角标、出错提示 */
  --danger-fill: #D70015;

  /* 图表：填充色，比文字色亮，和状态含义一致 */
  --viz-done: #2FA84F; --viz-accepting: #F5A623; --viz-testing: #9B5DD6; --viz-blocked: #E5484D; --viz-doing: #1F7FEB;
  --viz-pending: rgba(118, 118, 128, .28); --viz-1: #1F7FEB; --viz-2: #E8891C;

  /* 卡片有很轻的影子，浮起来的东西影子重一些 */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .05), 0 0 0 .5px rgba(0, 0, 0, .05);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .05);
  --shadow-thumb: 0 1px 3px rgba(0, 0, 0, .14);
  --thumb: #FFFFFF;
  --card-edge: 0 1px 2px rgba(0, 0, 0, .05);
  --card-edge-hover: 0 1px 4px rgba(0, 0, 0, .1);
}

/* ---------- 深色：跟随系统 ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --surface: #1C1C1E;
    --surface-raised: #2C2C2E;
    --sidebar: #141416;
    --modal-bg: #141416;
    --material: rgba(28, 28, 30, .86);
    --fill: rgba(120, 120, 128, .24);
    --fill-strong: rgba(120, 120, 128, .36);
    --fill-soft: rgba(120, 120, 128, .12);
    --sep: rgba(84, 84, 88, .55);
    --label: #F5F5F7;
    --label-2: #C7C7CC;
    --label-3: #A1A1A6;
    --accent: var(--a-fill-d);
    --accent-press: var(--a-press-d);
    --accent-text: var(--a-text-d);
    --accent-soft: var(--a-soft-d);
    --focus: var(--a-focus-d);
    --blue: #64ACFF;    --blue-soft: rgba(10, 132, 255, .24);
    --green: #4CD97B;   --green-soft: rgba(48, 209, 88, .18);
    --red: #FF8A84;     --red-soft: rgba(255, 69, 58, .22);
    --orange: #FFB340;  --orange-soft: rgba(255, 159, 10, .2);
    --purple: #DA8FFF;  --purple-soft: rgba(191, 90, 242, .22);
    --teal: #5DE6FF;    --teal-soft: rgba(100, 210, 255, .16);
    --indigo: #A5A3FF;  --indigo-soft: rgba(94, 92, 230, .3);
    --yellow: #FFD426;  --yellow-soft: rgba(255, 214, 10, .16);
    --pink: #FF8FA6;    --pink-soft: rgba(255, 55, 95, .2);
    --brown: #D3B28A;   --brown-soft: rgba(172, 142, 104, .24);
    --graphite: #E5E5EA; --graphite-soft: rgba(235, 235, 245, .13);
    --danger-fill: #D70015;
    --viz-done: #30D158; --viz-accepting: #FFB340; --viz-testing: #BF7DF2; --viz-blocked: #FF6961; --viz-doing: #409CFF;
    --viz-pending: rgba(120, 120, 128, .45); --viz-1: #409CFF; --viz-2: #FF9F0A;
    --shadow-card: 0 0 0 .5px rgba(255, 255, 255, .08);
    --shadow-float: 0 16px 48px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .07);
    --shadow-thumb: 0 1px 3px rgba(0, 0, 0, .4);
    --thumb: #5A5A60;
    --card-edge: inset 0 0 0 1px var(--sep);
    --card-edge-hover: inset 0 0 0 1px var(--label-3);
  }
}

/* ---------- 深色：手动选的。和上面那块一模一样，少不了：CSS 不能让媒体查询和属性选择器共用一块 ---------- */
:root[data-theme="dark"] {
  --bg: #000000;
  --surface: #1C1C1E;
  --surface-raised: #2C2C2E;
  --sidebar: #141416;
  --modal-bg: #141416;
  --material: rgba(28, 28, 30, .86);
  --fill: rgba(120, 120, 128, .24);
  --fill-strong: rgba(120, 120, 128, .36);
  --fill-soft: rgba(120, 120, 128, .12);
  --sep: rgba(84, 84, 88, .55);
  --label: #F5F5F7;
  --label-2: #C7C7CC;
  --label-3: #A1A1A6;
  --accent: var(--a-fill-d);
  --accent-press: var(--a-press-d);
  --accent-text: var(--a-text-d);
  --accent-soft: var(--a-soft-d);
  --focus: var(--a-focus-d);
  --blue: #64ACFF;    --blue-soft: rgba(10, 132, 255, .24);
  --green: #4CD97B;   --green-soft: rgba(48, 209, 88, .18);
  --red: #FF8A84;     --red-soft: rgba(255, 69, 58, .22);
  --orange: #FFB340;  --orange-soft: rgba(255, 159, 10, .2);
  --purple: #DA8FFF;  --purple-soft: rgba(191, 90, 242, .22);
  --teal: #5DE6FF;    --teal-soft: rgba(100, 210, 255, .16);
  --indigo: #A5A3FF;  --indigo-soft: rgba(94, 92, 230, .3);
  --yellow: #FFD426;  --yellow-soft: rgba(255, 214, 10, .16);
  --pink: #FF8FA6;    --pink-soft: rgba(255, 55, 95, .2);
  --brown: #D3B28A;   --brown-soft: rgba(172, 142, 104, .24);
  --graphite: #E5E5EA; --graphite-soft: rgba(235, 235, 245, .13);
  --danger-fill: #D70015;
  --viz-done: #30D158; --viz-accepting: #FFB340; --viz-testing: #BF7DF2; --viz-blocked: #FF6961; --viz-doing: #409CFF;
  --viz-pending: rgba(120, 120, 128, .45); --viz-1: #409CFF; --viz-2: #FF9F0A;
  --shadow-card: 0 0 0 .5px rgba(255, 255, 255, .08);
  --shadow-float: 0 16px 48px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .07);
  --shadow-thumb: 0 1px 3px rgba(0, 0, 0, .4);
  --thumb: #5A5A60;
  --card-edge: inset 0 0 0 1px var(--sep);
  --card-edge-hover: inset 0 0 0 1px var(--label-3);
}

/* ---------- 侧边栏：学 Mac 的系统设置。每个入口一个彩色方块，选中是强调色整行，待办数字是红角标 ---------- */
.tile-blue { --tile: #0A7AFF; }
.tile-indigo { --tile: #5856D6; }
.tile-teal { --tile: #0A9BB0; }
.tile-green { --tile: #2CA84E; }
.tile-orange { --tile: #F07A0A; }
.tile-red { --tile: #F2382E; }
.tile-pink { --tile: #F22B5B; }
.tile-purple { --tile: #AF52DE; }
.tile-yellow { --tile: #E8A200; }
.tile-brown { --tile: #A2845E; }
.tile-gray { --tile: #8E8E93; }
.nav-tile { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--tile, #8E8E93); color: #fff; }
.nav-tile svg, .nav-link .nav-tile svg, .settings-link .nav-tile svg { display: block; width: 15px; height: 15px; color: #fff; }
.nav-mini-link .nav-tile { width: 22px; height: 22px; }
.nav { background: var(--sidebar); -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav-link { color: var(--label); }
.nav-mini-link { color: var(--label); }
.nav-link:hover, .nav-mini-link:hover { background: var(--fill); }
.nav-link[aria-current="page"], .nav-mini-link[aria-current="page"] { background: var(--accent); color: #fff; box-shadow: none; }
.nav-link[aria-current="page"]:hover, .nav-mini-link[aria-current="page"]:hover { background: var(--accent-press); }
.nav-link[aria-current="page"] { font-weight: 500; }
.nav-link[aria-current="page"] .nav-tile, .nav-mini-link[aria-current="page"] .nav-tile { box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); }
.nav-link[aria-current="page"] .nav-badge { background: #fff; color: var(--accent-text); }

/* 设置的分类和手机的“更多”：和侧边栏一样的彩色方块 */
.settings-name { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.settings-link { min-height: 38px; }
.more-link > .nav-tile { width: 30px; height: 30px; border-radius: 7px; }
.more-link > .nav-tile svg { width: 18px; height: 18px; }

/* 分组标题用正文色，不再是一片灰；“我的”每组一个颜色，和顶部四个统计对得上 */
.section-title strong, .fold-toggle strong { color: var(--label); }
.section[data-section="accept"] .fold-toggle strong, .section[data-section="accept"] .fold-toggle .n { color: var(--orange); }
.section[data-section="ready"] .fold-toggle strong, .section[data-section="ready"] .fold-toggle .n { color: var(--blue); }
.section[data-section="claim"] .fold-toggle strong, .section[data-section="claim"] .fold-toggle .n { color: var(--teal); }
.section[data-section="owned"] .fold-toggle strong, .section[data-section="owned"] .fold-toggle .n { color: var(--indigo); }
.section[data-section="blocked"] .fold-toggle strong, .section[data-section="blocked"] .fold-toggle .n { color: var(--red); }
.stat-icon.i-blue ~ .stat-num { color: var(--blue); }
.stat-icon.i-orange ~ .stat-num { color: var(--orange); }
.stat-icon.i-red ~ .stat-num { color: var(--red); }
.stat-icon.i-gray ~ .stat-num { color: var(--indigo); }
.stat-icon.i-gray { background: #5856D6; }

/* 看板：每列带自己状态的颜色 */
.col-c-gray { --col: var(--label-2); --col-soft: var(--fill); }
.col-c-yellow { --col: var(--yellow); --col-soft: var(--yellow-soft); }
.col-c-indigo { --col: var(--indigo); --col-soft: var(--indigo-soft); }
.col-c-blue { --col: var(--blue); --col-soft: var(--blue-soft); }
.col-c-purple { --col: var(--purple); --col-soft: var(--purple-soft); }
.col-c-orange { --col: var(--orange); --col-soft: var(--orange-soft); }
.col-c-red { --col: var(--red); --col-soft: var(--red-soft); }
.col-c-green { --col: var(--green); --col-soft: var(--green-soft); }
.board .col:not(.drop-over) { background: color-mix(in srgb, var(--col-soft, var(--fill-soft)) 60%, transparent); }
.col-name, .col-rail-name, .col-head .n, .col-rail .n, .col-rail:hover { color: var(--col, var(--label)); }

/* 任务表的版本分组：字大一号、用强调色、整行浅蓝底，和任务一眼分开。任务名用常规字重 */
table.matrix .group-row td { height: 42px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.group-row .group-toggle { font-size: 16px; font-weight: 600; color: var(--accent-text); }
.group-row .group-toggle .n { color: var(--accent-text); font-size: 14px; font-weight: 400; }
.group-row .group-toggle svg { color: var(--accent-text); }
.name-cell .link-btn { font-weight: 400; }

/* ---------- 任务详情：属性两列排，标签和值挨着，不用眼睛跑一整行 ---------- */
.title-input.title-input { padding-inline: 16px; }
.next-step:not(.banner).quiet { align-self: flex-start; margin-left: 16px; padding: 4px 12px; border-radius: var(--r-control); background: var(--accent-soft); color: var(--accent-text); font-size: 13px; }
@media (min-width: 761px) {
  .group.props { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .group.props > .row { min-width: 0; }
  .group.props > .row .row-label { color: var(--label-2); font-size: 13px; }
  .group.props > .row.wide { grid-column: 1 / -1; }
  .group.props > .row:nth-child(2)::before { display: none; }
  .group.props > .row:not(.wide):nth-child(odd) { box-shadow: inset -1px 0 0 var(--sep); }
  .group.props .row-value { flex: 1; min-width: 0; justify-content: flex-end; }
  .group.props .select.form { max-width: 100%; }
}

/* 评论区：连着的状态变化收成一行 */
.talk-fold { align-self: center; display: inline-flex; align-items: center; gap: 4px; margin: 8px 0 2px; padding: 2px 10px; border-radius: 999px; background: var(--fill-soft); color: var(--label-2); font-size: 12px; }
.talk-fold:hover { background: var(--fill); color: var(--label); }
.talk-fold svg { width: 12px; height: 12px; }

/* 优先级的字色和胶囊底色一致（ui.js 的 tagColor） */
.prio.p2, table.matrix .select.prio-select.p2 { color: var(--yellow); font-weight: 500; }
.prio.p3, table.matrix .select.prio-select.p3 { color: var(--teal); font-weight: 500; }
.select.type-select.t-blue, .select.form.t-blue { color: var(--blue); }
.select.type-select.t-teal, .select.form.t-teal { color: var(--teal); }
.select.type-select.t-indigo, .select.form.t-indigo { color: var(--indigo); }
.select.type-select.t-red, .select.form.t-red { color: var(--red); }
.select.type-select.t-pink, .select.form.t-pink { color: var(--pink); }
.select.type-select.t-orange, .select.form.t-orange { color: var(--orange); }
.select.type-select.t-purple, .select.form.t-purple { color: var(--purple); }
.select.type-select.t-green, .select.form.t-green { color: var(--green); }
.select.type-select.t-brown, .select.form.t-brown { color: var(--brown); }
.select.type-select.t-yellow, .select.form.t-yellow { color: var(--yellow); }
.select.cell.tag-select.tint-blue, .select.status.bug-severity.tint-blue { color: var(--blue) !important; font-weight: 500; }
.select.cell.tag-select.tint-teal { color: var(--teal) !important; font-weight: 500; }

/* 文件夹学访达：蓝色 */
.tree-icon { color: var(--accent); }

/* “我的”顶部的四个统计：实心圆加白色图标，和 iOS 的提醒事项一样 */
.stat-icon.i-blue { background: #0A6CDB; color: #fff; }
.stat-icon.i-orange { background: #E8710A; color: #fff; }
.stat-icon.i-gray { color: #fff; }
.stat-icon.i-red { background: #D70015; color: #fff; }
.nav-group-title { color: var(--label-3); }
.nav-sep { background: var(--sep); }
.nav-foot { border-top-color: var(--sep); }
.nav .badge { box-shadow: 0 0 0 2px var(--sidebar); }
.tabbar a[aria-current="page"] { color: var(--accent-text); }
.toggle[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }

/* ---------- 圆角：控件 8、卡片 12、弹层 14 ---------- */
.btn, .btn.large, .input, .textarea, .select, .select.pill, .select.cell, table.matrix .select.cell, .select.cell.tag-select, .select.status.cell-status, .select.status,
.pill-btn, .toggle-pill, .reset-btn, .search .input, .segmented, .theme-switch, .case-run, .icon-btn, .brand-tools .icon-btn, .brand-tools .nav-collapse,
.nav-link, .nav-user, .nav-foot-row .nav-user, .nav-collapse, .nav.rail .nav-link, .nav.rail .nav-user, .nav.rail .nav-collapse, .nav.rail .nav-theme .icon-btn,
.nav.rail .bell-btn, .nav.rail .side-search, .nav.rail .side-add-main, .nav-mini-link, .nav-group-title, .side-search, .side-add, .settings-link, .tree-row, .search-row,
.col-tool, .col-check, .col-add .input, .inline-edit, .tool-btn, .release-add, .channel-add, .side-panel-head button, .fold-toggle, .cell-date, table.matrix .cell-date, .line-cell, .menu-item, .pitem { border-radius: var(--r-control); }
.segmented button, .theme-switch button, .case-run-btn { border-radius: 6px; }
.side-add-main { border-radius: var(--r-control) 0 0 var(--r-control); }
.side-add-main:only-child { border-radius: var(--r-control); }
.side-add-more { border-radius: 0 var(--r-control) var(--r-control) 0; }
.group, .group.flat, .vcard, .col, .board .col, .tcard, .side-panel, .side-panel-strip, .tree-panel, .diff-body, .setup-result, .form-ok, .col-empty, .password-box, .markdown pre, .channel-cell { border-radius: var(--r-card); }
.panel, .popover, .floating, .sheet, .upload-queue, dialog.modal, dialog.alert, dialog.strong-alert, .talk-mention, .drop-hint-card, .toast, .chart-tip { border-radius: var(--r-pop); }
dialog.modal { background: var(--modal-bg); }
dialog.alert, dialog.strong-alert, dialog.modal.search-panel { background: var(--surface-raised); }
.panel { background: var(--surface-raised); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 760px) {
  dialog.modal.search-panel { border-radius: 0; }
}

/* ---------- 间距：4 的倍数。这里只管全站都用的控件，页面自己的留白在页面的 CSS 里 ---------- */
.btn { padding: 4px 12px; }
.btn.plain { padding-inline: 8px; }
.btn.small { padding: 4px 8px; }
.input, .select { padding: 4px 12px; }
.select { padding-right: 24px; }
.textarea { padding: 8px 12px; }
.select.pill, .pill-btn { padding: 4px 24px 4px 12px; }
.toggle-pill { padding: 4px 12px; }
.segmented button { padding: 4px 12px; }
.row { padding-block: 4px; }
.list-row { padding: 10px 16px; }
.section-title { padding: 0 16px 8px; }
.section-foot { padding: 8px 16px 0; }
.capsule, table.matrix .capsule { padding: 2px 8px; }
table.bug-table .mark-changed { margin-left: 8px; }

/* ---------- 字重只用 400、500、600（手机上也是）---------- */
.pagehead h1, .auth-card h1, .prio.p0, .prio.p1, .prio-select.p0, .prio-select.p1, .stat-num, .title-input, .pick[aria-pressed="true"], .vd-head h2, .big, .doc-badge, .release-name, .case-rate b, .strong-alert-title { font-weight: 600; }

/* ---------- 设置的分类：电脑上是侧边栏，不用箭头；手机上是一层层点进去，才要箭头 ---------- */
@media (min-width: 761px) {
  .settings-link > svg { display: none; }
}

/* ---------- 登录页和启动：图标不带彩色光晕 ---------- */
.auth-card img { filter: none; border-radius: var(--r-card); }
.brand img { border-radius: 6px; object-fit: contain; }

/* ---------- 强调色选择（设置 → 外观）---------- */
.accent-row { display: flex; align-items: center; gap: 8px; }
.accent-name { min-width: 28px; color: var(--label-2); font-size: 13px; text-align: right; }
.accent-swatch {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--a-swatch); transition: box-shadow .12s;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.accent-swatch:hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 0 0 2px var(--surface), 0 0 0 3.5px var(--sep); }
.accent-swatch[aria-checked="true"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 0 0 2px var(--surface), 0 0 0 4px var(--a-swatch); }

/* ---------- 产品名称和小标识（设置 → 产品名称）---------- */
.brand-preview { flex: none; width: 40px; height: 40px; border-radius: var(--r-card); object-fit: contain; background: var(--fill-soft); }
.brand-mark-row { display: flex; align-items: center; gap: 12px; }
.brand-mark-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) {
  .accent-row { gap: 12px; }
  .accent-swatch { width: 28px; height: 28px; }
}