/* ==========================================================================
   官方直连与寻访统计模块的样式
   全部复用 styles.css 里的主题 token，因此浅色 / 深色主题自动生效，
   不引入新的颜色常量，也不覆盖任何既有选择器。
   ========================================================================== */

.ef-out { margin-top: 1rem; }
.ef-out:empty { display: none; }

/* 「一键导入全部数据」的结果清单：一行一步，成功/失败用主题色区分，不加新色常量。 */
.ef-sync {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.ef-sync__line {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.85;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.ef-sync__line + .ef-sync__line { border-top: 1px solid var(--line-soft); padding-top: 0.2rem; }
.ef-sync__line.is-bad { color: var(--bad); }
.ef-sync__line:not(.is-bad) { color: var(--ink); }

/* 同步悬浮窗：表面样式已由 styles.css 的 .modal__panel 统一成干净版（无网格），
   这里只收窄宽度。每一步用左侧 2px 色条表示成败。 */
.modal__panel--sync {
  max-width: 34rem;
}
.sync-bar {
  position: relative;
  margin: 0.75rem 1rem 0.25rem;
  height: 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface-2);
  overflow: hidden;
  flex: none;
}
.sync-bar__fill {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transition: width 0.35s ease;
}
.sync-bar__value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  mix-blend-mode: normal;
  text-shadow: 0 1px 2px var(--surface);
}
.sync-steps {
  margin: 0.5rem 0 0;
  padding: 0 1rem;
  list-style: none;
  flex: 1;
  min-height: 0;
  max-height: 16rem;
  overflow: auto;
  scrollbar-width: thin;
}
.sync-steps__item {
  margin: 0;
  padding: 0.4rem 0.2rem 0.4rem 0.7rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-soft);
  border-left: 2px solid transparent;      /* 用左侧色条表示成败，比整块网格干净 */
  font-variant-numeric: tabular-nums;
}
.sync-steps__item:last-child { border-bottom: 0; }
.sync-steps__item.is-ok { border-left-color: var(--good); color: var(--ink); }
.sync-steps__item[data-live="1"] { border-left-color: var(--accent); color: var(--ink); }
.sync-steps__item.is-bad { border-left-color: var(--bad); color: var(--bad); }
@media (prefers-reduced-motion: reduce) { .sync-bar__fill { transition: none; } }

.ef-banner {
  margin: 0.75rem 0 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--warn);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.6;
}

.ef-note {
  margin: 0.65rem 0 0;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.ef-note--good { color: var(--good); }
.ef-note--warn { color: var(--warn); }
.ef-note--bad  { color: var(--bad); }

.ef-hint {
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink-3);
}

.ef-json {
  margin: 0.65rem 0 0;
  padding: 0.75rem 0.85rem;
  max-height: 22rem;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.76rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- 键值网格 ---- */
.ef-grid {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: 0.4rem 1rem;
  margin-top: 0.4rem;
  font-size: 0.86rem;
}
.ef-kv__k { color: var(--ink-3); }
.ef-kv__v { color: var(--ink); font-weight: 600; word-break: break-word; }

/* ---- 公告列表 ---- */
.ef-list { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.ef-list__item {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.ef-list__item:last-child { border-bottom: 0; }
.ef-list__title { display: block; font-weight: 600; color: var(--ink); font-size: 0.9rem; }
.ef-list__meta { display: block; margin-top: 0.2rem; color: var(--ink-3); font-size: 0.78rem; }
.ef-list__body { margin-top: 0.35rem; color: var(--ink-2); font-size: 0.82rem; line-height: 1.65; }

/* ---- 卡池 ---- */
.ef-pools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.85rem;
  margin-top: 0.6rem;
}
.ef-pool {
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.ef-pool__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.ef-pool__name { color: var(--ink); font-size: 0.9rem; }
.ef-pool__id { margin: 0.25rem 0 0; color: var(--ink-4); font-size: 0.72rem; }
.ef-pool__row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.45rem;
  font-size: 0.78rem;
}
.ef-pool__star { flex: 0 0 2.2rem; color: var(--ink-3); }
.ef-pool__names { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.ef-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--ink-2);
  font-style: normal;
  font-size: 0.74rem;
}
.ef-chip.is-up {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
}

.ef-tag {
  flex: none;
  padding: 0.1rem 0.45rem;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--ink-3);
  font-size: 0.72rem;
}

/* ---- 表格 ---- */
.ef-table {
  width: 100%;
  margin-top: 0.7rem;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.ef-table th,
.ef-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  white-space: nowrap;
}
.ef-table th { color: var(--ink-3); font-weight: 600; }
.ef-table td { color: var(--ink-2); }
.ef-table tr:hover td { background: var(--surface-2); }

.ef-sub {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--ink-2);
  word-break: break-word;
}
.ef-sub b { color: var(--ink); }

/* ---- 账号登录弹窗 ---- */
.ef-login {
  padding: 1rem 1.25rem;
  max-height: 68vh;
  overflow-y: auto;
}

/* 三种登录方式的切换条 */
.ef-tabs {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.9rem;
  padding: 0.2rem;
  border-radius: var(--r-full);
  background: var(--surface-2);
}
.ef-tab {
  flex: 1;
  padding: 0.42rem 0.5rem;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--ink-2);
  font-size: 0.84rem;
  white-space: nowrap;
  cursor: pointer;
}
.ef-tab:hover { color: var(--ink); }
.ef-tab.is-active {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.ef-login__block + .ef-login__block {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
}
.ef-login__title {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}

/* 二维码必须保持高对比与整数倍缩放，否则手机扫不出来 */
.ef-qr {
  display: block;
  width: 12rem;
  height: 12rem;
  margin: 0.75rem auto 0;
  padding: 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: #ffffff;
  image-rendering: pixelated;
}
.ef-qr__hint { margin: 0.5rem 0 0; text-align: center; }

.ef-roles { margin-top: 0.6rem; }
.ef-roles__row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; }
.ef-role {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.8rem;
  cursor: pointer;
}
.ef-role:hover { border-color: var(--accent); color: var(--ink); }
.ef-role.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
}

