/* BrewFans — responsive beer brewing tools */

:root {
  --radius: 12px;
  --font: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --maxw: 1000px;
  /* 顶栏底部分割线上下留白一致（与 .main-content 上边距同步） */
  --site-header-border-gap: 0.7rem;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1419;
  --surface: #1a222d;
  --surface2: #232d3a;
  --text: #e8eaed;
  --text-body: #d3dae2;
  --muted: #9aa5b1;
  --accent: #c9a227;
  --accent-dim: #8b6914;
  --ok: #3d9a5f;
  --border: #2d3a4a;
  --accent-rgb: 201, 162, 39;
  --ok-rgb: 61, 154, 95;
  --warning-rgb: 201, 162, 39;
  --bg-gradient-accent: rgba(var(--accent-rgb), 0.12);
  --bg-gradient-ok: rgba(61, 154, 95, 0.06);
  --btn-gradient-start: #d4b33d;
  --btn-gradient-mid: #c9a227;
  --btn-gradient-end: #b89220;
  --btn-primary-border-hover: #e0bc4a;
  --on-accent: #0f1419;
  --focus-ring: rgba(var(--accent-rgb), 0.2);
  --focus-ring-strong: rgba(var(--accent-rgb), 0.28);
  --accent-surface-faint: rgba(var(--accent-rgb), 0.06);
  --accent-surface: rgba(var(--accent-rgb), 0.1);
  --accent-surface-muted: rgba(var(--accent-rgb), 0.12);
  --accent-surface-strong: rgba(var(--accent-rgb), 0.14);
  --accent-surface-hover: rgba(var(--accent-rgb), 0.2);
  --accent-border-faint: rgba(var(--accent-rgb), 0.22);
  --accent-border-subtle: rgba(var(--accent-rgb), 0.35);
  --accent-border: rgba(var(--accent-rgb), 0.42);
  --accent-border-strong: rgba(var(--accent-rgb), 0.45);
  --accent-border-emphasis: rgba(var(--accent-rgb), 0.5);
  --accent-border-focus: rgba(var(--accent-rgb), 0.55);
  --accent-border-active: rgba(var(--accent-rgb), 0.85);
  --accent-meter-track: rgba(var(--accent-rgb), 0.28);
  --accent-meter-fill: rgba(var(--accent-rgb), 0.52);
  --accent-meter-edge: rgba(var(--accent-rgb), 0.55);
  --accent-text-soft: rgba(var(--accent-rgb), 0.75);
  --panel-bar: var(--ok);
  --table-divider: var(--border);
  --auth-checkbox-row-bg: rgba(26, 34, 45, 0.65);
  --nav-toggle-hover-text: #f2e5b8;
  --nav-toggle-active-text: #f8ebbe;
  --danger: #e8a0a0;
  --danger-border: #8b4d4d;
  --danger-soft: #f0a8a8;
  --danger-soft-alt: #f2b4b4;
  --success-soft: #a8d4a8;
  --success-soft-alt: #b4e8d0;
  --info-soft: #c8dcf0;
  --info-soft-alt: #b4dafb;
  --warning-soft: #f0d990;
  --warning-soft-alt: #e8c9a0;
  --warning-soft-alt2: #f0c4a0;
  --hint-warm: #c8bc98;
  --shadow-sm: none;
  --shadow-md: none;
  --input-bg: var(--bg);
  --overlay-panel-bg: var(--surface);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface2: #eef1f6;
  --text: #1a222d;
  --text-body: #334155;
  --muted: #64748b;
  --accent: #6498d8;
  --accent-dim: #5288c8;
  --ok: #2a7a4a;
  --border: #e2e8f0;
  --accent-rgb: 100, 152, 216;
  --ok-rgb: 42, 122, 74;
  --warning-rgb: 154, 114, 0;
  --bg-gradient-accent: rgba(100, 152, 216, 0.11);
  --bg-gradient-ok: rgba(var(--accent-rgb), 0.03);
  --btn-gradient-start: #9fc0e8;
  --btn-gradient-mid: #6498d8;
  --btn-gradient-end: #5288c8;
  --btn-primary-border-hover: #72a6de;
  --on-accent: #ffffff;
  --focus-ring: rgba(100, 152, 216, 0.28);
  --focus-ring-strong: rgba(100, 152, 216, 0.38);
  --nav-toggle-hover-text: #5c86b5;
  --nav-toggle-active-text: #4680b8;
  --accent-surface-faint: rgba(var(--accent-rgb), 0.04);
  --accent-surface: rgba(var(--accent-rgb), 0.06);
  --accent-surface-muted: rgba(var(--accent-rgb), 0.07);
  --accent-surface-strong: rgba(var(--accent-rgb), 0.09);
  --accent-surface-hover: rgba(var(--accent-rgb), 0.12);
  --accent-border-faint: rgba(var(--accent-rgb), 0.12);
  --accent-border-subtle: rgba(var(--accent-rgb), 0.18);
  --accent-border: rgba(var(--accent-rgb), 0.22);
  --accent-border-strong: rgba(var(--accent-rgb), 0.26);
  --accent-border-emphasis: rgba(var(--accent-rgb), 0.32);
  --accent-border-focus: rgba(var(--accent-rgb), 0.38);
  --accent-border-active: rgba(var(--accent-rgb), 0.45);
  --accent-meter-track: rgba(var(--accent-rgb), 0.14);
  --accent-meter-fill: rgba(var(--accent-rgb), 0.28);
  --accent-meter-edge: rgba(var(--accent-rgb), 0.35);
  --accent-text-soft: rgba(var(--accent-rgb), 0.85);
  --panel-bar: var(--accent);
  --table-divider: #d8e0ea;
  --auth-checkbox-row-bg: var(--accent-surface-faint);
  --nav-pill-bg: #e4ebf3;
  --nav-pill-border: #c5d0de;
  --nav-pill-color: #334155;
  --nav-pill-hover-bg: #d9e3ef;
  --nav-pill-hover-color: #1a222d;
  --nav-pill-active-bg: rgba(var(--accent-rgb), 0.14);
  --nav-pill-active-color: #426889;
  --nav-account-border: #b0bdd0;
  --nav-account-color: #475569;
  --nav-account-hover-bg: rgba(var(--accent-rgb), 0.08);
  --danger: #b54a4a;
  --danger-border: #d4a0a0;
  --danger-soft: #b54a4a;
  --danger-soft-alt: #9f4040;
  --success-soft: #2a7a4a;
  --success-soft-alt: #256b40;
  --info-soft: #3b6ea8;
  --info-soft-alt: #2f5f96;
  --warning-soft: #9a7200;
  --warning-soft-alt: #856000;
  --warning-soft-alt2: #7a5a10;
  --hint-warm: #6b6355;
  --shadow-sm: 0 1px 3px rgba(15, 20, 25, 0.08);
  --shadow-md: 0 4px 12px rgba(15, 20, 25, 0.1);
  --input-bg: #ffffff;
  --overlay-panel-bg: #ffffff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* 预留滚动条槽位，减少弹层开关时的页面横向跳动 */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-body);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -20%, var(--bg-gradient-accent), transparent),
    radial-gradient(ellipse 80% 50% at 100% 50%, var(--bg-gradient-ok), transparent);
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.wrap {
  width: min(100% - 2rem, var(--maxw));
  margin-inline: auto;
  padding-block: 1.5rem 3rem;
}

.site-header {
  padding: 1rem 0 var(--site-header-border-gap);
  border-bottom: 1px solid var(--border);
}

.site-header__top {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}

.site-header__top .site-title {
  flex: 1 1 auto;
  min-width: 0;
}

.site-header__top .nav-tools--account {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.site-title {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.site-title a {
  color: inherit;
  text-decoration: none;
}

.site-title a:hover {
  text-decoration: none;
  opacity: 0.92;
}

.site-title a {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08rem;
}

.site-title__cn {
  font-size: clamp(1.05rem, 2.5vw, 1.2rem);
  line-height: 1.05;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.site-title__en {
  font-size: clamp(1.35rem, 3.5vw, 1.9rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text);
}

.site-tagline {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.nav-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* 仅工具导航一行与品牌区留白；顶栏账户按钮无额外上边距 */
.site-header > .nav-tools:not(.nav-tools--account) {
  margin-top: 1.25rem;
}

.site-header__top .nav-tools {
  margin-top: 0;
}

.nav-tools a {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  background: var(--nav-pill-bg, var(--surface2));
  border: 1px solid var(--nav-pill-border, var(--border));
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--nav-pill-color, var(--text));
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.nav-tools a:hover {
  background: var(--nav-pill-hover-bg, var(--surface));
  border-color: var(--accent-dim);
  color: var(--nav-pill-hover-color, var(--text));
  text-decoration: none;
}

.nav-tools a.is-active {
  border-color: var(--accent-dim);
  background: var(--nav-pill-active-bg, var(--accent-surface-muted));
  color: var(--nav-pill-active-color, var(--text));
  font-weight: 600;
}

/* 桌面：工具导航固定网格，每行最多 8 个 */
@media (min-width: 720px) {
  .site-header__nav-main-wrap {
    margin-top: 0.2rem;
  }

  .site-header__nav-main.nav-tools--main {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: stretch;
    gap: 0.35rem 0.38rem;
  }

  .site-header__nav-main.nav-tools--main a {
    width: 100%;
    min-width: 0;
    padding: 0.28rem 0.42rem;
    font-size: 0.78rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }
}

/* 账户行：线框轻量按钮，与上方工具导航实心 pill 区分 */
.nav-tools.nav-tools--account {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.nav-tools.nav-tools--account a {
  background: transparent;
  border: 1px solid var(--nav-account-border, rgba(157, 165, 177, 0.4));
  color: var(--nav-account-color, var(--muted));
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 0.15rem 0.55rem;
  border-radius: 6px;
}

.nav-tools.nav-tools--account a:hover {
  background: var(--nav-account-hover-bg, rgba(255, 255, 255, 0.05));
  border-color: var(--accent-dim);
  color: var(--nav-pill-hover-color, var(--text));
}

.nav-tools.nav-tools--account a.is-active {
  border-color: var(--accent-dim);
  color: var(--nav-pill-active-color, var(--accent));
  background: var(--nav-pill-active-bg, var(--accent-surface-faint));
}

/* 移动端顶栏：品牌 + 汉堡，全部导航进抽屉（方案 A） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header__menu-btn {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--nav-pill-border, var(--border));
  border-radius: var(--radius);
  background: var(--nav-pill-bg, var(--surface2));
  color: var(--nav-pill-color, var(--text));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.site-header__menu-btn:hover {
  border-color: var(--accent-dim);
  background: var(--nav-pill-hover-bg, var(--surface));
  color: var(--nav-pill-hover-color, var(--text));
}

.site-header__menu-icon {
  display: block;
  width: 1.25rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.site-nav-drawer {
  --site-nav-drawer-dur: 0.28s;
  --site-nav-drawer-ease: cubic-bezier(0.4, 0, 0.2, 1);
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear var(--site-nav-drawer-dur);
}

.site-nav-drawer.site-nav-drawer--open {
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.site-nav-drawer__backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.52);
  opacity: 0;
  transition: opacity var(--site-nav-drawer-dur) var(--site-nav-drawer-ease);
}

.site-nav-drawer--open .site-nav-drawer__backdrop {
  opacity: 1;
}

.site-nav-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(20rem, 92vw);
  max-height: 100%;
  padding: 0.7rem 0.85rem 1.2rem;
  overflow-y: auto;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -10px 0 28px rgba(0, 0, 0, 0.4);
  transform: translateX(100%);
  transition: transform var(--site-nav-drawer-dur) var(--site-nav-drawer-ease);
  will-change: transform;
}

.site-nav-drawer--open .site-nav-drawer__panel {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .site-nav-drawer {
    --site-nav-drawer-dur: 0.01ms;
  }

  .site-nav-drawer__panel {
    will-change: auto;
  }
}

.site-nav-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.site-nav-drawer__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  color: var(--text);
  line-height: 1.3;
}

.site-nav-drawer__close {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.site-nav-drawer__close:hover {
  color: var(--text);
  border-color: var(--accent-dim);
}

.site-nav-drawer__tagline {
  margin: -0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.45;
}

.site-nav-drawer__tagline--compact {
  font-size: 0.76rem;
  line-height: 1.35;
  max-width: 19rem;
}

.site-nav-drawer__section-label {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-nav-drawer__section-label--account {
  margin: 0.15rem 0 0.4rem;
}

.site-nav-drawer__section-label--pages {
  margin: 0.2rem 0 0.4rem;
}

.site-nav-drawer__account-wrap {
  margin-top: 0.1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--border);
}

.site-nav-drawer__nav {
  margin: 0;
}

.site-nav-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.site-nav-drawer__list-note {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav-drawer__list[hidden] {
  display: none !important;
}

.site-nav-drawer__list-split {
  list-style: none;
  height: 0;
  margin: 0.2rem 0 0.35rem;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--border);
  align-self: stretch;
}

.site-nav-drawer__account-email {
  display: block;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0.45rem 0.65rem;
  border-radius: 10px;
  border: 1px dashed var(--border);
  font-size: 0.8rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-nav-drawer__logout-form {
  margin: 0;
  padding: 0;
  display: block;
}

.site-nav-drawer__link {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 44px;
  width: 100%;
  padding: 0.4rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.site-nav-drawer__link:hover {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--accent-dim);
}

.site-nav-drawer__link:visited {
  color: var(--text);
}

.site-nav-drawer__group-panel .site-nav-drawer__link:visited {
  color: var(--text);
}

.site-nav-drawer__group-panel .site-nav-drawer__link:focus-visible {
  outline: 2px solid var(--accent-border-focus);
  outline-offset: 1px;
  border-color: var(--accent-border-focus);
}

.site-nav-drawer__link.is-active {
  font-weight: 650;
  color: var(--accent);
  background: var(--accent-surface-strong);
  border-color: var(--accent-border-strong);
  box-shadow: inset 3px 0 0 var(--accent);
}

.site-nav-drawer__link--page::after {
  content: none;
}

.site-nav-drawer__link--cta {
  justify-content: center;
  border-style: dashed;
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.site-nav-drawer__link--cta::after {
  content: none;
}

.site-nav-drawer__sections {
  margin-top: 0.55rem;
}

.site-nav-drawer__group + .site-nav-drawer__group {
  margin-top: 0.5rem;
}

.site-nav-drawer__group-title {
  margin: 0;
}

.site-nav-drawer__group-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0.38rem 0.78rem;
  border: 1px solid rgba(157, 165, 177, 0.3);
  border-radius: 12px;
  background: rgba(232, 234, 237, 0.06);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .site-nav-drawer__group-toggle:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--nav-toggle-hover-text);
  }
}

.site-nav-drawer__group-toggle::after {
  content: '\203A';
  margin-inline-start: auto;
  transform: rotate(90deg);
  transition: transform 0.2s ease;
  opacity: 0.6;
}

.site-nav-drawer__group-toggle[aria-expanded="true"] {
  border-color: rgba(var(--accent-rgb), 0.64);
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--nav-toggle-active-text);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.18);
}

.site-nav-drawer__group-toggle[aria-expanded="true"]::after {
  transform: rotate(-90deg);
  opacity: 0.9;
}

.site-nav-drawer__group-panel {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0.3rem;
  padding-inline: 0.45rem 0.2rem;
  border-left: none;
  opacity: 0;
  pointer-events: none;
  transition: grid-template-rows 0.24s ease-out, opacity 0.2s ease-out;
}

.site-nav-drawer__group-panel--ready {
  min-height: 0;
}

.site-nav-drawer__group-panel--open {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: auto;
}

.site-nav-drawer__group-panel--no-motion {
  transition: none !important;
}

.site-nav-drawer__group-panel .site-nav-drawer__list {
  gap: 0.35rem;
}

.site-nav-drawer__group-panel > .site-nav-drawer__nav {
  min-height: 0;
  overflow: hidden;
}

.site-nav-drawer__group-panel .site-nav-drawer__link {
  min-height: 42px;
  padding: 0.34rem 0.62rem;
  border-color: rgba(157, 165, 177, 0.25);
  background: rgba(255, 255, 255, 0.015);
  font-size: 0.86rem;
  font-weight: 500;
}

.site-nav-drawer__group-panel .site-nav-drawer__link.is-active {
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .site-nav-drawer__group-panel {
    transition: none !important;
  }
}

body.site-nav-drawer-open {
  overflow: hidden;
}

@media (max-width: 719px) {
  .wrap {
    padding-block: max(0.35rem, env(safe-area-inset-top, 0px)) 3rem;
  }

  .site-header__top {
    padding-right: 3.35rem;
  }

  .site-header {
    padding: 0.3rem 0 var(--site-header-border-gap);
  }

  .site-header__account--desktop {
    display: none !important;
  }

  .site-header__tagline--desktop {
    display: none !important;
  }

  .site-header__nav-main {
    display: none !important;
  }

  .site-header__menu-btn {
    display: inline-flex;
    position: fixed;
    top: var(--site-menu-btn-fixed-top, calc(max(0.35rem, env(safe-area-inset-top, 0px)) + 0.3rem));
    right: 1rem;
    z-index: 2100;
  }

  body.site-nav-drawer-open .site-header__menu-btn {
    opacity: 0;
    pointer-events: none;
  }

  .site-footer__icp {
    display: none;
  }
}

.main-content {
  padding-top: var(--site-header-border-gap);
}

.home-notices {
  margin: 1rem 0 1.75rem;
  padding: 1.25rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-left: 4px solid var(--accent);
}

.home-notices__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.home-notices__item {
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.home-notices__item:first-child {
  padding-top: 0;
  border-top: none;
}

.home-notices__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.35rem;
}

.home-notices__item-title {
  font-size: 0.98rem;
  font-weight: 650;
  color: var(--text);
}

.home-notices__date {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

.home-notices__body {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.55;
}

.home-hero {
  margin-top: 0.5rem;
}

.home-title {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
  font-weight: 650;
}

.home-lead {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.tool-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

@media (min-width: 560px) {
  .tool-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tool-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 100%;
  padding: 1.15rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.tool-card:hover {
  border-color: var(--accent-dim);
  background: var(--surface2);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.tool-card--disabled {
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
  border-color: rgba(157, 165, 177, 0.35);
}

.tool-card__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.tool-card__name {
  font-size: 1.1rem;
  font-weight: 650;
}

.tool-card__desc {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: auto;
}

section.tool {
  margin-top: 2.5rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  scroll-margin-top: 1rem;
}

/* 与首页 .home-hero 顶距一致，避免工具页首块相对导航线留白过大 */
.main-content > section.tool:first-child {
  margin-top: 0.5rem;
}

section.tool h2 {
  margin: 0 0 0.25rem;
  font-size: 1.35rem;
  font-weight: 650;
}

/* 正文阅读优化：正文色比标题更柔和，降低高对比带来的刺眼感 */
section.tool.tool--page p:not(.hint),
section.tool.tool--page li {
  color: var(--text-body);
}

section.tool .hint {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* 404：与全站工具页一致，附大号水印与请求路径提示 */
section.tool.error-page {
  position: relative;
  overflow: hidden;
}

section.tool.error-page::before {
  content: '404';
  position: absolute;
  right: 0.75rem;
  top: 0.35rem;
  font-size: clamp(2.75rem, 14vw, 4.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--border);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

section.tool.error-page.error-page--503::before {
  content: '503';
}

section.tool.error-page.error-page--500::before {
  content: '500';
}

.error-page__inner {
  position: relative;
  z-index: 1;
}

.error-page__path {
  margin: 0 0 1.25rem;
  font-size: 0.88rem;
  color: var(--muted);
  word-break: break-all;
}

.error-page__path-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  opacity: 0.85;
}

.error-page__path-value {
  display: inline-block;
  max-width: 100%;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.4;
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
}

a.error-page__cta {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--accent-dim);
  background: var(--accent-surface-muted);
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

a.error-page__cta:hover {
  background: var(--accent-surface-hover);
  text-decoration: none;
}

a.error-page__cta.error-page__cta--secondary {
  background: transparent;
}

.error-page__hint-inline {
  font-size: 0.88rem;
  color: var(--muted);
}

/* 计算器页：移动端首段说明可折叠（由 tool-hint-expandable.js 注入容器） */
.tool-hint-collapsible {
  margin: 0 0 1.25rem;
}

.tool-hint-collapsible .hint {
  margin: 0;
}

section.tool .tool-hint-collapsible .hint.priming-bjcp-hint {
  margin: 0;
}

.tool-hint-collapsible__toggle {
  display: none;
  align-items: center;
  align-self: flex-end;
  gap: 0.35rem;
  margin: -0.05rem 0 0;
  padding: 0.08rem 0.35rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.tool-hint-collapsible__toggle:hover {
  text-decoration: underline;
}

.tool-hint-collapsible__arrow::before {
  content: '';
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-bottom: 0.1rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.tool-hint-collapsible.is-expanded .tool-hint-collapsible__arrow::before {
  transform: rotate(225deg);
  margin-bottom: -0.05rem;
}

@media (max-width: 719px) {
  .tool-hint-collapsible {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .tool-hint-collapsible__toggle {
    display: inline-flex;
  }

  .tool-hint-collapsible:not(.is-expanded) .hint {
    overflow: hidden;
    max-height: calc(0.9rem * 1.55 * 1.5);
  }

  .tool-hint-collapsible:not(.is-expanded) .hint.priming-bjcp-hint {
    max-height: calc(0.82rem * 1.5 * 1.5);
  }

  .tool-hint-collapsible:not(.is-expanded) .hint.water-ion-delta-hint {
    max-height: calc(0.8rem * 1.5 * 1.5);
  }

  .tool-hint-collapsible .hint {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* 风格菜单下 BJCP 说明：正文与展开按钮间距略大于页首大标题下说明 */
  .tool-hint-collapsible.tool-hint-collapsible--bjcp {
    row-gap: 0.5rem;
  }

  .tool-hint-collapsible--bjcp .tool-hint-collapsible__toggle {
    margin-top: 0;
  }
}

@media (min-width: 720px) {
  .tool-hint-collapsible .hint {
    max-height: none !important;
    overflow: visible !important;
    cursor: inherit;
  }

  .tool-hint-collapsible__toggle {
    display: none !important;
  }
}

.tool-hint-collapsible.tool-hint-collapsible--bjcp {
  margin: -0.35rem 0 0.75rem;
}

.tool-hint-collapsible.tool-hint-collapsible--water-ion-delta {
  margin: 0 0 0.55rem;
}

section.tool .hint.priming-bjcp-hint {
  margin: -0.35rem 0 0.75rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}

.formula-guide .row h3 {
  margin: 0 0 0.15rem;
  padding: 0.45rem 0.7rem;
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  background: var(--accent-surface);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
}

.changelog-page .changelog-period {
  margin: 1rem 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--text);
}

.changelog-page .row:first-of-type .changelog-period {
  margin-top: 0.35rem;
}

.changelog-page .changelog-list {
  margin: 0 0 0.35rem;
  padding-left: 1.25rem;
  line-height: 1.55;
}

.changelog-page .changelog-list li + li {
  margin-top: 0.5rem;
}

.homebrew-guide h3[id] {
  scroll-margin-top: 4.75rem;
}

.guide-toc {
  margin: 0 0 1.35rem;
  padding: 0.85rem 1rem 0.95rem;
  border-radius: 8px;
  border: 1px solid rgba(232, 234, 237, 0.12);
  background: rgba(232, 234, 237, 0.06);
  box-sizing: border-box;
}

.guide-toc__title {
  margin: 0 0 0.55rem;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
}

.guide-toc__list {
  margin: 0;
  padding-left: 1.35rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text);
}

.guide-toc__list li {
  margin: 0.2rem 0;
}

.guide-toc__list a {
  color: var(--accent);
  text-decoration: none;
}

.guide-toc__list a:hover {
  text-decoration: underline;
}

.guide-toc--collapsible .guide-toc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.guide-toc--collapsible .guide-toc__title {
  margin: 0;
}

.guide-toc--collapsible .guide-toc__panel {
  margin-top: 0.55rem;
}

.guide-toc--collapsible .guide-toc__panel[hidden] {
  display: none;
}

/* 家酿入门：章节导航吸顶窄条（由 homebrew-guide-toc.js 在页内 TOC 滑出视口上方后显示） */
.guide-toc-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1900;
  display: none;
  justify-content: center;
  pointer-events: none;
}

.guide-toc-bar.is-pinned {
  display: flex;
  pointer-events: auto;
}

/* 与页内 #guide-toc-flow 一致：.wrap 宽度 min(100% - 2rem, maxw) 减去 section.tool 左右 padding 各 1.5rem */
.guide-toc-bar__inner {
  width: calc(min(100% - 2rem, var(--maxw)) - 3rem);
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.guide-toc-bar__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.4rem;
  padding: 0.35rem 0.85rem 0.45rem;
  padding-top: max(0.35rem, env(safe-area-inset-top, 0px));
  padding-left: max(0.85rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.85rem, env(safe-area-inset-right, 0px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.38);
}

@media (max-width: 719px) {
  .guide-toc-bar__strip {
    padding-right: max(3.25rem, env(safe-area-inset-right, 0px));
  }
}

.guide-toc-bar.is-expanded .guide-toc-bar__strip {
  border-radius: 0;
  border-bottom: none;
  box-shadow: none;
}

.guide-toc-bar__label {
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guide-toc-bar__toggle {
  flex: 0 0 auto;
  padding: 0.3rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 650;
  font-family: inherit;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}

.guide-toc-bar__toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.guide-toc-bar__panel {
  max-height: min(55vh, 22rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.4rem 0.85rem 0.65rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
}

.guide-toc-bar__list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.88rem;
  line-height: 1.5;
}

.guide-toc-bar__list li {
  margin: 0.22rem 0;
}

.guide-toc-bar__list a {
  color: var(--accent);
  text-decoration: none;
}

.guide-toc-bar__list a:hover {
  text-decoration: underline;
}

.guide-toc-bar--animate.is-pinned {
  animation: guide-toc-bar-in 0.22s ease-out;
}

@keyframes guide-toc-bar-in {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide-toc-bar--animate.is-pinned {
    animation: none;
  }
}

/* 家酿入门：章节之间留白（与 .row 内 grid gap 叠加，避免块贴太紧） */
.homebrew-guide > .row + .row {
  margin-top: 1rem;
}

/* 「本站工具」：与章节标题（金边 h3）区分 — 虚线框 + 冷灰底，偏补充说明而非小节标题 */
.homebrew-guide .guide-tools {
  margin: 0.85rem 0 1.85rem;
  padding: 0.65rem 1rem 0.7rem;
  border-radius: 10px;
  border: 1px dashed rgba(148, 168, 192, 0.5);
  background: rgba(95, 125, 160, 0.09);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text);
}

.homebrew-guide .guide-tools strong {
  display: inline-block;
  margin-right: 0.25rem;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.homebrew-guide .guide-tools a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 550;
}

.homebrew-guide .guide-tools a:hover {
  text-decoration: underline;
}

/* 家酿入门：可点击名词（释义浮层由 homebrew-guide-terms.js 控制） */
.homebrew-guide .hg-term {
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px dashed var(--accent-border-focus);
  background: transparent;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
  vertical-align: baseline;
}

.homebrew-guide .hg-term:hover,
.homebrew-guide .hg-term:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
  outline: none;
}

.homebrew-guide .hg-term:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-border-subtle);
  border-radius: 2px;
}

.hg-term-layer {
  position: fixed;
  inset: 0;
  z-index: 1955;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top, 0px)) 1.25rem 1.25rem;
  box-sizing: border-box;
}

.hg-term-layer[hidden] {
  display: none !important;
}

.hg-term-layer__backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(10, 14, 18, 0.58);
  cursor: pointer;
}

.hg-term-layer__card {
  position: relative;
  z-index: 1;
  width: min(22rem, 100%);
  max-height: min(75vh, 26rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.05rem 1.15rem 1.1rem;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.hg-term-layer__close {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hg-term-layer__close:hover,
.hg-term-layer__close:focus-visible {
  color: var(--text);
  background: rgba(232, 234, 237, 0.08);
  outline: none;
}

.hg-term-layer__title {
  margin: 0 2.25rem 0.55rem 0;
  padding: 0;
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--text);
}

.hg-term-layer__body {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text);
}

.hg-term-layer__body p {
  margin: 0 0 0.65rem;
}

.hg-term-layer__body p:last-child {
  margin-bottom: 0;
}

.hg-term-layer__body a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 550;
}

.hg-term-layer__body a:hover {
  text-decoration: underline;
}

form.calc {
  display: grid;
  gap: 1rem;
}

.priming-co2-meter-row {
  gap: 0.5rem;
}

/* 二发加糖：目标 CO₂ 输入区（卡片：一行主操作 + 脚注） */
.priming-co2-target-card {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  background: rgba(232, 234, 237, 0.06);
  border: 1px solid rgba(232, 234, 237, 0.12);
  box-sizing: border-box;
}

.priming-co2-target-card__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.priming-co2-target-card__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--text);
}

.priming-co2-target-card__control {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.priming-co2-target-card__label {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.priming-co2-target-card__input {
  width: 5rem;
  min-width: 4rem;
  max-width: 100%;
  margin: 0;
  padding: 0.4rem 0.5rem;
  font-size: 0.95rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.priming-co2-target-card__unit {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.priming-co2-target-card__note {
  margin: 0.45rem 0 0;
  padding: 0;
  font-size: 0.68rem;
  line-height: 1.45;
  font-weight: 400;
  color: var(--muted);
  opacity: 0.92;
}

@media (max-width: 520px) {
  .priming-co2-target-card__main {
    flex-direction: column;
    align-items: stretch;
  }

  .priming-co2-target-card__control {
    justify-content: flex-start;
  }
}

.priming-co2-meter-readout {
  font-size: 0.95rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}

.priming-co2-meter__unit {
  margin-left: 0.15rem;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.85rem;
}

.priming-co2-meter {
  position: relative;
  width: 100%;
  height: 0.5rem;
  margin: 0.55rem 0 0;
  border-radius: 999px;
  user-select: none;
  pointer-events: auto;
  cursor: default;
  touch-action: manipulation;
  overflow: visible;
}

.priming-co2-meter__track {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to right,
    var(--surface2),
    var(--accent-meter-track)
  );
  box-shadow: inset 0 0 0 1px rgba(232, 234, 237, 0.1);
  cursor: pointer;
}

.priming-co2-meter__band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0%;
  z-index: 1;
  border-radius: inherit;
  background: var(--accent-meter-fill);
  box-shadow:
    inset 0 0 0 1px var(--accent-meter-edge),
    inset 0 0 0 2px rgba(255, 255, 255, 0.12);
  transition: left 0.18s ease, width 0.18s ease, opacity 0.15s ease;
  pointer-events: none;
}

/* 区间左右端点竖线（与三角标区分：标示 min / max） */
.priming-co2-meter__band::before,
.priming-co2-meter__band::after {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: 1px;
  background: rgba(120, 88, 18, 0.92);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.priming-co2-meter__band::before {
  left: 0;
  transform: translateX(-0.5px);
}

.priming-co2-meter__band::after {
  right: 0;
  transform: translateX(0.5px);
}

.priming-co2-meter--empty .priming-co2-meter__band {
  opacity: 0;
  transition: none;
}

.priming-co2-meter__marker-wrap {
  position: absolute;
  left: 0%;
  bottom: 100%;
  z-index: 2;
  transform: translateX(-50%);
  margin-bottom: 1px;
  padding: 0.4rem 0.65rem;
  margin-left: 0;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  transition: left 0.18s ease;
}

.priming-co2-meter__marker-wrap.is-dragging {
  cursor: grabbing;
  transition: none;
}

.priming-co2-meter__marker {
  position: relative;
  width: 0.75rem;
  height: 0.48rem;
  margin: 0 auto;
  background: var(--text);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

.priming-co2-meter--empty .priming-co2-meter__marker-wrap {
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.priming-co2-meter-range-hint {
  margin: 0.1rem 0 0;
  min-height: 1.25em;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.priming-co2-meter-range-hint--empty {
  margin: 0;
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.priming-co2-overmax-hint {
  margin: 0.45rem 0 0;
  padding: 0.5rem 0.65rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--warning-soft-alt2);
  background: rgba(160, 70, 45, 0.16);
  border: 1px solid rgba(200, 110, 70, 0.45);
  border-radius: 6px;
}

.priming-co2-overmax-hint[hidden] {
  display: none !important;
}

.priming-co2-meter-scale {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.25;
}

.priming-co2-meter-scale__low,
.priming-co2-meter-scale__high {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.priming-co2-meter-scale__high {
  align-items: flex-end;
  text-align: right;
}

.priming-co2-meter-scale__word {
  font-weight: 650;
  color: var(--text);
  font-size: 0.78rem;
}

.priming-co2-meter-scale__num {
  font-variant-numeric: tabular-nums;
}

.row {
  display: grid;
  gap: 0.5rem;
}

.about-contact-qrcode-wrap {
  margin: 0.25rem 0 0;
}

.about-contact-qrcode {
  display: block;
  width: min(258px, 100%);
  height: auto;
  border-radius: 8px;
}

@media (min-width: 520px) {
  .row.cols-2 {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .row.cols-3 {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
  }
}

/* 两列表单：标签独占一行，避免短标签与输入框落在同一行 */
.auth-form__field-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.auth-form__field-col label {
  display: block;
}

.auth-form__checkbox-row {
  margin: 0;
  padding: 0.55rem 0.75rem;
  background: var(--auth-checkbox-row-bg);
  border: 1px solid var(--table-divider);
  border-radius: 10px;
}

.auth-form__checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--text-body);
  cursor: pointer;
  max-width: 100%;
  user-select: none;
  transition: color 0.15s ease;
}

.auth-form__checkbox-label:hover {
  color: var(--text);
}

.auth-form__checkbox-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.auth-form__checkbox-label input[type="checkbox"]:hover {
  border-color: var(--accent-dim);
}

.auth-form__checkbox-label input[type="checkbox"]:focus {
  outline: none;
}

.auth-form__checkbox-label input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring-strong);
}

.auth-form__checkbox-label input[type="checkbox"]:checked {
  background: linear-gradient(145deg, var(--btn-gradient-start) 0%, var(--btn-gradient-mid) 55%, var(--btn-gradient-end) 100%);
  border-color: rgba(var(--accent-rgb), 0.95);
}

.auth-form__checkbox-label input[type="checkbox"]:checked:hover {
  border-color: var(--btn-primary-border-hover);
}

.auth-form__checkbox-label input[type="checkbox"]:checked:focus-visible {
  box-shadow:
    0 0 0 3px var(--focus-ring-strong),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.auth-form__checkbox-label input[type="checkbox"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.auth-form__checkbox-label input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 47%;
  width: 0.28rem;
  height: 0.52rem;
  margin: 0;
  border: solid var(--on-accent);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

label {
  font-size: 0.875rem;
  color: var(--muted);
}

input[type="number"],
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

textarea {
  min-height: 4.25rem;
  line-height: 1.45;
  resize: vertical;
  box-sizing: border-box;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

button[type="submit"] {
  justify-self: start;
  padding: 0.65rem 1.4rem;
  font: inherit;
  font-weight: 600;
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--btn-gradient-start), var(--btn-gradient-mid));
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

button[type="submit"]:hover {
  filter: brightness(1.05);
}

.result {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  background: var(--surface2);
  border-radius: 8px;
  border-left: 4px solid var(--panel-bar);
}

/* 主结果：突出数字；单位、说明性标签用 .result-line__unit */
.result-line__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.result-line__value--sub {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.result .sub .result-line__value--sub {
  font-size: 1.05rem;
}

.result-line__unit {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
}

.result .sub strong {
  font-size: inherit;
  font-weight: 600;
  color: var(--muted);
}

.result .sub {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* 个人中心：账号信息（窄屏单列，中等两列，宽屏三列以利用横向空间） */
.my-account-card__heading {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
}

.my-theme-card {
  margin-top: 1.25rem;
}

.my-theme-card__hint {
  margin: 0 0 1rem;
}

.my-theme-picker {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 560px) {
  .my-theme-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.my-theme-option {
  display: block;
  margin: 0;
  cursor: pointer;
}

.my-theme-option__card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 100%;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.my-theme-option__swatch {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  border: none;
  box-shadow: none;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.my-theme-option__swatch--light {
  background: linear-gradient(145deg, #ffffff 0%, #eef1f6 55%, #dce4ef 100%);
  box-shadow: inset 0 0 0 1px rgba(100, 152, 216, 0.32);
}

.my-theme-option__swatch--light::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: #6498d8;
}

.my-theme-option__swatch--dark {
  background: linear-gradient(145deg, #232d3a 0%, #0f1419 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.my-theme-option__swatch--dark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: #c9a227;
}

.my-theme-option__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
}

.my-theme-option__name {
  font-size: 0.98rem;
  font-weight: 650;
  color: var(--text);
}

.my-theme-option__desc {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--muted);
}

.my-theme-option__badge {
  flex: 0 0 auto;
  padding: 0.12rem 0.45rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius: 999px;
}

.my-theme-option__input:focus-visible + .my-theme-option__card {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.my-theme-option__input:checked + .my-theme-option__card {
  border-color: var(--accent);
  background: var(--surface2);
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(var(--accent-rgb), 0.18);
}

.my-theme-option__input:checked + .my-theme-option__card .my-theme-option__name {
  color: var(--accent);
}

.my-theme-card__feedback {
  margin: 0.75rem 0 0;
}

.my-theme-card__feedback[hidden] {
  display: none !important;
}

.my-account-card__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem 1rem;
}

@media (min-width: 560px) {
  .my-account-card__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .my-account-card__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.my-account-field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}

.my-account-field__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.my-account-field__value {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
}

.my-account-field__value--break {
  word-break: break-all;
}

.my-account-field__value--tabular {
  font-variant-numeric: tabular-nums;
}

.my-account-field--email .my-account-field__label-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  min-width: 0;
}

.my-account-email-toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 1.55rem;
  height: 1.55rem;
  margin: 0;
  padding: 0;
  color: var(--muted);
  background: rgba(157, 165, 177, 0.1);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

.my-account-email-toggle:hover {
  color: var(--text);
  background: rgba(157, 165, 177, 0.2);
}

.my-account-email-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.my-account-email-toggle__icon {
  display: block;
  grid-area: 1 / 1;
}

.my-account-email-toggle__icon--inactive {
  display: none !important;
}

/* 个人中心：页头（头像在标题左侧；全宽栅格避免窄屏 flex-wrap 换行） */
.my-page-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.75rem 1rem;
  margin-bottom: 0.25rem;
}

.my-page-head__title-wrap {
  min-width: 0;
}

/* 个人中心：头像 */
.my-account-avatar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.my-account-avatar--title {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.my-account-avatar--title .my-account-avatar__shell {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border);
  box-sizing: border-box;
}

.my-account-avatar--title .my-account-avatar__display {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
}

.my-account-avatar--title .my-account-avatar__placeholder {
  font-size: 1.35rem;
  padding-bottom: 12%;
  box-sizing: border-box;
}

.my-account-avatar--title .my-account-avatar__change-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 38%;
  padding: 0 2px 4px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(22, 26, 32, 0.52);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: none;
  cursor: pointer;
  box-sizing: border-box;
}

.my-account-avatar--title .my-account-avatar__change-btn:hover {
  background: rgba(22, 26, 32, 0.68);
  color: #fff;
}

.my-account-avatar--title .my-account-avatar__change-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  z-index: 1;
}

.my-account-avatar__display {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(157, 165, 177, 0.15);
  border: 1px solid var(--border);
}

.my-account-avatar__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.my-account-avatar__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  font-weight: 600;
  color: var(--muted);
  user-select: none;
}

.my-avatar-dialog {
  padding: 0;
  border: none;
  border-radius: 12px;
  max-width: calc(100vw - 2rem);
  background: var(--overlay-panel-bg);
  color: var(--text);
  box-shadow: var(--shadow-md), 0 12px 40px rgba(0, 0, 0, 0.18);
}

.my-avatar-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.my-avatar-dialog__inner {
  padding: 1rem 1.25rem 1.25rem;
  min-width: min(320px, 100vw - 2rem);
}

.my-avatar-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.my-avatar-dialog__title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}

.my-avatar-dialog__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted, #666);
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.my-avatar-dialog__close:hover {
  background: var(--border, rgba(0, 0, 0, 0.06));
  color: var(--text);
}

.my-avatar-dialog__close:focus-visible {
  outline: 2px solid var(--accent, #06c);
  outline-offset: 2px;
}

.my-avatar-canvas-wrap {
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}

.my-avatar-canvas {
  display: block;
  width: 280px;
  height: 280px;
  max-width: min(280px, calc(100vw - 4rem));
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: default;
  touch-action: none;
}

.my-avatar-dialog__actions {
  display: flex;
  justify-content: center;
  padding-top: 0.25rem;
}

.my-avatar-dialog__confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(280px, 100%);
  margin: 0;
  padding: 0.65rem 1.25rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--btn-gradient-start), var(--btn-gradient-mid));
  transition: filter 0.15s ease;
}

.my-avatar-dialog__confirm:hover:not(:disabled) {
  filter: brightness(1.04);
}

.my-avatar-dialog__confirm:focus-visible {
  outline: 2px solid var(--accent-dim);
  outline-offset: 2px;
}

.my-avatar-dialog__confirm:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* 兼容旧版 JS 结果标记（strong），确保移动端缓存旧脚本时数值仍高亮。 */
.result--abv > div strong,
.result--abv .sub strong,
.result--mash > div strong,
.result--mash .sub strong {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.result--mash .mash-result-head {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.result--mash .mash-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  align-items: stretch;
}

.result--mash .mash-result-card {
  margin: 0;
  padding: 0.8rem 0.95rem;
  background: rgba(232, 234, 237, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.result--mash .mash-result-card__caption {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.result--mash .mash-result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.result--mash .mash-result-table th,
.result--mash .mash-result-table td {
  padding: 0.08rem 0 0.38rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: bottom;
  line-height: 1.15;
}

.result--mash .mash-result-table tr:last-child th,
.result--mash .mash-result-table tr:last-child td {
  border-bottom: 0;
}

.result--mash .mash-result-table th {
  text-align: left;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--muted);
}

.result--mash .mash-result-table td {
  text-align: right;
  color: var(--text);
}

.result--mash .mash-result-table .mash-result-cell-label,
.result--mash .mash-result-table .mash-result-cell-value {
  display: inline-flex;
  align-items: flex-end;
  min-height: 1.45em;
  line-height: 1;
}

.result--mash .mash-result-table .mash-result-cell-label {
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}

.result--mash .mash-result-table .mash-result-cell-label {
  justify-content: flex-start;
}

.result--mash .mash-result-table .mash-result-cell-value {
  justify-content: flex-end;
  transform: translateY(2px);
}

.result--mash .mash-result-table td .result-line__value,
.result--mash .mash-result-table td .result-line__value--sub,
.result--mash .mash-result-table td .result-line__unit {
  display: inline-flex;
  align-items: flex-end;
  line-height: 1;
}

.result--mash .mash-result-table td .result-line__value,
.result--mash .mash-result-table td .result-line__value--sub {
  font-size: 1.14rem !important;
}

.result--mash .mash-result-table--details {
  font-size: 0.84rem;
}

.result--mash .mash-result-table--details td {
  color: var(--muted);
}

/* 体积与浸出说明：右列文字与左列同字号同色，仅数字保留黄色强调 */
.result--mash .mash-result-table--details td .result-line__value,
.result--mash .mash-result-table--details td .result-line__value--sub {
  font-size: inherit !important;
  font-weight: 700;
  color: var(--accent);
}

.result--mash .mash-result-table--details td .result-line__unit {
  font-size: inherit;
  font-weight: inherit;
  color: var(--muted);
}

.result--mash .mash-result-table--details th,
.result--mash .mash-result-table--details td {
  padding: 0.08rem 0.1rem 0.38rem;
  text-align: left;
  vertical-align: bottom;
  line-height: 1.15;
}

.result--mash .mash-result-table--details tbody td:nth-child(2) {
  text-align: right;
  white-space: normal;
  font-variant-numeric: tabular-nums;
}

.result--mash .mash-result-empty {
  text-align: left;
  color: var(--muted);
  font-style: italic;
}

.result--mash .mash-result-row {
  margin: 0.2rem 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text);
}

.result--mash .mash-result-row:first-of-type {
  margin-top: 0;
}

.result--mash .mash-result-row--meta {
  font-size: 0.84rem;
  color: var(--muted);
}

.result--mash .mash-result-card--meta {
  margin-top: 0.65rem;
}

.result--mash .result-mash-meta-line + .result-mash-meta-line {
  margin-top: 0.25rem;
}

@media (max-width: 640px) {
  .result--mash .mash-result-grid {
    grid-template-columns: 1fr;
  }

  .result--mash .mash-result-card {
    padding: 0.72rem 0.82rem;
  }

  .result--mash .mash-result-table--details thead {
    display: none;
  }

  .result--mash .mash-result-table--details tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.18rem;
    padding: 0.32rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .result--mash .mash-result-table--details tr:last-child {
    border-bottom: 0;
  }

  .result--mash .mash-result-table--details th,
  .result--mash .mash-result-table--details td {
    border: 0;
    padding: 0;
  }

  .result--mash .mash-result-table--details tbody td:nth-child(2) {
    text-align: left;
    white-space: normal;
  }
}

.ebc-ref-table__note strong,
.ibu-ref-table__note strong,
.abv-ref-table__note strong {
  font-size: inherit;
  font-weight: 600;
  color: inherit;
}

/* EBC 结果：对照色块 + 风格～EBC 对照表 */
.result--ebc .ebc-result-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.result--ebc .ebc-swatch {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.35);
}

/* 色度换算：三项横排留白，避免与色块挤在一行过紧 */
.result--ebc .ebc-result-line--color-convert {
  align-items: flex-start;
  gap: 1rem 1.25rem;
}

.color-convert-values {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.65rem 1.75rem;
  flex: 1 1 12rem;
  min-width: 0;
}

.color-convert-pair {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  white-space: nowrap;
}

.color-convert-pair strong {
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--muted);
  letter-spacing: 0.03em;
}

.color-convert-pair .color-convert-num {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.ebc-ref-wrap,
.ibu-ref-wrap,
.abv-ref-wrap,
.priming-ref-wrap {
  margin-top: 1rem;
}

.ebc-ref-table-scroll,
.ibu-ref-table-scroll,
.abv-ref-table-scroll,
.priming-sugar-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.ebc-ref-table,
.ibu-ref-table,
.abv-ref-table,
.priming-sugar-table {
  width: 100%;
  min-width: 280px;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.4;
}

.ebc-ref-table caption,
.ibu-ref-table caption,
.abv-ref-table caption,
.priming-sugar-table caption {
  caption-side: top;
  padding: 0.65rem 0.85rem 0.55rem;
  margin: 0;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.ebc-ref-table thead th,
.ibu-ref-table thead th,
.abv-ref-table thead th,
.priming-sugar-table thead th {
  padding: 0.55rem 0.65rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}

.ebc-ref-table tbody td,
.ibu-ref-table tbody td,
.abv-ref-table tbody td,
.priming-sugar-table tbody td {
  padding: 0.5rem 0.65rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.ebc-ref-table tbody td:nth-child(2),
.ibu-ref-table tbody td:nth-child(2),
.abv-ref-table tbody td:nth-child(2),
.priming-sugar-table tbody td:nth-child(3),
.priming-sugar-table tbody td:nth-child(4) {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ebc-ref-table tbody tr:last-child td,
.ibu-ref-table tbody tr:last-child td,
.abv-ref-table tbody tr:last-child td,
.priming-sugar-table tbody tr:last-child td {
  border-bottom: none;
}

.ebc-ref-table__th-swatch,
.ebc-ref-table__swatch-cell {
  width: 3.25rem;
  text-align: center;
}

.ebc-ref-table__swatch {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 1px 4px rgba(0, 0, 0, 0.25);
  vertical-align: middle;
}

.ibu-ref-table__th-meter,
.ibu-ref-table__meter-cell,
.abv-ref-table__th-meter,
.abv-ref-table__meter-cell {
  width: 3.25rem;
  text-align: center;
}

.ibu-ref-table__meter,
.abv-ref-table__meter {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 1px 4px rgba(0, 0, 0, 0.25);
  vertical-align: middle;
}

.ebc-ref-table__style,
.ibu-ref-table__style,
.abv-ref-table__style {
  min-width: 10rem;
}

.ebc-ref-table__row--match td,
.ibu-ref-table__row--match td,
.abv-ref-table__row--match td {
  background: var(--accent-surface);
}

.ebc-ref-table__row--match td:first-child,
.ibu-ref-table__row--match td:first-child,
.abv-ref-table__row--match td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

.ebc-ref-table__note,
.ibu-ref-table__note,
.abv-ref-table__note,
.priming-sugar-table__note {
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}

.ebc-ref-table__note-hi,
.ibu-ref-table__note-hi,
.abv-ref-table__note-hi,
.priming-sugar-table__note-hi {
  color: var(--accent);
  font-weight: 600;
}

.priming-sugar-table__num {
  text-align: right;
}

.priming-sugar-table__priority {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.2rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
}

.priming-sugar-table__row--recommended .priming-sugar-table__priority {
  border-color: rgba(var(--ok-rgb), 0.45);
  background: rgba(var(--ok-rgb), 0.2);
  color: var(--success-soft-alt);
}

.priming-sugar-table__row--caution .priming-sugar-table__priority {
  border-color: rgba(var(--warning-rgb), 0.45);
  background: rgba(var(--warning-rgb), 0.18);
  color: var(--warning-soft);
}

.priming-sugar-table__row--recommended td {
  background: rgba(61, 154, 95, 0.06);
}

.priming-sugar-table__row--recommended td:first-child {
  box-shadow: inset 3px 0 0 var(--ok);
}

.priming-sugar-warning {
  margin: 0.75rem 0 0;
  padding: 0.75rem 0.9rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--warning-soft-alt);
  background: rgba(var(--warning-rgb), 0.12);
  border: 1px solid rgba(var(--warning-rgb), 0.35);
  border-radius: 8px;
}

.refract-panel {
  margin-top: 0.75rem;
}

/* 折光仪：主模式 / OG 子模式 — 分段控件（segmented control） */
.refract-mode-block {
  margin: 0 0 1rem;
}

.refract-mode-block__title {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.refract-mode-block__title--sub {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}

.refract-segment {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  padding: 0.4rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.refract-segment__opt {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

.refract-segment__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.72rem 0.65rem;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid transparent;
  background: transparent;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
  min-height: 100%;
}

.refract-segment__opt:hover .refract-segment__body {
  background: rgba(255, 255, 255, 0.035);
}

.refract-segment__opt:has(input:checked) .refract-segment__body {
  background: var(--accent-surface-muted);
  border-color: var(--accent-border);
  box-shadow:
    0 0 0 1px var(--accent-surface-muted),
    0 4px 14px rgba(0, 0, 0, 0.2);
}

.refract-segment__opt:focus-within .refract-segment__body {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.refract-segment__kicker {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
}

.refract-segment__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}

.refract-segment__desc {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}

.refract-segment--compact .refract-segment__body {
  padding: 0.55rem 0.55rem;
  align-items: center;
  text-align: center;
}

.refract-segment--compact .refract-segment__title {
  font-size: 0.95rem;
}

.refract-segment--compact .refract-segment__desc {
  font-size: 0.72rem;
  line-height: 1.4;
}

.refract-og-block {
  margin: 0 0 0.75rem;
}

/* OG 两栏并排：启用态高亮 + 未选用态弱化，避免与「当前酒液 °Bx」混淆 */
.refract-og-input-panel {
  margin-bottom: 0.65rem;
  padding: 0.7rem 0.85rem 0.65rem;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--border);
  background: var(--surface);
  transition:
    opacity 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.refract-og-input-panel .row {
  margin-bottom: 0;
}

.refract-og-input-panel:has(input:not(:disabled)) {
  border-color: var(--accent-border-emphasis);
  background: var(--accent-surface-muted);
  box-shadow:
    inset 4px 0 0 var(--accent),
    0 1px 0 rgba(255, 255, 255, 0.04);
}

.refract-og-input-panel:has(input:disabled) {
  opacity: 0.5;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
}

.refract-og-input-panel label {
  display: block;
  margin-bottom: 0.75rem;
  line-height: 1.45;
}

.refract-og-input-panel:has(input:not(:disabled)) label {
  font-weight: 600;
  color: var(--text);
}

.refract-og-input-panel:has(input:disabled) label {
  color: var(--muted);
}

.refract-og-input-hint {
  margin: 0.55rem 0 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--muted);
}

.refract-og-input-panel:has(input:not(:disabled)) .refract-og-input-hint {
  color: var(--accent-text-soft);
}

.refract-og-input-panel:has(input:disabled) .refract-og-input-hint {
  opacity: 0.75;
}

.refract-og-input-panel input[type="text"]:disabled {
  cursor: not-allowed;
  opacity: 0.85;
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}

.refract-og-input-panel input[type="text"]:not(:disabled) {
  border-color: var(--accent-border-subtle);
  background: rgba(15, 20, 25, 0.65);
}

@media (max-width: 520px) {
  .refract-segment:not(.refract-segment--compact) {
    grid-template-columns: 1fr;
  }

  .refract-segment:not(.refract-segment--compact) .refract-segment__body {
    padding: 0.65rem 0.6rem;
  }
}

.refract-warning {
  margin: 0.75rem 0 0;
  padding: 0.75rem 0.9rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--info-soft);
  background: rgba(60, 120, 180, 0.12);
  border: 1px solid rgba(100, 160, 220, 0.28);
  border-radius: 8px;
}

.refract-warning + .refract-warning {
  margin-top: 0.5rem;
}

.hop-substitute-disclaimer {
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.85rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.error {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(180, 60, 60, 0.15);
  border: 1px solid rgba(180, 80, 80, 0.4);
  border-radius: 8px;
  color: var(--danger-soft);
  font-size: 0.9rem;
}

.tool,
.tool .calc,
.calc-output {
  overflow-anchor: none;
}

.calc-output:not([hidden]) {
  margin-top: 1rem;
}

.calc-output .error {
  margin-top: 0;
}

.calc-loading {
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 0.9rem;
}

button[type="submit"].is-loading {
  opacity: 0.8;
  cursor: wait;
}

/* 登录 / 注册：异步提交等待响应 */
.auth-form button[type="submit"].is-loading {
  min-width: 5.25em;
  opacity: 0.72;
  cursor: wait;
  filter: saturate(0.72) brightness(0.92);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  animation: auth-submit-pulse 1.1s ease-in-out infinite;
}

.auth-form button[type="submit"].is-loading:hover {
  filter: saturate(0.72) brightness(0.92);
}

@keyframes auth-submit-pulse {
  0%,
  100% {
    opacity: 0.72;
  }
  50% {
    opacity: 0.58;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-form button[type="submit"].is-loading {
    animation: none;
    opacity: 0.68;
  }
}

.form-section-label {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

input.input-readonly {
  cursor: default;
  opacity: 0.95;
  background: var(--surface2);
}

.hop-rows {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hop-card,
.malt-card {
  padding: 1rem;
  /* 浅于所在工具区 section.tool（--surface），便于与表单背景区分 */
  background: var(--surface2);
  border: 1px dashed var(--border);
  border-radius: 8px;
}

.hop-card__title,
.malt-card__title {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* 目录所选名称：紧跟序号，与 .malt-card__title 同字号同色 */
.malt-card__title .malt-card__pick-label {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-transform: none;
}

.item-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.item-card__head--stack {
  align-items: flex-start;
}

.item-card__head-text {
  min-width: 0;
  flex: 1;
}

/* 配方编辑：多行列表拖动排序（与删除钮同尺寸，位于其右侧） */
.recipe-row-drag-handle {
  touch-action: none;
  cursor: grab;
}

.recipe-row-drag-handle:active:not(:disabled):not(.btn-remove-row--locked) {
  cursor: grabbing;
}

.recipe-row-drag-handle:disabled,
.recipe-row-drag-handle.btn-remove-row--locked {
  cursor: not-allowed;
}

.recipe-row-drag-handle:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--accent-dim);
  background: var(--accent-surface-faint);
}

.recipe-editor-form[data-recipe-view-only="1"] .recipe-row-drag-handle {
  display: none;
}

@media (max-width: 719px) {
  .recipe-row-drag-handle {
    display: none !important;
  }
}

/* 拖动时原位留空占位 */
.recipe-repeat-rows.is-reorder-active > .malt-card.is-dragging-source,
.recipe-repeat-rows.is-reorder-active > .hop-card.is-dragging-source {
  opacity: 0.28;
  border-style: dashed;
  border-color: var(--accent-dim);
  box-shadow: none;
}

/* 插入位置指示横线（fixed，随指针更新） */
.recipe-row-drop-line {
  position: fixed;
  z-index: 10045;
  height: 3px;
  margin: 0;
  padding: 0;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-border-subtle);
  pointer-events: none;
}

/* 跟随指针的拖动浮层 */
.recipe-row-drag-float {
  position: fixed;
  z-index: 10050;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  pointer-events: none;
}

.recipe-row-drag-float > .malt-card,
.recipe-row-drag-float > .hop-card {
  margin: 0;
  border-style: solid;
  border-color: var(--accent);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.1);
  transform: scale(1.015);
  opacity: 0.97;
}

body.recipe-row-reorder-lock {
  touch-action: none;
  user-select: none;
}

.malt-pct-line {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.malt-pct-value {
  color: var(--accent);
  font-weight: 600;
}

/* IBU 酒花卡：窄屏纵向堆叠；≥720px 三列同一行（与站点 PC 断点一致） */
.hop-card__fields {
  min-width: 0;
}

.hop-card__fields > div {
  min-width: 0;
}

@media (min-width: 720px) {
  .hop-card__fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

/* 计算器麦芽卡（EBC / 糖化）：标题行与配方编辑一致（检索在标题左侧 + 目录所选名称），无名称内联编辑 */
.calc-malt-row .malt-card__title--recipe {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.5rem;
  min-width: 0;
}

.calc-malt-row .malt-card__title--recipe .recipe-malt-catalog-trigger {
  flex-shrink: 0;
  margin-right: 0.05rem;
}

.calc-malt-row .malt-card__title--recipe .malt-card__title-index {
  flex-shrink: 0;
  font-size: 0.88rem;
}

.calc-malt-row .malt-card__title--recipe .malt-card__pick-slot {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.calc-malt-row .malt-card__title--recipe .malt-card__pick-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  outline: none;
}

/* 与同卡内 cols-2 单列相同：块级堆叠；与上方重量行留出与 form.calc 一致的段落间距（遗留表单仍可用） */
.malt-color-row {
  min-width: 0;
  margin-top: 1rem;
}

.malt-color-row > label {
  display: block;
  margin: 0;
  line-height: 1.25;
}

.malt-color-row .malt-color-input-wrap {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
}

.malt-color-input-wrap .bf-malt-picker-trigger {
  flex-shrink: 0;
  align-self: center;
}

/* 图标按钮（麦芽检索放大镜等） */
.bf-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.4rem;
  font: inherit;
  line-height: 0;
  color: var(--accent);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 6px;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    border-color 0.15s,
    background 0.15s;
}

.bf-icon-btn:hover {
  border-color: var(--accent);
  background: var(--accent-surface-faint);
}

.bf-icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.bf-icon-btn svg {
  display: block;
}

.malt-color-row .malt-color-input-wrap input {
  flex: 1;
  min-width: 0;
}

.malt-ebc-swatch {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  align-self: center;
  border-radius: 6px;
  position: relative;
  background: var(--bf-ebc-color, var(--surface2));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 1px 4px rgba(0, 0, 0, 0.25);
}

.malt-ebc-swatch--empty {
  background: var(--surface2);
  box-shadow:
    inset 0 0 0 1px var(--border),
    0 1px 4px rgba(0, 0, 0, 0.2);
}

/* 支持 mask 时：用“杯子”图标替代方形色块；颜色由 --bf-ebc-color 驱动 */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .malt-ebc-swatch {
    background: var(--surface2);
  }

  .malt-ebc-swatch::before {
    content: "";
    position: absolute;
    inset: 0.42rem;
    background: var(--bf-ebc-color, transparent);
    -webkit-mask: url("../images/icons/bf-icon-malt.svg") center / contain no-repeat;
    mask: url("../images/icons/bf-icon-malt.svg") center / contain no-repeat;
  }

  .malt-ebc-swatch--empty::before {
    background: transparent;
  }
}

/* BrewFansUiPickerOverlay：通用检索浮层（EBC 麦芽检索等复用） */
.bf-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top, 0px))
    max(1rem, env(safe-area-inset-right, 0px))
    max(1rem, env(safe-area-inset-bottom, 0px))
    max(1rem, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}

.bf-picker-backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.bf-picker-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 26rem);
  max-height: min(85vh, 32rem);
  padding: 1rem 1.1rem 1rem;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.bf-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.bf-picker-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--text);
}

.bf-picker-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  line-height: 0;
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    color 0.12s,
    border-color 0.12s,
    background 0.12s;
}

