/* ===========================
   Settings Modal
   =========================== */
.settings-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.settings-modal-overlay[hidden] {
  display: none;
}
.settings-modal {
  --settings-close-inset: 16px;   /* 关闭钮离弹窗左上角的距离 */
  --settings-close-gap: 12px;     /* 关闭钮 hover 盒底边 ↔ 第一个 tab hover 盒顶边(跟侧栏自身 12px 内距同一节奏) */
  background: var(--color-bg-panel);
  border-radius: var(--modal-radius);   /* 全站弹窗窗口倒角单一源 */
  width: 1040px;
  max-width: 92vw;
  height: 760px;
  max-height: 88vh;
  display: flex;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.16);
  position: relative;
}
/* 尺寸/样式走 .chat-header-btn(DOM 上并列的 class,盒子 = --header-btn-box);这里只留【定位】(设置弹窗特有:桌面 top-left) */
/* desktop: top-right corner of the window, over the page (the sidebar opens with its search box) */
.settings-modal-close {
  position: absolute;
  top: var(--settings-close-inset);
  right: var(--settings-close-inset);
  z-index: 1;
}
/* 侧栏要给浮起来的关闭钮让位。★必须 calc 出来:原先写死 52 = 16+36 恰好等于按钮底边,
   于是它和第一个 tab 的 hover 盒子严丝合缝、零间隙(2026-08-08 owner 报)。 */