/* ---- 官方直连的分步诊断 ---- */
.ef-steps {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  font-size: 0.82rem;
}
.ef-steps__item {
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.35rem;
  border-left: 3px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.ef-steps__item.is-ok { border-left-color: var(--good); }
.ef-steps__item.is-bad { border-left-color: var(--bad); }
.ef-steps__label { display: block; color: var(--ink); }
.ef-steps__item.is-ok .ef-steps__label { color: var(--good); }
.ef-steps__item.is-bad .ef-steps__label { color: var(--bad); }
.ef-steps__detail {
  display: block;
  margin-top: 0.2rem;
  color: var(--ink-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.74rem;
  word-break: break-all;
}

.ef-role__line {
  margin: 0.35rem 0 0.6rem;
  font-size: 0.86rem;
  color: var(--ink-2);
}
.ef-role__line b { color: var(--ink); }

.ef-details { margin-top: 0.75rem; font-size: 0.82rem; }

/* ---- 原生折叠：summary 不是 button，浏览器默认不给它焦点框，这里自己补 ---- */
.ef-details > summary,
.ef-explain > summary,
.ef-gacha__ids > summary,
.ef-seg__lows > summary {
  cursor: pointer;
  list-style-position: outside;
}
.ef-details > summary:focus-visible,
.ef-explain > summary:focus-visible,
.ef-gacha__ids > summary:focus-visible,
.ef-seg__lows > summary:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* ---- 一次性淡入：只动 opacity，由 JS 加类触发并用定时器兜底移除 ---- */
.is-fade-in { animation: efFadeIn 200ms var(--ease-out-soft) both; }
@keyframes efFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- 寻访统计：进度条 ---- */
.ef-progress { margin-top: 0.8rem; }
.ef-progress__track {
  height: 0.55rem;
  border-radius: var(--r-full);
  background: var(--surface-3);
  overflow: hidden;
}
.ef-progress__fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: var(--r-full);
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-base) var(--ease-out-soft);
}
/* 总量未知：不定长状态，不假装进度、也不提前显示完成 */
.ef-progress__fill.is-indeterminate {
  transform: none;
  width: 35%;
  animation: efIndeterminate 1.4s ease-in-out infinite;
}
@keyframes efIndeterminate {
  from { transform: translateX(-100%); }
  to   { transform: translateX(300%); }
}
.ef-progress__text {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-3);
}

/* ---- 寻访统计：总览 ----
   首屏只留三个关键数字；其余口径进「统计说明」折叠区。 */
.ef-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: 0.7rem;
}
.ef-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  min-width: 0;
}
.ef-metric { display: flex; flex-direction: column; }
.ef-metric__k { font-size: 0.72rem; color: var(--ink-3); font-style: normal; }
.ef-metric__v { font-size: 0.95rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.ef-metric--key .ef-metric__v { font-size: 1.3rem; font-weight: 700; line-height: 1.15; }

.ef-summary__side { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
.ef-summary__note { font-size: 0.78rem; color: var(--ink-3); }
.ef-grade {
  flex: none;
  padding: 0.2rem 0.7rem;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 0.85rem;
  font-weight: 600;
}
.ef-grade.is-good { background: var(--good-soft); color: var(--good); }
.ef-grade.is-warn { background: var(--accent-soft); color: var(--ink); }
.ef-grade.is-bad { background: var(--bad-soft); color: var(--bad); }

/* 次级口径：小一号、排在主数字之后 */
.ef-lower {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  margin-top: 0.55rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.78rem;
  color: var(--ink-3);
}
.ef-sub-metric { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.ef-sub-metric i { font-style: normal; color: var(--ink-4); }
.ef-sub-metric b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }

/* 统计说明进入浏览器顶层，展开不改变统计区和卡池的位置。 */
.ef-explain { flex: none; display: inline-flex; align-items: center; gap: .35rem; margin: 0; padding: .3rem .45rem; border: 1px solid var(--line); border-radius: .25rem; background: var(--surface); color: var(--ink-3); font: .65rem/1.4 var(--font); cursor: pointer; }
.ef-explain::before { content: 'i'; display: grid; place-items: center; width: .8rem; height: .8rem; border: 1px solid currentColor; border-radius: 50%; font: 600 .55rem/1 var(--font); }
.ef-explain:hover, .ef-explain[aria-expanded="true"] { border-color: var(--line-strong); background: var(--surface-2); color: var(--ink); }
.ef-explain__body {
  position: fixed; inset: auto; margin: 0; box-sizing: border-box;
  width: min(30rem, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
  padding: .8rem .9rem; border: 1px solid var(--line-strong); border-top: 2px solid var(--accent);
  border-radius: .35rem; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg);
}
.ef-explain__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line-soft); }
.ef-explain__head h4 { margin: 0; font-size: .8rem; }
.ef-explain__close { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; padding: 0; border: 1px solid var(--line); border-radius: .2rem; background: var(--surface-2); color: var(--ink-3); font: 1rem/1 var(--font); cursor: pointer; }
.ef-explain__close:hover { color: var(--ink); border-color: var(--line-strong); }
.ef-explain:focus-visible, .ef-explain__close:focus-visible, .ef-up-config-link:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.ef-explain__lead,
.ef-explain__line {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.7;
  color: var(--ink-2);
}
.ef-explain__line { margin-top: 0.35rem; color: var(--ink-3); }
.ef-explain__lead b { color: var(--ink); }

.ef-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.7rem;
  margin-top: 0.9rem;
}
.ef-stat {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.ef-stat__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.ef-stat__title { font-size: 0.82rem; font-weight: 600; color: var(--ink-3); }
.ef-stat__big { color: var(--ink); white-space: nowrap; }
.ef-stat__big b { font-size: 1.35rem; }
.ef-stat__big i { margin-left: 0.15rem; font-size: 0.78rem; color: var(--ink-3); font-style: normal; }
.ef-stat__rows {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line-soft);
}
.ef-stat__cell { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ef-stat__cell i { font-size: 0.7rem; color: var(--ink-3); font-style: normal; }
.ef-stat__cell b {
  font-size: 0.85rem;
  color: var(--ink-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- 寻访统计：卡池与出货段 ---- */
/* 注意：类名不能叫 .ef-banner——本文件开头那个警告条（本地代理未运行）已经占用了它，
   且带 background: var(--accent-soft)，复用会把卡池块染成黄色。 */
.ef-gacha {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-soft);
}
.ef-gacha:first-child { margin-top: 0.4rem; padding-top: 0; border-top: 0; }
.ef-gacha__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1rem;
}
.ef-gacha__name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}
.ef-gacha__totals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* 四列网格：头像 | 进度条（弹性） | 抽数（固定） | 6★ 与徽标（固定）
   抽数与名字各占固定列，因此每行数字对齐、名字对齐，可以直接竖着扫。 */
.ef-seg {
  display: grid;
  grid-template-columns: 2.1rem minmax(3rem, 1fr) 3.6rem minmax(6.5rem, 11rem);
  align-items: center;
  gap: 0.35rem 0.6rem;
  padding: 0.32rem 0.4rem 0.32rem 0.55rem;
  border-left: 2px solid transparent;
  border-radius: var(--r-sm);
}
.ef-seg:hover { background: var(--surface-2); }
/* 尾段＝还没出货的「垫」：虚轨 + 左侧虚线标 + 低饱和条，一眼就和已出货段分开 */
.ef-seg.is-pending { border-left-color: var(--line-strong); border-left-style: dashed; }
.ef-seg__avatar {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--ink-4);
  font-size: 0.85rem;
  line-height: 2.1rem;
  text-align: center;
}
.ef-seg__avatar.is-six {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--ink);
  font-weight: 600;
  line-height: 2rem;
}
.ef-seg.is-pending .ef-seg__avatar {
  border: 1px dashed var(--line-strong);
  background: transparent;
  line-height: 1.95rem;
}