.bf-picker-close:hover {
  color: var(--text);
  border-color: var(--accent-dim);
}

.bf-picker-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.bf-picker-close svg {
  display: block;
}

.bf-picker-search {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.65rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.bf-picker-search:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.bf-picker-status {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.bf-picker-status--error {
  color: var(--danger);
}

.bf-picker-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.bf-picker-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.65rem;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.bf-picker-row:hover {
  border-color: var(--accent-dim);
  background: rgba(var(--accent-rgb), 0.06);
}

.bf-picker-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.bf-picker-row__main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}

.bf-picker-row__main-text {
  min-width: 0;
  flex: 1 1 auto;
}

.bf-picker-malt-icon {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 6px;
  position: relative;
  background: var(--bf-ebc-color, var(--surface2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .bf-picker-malt-icon {
    background: var(--surface2);
  }

  .bf-picker-malt-icon::before {
    content: "";
    position: absolute;
    inset: 0.18rem;
    background: var(--bf-ebc-color, transparent);
    -webkit-mask: url("../images/icons/bf-icon-malt.svg") center / contain no-repeat;
    mask: url("../images/icons/bf-icon-malt.svg") center / contain no-repeat;
  }
}

.bf-picker-row__en {
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--muted);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  word-break: break-word;
}

.bf-picker-row__sub {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
  word-break: break-word;
}

.bf-picker-empty,
.bf-picker-more {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.btn-add-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.55rem 1rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px dashed var(--accent-dim);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn-add-row:hover {
  background: var(--accent-surface-faint);
  border-color: var(--accent);
}

.btn-remove-row {
  flex-shrink: 0;
  padding: 0.35rem 0.65rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

.btn-remove-row:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--danger-border);
  background: rgba(180, 80, 80, 0.12);
}

.btn-remove-row:disabled,
.btn-remove-row.btn-remove-row--locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-remove-row--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  line-height: 0;
}

.btn-remove-row--icon svg {
  display: block;
}

.malt-rows {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.site-footer {
  margin-top: 3rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--muted);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.2rem;
}

.site-footer__links a.is-active {
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 719px) {
  .site-footer__links {
    display: none;
  }
}

.site-footer__icp {
  text-align: right;
}

.site-footer__icp a {
  color: var(--muted);
  opacity: 0.7;
}

.nav-user {
  display: inline-block;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  font-size: 0.75rem;
  color: var(--muted);
}

/* 顶栏：邮箱与「退出」同一水平中线，行高/内边距与按钮一致 */
.site-header__top .nav-tools--account .nav-user {
  line-height: 1.2;
  padding: 0.15rem 0;
  vertical-align: unset;
}

.site-header__top .nav-tools--account .nav-logout-form {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.nav-logout-form {
  display: inline;
  margin: 0;
  padding: 0;
}

.nav-logout-form .btn-linkish {
  display: inline;
  padding: 0.45rem 0.75rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  vertical-align: middle;
}

.nav-logout-form .btn-linkish:hover {
  color: var(--text);
  border-color: var(--accent-dim);
}

/* 顶栏账户行内「退出」与登录/注册线框风格一致 */
.nav-tools.nav-tools--account .nav-logout-form .btn-linkish {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--nav-account-border, rgba(157, 165, 177, 0.4));
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 0.15rem 0.55rem;
  border-radius: 6px;
  color: var(--nav-account-color, var(--muted));
}

.nav-tools.nav-tools--account .nav-logout-form .btn-linkish:hover {
  background: var(--nav-account-hover-bg, rgba(255, 255, 255, 0.05));
  border-color: var(--accent-dim);
  color: var(--nav-pill-hover-color, var(--text));
}

.auth-form .captcha-row {
  margin-top: 0.25rem;
}

.captcha-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.captcha-img {
  border-radius: 6px;
  border: 1px solid var(--border);
  vertical-align: middle;
}

.btn-text {
  padding: 0.35rem 0.65rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--accent);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 6px;
  cursor: pointer;
}