.settings-modal-sidebar {
  width: 240px;
  flex-shrink: 0;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid var(--color-border);
}
.settings-modal-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: calc(8px * var(--corner-k));
  cursor: pointer;
  font-size: 14px;
  color: #444;
  text-align: left;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.12s;
}
html:not([data-input="touch"]) .settings-modal-tab:hover{
  background: var(--color-bg-hover);
}
.settings-modal-tab:active {
  background: var(--color-bg-hover);
}
.settings-modal-tab.active {
  background: var(--color-bg-card);
}
.settings-modal-content {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
}
/* .settings-modal-content 滚动条走 .duo-scroll 模板（元素已加该 class；移动端隐藏见下方 media query） */
.settings-tab-panel {
  display: none;
}
.settings-tab-panel.active {
  display: block;
}
.settings-panel-title {
  font-size: 20px;
  font-weight: 500;
  font-family: "Flair", "Jost Fallback", "PingFang SC", "Microsoft YaHei", sans-serif;
  margin: 0 0 24px;
  color: var(--color-text);
}
.settings-panel-subtitle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px;
}
.settings-panel-subtitle {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: var(--color-text);
}
/* Second block inside Capabilities — same 24px rhythm the panel title uses to open a section */
.settings-bench-row {
  margin-top: 24px;
}
/* Sidebar search and group names (desktop only: the phone has no sidebar) */
.settings-search { display: block; width: 100%; margin: 0 0 4px; -webkit-appearance: none; appearance: none; }
.settings-tab-group-label { padding: 16px 12px 6px; font-size: 12px; color: var(--color-text-tertiary); }
.dark-mode .settings-tab-group-label { color: rgba(255,255,255,0.4); }
/* a page's one-line introduction, under its title - an explanation, never a row that looks like a setting */
.settings-panel-intro { margin: -12px 0 24px; font-size: 13px; color: var(--color-text-secondary); }
.dark-mode .settings-panel-intro { color: rgba(255,255,255,0.4); }
/* a note under a section's own title, when there is something to say and nothing to switch */
.settings-local-note { margin: 0; font-size: 13px; color: var(--color-text-secondary); }
.dark-mode .settings-local-note { color: rgba(255,255,255,0.4); }
/* Account: its own rows, then the password card (on the phone each is its own card) */
.settings-account-password { margin-top: 24px; }
/* Top up: a link wearing the button's clothes; with nothing to buy it reads as unavailable and does not click */
.settings-topup-link { text-decoration: none; display: inline-flex; align-items: center; flex: none; white-space: nowrap; }
/* The words and the button are two things: without this the description ran right up against the pill (measured 0px apart) */
.settings-topup-row { gap: 12px; }
/* An app icon named in a row (DuoHand Bench): the same tile the skills rows use, one rule for both */
.settings-app-tile,
.settings-skill-icon { flex: none; width: 36px; height: 36px; border-radius: var(--tile-radius-pct); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.settings-app-tile svg { width: 100%; height: 100%; display: block; }
/* What the worker said about the release, under the sentence: data, never a translated string */
.settings-row-meta { font-size: 12.5px; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
/* A control in a row keeps its own width: squeezed, its label wraps inside the pill (owner 2026-09-17) */
.settings-row .project-modal-btn { flex: none; }
/* A row's text takes the space the controls leave. Without this the row's space-between splits the leftover on
   both sides of the text, so it floats: two rows in one card line up only while their controls happen to be the
   same width (measured 8.4px apart on the two Bench rows). Gate: scripts/ui/settings-rows-align.test.mjs */
.settings-row .settings-row-label-group { flex: 1; min-width: 0; }
/* Usage: each kind's amount sits at the end of its row, digits lining up down the column */
.settings-usage-amount { flex: none; font-size: 14px; color: var(--color-text); font-variant-numeric: tabular-nums; }
/* Shared links: a row is what it is and when it went out, with the two things you can do to it */
.shares-item { display: flex; align-items: center; gap: 12px; }
.shares-item .memory-manage-item-text { flex: 1; min-width: 0; }
.shares-item-name { font-size: 14px; color: var(--color-text); overflow-wrap: anywhere; }
.shares-item-meta { font-size: 12.5px; color: var(--color-text-secondary); margin-top: 2px; }
.shares-item-actions { flex: none; display: flex; align-items: center; gap: 8px; }
.shares-item-actions a { text-decoration: none; }
.shares-failed { font-size: 13px; color: var(--color-text-secondary); padding: 14px 20px; margin: 0; }
.settings-topup-link.is-disabled { opacity: 0.4; pointer-events: none; }
/* Skills: each row is an app icon tile, the name and description, the switch and a menu */
.settings-skills-count { margin: 0 auto 0 6px; font-size: 13px; color: var(--color-text-tertiary); }
.settings-skills-count::before { content: "\00b7\00a0"; }
.dark-mode .settings-skills-count { color: rgba(255,255,255,0.4); }
.settings-skill-actions { flex: none; display: flex; align-items: center; gap: 8px; }
.dark-mode .settings-panel-subtitle {
  color: rgba(255,255,255,0.85);
}
/* ── Storage ──
   条本身不自己画:走全站那条读条模板 .studio-bench-track(轨/填充/圆度都在它那儿),这里只管间距。
   "Manage storage" 这一段跟 Capabilities 里第二块用同一个 24px 起段节奏(.settings-bench-row)。 */
.settings-storage-used {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 8px;
}
.settings-storage-usage { display: block; }   /* a wrapper on desktop; the phone block turns it into the card */
.settings-storage-track { margin: 0 0 24px; }
.settings-storage-hint { display: block; margin: 0 0 12px; }
/* Memory entry row: mobile only */
/* 等你点头的候选:复用侧栏那颗未读点(.unread-dot,8px 蓝点坐在 24px 槽里),只说它挂在哪。
   手机整行的入口里,点跟在标签右边、离 chevron 一段;桌面它在 Manage 按钮左边。 */
.settings-memory-entry .memory-pending-dot { margin-right: auto; }
.settings-panel-subtitle-row .memory-pending-dot { margin-left: auto; }
.settings-memory-entry {
  display: none;
}
/* Memory backdrop + sub-panel: mobile only */
.settings-memory-backdrop {
  display: none;
}
.settings-memory-subpanel {
  display: none;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}
/* The hairline separates rows INSIDE a group; the group's last row draws none, on every form factor
   (owner 2026-08-28 - it read as a stray divider above the dialog's action buttons). The phone cards
   block below repeats this for its own padded rows; this is the desktop half.
   A card is a group, so it is said once here instead of each screen exempting its own last row: the
   Bench install card holds a single row, whose hairline had nothing to separate and simply drew a line
   under the card (owner 2026-09-17). Gate: scripts/ui/row-hairline.test.mjs. */
.settings-card .settings-row:last-child { border-bottom: none; }
.settings-memory-toggle-group .settings-row:last-child { border-bottom: none; }
.settings-row-label {
  color: var(--color-text);
}
.settings-row-label-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Storage: the two library rows are whole-row buttons with a chevron (the Room settings entry row's shape, owner
   2026-09-06). Padding and the hairline come from .settings-row on both form factors; only the button chrome is reset.
   The chevron's base rule lives in the phone block, so desktop gets its own here. */
.settings-storage-entry {
  appearance: none; -webkit-appearance: none;
  width: 100%; background: none; color: inherit; font-family: inherit; line-height: inherit; text-align: left; cursor: pointer;
  border-top: 0; border-left: 0; border-right: 0;
}
.settings-storage-entry .settings-memory-entry-chevron { display: flex; align-items: center; color: rgba(0,0,0,0.3); }
.settings-row-desc {
  font-size: 12px;
  color: #888;
}
/* A row that carries a dropdown (room settings, training settings, any future one): the dropdown keeps its
   full width so a long model name stays on one line; the title + description take only what is left and
   the description wraps first (owner 2026-09-02 phone: "Claude Sonnet 5" broke in two while the description
   sat wide). Lives here, on the row shape, not on one modal. */
.settings-row .settings-lang-dropdown { flex-shrink: 0; }
.settings-row-value {
  color: #666;
}
.settings-row-input {
  border: none;
  background: none;
  font-size: 14px;
  font-family: inherit;
  color: #666;
  text-align: right;
  padding: 0;
  outline: none;
  min-width: 0;
  max-width: 60%;
}
.settings-row-input:focus {
  color: var(--color-text);
}
.settings-row-input[readonly] {
  pointer-events: none;
}
.settings-row-save-wrap {
  display: flex;
  justify-content: flex-end;
  padding: 8px 0 0;
}
.settings-row-save-wrap[hidden] {
  display: none;
}
.settings-row-save-btn {
  padding: 5px 16px;
  border: none;
  border-radius: 999px;
  corner-shape: round;
  background: #1a1a1a;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s;
}
html:not([data-input="touch"]) .settings-row-save-btn:hover{
  background: #333;
}
.settings-row-save-btn:active {
  background: #333;
}
/* Custom language dropdown */
.settings-lang-dropdown {
  position: relative;
}
.settings-lang-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  font-size: 14px;
  font-family: inherit;
  color: #666;
  cursor: pointer;
}
html:not([data-input="touch"]) .settings-lang-trigger:hover{
  color: var(--color-text);
}
.settings-lang-trigger:active {
  color: var(--color-text);
}
.settings-lang-chevron {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.settings-lang-chevron .chevron-icon {
  width: var(--chevron-trigger-size);
  height: var(--chevron-trigger-size);
}
.settings-lang-menu {
  position: fixed;
  min-width: 180px;
  background: var(--color-bg-panel);
  border-radius: calc(12px * var(--corner-k));
  box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 0 0 1px var(--color-border);
  padding: 6px 0;
  z-index: 10001;
}
.settings-lang-menu[hidden] {
  display: none;
}
.settings-lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.1s;
}
html:not([data-input="touch"]) .settings-lang-option:hover{
  background: var(--color-bg-hover);
}
.settings-lang-option:active {
  background: var(--color-bg-hover);
}
/* 勾号列常驻占位(visibility 而非 display):选中行与其他行的右侧内容(如模型牌价)才能一直对齐,不会被勾号挤开(owner 2026-08-23) */
.settings-lang-check {
  display: inline-flex;
  align-items: center;
  visibility: hidden;
  color: var(--color-text);
  flex-shrink: 0;
  line-height: 0;
}
.settings-lang-check.visible {
  visibility: visible;
}
/* the tick beside a menu row's words: the small icon size */
.settings-lang-check svg { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.settings-toggle {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 26px;
  flex-shrink: 0;
}
.settings-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.settings-toggle-slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 26px;
  corner-shape: round;
  cursor: pointer;
  transition: background 0.2s;
}
.settings-toggle-slider::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  corner-shape: round;
  transition: transform 0.2s;
}
.settings-toggle input:checked + .settings-toggle-slider {
  background: #000;
}
.settings-toggle input:checked + .settings-toggle-slider::before {
  transform: translateX(16px);
}
.settings-row-link {
  text-decoration: none;
  cursor: pointer;
}
html:not([data-input="touch"]) .settings-row-link:hover{
  text-decoration: none;
}
.settings-row-link:active {
  text-decoration: none;
}
/* ── Account tab action buttons (reuse .project-modal-btn base) ── */
.settings-account-action {
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
}
.settings-row-chevron {
  display: flex;
  align-items: center;
  color: rgba(0,0,0,0.3);
  transform: rotate(-90deg);
}
.settings-row-chevron svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}
/* Change password button */
.settings-change-pw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px 6px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  corner-shape: round;
  background: var(--color-bg-panel);
  font-size: 12px;
  line-height: 1;
  font-family: inherit;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
