/* 天墟秘境：沿用周常看板的纸卷、墨色与金线体系；原有筛选逻辑不受影响。 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;600;700;900&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

:root {
  --tx-ink: #101412;
  --tx-ink-soft: #1b201d;
  --tx-paper: rgba(250, 248, 238, .96);
  --tx-paper-deep: #eee9d9;
  --tx-line: #c7b379;
  --tx-gold: #a9812d;
  --tx-text: #2c302b;
  --tx-muted: #777463;
}

body {
  padding: 0 20px 40px;
  color: var(--tx-text);
  background:
    radial-gradient(circle at 83% 9%, rgba(255,255,255,.36), transparent 23%),
    linear-gradient(90deg, rgba(8,12,10,.96) 0 20%, rgba(18,23,20,.78) 47%, rgba(223,228,220,.82) 100%),
    url('./assets/celestial-ink-landscape.png') center top / cover fixed;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.container { max-width: none; margin: 0 42px; }

.tx-global-header {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 48px;
  border-bottom: 1px solid rgba(202,171,85,.52);
  margin-bottom: 26px;
}
.tx-global-header h1 {
  color: #f7f0d5;
  font-family: "Noto Serif SC", "STKaiti", serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .1em;
  text-shadow: 0 1px 14px rgba(218,173,63,.18);
  white-space: nowrap;
}
.tx-nav { display: flex; align-self: stretch; gap: 6px; align-items: stretch; }
.tx-nav a {
  position: relative; display: flex; align-items: center; padding: 0 17px;
  text-decoration: none; color: rgba(252,246,221,.76); font-size: 14px;
  transition: color .18s ease, background .18s ease;
}
.tx-nav a:hover, .tx-nav a.active { color: #ffe89a; }
.tx-nav a.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 4px;
  background: linear-gradient(90deg, transparent, #efd477, transparent);
  box-shadow: 0 -2px 12px rgba(238,202,95,.48);
}
.tx-global-header .header-right { margin-left: auto; }
.back-link {
  background: transparent; border: 1px solid rgba(222,201,132,.5); color: #efe6c5;
  border-radius: 2px; padding: 7px 12px;
}
.back-link:hover { background: rgba(210,177,91,.14); border-color: #e7c96e; color: #fff4ca; }

.card {
  background: var(--tx-paper);
  border: 1px solid rgba(194,169,98,.75);
  border-radius: 0;
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  padding: 22px 24px;
  margin-bottom: 16px;
  overflow: visible;
}
.card::before { height: 2px; background: linear-gradient(90deg, var(--tx-gold), rgba(184,154,73,.18), transparent); }
.card-title {
  color: #363126; font-family: "Noto Serif SC", "STKaiti", serif; font-size: 21px;
  text-shadow: none; margin-bottom: 15px;
}
.card-title::before { width: 5px; height: 21px; background: #b38b36; }
.hint, .filter-group label, footer { color: var(--tx-muted); }

.filter-row { gap: 16px; }
select, input, .slot-toggle {
  background: #fffdf5; color: #3d392f; border-color: #cfc4a4; border-radius: 2px;
  font-family: inherit;
}
select:hover, .slot-toggle:hover, select:focus, input:focus { border-color: #a9812d; }
.slot-panel {
  background: #fffdf6; border-color: #b99d57; border-radius: 2px;
  box-shadow: 0 10px 24px rgba(38,31,17,.2);
}
.slot-panel .slot-all-row { border-color: #ddd2b3; }
.slot-check { color: #5f5a49; }
.slot-check:hover { background: #f4edda; color: #604a1e; }
.slot-check.checked { color: #8b671d; }
.affix-check, .combo-btn {
  background: #fffdf7; border-color: #d2c6a5; color: #635c4e; border-radius: 2px;
}
.affix-check:hover, .combo-btn:hover { border-color: #ad8531; color: #795817; }
.combo-btn.active { background: #f2e7c9; color: #795817; border-color: #ae8733; }
.btn-reset { background: #fffdf7; border-color: #b76b5c; color: #9b4138; border-radius: 2px; }
.btn-reset:hover { background: #a64f43; border-color: #a64f43; }

.result-header { padding-bottom: 10px; border-bottom: 1px solid #d7c9a8; }
.result-count { color: #9a7120; font-weight: 700; }
thead th { color: #71664e; border-bottom-color: #bfa979; }
thead th:hover { color: #8e681d; }
thead th.sorted .sort-arrow { color: #a77c25; }
tbody td { color: #37362e; border-bottom-color: #e6deca; }
tbody tr:hover { background: #f5efdf; }
.affix-tag { background: #ebe5d5; color: #5b5548; border-radius: 2px; }
.no-result { color: #756d5c; }
footer { padding: 14px 0 4px; color: rgba(248,243,222,.65); }

@media (max-width: 900px) {
  .tx-global-header { gap: 18px; flex-wrap: wrap; padding: 14px 0; }
  .tx-nav { order: 3; width: 100%; min-height: 38px; overflow-x: auto; }
  .tx-global-header .header-right { margin-left: auto; }
}
@media (max-width: 640px) {
  body { padding: 0 10px 24px; }
  .tx-global-header h1 { font-size: 22px; }
  .tx-nav a { padding: 0 11px; font-size: 13px; }
  .card { padding: 16px; }
}