.btn-text:hover {
  border-color: var(--accent);
}

/* 配方编辑：熬煮/发酵区「自动计算带入数据」请求中 */
.recipe-editor-page .btn-text.is-loading {
  opacity: 0.72;
  cursor: wait;
  pointer-events: none;
  animation: recipe-fill-boil-pulse 1s ease-in-out infinite;
}

@keyframes recipe-fill-boil-pulse {
  0%,
  100% {
    opacity: 0.72;
  }

  50% {
    opacity: 0.52;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recipe-editor-page .btn-text.is-loading {
    animation: none;
    opacity: 0.68;
  }
}

.auth-switch {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* 登录/注册：表单项下方行内提示（字号小于 .error 整块提示） */
.auth-field-hint {
  margin: 0.25rem 0 0;
  padding: 0;
  font-size: 0.75rem;
  line-height: 1.4;
}

.auth-field-hint--error {
  color: var(--danger);
}

.auth-field-hint--notice {
  margin-top: 0.75rem;
  color: var(--success-soft);
}

/* 覆盖 tool--page 正文段落配色，确保表单行内提示维持语义色 */
section.tool.tool--page p.auth-field-hint--error {
  color: var(--danger);
}

section.tool.tool--page p.auth-field-hint--notice {
  color: var(--success-soft);
}

/* 注册成功但激活邮件失败：行内强调「注册成功」 */
.auth-field-hint--error .auth-field-hint__ok-lead {
  font-weight: 700;
  font-size: 1.1em;
  color: var(--ok);
  letter-spacing: 0.03em;
}

.auth-post-register-slot:empty {
  display: none;
}

.auth-post-register-slot:not(:empty) {
  margin-top: 0.5rem;
}

.auth-panel + .auth-panel {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.profile-email-code-inline {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.profile-current-email__label {
  font-size: 0.875rem;
  color: var(--muted);
}

.profile-current-email__head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.profile-current-email__value {
  margin: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(157, 165, 177, 0.08);
  color: var(--text);
  word-break: break-all;
}

.profile-email-code-inline input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
}

.profile-email-code-inline__send-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .profile-email-code-inline {
    flex-wrap: wrap;
  }
}

/* 水质调节：原水/目标三列栅格 */
.water-chemistry-subhead {
  font-size: 1rem;
  margin: 1.25rem 0 0.5rem;
  font-weight: 600;
  color: var(--muted);
}

/* 水质调节：离子段说明与页首 .hint 同系，略小字号；窄屏折叠见 tool-hint-expandable.js */
section.tool form.calc[data-calc-kind="water-chemistry"] .hint.water-ion-delta-hint {
  margin: 0 0 0.55rem;
  font-size: 0.8rem;
  line-height: 1.5;
}

.water-ion-grid {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.water-ion-grid__head {
  display: grid;
  grid-template-columns: minmax(7rem, 1.15fr) 1fr 1fr minmax(4.5rem, 0.9fr);
  gap: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}

.water-ion-grid__row {
  display: grid;
  grid-template-columns: minmax(7rem, 1.15fr) 1fr 1fr minmax(4.5rem, 0.9fr);
  gap: 0.5rem 0.75rem;
  align-items: center;
}

.water-ion-grid__row label {
  margin: 0;
  font-size: 0.9rem;
}

/* 表单离子行：分子式样式与结果区离子表首列一致（PC 同行；窄屏见下方 media） */
.water-ion-grid__row label .water-result-ion__formula {
  font-size: 0.78em;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
}

.water-preset-field {
  min-width: 0;
}

.water-preset-hint {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}

/* 表单：目标 − 原水（统一中性色，不做红绿区分） */
.water-ion-delta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  min-height: 2.65rem;
  padding: 0.38rem 0.68rem;
  border-radius: 7px;
  border: 1px solid rgba(232, 234, 237, 0.18);
  background: rgba(232, 234, 237, 0.05);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  line-height: 1.2;
}

.water-ion-delta--na {
  background: var(--bg);
  border-color: var(--border);
  color: var(--muted);
  font-weight: 400;
}

.result--water-chemistry .water-result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 0.5rem 0 0.75rem;
}

.result--water-chemistry .water-result-table th,
.result--water-chemistry .water-result-table td {
  border: 1px solid var(--border);
  padding: 0.35rem 0.5rem;
  text-align: right;
}

.result--water-chemistry .water-result-table th:first-child,
.result--water-chemistry .water-result-table td:first-child {
  text-align: left;
}

.result--water-chemistry .water-result-table caption {
  text-align: left;
  font-weight: 600;
  padding-bottom: 0.35rem;
}

/* 离子预览（嵌入加盐卡片）与加盐表首列：分子式样式 */
.result--water-chemistry .water-result-salts-ion__preview .water-result-table th[scope="row"] .water-result-ion__formula,
.result--water-chemistry .water-result-table--salts th[scope="row"] .water-result-ion__formula {
  font-size: 0.78em;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
}

.result--water-chemistry .water-result-salts-ion__preview {
  margin: 0;
  padding: 0;
  border: 0;
}

.result--water-chemistry .water-result-ion-preview-title {
  text-align: left;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 0 0 0.55rem;
  margin: 0;
}

.result--water-chemistry .water-result-col-estimate__short {
  display: none;
}

/* 窄屏：四列表格略收紧，配合短表头「估算」 */
@media (max-width: 520px) {
  .result--water-chemistry .water-result-col-estimate__long {
    display: none;
  }

  .result--water-chemistry .water-result-col-estimate__short {
    display: inline;
  }

  .result--water-chemistry .water-result-table {
    font-size: 0.82rem;
  }

  .result--water-chemistry .water-result-table th,
  .result--water-chemistry .water-result-table td {
    padding: 0.28rem 0.32rem;
  }

  /* 加盐量表：窄屏只保留「糖化 / 洗糟」字样，体积见上方汇总行 */
  .result--water-chemistry .water-salt-col-vol {
    display: none;
  }

  /* 离子预览表、加盐量表：首列「（分子式）」单独一行，减轻四列表宽压力 */
  .result--water-chemistry .water-result-salts-ion__preview .water-result-table th[scope="row"],
  .result--water-chemistry .water-result-table--salts th[scope="row"] {
    vertical-align: top;
  }

  .result--water-chemistry .water-result-salts-ion__preview .water-result-table th[scope="row"] .water-result-ion__formula {
    display: block;
    margin-top: 0.22rem;
  }

  .result--water-chemistry .water-result-ion-preview-title {
    padding: 0 0 0.4rem;
    margin: 0 0 0.15rem;
  }

  /* 加盐量：移动端保持「中文 + 分子式」同一行，减少纵向占用 */
  .result--water-chemistry .water-result-table--salts th[scope="row"] .water-result-ion__formula {
    display: inline;
    margin-top: 0;
  }

  /* 加盐量表：移动端按盐卡片化；糖化 / 洗糟 并排同一行，合计单独一行 */
  .result--water-chemistry .water-result-table--salts thead {
    display: none;
  }

  .result--water-chemistry .water-result-table--salts caption.water-result-card__caption {
    display: block;
    text-align: left;
    margin: 0 0 0.45rem;
    padding: 0;
  }

  .result--water-chemistry .water-salt-card-head {
    margin: 0 0 0.4rem;
  }

  .result--water-chemistry .water-salt-collapse-btn {
    height: 1.4rem;
    padding: 0 0.55rem;
    font-size: 0.7rem;
  }

  .result--water-chemistry .water-result-table--salts,
  .result--water-chemistry .water-result-table--salts tbody {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .result--water-chemistry .water-result-table--salts tr {
    margin: 0 0 0.55rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(232, 234, 237, 0.04);
    box-sizing: border-box;
    width: 100%;
  }

  .result--water-chemistry .water-result-table--salts tr:last-child {
    margin-bottom: 0;
  }

  /* 无盐数据占位行 */
  .result--water-chemistry .water-result-table--salts tr:has(> .water-result-salt-empty) {
    display: block;
  }

  .result--water-chemistry .water-result-table--salts tr:has(> .water-result-salt-empty) > td {
    display: block;
    width: 100%;
    border: 0;
    padding: 0.25rem 0 0;
  }

  .result--water-chemistry .water-result-table--salts tr:has(> th[scope="row"]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 0.35rem;
    row-gap: 0;
  }

  .result--water-chemistry .water-result-table--salts tr:has(> th[scope="row"]) > th[scope="row"] {
    grid-column: 1 / -1;
    display: block;
    width: auto;
    border: 0;
    padding: 0 0 0.35rem;
    margin: 0;
    text-align: left;
  }

  .result--water-chemistry .water-result-table--salts tr:has(> th[scope="row"]) .water-salt-dock-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 3.4rem;
    height: 1.35rem;
    padding: 0 0.42rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(232, 234, 237, 0.06);
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
  }

  .result--water-chemistry .water-result-table--salts tr:has(> th[scope="row"]) .water-salt-dock-btn[aria-pressed="true"] {
    border-color: rgba(94, 201, 157, 0.45);
    color: var(--success-soft-alt);
    background: rgba(94, 201, 157, 0.12);
  }

  .result--water-chemistry .water-result-table--salts tr:has(> th[scope="row"]) .water-salt-dock-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .result--water-chemistry .water-result-table--salts tr:has(> th[scope="row"]) > td {
    border: 0;
    border-top: 1px dashed rgba(232, 234, 237, 0.14);
    margin: 0;
    padding: 0.32rem 0 0.1rem;
    display: flex;
    min-width: 0;
    width: auto;
    box-sizing: border-box;
    text-align: right;
  }

  .result--water-chemistry .water-result-table--salts tr:has(> th[scope="row"]) > td:nth-child(2) {
    grid-column: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0.22rem;
  }

  .result--water-chemistry .water-result-table--salts tr:has(> th[scope="row"]) > td:nth-child(3) {
    grid-column: 2;
    flex-direction: column;
    align-items: stretch;
    gap: 0.22rem;
  }

  .result--water-chemistry .water-result-table--salts tr:has(> th[scope="row"]) > td:nth-child(4) {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.36rem;
  }

  .result--water-chemistry .water-result-table--salts tr:has(> th[scope="row"]) > td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 0.76rem;
    color: var(--muted);
    text-align: left;
  }

  .result--water-chemistry .water-result-table--salts tr:has(> th[scope="row"]) .water-salt-stepper {
    width: 100%;
    max-width: none;
    margin-left: 0;
    justify-content: space-between;
    gap: 0.18rem;
  }

  .result--water-chemistry .water-result-table--salts tr:has(> th[scope="row"]) .water-salt-input {
    width: 0;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    margin-left: 0;
    padding: 0.26rem 0.28rem;
    font-size: 0.8rem;
  }

  .result--water-chemistry .water-result-table--salts tr:has(> th[scope="row"]) .water-salt-step-btn {
    min-width: 1.28rem;
    height: 1.28rem;
    font-size: 0.8rem;
    flex-shrink: 0;
  }

  .result--water-chemistry .water-result-table--salts td[data-label="合计"] {
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }

  .calc-output.water-salt-has-docked-row {
    padding-bottom: 10.8rem;
  }

  .result--water-chemistry .water-result-table--salts tr.is-docked-mobile {
    position: fixed;
    inset-inline: max(0.7rem, env(safe-area-inset-left))
      max(0.7rem, env(safe-area-inset-right));
    bottom: calc(0.55rem + env(safe-area-inset-bottom));
    margin: 0;
    width: auto;
    max-width: calc(100vw - max(0.7rem, env(safe-area-inset-left)) - max(0.7rem, env(safe-area-inset-right)));
    box-sizing: border-box;
    z-index: 55;
    background: rgba(22, 26, 31, 0.96);
    border-color: rgba(232, 234, 237, 0.26);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
  }

  /* 吸底态：糖化/洗糟两列间距略增，降低误触概率 */
  .result--water-chemistry .water-result-table--salts tr.is-docked-mobile:has(> th[scope="row"]) {
    column-gap: 0.58rem;
  }
}

