:root {
  color-scheme: dark;
  --bg: #111315;
  --surface: #191c1e;
  --surface-2: #202426;
  --surface-3: #252a2c;
  --line: #353a3c;
  --line-strong: #50575a;
  --text: #f1eee7;
  --muted: #a7aca9;
  --jade: #42bd8b;
  --jade-dark: #23795b;
  --jade-soft: #173129;
  --gold: #d8ac50;
  --gold-light: #f1d28c;
  --danger: #bf665e;
  --blue: #70a9d8;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; overflow-x: hidden; background: var(--bg); }
body { min-width: 0; margin: 0; overflow-x: hidden; color: var(--text); background: var(--bg); font-size: 15px; }
button, input, select { font: inherit; }
button { letter-spacing: 0; }

.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(17, 19, 21, .96);
  backdrop-filter: blur(10px);
}

.identity { min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.identity h1 { margin: 0; font-size: 22px; line-height: 1.25; }
.identity h1 small { color: var(--muted); font-size: .62em; font-weight: 500; }
.identity p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.item-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border: 1px solid #846b35;
  border-radius: 50%;
  color: var(--gold-light);
  background: #282217;
  font-size: 18px;
  box-shadow: inset 0 0 16px rgba(216, 172, 80, .08);
}

.view-tabs, .language-selector, .segmented {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #101214;
}
.tab, .language-option, .segment {
  min-height: 34px;
  padding: 6px 16px;
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
}
.tab:hover, .language-option:hover, .segment:hover { color: var(--text); background: var(--surface-2); }
.tab.is-active, .language-option.is-active, .segment.is-active { color: #101713; background: var(--jade); font-weight: 700; }
.language-option { min-height: 32px; padding: 4px 11px; font-size: 13px; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 12px; }
.version-field { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.version-field select {
  min-height: 34px;
  max-width: 245px;
  padding: 5px 28px 5px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text);
  background: var(--surface);
}
.tool-link { color: var(--muted); font-size: 13px; text-decoration: none; }
.tool-link:hover { color: var(--gold-light); }

main { width: min(1640px, 100%); margin: 0 auto; padding: 14px; }
.hero-panel {
  min-height: 180px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(420px, .7fr);
  align-items: center;
  gap: 34px;
  margin-bottom: 14px;
  padding: 28px 32px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:
    radial-gradient(circle at 92% 8%, rgba(66, 189, 139, .16), transparent 36%),
    linear-gradient(135deg, #1c211f, #171a1c 58%, #1b1d1e);
  overflow: hidden;
}
.eyebrow { display: block; color: var(--jade); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.hero-panel h2 { max-width: 760px; margin: 9px 0 10px; font-size: clamp(24px, 3vw, 38px); line-height: 1.14; letter-spacing: -.035em; }
.hero-panel p { max-width: 840px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.dataset-summary { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 6px; background: rgba(16, 18, 20, .62); }
.dataset-summary div { min-height: 78px; display: flex; flex-direction: column; justify-content: center; padding: 14px 18px; }
.dataset-summary div:not(:nth-child(3n)) { border-right: 1px solid var(--line); }
.dataset-summary div:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
.dataset-summary strong { color: var(--gold-light); font-size: 25px; font-variant-numeric: tabular-nums; }
.dataset-summary span { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.4; }

.query-shell { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 14px; align-items: start; }
.filter-panel, .results-panel { border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.filter-panel { position: sticky; top: 90px; padding: 16px; }
.filter-heading, .results-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.filter-heading { margin-bottom: 16px; }
.filter-heading h2, .results-heading h2 { margin: 3px 0 0; font-size: 18px; }
.text-button { padding: 3px 0; border: 0; color: var(--muted); background: none; font-size: 13px; cursor: pointer; }
.text-button:hover { color: var(--gold-light); }

.search-field, .select-field { display: block; color: var(--muted); font-size: 12px; }
.search-field input, .select-field select, .sort-field select {
  width: 100%;
  height: 38px;
  margin-top: 6px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  outline: 0;
  color: var(--text);
  background: #111416;
}
.search-field input:focus, .select-field select:focus, .sort-field select:focus { border-color: var(--jade); }
fieldset { min-width: 0; margin: 17px 0 0; padding: 0; border: 0; }
legend { margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.filter-panel .segmented { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); }
#role-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.segment { min-width: 0; min-height: 34px; padding: 5px 6px; font-size: 12px; }
.profile-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.filter-tag {
  min-width: 0;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: #c6ccc8;
  background: #15181a;
  font-size: 12px;
  line-height: 1.25;
  cursor: pointer;
}
.filter-tag:hover { border-color: var(--line-strong); color: var(--text); background: var(--surface-2); }
.filter-tag.is-active { border-color: var(--jade-dark); color: #a8e8cd; background: var(--jade-soft); box-shadow: inset 0 0 0 1px rgba(66, 189, 139, .08); }
.filter-tag.is-all { grid-column: 1 / -1; }
.profile-match-control {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid #4b4330;
  border-radius: 4px;
  color: #dfd6ba;
  background: #1d1b16;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.profile-match-control:has(input:checked) { border-color: #a9863d; color: #ffe2a0; background: #2a2417; box-shadow: inset 0 0 0 1px rgba(216, 172, 80, .08); }
.profile-match-control input { width: 15px; height: 15px; margin: 0; accent-color: var(--gold); }
.profile-note { margin: 7px 0 0; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.check-grid label { min-height: 36px; display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 4px; color: #d7dad7; background: #16191b; font-size: 12px; cursor: pointer; }
.check-grid label:has(input:checked) { border-color: var(--jade-dark); color: #9ce5c6; background: var(--jade-soft); }
.check-grid input { width: 14px; height: 14px; margin: 0; accent-color: var(--jade); }
.field-note { margin: -2px 0 9px; color: #939996; font-size: 12px; line-height: 1.6; }
.filter-panel .select-field { margin-top: 17px; }
.level-filter-note { margin-top: 8px; padding: 9px 10px; border-left: 2px solid var(--gold); color: #d8c88e; background: #211e15; }

.results-panel { min-width: 0; overflow: hidden; }
.results-heading { min-height: 65px; padding: 12px 15px; border-bottom: 1px solid var(--line); background: #171a1c; }
.results-heading h2 span { color: var(--gold-light); font-variant-numeric: tabular-nums; }
.sort-field { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.sort-field select { width: auto; min-width: 150px; height: 34px; margin: 0; }
.trinket-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(410px, 1fr)); gap: 1px; background: var(--line); }
.trinket-card { min-width: 0; background: var(--surface); }
.trinket-card.is-effect-gear { box-shadow: inset 4px 0 0 #6f58a8; }
.trinket-card.is-effect-gear .card-open { background: linear-gradient(100deg, rgba(91, 67, 139, .10), transparent 34%), var(--surface); }
.trinket-card.is-effect-gear .card-open:hover { background: linear-gradient(100deg, rgba(91, 67, 139, .16), transparent 38%), #1d2123; }
.trinket-card.is-embellishment { box-shadow: inset 4px 0 0 #d18a4b; }
.trinket-card.is-embellishment .card-open { background: linear-gradient(100deg, rgba(209, 138, 75, .10), transparent 34%), var(--surface); }
.trinket-card.is-embellishment .card-open:hover { background: linear-gradient(100deg, rgba(209, 138, 75, .17), transparent 38%), #1d2123; }
.card-open { width: 100%; min-height: 410px; display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 0; color: inherit; background: var(--surface); text-align: left; cursor: pointer; }
.card-open:hover { background: #1d2123; }
.card-open:focus-visible { position: relative; z-index: 2; outline: 2px solid var(--jade); outline-offset: -2px; }
.card-header { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.item-icon { width: 52px; height: 52px; border: 1px solid #806733; border-radius: 5px; object-fit: cover; background: #101214; box-shadow: 0 0 0 1px #19130a, 0 4px 12px rgba(0, 0, 0, .25); }
.card-kicker, .detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 7px; }
.source-badge, .ilvl-badge {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .075em;
  text-transform: uppercase;
  box-shadow: inset 0 0 10px rgba(255,255,255,.035), 0 2px 8px rgba(0,0,0,.18);
}
.source-badge.is-raid { border-color: #b66d56; color: #ffd0bc; background: #4a251e; }
.source-badge.is-mplus { border-color: #397f72; color: #b6f1dc; background: #173a33; }
.source-badge.is-crafted { border-color: #a36d36; color: #ffe0a3; background: #452f1b; }
.ilvl-badge { border-color: #a9863d; color: #ffe2a0; background: #3a301b; font-variant-numeric: tabular-nums; }
.item-id { color: #858d89; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.card-title-block h3 { margin: 0; color: var(--gold-light); font-size: 18px; line-height: 1.35; }
.card-name-en { margin: 2px 0 0; color: #d1c7ad; font-size: 13px; line-height: 1.35; }
.open-glyph { color: #68706c; font-size: 14px; }
.card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.tag { padding: 3px 6px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: #15181a; font-size: 10px; }
.tag.is-special { border-color: #846b35; color: var(--gold-light); background: #282217; }
.tag.is-slot { padding: 4px 8px; border-color: #8a713d; color: #ffe0a0; background: #302817; font-size: 11px; font-weight: 800; }
.tag.is-gear-type { border-color: #6f58a8; color: #d6c3ff; background: #251d38; font-weight: 700; }
.tag.is-equipment-type { border-color: #4e7b8f; color: #bde8f5; background: #182b33; font-size: 11px; font-weight: 800; }
.tag.is-equipment-set { border-color: #9a5d87; color: #ffd0ed; background: #351f30; font-size: 11px; font-weight: 850; }
.tag.is-release-new { border-color: #b56335; color: #ffd2ad; background: #3a2116; font-size: 11px; font-weight: 900; letter-spacing: .02em; }
.card-source { min-height: 40px; margin: 0; color: #cbd0cd; font-size: 13px; line-height: 1.55; }
.card-source span, .detail-source span { display: block; }
.card-source span + span, .detail-source span + span { margin-top: 2px; color: #949b97; }
.wearable-summary { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px; align-items: start; padding: 8px 9px; border: 1px solid #403753; border-radius: 4px; background: #181621; font-size: 12px; line-height: 1.55; }
.wearable-summary[hidden] { display: none; }
.wearable-summary strong { color: #d6c3ff; }
.wearable-summary span { display: -webkit-box; overflow: hidden; color: #c8c2d5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mechanic-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 7px; }
.mechanic-highlights[hidden] { display: none; }
.mechanic-pill {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
  padding: 10px 11px;
  border: 1px solid;
  border-left-width: 4px;
  border-radius: 5px;
  text-align: left;
}
.mechanic-pill .mechanic-label { grid-column: 1 / -1; font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.mechanic-pill strong { font-size: 16px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.mechanic-pill > span:not(.mechanic-label) { font-size: 12px; line-height: 1.35; text-align: right; }
.mechanic-pill small { grid-column: 1 / -1; color: #858c88; font-size: 10px; }
.mechanic-pill.is-use { border-color: #8d6a2e; color: #ffe1a0; background: linear-gradient(110deg, #302617, #211d16); }
.mechanic-pill.is-use .mechanic-label { color: #e6b956; }
.mechanic-pill.is-rppm { border-color: #28755d; color: #a9ebcd; background: linear-gradient(110deg, #142a22, #161e1b); }
.mechanic-pill.is-rppm .mechanic-label { color: #58d2a2; }
.card-stats { min-height: 32px; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 9px; border: 1px solid #2e3335; border-radius: 4px; background: #15181a; }
.stat-pill { color: #d7ddd9; font-size: 12px; }
.stat-pill strong { color: #8eddbb; font-variant-numeric: tabular-nums; }
.card-description { min-height: 118px; margin: 0; overflow: hidden; color: #c2c7c4; }
.card-description-copy p { display: -webkit-box; margin: 0; overflow: hidden; font-size: 14px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.card-description-copy + .card-description-copy { margin-top: 8px; padding-top: 8px; border-top: 1px solid #303537; color: #9ea5a1; }
.provisional-badge { display: inline-flex; align-items: center; width: fit-content; margin: 0 0 8px; padding: 3px 7px; border: 1px solid #a76f31; border-radius: 999px; color: #ffd891; background: #352312; font-family: system-ui, sans-serif; font-size: 10px; font-weight: 800; line-height: 1.2; letter-spacing: .04em; }
.provisional-badge::before { content: "译"; display: inline-grid; place-items: center; width: 15px; height: 15px; margin-right: 5px; border-radius: 50%; color: #3a240c; background: #e0a750; font-size: 9px; }
.provisional-badge.is-compact { margin-bottom: 5px; padding: 2px 6px; font-size: 9px; }
.card-description-copy.is-provisional { padding: 7px 8px; border-left: 2px solid #b77a34; background: linear-gradient(90deg, rgba(142, 90, 31, .17), transparent 86%); }
.card-description-copy.is-provisional p { color: #f0d9ad; font-family: "STKaiti", "KaiTi", "楷体", serif; font-size: 15px; }
.scaling-value {
  padding: 0 .16em;
  border-radius: 3px;
  color: #ffe09a;
  background: rgba(216, 172, 80, .14);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -1px 0 rgba(241, 210, 140, .42);
}
.card-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 10px; border-top: 1px solid #303537; }
.influence-strip { display: flex; flex-wrap: wrap; gap: 4px; }
.influence-chip { min-width: 36px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 3px; color: #828986; font-size: 10px; text-align: center; }
.influence-chip.is-yes { border-color: #2f7257; color: #8ce0bb; background: #15271f; }
.influence-chip.is-conditional { border-color: #786431; color: #e7c978; background: #292416; }
.mechanism-badge { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.mechanism-badge::before { content: ""; width: 6px; height: 6px; display: inline-block; margin-right: 5px; border-radius: 50%; background: var(--jade); }
.mechanism-badge.is-partial::before { background: var(--gold); }
.empty-state { padding: 80px 20px; color: var(--muted); text-align: center; }

.detail-dialog { width: min(1280px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); background: #171a1c; box-shadow: 0 24px 80px rgba(0, 0, 0, .62); }
.detail-dialog::backdrop { background: rgba(4, 5, 6, .76); backdrop-filter: blur(5px); }
.dialog-frame { position: relative; max-height: calc(100vh - 30px); overflow: auto; }
.dialog-close { position: sticky; z-index: 3; top: 12px; float: right; width: 36px; height: 36px; margin: 12px 12px -48px 0; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--text); background: rgba(23, 26, 28, .94); font-size: 22px; cursor: pointer; }
.detail-hero { min-height: 170px; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 17px; align-items: start; padding: 26px 70px 22px 26px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 85% 0, rgba(216, 172, 80, .13), transparent 40%), #1b1e20; }
.detail-hero.is-effect-gear { box-shadow: inset 5px 0 0 #6f58a8; background: radial-gradient(circle at 85% 0, rgba(111, 88, 168, .19), transparent 42%), #1b1e20; }
.detail-hero.is-embellishment { box-shadow: inset 5px 0 0 #d18a4b; background: radial-gradient(circle at 85% 0, rgba(209, 138, 75, .18), transparent 42%), #1b1e20; }
.detail-meta { margin-bottom: 8px; }
.detail-hero .item-icon { width: 74px; height: 74px; }
.detail-hero h2 { margin: 4px 0 2px; color: var(--gold-light); font-size: 28px; }
.detail-name-en { margin: 0 0 8px; color: #d0c3a4; font-size: 17px; }
.detail-source { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.detail-mechanic-highlights { max-width: 960px; margin-top: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.detail-mechanic-highlights .mechanic-pill { padding: 12px 13px; }
.detail-mechanic-highlights .mechanic-pill strong { font-size: 18px; }
.combat-scope-note { max-width: 920px; margin: 10px 0 0; padding: 8px 10px; border-left: 2px solid #6f58a8; color: #bdc2bf; background: rgba(25, 20, 37, .62); font-size: 13px; line-height: 1.55; }
.combat-scope-note b { color: #d6c3ff; }
.wearable-basis { margin: -4px 0 10px !important; color: #989f9b !important; font-size: 12px !important; }
.wearable-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wearable-tags span { padding: 5px 7px; border: 1px solid #56466f; border-radius: 4px; color: #d8c8f4; background: #211b2c; font-size: 12px; line-height: 1.25; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(380px, .85fr); }
.detail-main, .detail-side { min-width: 0; padding: 22px; }
.detail-side { border-left: 1px solid var(--line); background: #15181a; }
.detail-section + .detail-section { margin-top: 24px; }
.detail-section h3 { margin: 0 0 12px; color: #e4e2dc; font-size: 16px; }
.detail-section p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.equipment-set-section h4 { margin: 16px 0 8px; color: #d7d1c9; font-size: 13px; }
.set-member-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.set-member-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.018); color: var(--muted); font-size: 13px; }
.set-member-list li.is-current { border-color: #9a5d87; color: #ffd0ed; background: rgba(154,93,135,.13); }
.set-member-list small, .set-threshold small { color: var(--muted); font-size: 11px; }
.set-thresholds { display: flex; flex-wrap: wrap; gap: 7px; }
.set-threshold { display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 9px; border: 1px solid #9a5d87; border-radius: 8px; background: rgba(154,93,135,.11); color: #ffd0ed; font-size: 12px; }
.tooltip-block { padding: 14px; border: 1px solid var(--line); border-radius: 5px; background: #111416; }
.tooltip-block + .tooltip-block { margin-top: 8px; }
.tooltip-trigger { display: block; margin-bottom: 9px; color: var(--jade); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tooltip-text { margin: 0; color: #e7e3da; font-size: 15px; line-height: 1.8; white-space: pre-wrap; }
.localized-tooltip-copy { min-width: 0; }
.localized-tooltip-copy.is-provisional { padding: 12px 13px; border: 1px dashed #9a6832; border-left: 3px solid #c0873d; border-radius: 4px; background: #241b11; }
.localized-tooltip-copy.is-provisional .tooltip-text { color: #f2dfb9; font-family: "STKaiti", "KaiTi", "楷体", serif; font-size: 17px; }
.provisional-translation-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; margin: 0 0 10px; padding: 10px 12px; border: 1px solid #8b6031; border-radius: 5px; background: #261b10; }
.provisional-translation-notice .provisional-badge { margin: 1px 0 0; }
.provisional-translation-notice p { color: #d8c19b; font-size: 12px; line-height: 1.55; }
.detail-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.detail-controls select { min-height: 38px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 4px; color: var(--text); background: #111416; font-size: 12px; }
.stat-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.table-scroll { overflow-x: auto; }
.stat-table th, .stat-table td { padding: 8px 7px; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.stat-table th:first-child, .stat-table td:first-child { text-align: left; }
.stat-table th { color: var(--muted); font-weight: 500; }
.stat-table td strong { color: #8eddbb; }
.influence-list { display: grid; gap: 7px; }
.influence-row { display: grid; grid-template-columns: 76px 78px minmax(0, 1fr); gap: 9px; align-items: start; }
.influence-row b { font-size: 12px; line-height: 1.5; }
.state-label { padding: 3px 5px; border-radius: 3px; color: #8ce0bb; background: #183126; font-size: 10px; text-align: center; }
.state-label.is-no { color: #929895; background: #272b2d; }
.state-label.is-conditional { color: #ebcf82; background: #302816; }
.influence-row p { font-size: 12px; line-height: 1.6; }
.influence-row > p, .influence-row > .bilingual-copy { grid-column: 1 / -1; }
.mechanism-card { padding: 13px; border: 1px solid #6f5d30; border-radius: 5px; background: #272216; }
.mechanism-card.is-complete { border-color: #285f4a; background: #17271f; }
.mechanism-card h4 { margin: 0 0 8px; color: var(--gold-light); font-size: 14px; line-height: 1.45; }
.mechanism-card.is-complete h4 { color: #95dfbf; }
.mechanism-card p + p { margin-top: 8px; }
.method-label { color: #d5bc78; font-weight: 700; }
.raw-description { padding: 12px; border-left: 2px solid var(--line-strong); color: #a8afab; background: #131618; font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.raw-description + .raw-description { margin-top: 8px; }
.raw-description p { margin-top: 7px; font-family: inherit; font-size: 12px; }
.raw-localized-copy { min-width: 0; }
.raw-localized-copy.is-provisional { padding: 9px 10px; border: 1px dashed #8d6234; border-radius: 4px; color: #edd5a6; background: #21180f; font-family: "STKaiti", "KaiTi", "楷体", serif; font-size: 14px; }
.raw-localized-copy.is-provisional .provisional-badge { font-family: system-ui, sans-serif; }
.raw-localized-copy p { white-space: pre-wrap; }
.bilingual-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bilingual-copy > p, .bilingual-copy > div { min-width: 0; }
.bilingual-copy > p { color: #e7e3da; font-size: 15px; line-height: 1.8; white-space: pre-wrap; }
.bilingual-copy > p + p, .bilingual-copy > div + div { padding-left: 14px; border-left: 1px solid var(--line); color: #bac1bd; }
.bilingual-copy.compact { gap: 8px; }
.bilingual-copy.compact > p { font-size: 12px; line-height: 1.6; }
.bilingual-copy.compact > p + p { padding-left: 8px; }
.mechanism-card > .bilingual-copy { grid-template-columns: 1fr; }
.mechanism-card > .bilingual-copy > div + div { padding-top: 12px; padding-left: 0; border-top: 1px solid rgba(216, 172, 80, .25); border-left: 0; }
.history-coverage { margin-bottom: 10px; padding: 12px 13px; border: 1px solid #385f53; border-radius: 5px; background: #131b18; }
.history-coverage b { color: #9ce5c6; font-size: 13px; }
.history-coverage p { margin-top: 6px; font-size: 13px; line-height: 1.65; }
.history-event { border: 1px solid var(--line); border-radius: 5px; background: #111416; }
.history-event + .history-event { margin-top: 8px; }
.history-event summary { display: flex; justify-content: space-between; gap: 12px; padding: 11px 13px; color: #d9ddd9; cursor: pointer; font-size: 13px; }
.history-event summary span:last-child { color: var(--jade); white-space: nowrap; }
.history-event > p { padding: 0 13px 9px; font-size: 13px; }
.history-event ul { display: grid; gap: 1px; margin: 0; padding: 0 13px 12px; list-style: none; }
.history-event li { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr); gap: 12px; padding: 8px 9px; background: #171b1d; font-size: 12px; line-height: 1.5; }
.history-event li b { color: #d6d9d6; font-weight: 500; }
.history-values { display: grid; grid-template-columns: 1fr auto 1fr; gap: 7px; align-items: start; font-family: Consolas, "Cascadia Mono", monospace; overflow-wrap: anywhere; }
.history-values del { color: #d69b91; text-decoration-thickness: 1px; }
.history-values ins { color: #8eddbb; text-decoration: none; }
.history-values del, .history-values ins { max-height: 190px; display: block; overflow: auto; }
.history-value-copy { display: block; white-space: pre-wrap; }
.history-value-copy + .history-value-copy { margin-top: 7px; padding-top: 7px; border-top: 1px solid #34393b; }
.history-value-copy.is-english { color: #9fa6a2; font-size: 11px; }
.history-value-copy.is-provisional { padding: 7px 8px; border-left: 2px solid #aa7235; color: #efd5a3; background: #231a11; font-family: "STKaiti", "KaiTi", "楷体", serif; font-size: 14px; }
.history-value-copy.is-provisional .provisional-badge { font-family: system-ui, sans-serif; }
.history-event > a { display: inline-block; margin: 0 13px 12px; color: #9fdac1; font-size: 12px; }
.history-empty { padding: 13px; border: 1px dashed var(--line-strong); border-radius: 5px; background: #131618; }

@media (max-width: 980px) {
  .app-header { grid-template-columns: 1fr auto; }
  .view-tabs { grid-row: 2; grid-column: 1 / -1; justify-self: center; }
  .hero-panel { grid-template-columns: 1fr; }
  .dataset-summary { max-width: 560px; }
  .query-shell { grid-template-columns: 1fr; }
  .filter-panel { position: static; }
  .filter-panel .segmented { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #role-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .app-header { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 10px 12px; }
  .header-actions { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-self: stretch; gap: 7px; }
  .version-field span { display: none; }
  .version-field, .version-field select { width: 100%; min-width: 0; max-width: none; }
  .version-field select { font-size: 11px; }
  .language-selector { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .language-option { padding-inline: 8px; }
  .identity h1 { font-size: 16px; }
  .identity h1 small { display: none; }
  .header-actions .tool-link { display: none; }
  .view-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tab { min-width: 0; padding: 7px 4px; white-space: normal; line-height: 1.25; }
  main { padding: 8px; }
  .hero-panel { min-height: 0; padding: 22px 18px; }
  .dataset-summary { grid-template-columns: 1fr 1fr; }
  .filter-panel .segmented { grid-template-columns: repeat(3, 1fr); }
  .results-heading { align-items: flex-start; }
  .sort-field { flex-direction: column; align-items: flex-start; }
  .sort-field select { min-width: 125px; }
  .trinket-grid { grid-template-columns: 1fr; }
  .card-open { min-height: 0; }
  .detail-hero { grid-template-columns: 56px minmax(0, 1fr); padding: 22px 52px 18px 18px; }
  .detail-hero .item-icon { width: 56px; height: 56px; }
  .detail-hero h2 { font-size: 19px; }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-side { border-top: 1px solid var(--line); border-left: 0; }
  .stat-table { display: block; overflow-x: auto; white-space: nowrap; }
  .bilingual-copy { grid-template-columns: 1fr; }
  .bilingual-copy > p + p, .bilingual-copy > div + div { padding-top: 10px; padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .history-event li { grid-template-columns: 1fr; }
}