html:not([data-input="touch"]) .settings-change-pw-btn:hover{
  background: var(--color-bg-hover);
  border-color: rgba(0,0,0,0.25);
}
.settings-change-pw-btn:active {
  background: var(--color-bg-hover);
  border-color: rgba(0,0,0,0.25);
}
.settings-change-pw-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.settings-pw-hint {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 12px 0 0;
  line-height: 1.4;
}
.settings-pw-hint strong {
  color: rgba(0,0,0,0.6);
  font-weight: 500;
}
.settings-pw-message {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: calc(8px * var(--corner-k));
  font-size: 13px;
  line-height: 1.4;
}
.settings-pw-message[hidden] {
  display: none;
}
.settings-pw-message.success {
  background: #e8f5e9;
  color: #2e7d32;
}
.settings-pw-message.error {
  background: #fbe9e7;
  color: #c62828;
}
/* Icons in settings tabs */
/* Every tab's icon takes the same box, the regular icon size, so every label starts on the same x (owner 2026-09-06:
   the General label sat 2px right - its box was larger than the others'). How big each glyph reads is its drawing's
   job (the icon keyline), never a bigger box for one tab. */
.settings-tab-icon-general {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
}
.settings-tab-icon-general svg {
  width: var(--icon-size) !important;
  height: var(--icon-size) !important;
  flex: none;
}
.settings-tab-icon-credits,
.settings-tab-icon-account,
.settings-tab-icon-feedback,
.settings-tab-icon-voice,
.settings-tab-icon-skills,
.settings-tab-icon-usage,
.settings-tab-icon-computer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
}
.settings-tab-icon-credits svg,
.settings-tab-icon-account svg,
.settings-tab-icon-feedback svg,
.settings-tab-icon-voice svg,
.settings-tab-icon-skills svg,
.settings-tab-icon-usage svg,
.settings-tab-icon-computer svg {
  width: var(--icon-size) !important;
  height: var(--icon-size) !important;
}
/* Credits panel */
.settings-credits-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}
.settings-credits-label {
  font-size: 14px;
  color: var(--color-text);
}
.settings-credits-amount {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}

/* ===========================
   Edit Profile Modal
   =========================== */