/* 离子表「估算」列：与目标差 >15 ppm 时高亮（与后端 warn 阈值一致）；偏高红、偏低蓝（避免绿≈合格） */
.result--water-chemistry .water-result-table td.water-result-ion-mix--warn,
.result--water-chemistry .water-result-table td.water-result-ion-mix--above {
  background: rgba(180, 60, 60, 0.2);
  color: var(--danger-soft-alt);
  font-weight: 600;
}

.result--water-chemistry .water-result-table td.water-result-ion-mix--below {
  background: rgba(55, 115, 185, 0.22);
  color: var(--info-soft-alt);
  font-weight: 600;
}

.water-result-stage {
  margin: 1.25rem 0 1.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
}

.water-result-stage:last-of-type {
  border-bottom: 0;
}

.water-result-stage__title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--text);
}

.water-result-table--salts th,
.water-result-table--salts td {
  text-align: right;
}

.water-result-table--salts .water-salt-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.water-result-table--salts .water-salt-row-title {
  min-width: 0;
}

.water-result-table--salts .water-salt-dock-btn {
  display: none;
}

.result--water-chemistry .water-salt-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin: 0 0 0.45rem;
}

.result--water-chemistry .water-result-card--salts-with-ions .water-salt-card-head > .water-result-card__caption {
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.result--water-chemistry .water-salt-collapse-btn {
  flex: 0 0 auto;
  height: 1.55rem;
  padding: 0 0.62rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(232, 234, 237, 0.06);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.result--water-chemistry .water-result-card--salts.is-collapsed .water-salt-table-wrap {
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 表头「合计」等不换行；糖化/洗糟列收窄步进器，为末列留宽 */
.water-result-table--salts thead th {
  white-space: nowrap;
}

.water-result-table--salts .water-salt-input {
  width: 100%;
  min-width: 2.65rem;
  max-width: 3.65rem;
  padding: 0.28rem 0.32rem;
  text-align: right;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.water-result-table--salts .water-salt-stepper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.22rem;
  max-width: 6.85rem;
  margin-left: auto;
}

.water-result-table--salts .water-salt-stepper .water-salt-input {
  flex: 0 1 3.2rem;
  width: 3.2rem;
  min-width: 2.65rem;
  max-width: 3.65rem;
}

.water-result-table--salts .water-salt-step-btn {
  flex: 0 0 auto;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(232, 234, 237, 0.08);
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.water-result-table--salts .water-salt-stepper.is-disabled .water-salt-step-btn,
.water-result-table--salts .water-salt-stepper.is-disabled .water-salt-input {
  opacity: 0.52;
  cursor: not-allowed;
}

.water-result-table--salts .water-salt-stepper.is-disabled .water-salt-step-btn {
  background: rgba(232, 234, 237, 0.03);
}

.water-result-table--salts .water-salt-stepper.is-disabled .water-salt-input {
  color: var(--muted);
}

.water-result-table--salts .water-salt-input.is-invalid {
  border-color: rgba(180, 60, 60, 0.7);
  box-shadow: 0 0 0 1px rgba(180, 60, 60, 0.25);
}

.result--water-chemistry .water-salt-actions {
  margin-top: 0.45rem;
  display: flex;
  justify-content: flex-end;
}

.result--water-chemistry .water-salt-reset {
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(232, 234, 237, 0.06);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.water-result-table--salts th:first-child,
.water-result-table--salts td.water-result-salt-empty {
  text-align: left;
}

.water-result-salt-empty {
  color: var(--muted);
  font-style: italic;
}

/* 水质调节：与硫氯比一致的表面卡片（派生指标等复用） */
.result--water-chemistry .water-so4-cl-ratio,
.result--water-chemistry .water-result-card {
  margin: 0.65rem 0 0.85rem;
  padding: 0.8rem 1rem 0.95rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* 与目标偏差提示：须写在通用 .water-result-card 之后，否则黄底会被 surface2 盖掉 */
.result--water-chemistry .water-result-card.water-result-card--warn {
  background: rgba(var(--warning-rgb), 0.1);
  border: 1px solid rgba(var(--warning-rgb), 0.22);
  padding: 0.65rem 0.9rem;
  box-shadow: none;
}

.result--water-chemistry .water-result-card.water-result-card--warn .water-chemistry-warn {
  margin: 0;
  color: var(--hint-warm);
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.55;
}

/* 硫氯比：整块卡片化，主说明与 ppm 脚注同一视觉单元 */
.result--water-chemistry .water-so4-cl-ratio {
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 400;
  color: var(--text);
  /* 相比通用卡片更紧凑，减少纵向占用 */
  padding: 0.68rem 0.88rem 0.72rem;
}

.result--water-chemistry .water-result-card .water-result-table {
  margin: 0;
}

.result--water-chemistry .water-result-card .water-result-table caption.water-result-card__caption {
  caption-side: top;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 0 0 0.55rem;
  margin: 0;
}

.result--water-chemistry .water-result-card--volumes > .water-result-card__caption,
.result--water-chemistry .water-result-card--fit > .water-result-card__caption {
  text-align: left;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 0 0 0.55rem;
  margin: 0;
}

.result--water-chemistry .water-result-volumes__line {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.result--water-chemistry .water-result-fit__line {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text);
}

.result--water-chemistry .water-result-hints__title {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.result--water-chemistry .water-result-hints__list {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.55;
}

.result--water-chemistry .water-result-hints__list li + li {
  margin-top: 0.35rem;
}

.result--water-chemistry .water-so4-cl-ratio__label {
  display: block;
  margin: 0 0 0.1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.result--water-chemistry .water-so4-cl-ratio__figures {
  display: block;
  text-align: center;
  margin: 0.1rem 0 0;
  padding: 0.18rem 0 0.22rem;
  min-height: 1.55rem;
}

.result--water-chemistry .water-so4-cl-ratio__figures .result-line__value {
  display: inline-block;
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.result--water-chemistry .water-so4-cl-ratio__figures--na .water-so4-cl-ratio__na {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.result--water-chemistry .water-so4-cl-ratio__note {
  display: block;
  margin: 0.1rem 0 0;
  padding: 0.32rem 0 0;
  border-top: 1px solid rgba(45, 58, 74, 0.75);
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}

.result--water-chemistry .water-so4-cl-ratio__ppm {
  display: block;
  margin: 0.08rem 0 0;
  padding: 0.34rem 0 0;
  border-top: 1px solid rgba(45, 58, 74, 0.75);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 520px) {
  /* 结果区上部三块：移动端收紧字号，减少纵向占用 */
  .result--water-chemistry .water-result-volumes__line,
  .result--water-chemistry .water-result-fit__line,
  .result--water-chemistry .water-so4-cl-ratio {
    font-size: 0.84rem;
    line-height: 1.45;
  }

  /* 水量行已压缩文案；数字略小于拟合行，避免窄屏折行 */
  .result--water-chemistry .water-result-volumes__line .result-line__value {
    font-size: 1rem;
  }

  .result--water-chemistry .water-result-fit__line .result-line__value {
    font-size: 1.15rem;
  }

  .result--water-chemistry .water-so4-cl-ratio__figures .result-line__value,
  .result--water-chemistry .water-so4-cl-ratio__figures--na .water-so4-cl-ratio__na {
    font-size: 1.05rem;
  }

  .result--water-chemistry .water-so4-cl-ratio {
    padding: 0.56rem 0.72rem 0.6rem;
  }

  .result--water-chemistry .water-so4-cl-ratio__label,
  .result--water-chemistry .water-so4-cl-ratio__note,
  .result--water-chemistry .water-so4-cl-ratio__ppm {
    font-size: 0.76rem;
    line-height: 1.4;
  }

  .result--water-chemistry .water-result-hints__list {
    font-size: 0.84rem;
    line-height: 1.45;
  }
}

@media (max-width: 520px) {
  /* 首列「项目」独占一行；原水 / 目标 / 差值 三等分 */
  .water-ion-grid__head {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .water-ion-grid__head .water-ion-grid__col-label:first-child {
    display: none;
  }

  .water-ion-grid__row {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: stretch;
  }

  .water-ion-grid__row label {
    grid-column: 1 / -1;
  }

  .water-ion-grid__row input[type="text"],
  .water-ion-grid__row .water-ion-delta {
    min-width: 0;
    box-sizing: border-box;
  }

  .water-ion-grid__row .water-ion-delta {
    min-height: 2.45rem;
    padding: 0.5rem 0.45rem;
    font-size: 0.85rem;
  }
}

/* —— 公开个人主页：资料卡 + 列表分区 —— */
.user-profile-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 1.35rem 1.25rem 1.5rem;
  margin-block-end: 1.75rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-sizing: border-box;
}

@media (min-width: 560px) {
  .user-profile-banner {
    flex-direction: row;
    align-items: center;
    text-align: start;
    gap: 1.35rem;
    padding-inline: 1.4rem;
  }
}

.user-profile-banner__avatar {
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--muted) 22%, transparent);
}

.user-profile-banner__avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-profile-banner__avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.85rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--muted) 55%, var(--text));
  letter-spacing: 0.02em;
  user-select: none;
}

.user-profile-banner__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  max-width: 100%;
}

.user-profile-banner__name {
  margin: 0;
  word-break: break-word;
}

.user-profile-page .user-profile-banner__name {
  font-size: 1.45rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

@media (min-width: 560px) {
  .user-profile-page .user-profile-banner__name {
    font-size: 1.55rem;
  }
}

.user-profile-list-head {
  margin-block: 0 1rem;
  padding-block-start: 0.15rem;
  border-top: 1px solid var(--border);
}

.user-profile-list-head__title {
  margin: 0;
  padding-block-start: 1.1rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--muted) 35%, var(--text));
  letter-spacing: 0.04em;
}

/* —— 我的配方 —— */
.recipe-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-block-end: 1rem;
}

.recipe-list-head h2 {
  margin-block-end: 0;
}

.recipe-head-create-recipe {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  text-decoration: none;
}

.recipe-head-create-recipe svg {
  flex-shrink: 0;
}

/* 配方列表：加载动画、触底哨兵、加载更多 */
@keyframes bf-spin {
  to {
    transform: rotate(360deg);
  }
}

.bf-spinner {
  display: inline-block;
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid color-mix(in srgb, var(--muted) 35%, transparent);
  border-top-color: color-mix(in srgb, var(--accent) 72%, var(--muted));
  border-radius: 50%;
  animation: bf-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .bf-spinner {
    animation: none;
    border-top-color: var(--accent);
    opacity: 0.85;
  }
}

.recipe-list-loading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.recipe-list-loading--initial {
  justify-content: center;
  padding: 2rem 1rem;
}

.recipe-list-loading--inline {
  justify-content: center;
  padding: 0.85rem 0 0.35rem;
}

.recipe-list-loading__text {
  line-height: 1.35;
}

/* [hidden] 与 .recipe-list-loading 特异性相当时 display:flex 会压过隐藏，导致无更多时仍见 spinner */
.recipe-list-loading[hidden] {
  display: none !important;
}

.recipe-list-sentinel {
  height: 1px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  visibility: hidden;
}

.recipe-list-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

button.recipe-list-load-more {
  align-self: center;
  margin-top: 0.25rem;
}

p.recipe-list-end-hint {
  margin: 0.75rem 0 0;
  padding: 0.35rem 0 0.15rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted);
}

@media (max-width: 767px) {
  form.recipe-editor-form label {
    font-size: 0.8rem;
  }
}

/* 糖化三字段：移动端各占一行；≥720px 与站内窄屏分界一致时同排三列 */
form.recipe-editor-form .row.recipe-editor-mash-row.cols-3 {
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

/* 设备区三字段：同上（PC 一行三列） */
form.recipe-editor-form .row.recipe-editor-equipment-row.cols-3 {
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

/* 熬煮区四字段：移动端纵向；≥720px 同排 */
form.recipe-editor-form .row.recipe-editor-boil-row {
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

/* 二发三字段：与设备区相同断点，PC 一行三列 */
form.recipe-editor-form .row.recipe-editor-secondary-row.cols-3 {
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

form.recipe-editor-form .recipe-secondary-co2-hint {
  margin: 0.45rem 0 0;
}

@media (min-width: 720px) {
  form.recipe-editor-form .row.recipe-editor-mash-row.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem 0.45rem;
  }

  form.recipe-editor-form .row.recipe-editor-equipment-row.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem 0.45rem;
  }

  form.recipe-editor-form .row.recipe-editor-boil-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem 0.45rem;
  }

  form.recipe-editor-form .row.recipe-editor-secondary-row.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem 0.45rem;
  }
}

form.recipe-editor-form input[readonly].recipe-input-computed {
  cursor: default;
  background: color-mix(in srgb, var(--surface2) 55%, var(--surface));
}

/* 配方编辑：各区块卡片化分割（相对外层 .tool 的 --surface 略提亮并加左边线） */
form.recipe-editor-form .recipe-editor-panel {
  margin: 0;
  padding: 1rem 1.05rem 1.15rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--surface2) 38%, var(--surface));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 1px 2px rgba(0, 0, 0, 0.12);
}