.ef-seg__track {
  position: relative;
  height: .8rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.ef-seg__track::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  transform: translateY(-50%);
  background: var(--line);
}
/* 细基线 + 实色条 + 末端刻度；宽度按真实抽数比例，不把未填充区画成厚槽。 */
.ef-seg__fill {
  --ef-ratio: 0;
  --ef-bar-color: var(--ink-3);
  display: block;
  position: absolute;
  top: 50%;
  height: .3rem;
  margin-top: -.15rem;
  width: max(2px, calc(100% * var(--ef-ratio)));
  border: 0;
  border-radius: 1px;
  background: var(--ef-bar-color);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 300ms var(--ease-out-soft) var(--ef-delay, 0ms);
}
.ef-seg__fill::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 2px;
  height: .65rem;
  transform: translateY(-50%);
  background: var(--ef-bar-color);
}
/* 首屏入场：从 0 展开到终态。脚本按 prefers-reduced-motion 决定是否加这个类，
   并保证无论动效是否启用都会在动画时长后移除它（不依赖 transitionend）。 */
.ef-seg__fill.is-expanding { transform: scaleX(0); }
/* 未出货尾段使用中性虚线，避免将它误读为已出货结果。 */
.ef-seg__fill.is-pending {
  --ef-bar-color: var(--ink-3);
  height: 2px;
  margin-top: -1px;
  background: repeating-linear-gradient(90deg, var(--ef-bar-color) 0 5px, transparent 5px 9px);
}
.ef-seg__fill.is-good, .ef-seg__free-range.is-good { --ef-bar-color: var(--good-bright); }
.ef-seg__fill.is-warn, .ef-seg__free-range.is-warn { --ef-bar-color: var(--accent-strong); }
.ef-seg__fill.is-bad, .ef-seg__free-range.is-bad { --ef-bar-color: var(--bad); }
.ef-seg__free-range { --ef-bar-color: var(--ink-3); position: absolute; top: 50%; height: .4rem; min-width: 2px; transform: translateY(-50%); box-sizing: border-box; border: 1px solid var(--ef-bar-color); border-radius: 0; background: var(--surface); pointer-events: none; }

.ef-seg__count {
  font-size: 0.8rem;
  color: var(--ink-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ef-seg.is-pending .ef-seg__count { color: var(--ink-3); }
.ef-seg__info {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  min-width: 0;
}
.ef-seg__six { font-size: 0.84rem; color: var(--ink); font-weight: 600; }
.ef-seg.is-pending .ef-seg__six { color: var(--ink-3); font-weight: 500; }

/* 低星明细：默认只有一行摘要，展开才铺 chip */
.ef-seg__lows {
  grid-column: 2 / -1;
  margin-top: 0.1rem;
  font-size: 0.74rem;
}
.ef-seg__lows-sum {
  display: inline-block;
  padding: 0.06rem 0.45rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-full);
  color: var(--ink-3);
  font-size: 0.72rem;
}
.ef-seg__lows-sum:hover { color: var(--ink); border-color: var(--accent); }
.ef-seg__lows[open] > .ef-seg__lows-sum { color: var(--ink); border-style: solid; }
.ef-seg__lows-body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.3rem;
}

.ef-chip--r5 { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.ef-chip--r4 { border-color: var(--line-strong); background: var(--surface); color: var(--ink-2); }
.ef-chip--more { border-style: dashed; color: var(--ink-4); }

.ef-tag--new { background: var(--accent-soft); color: var(--ink); }
.ef-tag--free { background: var(--good-soft); color: var(--good); }
.ef-tag--pending { background: var(--surface-3); color: var(--ink-4); }

/* ================= 寻访统计：标题栏层与质感纹理 =================
   只作用于寻访统计视图。纹理沿用项目既有的「技术网格 + 金色微光」语言：
   用中性灰的低透明度斜纹，因此浅色/深色主题下都成立，无需 color-mix。 */
[data-view-panel="gacha"],
[data-view-panel="team"] {
  --ef-stripe: rgba(127, 127, 127, .15);   /* 页面标题栏斜纹（比卡片标题栏更明显） */
  --ef-hatch: rgba(127, 127, 127, .13);    /* 内容区斜纹 */
}

/* ---- 页面标题栏 ---- */
.ef-hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1.2rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1.1rem 0.85rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--surface-2);
  background-image:
    linear-gradient(180deg, rgba(127, 127, 127, .06), transparent 70%),
    repeating-linear-gradient(45deg, var(--ef-stripe) 0 1px, transparent 1px 9px);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.ef-hero::before {          /* 左侧金色主色轨 */
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.3rem;
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
}
.ef-hero::after {           /* 右上角切角装饰 */
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 3.4rem;
  height: 3.4rem;
  background: linear-gradient(135deg, transparent 52%, var(--ef-stripe) 52%);
  pointer-events: none;
}
.ef-hero__cn {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.ef-hero__en {
  margin: 0.15rem 0 0;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.ef-hero__note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-3);
  text-align: right;
}

/* 标题栏已提升为全站共用组件（styles.css 的 .card--section / .card__bar），
   这里只保留本页专有的斜纹变量与「紧凑标题条」。 */

/* ---- 紧凑页面标题条 ----
   寻访统计 / 干员图鉴原来要在首屏叠三层标题（顶栏 h1 + 这里 + 卡片标题）。
   这里把这一层压矮、去掉右上切角：保留主色轨与中文标题作为页面标识，
   首屏剩下的高度让给总览数字。 */
.ef-hero--compact {
  padding: 0.5rem 0.9rem 0.5rem 1.15rem;
  margin-bottom: 0.7rem;
  box-shadow: none;
}
.ef-hero--compact::after { display: none; }
.ef-hero--compact .ef-hero__cn { font-size: 1.1rem; }
.ef-hero--compact .ef-hero__en { font-size: 0.6rem; letter-spacing: 0.2em; }
.ef-hero--compact .ef-hero__note { font-size: 0.74rem; }

/* ---- 卡池块标题：卡池名为主标题，内部标识收进次级折叠 ---- */
.ef-gacha__titles { min-width: 0; }
.ef-gacha__ids {
  margin-top: 0.15rem;
  font-size: 0.68rem;
  color: var(--ink-4);
}
.ef-gacha__ids > summary {
  display: inline-block;
  color: var(--ink-4);
  letter-spacing: 0.06em;
}
.ef-gacha__ids > summary:hover { color: var(--ink-2); }
.ef-gacha__id {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  word-break: break-all;
}