.edit-profile-modal {
  background: var(--color-bg-panel);
  border-radius: var(--modal-radius);   /* 全站弹窗窗口倒角单一源 */
  width: 400px;
  max-width: 90vw;
  padding: 28px 32px 24px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.16);
  text-align: center;
}
.edit-profile-title {
  font-size: 18px;
  font-weight: 500;
  font-family: "Flair", "Jost Fallback", "PingFang SC", "Microsoft YaHei", sans-serif;
  margin: 0 0 24px;
  color: var(--color-text);
  text-align: left;
}
.edit-profile-avatar-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 24px;
}
.edit-profile-avatar-remove {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 28px;
  height: 28px;
  background: #fff;
  border: none;
  border-radius: 50%;
  corner-shape: round;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  cursor: pointer;
  color: #333;
  padding: 0;
}
html:not([data-input="touch"]) .edit-profile-avatar-remove:hover{
  color: #e53935;
}
.edit-profile-avatar-remove:active {
  color: #e53935;
}
.edit-profile-avatar-remove[hidden] {
  display: none;
}
.edit-profile-avatar-camera {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 28px;
  height: 28px;
  background: #fff;
  border: none;
  border-radius: 50%;
  corner-shape: round;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  cursor: pointer;
  color: #333;
}
html:not([data-input="touch"]) .edit-profile-avatar-camera:hover{
  background: var(--color-bg-surface);
}
.edit-profile-avatar-camera:active {
  background: var(--color-bg-surface);
}
.edit-profile-avatar-camera svg {
  width: var(--icon-size) !important;
  height: var(--icon-size) !important;
}
.edit-profile-avatar-circle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  corner-shape: round;
  background: #1a1a1a;
  color: #fff;
  font-size: 42px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1px;
  padding-top: 3px; /* 视觉修正：大写字母偏上，下移居中 */
  overflow: hidden; /* 裁切头像图片 */
}
.edit-profile-field {
  text-align: left;
  margin-bottom: 16px;
}
.edit-profile-label {
  display: block;
  font-size: 12px;
  color: #888;
  margin-bottom: 4px;
  padding-left: 14px;
}
.edit-profile-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: calc(10px * var(--corner-k));
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text);
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}
.edit-profile-input:focus {
  border-color: #1a1a1a;
}
.edit-profile-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}
.edit-profile-btn-cancel {   /* size = the app-wide footer rule (ai-chat-base.css) */
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  corner-shape: round;
  background: transparent;
  color: rgba(0,0,0,0.7);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
html:not([data-input="touch"]) .edit-profile-btn-cancel:hover{
  background: var(--color-bg-hover);
}
.edit-profile-btn-cancel:active {
  background: var(--color-bg-hover);
}
.edit-profile-btn-save {   /* size = the app-wide footer rule (ai-chat-base.css) */
  font-weight: 500;
  border: none;
  border-radius: 999px;
  corner-shape: round;
  background: #1a1a1a;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
html:not([data-input="touch"]) .edit-profile-btn-save:hover{
  background: #333;
}
.edit-profile-btn-save:active {
  background: #333;
}

/* Desktop: hide mobile-only elements */
.settings-mobile-header {
  display: none;
}
.settings-mobile-logout {
  display: none;
}

/* Mobile: settings as slide-up sheet with profile + long scroll */
@media (max-width: 768px), (max-height: 500px) {
  /* Overlay: align to bottom for slide-up */
  .settings-modal-overlay {
    align-items: flex-end;
  }

  /* 手机 = 底部上拉 sheet:尺寸/圆角/上滑下滑全在 .duo-sheet 真源(ai-chat-sheet.css),JS 开关走 DuoSheet。
     这里只留本面板自己的布局;overflow 保持桌面那条的 hidden(内部各区自己滚),别让真源的 overflow-y:auto 接管 */
  .settings-modal { flex-direction: column; }
  .settings-modal.duo-sheet { overflow: hidden; }

  /* Hide tab sidebar */
  .settings-modal-sidebar {
    display: none;
  }
  /* 手机隐藏滚动条那条已收进真源(ai-chat-sheet.css 的 .duo-sheet,2026-08-27):
     这里原本只写了 webkit 一半,认标准属性的浏览器照样画一条 —— 真源两套一起给。 */


  /* Close button → top-right(尺寸/样式仍走 .chat-header-btn,这里只挪位) */
  .settings-modal-close {
    left: auto;
    right: var(--settings-close-inset);
    top: var(--settings-close-inset);
    z-index: 2;
  }
  html:not([data-input="touch"]) .settings-modal-close:hover{
    background: var(--color-bg-card);
  }

  /* ── Mobile header: title + profile card (inside scroll) ── */
  .settings-mobile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 0 20px;
  }

  .settings-mobile-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .settings-mobile-title {
    font-size: 17px;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 20px;
  }

  .settings-mobile-avatar-wrap {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 12px;
  }
  .settings-mobile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    corner-shape: round;
    background: #1a1a1a;
    color: #fff;
    font-size: 32px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
    padding-top: 2px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
  }
  .settings-mobile-avatar-camera {
    display: none !important;
  }
  .settings-mobile-avatar-remove {
    display: none !important;
  }

  .settings-mobile-name {
    font-size: 24px;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 2px;
  }

  .settings-mobile-username {
    font-size: 14px;
    color: rgba(0,0,0,0.45);
    margin-bottom: 14px;
  }

  /* Edit profile 按钮复用全局 .project-modal-btn.project-modal-btn-cancel（见 duohand-app-ui.liquid），
     与 Send reset email / Manage / Log out 等保持像素一致，不再自定义样式（CLAUDE.md 5.1） */

  /* ── Content: scrollable, show all panels ──
     滚动区的箱体从关闭钮那条带的下沿开始(全站 sheet 同一款,owner 2026-09-02:起止位置调矮,
     不渐变消失)—— 指示条起点天生在圆角之外;带高与桌面侧栏同一条推导,别抄 70。 */
  .settings-modal-content {
    margin-top: calc(var(--settings-close-inset) + var(--header-btn-box) + var(--settings-close-gap));
    padding: 0 20px 40px;
    position: relative;
  }

  /* Show ALL panels stacked */
  .settings-tab-panel {
    display: block !important;
    margin-bottom: 0;
  }

  /* Panel titles as section headers — outside the card */
  .settings-panel-title {
    font-size: 14px;
    font-weight: 500;
    font-family: "Flair", "Jost Fallback", "PingFang SC", "Microsoft YaHei", sans-serif;
    color: rgba(0,0,0,0.45);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 24px 0 8px;
    padding-left: 4px;
  }

  .settings-tab-panel:first-child .settings-panel-title {
    margin-top: 16px;
  }
  /* the phone keeps its section subtitles at 14px, and a page introduction sits on the section header's inset */
  .settings-panel-subtitle { font-size: 14px; }
  .settings-panel-intro { margin: 0 0 12px; padding-left: 4px; }
  /* the phone's Skills page: the title is a section header as everywhere, and there is no search box */

  /* Rows grouped inside a rounded card */
  .settings-tab-panel .settings-row {
    background: rgba(0,0,0,0.03);
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
  }
  /* The card is the wrapper (.settings-card / .settings-memory-toggle-group): it owns the corners and clips its
     rows, so a row added - or a row hidden on this width - can never change another row's corners. Rounding rows by
     their position counted hidden siblings too, which is how a lone visible row ended up rounded on one side only. */
  .settings-tab-panel .settings-row:last-child { border-bottom: none; }

  /* Save wrap inside the same card */
  .settings-tab-panel .settings-row-save-wrap {
    background: rgba(0,0,0,0.03);
    padding: 0 16px 12px;
    margin-top: -1px;
  }

  /* A balance row on its own is a capsule (Usage). One that is a row of a card (Credits) takes the card's radius
     from the rows rule above - it must not also carry a capsule, or the card ends in a round head on square shoulders. */
  .settings-tab-panel .settings-credits-balance-row:not(.settings-row) {
    background: rgba(0,0,0,0.03);
    padding: 14px 16px;
    border-radius: 999px;
    corner-shape: round;
  }

  /* Password hint inside card */
  .settings-tab-panel .settings-pw-hint {
    background: rgba(0,0,0,0.03);
    padding: 8px 16px 14px;
    border-radius: 0 0 calc(24px * var(--corner-k)) calc(24px * var(--corner-k));
    margin: 0;
  }
  .settings-tab-panel .settings-pw-message {
    background: rgba(0,0,0,0.03);
    padding: 8px 16px 0;
    margin: 0;
  }

  /* Narrow the overall content padding for tighter cards */
  .settings-modal-content {
    padding: 70px 16px 40px;
  }

  /* ── Logout at bottom of mobile sheet (single row → capsule) ── */
  .settings-mobile-logout {
    display: block;
    margin-top: 24px;
    background: rgba(0,0,0,0.03);
    border-radius: 999px;
    corner-shape: round;
    padding: 0;
  }
  .settings-mobile-logout-btn {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 999px;
    corner-shape: round;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    color: #e53935;
    cursor: pointer;
    text-decoration: none;
    text-align: left;
    transition: background 0.12s;
  }
  html:not([data-input="touch"]) .settings-mobile-logout-btn:hover{
    background: rgba(229,57,53,0.06);
  }

  /* ── Memory: mobile entry row + backdrop + sub-panel ── */
  .settings-memory-desktop {
    display: none !important;
  }
  /* Connected computers: same swap as Memory - desktop subtitle form hides, entry row shows */
  .settings-bench-desktop {
    display: none !important;
  }
  .settings-memory-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    /* 比 sheet 低一层 —— 层号从真源推,别再写字面量(9998/9999 那对靠加载顺序分胜负,输了就是遮罩盖住面板) */
    z-index: calc(var(--duo-sheet-z) - 1);
  }
  /* The phone's entry row: a label and a chevron on the card background. */
  .settings-memory-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: calc(24px * var(--corner-k)) calc(24px * var(--corner-k)) 0 0;
    background: rgba(0,0,0,0.03);
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.12s;
  }
  /* In Settings each entry stands alone on its page (Memory on Capabilities, Connected computers on Your computer):
     a whole card. Scoped to the settings pages - other sheets group this row their own way. */
  .settings-tab-panel .settings-memory-entry {
    border-bottom: none;
    border-radius: calc(24px * var(--corner-k));
  }
  .settings-memory-entry-chevron {
    display: flex;
    align-items: center;
    color: rgba(0,0,0,0.3);
  }
  /* 尺寸不在这里定:图标 snippet 自带内联尺寸(约定见 ai-chat-base.css 的箭头注释)。
     这里曾写死 18px —— 内联样式优先级更高,这条其实一直是死规则,还会让人以为改它有用。 */
  /* 定位/尺寸/圆角/滚动/上滑下滑全在 .duo-sheet 真源(ai-chat-sheet.css),JS 开关走 DuoSheet;
     层序见下:遮罩由真源层号减一算出,面板用真源层号 */
  .settings-memory-subpanel {
    background: var(--color-bg-panel);
    /* 层号不在这里定:它是 sheet,层号归 .duo-sheet 真源(本表先于 ai-chat-sheet.css 加载,写在这里必被覆盖) */
    /* 手机 sheet 永远从下往上开、从上往下关(owner 2026-08-23);keyframes = ai-chat-sheet.css 真源 */
    /* 壳上不许有 padding:.duo-sheet 是 content-box 的 92dvh,壳的 padding 会把它撑过槽位、
       被外层 sheet 的 overflow 裁掉顶部 —— 内距归 body(下面) */
  }
  .settings-memory-subpanel-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 16px 4px 12px;
    margin: 0;
  }
  /* 手机 sheet 头的返回钮【唯一真源】(owner 2026-08-23):36×36 圆、透明底、图标 icon-chevron-left-large / __CHAT_ICONS__.chevronLeftLarge。
     项目设置 / 分享 / 记忆管理器 / Studio 子 sheet(S.sheet({onBack}))都挂这个 class;别再另起名字抄一份。 */
  .settings-memory-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    corner-shape: round;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
  }
  html:not([data-input="touch"]) .settings-memory-back-btn:hover,
  .settings-memory-back-btn:active { background: var(--color-bg-card); }
  html:not([data-input="touch"]) .dark-mode .settings-memory-back-btn:hover,
  html:not([data-input="touch"]).dark-mode-active .settings-memory-back-btn:hover,
  .dark-mode .settings-memory-back-btn:active,
  .dark-mode-active .settings-memory-back-btn:active { background: rgba(255,255,255,0.06); }
  .settings-memory-subpanel-title {
    font-size: 17px;
    font-weight: 500;
    font-family: "Flair", "Jost Fallback", "PingFang SC", "Microsoft YaHei", sans-serif;
    margin: 0;
    flex: 1;
    text-align: center;
    color: var(--color-text);
  }
  .settings-memory-subpanel .duo-sheet-body {
    padding: 20px 16px 40px;
  }
  .settings-memory-toggle-group,
  .settings-card {
    border-radius: calc(24px * var(--corner-k));
    overflow: hidden;
    background: rgba(0,0,0,0.03);
  }
  .settings-memory-toggle-group .settings-row,
  .settings-card .settings-row {
    padding: 14px 16px;
    background: transparent;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
  }
  .settings-memory-toggle-group .settings-row:last-child {
    border-bottom: none;
  }
  /* Storage usage (used line + bar) in the same rounded card as the row groups (owner 2026-09-06: it was the one block
     on the sheet sitting bare). It carries the group class, so radius and tint (light and dark) come from the one rule
     above - nothing copied; here only the padding a row would have had, and the 24px gap the bar used to carry. */
  .settings-tab-panel .settings-storage-usage {
    padding: 14px 16px;
    margin: 0 0 24px;
  }
  .settings-tab-panel .settings-storage-usage .settings-storage-track { margin: 0; }
  /* 行卡的暗色底与它的圆角/内距同属手机形态,必须一起住在这个媒体块里。曾写在全局 → 桌面暗色下
     复用这张行卡的弹窗(Room settings)出现一块没圆角的灰底(owner 2026-08-23 实拍)。 */
  .dark-mode .settings-card,
  .dark-mode-active .settings-card,
  .dark-mode .settings-memory-toggle-group,
  .dark-mode-active .settings-memory-toggle-group {
    background: rgba(255,255,255,0.05);
  }
  /* Inside a tab panel the card colour is the group's; the panel's own dark row rule (further down, same
     specificity) would paint the row a second time on top of it - one shade lighter (owner 2026-09-06 phone). */
  .dark-mode .settings-tab-panel .settings-memory-toggle-group .settings-row,
  .dark-mode-active .settings-tab-panel .settings-memory-toggle-group .settings-row,
  .dark-mode .settings-memory-toggle-group .settings-row,
  .dark-mode-active .settings-memory-toggle-group .settings-row {
    background: transparent;
  }
  .settings-memory-manage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.12s;
  }

  /* ── Edit Profile: slide-up sheet on mobile ── */
  #editProfileModal {
    align-items: flex-end;
  }
  .edit-profile-modal {
    width: 100vw;
    max-width: 100vw;
    border-radius: var(--duo-sheet-radius) var(--duo-sheet-radius) 0 0;
    padding: 28px 24px 40px;
    animation: settingsSlideUp 0.3s ease-out;
  }
}