/* 底部保存：不做左侧色条/衬底卡片，与计算器页 submit 同级视觉（仅靠 form.calc 的 gap 分隔） */
form.recipe-editor-form .recipe-editor-panel--actions {
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

form.recipe-editor-form .recipe-editor-panel > .recipe-editor-subhead {
  margin: 0 0 0.75rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

form.recipe-editor-form .recipe-editor-panel > .recipe-editor-subhead-row {
  margin: 0 0 0.75rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

form.recipe-editor-form .recipe-editor-panel .recipe-editor-subhead-row .recipe-editor-subhead {
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
}

form.recipe-editor-form .recipe-editor-panel .recipe-editor-actions {
  margin-top: 0;
}

/* 配方编辑/浏览：品脱杯置于配方名称前，由目标 EBC 着色（与 EBC 计算器同源） */
section.tool.recipe-editor-page .recipe-page-title-head,
section.tool.recipe-view-page .recipe-page-title-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.65rem;
  margin: 0 0 0.25rem;
}

section.tool.recipe-editor-page .recipe-page-title-head > h2,
section.tool.recipe-view-page .recipe-page-title-head > h2 {
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
}

section.tool.recipe-editor-page .recipe-page-title-head .recipe-editor-basic-pint,
section.tool.recipe-view-page .recipe-page-title-head .recipe-editor-basic-pint {
  --bf-ebc-color: rgb(248, 166, 0); /* ~12 EBC，与 ebc-color.js 锚点一致；JS 载入前兜底 */

  position: relative;
  flex-shrink: 0;
  width: 2.42rem;
  height: 3.16rem;
  display: block;
  box-sizing: border-box;
  background: var(--surface2);
  border-radius: 7px;
  box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--border) 55%, transparent);
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  section.tool.recipe-editor-page .recipe-page-title-head .recipe-editor-basic-pint,
  section.tool.recipe-view-page .recipe-page-title-head .recipe-editor-basic-pint {
    background: var(--surface2);
    box-shadow:
      inset 0 0 0 0.5px color-mix(in srgb, var(--border) 45%, transparent),
      0 1px 3px rgba(0, 0, 0, 0.18);
  }

  section.tool.recipe-editor-page .recipe-page-title-head .recipe-editor-basic-pint::before,
  section.tool.recipe-view-page .recipe-page-title-head .recipe-editor-basic-pint::before {
    content: "";
    position: absolute;
    inset: 0.4rem;
    background: var(--bf-ebc-color);
    -webkit-mask: url("../images/icons/bf-icon-pint.svg") center / contain no-repeat;
    mask: url("../images/icons/bf-icon-pint.svg") center / contain no-repeat;
  }
}

@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  section.tool.recipe-editor-page .recipe-page-title-head .recipe-editor-basic-pint,
  section.tool.recipe-view-page .recipe-page-title-head .recipe-editor-basic-pint {
    background: var(--bf-ebc-color);
  }
}

@media (max-width: 767px) {
  section.tool.recipe-editor-page .recipe-page-title-head .recipe-editor-basic-pint,
  section.tool.recipe-view-page .recipe-page-title-head .recipe-editor-basic-pint {
    width: 2.18rem;
    height: 2.85rem;
  }

  @supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    section.tool.recipe-editor-page .recipe-page-title-head .recipe-editor-basic-pint::before,
    section.tool.recipe-view-page .recipe-page-title-head .recipe-editor-basic-pint::before {
      inset: 0.35rem;
    }
  }

  /* 浏览页：品脱杯仍大于编辑页列表头尺寸，与两行标题栏相配 */
  section.tool.recipe-view-page .recipe-page-title-head .recipe-editor-basic-pint {
    width: 2.72rem;
    height: 3.55rem;
  }

  @supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    section.tool.recipe-view-page .recipe-page-title-head .recipe-editor-basic-pint::before {
      inset: 0.4rem;
    }
  }
}

/* 配方浏览：品脱杯放大，与「配方名称 + 作者」两行并排垂直居中 */
section.tool.recipe-view-page .recipe-page-title-head .recipe-view-title-text {
  flex: 1 1 12rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

section.tool.recipe-view-page .recipe-page-title-head .recipe-view-title-text > h2 {
  margin: 0;
}

section.tool.recipe-view-page .recipe-page-title-head .recipe-view-author {
  margin: 0.28rem 0 0;
}

section.tool.recipe-view-page .recipe-page-title-head .recipe-editor-basic-pint {
  width: 3.05rem;
  height: 3.98rem;
  border-radius: 8px;
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  section.tool.recipe-view-page .recipe-page-title-head .recipe-editor-basic-pint::before {
    inset: 0.46rem;
  }
}

/* 配方编辑：目标参数（基本信息下）；移动端整块吸底 */
/* 标题行在 .recipe-target-params__shell 内，需与「面板直接子级」的 subhead-row 视觉一致 */
form.recipe-editor-form .recipe-target-params .recipe-target-params__head.recipe-editor-subhead-row {
  margin: 0 0 0.75rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

/* 与 form.calc .row 内字段一致：标签 + 输入纵向排列、字号与全局 label 一致 */
form.recipe-editor-form .recipe-target-params__grid > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

form.recipe-editor-form .recipe-target-params__grid label {
  display: block;
  margin: 0;
  line-height: 1.25;
}

.recipe-target-params__grid {
  display: grid;
  gap: 0.55rem 0.65rem;
  align-items: end;
}

@media (max-width: 719px) {
  .recipe-target-params__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recipe-target-dock-btn {
    margin-inline-start: auto;
  }
}

@media (min-width: 720px) {
  .recipe-target-params__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .recipe-target-dock-btn {
    display: none;
  }
}

form.recipe-editor-form.recipe-editor-form--target-docked {
  padding-bottom: 11.5rem;
}

@media (max-width: 719px) {
  .recipe-target-params.recipe-target-params--docked .recipe-target-params__shell {
    position: fixed;
    inset-inline: max(0.7rem, env(safe-area-inset-left))
      max(0.7rem, env(safe-area-inset-right));
    bottom: calc(0.55rem + env(safe-area-inset-bottom));
    margin: 0;
    width: auto;
    max-width: calc(
      100vw - max(0.7rem, env(safe-area-inset-left)) -
        max(0.7rem, env(safe-area-inset-right))
    );
    box-sizing: border-box;
    z-index: 55;
    padding: 0.75rem 0.85rem 0.85rem;
    border-radius: 10px;
    border: 1px solid rgba(232, 234, 237, 0.26);
    background: rgba(22, 26, 31, 0.96);
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.045);
  }

  .recipe-target-params.recipe-target-params--docked .recipe-target-params__hint {
    font-size: 0.78rem;
    margin-bottom: 0.5rem;
  }

  .recipe-target-params.recipe-target-params--docked .recipe-editor-subhead-row {
    margin-bottom: 0.45rem;
    padding-bottom: 0.35rem;
  }
}

.recipe-editor-subhead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin: 1.5rem 0 0.65rem;
}

