.dom-sort-tag {
  position: sticky;
  top: calc(var(--dom-header-h) + env(safe-area-inset-top));
  z-index: 30;
  overflow: hidden;
  margin: -2px -10px 9px;
  border-bottom: 1px solid var(--dom-line);
  background: rgba(255, 248, 242, .96);
}
.dom-nav-body, .dom-filters__chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  min-width: 0; /* grid/flex 子项默认 min-width:auto 会撑开，导致 overflow-x 失效 */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding: 6px 10px;
  scrollbar-width: none;
  scroll-padding-inline: 10px;
}
.dom-nav-body::-webkit-scrollbar, .dom-filters__chips::-webkit-scrollbar { display: none; }
.dom-sort-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 52px;
  min-height: var(--dom-tap);
  padding: 0 11px;
  border: 1px solid var(--dom-line);
  border-radius: 999px;
  color: var(--dom-muted);
  background: var(--dom-surface);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  touch-action: manipulation;
}
.dom-sort-link.is-active, .dom-sort-link.active {
  border-color: var(--dom-primary);
  color: #fff;
  background: var(--dom-primary);
}
.dom-card--rank { position: relative; }
.dom-rank-badge {
  position: absolute;
  top: -5px;
  left: -4px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border: 2px solid var(--dom-bg);
  border-radius: 50%;
  color: #fff;
  background: var(--dom-text);
  font-size: 11px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
.dom-rank-badge--top { background: var(--dom-accent); }
.dom-filters {
  overflow: hidden;
  margin-bottom: 8px;
  border: 1px solid var(--dom-line);
  border-radius: var(--dom-radius);
  background: var(--dom-surface);
  box-shadow: var(--dom-shadow);
}
.dom-filters__row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  min-width: 0;
  border-bottom: 1px solid var(--dom-line);
}
.dom-filters__row:last-child { border-bottom: 0; }
.dom-filters__label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-left: 10px;
  color: var(--dom-muted);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
.dom-filters__chips { min-width: 0; padding: 5px 8px; }
.dom-filters .dom-chip {
  flex: 0 0 auto;
  min-height: var(--dom-tap);
  border-color: transparent;
  color: var(--dom-muted);
  background: transparent;
  white-space: nowrap;
  touch-action: manipulation;
}
.dom-filters .dom-chip.is-active { border-color: var(--dom-primary); color: #fff; background: var(--dom-primary); }
.dom-pager { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 17px 0 5px; }
.dom-pager__btn, .dom-pager__num, .dom-pager__cur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--dom-tap);
  min-height: var(--dom-tap);
  padding: 0 9px;
  border: 1px solid var(--dom-line);
  border-radius: 9px;
  background: var(--dom-surface);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.dom-pager__cur { border-color: var(--dom-primary); color: #fff; background: var(--dom-primary); }
.dom-empty {
  min-height: 110px;
  padding: 34px 12px;
  color: var(--dom-muted);
  text-align: center;
  font-size: 13px;
}
.dom-empty::before { display: block; width: 30px; height: 3px; margin: 0 auto 10px; border-radius: 9px; content: ""; background: var(--dom-accent); box-shadow: 8px -6px 0 var(--dom-primary-bright); }
.dom-search-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 66px;
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--dom-line);
  border-radius: var(--dom-radius);
  background: var(--dom-surface);
  box-shadow: var(--dom-shadow);
}
.dom-search-box input {
  width: 100%;
  min-width: 0;
  min-height: var(--dom-tap);
  padding: 0 11px;
  border: 1px solid var(--dom-line);
  border-radius: 8px;
  color: var(--dom-text);
  background: var(--dom-surface-soft);
  font-size: 16px;
}
.dom-search-box button {
  min-height: var(--dom-tap);
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--dom-primary);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.dom-section__head .dom-btn { min-height: 36px; padding: 0 12px; font-size: 12px; }

.dom-history__tip { margin: -4px 0 8px; }
.dom-history-list { display: grid; gap: 8px; }
.dom-history-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--dom-line);
  border-radius: var(--dom-radius);
  background: var(--dom-surface);
  box-shadow: var(--dom-shadow);
}
.dom-history-item__cover { position: relative; overflow: hidden; width: 76px; aspect-ratio: 3 / 4; border-radius: 7px; background: var(--dom-surface-soft) url('/static/dom/img/loading-cover.jpg') center / cover no-repeat; }
.dom-history-item__cover img, .dom-history-item__ph { width: 100%; height: 100%; object-fit: cover; }
.dom-history-item__note { position: absolute; right: 3px; bottom: 3px; left: 3px; overflow: hidden; padding: 3px 4px; border-radius: 4px; color: #fff; background: rgba(23,21,28,.8); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.dom-history-item__body { min-width: 0; }
.dom-history-item__title { overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.dom-history-item__title a { display: block; overflow: hidden; text-overflow: ellipsis; }
.dom-history-item__meta, .dom-history-item__chapter { overflow: hidden; margin-top: 3px; color: var(--dom-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.dom-history-item__actions { display: flex; gap: 6px; margin-top: 8px; }
.dom-history-item__actions .dom-btn { min-height: 36px; padding: 0 12px; }
.dom-history-item__del { color: var(--dom-muted); }

.dom-verify {
  max-width: 390px;
  margin: 18px auto;
  padding: 18px 14px;
  border: 1px solid var(--dom-line);
  border-radius: var(--dom-radius);
  background: var(--dom-surface);
  box-shadow: var(--dom-shadow);
  text-align: center;
}
.dom-verify h1 { margin-bottom: 8px; font-size: 18px; }
.dom-verify__err { margin-bottom: 8px; color: #ad1534; font-size: 13px; }
.dom-verify__form { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dom-verify__img { border: 1px solid var(--dom-line); border-radius: 7px; background: var(--dom-surface-soft); }
.dom-verify__form input[type=text] { width: 100%; min-height: var(--dom-tap); padding: 0 10px; border: 1px solid var(--dom-line); border-radius: 8px; font-size: 16px; }
.dom-links { padding: 9px; border: 1px solid var(--dom-line); border-radius: var(--dom-radius-sm); background: var(--dom-surface); }
@media (orientation: landscape) and (max-height: 500px) {
  .dom-sort-tag { position: relative; top: auto; }
}