/* =========================================================
   DARK MODE — Account / Settings / Edit Profile
   ========================================================= */

/* --- Sidebar account menu --- */
.dark-mode .sidebar-account-menu {
  background: #2a2a2a;
}
.dark-mode .sidebar-account-menu-name {
  color: rgba(255,255,255,0.9);
}
.dark-mode .sidebar-account-menu-username {
  color: rgba(255,255,255,0.45);
}
.dark-mode .sidebar-account-menu-divider {
  background: rgba(255,255,255,0.08);
}
.dark-mode .sidebar-account-menu-item {
  color: rgba(255,255,255,0.85);
}
html:not([data-input="touch"]) .dark-mode .sidebar-account-menu-item:hover{
  background: rgba(255,255,255,0.06);
}
.dark-mode .sidebar-account-menu-item:active {
  background: rgba(255,255,255,0.06);
}
.dark-mode .sidebar-account-menu-logout {
  color: #ef5350;
}
.dark-mode .sidebar-account-menu-lang-chevron {
  color: rgba(255,255,255,0.3);
}
.dark-mode .sidebar-account-menu-lang-options,
.dark-mode-active .sidebar-account-menu-lang-options {
  background: #2a2a2a;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08);
}
.dark-mode .sidebar-account-menu-lang-option,
.dark-mode-active .sidebar-account-menu-lang-option {
  color: rgba(255,255,255,0.6);
}
html:not([data-input="touch"]) .dark-mode .sidebar-account-menu-lang-option:hover,
html:not([data-input="touch"]).dark-mode-active .sidebar-account-menu-lang-option:hover{
  background: rgba(255,255,255,0.06);
}
.dark-mode .sidebar-account-menu-lang-option:active,
.dark-mode-active .sidebar-account-menu-lang-option:active {
  background: rgba(255,255,255,0.06);
}
.dark-mode .sidebar-account-menu-lang-option.active,
.dark-mode-active .sidebar-account-menu-lang-option.active {
  color: rgba(255,255,255,0.9);
}