.recipe-editor-subhead-row .recipe-editor-subhead {
  margin: 0;
}

.recipe-input-sg {
  font-variant-numeric: tabular-nums;
}

/* 配方编辑：麦芽行 — 三列一行（移动端同宽屏）；色块在「色度（EBC）」标签旁 */
.recipe-malt-inline-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0.45rem 0.5rem;
  min-width: 0;
  margin-top: 0.15rem;
}

.recipe-malt-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  flex: 1 1 0;
}

.recipe-malt-field label {
  display: block;
  margin: 0;
  line-height: 1.25;
}

.recipe-malt-field__label {
  letter-spacing: normal;
}

.recipe-malt-field__label .recipe-malt-unit,
form.recipe-editor-form label .recipe-malt-unit,
form.recipe-editor-form .recipe-editor-subhead .recipe-malt-unit {
  font-size: 0.82em;
  letter-spacing: normal;
  margin-inline-start: -0.06em;
}

.recipe-malt-field--ebc .recipe-malt-label-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.28rem 0.35rem;
  min-width: 0;
}

.recipe-malt-field--ebc .recipe-malt-label-row label {
  display: inline;
  line-height: 1.3;
  min-width: 0;
}

/* 与标签字号协调的小色块（配方麦芽行专用） */
.recipe-malt-field--ebc .malt-ebc-swatch--recipe {
  flex-shrink: 0;
  width: 1.38rem;
  height: 1.38rem;
  border-radius: 5px;
  box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--border) 72%, transparent);
}

.recipe-malt-field--ebc .malt-ebc-swatch--recipe.malt-ebc-swatch--empty {
  box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--border) 48%, transparent);
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .recipe-malt-field--ebc .malt-ebc-swatch--recipe::before {
    inset: 0.26rem;
  }
}

@media (max-width: 767px) {
  .recipe-malt-field--ebc .malt-ebc-swatch--recipe {
    width: 1.18rem;
    height: 1.18rem;
    border-radius: 4px;
  }

  @supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    .recipe-malt-field--ebc .malt-ebc-swatch--recipe::before {
      inset: 0.22rem;
    }
  }
}

/* 配方麦芽 / 酒花卡：标题行（酒花与麦芽共用 pick-slot 交互） */
.js-malt-row .malt-card__title--recipe,
.js-hop-row .malt-card__title--recipe,
.js-yeast-row .malt-card__title--recipe {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.5rem;
  min-width: 0;
}

.js-malt-row .malt-card__title--recipe .recipe-malt-catalog-trigger {
  flex-shrink: 0;
  margin-right: 0.05rem;
}

.js-malt-row .malt-card__title--recipe .malt-card__title-index,
.js-hop-row .malt-card__title--recipe .malt-card__title-index,
.js-yeast-row .malt-card__title--recipe .malt-card__title-index {
  flex-shrink: 0;
  cursor: pointer;
  font-size: 0.88rem;
}

.js-malt-row .malt-card__title--recipe .malt-card__pick-slot,
.js-hop-row .malt-card__title--recipe .malt-card__pick-slot,
.js-yeast-row .malt-card__title--recipe .malt-card__pick-slot {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

/* 编辑名称时收窄槽位，与卡片右上角删除钮留出间隔（完成/取消在输入框右侧） */
.js-malt-row .malt-card__title--recipe .malt-card__pick-slot:has(.malt-card__pick-edit-wrap:not([hidden])),
.js-hop-row .malt-card__title--recipe .malt-card__pick-slot:has(.malt-card__pick-edit-wrap:not([hidden])),
.js-yeast-row .malt-card__title--recipe .malt-card__pick-slot:has(.malt-card__pick-edit-wrap:not([hidden])) {
  flex: 0 1 auto;
  max-width: min(100%, 16.5rem);
  margin-inline-end: 0.55rem;
}

.js-malt-row .malt-card__title--recipe .malt-card__pick-label,
.js-hop-row .malt-card__title--recipe .malt-card__pick-label,
.js-yeast-row .malt-card__title--recipe .malt-card__pick-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  outline: none;
}

.js-malt-row .malt-card__title--recipe .malt-card__pick-label:not([hidden]):hover,
.js-hop-row .malt-card__title--recipe .malt-card__pick-label:not([hidden]):hover,
.js-yeast-row .malt-card__title--recipe .malt-card__pick-label:not([hidden]):hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* 勿对 wrap 写 display:block：会压过 [hidden]（特异性更高），导致未点击也一直显示输入框 */
.js-malt-row .malt-card__title--recipe .malt-card__pick-edit-wrap,
.js-hop-row .malt-card__title--recipe .malt-card__pick-edit-wrap,
.js-yeast-row .malt-card__title--recipe .malt-card__pick-edit-wrap {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}

.js-malt-row .malt-card__title--recipe .malt-card__pick-edit-wrap[hidden],
.js-hop-row .malt-card__title--recipe .malt-card__pick-edit-wrap[hidden],
.js-yeast-row .malt-card__title--recipe .malt-card__pick-edit-wrap[hidden] {
  display: none !important;
}

.js-malt-row .malt-card__title--recipe .malt-card__pick-edit-wrap:not([hidden]),
.js-hop-row .malt-card__title--recipe .malt-card__pick-edit-wrap:not([hidden]),
.js-yeast-row .malt-card__title--recipe .malt-card__pick-edit-wrap:not([hidden]) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
}

.js-malt-row .malt-card__title--recipe .malt-card__pick-edit-wrap .malt-card__pick-edit,
.js-hop-row .malt-card__title--recipe .malt-card__pick-edit-wrap .malt-card__pick-edit,
.js-yeast-row .malt-card__title--recipe .malt-card__pick-edit-wrap .malt-card__pick-edit {
  flex: 1 1 0;
  min-width: 0;
  max-width: 9.25rem;
  width: auto;
  box-sizing: border-box;
  min-height: 2.5rem;
  margin: 0;
  padding: 0.28rem 0.45rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--accent-dim);
  border-radius: 6px;
}

.js-malt-row .malt-card__title--recipe .malt-card__pick-edit-wrap:focus-within .malt-card__pick-edit,
.js-hop-row .malt-card__title--recipe .malt-card__pick-edit-wrap:focus-within .malt-card__pick-edit,
.js-yeast-row .malt-card__title--recipe .malt-card__pick-edit-wrap:focus-within .malt-card__pick-edit {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.js-malt-row .malt-card__title--recipe .malt-card__pick-edit-wrap .malt-card__pick-edit:focus,
.js-hop-row .malt-card__title--recipe .malt-card__pick-edit-wrap .malt-card__pick-edit:focus,
.js-yeast-row .malt-card__title--recipe .malt-card__pick-edit-wrap .malt-card__pick-edit:focus {
  outline: none;
}

@media (min-width: 768px) {
  /*
   * PC：名称编辑区占满标题行剩余宽度（上限 42rem）；单靠 max-width 无效，因默认 flex:0 会按内容收缩。
   * 取消钮～垃圾桶：margin-inline-end + .item-card__head gap(0.75rem) ≈ 两枚图标宽。
   */
  .js-malt-row .malt-card__title--recipe .malt-card__pick-slot:has(.malt-card__pick-edit-wrap:not([hidden])),
  .js-hop-row .malt-card__title--recipe .malt-card__pick-slot:has(.malt-card__pick-edit-wrap:not([hidden])),
  .js-yeast-row .malt-card__title--recipe .malt-card__pick-slot:has(.malt-card__pick-edit-wrap:not([hidden])) {
    flex: 1 1 auto;
    min-width: 0;
    max-width: min(100%, 42rem);
    margin-inline-end: 1.5rem;
  }

  .js-malt-row .malt-card__title--recipe .malt-card__pick-edit-wrap:not([hidden]),
  .js-hop-row .malt-card__title--recipe .malt-card__pick-edit-wrap:not([hidden]),
  .js-yeast-row .malt-card__title--recipe .malt-card__pick-edit-wrap:not([hidden]) {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .js-malt-row .malt-card__title--recipe .malt-card__pick-edit-wrap .malt-card__pick-edit,
  .js-hop-row .malt-card__title--recipe .malt-card__pick-edit-wrap .malt-card__pick-edit,
  .js-yeast-row .malt-card__title--recipe .malt-card__pick-edit-wrap .malt-card__pick-edit {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }
}

.js-malt-row .malt-card__title--recipe .malt-card__pick-edit-inset-actions,
.js-hop-row .malt-card__title--recipe .malt-card__pick-edit-inset-actions,
.js-yeast-row .malt-card__title--recipe .malt-card__pick-edit-inset-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.js-malt-row .malt-card__title--recipe .malt-card__pick-inset-btn,
.js-hop-row .malt-card__title--recipe .malt-card__pick-inset-btn,
.js-yeast-row .malt-card__title--recipe .malt-card__pick-inset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: color-mix(in srgb, var(--surface2) 65%, transparent);
  color: var(--accent);
  cursor: pointer;
  touch-action: manipulation;
  line-height: 0;
  box-sizing: border-box;
}

.js-malt-row .malt-card__title--recipe .malt-card__pick-inset-btn--cancel,
.js-hop-row .malt-card__title--recipe .malt-card__pick-inset-btn--cancel,
.js-yeast-row .malt-card__title--recipe .malt-card__pick-inset-btn--cancel {
  color: var(--muted);
}

.js-malt-row .malt-card__title--recipe .malt-card__pick-inset-btn:focus-visible,
.js-hop-row .malt-card__title--recipe .malt-card__pick-inset-btn:focus-visible,
.js-yeast-row .malt-card__title--recipe .malt-card__pick-inset-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.js-malt-row
  .malt-card__title--recipe:has(.malt-card__pick-label:not([hidden]))
  .malt-card__title-index {
  display: none;
}

.js-malt-row
  .malt-card__title--recipe:has(.malt-card__pick-edit-wrap:not([hidden]))
  .malt-card__title-index {
  display: none;
}

.js-hop-row
  .malt-card__title--recipe:has(.malt-card__pick-label:not([hidden]))
  .malt-card__title-index {
  display: none;
}

.js-hop-row
  .malt-card__title--recipe:has(.malt-card__pick-edit-wrap:not([hidden]))
  .malt-card__title-index {
  display: none;
}

.js-yeast-row
  .malt-card__title--recipe:has(.malt-card__pick-label:not([hidden]))
  .malt-card__title-index {
  display: none;
}

.js-yeast-row
  .malt-card__title--recipe:has(.malt-card__pick-edit-wrap:not([hidden]))
  .malt-card__title-index {
  display: none;
}

@media (min-width: 768px) {
  .recipe-malt-inline-row {
    gap: 0.55rem 0.65rem;
  }
}

/* 配方编辑：干投 — 移动端每字段一行；≥768px 五列单行 */
.recipe-dry-hop-rows .recipe-malt-inline-row--dry-hop {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}

.recipe-dry-hop-rows .recipe-malt-inline-row--dry-hop .recipe-malt-field {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

@media (min-width: 768px) {
  .recipe-dry-hop-rows .recipe-malt-inline-row--dry-hop {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
  }

  .recipe-dry-hop-rows .recipe-malt-field--dry-hop-kind {
    flex: 0 0 auto;
    min-width: 5.75rem;
  }

  .recipe-dry-hop-rows .recipe-malt-field--dry-hop-name {
    flex: 1 1 0;
    min-width: 0;
  }

  .recipe-dry-hop-rows .recipe-malt-field--dry-hop-compact {
    flex: 0 1 5.25rem;
    min-width: 4.5rem;
    max-width: 6.5rem;
  }
}

.recipe-editor-subhead {
  margin: 1.5rem 0 0.65rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.recipe-editor-actions {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
}

form.recipe-editor-form a.recipe-editor-back-no-save {
  padding: 0.55rem 1.15rem;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  background: var(--surface2);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: 8px;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
}

form.recipe-editor-form a.recipe-editor-back-no-save:hover {
  border-color: color-mix(in srgb, var(--border) 95%, transparent);
  filter: brightness(1.04);
}

/* 与计算器页 form.calc 底部 button[type="submit"] 一致（保存为 type="button" + JS，单独挂类） */
form.recipe-editor-form button.recipe-editor-save {
  padding: 0.65rem 1.4rem;
  font: inherit;
  font-weight: 600;
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--btn-gradient-start), var(--btn-gradient-mid));
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: max-content;
  max-width: 100%;
}

form.recipe-editor-form button.recipe-editor-save:hover:not(:disabled) {
  filter: brightness(1.05);
}

form.recipe-editor-form button.recipe-editor-save:disabled {
  opacity: 0.8;
  cursor: wait;
}

.recipe-repeat-rows {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0.5rem 0 0.75rem;
}

.recipe-repeat-rows.hop-rows {
  gap: 1rem;
}

.recipe-water-ion-grid {
  margin-top: 0.5rem;
}

form.recipe-editor-form .recipe-water-ion-grid {
  margin-top: 0;
}

/* 配方编辑：水质仅「目标」列（不占水质计算器四列表头） */
form.recipe-editor-form .recipe-water-ion-grid--targets-only.water-ion-grid .water-ion-grid__head,
form.recipe-editor-form .recipe-water-ion-grid--targets-only.water-ion-grid .water-ion-grid__row {
  grid-template-columns: minmax(7rem, 1.25fr) minmax(6rem, 1fr);
}

/* 与配方页其他 label 一致：全局 label 0.875rem；≤767px 时 form.recipe-editor-form label 0.8rem */
form.recipe-editor-form .recipe-water-ion-grid--targets-only.water-ion-grid .water-ion-grid__head .water-ion-grid__col-label {
  font-size: 0.875rem;
}

form.recipe-editor-form .recipe-water-ion-grid--targets-only.water-ion-grid .water-ion-grid__row label {
  font-size: 0.875rem;
  line-height: 1.25;
  hyphens: auto;
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  form.recipe-editor-form .recipe-water-ion-grid--targets-only.water-ion-grid .water-ion-grid__head .water-ion-grid__col-label,
  form.recipe-editor-form .recipe-water-ion-grid--targets-only.water-ion-grid .water-ion-grid__row label {
    font-size: 0.8rem;
  }
}

/* PC：六种离子目标输入同一行（每列：标签 + 输入） */
@media (min-width: 768px) {
  form.recipe-editor-form .recipe-water-ion-grid--targets-only.water-ion-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 0.65rem;
    row-gap: 0.35rem;
    align-items: stretch;
  }

  form.recipe-editor-form .recipe-water-ion-grid--targets-only.water-ion-grid .water-ion-grid__head {
    display: none;
  }

  form.recipe-editor-form .recipe-water-ion-grid--targets-only.water-ion-grid .water-ion-grid__row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: stretch;
    min-width: 0;
    grid-template-columns: unset;
  }

  form.recipe-editor-form .recipe-water-ion-grid--targets-only.water-ion-grid .water-ion-grid__row input[type="text"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

/* 水质目标框：避免浏览器自动填充套色盖住主题 */
form.recipe-editor-form .recipe-water-ion-grid--targets-only input:-webkit-autofill,
form.recipe-editor-form .recipe-water-ion-grid--targets-only input:-webkit-autofill:hover,
form.recipe-editor-form .recipe-water-ion-grid--targets-only input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  box-shadow: 0 0 0 1000px var(--surface) inset;
  transition: background-color 99999s ease-out;
}

@media (max-width: 520px) {
  form.recipe-editor-form .recipe-water-ion-grid--targets-only.water-ion-grid .water-ion-grid__head {
    grid-template-columns: 1fr;
  }

  form.recipe-editor-form .recipe-water-ion-grid--targets-only.water-ion-grid .water-ion-grid__head .water-ion-grid__col-label:first-child {
    display: none;
  }

  form.recipe-editor-form .recipe-water-ion-grid--targets-only.water-ion-grid .water-ion-grid__row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  form.recipe-editor-form .recipe-water-ion-grid--targets-only.water-ion-grid .water-ion-grid__row label {
    grid-column: 1 / -1;
  }
}

/* ——— 配方浏览：表格呈现，区块顺序与编辑页一致 ——— */
.recipe-view-stack {
  display: grid;
  gap: 1rem;
  margin-top: 0.5rem;
}

.recipe-view-author {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--text);
}

.recipe-view-author__label {
  margin-inline-end: 0.4rem;
  color: var(--muted);
  font-weight: 500;
}

.recipe-view-author__home-sep {
  margin-inline: 0.28rem;
  color: var(--muted);
  font-weight: 400;
  user-select: none;
}

.recipe-view-author__home {
  font-weight: 500;
  white-space: nowrap;
}

.recipe-view-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0.65rem 0 1.1rem;
}

@media (max-width: 767px) {
  /* 浏览页：标题区与右侧图标按钮之间略拉开（margin 折叠时单靠 margin-top 不明显） */
  section.tool.recipe-view-page .recipe-view-actions {
    padding-top: 0.45rem;
  }
}

.recipe-view-actions.recipe-view-actions--footer {
  margin-top: 1.35rem;
  margin-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
}

.recipe-view-actions .bf-icon-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.recipe-share-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  padding-top: max(1rem, env(safe-area-inset-top, 0px));
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.48);
}

.recipe-share-modal[hidden] {
  display: none !important;
}

/* 配方编辑：移动端麦芽/酒花/酵母名称 — 底部抽屉（桌面仍为行内） */
.recipe-name-sheet {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.48);
}

.recipe-name-sheet[hidden] {
  display: none !important;
}

.recipe-name-sheet__panel {
  width: 100%;
  max-width: none;
  max-height: min(88vh, 100%);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.65rem 1.15rem max(1rem, calc(0.85rem + env(safe-area-inset-bottom, 0px)));
  border-radius: 14px 14px 0 0;
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: var(--surface);
  box-shadow:
    0 -10px 36px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

/* 抽屉顶指示条（暗示可下滑关闭的视觉锚点；关闭仍靠按钮/遮罩） */
.recipe-name-sheet__panel::before {
  content: "";
  display: block;
  width: 2.35rem;
  height: 4px;
  margin: 0 auto 0.75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 78%, transparent);
}

.recipe-name-sheet__title {
  margin: 0 0 0.65rem;
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--text-body);
  text-align: center;
}

.recipe-name-sheet__input {
  display: block;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0.55rem 0.65rem;
  box-sizing: border-box;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--accent-dim);
  border-radius: 8px;
}

.recipe-name-sheet__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.recipe-name-sheet__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: stretch;
  gap: 0.5rem;
}

