/* 通用组件：卡片 / 按钮 / 表单 / 表格 / 标签 / 提示 / 抽屉 / 血统表 */
.card {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.card__title {
  font-size: var(--fs-lg); font-weight: 700;
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.card__hint { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: var(--sp-3); }
.card--flush { padding: 0; overflow: hidden; }
.view > .toolbar:first-child { align-items: center; margin-bottom: 18px; }
.view > .toolbar:first-child > strong:first-child { font-size: var(--fs-2xl); line-height: 1.25; }
.view > .toolbar:first-child > .help { max-width: 680px; }

/* Account gate and subscription console */
.auth-panel { width: min(100%, 440px); padding: clamp(22px, 5vw, 38px); box-shadow: var(--shadow-lg); }
.auth-panel h1 { font-size: clamp(22px, 4vw, 28px); margin: 10px 0 5px; }
.auth-panel__mark { display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 14px; color: #fff; font-weight: 800; font-size: 22px;
  background: linear-gradient(135deg, #1f6feb, #37b9c9); }
.auth-simple-switch { margin: 0 0 14px; }

/* Kinship network: bounded canvas workspace with a keyboard-readable detail panel. */
.network-shell { padding: 24px; overflow: hidden; }
.network-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.network-heading h3 { margin: 4px 0 6px; font-size: var(--fs-xl); }
.network-eyebrow, .network-detail__kicker { color: var(--c-accent); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; }
.network-count { white-space: nowrap; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.network-heading__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.network-heading__actions .btn { min-height: 44px; }
.network-settings { margin-bottom: 16px; border: 1px solid var(--c-line); border-radius: 12px; padding: 12px 16px 0; }
.network-settings summary { cursor: pointer; font-weight: 650; padding-bottom: 12px; min-height: 32px; }
.network-settings:not([open]) { padding-bottom: 0; }
.network-settings .network-tools { grid-template-columns: repeat(4,minmax(0,1fr)); }
.network-layout-status { color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.7; margin: 12px 0 0; }
.network-tools { display: grid; grid-template-columns: repeat(4,minmax(110px,1fr)) minmax(180px,2fr); gap: 12px; }
.network-tools .field { min-width: 0; }
.network-tools select { width: 100%; }
.network-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 16px 0; font-size: var(--fs-sm); }
.network-legend span { display: inline-flex; align-items: center; gap: 6px; }
.network-legend i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #75859b; }
.network-warning { padding: 10px 14px; background: var(--c-panel-2); border-left: 3px solid #ca9541; border-radius: 6px; }
.network-workspace { display: grid; grid-template-columns: minmax(0,1fr) 250px; border: 1px solid var(--c-line); border-radius: 16px; overflow: hidden; }
.network-stage { position: relative; min-width: 0; background: radial-gradient(ellipse at 45% 40%,#172c46 0%,#0b1424 72%); }
.network-stage { background-image: radial-gradient(circle at 28% 30%,#294b663d,transparent 55%),radial-gradient(circle at 72% 70%,#1a514030,transparent 52%),radial-gradient(#7799b512 1px,transparent 1px); background-size: auto,auto,24px 24px; background-color: #0b1424; }
.network-fold-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px;
  padding: 10px 14px; border: 1px solid var(--c-line); background: var(--c-panel-2); border-radius: 10px; margin-bottom: 12px; }
.network-fold-note > span:first-child { color: var(--c-accent); font-weight: 650; }
.network-shell--fullscreen .network-fold-note { flex-shrink: 0; margin: 0; }
.descendant-panel { margin-top: 14px; }
.descendant-panel h3 { margin: 0; font-size: var(--fs-lg); }
.descendant-group { margin-top: 14px; }
.descendant-group h4 { margin: 0 0 8px; font-size: var(--fs-base); color: var(--c-accent); }
.descendant-list { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 14px; }
.descendant-row { display: flex; align-items: baseline; gap: 8px; padding: 5px 0;
  border-bottom: 1px dashed var(--c-line); }
.descendant-row .help { line-height: 1.6; }
.network-detail__kicker { line-height: 1.8; }
.import-sex-policy { padding: 12px 16px; margin: 14px 0; border-left: 3px solid var(--c-accent);
  border-radius: 8px; background: var(--c-panel-2); color: var(--c-muted); line-height: 1.7; }
.import-sex-summary { padding: 18px; margin: 16px 0; background: var(--c-panel-2); border: 1px solid var(--c-line); border-radius: 12px; }
.import-sex-summary h3 { margin: 0 0 12px; font-size: var(--fs-lg); }
.import-sex-summary summary { cursor: pointer; padding: 10px 0; }
.network-canvas { display: block; width: 100%; height: clamp(340px,55vh,620px); touch-action: none; cursor: grab; }
.network-canvas:focus-visible { outline: 3px solid #81dccb; outline-offset: -5px; }
.network-stage__caption { position: absolute; bottom: 12px; left: 16px; color: #c9d7e9; font-size: 12px; pointer-events: none; }
.network-detail { padding: 22px; min-width: 0; background: var(--c-panel); border-left: 1px solid var(--c-line); display: flex; flex-direction: column; gap: 14px; }
.network-detail h3 { font-size: var(--fs-lg); overflow-wrap: anywhere; margin: 0; line-height: 1.5; }
.network-detail p { margin: 0; line-height: 1.7; }
.network-detail .btn { width: 100%; margin-top: 4px; }
.network-peer-list { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--c-line); }
.network-peer-list h4 { margin: 0 0 4px; font-size: var(--fs-sm); }
.network-peer-list .btn { white-space: normal; text-align: left; line-height: 1.5; }
.network-shell--fullscreen .network-peer-list { border-color: #476077; }
.network-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 16px; }
body.simple-mode .network-canvas { height: 460px; }
body.simple-mode .network-stage__caption { font-size: 16px; }
/* Fullscreen uses the entire dark stage. Tools/details overlay it on demand. */
.network-shell.network-shell--fullscreen { position: fixed; inset: 0; z-index: 20000;
  width: 100%; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0;
  --c-panel: #132236; --c-panel-2: #182c43; --c-line: #31475d; --c-line-strong: #53718a;
  --c-text: #edf4fb; --c-muted: #bacbdb; --c-faint: #9fb6ca;
  --c-accent: #82e2d1; --c-accent-hover: #a6f0e4; --c-accent-soft: #264b4c;
  --fs-bar-height: 70px; --fs-top: max(16px,env(safe-area-inset-top));
  --fs-right: max(18px,env(safe-area-inset-right)); --fs-left: max(18px,env(safe-area-inset-left));
  padding: 0; display: block; overflow: hidden; background: #0b1424; color: var(--c-text);
  color-scheme: dark; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.network-shell--fullscreen::backdrop { background: #0b1424; }
.network-shell--fullscreen > .network-heading { display: none; }
.network-shell--fullscreen .network-workspace { position: absolute; inset: 0; display: block;
  min-height: 0; border: 0; border-radius: 0; }
.network-shell--fullscreen .network-stage { position: absolute; inset: 0; display: block; min-height: 0; }
.network-shell--fullscreen .network-stage__caption { display: none; }
.network-shell--fullscreen .network-canvas, body.simple-mode .network-shell--fullscreen .network-canvas {
  width: 100%; height: 100%; min-height: 0; }
.network-fs-bar { position: absolute; z-index: 3; top: var(--fs-top); right: var(--fs-right); left: var(--fs-left);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: var(--fs-bar-height); pointer-events: none; }
.network-fs-identity { display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 10px 16px; border: 1px solid #7290ab30; border-radius: 16px;
  background: #0d1b2cee; box-shadow: 0 10px 30px #0003; }
.network-fs-identity strong { display: block; font-size: 16px; line-height: 1.4; letter-spacing: .03em; }
.network-fs-mark { color: #82e2d1; display: flex; }
.network-fs-summary { display: block; color: #a9bfd0; font-size: 12px; line-height: 1.7; font-variant-numeric: tabular-nums; }
.network-fs-partial { font-size: 12px; color: #f8d288; padding: 5px 9px; border: 1px solid #f8d28844; border-radius: 20px; white-space: nowrap; }
.network-fs-buttons { display: flex; gap: 8px; pointer-events: auto; }
.network-shell--fullscreen .btn { background: #15283cef; color: #e1edf7; border-color: #40576c;
  min-height: 44px; box-shadow: none; }
.network-shell--fullscreen .btn:hover, .network-shell--fullscreen .btn.is-active { background: #214548;
  color: #b5ffef; border-color: #83dcca; }
.network-shell--fullscreen .btn--primary { background: #82e2d1; color: #0e2b32; border-color: #82e2d1; }
.network-shell--fullscreen .btn--primary:hover { background: #a6f0e4; color: #0e2b32; }
.network-shell--fullscreen :is(button,input,select,summary):focus-visible { outline: 3px solid #b5ffef; outline-offset: 3px; }
.network-fs-drawer { position: absolute; z-index: 4; top: calc(var(--fs-top) + var(--fs-bar-height) + 12px);
  right: var(--fs-right); width: min(390px,calc(100% - var(--fs-left) - var(--fs-right)));
  max-height: calc(100% - var(--fs-top) - var(--fs-bar-height) - 90px); min-height: 0;
  border: 1px solid #6988a655; border-radius: 18px; overflow: hidden;
  background: #102034fa; box-shadow: 0 24px 70px #0007; display: flex; flex-direction: column; }
.network-fs-drawer__head { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-shrink: 0; border-bottom: 1px solid #31475d; }
.network-fs-drawer__head h3 { margin: 0; font-size: 16px; }
.network-fs-drawer__body { overflow: auto; overscroll-behavior: contain; min-height: 0; padding: 16px;
  scrollbar-color: #5f7c95 #14283b; scrollbar-width: thin; }
.network-fs-query { display: grid; gap: 10px; margin-bottom: 18px; }
.network-fs-query .btn { width: 100%; justify-content: center; }
.network-shell--fullscreen .network-settings { margin: 0; padding: 0; border: 0; }
.network-shell--fullscreen .network-settings > summary { display: none; }
.network-shell--fullscreen .network-tools { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 12px; }
.network-shell--fullscreen .network-tools .field:nth-child(5) { grid-column: 1/-1; }
.network-shell--fullscreen .network-tools .field:last-child { grid-column: auto; }
.network-shell--fullscreen .input, .network-shell--fullscreen .select { background: #192f45; color: #edf4fb;
  border-color: #476077; width: 100%; min-height: 44px; }
.network-shell--fullscreen .network-legend { font-size: 12px; gap: 10px 14px; padding: 18px 0; }
.network-shell--fullscreen .network-fold-note { margin: 0 0 14px; padding: 12px; font-size: 13px; }
.network-shell--fullscreen .network-warning { color: #f8d288; background: #493b252b; margin: 0 0 14px; }
.network-shell--fullscreen .network-layout-status { margin: 0 0 14px; font-size: 12px; }
.network-shell--fullscreen .network-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 0; }
.network-shell--fullscreen .network-actions .checkbox, .network-shell--fullscreen .network-actions .help { grid-column: 1/-1; }
.network-shell--fullscreen .network-actions .checkbox { min-height: 38px; }
.network-shell--fullscreen .network-detail { border: 0; padding: 0; background: transparent; max-height: none; gap: 12px; }
.network-shell--fullscreen .network-detail__kicker { color: #82e2d1; }
.network-fs-footer { position: absolute; z-index: 2; bottom: max(18px,env(safe-area-inset-bottom));
  left: var(--fs-left); max-width: min(640px,calc(100% - var(--fs-left) - var(--fs-right)));
  color: #c1d2e1; pointer-events: none; }
.network-fs-context { background: #0b182bd9; border: 1px solid #6988a62b; border-radius: 12px; padding: 9px 14px; }
.network-fs-selection { color: #d9eeff; font-size: 13px; font-weight: 650; display: block; overflow-wrap: anywhere; }
.network-fs-context > span:last-child { font-size: 12px; color: #a5bbcf; }
.network-fs-notice { margin-top: 8px; padding: 10px 14px; border-radius: 10px; color: #ade7d8; background: #132c3a; }
.network-fs-notice.is-error { color: #ffd5b3; background: #503428; }
body.simple-mode .network-shell--fullscreen { --fs-bar-height: 82px; }
body.simple-mode .network-shell--fullscreen .network-fs-identity strong { font-size: 19px; }
body.simple-mode .network-shell--fullscreen .network-fs-summary { font-size: 15px; }
body.simple-mode .network-shell--fullscreen .network-fs-context > span { font-size: 15px; }
body.simple-mode .network-shell--fullscreen .network-fs-drawer__head h3 { font-size: 19px; }
body.simple-mode .network-shell--fullscreen .network-legend, body.simple-mode .network-shell--fullscreen .network-layout-status { font-size: 15px; }
@media (max-width: 680px) {
  .network-shell.network-shell--fullscreen { --fs-top: max(10px,env(safe-area-inset-top)); --fs-right: 12px; --fs-left: 12px; --fs-bar-height: 112px; }
  .network-fs-bar { align-items: stretch; flex-direction: column; justify-content: flex-start; gap: 8px; }
  .network-fs-identity { padding: 8px 12px; border-radius: 12px; gap: 10px; align-self: flex-start; max-width: 100%; }
  .network-fs-identity strong { font-size: 14px; }
  .network-fs-summary { font-size: 11px; }
  .network-fs-buttons { justify-content: flex-end; }
  .network-fs-buttons .btn { font-size: 13px; padding: 8px 12px; }
  .network-fs-drawer { max-height: calc(100% - var(--fs-top) - var(--fs-bar-height) - 94px); }
  .network-fs-footer { bottom: max(12px,env(safe-area-inset-bottom)); }
  .network-fs-context { padding: 8px 10px; }
  .network-fs-context > span:last-child { font-size: 11px; }
  body.simple-mode .network-shell.network-shell--fullscreen { --fs-bar-height: 132px; }
  body.simple-mode .network-shell--fullscreen .network-fs-buttons .btn { font-size: 15px; padding: 6px 10px; }
  body.simple-mode .network-shell--fullscreen .network-tools { grid-template-columns: minmax(0,1fr); }
  body.simple-mode .network-shell--fullscreen .network-tools .field { grid-column: auto; }
}
@media (max-width: 1000px) {
  .network-tools { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .network-settings .network-tools { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .network-tools .field:last-child { grid-column: 1/-1; }
  .network-workspace { grid-template-columns: minmax(0,1fr) 220px; }
}
@media (max-width: 680px) {
  .network-shell { padding: 14px; }
  .network-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .network-workspace { grid-template-columns: minmax(0,1fr); }
  .network-canvas { height: 360px; }
  .network-detail { border-left: 0; border-top: 1px solid var(--c-line); padding: 18px; }
  .network-detail .btn { min-height: 44px; }
  .network-heading__actions { width: 100%; justify-content: space-between; }
}
.auth-form, .admin-form { display: grid; gap: 13px; }
.auth-form input, .admin-form input, .admin-form select,
.admin-row input, .admin-row select { width: 100%; min-width: 0; padding: 8px 10px;
  font: inherit; border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--c-text); }
.auth-form .btn { min-height: 42px; justify-content: center; }
.auth-error { color: var(--c-danger); min-height: 1.4em; margin: 0; }
.invite-signup { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--c-line); }
.invite-signup summary { color: var(--c-accent); cursor: pointer; font-weight: 600; }
.invite-signup .auth-form { margin-top: 16px; }
.admin-view h1 { font-size: var(--fs-2xl); }
.admin-view h2 { font-size: var(--fs-lg); margin-bottom: 12px; }
.admin-view .view__header { margin-bottom: 16px; }
.admin-view .view__header p { color: var(--c-muted); }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.admin-form--wide { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); align-items: end; }
.admin-list { display: grid; gap: 8px; }
.admin-row { display: flex; align-items: end; gap: 10px; flex-wrap: wrap;
  padding: 11px 0; border-top: 1px solid var(--c-line); font-size: var(--fs-sm); }
.admin-row strong { flex: 1 1 170px; align-self: center; overflow-wrap: anywhere; }
.admin-row label { flex: 0 1 135px; min-width: 120px; color: var(--c-muted); }
.admin-row input, .admin-row select { display: block; margin-top: 3px; }
.admin-usage { align-self: center; color: var(--c-muted); }
.invite-code { overflow-wrap: anywhere; color: var(--c-accent); font-weight: 700; margin: 14px 0; }
.mobile-pigeon-list { display: grid; gap: 9px; }
.mobile-pigeon-card { display: grid; gap: 4px; width: 100%; padding: 14px;
  text-align: left; border: 1px solid var(--c-line); border-radius: var(--radius);
  background: #fff; color: var(--c-text); font: inherit; cursor: pointer; }
.mobile-pigeon-card strong { font-family: var(--font-mono); overflow-wrap: anywhere; }
.mobile-pigeon-card span { color: var(--c-text-2); }
.mobile-pigeon-card small { color: var(--c-muted); overflow-wrap: anywhere; }
.mobile-pigeon-card:focus-visible { outline: 3px solid var(--c-accent); }
@media (max-width: 700px) {
  .admin-grid { grid-template-columns: 1fr; }
  .admin-row label { flex: 1 1 130px; }
  .admin-row button { min-height: 42px; }
}

.grid { display: grid; gap: var(--sp-3); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.spacer { flex: 1; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 8px 14px;
  font: inherit; font-size: var(--fs);
  color: var(--c-text);
  background: var(--c-panel);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: .12s;
  white-space: nowrap;
}
.btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.btn--primary:hover { background: var(--c-accent-hover); color: #fff; }
.btn--danger { color: var(--c-danger); border-color: #e8b4ae; }
.btn--danger:hover { background: var(--c-danger-soft); color: var(--c-danger); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--c-muted); }
.btn--ghost:hover { background: var(--c-panel-2); }
.btn--sm { padding: 3px 9px; font-size: var(--fs-sm); }
.btn--block { width: 100%; justify-content: center; }

/* ---------- 表单 ---------- */
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field__label { font-size: var(--fs-sm); color: var(--c-muted); }
.input, .select, .textarea, select {
  font: inherit; font-size: var(--fs);
  min-height: 40px; padding: 8px 11px;
  color: var(--c-text);
  background: #fff;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  outline: none;
  min-width: 0;
}
/* 「输入了候选表里没有的值」：标黄提示"这将成为一个新选项"。
   同一个类也用在 .help--new 上，让提示文字与输入框颜色一致。
   为什么用黄而不是红：新增一个棚/鸽舍是正常操作，不是错误。 */
.input--new {
  background: var(--c-warn-soft);
  border-color: var(--c-warn);
}
.help--new { color: var(--c-warn); }

.input:focus, .select:focus, .textarea:focus, select:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(31, 111, 235, .12);
}
.input--lg { padding: 8px 12px; font-size: var(--fs-lg); }
.toolbar > .field { flex: 0 1 auto; }
.toolbar > .field:has(> input[type="text"]) { flex: 0 1 min(360px, 100%); }
.toolbar > .field:has(> input[type="text"]) > input { width: 100% !important; }
.textarea { resize: vertical; min-height: 72px; font-family: var(--font-mono); font-size: var(--fs-sm); }
.checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs); cursor: pointer; }
.checkbox input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--c-accent); }
.help { font-size: var(--fs-xs); color: var(--c-faint); }

/* ---------- 表格 ---------- */
.table-wrap { overflow: auto; border-radius: var(--radius); border: 1px solid var(--c-line); }
table.data { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); background: #fff; }
table.data th, table.data td {
  padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--c-line);
  white-space: nowrap;
}
table.data th {
  background: #f2f5f9; font-weight: 700; color: var(--c-text-2);
  position: sticky; top: 0; z-index: 1;
}
table.data tbody tr:hover { background: var(--c-accent-soft); }
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { background: var(--c-accent-soft); color: var(--c-accent); }
table.data th.is-active { color: var(--c-accent); }
table.data td.is-num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.is-mono { font-family: var(--font-mono); font-size: var(--fs-xs); }
.empty-row { color: var(--c-faint); text-align: center; padding: var(--sp-5) 0; }

/* ---------- 标签 ---------- */
.tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: var(--fs-xs); line-height: 1.7;
  background: var(--c-bg); color: var(--c-text-2); border: 1px solid var(--c-line);
}
.tag--ok { background: var(--c-ok-soft); color: var(--c-ok); border-color: #bfe3c8; }
.tag--warn { background: var(--c-warn-soft); color: var(--c-warn); border-color: #f0dca6; }
.tag--err { background: var(--c-danger-soft); color: var(--c-danger); border-color: #f0c0bb; }
.tag--info { background: var(--c-info-soft); color: var(--c-accent); border-color: #c6dafc; }
.tag--father { background: var(--c-father); border-color: var(--c-father-line); }
.tag--mother { background: var(--c-mother); border-color: var(--c-mother-line); }

/* ---------- 统计卡 ---------- */
.stat {
  background: var(--c-panel); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4);
}
.stat__label { font-size: var(--fs-sm); color: var(--c-muted); }
.stat__value { font-size: var(--fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.stat__sub { font-size: var(--fs-xs); color: var(--c-faint); }

/* ---------- 提示 ---------- */
.alert {
  border-radius: var(--radius); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm); margin-bottom: var(--sp-3);
  border: 1px solid var(--c-line); background: var(--c-panel-2);
}
.alert { border-radius: var(--radius); padding: 12px 14px; line-height: 1.55; }
.alert--ok { background: var(--c-ok-soft); border-color: #bfe3c8; color: #0f5132; }
.alert--warn { background: var(--c-warn-soft); border-color: #f0dca6; color: #7a5b00; }
.alert--err { background: var(--c-danger-soft); border-color: #f0c0bb; color: #7a2318; }
.alert--info { background: var(--c-info-soft); border-color: #c6dafc; color: #12408f; }

/* ---------- 日志 ---------- */
.log {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  background: #0f172a; color: #d7e2f0;
  border-radius: var(--radius); padding: var(--sp-3);
  max-height: 220px; overflow: auto; white-space: pre-wrap; line-height: 1.6;
}
.log b { color: #7dd3fc; font-weight: 400; }

/* ---------- 抽屉 ---------- */
.drawer-mask {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .35);
  display: none; z-index: 50;
}
.drawer-mask.is-open { display: block; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 92vw);
  background: var(--c-panel); border-left: 1px solid var(--c-line);
  box-shadow: var(--shadow-lg); z-index: 51;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .18s ease-out;
}
.drawer.is-open { transform: none; }
.drawer__head {
  padding: var(--sp-4); border-bottom: 1px solid var(--c-line);
  display: flex; align-items: center; gap: var(--sp-3);
}
.drawer__body { padding: var(--sp-4); overflow-y: auto; }

/* ---------- 血统表 ---------- */
.ped-wrap { overflow: auto; }
table.ped { border-collapse: separate; border-spacing: 4px; width: 100%; table-layout: fixed; }
table.ped td { padding: 0; vertical-align: middle; }
.ped-node {
  border: 1px solid var(--c-line); border-radius: 7px;
  padding: 5px 7px; background: #fff; cursor: pointer; overflow: hidden;
  transition: .12s;
}
.ped-node[type="button"] { display: block; width: 100%; text-align: left; font: inherit; }
.ped-node:hover { border-color: var(--c-accent); box-shadow: var(--shadow-sm); }
.ped-node:focus-visible { outline: 3px solid rgba(31, 111, 235, .28); outline-offset: 1px; }
.ped-node__ring { display: block; font-weight: 700; font-size: var(--fs-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ped-node__meta { display: block; font-size: var(--fs-xs); color: var(--c-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ped-node.is-self { background: var(--c-self); border-color: var(--c-self-line); }
.ped-node.is-father { background: var(--c-father); border-color: var(--c-father-line); }
.ped-node.is-mother { background: var(--c-mother); border-color: var(--c-mother-line); }
.ped-node.is-unknown { background: var(--c-panel-2); border-style: dashed; color: var(--c-faint); }
.ped-gen { text-align: center; font-size: var(--fs-xs); color: var(--c-muted);
  padding-bottom: 2px; letter-spacing: .04em; }
.legend { display: flex; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--c-muted); flex-wrap: wrap; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  margin-right: 4px; vertical-align: -1px; border: 1px solid var(--c-line-strong); }

/* ---------- 插件卡 ---------- */
.plugin {
  border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--sp-3); background: var(--c-panel);
}
.plugin__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 4px; }
.plugin__name { font-weight: 700; font-size: var(--fs); }
.plugin__desc { font-size: var(--fs-sm); color: var(--c-muted); }
.plugin__meta { font-size: var(--fs-xs); color: var(--c-faint); font-family: var(--font-mono); }

.toolbar { display: flex; gap: var(--sp-2); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--sp-3); }

/* ---------- 血统图工作页 ---------- */
.graph-view { max-width: 1440px; }
.graph-hero { position: relative; overflow: hidden; border-color: #d8e4fb;
  background: linear-gradient(125deg, #fff 0%, #f5f9ff 64%, #f0f7f1 100%); }
.graph-hero::after { content: ""; position: absolute; width: 260px; height: 260px;
  right: -100px; top: -145px; border-radius: 50%; border: 36px solid rgba(31,111,235,.06); }
.graph-hero > * { position: relative; }
.graph-query { display: grid; grid-template-columns: minmax(260px, 1.8fr) 110px auto auto;
  align-items: end; gap: var(--sp-3); }
.graph-query .field input { width: 100%; }
.graph-query__check { min-height: 34px; padding-bottom: 0; }
.graph-export-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid rgba(31,111,235,.14); }
.graph-export-row__label { color: var(--c-muted); font-size: var(--fs-sm); margin-right: var(--sp-1); }
.graph-legacy-toggle { margin-left: auto; color: var(--c-text-2); font-weight: 600; }
.graph-legacy-toggle input { width: 18px; height: 18px; accent-color: var(--c-accent); }
.graph-legacy-controls { border-top: 1px solid var(--c-line); margin-top: 12px; padding-top: 12px; }
.graph-view-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.graph-query + .graph-view-tabs { margin-top: var(--sp-3); }
.graph-view-tabs .is-active { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.graph-status { margin-top: var(--sp-2); }
.graph-empty { min-height: 126px; display: flex; align-items: center; gap: var(--sp-4);
  border-style: dashed; }
.graph-empty__mark { display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 14px; background: var(--c-accent-soft); color: var(--c-accent); font-size: 24px; }
.graph-summary { display: grid; grid-template-columns: minmax(250px, 1.7fr) repeat(2, minmax(120px, .7fr)) auto;
  gap: 1px; margin-bottom: var(--sp-3); overflow: hidden; border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); background: var(--c-line); box-shadow: var(--shadow-sm); }
.graph-summary > div { background: var(--c-panel); padding: var(--sp-4); }
.graph-summary__identity { background: linear-gradient(135deg, #f7fbff, #fff) !important; }
.graph-summary__kicker { color: var(--c-accent); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; }
.graph-summary__ring { margin: 2px 0; font: 700 var(--fs-xl)/1.4 var(--font-mono); overflow-wrap: anywhere; }
.graph-summary__meta { min-height: 19px; color: var(--c-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.graph-metric { display: flex; flex-direction: column; justify-content: center; }
.graph-metric > span, .graph-metric small { color: var(--c-muted); font-size: var(--fs-sm); }
.graph-metric strong { font-size: var(--fs-2xl); line-height: 1.25; font-variant-numeric: tabular-nums; }
.graph-summary__actions { display: flex; align-items: center; align-content: center; flex-wrap: wrap; gap: var(--sp-2); min-width: 190px; }
.graph-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--c-muted);
  font-size: var(--fs-sm); margin: 0 0 var(--sp-3); }
.graph-generation-head { display: grid; grid-template-columns: repeat(var(--graph-columns, 6), 1fr);
  gap: 4px; padding: var(--sp-3) var(--sp-3) 0; min-width: 900px; }
.graph-generation-head .ped-gen { padding: 5px; color: var(--c-text-2); background: var(--c-panel-2);
  border: 1px solid var(--c-line); border-radius: var(--radius-sm); }
.graph-board { border-color: #d7e1ec; }
.graph-board__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) 0; }
.graph-pedigree-wrap { padding: 0 var(--sp-3) var(--sp-3); }
table.graph-pedigree { min-width: 900px; border-spacing: 5px; }
table.graph-pedigree .ped-node { min-height: 47px; background-clip: padding-box; }
table.graph-pedigree .ped-node.is-self { box-shadow: inset 3px 0 0 #62a971; }
table.graph-pedigree .ped-node.is-father { box-shadow: inset 3px 0 0 #5f91e9; }
table.graph-pedigree .ped-node.is-mother { box-shadow: inset 3px 0 0 #dd84ad; }
table.graph-pedigree .ped-node.is-unknown { cursor: default; box-shadow: none; }
table.graph-pedigree .ped-node.is-unknown:hover { border-color: var(--c-line); box-shadow: none; }
.graph-deep-generation { border-top: 1px solid var(--c-line); padding: 14px 0; }
.graph-deep-generation:first-of-type { border-top: 0; padding-top: 2px; }
.graph-deep-generation__head { display: flex; justify-content: space-between; gap: 12px; color: var(--c-muted); margin-bottom: 9px; }
.graph-deep-generation__head strong { color: var(--c-ink); }
.graph-deep-generation__nodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 8px; }
.graph-modern { padding: 0; overflow: hidden; }
.graph-modern__intro { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap; padding: 20px 22px 8px; }
.graph-modern__intro .card__hint { margin-bottom: 0; }
.graph-modern__scroller { overflow-x: auto; overflow-y: hidden; padding: 6px 20px 22px;
  scrollbar-color: var(--c-line-strong) transparent; }
.graph-modern__scroller:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -3px; }
.graph-modern__columns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(238px, 260px);
  gap: 12px; width: max-content; min-height: 180px; }
.graph-modern__column { border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-panel-2); padding: 10px; min-width: 0; }
.graph-modern__column-head { display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; border-bottom: 1px solid var(--c-line); padding: 5px 4px 11px; margin-bottom: 10px; }
.graph-modern__column-head strong { font-size: var(--fs); }
.graph-modern__column-head span { white-space: nowrap; color: var(--c-muted); font-size: var(--fs-xs); }
.graph-modern__list { display: grid; gap: 9px; align-content: start; }
.graph-bird { display: grid; gap: 5px; width: 100%; min-height: 104px; padding: 13px;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius); color: var(--c-text);
  background: #fff; text-align: left; font: inherit; cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.graph-bird:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--c-accent); }
.graph-bird:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.graph-bird--male { background: var(--c-male); border-color: var(--c-male-line); }
.graph-bird--female { background: var(--c-female); border-color: var(--c-female-line); }
.graph-bird__path { color: var(--c-text-2); font-size: var(--fs-xs); font-weight: 700; }
.graph-bird__ring { font-family: var(--font-mono); font-size: var(--fs); overflow-wrap: anywhere; line-height: 1.35; }
.graph-bird__meta, .graph-bird__status { color: var(--c-text-2); font-size: var(--fs-sm); }
.graph-bird__status { padding-top: 6px; border-top: 1px solid rgba(45, 68, 95, .16); }
.graph-bird-card { min-width: 0; }
.graph-bird-card__actions { display: flex; justify-content: flex-end; padding: 6px 2px 0; }
.graph-bird-card__actions .btn { min-height: 34px; }
.graph-ancestor-edit { margin-top: 4px; min-height: 30px; max-width: 100%; }
.graph-sex-evidence { display: block; margin-top: 6px; font-size: var(--fs-sm); line-height: 1.5;
  color: var(--c-text-2); overflow-wrap: anywhere; }
.graph-sex-evidence--compact { margin-top: 1px; font-size: var(--fs-xs); }
.graph-sex-evidence[data-sex-status="conflict"],
.graph-sex-evidence[data-sex-status="review_required"] { font-weight: 700; color: var(--c-danger); }
.network-shell--fullscreen .graph-sex-evidence { color: #c9d7e9; }
.network-shell--fullscreen .graph-sex-evidence[data-sex-status="conflict"],
.network-shell--fullscreen .graph-sex-evidence[data-sex-status="review_required"] { color: #ffb7c2; }
body.simple-mode .graph-bird-card__actions .btn,
body.simple-mode .graph-ancestor-edit { min-height: 44px; font-size: 16px; }
.graph-modern__unknown { padding: 12px; border: 1px dashed var(--c-line-strong);
  border-radius: var(--radius); color: var(--c-muted); background: #fff; font-size: var(--fs-sm); }

@media (max-width: 1050px) {
  .graph-query { grid-template-columns: minmax(240px, 1fr) 110px auto; }
  .graph-query__check { grid-column: 1 / 3; }
  .graph-summary { grid-template-columns: 1.4fr repeat(2, 1fr); }
  .graph-summary__actions { grid-column: 1 / -1; min-width: 0; }
}
@media (max-width: 650px) {
  .graph-query { grid-template-columns: 1fr; }
  .graph-query__check { grid-column: auto; }
  .graph-query .btn { width: 100%; justify-content: center; }
  .graph-summary { grid-template-columns: 1fr 1fr; }
  .graph-summary__identity, .graph-summary__actions { grid-column: 1 / -1; }
  .graph-board__head { display: block; }
  .graph-board__head .legend { margin-top: var(--sp-2); }
  .graph-generation-head, table.graph-pedigree { min-width: 760px; }
  .graph-workflow span + span::before { display: none; }
  .graph-legacy-toggle { margin-left: 0; width: 100%; }
  .graph-modern__intro { padding: 18px 16px 4px; }
  .graph-modern__scroller { overflow: visible; padding: 8px 14px 16px; }
  .graph-modern__columns { display: grid; grid-auto-flow: row; grid-auto-columns: auto;
    grid-template-columns: 1fr; width: 100%; min-height: 0; }
  .graph-modern__column { padding: 12px; }
}

/* ------------------- 筛选区与"当前条件"提示行 ------------------- */
.filters { margin-bottom: var(--sp-2); }
.library-more-toggle { display: inline-flex; }
.library-advanced:not(.is-open) { display: none; }
body.simple-mode .library-more-toggle { display: inline-flex; }
body.simple-mode .library-advanced:not(.is-open) { display: none; }
.filters__grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  align-items: end;
}
.filters__grid .field > input[type="checkbox"] { align-self: flex-start; margin-top: 4px; }
.applied-line {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--c-muted); margin: var(--sp-3) 0 var(--sp-2);
}
.applied-line__label { font-weight: 700; color: var(--c-text-2); }
.applied-line__count { margin-left: auto; font-weight: 700; color: var(--c-text-2); }
.pager { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-muted); }
.spin { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--c-line-strong);
  border-top-color: var(--c-accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }

/* ------------------------- 照片（血统表首页用图） ------------------------- */
.photo-box {
  border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--sp-3); background: var(--c-panel);
}
.photo-box__row { display: flex; gap: var(--sp-4); align-items: flex-start; flex-wrap: wrap; }
.photo-thumb {
  width: 168px; height: auto; max-height: 150px; object-fit: contain;
  border: 1px solid var(--c-line); border-radius: 6px; background: #fff;
}
.photo-box__meta { flex: 1 1 220px; min-width: 180px; }
.photo-box__ring { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-lg); }
.photo-box__line { font-size: var(--fs-sm); color: var(--c-muted); margin-top: 3px; }
.photo-box__actions { display: flex; gap: var(--sp-2); align-items: center; }

@media print {
  .topbar, .sidebar, .brand, .no-print { display: none !important; }
  #app { display: block; height: auto; }
  .main { padding: 0; overflow: visible; }
  .card { border: none; padding: 0; margin: 0; }
}

/* ---------- v1.3.0 新增组件 ---------- */

/* 一排指标卡：与 .grid--4 的区别是不换行优先、卡片自适应宽度 */
.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-2); margin: var(--sp-3) 0;
}

/* 星标（黄色五角星）。未收藏是灰色空心、已收藏才是黄色实心——
   满屏黄星等于没有重点。 */
.star {
  display: inline-block; cursor: pointer; user-select: none;
  font-size: 17px; line-height: 1; color: var(--c-faint);
  transition: color .12s ease, transform .12s ease;
}
.star:hover { transform: scale(1.15); }
.star.is-on { color: #f2b705; }
.star--sm { font-size: 15px; }
.star:focus-visible { outline: 2px solid var(--c-accent); border-radius: 3px; }

/* 可点击的文本（列表里跳去别的视图） */
.link { color: var(--c-accent); cursor: pointer; }
.link:hover { text-decoration: underline; }

/* 抽屉里的滚动画布（鸽舍平面图较宽时要能横向滚） */
.svg-scroll { overflow-x: auto; padding-bottom: 4px; }
.pdf-template-heading { margin: 15px 0 8px; font-weight: 700; color: var(--c-text, #26313e); }
.pdf-template-top { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; }
.pdf-legacy-toggle { color: var(--c-text-2); font-size: var(--fs-sm); }
.pdf-legacy-toggle input { width: 18px; height: 18px; accent-color: var(--c-accent); }
.pdf-template-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 10px; }
.pdf-template-card { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0;
  padding: 10px; text-align: left; color: inherit; background: #fff; border: 1px solid #d9dee6;
  border-radius: 10px; cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s; }
.pdf-template-card:hover, .pdf-template-card:focus-visible { border-color: #2872d7; box-shadow: 0 0 0 2px #2872d722; }
.pdf-template-card.is-selected { border-color: #246ce0; box-shadow: 0 0 0 2px #246ce033; background: #f4f8ff; }
.pdf-template-card img { display: block; width: 100%; height: 144px; object-fit: contain; background: #edf0f3; border-radius: 5px; }
.pdf-template-card__name, .pdf-template-card__hint { width: 100%; }
.pdf-template-card__name { font-weight: 700; font-size: 13px; }
.pdf-template-card__hint { color: #687483; font-size: 11px; }
/* Shared component refinements: neutral content surfaces, theme-aware actions. */
.card__title { margin-bottom: 7px; letter-spacing: -.015em; }
.card__hint { line-height: 1.7; margin-bottom: 18px; }
.btn { font-weight: 550; border-color: var(--c-line); transition: background .16s, border-color .16s, color .16s; }
.btn--primary { border-color: var(--c-accent); box-shadow: 0 3px 8px var(--c-aura); }
.btn:focus-visible, summary:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.field { gap: 6px; }
.field__label { color: var(--c-text-2); font-weight: 550; }
.input, .select, .textarea, select, .auth-form input { border-color: var(--c-line); }
.input:focus, .select:focus, .textarea:focus, select:focus, .auth-form input:focus {
  border-color: var(--c-accent); outline: none; box-shadow: var(--focus-ring); }
.toolbar { gap: 12px; margin-bottom: 16px; }
.grid--2, .grid--3, .grid--4 { min-width: 0; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.library-view > .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px !important; }
.stat { border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.stat__value { margin: 6px 0 3px; letter-spacing: -.045em; }
.stat__label { color: var(--c-muted); }
table.data th, table.data td { padding: 11px 14px; }
table.data th { font-size: 12px; background: var(--c-panel-2); letter-spacing: .025em; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.is-mono { font-size: 12px; }
table.data tbody tr { transition: background .12s; }
.empty-row { padding: 40px 16px; line-height: 1.8; }
.library-advanced { padding: 18px 0 0; border-top: 1px solid var(--c-line); margin: 18px 0; }
.library-view .pager { margin: 12px 0 18px; }
.applied-line .tag { max-width: 100%; overflow-wrap: anywhere; }
.auth-panel { border-radius: 24px; }
.auth-panel__mark { background: var(--c-accent); }
.auth-panel h1 { letter-spacing: -.04em; }
.auth-form input { min-height: 46px; }
.auth-form .btn { min-height: 46px; }
.graph-hero { border-color: var(--c-line); background: linear-gradient(120deg, var(--c-panel) 25%, var(--c-accent-soft)); }
.graph-hero::after { border-color: var(--c-aura-soft); }
.graph-export-row { border-color: var(--c-line); }
.graph-summary__identity { background: var(--c-panel) !important; }
.graph-board { border-color: var(--c-line); }
.graph-deep-generation__head strong { color: var(--c-text); }
.pdf-template-gallery { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.pdf-template-card { padding: 12px; gap: 9px; border-color: var(--c-line); border-radius: var(--radius); }
.pdf-template-card:hover, .pdf-template-card:focus-visible { border-color: var(--c-accent); box-shadow: var(--focus-ring); }
.pdf-template-card.is-selected { border-color: var(--c-accent); box-shadow: var(--focus-ring); background: var(--c-accent-soft); }
.pdf-template-card img { height: 180px; border-radius: 9px; background: var(--c-panel-2); }
.pdf-template-card__name { font-size: var(--fs); }
.pdf-template-card__hint { font-size: var(--fs-xs); color: var(--c-muted); }
.mobile-pigeon-card { padding: 18px; gap: 8px; box-shadow: var(--shadow-sm); }
.mobile-pigeon-card:hover { border-color: var(--c-accent); }
.mobile-pigeon-card strong { font-size: 14px; }
.mobile-pigeon-card span { font-size: 13px; }
@media (max-width: 1200px) { .library-view > .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) {
  .card { padding: 18px; margin-bottom: 18px; }
  .card--flush, .graph-modern { padding: 0; }
  .library-view > .grid--4 { gap: 10px; margin-bottom: 18px !important; }
  .stat { padding: 15px; }
  .stat__value { font-size: 25px; }
  .stat__sub { font-size: 11px; }
  .toolbar .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .toolbar .spacer { display: none; }
  .pdf-template-gallery { grid-template-columns: minmax(0, 1fr); }
  .pdf-template-card { display: grid; grid-template-columns: 115px minmax(0, 1fr); align-items: center; column-gap: 16px; }
  .pdf-template-card img { grid-row: 1 / 3; height: 128px; }
  .pdf-template-card__name { align-self: end; }
  .pdf-template-card__hint { align-self: start; }
  .filters__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body.simple-mode .stat__value { font-size: var(--fs-2xl); }
body.simple-mode .stat__sub, body.simple-mode .mobile-pigeon-card span,
body.simple-mode .mobile-pigeon-card strong { font-size: var(--fs-sm); }
body.simple-mode table.data th, body.simple-mode table.data td.is-mono { font-size: var(--fs-sm); }
body.simple-mode .pdf-template-card__hint { font-size: var(--fs-xs); }
body.simple-mode .btn--primary { box-shadow: none; }
@media print {
  .nav-scrim, .sidebar__close { display: none !important; }
  #app { overflow: visible; height: auto; }
  .main { padding: 0; background: #fff; }
}
.library-maintenance summary { cursor: pointer; color: var(--c-muted); font-size: var(--fs-sm); }
.library-maintenance[open] summary { margin-bottom: 18px; }
.pdf-options > summary { cursor: pointer; font-weight: 600; min-height: 24px; color: var(--c-text); }
.pdf-options[open] > summary { margin-bottom: 18px; }
.pdf-options > .card { padding: 0; margin: 0; border: 0; box-shadow: none; }

.draft-edit-frame { width: 100%; height: 760px; display: block; border: 1px solid var(--c-line); border-radius: 8px; background: white; margin: 12px 0; }
.draft-page-image { display: block; max-width: 100%; max-height: 85vh; height: auto; margin: 12px auto; background: white; border: 1px solid var(--c-line); }
.draft-photos { display: grid; gap: 8px; max-height: 300px; overflow: auto; }
.draft-photo-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--c-line); }
.draft-photo-row > span { flex: 1; min-width: 180px; overflow-wrap: anywhere; }
.draft-photos .select { min-width: 150px; }
@media (max-width: 700px) { .draft-edit-frame { height: 65vh; } }
.auth-page { display: grid; grid-template-rows: 1fr auto; align-items: center; gap: 36px;
  width: min(1060px, 100%); min-height: 100%; min-width: 0; }
.auth-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  align-items: center; gap: clamp(40px, 6vw, 80px); width: 100%; padding: 20px 0; }
.auth-intro { padding: 8px 20px; min-width: 0; }
.auth-intro__eyebrow { display: inline-block; font-size: 13px; font-weight: 600;
  letter-spacing: .12em; color: var(--c-accent); }
.auth-intro h2 { margin: 20px 0 16px; font-size: 28px;
  line-height: 1.4; font-weight: 650; letter-spacing: -.035em; }
.auth-intro p { color: var(--c-muted); font-size: 16px; line-height: 1.85; margin: 0; }
.auth-intro__art { width: min(420px, 100%); margin: 12px 0 10px; color: var(--c-accent); }
.auth-line-art { display: block; width: 100%; height: auto; }
.auth-line-art__wash { fill: var(--c-accent-soft); }
.auth-line-art__links { opacity: .6; }
.auth-line-art__labels { fill: var(--c-muted); }
.auth-intro__features { display: flex; flex-wrap: wrap; gap: 12px 22px; font-size: 13px; color: var(--c-muted); }
.auth-intro__features span::before { content: ''; display: inline-block; width: 5px; height: 5px;
  margin: 0 8px 2px 0; background: var(--c-accent); border-radius: 50%; }
.auth-shell .auth-panel { margin: 0; padding: clamp(24px, 3vw, 36px); border-radius: 22px; }
.auth-panel__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.auth-beta-label { display: inline-flex; align-items: center; gap: 8px; color: var(--c-accent);
  font-size: var(--fs-sm); font-weight: 600; }
.auth-beta-label::before { content: ''; width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.auth-panel__top .auth-simple-switch { margin: 0; min-height: 36px; padding: 6px 10px; font-size: var(--fs-sm); }
.auth-panel .auth-form { gap: 18px; }
.auth-panel .auth-form input { min-height: 48px; padding: 12px 14px; }
.auth-panel .auth-form input::placeholder { color: var(--c-faint); opacity: 1; }
.auth-panel .auth-form .auth-submit { min-height: 48px; margin-top: 6px; }
.auth-panel .auth-error:empty { display: none; }
.auth-password { position: relative; min-width: 0; }
.auth-panel .auth-password input { padding-right: 70px; }
.auth-password__toggle { position: absolute; inset: 2px 3px 2px auto; min-width: 58px; padding: 8px;
  background: transparent; border: 0; border-radius: 8px; font: inherit; font-size: var(--fs-sm);
  font-weight: 600; color: var(--c-accent); cursor: pointer; }
.auth-password__toggle:hover { background: var(--c-accent-soft); }
.auth-password__toggle:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.auth-field-hint { color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.7; margin: 0; }
.invite-signup > .auth-field-hint { margin-top: 12px; }
.auth-footer { border-top: 1px solid var(--c-line); padding: 20px 12px 4px; text-align: center;
  color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.8; }
.auth-footer p { margin: 0 0 8px; }
.auth-footer__contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; }
.auth-footer__contacts a { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center;
  gap: 8px; min-height: 44px; color: var(--c-text-2); text-decoration: none; overflow-wrap: anywhere; }
.auth-footer__contacts a span { color: var(--c-muted); }
.auth-footer__contacts a:hover { color: var(--c-accent); text-decoration: underline; }
.auth-footer__contacts a:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 4px; border-radius: 4px; }
.auth-page--unavailable > .auth-panel { justify-self: center; margin: 0; }
.auth-page--unavailable #auth-retry { min-height: 48px; width: 100%; }
@media (max-width: 850px) {
  .auth-page { gap: 24px; }
  .auth-shell { grid-template-columns: minmax(0, 420px); justify-content: center; gap: 0; padding: 8px 0; }
  .auth-intro { display: none; }
}
body.simple-mode .auth-intro { display: none; }
body.simple-mode .auth-shell { grid-template-columns: minmax(0, 480px); justify-content: center; }
body.simple-mode .auth-shell .auth-panel { width: 100%; }
body.simple-mode .auth-panel__top .auth-simple-switch { min-height: 48px; }
body.simple-mode .auth-footer { font-size: var(--fs-sm); }
@media (max-width: 650px) {
  .auth-shell .auth-panel { padding: 24px 20px; border-radius: 18px; }
  .auth-panel__top { margin-bottom: 20px; }
  .auth-panel .auth-form input { font-size: max(16px, var(--fs)); }
  .auth-footer { padding-inline: 0; }
  .auth-footer__contacts { flex-direction: column; gap: 0; }
}
@media (forced-colors: active) {
  .auth-line-art__wash { fill: Canvas; }
  .auth-line-art__links { opacity: 1; }
}

/* 本舍重要性与繁育参考：继承主题，窄屏自动换行；不依赖透明效果。 */
.valuation-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:14px 0; }
.valuation-badge { display:inline-flex; align-items:center; min-height:28px; padding:3px 10px;
  border-radius:999px; border:1px solid var(--c-line); background:var(--c-bg); color:var(--c-text); font-weight:700; white-space:nowrap; }
.valuation-badge.is-collection { background:var(--c-accent); color:white; border-color:var(--c-accent); }
.valuation-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin:16px 0; }
.valuation-controls > .field { flex:1 1 150px; min-width:0; }
.valuation-evidence { margin:12px 0; padding:12px; border:1px solid var(--c-line); border-radius:12px; }
.valuation-evidence summary { cursor:pointer; font-weight:600; min-height:28px; }
.valuation-factor { padding:12px 0; border-bottom:1px solid var(--c-line); }
.valuation-factor:last-child { border-bottom:0; }
.valuation-note { border-inline-start:3px solid var(--c-accent); margin:8px 0; padding:7px 10px; background:var(--c-bg); font-size:.9rem; line-height:1.6; }
.valuation-settings { display:grid; gap:12px; padding-top:16px; border-top:1px solid var(--c-line); }
.valuation-settings input[type=checkbox] { width:20px; height:20px; accent-color:var(--c-accent); }
.valuation-settings .input,.valuation-settings .textarea { width:100%; }
.valuation-mobile { color:var(--c-accent); font-weight:600; line-height:1.6; }
.valuation-meta { margin:12px 0; color:var(--c-muted); }
@media(max-width:650px) {
  .valuation-summary { grid-template-columns:1fr; }
  .valuation-controls > * { flex:1 1 100%; }
  .valuation-controls select,.valuation-controls input,.valuation-controls button { width:100%; min-height:44px; }
  .valuation-evidence { padding:10px; }
}


/* Library query workspace · V2.1.1: hints are overlays, never extra grid rows. */
.library-search-card { padding: 24px; }
.library-search-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; }
.library-search-head h3 { margin:0 0 5px; font-size:var(--fs-lg); color:var(--c-text); }
.library-search-head p { margin:0; font-size:var(--fs-sm); color:var(--c-muted); line-height:1.6; }
.library-keyword-row { display:grid; grid-template-columns:minmax(220px,1fr) auto auto auto; align-items:end; gap:12px; }
.library-keyword-row input { width:100%; min-width:0; }
.library-keyword-row .btn { min-height:44px; gap:8px; }
.library-quick-filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:20px; }
.library-filter-field { position:relative; min-width:0; align-self:start; }
.library-filter-field > .field__label, .library-filter-label { display:flex; align-items:center; justify-content:space-between; min-height:28px; margin:0; }
.library-filter-field input, .library-filter-field select { width:100%; min-height:44px; min-width:0; }
.library-filter-label .field__label { line-height:1.5; }
.library-hint-button.btn { padding:0; width:32px; min-height:28px; height:28px; border:0; border-radius:50%; background:transparent; color:var(--c-muted); font-size:13px; box-shadow:none; }
.library-hint-button:hover, .library-hint-button[aria-expanded="true"] { color:var(--c-accent); background:var(--c-accent-soft); }
.library-filter-tip { position:absolute; z-index:8; top:calc(100% + 8px); left:0; width:max(100%,230px); max-width:min(340px,calc(100vw - 52px)); padding:13px 15px; border:1px solid var(--c-line-strong); border-radius:var(--radius); background:var(--c-panel); color:var(--c-text-2); box-shadow:var(--shadow); font-size:var(--fs-sm); line-height:1.7; overflow-wrap:anywhere; }
.library-filter-tip[hidden] { display:none; }
.library-quick-filters > :last-child .library-filter-tip { left:auto; right:0; }
.library-search-card .library-advanced { margin:20px 0 0; padding:20px 0 0; }
.library-filter-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.library-filter-group { min-width:0; background:var(--c-panel-2); border:1px solid var(--c-line); border-radius:var(--radius); padding:16px; }
.library-filter-group h4 { margin:0 0 12px; font-size:var(--fs-sm); color:var(--c-text-2); }
.library-group-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:12px; }
.library-group-grid .is-wide { grid-column:1/-1; }
.library-checkbox-field { flex-direction:row; align-items:center; gap:10px; min-height:44px; }
.library-checkbox-field label { order:2; cursor:pointer; }
.library-checkbox-field input[type="checkbox"] { width:20px; min-height:20px; height:20px; accent-color:var(--c-accent); }
.library-query-message { margin-top:14px; color:var(--c-accent); font-size:var(--fs-sm); line-height:1.6; }
.library-query-message[hidden] { display:none; }
.library-results-head { border-top:1px solid var(--c-line); margin-top:22px; padding-top:18px; }
.library-results-tools { display:flex; align-items:end; flex-wrap:wrap; gap:12px; }
.library-results-tools > .field:first-child { flex:0 1 285px; }
.library-results-tools > .field:nth-child(2) { flex:0 1 100px; }
.library-results-tools select { width:100%; min-height:44px; }
.library-export-actions { display:flex; flex-wrap:wrap; gap:10px; margin-left:auto; }
.library-export-actions .btn { min-height:44px; }
.library-result-status { min-height:0; margin-top:8px; font-size:var(--fs-sm); color:var(--c-muted); }
.library-result-status:empty { display:none; }
.library-filter-chip { display:inline-flex; align-items:center; gap:8px; max-width:100%; min-height:36px; padding:6px 11px; border:1px solid var(--c-line); border-radius:99px; background:var(--c-accent-soft); color:var(--c-text-2); font:inherit; overflow-wrap:anywhere; cursor:pointer; }
.library-filter-chip span { color:var(--c-muted); font-size:16px; }
.library-filter-chip:hover, .library-filter-chip:focus-visible { border-color:var(--c-accent); outline:none; box-shadow:var(--focus-ring); }
.library-search-card .pager { flex-wrap:wrap; justify-content:flex-end; gap:10px; margin:14px 0; }
.library-search-card .pager > span { margin-right:auto; }
.library-search-card .pager .select { min-height:40px; width:auto; }
#library-table.is-loading { opacity:.5; pointer-events:none; }
.library-empty, .library-query-error { display:flex; flex-direction:column; align-items:center; gap:10px; padding:44px 18px; text-align:center; background:var(--c-panel-2); border:1px dashed var(--c-line-strong); border-radius:var(--radius); }
.library-empty > .ui-icon { color:var(--c-accent); margin-bottom:3px; }
.library-empty strong, .library-query-error strong { color:var(--c-text); font-size:var(--fs-lg); }
.library-empty p, .library-query-error p { margin:0; max-width:580px; color:var(--c-muted); font-size:var(--fs-sm); line-height:1.7; overflow-wrap:anywhere; }
.library-empty .row { margin-top:8px; justify-content:center; }
@media(max-width:1100px) {
  .library-filter-groups { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .library-filter-group:last-child { grid-column:1/-1; }
  .library-quick-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .library-quick-filters > :nth-child(even) .library-filter-tip { left:auto; right:0; }
}
@media(max-width:650px) {
  .library-search-card { padding:18px; }
  .library-search-head { align-items:flex-start; gap:12px; }
  .library-search-head > .btn { flex:0 0 auto; padding:10px; font-size:var(--fs-sm); }
  .library-keyword-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .library-keyword-row > .field { grid-column:1/-1; }
  .library-keyword-row > .library-more-toggle { grid-column:1/-1; }
  .library-quick-filters { gap:12px; margin-top:16px; }
  .library-filter-label, .library-filter-field > .field__label { min-height:44px; }
  .library-hint-button.btn { min-height:44px; height:44px; width:32px; }
  .library-filter-groups { grid-template-columns:1fr; }
  .library-filter-group:last-child { grid-column:auto; }
  .library-results-tools > .field:first-child { flex:1 1 180px; }
  .library-results-tools > .field:nth-child(2) { flex:1 1 80px; }
  .library-export-actions { width:100%; margin-left:0; }
  .library-export-actions .btn { flex:1 1 100px; font-size:var(--fs-xs); }
  .library-filter-chip { min-height:44px; }
  .library-search-card .pager .select { min-height:44px; }
  .library-search-card .pager > span { width:100%; margin:0; }
  .library-empty, .library-query-error { padding:30px 14px; }
}
body.simple-mode .library-quick-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
body.simple-mode .library-filter-groups { grid-template-columns:1fr; }
body.simple-mode .library-filter-group:last-child { grid-column:auto; }
body.simple-mode .library-filter-label, body.simple-mode .library-filter-field > .field__label { min-height:44px; }
body.simple-mode .library-hint-button.btn { min-height:44px; height:44px; width:44px; }
body.simple-mode .library-filter-chip { min-height:48px; }
body.simple-mode .library-filter-tip { font-size:var(--fs); }
.draft-rich-editor { min-height:140px;background:var(--c-surface,#fff);color:var(--c-text,#25343d);font-size:14px; }
.draft-rich-editor .ql-editor { min-height:140px;line-height:1.6;font-size:var(--draft-edit-base-size,14px); }
.pdf-options .ql-toolbar { border-radius:8px 8px 0 0;background:var(--c-panel,#fff); }
.ql-snow .ql-picker.ql-size .ql-picker-item::before,.ql-snow .ql-picker.ql-size .ql-picker-label::before { content:attr(data-value)!important; }
.ql-snow .ql-picker.ql-size .ql-picker-item:not([data-value])::before,.ql-snow .ql-picker.ql-size .ql-picker-label:not([data-value])::before { content:'默认'!important; }
.draft-photo-layout { grid-column:1 / -1;width:100%; }
.draft-photo-layout summary { cursor:pointer;padding:8px 0; }
.draft-layout-panel { border:1px solid var(--c-line);border-radius:8px;padding:10px;margin-top:12px; }
.draft-layout-panel .pdf-options { margin-bottom:0; }
.draft-layers { display:grid;gap:4px;max-height:220px;overflow:auto; }
.draft-layer-row { display:flex;justify-content:space-between;gap:12px;align-items:center;text-align:left;padding:8px 10px;border:1px solid var(--c-line);border-radius:6px;background:var(--c-surface,#fff);color:var(--c-text);cursor:pointer;font:inherit; }
.draft-layer-row[aria-pressed="true"] { border-color:var(--c-primary,#326284);background:var(--c-active-bg,#e9f0f6); }