/* --- Settings modal --- */
.dark-mode .settings-modal-overlay {
  background: rgba(0,0,0,0.6);
}
.dark-mode .settings-modal {
  background: #212121;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
.dark-mode .settings-modal-close {
  color: rgba(255,255,255,0.6);
}
html:not([data-input="touch"]) .dark-mode .settings-modal-close:hover{
  background: rgba(255,255,255,0.08);
}
.dark-mode .settings-modal-close:active {
  background: rgba(255,255,255,0.08);
}
@media (max-width: 768px), (max-height: 500px) {
  .dark-mode .settings-modal-close {
    background: none;
  }
  html:not([data-input="touch"]) .dark-mode .settings-modal-close:hover{
    background: rgba(255,255,255,0.08);
  }
  /* Dark mode: rounded card backgrounds */
  .dark-mode .settings-tab-panel .settings-row {
    background: rgba(255,255,255,0.05);
  }
  .dark-mode .settings-tab-panel .settings-row:last-child {
    border-bottom: none;
  }
  .dark-mode .settings-tab-panel .settings-row-save-wrap {
    background: rgba(255,255,255,0.05);
  }
  .dark-mode .settings-tab-panel .settings-credits-balance-row {
    background: rgba(255,255,255,0.05);
  }
  .dark-mode .settings-tab-panel .settings-pw-hint {
    background: rgba(255,255,255,0.05);
  }
  .dark-mode .settings-tab-panel .settings-pw-message {
    background: rgba(255,255,255,0.05);
  }
  .dark-mode .settings-panel-title {
    color: rgba(255,255,255,0.45);
  }
}
.dark-mode .settings-modal-tab {
  color: rgba(255,255,255,0.6);
}
.dark-mode .settings-modal-tab.active {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.9);
}
.dark-mode .settings-row-desc {
  color: rgba(255,255,255,0.4);
}
.dark-mode .settings-row-value {
  color: rgba(255,255,255,0.45);
}
.dark-mode .settings-row-input {
  color: rgba(255,255,255,0.45);
}
.dark-mode .settings-row-input:focus {
  color: rgba(255,255,255,0.9);
}
.dark-mode .settings-row-save-btn {
  background: #fff;
  color: #1a1a1a;
}
html:not([data-input="touch"]) .dark-mode .settings-row-save-btn:hover{
  background: #e0e0e0;
}
.dark-mode .settings-row-save-btn:active {
  background: #e0e0e0;
}
.dark-mode .settings-lang-trigger {
  color: rgba(255,255,255,0.5);
}
html:not([data-input="touch"]) .dark-mode .settings-lang-trigger:hover{
  color: rgba(255,255,255,0.9);
}
.dark-mode .settings-lang-trigger:active {
  color: rgba(255,255,255,0.9);
}
.dark-mode .settings-lang-menu,
.dark-mode-active .settings-lang-menu {
  background: #2a2a2a;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08);
}
.dark-mode .settings-toggle-slider {
  background-color: #555;
}
.dark-mode .settings-toggle input:checked + .settings-toggle-slider {
  background-color: #fff;
}
.dark-mode .settings-toggle input:checked + .settings-toggle-slider::before {
  background-color: #212121;
}
.dark-mode .settings-change-pw-btn {
  border-color: var(--color-border);
  background: transparent;
}
html:not([data-input="touch"]) .dark-mode .settings-change-pw-btn:hover{
  border-color: rgba(255,255,255,0.25);
}
.dark-mode .settings-change-pw-btn:active {
  border-color: rgba(255,255,255,0.25);
}
.dark-mode .settings-pw-hint strong {
  color: rgba(255,255,255,0.55);
}
.dark-mode .settings-pw-message.success {
  background: #1b3a1e;
  color: #66bb6a;
}
.dark-mode .settings-pw-message.error {
  background: #3e1a1a;
  color: #ef5350;
}