.recipe-name-sheet__actions .recipe-name-sheet__btn {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.recipe-name-sheet__btn {
  margin: 0;
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
}

.recipe-name-sheet__btn--cancel {
  color: var(--muted);
  background: color-mix(in srgb, var(--surface2) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}

.recipe-name-sheet__btn--done {
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--btn-gradient-start), var(--btn-gradient-mid));
  border: none;
}

@media (min-width: 768px) {
  /* 桌面仅用行内编辑，防止浮层被误开（matchMedia 仍为主逻辑） */
  .recipe-name-sheet {
    display: none !important;
  }
}

.recipe-share-modal__panel {
  position: relative;
  max-width: 22rem;
  width: 100%;
  padding: 1.25rem 1.35rem 1.15rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: var(--surface);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.recipe-share-modal__title {
  margin: 0 2.35rem 0.5rem;
  font-size: 1.1rem;
  font-weight: 650;
  color: var(--text-body);
  text-align: center;
}

.recipe-share-modal__hint {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
}

.recipe-share-modal__qr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 240px;
  margin: 0 auto 1rem;
  padding: 10px;
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
}

.recipe-share-modal__qr table {
  border: 0 !important;
}

.recipe-share-modal__qr canvas,
.recipe-share-modal__qr img {
  display: block;
  max-width: 100%;
  height: auto;
}

.recipe-share-modal__close {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.recipe-share-modal__close:hover,
.recipe-share-modal__close:focus-visible {
  color: var(--text);
  background: rgba(232, 234, 237, 0.08);
  outline: none;
}

.recipe-view-compute-hint {
  margin-top: 0.35rem;
}

.recipe-view-page .recipe-editor-panel {
  margin: 0;
  padding: 1rem 1.05rem 1.15rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--surface2) 38%, var(--surface));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 1px 2px rgba(0, 0, 0, 0.12);
}

.recipe-view-page .recipe-editor-panel > .recipe-editor-subhead {
  margin: 0 0 0.75rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.recipe-view-page .recipe-editor-panel > .recipe-editor-subhead-row {
  margin: 0 0 0.75rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.recipe-view-page .recipe-editor-panel .recipe-editor-subhead-row .recipe-editor-subhead {
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* 详情页面板内小节标题（如糖化区块「糖化温度」）；padding-inline-start 与 KV 表首列文字起点一致 */
.recipe-view-page .recipe-view-inpanel-subhead {
  margin: 0.85rem 0 0.35rem;
  padding: 0;
  padding-inline-start: 0.45rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.recipe-view-page .recipe-view-inpanel-subhead + .recipe-view-table-wrap {
  margin-top: 0.35rem;
}

/* 与编辑页一致：标题 / 表头中的单位括号略小写、英文括号 */
.recipe-view-page .recipe-editor-subhead .recipe-malt-unit,
.recipe-view-page .recipe-view-table .recipe-malt-unit {
  font-size: 0.82em;
  letter-spacing: normal;
  margin-inline-start: -0.06em;
}

.recipe-view-page .recipe-target-params .recipe-target-params__head.recipe-editor-subhead-row {
  margin: 0 0 0.75rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

@media (max-width: 719px) {
  /* 配方浏览 / 编辑：收窄外层 tool 与色条卡片内边距，表格与表单区更宽 */
  section.tool.recipe-view-page,
  section.tool.recipe-editor-page {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }

  .recipe-view-page .recipe-editor-panel,
  form.recipe-editor-form .recipe-editor-panel {
    padding-left: 0.72rem;
    padding-right: 0.72rem;
  }

  .recipe-view-page .recipe-view-table th,
  .recipe-view-page .recipe-view-table td {
    padding-left: 0.38rem;
    padding-right: 0.38rem;
  }

  .recipe-view-page .recipe-view-inpanel-subhead {
    padding-inline-start: 0.38rem;
  }
}

.recipe-view-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.recipe-view-table th,
.recipe-view-table td {
  padding: 0.5rem 0.45rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.recipe-view-table thead th {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.8rem;
  background: color-mix(in srgb, var(--surface2) 55%, transparent);
}

.recipe-view-table--kv tbody th[scope="row"] {
  width: 42%;
  max-width: 14rem;
  font-weight: 500;
  color: var(--muted);
  font-size: 0.85rem;
}

.recipe-view-table--kv tbody td {
  color: var(--text);
  line-height: 1.4;
  word-break: break-word;
}

.recipe-view-table__notes {
  font-size: 0.92rem;
  line-height: 1.45;
}

.recipe-view-table__num {
  font-variant-numeric: tabular-nums;
}

.recipe-view-table__muted {
  color: var(--muted);
  font-weight: 500;
}

.recipe-view-table td.recipe-view-table__empty-cell {
  text-align: center;
}

/* 浏览页麦芽名称：勿对 td 设 display:flex，会破坏 border-collapse 竖线对齐；flex 放在内层 */
.recipe-view-page .recipe-view-table--data td.recipe-view-malt-name-td {
  vertical-align: middle;
}

.recipe-view-page .recipe-view-malt-name-cell {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
}

.recipe-view-page .recipe-view-malt-name-text {
  min-width: 0;
  line-height: 1.35;
}

.recipe-view-page .recipe-view-malt-icon.malt-ebc-swatch {
  flex-shrink: 0;
  width: 1.3rem;
  height: 1.3rem;
  align-self: center;
  border-radius: 5px;
  box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--border) 72%, transparent);
}

.recipe-view-page .recipe-view-malt-icon.malt-ebc-swatch--empty {
  box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--border) 48%, transparent);
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .recipe-view-page .recipe-view-malt-icon.malt-ebc-swatch::before {
    inset: 0.22rem;
  }
}

@media (max-width: 767px) {
  .recipe-view-page .recipe-view-malt-icon.malt-ebc-swatch {
    width: 1.22rem;
    height: 1.22rem;
  }

  @supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    .recipe-view-page .recipe-view-malt-icon.malt-ebc-swatch::before {
      inset: 0.2rem;
    }
  }
}

.recipe-view-table__row--emph td,
.recipe-view-table__row--emph th {
  background: color-mix(in srgb, var(--surface2) 48%, var(--surface));
}

.recipe-view-table-wrap {
  margin-top: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.recipe-view-table--data {
  min-width: min(100%, 520px);
}

/* 公开配方详情（PC）：麦芽 / 酒花 / 辅料 / 酵母 / 干投 数据表统一序号列宽，并加宽名称列以利阅读 */
@media (min-width: 720px) {
  .recipe-view-page--public-detail .recipe-view-table-wrap .recipe-view-table--data {
    table-layout: fixed;
    min-width: min(100%, 760px);
  }

  .recipe-view-page--public-detail .recipe-view-table--data > thead > tr > th:nth-child(1),
  .recipe-view-page--public-detail .recipe-view-table--data > tbody > tr > td:nth-child(1) {
    width: 3.25rem;
    max-width: 3.25rem;
    box-sizing: border-box;
  }

  .recipe-view-page--public-detail section[aria-labelledby="recipe-view-sec-malt"] .recipe-view-table--data > thead > tr > th:nth-child(2),
  .recipe-view-page--public-detail section[aria-labelledby="recipe-view-sec-malt"] .recipe-view-table--data > tbody > tr > td:nth-child(2),
  .recipe-view-page--public-detail section[aria-labelledby="recipe-view-sec-hop"] .recipe-view-table--data > thead > tr > th:nth-child(2),
  .recipe-view-page--public-detail section[aria-labelledby="recipe-view-sec-hop"] .recipe-view-table--data > tbody > tr > td:nth-child(2),
  .recipe-view-page--public-detail section[aria-labelledby="recipe-view-sec-adjunct"] .recipe-view-table--data > thead > tr > th:nth-child(2),
  .recipe-view-page--public-detail section[aria-labelledby="recipe-view-sec-adjunct"] .recipe-view-table--data > tbody > tr > td:nth-child(2),
  .recipe-view-page--public-detail section[aria-labelledby="recipe-view-sec-yeast"] .recipe-view-table--data > thead > tr > th:nth-child(2),
  .recipe-view-page--public-detail section[aria-labelledby="recipe-view-sec-yeast"] .recipe-view-table--data > tbody > tr > td:nth-child(2),
  .recipe-view-page--public-detail section[aria-labelledby="recipe-view-sec-dry-hop"] .recipe-view-table--data > thead > tr > th:nth-child(2),
  .recipe-view-page--public-detail section[aria-labelledby="recipe-view-sec-dry-hop"] .recipe-view-table--data > tbody > tr > td:nth-child(2) {
    width: 48%;
    min-width: 18rem;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }

}

/* 配方浏览：水质目标 — 窄屏纵向 KV，PC 六列一行 */
.recipe-view-water-targets-desktop {
  display: none;
}

.recipe-view-water-targets-desktop th,
.recipe-view-water-targets-desktop td {
  text-align: center;
  vertical-align: middle;
}

.recipe-view-water-targets-desktop .recipe-view-table__num {
  text-align: center;
}

@media (min-width: 720px) {
  .recipe-view-water-targets-desktop {
    display: table;
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  .recipe-view-water-targets-mobile {
    display: none;
  }
}

.recipe-compute-out {
  margin-top: 1rem;
}

.recipe-compute-summary ul {
  margin: 0.35rem 0 0 1.1rem;
  padding: 0;
  font-size: 0.9rem;
}

.recipe-list-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.55rem;
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

.recipe-list-table th,
.recipe-list-table td {
  padding: 0.55rem 0.65rem;
  text-align: left;
}

.recipe-list-table thead th {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.8rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.45rem;
  vertical-align: bottom;
}

.recipe-list-table tbody td {
  background: var(--surface);
  border-style: solid;
  border-color: color-mix(in srgb, var(--border) 78%, transparent);
  border-width: 1px 0;
  vertical-align: middle;
}

.recipe-list-table tbody td:first-child {
  border-left-width: 1px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.recipe-list-table tbody td:not(:first-child) {
  border-left-width: 1px;
}

.recipe-list-table tbody td:last-child {
  border-right-width: 1px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* PC：去掉列间竖线，保留整行左右边框与圆角 */
@media (min-width: 720px) {
  .recipe-list-table tbody td:not(:first-child) {
    border-left-width: 0;
  }
}

.recipe-list-created-col {
  width: 1%;
  min-width: 6.75rem;
  white-space: nowrap;
}

.recipe-list-name-cell {
  min-width: 0;
}

.recipe-list-name-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.recipe-list-name-row a {
  min-width: 0;
}

/* 列表名称前：品脱杯 mask，与浏览/编辑标题区同源 logic（bf-icon-pint.svg） */
.recipe-list-table .recipe-list-pint {
  --bf-ebc-color: rgb(248, 166, 0);

  position: relative;
  flex-shrink: 0;
  width: 1.38rem;
  height: 1.8rem;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  background: var(--surface2);
  border-radius: 5px;
  box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--border) 55%, transparent);
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .recipe-list-table .recipe-list-pint {
    background: var(--surface2);
    box-shadow:
      inset 0 0 0 0.5px color-mix(in srgb, var(--border) 45%, transparent),
      0 1px 3px rgba(0, 0, 0, 0.18);
  }

  .recipe-list-table .recipe-list-pint::before {
    content: "";
    position: absolute;
    inset: 0.22rem;
    background: var(--bf-ebc-color);
    -webkit-mask: url("../images/icons/bf-icon-pint.svg") center / contain
      no-repeat;
    mask: url("../images/icons/bf-icon-pint.svg") center / contain no-repeat;
  }
}

@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .recipe-list-table .recipe-list-pint {
    background: var(--bf-ebc-color);
  }
}

.recipe-list-table th.recipe-list-visibility-col,
.recipe-list-table td.recipe-list-visibility-cell {
  white-space: nowrap;
}

.recipe-list-created {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.88rem;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.recipe-list-actions-col {
  width: 1%;
  white-space: nowrap;
}

.recipe-list-actions {
  white-space: nowrap;
}

.recipe-list-actions__icons {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
}

a.recipe-list-icon-btn {
  text-decoration: none;
}

/* 我的配方列表：移动端名称/类型与操作分行，避免三枚图标挤在一格误触 */
@media (max-width: 719px) {
  .recipe-list-table {
    display: block;
    width: 100%;
  }

  .recipe-list-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .recipe-list-table tbody {
    display: block;
  }

  .recipe-list-table tbody tr {
    display: block;
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.55rem;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    border-radius: 10px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.2);
  }

  .recipe-list-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .recipe-list-table tbody td {
    display: block;
    padding: 0.2rem 0;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 0;
  }

  .recipe-list-table tbody td:nth-child(1) {
    padding-top: 0;
    font-weight: 500;
  }

  .recipe-list-table tbody td:nth-child(2) {
    font-size: 0.85rem;
    color: var(--muted);
    padding-bottom: 0.25rem;
  }

  .recipe-list-table tbody td:nth-child(2)::before {
    content: "类型";
    margin-inline-end: 0.35rem;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--muted);
  }

  .recipe-list-table tbody td:nth-child(3) {
    font-size: 0.85rem;
    color: var(--muted);
    padding-bottom: 0.25rem;
    font-variant-numeric: tabular-nums;
  }

  .recipe-list-table tbody td:nth-child(3)::before {
    content: "创建日期";
    margin-inline-end: 0.35rem;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--muted);
  }

  .recipe-list-table tbody td:nth-child(4) {
    padding-top: 0.5rem;
    margin-top: 0.15rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  }

  .recipe-list-actions-col {
    width: auto;
    white-space: normal;
  }

  .recipe-list-actions {
    white-space: normal;
  }

  .recipe-list-actions__icons {
    gap: 0.75rem;
    justify-content: flex-start;
    width: 100%;
    flex-wrap: nowrap;
  }

  .recipe-list-table .recipe-list-icon-btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.5rem;
    box-sizing: border-box;
  }

  /* 公开配方列表：无类型列；移动端第 2 列为创建日期（覆盖通用表格对 nth-child(2) 的「类型」样式） */
  .recipe-list-page--public .recipe-list-table tbody td:nth-child(2) {
    font-size: 0.85rem;
    color: var(--muted);
    padding-bottom: 0.25rem;
    font-variant-numeric: tabular-nums;
  }

  .recipe-list-page--public .recipe-list-table tbody td:nth-child(2)::before {
    content: "创建日期";
    margin-inline-end: 0.35rem;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--muted);
  }

  .recipe-list-page--public .recipe-list-table tbody td:nth-child(3)::before {
    content: none;
    display: none;
  }

  /* 公开配方列表：移动端仅「浏览」图标，隐藏操作列（标题链仍可进入详情） */
  .recipe-list-page--public tbody td.recipe-list-actions {
    display: none;
  }
}

form.recipe-editor-form[data-recipe-view-only="1"] input[readonly],
form.recipe-editor-form[data-recipe-view-only="1"] textarea[readonly],
form.recipe-editor-form[data-recipe-view-only="1"] select:disabled {
  cursor: default;
  opacity: 1;
  color: var(--text-body);
}

form.recipe-editor-form[data-recipe-view-only="1"] select:disabled {
  -webkit-text-fill-color: var(--text-body);
}

/* 配方详情 / 编辑：PC 右侧章节导航（竖线 + 圆点） */
section.tool.recipe-view-page .recipe-editor-subhead[id],
section.tool.recipe-editor-page .recipe-editor-subhead[id] {
  scroll-margin-top: 5.25rem;
}

.recipe-section-nav {
  display: none;
}

@media (min-width: 960px) {
  .recipe-section-nav {
    position: fixed;
    z-index: 120;
    top: 50%;
    right: max(0.35rem, env(safe-area-inset-right, 0px));
    transform: translateY(-50%);
    display: block;
    max-height: min(88vh, 40rem);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.35rem 0 0.35rem 0.25rem;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }

  .recipe-section-nav__list {
    position: relative;
    margin: 0;
    padding: 0.55rem 0;
    list-style: none;
  }

  .recipe-section-nav__list::before {
    content: "";
    position: absolute;
    top: 1.15rem;
    bottom: 1.15rem;
    right: 0.5rem;
    width: 2px;
    border-radius: 1px;
    background: rgba(232, 234, 237, 0.22);
    pointer-events: none;
  }

  .recipe-section-nav__item {
    margin: 0;
    padding: 0;
  }

  .recipe-section-nav__item + .recipe-section-nav__item {
    margin-top: 0.55rem;
  }

  .recipe-section-nav__link {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    max-width: 11.5rem;
    padding: 0.18rem 0;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--muted);
    text-decoration: none;
    text-align: right;
    outline-offset: 3px;
  }

  .recipe-section-nav__link:hover {
    color: var(--text);
  }

  .recipe-section-nav__link.is-active,
  .recipe-section-nav__link[aria-current="true"] {
    color: var(--accent);
  }

  .recipe-section-nav__label {
    flex: 0 1 auto;
    min-width: 0;
  }

  .recipe-section-nav__rail {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    width: 1.05rem;
    align-items: center;
    justify-content: center;
  }

  .recipe-section-nav__dot {
    display: block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: rgba(232, 234, 237, 0.35);
    border: 2px solid rgba(232, 234, 237, 0.55);
    box-sizing: content-box;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }

  .recipe-section-nav__link:hover .recipe-section-nav__dot {
    background: rgba(232, 234, 237, 0.55);
    border-color: rgba(232, 234, 237, 0.75);
  }

  .recipe-section-nav__link.is-active .recipe-section-nav__dot,
  .recipe-section-nav__link[aria-current="true"] .recipe-section-nav__dot {
    background: var(--accent);
    border-color: var(--accent-border-active);
    transform: scale(1.12);
  }
}

/* 啤酒风格：大类锚点跳转时留出吸顶导航高度 */
.beer-styles-page .beer-styles-category__title[id] {
  scroll-margin-top: 4.75rem;
}

.beer-styles-toc__id {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

/* 啤酒风格浏览页：分大类展示 + 统一列宽（多表纵向对齐） */
.beer-styles-page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
}

.beer-styles-page__head h2 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.beer-styles-page__actions {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  section.tool.beer-styles-page .beer-styles-page__actions {
    padding-top: 0.15rem;
  }
}