/* ---- 条长尺度切换器 ---- */
.ef-scale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin-top: 0.7rem;
}
.ef-scale__label { font-size: 0.74rem; color: var(--ink-4); }
.ef-scale__btn {
  padding: 0.18rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 0.74rem;
  cursor: pointer;
}
.ef-scale__btn:hover { border-color: var(--line-strong); color: var(--ink); }
.ef-scale__btn.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
}
.ef-scale__note { font-size: 0.72rem; color: var(--ink-4); }

/* ---- 内容区质感 ---- */
/* 次级口径条：底部一条细斜纹分隔，和标题栏呼应 */
.ef-lower {
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line-soft);
}
/* 分池卡片：右上角斜切角标 */
.ef-stat { position: relative; overflow: hidden; }
.ef-stat::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  background: linear-gradient(135deg, transparent 50%, var(--ef-hatch) 50%);
  pointer-events: none;
}
/* 卡池块：左侧竖向渐隐轨，把每个卡池分块"立"起来 */
.ef-gacha { position: relative; padding-left: 0.9rem; }
.ef-gacha::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.9rem;
  bottom: 0.3rem;
  width: 1px;
  background: linear-gradient(180deg, var(--accent) 0, var(--line) 40%, transparent 100%);
}
.ef-gacha:first-child::before { top: 0.1rem; }

/* ================= 干员立绘（寻访统计头像 + 图鉴卡片共用） ================= */
.ef-art {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ef-art__img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ef-seg__avatar.has-art { background: var(--surface-3); }
/* 军备寻访的头像/小图标：武器立绘是 256×256 方图 + 透明底，直接用会又小又看不清，
   所以套上武器图鉴同款的「// WEAPONS」蓝图底板 + contain，浅色/深色主题下都成立。 */
.ef-seg__avatar.has-weapon-art {
  padding: 0.12rem;
  background: #111 url('weapons/_card-plate.webp') center top / cover;
}
.ef-seg__avatar.has-weapon-art .ef-art__img { object-fit: contain; object-position: center; }
.ef-chip__art {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 3px;
  object-fit: cover;
  object-position: center top;
}
.ef-chip__art--weapon {
  padding: 0.05rem;
  background: #111 url('weapons/_card-plate.webp') center / cover;
  object-fit: contain;
  object-position: center;
}

/* ================= 干员图鉴：卡片 =================
   结构对应本机保存的 Wiki 页面：立绘区（底部渐隐）+ 底部面板——
   稀有度色下边框、三色信号条、中文名 + 「// 英文名」、职业与属性图标。
   语义色（稀有度 / 属性 / 信号条）沿用 wiki 调色板，表面色用站点主题令牌，
   因此浅色与深色主题都成立。 */
:root {
  --op-signal-yellow: #fffa00;
  --op-signal-cyan: #00ffa2;
  --op-signal-magenta: #ff00f0;
}

.ef-filters { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.7rem; }
.ef-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.ef-filter__label { flex: none; width: 3.1rem; font-size: 0.72rem; color: var(--ink-4); }
.ef-filter__btn {
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 0.74rem;
  cursor: pointer;
}
.ef-filter__btn:hover { border-color: var(--line-strong); color: var(--ink); }
.ef-filter__btn.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
}

