:root {
  --bg: #090d13;
  --bg-soft: #0d131c;
  --panel: #111925;
  --panel-2: #151f2d;
  --panel-3: #1a2636;
  --border: #263447;
  --border-soft: #1d2938;
  --text: #edf3fa;
  --muted: #8e9bad;
  --subtle: #647286;
  --gold: #f4c45b;
  --gold-bright: #ffdc83;
  --cyan: #4dc7ca;
  --danger: #ee6b75;
  --shadow: 0 18px 50px rgba(0, 0, 0, .28);
  --radius: 14px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 80% -10%, rgba(52, 102, 130, .13), transparent 30rem),
    var(--bg);
  color: var(--text);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
img { max-width: 100%; }
h1, h2, h3, strong, .brand { font-family: "Manrope", system-ui, sans-serif; }
h1, h2, h3, p { margin-top: 0; }
.page-shell { width: min(1400px, calc(100% - 44px)); margin-inline: auto; }
.eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--gold);
  font: 700 11px/1 "Manrope", sans-serif;
  letter-spacing: .19em;
}
.muted-copy { color: var(--muted); }

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  height: 72px;
  border-bottom: 1px solid rgba(68, 85, 108, .38);
  background: rgba(8, 12, 18, .88);
  backdrop-filter: blur(18px);
}
.nav-shell {
  width: min(1480px, calc(100% - 36px));
  height: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: 165px minmax(340px, 680px) 1fr;
  align-items: center;
  gap: 34px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; }