.beer-styles-page__tables {
  margin-top: 0.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.beer-styles-page__scroll {
  min-width: 40rem;
}

.beer-styles-page .beer-styles-category {
  margin-top: 2.75rem;
  padding-top: 0;
}

.beer-styles-page .beer-styles-category:first-of-type {
  margin-top: 0.85rem;
}

.beer-styles-category__header {
  margin: 0 0 0.7rem;
}

.beer-styles-category__title {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  background: var(--accent-surface);
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.beer-styles-category__id {
  flex-shrink: 0;
  margin-top: 0.1rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.beer-styles-category__names {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.beer-styles-category__zh {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.beer-styles-category__en {
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
}

.beer-styles-table {
  width: 100%;
  min-width: 40rem;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.88rem;
  line-height: 1.45;
}

.beer-styles-col--id {
  width: 3.25rem;
}

.beer-styles-col--og,
.beer-styles-col--fg {
  width: 8.25rem;
}

.beer-styles-col--ibu,
.beer-styles-col--abv {
  width: 5.25rem;
}

.beer-styles-col--srm {
  width: 6.25rem;
}

.beer-styles-table th,
.beer-styles-table td {
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--table-divider);
  text-align: left;
  vertical-align: top;
}

.beer-styles-table thead th {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.beer-styles-table__id {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--accent);
  font-weight: 600;
}

.beer-styles-table__id--inline {
  display: none;
}

.beer-styles-table__style-head {
  display: block;
}

.beer-styles-table__style-text {
  display: block;
}

.beer-styles-table__name-zh {
  display: block;
  font-weight: 500;
  color: var(--text);
}

.beer-styles-table__name-en {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.beer-styles-table__vital {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 须高于 section.tool .hint 的 margin 简写，否则 margin-top 被压成 0 */
section.tool.beer-styles-page .hint.beer-styles-page__source {
  margin-top: 2.75rem;
}

/* 啤酒风格：窄屏纵向卡片，避免横滑表格裁切 */
@media (max-width: 719px) {
  .beer-styles-page__tables,
  .beer-styles-page__scroll,
  .beer-styles-page .beer-styles-category {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .beer-styles-page__tables {
    overflow-x: visible;
  }

  .beer-styles-page__scroll {
    min-width: 0;
  }

  .beer-styles-category__header,
  .beer-styles-category__title {
    width: 100%;
    box-sizing: border-box;
  }

  .beer-styles-table {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    table-layout: auto;
  }

  .beer-styles-table colgroup {
    display: none;
  }

  .beer-styles-table thead {
    display: none;
  }

  .beer-styles-table tbody {
    display: block;
    width: 100%;
  }

  .beer-styles-table tbody tr.beer-styles-table__row {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.8rem;
    background: var(--surface);
    border: 1px solid var(--table-divider);
    border-radius: 8px;
  }

  .beer-styles-table tbody tr.beer-styles-table__row:last-child {
    margin-bottom: 0;
  }

  .beer-styles-table tbody td.beer-styles-table__id--col {
    display: none;
  }

  .beer-styles-table tbody td.beer-styles-table__name {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 0.55rem;
    margin-bottom: 0.2rem;
    border-bottom: 1px solid var(--table-divider);
    text-align: left;
  }

  .beer-styles-table tbody td.beer-styles-table__name::before {
    display: none;
  }

  .beer-styles-table__style-head {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.45rem;
    align-items: start;
    line-height: 1.4;
  }

  .beer-styles-table__id--inline {
    display: block;
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .beer-styles-table__style-text {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .beer-styles-table tbody td.beer-styles-table__name .beer-styles-table__name-zh,
  .beer-styles-table tbody td.beer-styles-table__name .beer-styles-table__name-link {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
  }

  .beer-styles-table tbody td.beer-styles-table__name .beer-styles-table__name-en {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--muted);
  }

  .beer-styles-table tbody td.beer-styles-table__vital {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.38rem 0;
    border-bottom: 1px solid var(--table-divider);
    white-space: normal;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .beer-styles-table tbody td.beer-styles-table__vital:last-child {
    border-bottom: none;
  }

  .beer-styles-table tbody td.beer-styles-table__vital::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    text-align: left;
    line-height: 1.45;
  }
}

@media (min-width: 720px) {
  .beer-styles-table__id--inline {
    display: none !important;
  }
}

.beer-styles-table__name-link {
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
}

.beer-styles-table__name-link:hover,
.beer-styles-table__name-link:focus-visible {
  text-decoration: underline;
}

.beer-style-detail__back {
  margin: 1.5rem 0 0;
}

.beer-style-detail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

.beer-style-detail__hero {
  flex: 1 1 12rem;
  min-width: 0;
}

.beer-style-detail__style-head {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.65rem;
  row-gap: 0.25rem;
  align-items: start;
  line-height: 1.4;
}

/* 桌面：子元素直接参与外层 grid，编号方框跨中/英名两行 */
.beer-style-detail__title-line {
  display: contents;
}

.beer-style-detail__style-id {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: clamp(3.85rem, 18vw, 4.65rem);
  height: clamp(3.85rem, 18vw, 4.65rem);
  min-width: clamp(3.85rem, 18vw, 4.65rem);
  margin: 0;
  align-self: center;
  font-size: clamp(1.75rem, 8vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  border: 1px solid var(--accent-border-subtle);
  border-radius: 8px;
  background: var(--accent-surface-faint);
}

.beer-style-detail__name-zh {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  min-width: 0;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.beer-style-detail__name-en {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  min-width: 0;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.4;
}

/* 须高于 section.tool.tool--page p:not(.hint)，仅压低分类行，不改英文名（仍用 --text-body） */
section.tool.tool--page.beer-style-detail .beer-style-detail__category {
  grid-column: 2;
  grid-row: 3;
  margin: 0.15rem 0 0;
  min-width: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--muted);
}

.beer-style-detail__actions {
  margin: 0;
  flex-shrink: 0;
}

@media (max-width: 719px) {
  .beer-style-detail__actions {
    display: none;
  }

  .beer-style-detail__style-head {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .beer-style-detail__title-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
  }

  .beer-style-detail__style-id {
    grid-column: unset;
    grid-row: unset;
    align-self: auto;
    display: inline;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
  }

  .beer-style-detail__name-zh {
    grid-column: unset;
    grid-row: unset;
    flex: 1 1 auto;
    min-width: 0;
  }

  .beer-style-detail__name-en {
    grid-column: unset;
    grid-row: unset;
  }

  section.tool.tool--page.beer-style-detail .beer-style-detail__category {
    grid-column: unset;
    grid-row: unset;
    margin: 0.1rem 0 0;
  }
}

.beer-style-detail__block {
  margin: 0 0 1.35rem;
}

.beer-style-detail__block:last-child {
  margin-bottom: 0;
}

.beer-style-detail__block-title {
  margin: 0 0 0.65rem;
  padding: 0.45rem 0.7rem;
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  background: var(--accent-surface);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.beer-style-detail__block--vitals {
  margin-bottom: 1.5rem;
}

.beer-style-detail-vitals {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.beer-style-detail-vital {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0.65rem 0.75rem;
  background: var(--surface2);
  border: 1px solid var(--table-divider);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
}

.beer-style-detail-vital__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.beer-style-detail-vital__value {
  width: 100%;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  word-break: break-word;
}

.beer-style-detail__body .beer-style-detail__block + .beer-style-detail__block {
  margin-top: 1.1rem;
}

.beer-style-detail__section-text {
  margin: 0;
  padding: 0 0.1rem;
  line-height: 1.65;
  color: var(--text);
}

.beer-style-detail__pending {
  margin-top: 0.25rem;
}

@media (max-width: 719px) {
  .beer-style-detail-vitals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .beer-style-detail-vital:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* 浅色主题：强调色浅底统一为淡蓝（替换残留中性灰/白 hover 上的黄感） */
[data-theme="light"] .site-nav-drawer__link:hover {
  background: var(--accent-surface-faint);
}

[data-theme="light"] .site-nav-drawer__group-panel .site-nav-drawer__link {
  background: var(--surface);
}

[data-theme="light"] .site-nav-drawer__group-panel .site-nav-drawer__link:hover {
  background: var(--accent-surface-faint);
}

[data-theme="light"] .refract-segment__opt:hover .refract-segment__body {
  background: var(--accent-surface-faint);
}

[data-theme="light"] .guide-toc {
  border-color: var(--accent-border-faint);
  background: var(--accent-surface-faint);
}

[data-theme="light"] .homebrew-guide .guide-tools {
  border-color: var(--accent-border-faint);
  background: var(--accent-surface-faint);
}

[data-theme="light"] .refract-og-input-panel input[type="text"]:not(:disabled) {
  border-color: var(--accent-border-subtle);
  background: var(--input-bg);
}

[data-theme="light"] .refract-og-input-panel:has(input:not(:disabled)) {
  box-shadow:
    inset 4px 0 0 var(--accent),
    var(--shadow-sm);
}

/* 酵母资料：布局与啤酒风格页对齐 */
.yeasts-page .yeasts-brand__title[id] {
  scroll-margin-top: 4.75rem;
}

.yeasts-page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
}

.yeasts-page__head h2 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.yeasts-page__actions {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  section.tool.yeasts-page .yeasts-page__actions {
    padding-top: 0.15rem;
  }
}

.yeasts-page__tables {
  margin-top: 0.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.yeasts-page__scroll {
  min-width: 46rem;
}

.yeasts-page .yeasts-brand {
  margin-top: 2.75rem;
  padding-top: 0;
}

.yeasts-page .yeasts-brand:first-of-type {
  margin-top: 0.85rem;
}

.yeasts-brand__header {
  margin: 0 0 0.7rem;
}

.yeasts-brand__title {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  background: var(--accent-surface);
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.yeasts-brand__names {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.yeasts-brand__zh {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.yeasts-brand__en {
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
}

.yeasts-table {
  width: 100%;
  min-width: 46rem;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.88rem;
  line-height: 1.45;
}

.yeasts-col--model {
  width: 5.5rem;
}

.yeasts-col--name {
  width: 11rem;
}

.yeasts-col--type,
.yeasts-col--form {
  width: 5.5rem;
}

.yeasts-col--atten {
  width: 7.5rem;
}

.yeasts-col--temp {
  width: 8.5rem;
}

.yeasts-col--abv {
  width: 6.5rem;
}

.yeasts-table th,
.yeasts-table td {
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--table-divider);
  text-align: left;
  vertical-align: top;
}

.yeasts-table thead th {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.yeasts-table__model {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.84rem;
}

.yeasts-table__model--inline {
  display: none;
}

.yeasts-table__style-head {
  display: block;
}

.yeasts-table__style-text {
  display: block;
}

.yeasts-table__name-zh {
  display: block;
  font-weight: 500;
  color: var(--text);
}

.yeasts-table__name-en {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.yeasts-table__vital {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 须高于 section.tool .hint 的 margin 简写，否则 margin-top 被压成 0 */
section.tool.yeasts-page .hint.yeasts-page__source {
  margin-top: 2.75rem;
}

.yeasts-table__name-link {
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
}

.yeasts-table__name-link:hover,
.yeasts-table__name-link:focus-visible {
  text-decoration: underline;
}

.yeasts-table__model-link {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.yeasts-table__model-link:hover,
.yeasts-table__model-link:focus-visible {
  text-decoration: underline;
}

.yeasts-table__name-en-link {
  text-decoration: none;
}

.yeasts-table__name-en-link:hover,
.yeasts-table__name-en-link:focus-visible {
  color: var(--link);
  text-decoration: underline;
}

@media (max-width: 719px) {
  .yeasts-page__tables,
  .yeasts-page__scroll,
  .yeasts-page .yeasts-brand {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .yeasts-page__tables {
    overflow-x: visible;
  }

  .yeasts-page__scroll {
    min-width: 0;
  }

  .yeasts-brand__header,
  .yeasts-brand__title {
    width: 100%;
    box-sizing: border-box;
  }

  .yeasts-table {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    table-layout: auto;
  }

  .yeasts-table colgroup {
    display: none;
  }

  .yeasts-table thead {
    display: none;
  }

  .yeasts-table tbody {
    display: block;
    width: 100%;
  }

  .yeasts-table tbody tr.yeasts-table__row {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.8rem;
    background: var(--surface);
    border: 1px solid var(--table-divider);
    border-radius: 8px;
  }

  .yeasts-table tbody tr.yeasts-table__row:last-child {
    margin-bottom: 0;
  }

  .yeasts-table tbody td.yeasts-table__model--col {
    display: none;
  }

  .yeasts-table tbody td.yeasts-table__name {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 0.55rem;
    margin-bottom: 0.2rem;
    border-bottom: 1px solid var(--table-divider);
    text-align: left;
  }

  .yeasts-table tbody td.yeasts-table__name::before {
    display: none;
  }

  .yeasts-table__style-head {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.45rem;
    align-items: start;
    line-height: 1.4;
  }

  .yeasts-table__model--inline {
    display: block;
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
  }

  .yeasts-table__style-text {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .yeasts-table tbody td.yeasts-table__name .yeasts-table__name-zh,
  .yeasts-table tbody td.yeasts-table__name .yeasts-table__name-link {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
  }

  .yeasts-table tbody td.yeasts-table__name .yeasts-table__name-en,
  .yeasts-table tbody td.yeasts-table__name .yeasts-table__name-en-link {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--muted);
  }

  .yeasts-table tbody td.yeasts-table__name .yeasts-table__name-en-link:hover,
  .yeasts-table tbody td.yeasts-table__name .yeasts-table__name-en-link:focus-visible {
    color: var(--link);
  }

  a.yeasts-table__model--inline.yeasts-table__model-link {
    display: block;
  }

  .yeasts-table tbody td.yeasts-table__vital {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.38rem 0;
    border-bottom: 1px solid var(--table-divider);
    white-space: normal;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .yeasts-table tbody td.yeasts-table__vital:last-child {
    border-bottom: none;
  }

  .yeasts-table tbody td.yeasts-table__vital::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    text-align: left;
    line-height: 1.45;
  }
}

@media (min-width: 720px) {
  .yeasts-table__model--inline {
    display: none !important;
  }
}

/* 酵母详情（对齐啤酒风格详情） */
.yeast-detail__back {
  margin: 1.5rem 0 0;
}

.yeast-detail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

.yeast-detail__hero {
  flex: 1 1 12rem;
  min-width: 0;
}

.yeast-detail__style-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
  line-height: 1.4;
}

.yeast-detail__name-zh {
  margin: 0;
  min-width: 0;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.yeast-detail__model-inline {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.92em;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.01em;
}

.yeast-detail__name-en {
  margin: 0;
  min-width: 0;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.4;
}

section.tool.tool--page.yeast-detail .yeast-detail__brand {
  margin: 0.1rem 0 0;
  min-width: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--muted);
}

.yeast-detail__actions {
  margin: 0;
  flex-shrink: 0;
}

@media (max-width: 719px) {
  .yeast-detail__actions {
    display: none;
  }
}

.yeast-detail__block {
  margin: 0 0 1.35rem;
}

.yeast-detail__block:last-child {
  margin-bottom: 0;
}

.yeast-detail__block-title {
  margin: 0 0 0.65rem;
  padding: 0.45rem 0.7rem;
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  background: var(--accent-surface);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.yeast-detail__block--vitals {
  margin-bottom: 1.5rem;
}

.yeast-detail-vitals {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.yeast-detail-vital {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0.65rem 0.75rem;
  background: var(--surface2);
  border: 1px solid var(--table-divider);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
}

.yeast-detail-vital__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.yeast-detail-vital__value {
  width: 100%;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  word-break: break-word;
}

.yeast-detail__body .yeast-detail__block + .yeast-detail__block {
  margin-top: 1.1rem;
}

.yeast-detail__section-text {
  margin: 0;
  padding: 0 0.1rem;
  line-height: 1.65;
  color: var(--text);
}

.yeast-detail__pending {
  margin-top: 0.25rem;
}

@media (max-width: 719px) {
  .yeast-detail-vitals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .yeast-detail-vital:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* —— 酿造文章 —— */
/* 页标题与列表间距用 padding，避免与列表项 margin 折叠导致 margin-bottom 无效 */
section.tool.articles-index {
  display: flow-root;
}

section.tool.articles-index > .articles-index__title {
  margin: 0;
  padding-bottom: 2.5rem;
  color: var(--text);
}

.articles-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.articles-list__item {
  padding: 1.45rem 0;
  border-bottom: 1px solid var(--border);
}

.articles-list__item:first-child {
  padding-top: 0;
}

.articles-card {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
  grid-template-areas:
    "title date"
    "summary summary"
    "category category";
}

.articles-card__head {
  display: contents;
}

.articles-card__title {
  grid-area: title;
  min-width: 0;
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.35;
}

.articles-card__title a {
  color: var(--text);
  text-decoration: none;
}

.articles-card__title a:hover {
  color: var(--accent);
}

/* 须高于 section.tool.tool--page p:not(.hint)，否则 color 会被 --text-body 盖住 */
section.tool.tool--page.articles-index p.articles-card__summary {
  grid-area: summary;
  margin: 0.55rem 0 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--muted) 68%, transparent);
}

.articles-card__date {
  grid-area: date;
  justify-self: end;
  align-self: start;
  width: 5.75rem;
  margin: 0.12rem 0 0;
  font-size: 0.92rem;
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
  color: var(--muted);
}

section.tool.tool--page.articles-index p.articles-card__category-row {
  display: flex;
  align-items: center;
  grid-area: category;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--muted) 68%, transparent);
}

@media (max-width: 719px) {
  .articles-card {
    grid-template-areas:
      "title title"
      "summary summary"
      "category date";
    row-gap: 0;
  }

  .articles-card:not(:has(.articles-card__category-row)) {
    grid-template-areas:
      "title date"
      "summary summary";
  }

  .articles-card__date {
    align-self: center;
    width: auto;
    margin: 0.5rem 0 0;
  }

  .articles-card:not(:has(.articles-card__category-row)) .articles-card__date {
    margin: 0.12rem 0 0;
  }
}

.articles-card__category-icon {
  flex-shrink: 0;
}

.articles-card__category {
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

.articles-card__category:hover {
  color: var(--accent);
  text-decoration: underline;
}

.articles-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 1.25rem;
}

.articles-pagination__link {
  color: var(--accent);
}

.articles-pagination__current {
  color: var(--text-muted);
}

.article-detail__head {
  margin-bottom: 1.1rem;
}

.article-detail__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0.35rem 0 0;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
}

.article-detail__date {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}

.article-detail__source {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}

.article-detail__source a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.article-detail__source a:hover {
  color: var(--text);
}

.article-detail__actions {
  margin: 0 0 0 auto;
  flex-shrink: 0;
}

/* 须高于 section.tool.tool--page p:not(.hint)，否则 color 会被 --text-body 盖住 */
section.tool.tool--page.article-detail p.article-detail__summary {
  margin: 0.85rem 0 0.75rem;
  padding: 0.45rem 0 0.45rem 0.85rem;
  line-height: 1.65;
  font-size: 0.95rem;
  border-left: 3px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  color: color-mix(in srgb, var(--muted) 62%, transparent);
}

.article-content {
  line-height: 1.75;
  color: var(--text);
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4 {
  margin: 1.25rem 0 0.65rem;
  line-height: 1.35;
}

.article-content p {
  margin: 0 0 0.85rem;
}

.article-content ul,
.article-content ol {
  margin: 0 0 0.85rem 1.25rem;
  padding: 0;
}

.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.article-content blockquote {
  margin: 0 0 0.85rem;
  padding: 0.5rem 0.85rem;
  border-left: 3px solid var(--border);
  color: var(--text-muted);
}

.article-detail__more {
  margin-top: 2rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--border);
}

.article-detail__more-title {
  margin: 0 0 0.65rem;
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--text);
}

.article-detail__more-list {
  list-style: disc;
  margin: 0;
  padding: 0 0 0 1.25rem;
}

.article-detail__more-item {
  margin: 0;
  padding: 0.28rem 0;
  list-style: inherit;
}

.article-detail__more-link {
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--text);
  text-decoration: none;
}

.article-detail__more-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

section.tool.tool--page.article-detail p.article-detail__category-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 1rem 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--muted) 68%, transparent);
}

.article-detail__category-icon {
  flex-shrink: 0;
}

.article-detail__category {
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

.article-detail__category:hover {
  color: var(--accent);
  text-decoration: underline;
}

.article-detail__back {
  margin-top: 1.5rem;
}