/* ── Item location section ── */
.section { margin-top: 6px; }
.section-label {
  font-size: 11px; color: #8a7a50; margin-bottom: 3px;
  display: flex; align-items: center; gap: 5px;
}
.section-rows  { display: flex; flex-direction: column; gap: 1px; }
.section-row   { color: #b0a888; line-height: 1.4; font-size: 11px; }
.section-row .sub { color: #666; font-size: 11px; }

/* ── Item location tags ── */
.tag { display: inline-block; border-radius: 3px; padding: 0 4px; font-size: 10px; margin-right: 3px; vertical-align: middle; }
.tag.market  { background: #1e3020; color: #60c080; border: 1px solid #2a5030; }
.tag.vendor  { background: #20201e; color: #c0b060; border: 1px solid #40381e; }
.tag.barter  { background: #20201e; color: #a080c0; border: 1px solid #38285a; }
.tag.duty    { background: #201820; color: #c070c0; border: 1px solid #502050; }
.tag.gc      { background: #1e2030; color: #6090d0; border: 1px solid #283860; }
.tag.craft   { background: #202020; color: #909090; border: 1px solid #383838; }
.tag.quest   { background: #201e10; color: #c0a040; border: 1px solid #4a3a10; }
.tag.achieve { background: #201818; color: #c06040; border: 1px solid #503020; }

/* ── Dye subtitle ── */
.m-name.has-sub, .item-name.has-sub, .fr-name.has-sub {
  display: flex; flex-direction: column; gap: 1px;
  overflow: visible; white-space: normal;
  -webkit-line-clamp: unset;
}
.item-sub { font-size: 10px; line-height: 1.2; }
.item-sub-family { color: #9a9080; }
.item-sub-sep { color: #555; }
.item-sub-spectrum { color: #7a6840; }

/* ── Othersite links ── */
.detail-links { display: flex; gap: 14px; padding: 8px 0 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.detail-link { display: inline-flex; align-items: center; gap: 5px; color: #6e9bc0; text-decoration: none; font-size: 12px; }
.detail-link:hover { color: #6e9bc0; text-decoration: underline; }
.detail-link img { width: 14px; height: 14px; border-radius: 2px; }

/* ── Shared page layout ── */
.page-header {
  width: 100%; background: #111; border-bottom: 1px solid #2a2a2a;
  padding: 18px 20px 22px; margin-bottom: 0;
}
.page-header-title { font-size: 24px; font-weight: bold; color: #f3ecd1; letter-spacing: 0.04em; margin-bottom: 4px; }
.page-header-subtitle { font-size: 13px; color: #666; }
.page-controls-bar { width: 100%; background: #111; border-bottom: 1px solid #2a2a2a; margin-bottom: 0; }
.page-controls-row { max-width: 1200px; padding: 14px 20px; }
.page-body { max-width: 1200px; padding: 20px; }

/* ── Discord Login ── */
.guest-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #2a1e0a; border: 1px solid #6a4f1a; border-radius: 6px;
  padding: 12px 16px; margin-bottom: 12px;
}
.guest-banner-text { flex: 1; font-size: 13px; color: #c8a060; min-width: 200px; }
.guest-banner-text strong { color: #e0b870; }
.btn-login {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 4px; font-size: 13px; font-weight: bold;
  cursor: pointer; border: 1px solid #7a5a20; background: #3a2a0a; color: #e0c070;
  text-decoration: none; white-space: nowrap; transition: background 0.12s, border-color 0.12s;
}
.btn-login:hover { background: #4a3818; border-color: #b08030; }

/* ── Stale / unavailable data notice ── */
.stale-notice {
  font-size: 12px; color: #888; padding: 12px 10px;
  font-style: italic; text-align: center; line-height: 1.5;
  border: 1px dashed #333; border-radius: 3px; margin: 6px 4px;
  background: #1c1c1c;
}