.brand-mark {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(244, 196, 91, .58);
  border-radius: 50%;
  color: var(--gold-bright);
  background: #111822;
  box-shadow: inset 0 0 18px rgba(244, 196, 91, .13);
  font-weight: 800;
  overflow: hidden;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.brand > span:last-child { display: flex; flex-direction: column; }
.brand strong { font-size: 20px; line-height: 1; letter-spacing: -.04em; }
.brand small { color: var(--muted); font-size: 8px; letter-spacing: .24em; }
.header-search {
  position: relative; height: 40px; display: flex; align-items: center; gap: 10px;
  padding: 0 12px; border: 1px solid var(--border);
  border-radius: 9px; background: #0e151f;
  transition: border-color .2s, box-shadow .2s;
}
.header-search:focus-within { border-color: #536a82; box-shadow: 0 0 0 3px rgba(77, 199, 202, .07); }
.header-search input { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; }
.header-search input::placeholder { color: #657286; }
.header-search kbd {
  padding: 1px 7px; border: 1px solid #354255; border-radius: 5px;
  color: #78879b; background: #151e2a; font-size: 11px;
}
.search-glyph {
  width: 14px; height: 14px; position: relative; display: inline-block;
  border: 1.8px solid #718095; border-radius: 50%;
}
.search-glyph::after {
  content: ""; position: absolute; width: 6px; height: 1.8px;
  right: -5px; bottom: -2px; background: #718095; transform: rotate(45deg); border-radius: 2px;
}
.main-nav { justify-self: end; display: flex; align-items: center; gap: 8px; }
.main-nav a {
  padding: 9px 13px; border-radius: 8px; color: #aab5c3;
  font-weight: 600; font-size: 14px;
}
.main-nav a:hover, .main-nav a.active { color: var(--text); background: #151e2a; }
.favorite-count {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px;
  margin-left: 4px; border-radius: 10px; color: #16120a; background: var(--gold); font-size: 10px;
}

.hero {
  min-height: 535px; position: relative; overflow: visible; z-index: 20; display: grid; place-items: center;
  border-bottom: 1px solid var(--border-soft);
  background:
    linear-gradient(90deg, rgba(9, 13, 19, .95) 0%, rgba(9, 13, 19, .72) 55%, rgba(9, 13, 19, .95) 100%),
    radial-gradient(circle at 50% 60%, rgba(47, 88, 105, .27), transparent 38%),
    repeating-linear-gradient(125deg, transparent 0 70px, rgba(255,255,255,.014) 71px 72px);
}
.hero-glow { position: absolute; inset: auto 20% -180px; height: 300px; background: rgba(45, 124, 131, .09); filter: blur(80px); }
.hero-inner { position: relative; z-index: 2; display: grid; justify-items: center; padding: 75px 0 65px; text-align: center; }
.hero-logo { width: min(620px, 88vw); margin-bottom: 22px; filter: drop-shadow(0 22px 50px rgba(0,0,0,.45)); }
.hero > .hero-inner > p { max-width: 650px; margin-bottom: 32px; color: #a5b2c2; font-size: 17px; }
.hero-credit { margin-bottom: 26px !important; color: var(--muted) !important; font-size: 14px !important; }
.hero-credit a, .credit-link {
  color: var(--gold);
  text-decoration: none;
  font-weight: 800;
}
.hero-credit a:hover, .credit-link:hover { color: var(--gold-bright); }
.hero-search {
  position: relative; z-index: 120; width: min(980px, 92vw); max-width: 980px; height: 62px; display: flex; align-items: center; gap: 15px;
  padding: 7px 7px 7px 21px; border: 1px solid #425269; border-radius: 12px;
  background: rgba(14, 21, 31, .95); box-shadow: 0 20px 55px rgba(0,0,0,.3);
}
.hero-search input { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 15px; }
.hero-search > button, .primary-button {
  display: inline-flex; justify-content: center; align-items: center;
  min-height: 44px; padding: 0 20px; border: 1px solid #e5b84e; border-radius: 8px;
  color: #171309; background: linear-gradient(180deg, #ffd876, #dca947);
  box-shadow: inset 0 1px rgba(255,255,255,.3), 0 8px 25px rgba(213, 162, 57, .12);
  font-weight: 700;
}
.hero-search > button:hover, .primary-button:hover { filter: brightness(1.08); }
.autocomplete-menu {
  position: absolute; z-index: 500; left: 0; right: 0; top: calc(100% + 8px);
  display: grid; gap: 4px; padding: 8px; border: 1px solid var(--border);
  border-radius: 11px; background: rgba(12, 18, 27, .98);
  box-shadow: 0 20px 55px rgba(0,0,0,.36);
}
.autocomplete-menu[hidden] { display: none; }
.autocomplete-option {
  width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 48px; padding: 8px;
  border: 1px solid transparent; border-radius: 8px; color: #d7e0eb; background: transparent;
  box-shadow: none; text-align: left; font: inherit; cursor: pointer;
}
.autocomplete-option:hover, .autocomplete-option.active {
  border-color: #3f5067; background: #141e2b;
}
.autocomplete-option .mini-icon { width: 32px; height: 32px; }
.autocomplete-option strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.autocomplete-option small { color: var(--muted); font-size: 10px; }
.hero-proof { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 18px; color: var(--muted); font-size: 12px; }
.hero-proof strong { color: #ccd6e2; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #55d69b; box-shadow: 0 0 10px #55d69b; }
.proof-separator { width: 1px; height: 12px; margin: 0 7px; background: #435064; }

.home-section { position: relative; z-index: 1; padding: 68px 0 78px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 27px; }
.section-heading h2 { margin: 0; font-size: 28px; letter-spacing: -.035em; }
.text-link { color: var(--muted); font-weight: 600; }
.text-link span { color: var(--gold); margin-left: 6px; }
.type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.type-tile {
  min-height: 120px; position: relative; display: flex; align-items: center; gap: 15px;
  padding: 22px; border: 1px solid var(--border-soft); border-radius: var(--radius);
  background: linear-gradient(145deg, #121a25, #0f161f);
  overflow: hidden; transition: transform .2s, border-color .2s, background .2s;
}
.type-tile:hover { transform: translateY(-3px); border-color: #42546a; background: linear-gradient(145deg, #172231, #111922); }
.type-tile-icon {
  width: 49px; height: 49px; flex: 0 0 auto; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--tile-color, #65abb2), transparent 45%);
  border-radius: 12px; color: var(--tile-color, #65abb2);
  background: color-mix(in srgb, var(--tile-color, #65abb2) 11%, transparent);
  font-size: 21px;
}
.type-tile-content { display: flex; flex-direction: column; min-width: 0; }
.type-tile-content strong { font-size: 16px; }
.type-tile-content small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.type-tile-count { position: absolute; top: 16px; right: 17px; color: var(--subtle); font-size: 11px; }
.type-item { --tile-color: #9f7be8; }
.type-quest { --tile-color: #e3b853; }
.type-npc { --tile-color: #d6796f; }
.type-spell { --tile-color: #6a9fe6; }
.type-object { --tile-color: #67b7a0; }
.type-faction { --tile-color: #de8852; }
.type-itemset { --tile-color: #b176d0; }
.home-categories { padding: 60px 0 75px; border-top: 1px solid var(--border-soft); background: #0b1017; }
.category-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.category-strip a { display: flex; flex-direction: column; padding: 15px; border: 1px solid var(--border-soft); border-radius: 9px; background: #101721; }
.category-strip a:hover { border-color: #45566b; }
.category-strip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.category-strip span { color: var(--muted); font-size: 11px; }

.page-heading { padding: 54px 0 32px; }
.page-heading h1 { margin-bottom: 6px; font-size: 40px; letter-spacing: -.045em; }
.page-heading p { color: var(--muted); }
.browse-heading { display: flex; align-items: end; justify-content: space-between; }
.browse-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 34px; padding-bottom: 80px; }
.filter-panel {
  align-self: start; position: sticky; top: 94px; padding: 18px;
  border: 1px solid var(--border-soft); border-radius: 12px; background: #0e151e;
}
.filter-title { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--border-soft); }
.filter-title a { color: var(--gold); font-size: 11px; }
fieldset { margin: 0; padding: 17px 0; border: 0; border-bottom: 1px solid var(--border-soft); }
legend { width: 100%; margin-bottom: 11px; color: #c8d2df; font-weight: 700; font-size: 12px; }
.check-row { display: flex; align-items: center; gap: 8px; min-height: 29px; color: #aeb9c7; font-size: 12px; cursor: pointer; }
.check-row input { width: 14px; height: 14px; accent-color: var(--gold); }
.check-row span { flex: 1; }
.check-row small { color: #657286; }
.range-inputs { display: flex; align-items: center; gap: 6px; }
.range-inputs input, .field-input, .sort-form select {
  min-width: 0; width: 100%; height: 36px; padding: 0 9px;
  border: 1px solid var(--border); border-radius: 7px; outline: 0;
  color: #cbd5e1; background: #111a25;
}
.range-inputs span { color: var(--subtle); font-size: 11px; }
.filter-submit { width: 100%; margin-top: 18px; }
.filter-toggle { display: none; }
.result-toolbar { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 13px; border-bottom: 1px solid var(--border-soft); }
.browse-page.loading .results-panel { opacity: .58; pointer-events: none; }
.browse-page.loading .result-toolbar::after {
  content: "Updating…"; color: var(--gold); font-size: 11px; letter-spacing: .04em;
}
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.active-filters span { padding: 5px 9px; border: 1px solid #39495e; border-radius: 20px; color: #aeb9c8; background: #131d29; font-size: 11px; }
.active-filters a { margin-left: 5px; color: var(--gold); }
.sort-form label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.sort-form select { width: 145px; }
.entity-list { display: grid; gap: 9px; }
.entity-card {
  min-height: 105px; position: relative; border: 1px solid var(--border-soft);
  border-radius: 11px; background: linear-gradient(100deg, #101721, #0d141d);
  transition: transform .18s, border-color .18s, background .18s;
}
.entity-card:hover { transform: translateX(3px); border-color: #3a4b61; background: #121b27; }
.entity-card-link { min-height: inherit; display: flex; align-items: center; gap: 16px; padding: 15px 60px 15px 16px; }
.entity-icon, .detail-icon, .mini-icon {
  position: relative; flex: 0 0 auto; display: grid; place-items: center;
  border: 1px solid #465265; background: #080c12; overflow: hidden;
}
.entity-icon { width: 66px; height: 66px; border-radius: 10px; }
.entity-icon img, .detail-icon img, .mini-icon img { width: 100%; height: 100%; object-fit: cover; }
.icon-fallback {
  width: 100%; height: 100%; display: grid; place-items: center;
  color: #c1ccd9;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.08), transparent 24px),
    linear-gradient(145deg, rgba(77,199,202,.12), rgba(244,196,91,.07));
  font: 800 24px "Manrope", sans-serif;
  text-shadow: 0 1px 10px rgba(0,0,0,.42);
}
.mini-icon .icon-fallback { font-size: 15px; }
.detail-icon .icon-fallback { font-size: 34px; }
.entity-card-body { min-width: 0; display: flex; flex-direction: column; flex: 1; }
.entity-type { color: #77869a; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.entity-card-body > strong { margin: 2px 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.entity-meta { display: flex; gap: 13px; color: #8e9bac; font-size: 11px; }
.entity-meta span + span::before { content: "·"; margin-right: 13px; color: #4f5c6e; }
.entity-summary { max-width: 900px; margin-top: 5px; color: #69778a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.favorite-button {
  width: 37px; height: 37px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 9px; color: #758399; background: transparent;
  font-size: 22px; transition: color .15s, background .15s, border-color .15s;
}
.entity-card > .favorite-button { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
.favorite-button:hover { color: var(--gold); border-color: #3c4551; background: #18212d; }
.favorite-button[aria-pressed="true"] { color: var(--gold); }
.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 25px; }
.page-button { padding: 9px 13px; border: 1px solid var(--border); border-radius: 8px; color: #aeb9c7; background: #111923; font-size: 12px; }
.page-button:not(.disabled):hover { border-color: #53667e; color: white; }
.page-button.disabled { opacity: .38; cursor: default; }
.page-status { color: var(--muted); font-size: 11px; }
.empty-state { min-height: 380px; display: grid; place-items: center; align-content: center; padding: 50px; text-align: center; }
.empty-state > span { color: #526276; font-size: 55px; }
.empty-state h2 { margin: 10px 0 4px; }
.empty-state p { color: var(--muted); }

.detail-top { border-bottom: 1px solid var(--border-soft); background: linear-gradient(105deg, #0e151f, #0b1119); }
.breadcrumbs { display: flex; gap: 9px; padding-top: 25px; color: #748297; font-size: 11px; }
.breadcrumbs a:hover { color: var(--gold); }
.breadcrumbs span:last-child { color: #a4b0c0; }
.detail-identity { min-height: 176px; display: flex; align-items: center; gap: 22px; }
.detail-icon { width: 88px; height: 88px; border-radius: 13px; box-shadow: var(--shadow); }
.detail-identity h1 { margin: 3px 0 8px; font-size: clamp(29px, 4vw, 46px); line-height: 1.1; letter-spacing: -.045em; }
.identity-meta { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; }
.identity-meta span, .identity-meta a { padding: 4px 8px; border: 1px solid var(--border); border-radius: 5px; background: #121b27; }
.identity-meta a { color: var(--gold); }
.detail-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-favorite, .detail-action-button {
  width: auto; height: 42px; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 13px; border: 1px solid var(--border); border-radius: 9px;
  color: #d7e0eb; background: #111a25; font-size: 18px; cursor: pointer;
}
.detail-favorite b, .detail-action-button b { color: #bdc7d4; font-size: 12px; }
.detail-action-button:hover { color: var(--gold); border-color: #3c4551; background: #18212d; }
.detail-action-button.copied { color: #171309; border-color: #e5b84e; background: linear-gradient(180deg, #ffd876, #dca947); }
.detail-action-button.copied b { color: #171309; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 25px; padding: 32px 0 80px; }
.detail-main { min-width: 0; display: grid; align-content: start; gap: 15px; }
.content-card, .side-card {
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  background: linear-gradient(145deg, #111925, #0e151e); box-shadow: 0 10px 35px rgba(0,0,0,.1);
}
.content-card { padding: 24px; }
.content-card h2 { margin-bottom: 16px; font-size: 19px; letter-spacing: -.025em; }
.card-kicker { margin-bottom: 13px; color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.rich-content { color: #b5c0cd; line-height: 1.7; }
.rich-content > *:last-child { margin-bottom: 0; }
.rich-content a { color: var(--gold); }
.rich-content table { max-width: 100%; border-collapse: collapse; }
.rich-content td, .rich-content th { padding: 4px 8px; vertical-align: top; }
.rich-content img { border-radius: 5px; }
.card-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.card-heading h2 { margin: 0; }
.card-heading > span { min-width: 26px; padding: 2px 7px; border-radius: 12px; color: #93a0b2; background: #1d2938; text-align: center; font-size: 10px; }
.relation-list { display: grid; gap: 5px; }
.relation-row { min-height: 58px; display: flex; align-items: center; gap: 11px; padding: 8px; border: 1px solid transparent; border-radius: 8px; background: rgba(8, 13, 19, .38); }
.relation-row:hover { border-color: #344358; background: #121b27; }
.mini-icon { width: 39px; height: 39px; border-radius: 7px; }
.relation-name { min-width: 170px; display: flex; flex: 1; flex-direction: column; }
.relation-name strong { font-size: 13px; }
.relation-name small { color: #6d7b8d; font-size: 10px; }
.relation-metadata { display: flex; align-items: center; gap: 16px; color: #8f9daf; font-size: 10px; }
.relation-metadata span { display: flex; flex-direction: column; }
.relation-metadata b { color: #59687a; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.row-arrow { margin: 0 6px; color: #657489; font-size: 22px; }
.compact-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.compact-links a { display: flex; flex-direction: column; padding: 9px 11px; border: 1px solid var(--border-soft); border-radius: 7px; background: #0d141d; }
.compact-links a:hover { border-color: #3c4d63; }
.compact-links span { font-size: 12px; }
.compact-links small { color: var(--muted); font-size: 9px; }
.quest-groups { display: grid; gap: 18px; }
.quest-groups h3 { margin: 0 0 8px; color: #c9d4e2; font-size: 13px; letter-spacing: -.01em; }
.quest-chain-sidebar {
  border-color: rgba(244, 196, 91, .24);
  background:
    radial-gradient(circle at 100% 0%, rgba(244,196,91,.08), transparent 140px),
    linear-gradient(145deg, #141b26, #0f151f);
}
.quest-chain { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.quest-chain li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: stretch; }
.quest-chain li > span {
  display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px;
  color: var(--muted); background: #0d141d; font-weight: 800; font-size: 12px;
}
.quest-chain a { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 8px; background: #0d141d; transition: border-color .15s, background .15s, transform .15s; }
.quest-chain a:hover { border-color: #3c4d63; }
.quest-chain strong { line-height: 1.25; }
.quest-chain small { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.quest-chain .current > span {
  border-color: rgba(255, 220, 131, .86);
  color: #1b1408;
  background: linear-gradient(180deg, #ffdc83, #e6b64d);
  box-shadow: 0 0 22px rgba(244,196,91,.18);
}
.quest-chain .current a {
  border-color: rgba(255, 220, 131, .72);
  background: linear-gradient(145deg, rgba(244,196,91,.2), rgba(244,196,91,.07));
  box-shadow: inset 3px 0 0 var(--gold), 0 8px 24px rgba(244,196,91,.08);
  transform: translateX(2px);
}
.quest-chain .current small { color: var(--gold-bright); font-weight: 800; }
.data-table-wrap { max-width: 100%; overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.data-table th { position: sticky; top: 0; color: #8e9caf; background: #182331; text-align: left; }
.data-table th, .data-table td { padding: 9px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.detail-sidebar { min-width: 0; display: grid; align-content: start; gap: 14px; }
.side-card { padding: 19px; }
.facts { margin: 0; }
.facts > div { display: grid; grid-template-columns: minmax(80px, 1fr) 1.25fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.facts > div:last-child { border: 0; }
.facts dt { color: #758397; font-size: 10px; }
.facts dd { margin: 0; color: #c2ccd8; overflow-wrap: anywhere; text-align: right; font-size: 11px; }
.facts.compact > div { padding: 6px 0; }
.money-value { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.money-part { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; }
.money-part img { width: 13px; height: 13px; image-rendering: auto; }
.money-gold { color: #ffd76a; }
.money-silver { color: #d9e0ea; }
.money-copper { color: #d28a56; }
.react-token {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px;
  border-radius: 999px; color: #fff; font-weight: 900; font-size: 10px;
}
.react-alliance { background: #2878ff; box-shadow: 0 0 14px rgba(40,120,255,.22); }
.react-horde { background: #d73d3d; box-shadow: 0 0 14px rgba(215,61,61,.22); }
.map-preview { position: relative; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.map-preview img { width: 100%; display: block; }
.map-pin { position: absolute; width: 9px; height: 9px; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 50%; background: #eb554f; box-shadow: 0 1px 5px #000; }
.location-card > strong { font-size: 12px; }
.location-card > p { margin: 3px 0 15px; color: var(--muted); font-size: 9px; }
.zone-list { display: flex; flex-wrap: wrap; gap: 6px; }
.zone-list span { padding: 5px 8px; border: 1px solid var(--border); border-radius: 999px; color: #b9c5d3; background: #111a25; font-size: 10px; }
.coordinate-list { display: grid; gap: 6px; margin-top: 10px; }
.coordinate-list span {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 6px 8px; border: 1px solid var(--border-soft); border-radius: 8px;
  color: #c9d3df; background: #0d141d; font-size: 10px;
}
.coordinate-list strong { color: var(--gold); font-size: 10px; }
.source-card p { color: var(--muted); overflow-wrap: anywhere; font-size: 10px; }
.source-card code { color: #a8b7c8; }
.source-card a { color: var(--gold); font-size: 11px; }

.quality-0 { border-color: #64707e; }
.quality-1 { border-color: #bac4cd; }
.quality-2 { border-color: #31c554; box-shadow: 0 0 15px rgba(49,197,84,.08); }
.quality-3 { border-color: #3388ed; box-shadow: 0 0 15px rgba(51,136,237,.08); }
.quality-4 { border-color: #ad5ce4; box-shadow: 0 0 15px rgba(173,92,228,.1); }
.quality-5 { border-color: #f39833; box-shadow: 0 0 15px rgba(243,152,51,.1); }
.quality-0-text { color: #a6afb9; }
.quality-1-text { color: #f0f3f6; }
.quality-2-text { color: #44dd61; }
.quality-3-text { color: #4e9bf5; }
.quality-4-text { color: #bc6ef0; }
.quality-5-text { color: #ff9c38; }
.quality-6-text { color: #ead391; }

.favorites-page { min-height: calc(100vh - 150px); padding-bottom: 80px; }
.favorites-loading { display: flex; gap: 12px; align-items: center; color: var(--muted); }
.spinner { width: 19px; height: 19px; border: 2px solid #334155; border-top-color: var(--gold); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.centered-page { min-height: calc(100vh - 150px); display: grid; place-items: center; padding: 70px 0; }
.setup-card, .error-card { width: min(580px, 100%); padding: 45px; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); text-align: center; box-shadow: var(--shadow); }
.setup-icon { display: block; color: var(--gold); font-size: 50px; }
.setup-card pre { margin: 25px 0; padding: 18px; border: 1px solid var(--border); border-radius: 9px; color: #c4d2df; background: #090e15; text-align: left; }
.error-code { display: block; color: var(--gold); font: 800 70px/1 "Manrope", sans-serif; opacity: .8; }
.site-footer {
  min-height: 78px; display: flex; align-items: center;
  padding: 0 max(22px, calc((100% - 1400px) / 2)); border-top: 1px solid var(--border-soft);
  color: #667487; background: #080c12; font-size: 11px;
}
.footer-shell { width: 100%; display: flex; justify-content: space-between; gap: 18px; align-items: center; flex-wrap: wrap; }
.footer-left { display: inline-flex; gap: 15px; align-items: center; flex-wrap: wrap; }
.footer-brand { color: #b7c1ce; font: 700 13px "Manrope", sans-serif; }
.site-footer a:hover { color: var(--gold-bright); }
.site-footer span a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 800;
}

@media (max-width: 1050px) {
  .type-grid { grid-template-columns: repeat(2, 1fr); }
  .category-strip { grid-template-columns: repeat(3, 1fr); }
  .nav-shell { grid-template-columns: 150px 1fr auto; gap: 18px; }
  .detail-layout { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 780px) {
  .page-shell { width: min(100% - 26px, 1400px); }
  .site-header { height: auto; }
  .nav-shell { min-height: 68px; grid-template-columns: 1fr auto; }
  .header-search { grid-column: 1 / -1; grid-row: 2; margin-bottom: 10px; }
  .main-nav a:first-child { display: none; }
  .hero { min-height: 550px; }
  .hero h1 { font-size: 43px; }
  .hero-search { height: auto; flex-wrap: wrap; padding: 13px; }
  .hero-search input { min-height: 38px; }
  .hero-search > button { width: 100%; }
  .type-grid, .category-strip { grid-template-columns: 1fr; }
  .browse-layout { grid-template-columns: 1fr; }
  .filter-panel { display: none; position: static; }
  .filter-panel.open { display: block; }
  .filter-toggle { display: inline-flex; padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--panel); }
  .result-toolbar { align-items: start; flex-direction: column; padding-bottom: 12px; }
  .entity-card-link { align-items: start; }
  .entity-summary { display: none; }
  .detail-identity { padding: 30px 0; flex-wrap: wrap; }
  .detail-icon { width: 68px; height: 68px; }
  .detail-actions { width: 100%; margin-left: 0; }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-sidebar { grid-row: 1; }
  .relation-metadata { display: none; }
  .compact-links { grid-template-columns: 1fr; }
  .site-footer { padding: 20px; align-items: start; gap: 15px; flex-direction: column; }
  .footer-shell, .footer-left { align-items: start; flex-direction: column; gap: 10px; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 36px; }
  .type-grid { grid-template-columns: 1fr; }
  .entity-icon { width: 50px; height: 50px; }
  .entity-card { min-height: 90px; }
  .entity-meta { flex-wrap: wrap; gap: 4px; }
  .entity-meta span + span::before { display: none; }
  .pagination { gap: 7px; }
  .page-status { text-align: center; }
}