.ef-roster__grid {
  display: grid;
  /* 最小宽度比原来的 8.4rem 略宽：中文名（最多 5 字，如「管理员·女」）能完整显示，
     英文名仍可截断，但卡片上有 title 可以看全。 */
  grid-template-columns: repeat(auto-fill, minmax(9.4rem, 1fr));
  gap: 0.7rem;
  margin-top: 0.8rem;
}
.op-card {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 100 / 145.57;      /* 与 wiki 卡片同比例 */
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  box-shadow: 0 16px 30px -22px rgba(0, 0, 0, .8);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.op-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.op-card__art { position: relative; flex: 1 1 auto; overflow: hidden; background: var(--surface-3); }
.op-card__portrait {
  /* --op-crop-y / --op-crop-scale 由 rosterCard() 按每名干员写入（见 assets/operators.js
     的 crop 表）：只调整这一张立绘的取景，不做统一放大。
     默认 scale 1.08 与原先的取景完全一致，未配置的角色观感不变。 */
  --op-crop-y: 50%;
  --op-crop-scale: 1.08;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center var(--op-crop-y);
  transform: translateY(5%) scale(var(--op-crop-scale));   /* 对应 wiki 的 translate-y + scale */
  transform-origin: center top;
}
.op-card__fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(to top, var(--surface-2) 8%, transparent);
  pointer-events: none;
}
.op-card__owned {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  padding: 0.08rem 0.35rem;
  border-radius: var(--r-full);
  background: var(--good-soft);
  color: var(--good);
  font-size: 0.62rem;
  font-weight: 600;
}
.op-card__panel {
  position: relative;
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  padding: 0.4rem 0.45rem 0.35rem;
  border-bottom: 3px solid var(--op-rarity, #888888);
  background: var(--surface);
}
.op-card__signal {
  position: absolute;
  top: 0;
  left: 0;
  width: 47%;
  height: 2px;
  background: linear-gradient(90deg,
    var(--op-signal-yellow) 0 30%, var(--op-signal-cyan) 30% 70%, var(--op-signal-magenta) 70% 100%);
}
.op-card__names { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 auto; }
.op-card__cn {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.op-card__en {
  align-self: flex-start;
  max-width: 100%;
  padding: 0 0.22rem;
  background: var(--surface-3);
  color: var(--ink-3);
  font-size: 0.63rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.op-card__icons { flex: none; display: flex; gap: 0.2rem; }
.op-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  overflow: hidden;
}
.op-card__icon--cls { background: #262626; }
.op-card__icon img { width: 100%; height: 100%; object-fit: contain; }

/* ---- 武器图鉴 ----
   背景与示例文件一致：示例的立绘区是「底色 + 一张不透光的 // WEAPONS 蓝图纹理」，
   纹理盖满整块，所以浅色/深色主题下看到的都是这张暗色底板（示例 CSS：
   --color-operator-roster-card 浅 #f1f1ee / 深 #111，纹理用 background-size: cover）。
   之前这里写死了一块亮白渐变，深色模式下非常刺眼，已按示例改成纹理底板。
   卡片比例也回到与干员卡、示例完全相同的 100 / 145.57（.op-card 的默认值）。 */
.op-card__art--weapon {
  background-color: #111;                       /* 纹理万一缺失时的兜底（示例深色底） */
  background-image: url('weapons/_card-plate.webp');
  background-repeat: no-repeat;
  /* 示例用 center center；这里改成 center top，让纹理左上角的「// WEAPONS」标记
     完整露出来（卡片比纹理略矮，居中会把它切掉一点）。 */
  background-position: center top;
  background-size: cover;
}
.op-card__weapon-art {
  width: 100%;
  height: 100%;
  padding: 0.4rem;
  /* 武器立绘是 256×256 方图：完整显示，四周露出蓝图底板（示例是裁切放大）。 */
  object-fit: contain;
}
.op-card--weapon .op-card__fade {
  /* 示例里立绘底部会向面板色渐隐，这里沿用干员卡的同一套处理 */
  background: linear-gradient(to top, var(--surface-2) 8%, transparent);
}

/* ---- 窄屏 ---- */
@media (max-width: 720px) {
  .ef-grid { grid-template-columns: 1fr; gap: 0.15rem 0; }
  .ef-kv__k { margin-top: 0.4rem; font-size: 0.78rem; }
  .ef-pools { grid-template-columns: 1fr; }
  .ef-table { display: block; overflow-x: auto; }
  .ef-qr { width: 10rem; height: 10rem; }
  .ef-login { padding: 0.85rem 0.9rem; }
  /* 出货段在窄屏折成两行：头像+条+抽数，名字与低星另起一行。
     头像、干员名、抽数都保持可读字号，不挤成小字。 */
  .ef-seg { grid-template-columns: 2.1rem minmax(2rem, 1fr) 3.2rem; padding-left: 0.45rem; }
  .ef-seg__info { grid-column: 2 / -1; }
  .ef-seg__lows { grid-column: 2 / -1; }
  .ef-seg__lows-sum { display: block; width: 100%; text-align: left; }
  .ef-stat__rows { grid-template-columns: repeat(2, 1fr); }
  /* 标题栏在窄屏：说明文字改为左对齐、字号收一点 */
  .ef-hero { padding: 0.7rem 0.8rem 0.7rem 1.1rem; }
  .ef-hero--compact { padding: 0.45rem 0.7rem 0.45rem 1rem; }
  .ef-hero__cn { font-size: 1.15rem; }
  .ef-hero--compact .ef-hero__cn { font-size: 1.02rem; }
  .ef-hero__note { text-align: left; font-size: 0.74rem; }
  .card__bar .card__cn { font-size: 0.98rem; }
  .ef-gacha { padding-left: 0.7rem; }
  /* 总览：主数字换行后仍排在评级之前，不缩字号 */
  .ef-key { gap: 0.35rem 1.1rem; }
  .ef-metric--key .ef-metric__v { font-size: 1.2rem; }
  /* 图鉴卡片在窄屏缩小、筛选项标签换行 */
  .ef-roster__grid { grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr)); gap: 0.5rem; }
  .ef-filter__label { width: 100%; }
  .op-card__icon { width: 1.25rem; height: 1.25rem; }
}

/* ---- 减少动效：直接给最终状态 ----
   interface.css 已经全局关掉了 animation/transition；这里额外把两个
   「靠动画表达含义」的地方显式落到终态，避免留下半截状态：
   ① 不定长进度条照常显示一段进度（只是不流动）；
   ② 条长入场与结果区淡入直接完成。 */
@media (prefers-reduced-motion: reduce) {
  .ef-progress__fill.is-indeterminate { transform: none; }
  .ef-seg__fill.is-expanding { transform: scaleX(1); }
  .is-fade-in { opacity: 1; }
}

/* 寻访工作台：两种来源共用指标、分组入口和明细列。 */
[data-view-panel="gacha"] .gacha-workbench { margin-top: .75rem; }
.gacha-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .75rem; padding: .35rem; border: 1px solid var(--line-strong); border-radius: .35rem; background: var(--surface); }
.gacha-toolbar .ef-out { margin: 0; min-width: 0; }
.gacha-toolbar > .gacha-refresh { min-height: 3.25rem; padding: .45rem .65rem; gap: .55rem; border-color: var(--line); border-radius: .25rem; background: var(--surface-2); color: var(--ink-2); font-size: .6875rem; box-shadow: none; }
.gacha-toolbar > .gacha-refresh:hover:not(:disabled) { border-color: var(--line-strong); color: var(--ink); background: var(--surface-3); }
.gacha-refresh__icon { flex: none; width: 1.1rem; height: 1.1rem; }
.gacha-refresh__text { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.gacha-refresh__text b { font-weight: 550; }
.gacha-refresh__text small { color: var(--ink-3); font-size: .575rem; }
.gacha-refresh[aria-busy="true"] .gacha-refresh__icon { animation: ef-refresh-spin 1s linear infinite; }
@keyframes ef-refresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gacha-refresh[aria-busy="true"] .gacha-refresh__icon { animation: none; } }
.ef-source-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .4rem; }
.ef-source-tab { position: relative; display: grid; grid-template-columns: 1.85rem minmax(0,1fr); align-content: center; column-gap: .55rem; row-gap: .2rem; min-width: 0; min-height: 3.25rem; padding: .5rem .7rem; border: 1px solid transparent; border-radius: .25rem; background: transparent; color: var(--ink-3); text-align: left; font: inherit; cursor: pointer; transition: background .15s, color .15s; }
.ef-source-tab::after { content: ''; position: absolute; bottom: 1px; left: 3.1rem; right: .7rem; height: 2px; background: transparent; }
.ef-source-tab:hover { background: var(--surface-2); color: var(--ink); }
.ef-source-tab.is-active { color: var(--ink); background: var(--surface-2); border-color: var(--line); }
.ef-source-tab.is-active::after { background: var(--accent); }
.ef-source-tab__icon { grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; align-self: center; width: 1.85rem; height: 1.85rem; border-radius: .2rem; background: var(--surface-3); color: var(--ink-3); }
.ef-source-tab__icon svg { width: 1.1rem; height: 1.1rem; }
.ef-source-tab.is-active .ef-source-tab__icon { background: var(--accent-soft); color: var(--ink); }
.ef-source-tab__name { grid-column: 2; font-size: .95rem; line-height: 1.3; font-weight: 650; }
.ef-source-tab__note { grid-column: 2; font-size: .625rem; line-height: 1.4; color: var(--ink-3); white-space: nowrap; }
.ef-source-tab:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
#efGachaSummary .ef-key { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 0; padding: 1rem 0 .75rem; }
#efGachaSummary .ef-metric { padding-inline: .85rem; border-left: 1px solid var(--line-soft); }
#efGachaSummary .ef-metric:first-child { border-left: 0; padding-left: 0; }
#efGachaSummary .ef-metric__v { margin-top: .3rem; font-size: 1.35rem; white-space: nowrap; }
.ef-report-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .8rem; padding: .5rem .65rem; border: 1px solid var(--line-soft); border-radius: .25rem; background: var(--surface-2); color: var(--ink-3); font-size: .625rem; }
.ef-report-context { flex: 1 1 16rem; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .2rem .65rem; min-width: 0; }
.ef-report-context .ef-grade { grid-column: 1; grid-row: 1 / 3; padding: .15rem .45rem; font-size: .65rem; }
.ef-report-range { grid-column: 2; grid-row: 1; }
.ef-report-context .ef-report-extra { grid-column: 2; grid-row: 2; }
.ef-report-extra { margin: 0; white-space: nowrap; }
.ef-report-actions { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.gacha-section-head, .gacha-detail-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line-soft); }
.gacha-section-head h3, .gacha-detail-toolbar h3 { margin: 0; font-size: .85rem; }
.gacha-section-head > span { color: var(--ink-3); font-size: .6875rem; }
#efGachaTabs .ef-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; }
#efGachaTabs .ef-pool-tab { flex: 0 1 auto; display: block; min-width: 0; max-width: 100%; text-align: left; padding: .5rem .7rem; border-radius: .25rem; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); white-space: normal; font: inherit; cursor: pointer; }
#efGachaTabs .ef-pool-tab:hover { background: var(--surface-2); border-color: var(--line-strong); }
#efGachaTabs .ef-pool-tab.is-active { color: var(--ink); background: var(--surface-2); border-color: var(--line-strong); box-shadow: inset 2px 0 var(--accent); }
.ef-pool-tab__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1.4rem; font-size: .75rem; }
.ef-pool-tab__head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ef-pool-tab__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .5rem; min-width: 0; }
.ef-pool-tab__size { font-size: .625rem; font-style: normal; color: var(--ink-3); font-weight: 400; white-space: nowrap; }
.ef-pool-tab__head strong { flex-shrink: 0; font-size: .825rem; font-variant-numeric: tabular-nums; }
.ef-pool-tab__stats { display: flex; flex-wrap: wrap; gap: .25rem .7rem; margin-top: .35rem; }
.ef-pool-tab__stats > span { display: inline-flex; align-items: baseline; gap: .25rem; white-space: nowrap; }
.ef-pool-tab__stats i, .ef-pool-tab__stats b { font-style: normal; font-size: .625rem; }
.ef-pool-tab__stats i { color: var(--ink-3); font-weight: 400; }
.ef-pool-tab__stats b { font-size: .6875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.gacha-detail-toolbar .ef-out, .gacha-detail-toolbar .ef-scale { margin: 0; }
.gacha-detail-toolbar .ef-scale__label, .gacha-detail-toolbar .ef-scale__note { display: none; }
.gacha-detail-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .75rem; }
.ef-five-legend, .ef-free-legend { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink-3); font-size: .625rem; }
.ef-five-legend::before { content: ""; width: 2px; height: .6rem; background: var(--ink-2); }
.ef-free-legend::before { content: ""; width: .8rem; height: .3rem; border: 1px solid var(--ink-3); background: var(--surface); }
.ef-free-legend[hidden] { display: none; }
#efGachaBanners { --ef-pool-inset: .7rem; display: grid; grid-template-columns: 1.8rem fit-content(7.5rem) minmax(5rem,1fr) 3rem 3.3rem 7.8rem; gap: 1rem .5rem; padding: .75rem var(--ef-pool-inset) 0; }
#efGachaBanners > .ef-note { grid-column: 1 / -1; }
[data-view-panel="gacha"] .ef-gacha { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; position: relative; isolation: isolate; margin: 0 calc(-1 * var(--ef-pool-inset)); padding: 0 calc(var(--ef-pool-inset) - 1px) .35rem; border: 1px solid var(--line-strong); border-radius: .35rem; background: var(--surface); }
[data-view-panel="gacha"] .ef-gacha::before { display: none; }
[data-view-panel="gacha"] .ef-gacha__head { grid-column: 1 / -1; position: sticky; top: var(--ef-gacha-sticky-top,8px); z-index: 2; align-self: start; align-items: center; margin: 0 calc(1px - var(--ef-pool-inset)); padding: .55rem var(--ef-pool-inset); background: var(--surface-2); border: 0; border-bottom: 1px solid var(--line); border-radius: .3rem .3rem 0 0; }
[data-view-panel="gacha"] .ef-gacha__titles { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
[data-view-panel="gacha"] .ef-gacha__name { font-size: .9rem; font-weight: 700; overflow-wrap: anywhere; }
.ef-gacha__period { font-size: .625rem; color: var(--ink-3); }
[data-view-panel="gacha"] .ef-gacha__ids { margin: 0; }
[data-view-panel="gacha"] .ef-gacha__totals { font-size: .6875rem; gap: .25rem .65rem; }
.ef-gacha__body { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; position: relative; isolation: isolate; padding-top: .25rem; }
/* 立绘按宽度等比显示；卡池高度仅裁切窗口，不改变图片大小。短卡池围绕脸部裁切。 */
.ef-gacha__watermark { position: absolute; right: calc(1px - var(--ef-pool-inset)); bottom: -.35rem; width: min(28%,12rem); aspect-ratio: 1 / 1.2; max-height: 100%; overflow: clip; border-radius: 0 0 .3rem 0; pointer-events: none; user-select: none; z-index: -1; opacity: .07; }
.ef-gacha__watermark img { display: block; position: absolute; right: 0; top: 50%; width: 100%; max-width: none; height: auto; transform: translateY(-52%); filter: saturate(.6); mask-image: linear-gradient(90deg,transparent, #000 45%,#000),linear-gradient(180deg,transparent,#000 12%,#000); mask-composite: intersect; }
html[data-theme="dark"] .ef-gacha__watermark { opacity: .12; }
html[data-theme="dark"] .ef-gacha__watermark img { filter: saturate(.6) brightness(1.25); }
.ef-gacha__body > .ef-seg:last-child { border-bottom: 0; }
[data-view-panel="gacha"] .ef-seg:hover, [data-view-panel="gacha"] .ef-seg.has-open-detail { background: color-mix(in srgb,var(--surface-2) 70%,transparent); }
.ef-seg-columns, [data-view-panel="gacha"] .ef-seg { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; column-gap: normal; align-items: center; }
.ef-seg-columns { padding: .35rem 0; font-size: .625rem; color: var(--ink-3); }
.ef-seg-columns__number { text-align: center; }
[data-view-panel="gacha"] .ef-seg { padding: .3rem 0; min-height: 2.45rem; border-radius: 0; border-bottom: 1px solid var(--line-soft); }
[data-view-panel="gacha"] .ef-seg__avatar { grid-column: 1; grid-row: 1; width: 1.8rem; height: 1.8rem; }
[data-view-panel="gacha"] .ef-seg__info { grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-start; gap: .1rem; min-width: 0; }
[data-view-panel="gacha"] .ef-seg__six { max-width: 100%; font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ef-seg__badges { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem; }
.ef-seg__badges .ef-tag { padding: 0 .3rem; font-size: .55rem; line-height: 1.4; }
[data-view-panel="gacha"] .ef-seg__track { grid-column: 3; grid-row: 1; }
.ef-seg__track.has-fives { height: 1.4rem; }
.ef-five-marker { position: absolute; top: 0; height: 100%; width: .65rem; transform: translateX(-50%); padding: 0; border: 0; background: transparent; color: var(--ink-3); font: .5rem/1 var(--font-mono); cursor: pointer; }
.ef-five-marker::before { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: .55rem; transform: translate(-50%,-50%); background: var(--ink-2); box-shadow: 0 0 0 1px var(--surface); }
.ef-five-marker__pull { position: absolute; left: 50%; bottom: calc(50% + .4rem); transform: translateX(-50%); }
.ef-five-marker__pull.is-crowded { visibility: hidden; }
.ef-five-marker:hover, .ef-five-marker:focus-visible { color: var(--ink); }
.ef-five-marker:hover::before, .ef-five-marker:focus-visible::before { background: var(--accent-strong); box-shadow: 0 0 0 1px var(--surface), 0 0 0 2px var(--accent-soft); }
.ef-five-marker:focus-visible { outline: 1px solid var(--accent-strong); outline-offset: 1px; border-radius: .15rem; }
.ef-five-tooltip { display: none; position: fixed; inset: auto; margin: 0; box-sizing: border-box; width: min(19rem,calc(100vw - 24px)); padding: .6rem .7rem; border: 1px solid var(--line-strong); border-top: 2px solid var(--accent-strong); border-radius: .25rem; background: var(--surface); color: var(--ink); font: .6875rem/1.5 var(--font); box-shadow: 0 6px 20px #00000029; pointer-events: none; }
.ef-five-tooltip:popover-open { display: block; }
.ef-five-tooltip__pool { margin: 0 0 .35rem; color: var(--ink-3); font-size: .6rem; }
.ef-five-tooltip__entry + .ef-five-tooltip__entry { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--line-soft); }
.ef-five-tooltip__result { display: flex; align-items: center; gap: .3rem; }
.ef-five-tooltip__name { min-width: 0; overflow-wrap: anywhere; }
.ef-five-tooltip__pull { margin-left: auto; flex-shrink: 0; color: var(--ink-3); font-size: .6rem; }
.ef-five-tooltip__time { display: block; margin-top: .2rem; color: var(--ink-3); font-size: .6rem; font-variant-numeric: tabular-nums; }
[data-view-panel="gacha"] .ef-seg__count { grid-column: 4; grid-row: 1; font-size: .75rem; text-align: center; }
.ef-seg__date { grid-column: 5; grid-row: 1; font-size: .6875rem; text-align: center; color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-view-panel="gacha"] .ef-seg__lows { grid-column: 6; grid-row: 1; margin: 0; min-width: 0; }
[data-view-panel="gacha"] .ef-seg__lows-sum { display: flex; align-items: center; justify-content: space-between; gap: .35rem; width: 100%; padding: .25rem .35rem; border: 1px solid var(--line-soft); border-radius: .2rem; background: transparent; color: var(--ink-3); font: inherit; font-size: .625rem; white-space: nowrap; cursor: pointer; }
.ef-seg__lows-sum::after { content: ""; flex-shrink: 0; width: .25rem; height: .25rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); margin: -.1rem .1rem 0; }
.ef-seg__lows-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
[data-view-panel="gacha"] .ef-seg__lows-sum:hover, [data-view-panel="gacha"] .ef-seg__lows-sum[aria-expanded="true"] { border-color: var(--accent-strong); background: var(--accent-soft); color: var(--ink); }
.ef-seg__lows-sum[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: .15rem; }
.ef-seg__lows-sum:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.ef-seg.has-open-detail { background: var(--surface-2); }
.ef-lows-popover { display: none; position: fixed; inset: auto; margin: 0; box-sizing: border-box; width: min(28rem,calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: .7rem .8rem; border: 1px solid var(--line-strong); border-top: 2px solid var(--accent-strong); border-radius: .25rem; background: var(--surface); color: var(--ink); font-family: var(--font); font-size: .75rem; box-shadow: 0 8px 28px #00000029; }
.ef-lows-popover:popover-open { display: block; }
.ef-lows-popover__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ef-lows-popover__close { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; padding: 0; border: 0; border-radius: .2rem; background: var(--surface-2); color: var(--ink-3); font: inherit; cursor: pointer; }
.ef-lows-popover__close:hover { background: var(--accent-soft); color: var(--ink); }
.ef-lows-popover__context { margin: .25rem 0 .6rem; padding-bottom: .45rem; border-bottom: 1px solid var(--line-soft); color: var(--ink-3); font-size: .625rem; }
.ef-lows-popover .ef-seg__lows-body { margin: 0; gap: .35rem; }
@media (max-width: 1120px) {
  #efGachaSummary .ef-key { grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: .9rem; }
  #efGachaSummary .ef-metric:nth-child(4) { border-left: 0; padding-left: 0; }
  #efGachaBanners { grid-template-columns: 1.8rem fit-content(6.5rem) minmax(3rem,1fr) 2.7rem 3rem 7.2rem; column-gap: .35rem; }
}
@media (max-width: 700px) {
  .gacha-toolbar { grid-template-columns: minmax(0,1fr) 2.35rem; gap: .35rem; padding: .25rem; }
  .gacha-toolbar > .gacha-refresh { width: 2.35rem; min-height: 2.35rem; padding: .4rem; justify-content: center; }
  .gacha-refresh__text { display: none; }
  .ef-source-tabs { gap: .2rem; }
  .ef-source-tab { grid-template-columns: 1rem minmax(0,1fr); column-gap: .35rem; min-height: 2.35rem; padding: .4rem .3rem; }
  .ef-source-tab::after { left: 1.65rem; right: .3rem; }
  .ef-source-tab__icon { grid-row: 1; width: 1rem; height: 1rem; background: transparent; }
  .ef-source-tab__icon svg { width: 1rem; height: 1rem; }
  .ef-source-tab.is-active .ef-source-tab__icon { background: transparent; }
  .ef-source-tab__name { font-size: .8rem; white-space: nowrap; }
  .ef-source-tab__note { display: none; }
  #efGachaSummary .ef-metric { padding-inline: .55rem; }
  #efGachaSummary .ef-metric__v { font-size: 1.1rem; }
  .ef-report-extra { margin-left: 0; width: 100%; }
  #efGachaTabs .ef-pool-tab { flex: 1 1 100%; }
  .ef-pool-tab__head { flex-wrap: wrap; }
  .ef-pool-tab__stats { gap: .3rem; }
  .ef-seg-columns { display: none; }
  #efGachaBanners { --ef-pool-inset: .6rem; grid-template-columns: 1.8rem minmax(0,1fr) 3.3rem; column-gap: .5rem; }
  [data-view-panel="gacha"] .ef-gacha__head { align-items: flex-start; flex-direction: column; gap: .35rem; }
  [data-view-panel="gacha"] .ef-gacha__titles { gap: .3rem .5rem; }
  [data-view-panel="gacha"] .ef-gacha__ids { display: none; }
  [data-view-panel="gacha"] .ef-gacha__totals { font-size: .625rem; }
  .ef-gacha__watermark { width: 45%; }
  [data-view-panel="gacha"] .ef-seg { row-gap: .3rem; padding-block: .5rem; }
  [data-view-panel="gacha"] .ef-seg__info { grid-column: 2; grid-row: 1; }
  [data-view-panel="gacha"] .ef-seg__track { grid-column: 2; grid-row: 2; }
  [data-view-panel="gacha"] .ef-seg__count { grid-column: 3; grid-row: 1; }
  .ef-seg__date { grid-column: 3; grid-row: 2; }
  [data-view-panel="gacha"] .ef-seg__lows { grid-column: 2 / -1; grid-row: 3; justify-self: start; }
  [data-view-panel="gacha"] .ef-seg__lows-sum { min-width: 7.8rem; }
}
#efGachaTabs .ef-tabs { padding: 0; border-radius: 0; background: transparent; margin-bottom: 0; }
@media (max-width: 700px) {
  .ef-pool-tab__stats { column-gap: .7rem; }
}

/* UP 判定：结果保留独立分类，统计规则在摘要和设置中明确显示。 */
.ef-up-strip { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .6rem; min-width: 0; max-width: 100%; }
.ef-up-strip__head { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; font-size: .65rem; }
.ef-up-strip__head > span { color: var(--ink-3); font-size: .575rem; }
.ef-up-config-link { padding: .2rem .4rem; border: 1px solid var(--line); border-radius: .2rem; background: var(--surface); color: var(--ink-3); font: .6rem/1.4 var(--font); cursor: pointer; }
.ef-up-config-link:hover { color: var(--ink); border-color: var(--line-strong); }
.ef-up-strip__cells { display: flex; flex-wrap: wrap; gap: .35rem 0; }
.ef-up-strip__cell { display: inline-flex; align-items: baseline; gap: .3rem; padding-inline: .4rem; border-left: 1px solid var(--line); }
.ef-up-strip__cell:first-child { padding-left: 0; border-left: 0; }
.ef-up-strip__cell i { font-style: normal; font-size: .625rem; color: var(--ink-3); white-space: nowrap; }
.ef-up-strip__cell b { font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ef-up-strip__cell--up b { color: var(--good); }
.ef-up-strip__cell--standard b, .ef-up-strip__cell--off b { color: var(--bad); }
.ef-up-strip__cell--limited b { color: var(--ink-2); }
.ef-up-strip__note { margin: .6rem 0 0; padding-top: .5rem; border-top: 1px solid var(--line-soft); font-size: .7rem; color: var(--ink-3); line-height: 1.7; }
.ef-gacha__up { padding: .1rem .35rem; border: 1px dashed var(--line-strong); border-radius: .2rem; background: transparent; color: var(--ink-3); font: .625rem/1.4 var(--font); }
.ef-seg__badges .ef-outcome { border-radius: .15rem; font-size: .525rem; }
.ef-outcome--up { background: var(--good-soft); color: var(--good); }
.ef-outcome--standard, .ef-outcome--off { background: var(--bad-soft); color: var(--bad); }
.ef-outcome--limited { background: var(--surface-3); color: var(--ink-2); }
.ef-outcome--unknown { background: var(--surface-3); color: var(--ink-3); }
.ef-up-settings { margin-top: .75rem; }
.ef-up-settings__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .4rem; }
.ef-up-settings__head .card__sub { margin: 0; font-variant-numeric: tabular-nums; }
.ef-up-rule { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem 1.2rem; margin-top: .8rem; padding: .75rem; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: .25rem; }
.ef-up-rule label { display: flex; align-items: center; gap: .6rem; font-size: .7rem; color: var(--ink-2); }
.ef-up-rule select { min-width: 8.5rem; padding: .35rem .5rem; border: 1px solid var(--line-strong); border-radius: .2rem; background: var(--surface); color: var(--ink); font: inherit; }
.ef-up-rule p { flex: 1; min-width: 12rem; margin: 0; color: var(--ink-3); font-size: .625rem; line-height: 1.6; }
.ef-standard-roster { display: flex; flex-wrap: wrap; gap: .4rem .75rem; padding: .7rem .1rem; color: var(--ink-3); font-size: .65rem; border-bottom: 1px solid var(--line-soft); }
.ef-standard-roster b { font-weight: 500; }
.ef-up-settings__footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.ef-up-settings__footer .card__sub { flex: 1; margin: 0; font-size: .65rem; }
@media (max-width: 700px) {
  .ef-report-meta:has(.ef-up-strip) { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .45rem .35rem; }
  .ef-report-context { grid-column: 1 / -1; }
  .ef-report-context .ef-grade { grid-row: 1; }
  .ef-report-context .ef-report-extra { grid-column: 1 / -1; }
  .ef-report-range { min-width: 0; }
  .ef-up-strip { display: contents; }
  .ef-up-strip__head { grid-column: 1; grid-row: 2; }
  .ef-report-actions { grid-column: 2; grid-row: 2; margin: 0; }
  .ef-up-strip__cells { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(var(--ef-up-columns,5),minmax(0,1fr)); gap: 0; }
  .ef-up-strip__cell { flex-direction: column; align-items: flex-start; gap: .1rem; min-width: 0; padding-inline: .35rem; }
  .ef-up-strip__cell i { font-size: .55rem; }
  .ef-up-rule { padding: .6rem; }
  .ef-up-rule label { width: 100%; flex-wrap: wrap; }
  .ef-up-rule p { min-width: 0; }
  .ef-up-rule select { flex: 1; min-width: 0; }
}
.ef-up-warning {
  display: flex;
  align-items: center;
  gap: 8px 16px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin: 0 0 12px;
  border-left: 2px solid var(--accent-strong);
  background: var(--surface);
  color: var(--ink-3);
  font-size: 12px;
}
.ef-up-warning[hidden] { display: none; }
.ef-up-warning span { flex: 1; min-width: 180px; }
.of-money-pages { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding-top: 12px; font-size: 12px; color: var(--ink-3); }
.of-money-pages span { margin-right: auto; }