/* Settings: credits & account panels */
.dark-mode .settings-credits-balance-row {
  color: rgba(255,255,255,0.85);
}
.dark-mode .settings-modal-tab svg {
  color: rgba(255,255,255,0.5);
}
.dark-mode .settings-modal-tab.active svg {
  color: rgba(255,255,255,0.85);
}

/* --- Edit profile modal --- */
.dark-mode .edit-profile-modal {
  background: #212121;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
.dark-mode .edit-profile-close {
  color: rgba(255,255,255,0.6);
}
html:not([data-input="touch"]) .dark-mode .edit-profile-close:hover{
  background: rgba(255,255,255,0.08);
}
.dark-mode .edit-profile-close:active {
  background: rgba(255,255,255,0.08);
}
.dark-mode .edit-profile-label {
  color: rgba(255,255,255,0.6);
}
.dark-mode .edit-profile-input {
  background: #2a2a2a;
  border-color: var(--color-border);
}
.dark-mode .edit-profile-input:focus {
  border-color: rgba(255,255,255,0.3);
}
.dark-mode .edit-profile-save {
  background: #fff;
  color: #000;
}
.dark-mode .edit-profile-btn-cancel {
  border-color: var(--color-border);
  color: rgba(255,255,255,0.7);
}
.dark-mode .edit-profile-btn-save {
  background: #fff;
  color: #1a1a1a;
}
html:not([data-input="touch"]) .dark-mode .edit-profile-btn-save:hover{
  opacity: 0.85;
}
.dark-mode .edit-profile-btn-save:active {
  opacity: 0.85;
}
.dark-mode .edit-profile-avatar-camera {
  background: #333;
  border-color: #333;
  color: rgba(255,255,255,0.7);
}
html:not([data-input="touch"]) .dark-mode .edit-profile-avatar-camera:hover{
  background: #444;
}
.dark-mode .edit-profile-avatar-camera:active {
  background: #444;
}
.dark-mode .edit-profile-avatar-remove {
  background: #333;
  border-color: #333;
  color: rgba(255,255,255,0.7);
}
html:not([data-input="touch"]) .dark-mode .edit-profile-avatar-remove:hover{
  color: #ef5350;
}
.dark-mode .edit-profile-avatar-remove:active {
  color: #ef5350;
}

/* --- Mobile settings header --- */
.dark-mode .settings-mobile-username {
  color: rgba(255,255,255,0.45);
}
.dark-mode .settings-mobile-avatar-camera {
  background: #333;
  color: rgba(255,255,255,0.7);
}
.dark-mode .settings-mobile-avatar-remove {
  background: #333;
  color: rgba(255,255,255,0.7);
}
html:not([data-input="touch"]) .dark-mode .settings-mobile-avatar-remove:hover{
  color: #ef5350;
}
.dark-mode .settings-mobile-avatar-remove:active {
  color: #ef5350;
}
.dark-mode .settings-mobile-logout {
  background: rgba(255,255,255,0.05);
}
.dark-mode .settings-mobile-logout-btn {
  color: #ef5350;
  background: transparent;
}
html:not([data-input="touch"]) .dark-mode .settings-mobile-logout-btn:hover{
  background: rgba(239,83,80,0.08);
}
.dark-mode .settings-mobile-logout-btn:active {
  background: rgba(239,83,80,0.08);
}
/* --- Mobile memory backdrop + entry + sub-panel dark mode --- */
.dark-mode .settings-memory-backdrop,
.dark-mode-active .settings-memory-backdrop {
  background: rgba(0,0,0,0.6);
}
.dark-mode .settings-memory-entry {
  background: rgba(255,255,255,0.05);
}
.dark-mode .settings-memory-entry-chevron,
.dark-mode-active .settings-memory-entry-chevron,
.dark-mode .studio-dna-quickadd,
.dark-mode-active .studio-dna-quickadd {
  color: rgba(255,255,255,0.3);
}
.dark-mode .settings-memory-subpanel,
.dark-mode-active .settings-memory-subpanel {
  background: #212121;
}
/* --- Credits tab content --- */
.dark-mode .settings-row-chevron {
  color: rgba(255,255,255,0.3);
}

/* --- Dark mode avatar backgrounds (visible against #212121) --- */
.dark-mode .sidebar-account-menu-avatar {
  background: #444;
}
.dark-mode .sidebar-account-btn-avatar {
  background: #444;
}
.dark-mode .edit-profile-avatar-circle {
  background: #444;
}
@media (max-width: 768px), (max-height: 500px) {
  .dark-mode .settings-mobile-avatar {
    background: #444;
  }
}

/* --- Sidebar footer: account button + credits --- */
.dark-mode .sidebar-account-btn-name {
  color: rgba(255,255,255,0.9);
}
.dark-mode .sidebar-account-btn-email {
  color: rgba(255,255,255,0.45);
}

/* 训练台的聊天历史行:一行 = 名字 + 改名钮 + 年龄。按钮壳整件复用 .chat-history-action-btn
   (24×24 / 圆角 / hover 全在它那儿),这里只补两件它在弹窗里拿不到的:侧栏那条把图标压到 16px 的
   规则被 .sidebar-item 圈着进不来;三个孩子在 space-between 下会散开,所以让按钮把自己和年龄一起靠右。 */
.project-settings-cards .settings-row .chat-history-action-btn svg { width: var(--icon-size-sm); height: var(--icon-size-sm); }
/* ★这颗钮的基类【默认 opacity:0】—— 它在侧栏是"鼠标扫到那一行才现身"的,现身那条规则写在
   .sidebar-item:hover 上。弹窗里没有 .sidebar-item,所以只搬壳不搬现身机制 = 两个模式下都隐形
   (owner 2026-09-04 在夜间先看见)。弹窗列表就几行、还要能用手指点,这里【常驻可见】。 */
.project-settings-cards .settings-row .chat-history-action-btn { margin-left: auto; margin-right: 10px; opacity: 1; }

/* Report a problem (settings): the dialog reuses the markup dialog wholesale; only the screenshot intake row is its own. */
.duo-bug-text { width: 100%; box-sizing: border-box; margin: 10px 0 0; }
.duo-bug-shot { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.duo-bug-hint { font-size: 12px; color: var(--color-text-secondary); }
.duo-bug-stage[hidden] { display: none; }
/* Settings > Feedback > Sent reports: the memory manager's shell; the list keeps air above and below on both
   form factors (owner 2026-09-06), which the memory list does not. Rows are its rows, made tappable. */
.bug-list-content .memory-manage-list { padding: 8px 0 16px; }
.memory-manage-item.bug-list-item { align-items: center; gap: 12px; }   /* button chrome + chevron colour: .settings-storage-entry, the row wears both classes */
.bug-list-date { font-size: 12px; color: var(--color-text-secondary); }
.bug-list-status { flex-shrink: 0; font-size: 14px; color: var(--color-text-secondary); }
.memory-manage-item.bug-detail-fact { align-items: center; }
.bug-detail-note { white-space: pre-wrap; }
.memory-manage-item.bug-detail-mark { align-items: baseline; }
.bug-detail-n { font-size: 11px; font-weight: 500; color: var(--color-text-secondary); flex-shrink: 0; margin-right: 8px; }
.bug-detail-shot { margin: 16px 20px 0; border-radius: var(--img-radius); overflow: hidden; border: 1px solid var(--color-border); }
.bug-detail-shot img { display: block; width: 100%; height: auto; }
.bug-detail-heading { font-size: 12px; color: var(--color-text-secondary); padding: 20px 20px 6px; }
@media (max-width: 768px), (max-height: 500px) {
  #bugListModal, #bugDetailModal { align-items: flex-end; }
  .memory-manage-content.bug-list-content .memory-manage-list { padding: 20px 16px 24px; }
  .bug-detail-shot { margin: 16px 0 0; }
  .bug-detail-heading { padding: 20px 16px 6px; }
}