:root {
  --ink: #151511;
  --paper: #eeece5;
  --paper-deep: #e1ded5;
  --paper-soft: #f6f4ee;
  --line: rgba(32, 31, 24, 0.13);
  --line-strong: rgba(32, 31, 24, 0.24);
  --muted: #5b5850;
  --muted-dark: #4f4c44;
  --gold: #b79047;
  --gold-dark: #7c5a24;
  --teal-strong: #245c60;
  --red: #9d4437;
  --blue: #31558f;
  --green: #3c7f4a;
  --purple: #7d3b93;
  --shadow: 0 20px 50px rgba(34, 30, 20, 0.08);
  --shadow-small: 0 8px 20px rgba(34, 30, 20, 0.08);
  --radius: 18px;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --sans: "Manrope", system-ui, sans-serif;
  --display: "Playfair Display", Georgia, serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--ink); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
button, input, select { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 264px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 28px 18px 20px; color: #e8e4d7; background: radial-gradient(circle at 20% 5%, #2f2c25, transparent 34%), #151511; overflow: hidden; }
.sidebar::after { content: ""; position: absolute; inset: auto -40px -60px auto; width: 180px; height: 180px; border: 1px solid rgba(206, 176, 105, 0.18); border-radius: 50%; box-shadow: 0 0 0 26px rgba(206, 176, 105, 0.04), 0 0 0 52px rgba(206, 176, 105, 0.03); pointer-events: none; }
.brand-lockup { display: flex; align-items: center; gap: 12px; padding: 0 10px; flex-shrink: 0; }
.brand-mark { width: 44px; height: 44px; border: 1px solid rgba(220, 185, 107, 0.52); border-radius: 13px; overflow: hidden; background: #28251d; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.eyebrow { color: #a79b7e; font: 500 9px/1.3 var(--mono); letter-spacing: .16em; }
.brand-name { margin-top: 3px; font: 700 19px/1 var(--display); letter-spacing: -.02em; }
.sidebar-divider { height: 1px; margin: 27px 10px 19px; background: rgba(237, 228, 201, 0.12); flex-shrink: 0; }
.main-nav { display: grid; flex: 1 1 auto; gap: 5px; min-height: 0; padding-right: 3px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(207, 169, 90, .42) transparent; }
.main-nav::-webkit-scrollbar { width: 5px; }
.main-nav::-webkit-scrollbar-thumb { border-radius: 5px; background: rgba(207, 169, 90, .42); }
.main-nav::-webkit-scrollbar-track { background: transparent; }
.nav-item { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 11px; border: 1px solid transparent; border-radius: 11px; color: #aaa79d; background: transparent; text-align: left; font-size: 12px; transition: .18s ease; }
.nav-item:hover { color: #f0ebdd; background: rgba(255,255,255,.05); }
.nav-item.is-active { color: #f4eedc; border-color: rgba(207, 169, 90, .28); background: linear-gradient(90deg, rgba(180, 137, 58, .2), rgba(180, 137, 58, .04)); }
.nav-item.is-active::before { content: ""; position: absolute; left: -19px; width: 3px; height: 23px; border-radius: 0 3px 3px 0; background: #d6ab57; }
.nav-icon { width: 17px; color: #b9934e; font-size: 15px; text-align: center; }
.nav-count { margin-left: auto; color: #aaa69a; font: 10px var(--mono); }
.nav-count-group { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.nav-count-context { color: #aaa69a; font-size: 9px; }
.sidebar-foot { position: relative; z-index: 1; margin: auto 8px 0; flex-shrink: 0; color: #9a9488; font-size: 10px; line-height: 1.55; }
.status-dot { display: flex; align-items: center; gap: 7px; color: #aaa28e; font: 10px var(--mono); letter-spacing: .08em; }
.status-dot span { width: 6px; height: 6px; border-radius: 50%; background: #83b875; box-shadow: 0 0 0 4px rgba(131, 184, 117, .12); }
.version-chip { display: inline-flex; margin-top: 10px; padding: 6px 8px; border: 1px solid rgba(239, 227, 195, .13); border-radius: 6px; color: #aaa18d; font: 9px var(--mono); }

.main-content { min-width: 0; background: var(--paper); }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 0 42px; border-bottom: 1px solid var(--line); background: rgba(238, 236, 229, .9); backdrop-filter: blur(16px); }
.breadcrumb { display: flex; align-items: center; gap: 9px; color: var(--muted); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.breadcrumb b { color: #625f57; font-weight: 400; }
.breadcrumb span:last-child { color: var(--gold-dark); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.global-search { display: flex; align-items: center; gap: 8px; width: min(310px, 36vw); padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.42); color: var(--muted); }
.global-search input { min-width: 0; flex: 1; border: 0; outline: none; background: transparent; color: var(--ink); font-size: 11px; }
.global-search input::placeholder { color: #5b5850; }
kbd { padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; color: #625f57; font: 9px var(--mono); }
.icon-button { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; color: var(--gold-dark); background: transparent; font: 500 13px var(--mono); }
.icon-button:hover { background: var(--paper-soft); }
.page-wrap { max-width: 1460px; margin: 0 auto; padding: 42px clamp(22px, 4vw, 66px) 72px; }

.loading-state { min-height: 62vh; display: grid; place-items: center; align-content: center; gap: 18px; color: var(--muted); font-size: 12px; }
.loading-orbit { width: 30px; height: 30px; border: 2px solid var(--paper-deep); border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.section-kicker { display: flex; align-items: center; gap: 10px; color: var(--gold-dark); font: 500 10px var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.section-kicker::before { content: ""; width: 23px; height: 1px; background: var(--gold); }
h1, h2, h3, p { margin: 0; }
.hero { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(260px, .72fr); gap: 40px; align-items: end; min-height: 306px; padding: 16px 0 37px; border-bottom: 1px solid var(--line); }
.hero h1 { max-width: 760px; margin: 16px 0 14px; font: 800 clamp(38px, 5.5vw, 78px)/.98 var(--display); letter-spacing: -.055em; }
.hero h1 em { color: var(--gold-dark); font-style: normal; }
.hero-copy { max-width: 630px; color: var(--muted-dark); font-size: 13px; line-height: 1.75; }
.hero-note { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(255,255,255,.52), rgba(226,220,204,.3)); box-shadow: var(--shadow-small); }
.hero-note .eyebrow { color: #62563e; }
.hero-note-top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.hero-note img { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; border: 1px solid rgba(147, 106, 40, .28); }
.hero-note h3 { margin-top: 2px; font: 700 17px var(--display); }
.hero-note p { margin-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.hero-note-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font: 10px var(--mono); }

.badge { display: inline-flex; align-items: center; width: fit-content; padding: 4px 7px; border-radius: 5px; font: 500 9px var(--mono); letter-spacing: .02em; white-space: nowrap; }
.badge-confirmed { color: #356b43; background: #dcebdd; }
.badge-inference { color: #7c5b19; background: #eee2bd; }
.badge-hypothesis { color: #79464a; background: #efd9d4; }
.badge-unresolved { color: #4e4b43; background: #dcdad3; }
.badge-show { color: #214b61; background: #d6e5ea; }
.badge-reference { color: #3d5266; background: #dde7f0; }
.badge-na { color: #5c5364; background: #e6e0eb; }
.badge-conflict { color: #7d3c31; background: #f0d6cf; }
.badge-q { color: #fff; border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.q-container-1 { background: var(--green); } .q-container-2 { background: var(--blue); } .q-container-3 { background: var(--purple); } .q-container-4 { background: var(--gold-dark); } .q-container-5 { background: var(--red); }
.q-item-1, .q-item-2, .q-item-3 { color: #4f3f25; background: #ddc093; }
.q-item-4 { background: #347947; } .q-item-5 { background: #246d9e; } .q-item-6 { background: #933195; } .q-item-7 { color: #3f3214; background: #d9ba27; } .q-item-8 { color: #fff; background: #c4380a; }

.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 24px 0 37px; }
.metric-card { min-height: 98px; padding: 17px 16px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.3); }
.metric-card .metric-label { color: var(--muted); font-size: 10px; }
.metric-card strong { display: block; margin-top: 8px; font: 700 28px var(--display); }
.metric-card small { color: var(--muted); font-size: 9px; }
.metric-card.accent { color: #f5eddb; border-color: #624e29; background: #28251d; }
.metric-card.accent .metric-label, .metric-card.accent small { color: #bdad88; }

.overview-reader-panel, .overview-coverage-panel { margin: 0 0 24px; padding: 20px 21px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.27); }
.overview-coverage-panel { background: rgba(255,255,255,.2); }
.overview-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.overview-panel-head h2 { margin-top: 5px; color: var(--ink); font: 700 21px var(--display); }
.overview-panel-head p { max-width: 760px; margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.overview-panel-head > .badge, .overview-panel-head > .badge-stack { flex: 0 0 auto; margin-top: 2px; }
.overview-reader-grid, .overview-coverage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
.overview-reader-card, .overview-coverage-card { min-width: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.33); }
.overview-reader-card:hover, .overview-coverage-card:hover { border-color: rgba(183,144,71,.52); background: rgba(255,255,255,.48); }
.overview-reader-kicker { display: block; color: var(--gold-dark); font: 9px var(--mono); letter-spacing: .06em; }
.overview-reader-card h3 { margin-top: 8px; color: var(--ink); font-size: 13px; line-height: 1.35; }
.overview-reader-card p { min-height: 47px; margin-top: 7px; color: var(--muted-dark); font-size: 10px; line-height: 1.55; }
.overview-reader-card .text-link, .overview-coverage-card .text-link { margin-top: 10px; }
.overview-coverage-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.overview-coverage-card-head .badge-stack { flex: 0 0 auto; }
.overview-coverage-card > strong { display: block; margin-top: 10px; color: var(--gold-dark); font: 700 25px var(--display); }
.overview-coverage-card > span:not(.overview-reader-kicker):not(.badge-stack) { display: block; margin-top: 2px; color: var(--muted-dark); font-size: 10px; }
.overview-coverage-card > p { min-height: 44px; margin-top: 8px; color: var(--muted); font: 9px/1.5 var(--mono); }

.home-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 24px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.27); overflow: hidden; }
.panel-head { display: flex; justify-content: space-between; gap: 16px; align-items: end; padding: 20px 21px 16px; border-bottom: 1px solid var(--line); }
.panel-head h2 { font: 700 20px var(--display); }
.panel-head p { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.panel-body { padding: 20px 21px; }
.quality-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.quality-card { position: relative; min-height: 136px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper-soft); overflow: hidden; }
.quality-card::after { content: attr(data-tier); position: absolute; right: -9px; bottom: -27px; color: rgba(43, 37, 23, .06); font: 800 88px var(--display); }
.quality-card .quality-dot { width: 9px; height: 9px; margin-bottom: 21px; border-radius: 50%; background: var(--quality); box-shadow: 0 0 0 5px color-mix(in srgb, var(--quality) 15%, transparent); }
.quality-card strong { display: block; font: 700 20px var(--display); }
.quality-card span { color: var(--muted); font-size: 10px; }
.quality-rate { margin-top: 17px; color: var(--gold-dark); font: 9px var(--mono); }
.featured-card { min-height: 100%; padding: 22px; color: #eee7d6; border-radius: var(--radius); background-color: #1d1b16; background: radial-gradient(circle at 86% 8%, rgba(181, 139, 60, .22), transparent 32%), linear-gradient(145deg, #242219, #171713); box-shadow: var(--shadow); }
.featured-card .section-kicker { color: #c9a76c; }
.featured-card h2 { margin-top: 15px; font: 700 28px/1.05 var(--display); }
.featured-card .alias { margin-top: 7px; color: #aa9d81; font: 10px var(--mono); }
.featured-card p { margin-top: 18px; color: #aca696; font-size: 11px; line-height: 1.65; }
.featured-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 23px; }
.featured-stat { padding: 11px; border: 1px solid rgba(236, 219, 172, .15); border-radius: 9px; background: rgba(255,255,255,.045); }
.featured-stat span { display: block; color: #b7a98c; font: 9px var(--mono); }
.featured-stat strong { display: block; margin-top: 4px; color: #e1c47e; font: 600 15px var(--mono); }
.text-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 22px; padding: 9px 0; border: 0; color: var(--gold-dark); background: transparent; font-size: 11px; }
.text-link:hover { color: var(--ink); }
.featured-card .text-link { color: #dfbd73; }
.featured-card .text-link:hover { color: white; }

.section-header { display: flex; align-items: end; justify-content: space-between; gap: 25px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.section-header h1 { margin-top: 10px; font: 700 clamp(30px, 4vw, 52px)/1 var(--display); letter-spacing: -.04em; }
.section-header p { max-width: 540px; margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.section-actions { display: flex; align-items: center; gap: 8px; }
.page-reading-brief { margin: 16px 0 20px; border: 1px solid rgba(173, 139, 71, .32); border-radius: 12px; background: linear-gradient(135deg, rgba(244, 239, 224, .92), rgba(233, 227, 211, .7)); overflow: hidden; }
.page-reading-brief summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 15px; color: var(--ink); cursor: pointer; list-style: none; }
.page-reading-brief summary::-webkit-details-marker { display: none; }
.page-reading-brief summary::before { content: "↳"; flex: 0 0 auto; color: var(--gold-dark); font: 700 15px var(--mono); }
.page-reading-brief[open] summary::before { content: "↓"; }
.page-reading-brief summary > span:first-child { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.page-reading-brief .section-kicker { font-size: 9px; }
.page-reading-brief summary strong { font-size: 12px; line-height: 1.45; }
.page-reading-toggle { flex: 0 0 auto; color: var(--gold-dark); font: 9px var(--mono); }
.page-reading-brief[open] .page-reading-toggle { font-size: 0; }
.page-reading-brief[open] .page-reading-toggle::after { content: "Thu gọn"; font-size: 9px; }
.page-reading-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 15px 15px 45px; }
.page-reading-grid > div { min-width: 0; padding: 10px 11px; border: 1px solid rgba(173, 139, 71, .22); border-radius: 8px; background: rgba(255, 255, 255, .42); }
.page-reading-label { display: block; color: #6f5623; font: 600 9px var(--mono); letter-spacing: .08em; }
.page-reading-grid p { margin-top: 5px; color: #4f4c44; font-size: 10px; line-height: 1.55; }
.page-reading-steps { margin: 6px 0 0; padding-left: 20px; color: #4f4c44; font-size: 10px; line-height: 1.55; }
.page-reading-steps li { padding-left: 2px; }
.page-reading-steps li + li { margin-top: 3px; }
.page-reading-steps li::marker { color: var(--gold-dark); font: 700 10px var(--mono); }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 14px; }
.filter-input, .filter-select { min-height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; outline: none; color: var(--ink); background: rgba(255,255,255,.38); font-size: 11px; }
.filter-input { min-width: 220px; flex: 1; }
.filter-input:focus, .filter-select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(183,144,71,.1); }
.results-note { margin: 7px 0 12px; color: var(--muted); font: 10px var(--mono); }
.pagination { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.pagination-button { min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted-dark); background: rgba(255,255,255,.38); font: 10px var(--mono); }
.pagination-button:hover:not(:disabled), .pagination-button.is-current { color: #4c3511; border-color: rgba(183,144,71,.62); background: rgba(183,144,71,.16); }
.pagination-button:disabled { cursor: not-allowed; opacity: .45; }
.pagination-total { color: var(--muted); font: 9px var(--mono); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.22); }
table { width: 100%; min-width: 760px; border-collapse: collapse; }
th { padding: 12px 14px; border-bottom: 1px solid var(--line-strong); color: var(--muted); text-align: left; font: 500 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
td { padding: 13px 14px; border-bottom: 1px solid var(--line); color: var(--muted-dark); font-size: 11px; vertical-align: middle; }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: rgba(255, 255, 255, .58); }
tbody tr:last-child td { border-bottom: 0; }
.click-row { cursor: pointer; }
.id-code, .mono { color: var(--gold-dark); font: 10px var(--mono); }
.name-cell { color: var(--ink); font-weight: 700; }
.sub-cell { display: block; margin-top: 3px; color: var(--muted); font: 10px var(--mono); font-weight: 400; }
.unresolved-text { color: #8b4a3e; }
.content-summary { display: inline-block; padding: 3px 6px; border-radius: 5px; font: 9px var(--mono); }
.content-summary.has-content { color: #2f5f36; background: #e1eee2; }
.content-summary.no-content { color: #7f3229; background: #f4e1dd; }
.item-content-preview { display: grid; gap: 6px; min-width: 0; color: var(--muted-dark); font-size: 11px; line-height: 1.5; }
.item-content-preview-line { min-width: 0; padding-left: 7px; border-left: 2px solid rgba(60, 127, 74, .42); overflow-wrap: anywhere; }
.item-content-preview-line > span:last-child { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.item-content-preview-label { margin-right: 5px; color: #5d4b2d; font: 600 9px/1.35 var(--mono); letter-spacing: .02em; text-transform: uppercase; }
.item-content-preview-line.content-secondary { border-left-color: rgba(183, 144, 71, .72); }
.item-content-preview-line.content-secondary .item-content-preview-label { color: #805a24; }
.item-content-preview-line.content-untranslated { border-left-color: rgba(183, 144, 71, .92); background: rgba(183, 144, 71, .06); }
.item-content-preview-line.content-untranslated .item-content-preview-label { color: #76531c; }
.item-content-preview-line.content-lore { border-left-color: rgba(125, 59, 147, .38); }
.item-content-preview-line.content-lore .item-content-preview-label { color: #70457c; }
.item-content-preview-empty { padding: 5px 7px; border-radius: 5px; color: #7f3229; background: #f4e1dd; font: 10px/1.5 var(--mono); }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.empty-state { padding: 54px 20px; color: var(--muted); text-align: center; font-size: 12px; }
.runtime-error-state { min-height: 62vh; display: grid; place-items: center; align-content: center; gap: 14px; }
.runtime-error-state h2 { color: var(--ink); font: 700 25px/1.2 var(--display); }
.runtime-error-state p { max-width: 620px; line-height: 1.8; }
.runtime-error-link { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border: 1px solid rgba(183,144,71,.65); border-radius: 7px; color: #4c3511; background: rgba(183,144,71,.14); font: 600 11px var(--sans); text-decoration: none; cursor: pointer; }
.runtime-error-link:hover { background: rgba(183,144,71,.24); }

.subnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 24px 0 13px; }
.subnav button { padding: 8px 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted-dark); background: transparent; font-size: 10px; }
.subnav button:hover, .subnav button.is-active { color: #4c3511; border-color: rgba(183,144,71,.55); background: rgba(183,144,71,.14); }
.interaction-catalog-table { min-width: 1180px; }
.interaction-catalog-table td { vertical-align: top; }
.interaction-catalog-table td:first-child { min-width: 240px; }
.interaction-catalog-table td:nth-child(3) { min-width: 170px; }
.interaction-catalog-table td:nth-child(4) { min-width: 340px; }
.interaction-catalog-table td:nth-child(5) { min-width: 300px; }
.interaction-type-line { margin-bottom: 5px; }
.interaction-asset-cell { display: grid; justify-items: start; gap: 6px; min-width: 116px; }
.interaction-asset-thumb { width: 48px; height: 48px; border: 1px solid rgba(32, 31, 24, .16); border-radius: 9px; object-fit: contain; background: #fbfaf6; }
.interaction-reference-media { display: flex; align-items: center; gap: 4px; min-height: 48px; }
.interaction-reference-thumb { width: 48px; height: 48px; border: 1px solid rgba(183, 144, 71, .42); border-radius: 9px; object-fit: contain; background: #292821; }
.interaction-asset-cell .interaction-reference-media ~ .sub-cell { max-width: 116px; font-size: 9px; line-height: 1.35; }
.interaction-asset-cell .image-placeholder { display: grid; place-items: center; color: #4f4b43; font: 11px var(--mono); }
.interaction-event-list, .interaction-inventory-list { display: grid; gap: 7px; }
.interaction-event-line, .interaction-inventory-line { display: grid; gap: 2px; padding: 7px 8px; border-left: 2px solid rgba(183,144,71,.52); background: rgba(183,144,71,.07); }
.interaction-event-line strong { color: var(--ink); font-size: 11px; }
.interaction-inventory-line small { color: var(--muted); font: 10px/1.4 var(--mono); }
.interaction-link-list { display: flex; flex-wrap: wrap; gap: 4px 9px; margin-top: 4px; }
.interaction-link-list .inline-link { display: inline; padding: 0; text-align: left; }
.interaction-rules-panel { margin: 18px 0; }
.interaction-rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.interaction-rule-card { min-width: 0; display: grid; gap: 7px; padding: 12px; border: 1px solid rgba(183,144,71,.32); border-radius: 10px; background: rgba(255,250,239,.62); }
.interaction-rule-card-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.interaction-rule-card-head > div { min-width: 0; display: grid; gap: 2px; }
.interaction-rule-card-head strong { color: var(--ink); font: 700 17px var(--display); overflow-wrap: anywhere; }
.interaction-rule-icon, .interaction-rule-mini-icon { width: 42px; height: 42px; flex: 0 0 auto; object-fit: contain; border: 1px solid rgba(183,144,71,.42); border-radius: 8px; background: #292821; }
.interaction-rule-mini-icon { width: 30px; height: 30px; }
.interaction-rule-card .content-status { display: flex; flex-wrap: wrap; gap: 4px; }
.interaction-rule-callout { margin-top: 12px; }
.interaction-rule-details { margin-top: 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.42); overflow: hidden; }
.interaction-rule-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; cursor: pointer; list-style: none; color: var(--gold-dark); font: 10px var(--mono); }
.interaction-rule-details > summary::-webkit-details-marker { display: none; }
.interaction-rule-details > summary strong { color: var(--ink); font: 700 14px var(--display); }
.interaction-rule-details > summary span { color: var(--muted); text-align: right; }
.interaction-rule-details[open] > summary { border-bottom: 1px solid var(--line); background: rgba(183,144,71,.06); }
.interaction-rule-details .table-wrap { margin: 0; border: 0; border-radius: 0; }
.interaction-rule-details table { min-width: 720px; }
.interaction-rule-source { margin-top: 11px; overflow-wrap: anywhere; }
.scope-note { margin: -4px 0 14px; padding: 9px 11px; border-left: 2px solid rgba(183,144,71,.6); color: var(--muted-dark); background: rgba(183,144,71,.08); font: 10px/1.55 var(--sans); }
.scope-note b { color: var(--ink); }
.item-source-tabs { align-items: center; margin-top: -4px; }
.subnav-label { padding: 0 3px 0 2px; color: var(--muted); font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.source-filter-note { margin: -5px 0 14px; color: var(--muted); font: 9px/1.55 var(--mono); }
.item-coverage { margin: 22px 0 16px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.26); }
.item-coverage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.item-coverage-grid article { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.32); }
.item-coverage-grid strong { display: block; color: var(--ink); font-size: 11px; line-height: 1.35; }
.item-coverage-grid b { display: block; margin-top: 9px; color: var(--gold-dark); font: 700 24px var(--display); }
.item-coverage-grid article > span:not(.badge-stack) { display: block; min-height: 30px; margin-top: 2px; color: var(--muted-dark); font-size: 10px; line-height: 1.45; }
.item-coverage-grid .badge-stack { display: block; margin-top: 8px; }
.item-source-coverage { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }
.item-source-coverage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.item-source-coverage-card { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted-dark); text-align: left; background: rgba(255,255,255,.32); cursor: pointer; }
.item-source-coverage-card:hover, .item-source-coverage-card.is-active { border-color: rgba(183,144,71,.62); background: rgba(183,144,71,.12); }
.item-source-coverage-card strong { display: block; color: var(--ink); font-size: 11px; line-height: 1.35; }
.item-source-coverage-card b { display: block; margin-top: 8px; color: var(--gold-dark); font: 700 22px var(--display); }
.item-source-coverage-card span { display: block; min-height: 43px; margin-top: 2px; color: var(--muted-dark); font-size: 10px; line-height: 1.45; }
.item-source-coverage-card small { display: block; margin-top: 8px; color: var(--gold-dark); font: 9px var(--mono); }
.loot-pool-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 22px 0 2px; }
.loot-pool-summary article { min-width: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.26); }
.loot-pool-summary strong { display: block; margin-top: 8px; color: var(--gold-dark); font: 700 25px var(--display); overflow-wrap: anywhere; }
.loot-pool-summary small { display: block; min-height: 28px; margin-top: 2px; color: var(--muted-dark); font-size: 10px; line-height: 1.45; }
.loot-pool-table { min-width: 1240px; }
.pool-source-preview { display: block; color: var(--muted-dark); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.pool-source-preview b { color: var(--gold-dark); }
.loot-pool-source-item { background: rgba(64,102,96,.045); }
.loot-pool-source-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; min-width: 0; }
.loot-pool-source-head > div:first-child { min-width: 0; flex: 1; }
.loot-pool-source-head > .badge-stack { flex: 0 0 auto; }
.loot-pool-source-item .loot-chain-consumer-copy strong,
.loot-pool-source-item .loot-chain-consumer-copy small { display: block; overflow-wrap: anywhere; }
.loot-pool-source-item .loot-chain-consumer-copy strong { font-size: 11px; line-height: 1.35; }
.loot-pool-source-item .loot-chain-consumer-copy small { margin-top: 2px; line-height: 1.35; }
.loot-pool-unresolved { margin-top: 8px; }
.loot-chain-table { min-width: 1320px; }
.loot-mode-table { min-width: 1180px; }
.loot-mode-table th:nth-child(1), .loot-mode-table td:nth-child(1) { width: 90px; }
.loot-mode-table th:nth-child(2), .loot-mode-table td:nth-child(2) { width: 130px; }
.loot-mode-table th:nth-child(3), .loot-mode-table td:nth-child(3) { width: 250px; }
.loot-mode-table th:nth-child(4), .loot-mode-table td:nth-child(4) { width: 520px; }
.loot-mode-table th:nth-child(5), .loot-mode-table td:nth-child(5) { width: 190px; }
.loot-chain-table td { vertical-align: top; }
.loot-chain-metrics { margin-top: 22px; }
.loot-chain-branch-list, .loot-chain-quality-list, .loot-chain-consumers { display: grid; gap: 6px; }
.loot-chain-branch { min-width: 210px; padding: 8px 9px; border: 1px solid rgba(183,144,71,.24); border-radius: 8px; background: rgba(183,144,71,.055); }
.loot-chain-branch.is-compact { min-width: 240px; }
.loot-chain-branch-head, .loot-chain-extra, .loot-chain-candidate { display: flex; align-items: start; justify-content: space-between; gap: 8px; min-width: 0; }
.loot-chain-branch-head strong { color: var(--ink); font-size: 10px; }
.loot-chain-branch-detail { display: grid; gap: 5px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(35,34,29,.14); }
.loot-chain-quality { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; }
.loot-chain-quality-list > div { min-width: 180px; }
.loot-chain-probability { margin-top: 7px; border-top: 1px dashed rgba(35,34,29,.16); }
.loot-chain-probability > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0 3px; color: var(--ink); cursor: pointer; list-style: none; }
.loot-chain-probability > summary::-webkit-details-marker { display: none; }
.loot-chain-probability > summary::before { content: "＋"; width: 13px; color: var(--gold-dark); font: 11px var(--mono); }
.loot-chain-probability[open] > summary::before { content: "−"; }
.loot-chain-probability > summary > span:first-of-type { display: grid; gap: 1px; min-width: 0; flex: 1; }
.loot-chain-probability > summary strong { font-size: 11px; }
.loot-chain-probability > summary small { color: var(--muted); font: 10px/1.35 var(--mono); }
.loot-chain-probability-list { display: grid; gap: 4px; padding: 4px 0 2px 13px; }
.loot-chain-probability-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px; border: 1px solid rgba(183,144,71,.18); border-radius: 6px; background: rgba(183,144,71,.045); }
.loot-chain-probability-row > div { display: flex; align-items: center; gap: 5px; min-width: 0; }
.loot-chain-probability-row .sub-cell { margin: 0; font-size: 10px; }
.loot-chain-probability-row > strong { color: var(--gold-dark); font-size: 11px; white-space: nowrap; }
.loot-chain-probability .compact-callout { margin-top: 6px; padding: 7px 8px; font-size: 11px; line-height: 1.5; }
.container-static-chain, .boss-static-chain, .map-drop-static-chain { display: grid; gap: 5px; min-width: 0; margin-top: 7px; padding: 6px 7px; border-left: 2px solid rgba(183,144,71,.42); border-radius: 0 7px 7px 0; background: rgba(183,144,71,.055); }
.container-static-chain > .sub-cell, .boss-static-chain > .sub-cell, .map-drop-static-chain > .sub-cell { color: var(--gold-dark); font-weight: 700; line-height: 1.35; }
.container-chain-item { display: grid; gap: 3px; min-width: 0; padding-top: 4px; border-top: 1px dashed rgba(35,34,29,.14); }
.container-chain-item:first-of-type { padding-top: 0; border-top: 0; }
.container-chain-item > .mono { color: var(--ink); overflow-wrap: anywhere; }
.container-loot-gap { display: grid; gap: 3px; margin-top: 3px; padding-top: 4px; border-top: 1px dashed rgba(139,74,62,.25); }
.container-loot-gap .sub-cell { display: block; overflow-wrap: anywhere; }
.container-chain-branch { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 6px; min-width: 0; padding: 3px 0 0 8px; }
.container-chain-branch > .sub-cell, .container-chain-branch > .loot-chain-quality { grid-column: 1 / -1; }
.container-chain-branch strong { color: var(--ink); font: 700 9px var(--mono); }
.container-chain-branch .sub-cell { overflow-wrap: anywhere; }
.container-static-chain > .muted { overflow-wrap: anywhere; }
.loot-chain-consumers > span, .loot-chain-consumers > div { display: block; min-width: 170px; padding: 5px 6px; border-left: 2px solid rgba(183,144,71,.38); }
.loot-chain-consumers > span.click-row:hover, .loot-chain-consumers > div.click-row:hover { background: rgba(183,144,71,.1); }
.loot-chain-consumers strong, .loot-chain-consumers small { display: block; overflow-wrap: anywhere; }
.loot-chain-consumers strong { color: var(--ink); font-size: 10px; line-height: 1.35; }
.loot-chain-consumer-main { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 7px; align-items: start; }
.loot-chain-consumer-copy { min-width: 0; }
.loot-chain-consumer-media { display: grid; place-items: start center; min-width: 0; }
.loot-chain-consumer-media .container-map-media { display: grid; gap: 2px; justify-items: center; }
.loot-chain-consumer-media .container-media-caption { font-size: 7px; }
.loot-chain-consumer-thumb { width: 38px; height: 38px; object-fit: cover; border: 1px solid rgba(32,31,24,.14); border-radius: 6px; background: var(--paper-deep); }
.loot-chain-consumer-context { line-height: 1.35; }
.loot-mode-usage-summary { display: grid; gap: 2px; margin-bottom: 6px; }
.loot-mode-usage-list { display: grid; gap: 6px; }
.loot-mode-usage-item { display: grid; gap: 5px; padding: 6px 7px; border-left: 2px solid rgba(64,102,96,.38); background: rgba(64,102,96,.045); border-radius: 0 7px 7px 0; }
.loot-mode-usage-id { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.loot-mode-usage-id > .click-row { color: var(--ink); font-weight: 700; }
.loot-mode-source-list { display: grid; gap: 4px; padding-left: 8px; }
.loot-mode-source { display: block; min-width: 0; padding: 4px 5px; border-left: 1px solid rgba(183,144,71,.36); border-radius: 0 5px 5px 0; }
.loot-mode-source:hover { background: rgba(183,144,71,.1); }
.loot-mode-source-main { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; align-items: start; }
.loot-mode-source-copy { min-width: 0; }
.loot-mode-source-copy strong, .loot-mode-source-copy small { display: block; overflow-wrap: anywhere; }
.loot-mode-source-copy strong { color: var(--ink); font-size: 10px; line-height: 1.3; }
.loot-mode-source-copy small { font-size: 9px; line-height: 1.35; }
.loot-mode-source-media { display: grid; place-items: start center; min-width: 0; }
.loot-mode-source-media .loot-chain-consumer-thumb { width: 32px; height: 32px; }
.loot-mode-more { margin-top: 7px; border-top: 1px dashed rgba(35,34,29,.16); padding-top: 6px; }
.loot-mode-more summary { cursor: pointer; color: var(--teal-strong); font-size: 10px; font-weight: 700; }
.loot-mode-more > .loot-mode-usage-list { margin-top: 6px; }
.secondary-mode-research { margin-top: 18px; padding: 18px; border: 1px solid rgba(183,144,71,.42); border-radius: 14px; background: linear-gradient(135deg, rgba(255,250,239,.86), rgba(235,242,235,.72)); }
.secondary-mode-research-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.secondary-mode-research-head h2 { margin-top: 6px; color: var(--ink); font: 700 25px var(--display); }
.secondary-mode-research-head p { max-width: 820px; margin-top: 8px; color: var(--muted-dark); font-size: 11px; line-height: 1.65; }
.secondary-mode-research-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.secondary-mode-summary { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 14px; color: var(--muted-dark); font: 10px/1.5 var(--mono); }
.secondary-mode-summary span { padding: 5px 7px; border: 1px solid rgba(64,102,96,.18); border-radius: 6px; background: rgba(255,255,255,.42); }
.secondary-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 13px; }
.secondary-mode-card { min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.48); overflow: hidden; }
.secondary-mode-card > summary { display: flex; align-items: start; justify-content: space-between; gap: 10px; padding: 12px; cursor: pointer; list-style: none; }
.secondary-mode-card > summary::-webkit-details-marker, .secondary-mode-comparison > summary::-webkit-details-marker { display: none; }
.secondary-mode-card > summary::before, .secondary-mode-comparison > summary::before { content: "＋"; flex: 0 0 auto; color: var(--gold-dark); font: 12px var(--mono); }
.secondary-mode-card[open] > summary::before, .secondary-mode-comparison[open] > summary::before { content: "−"; }
.secondary-mode-card > summary:hover, .secondary-mode-comparison > summary:hover { background: rgba(183,144,71,.08); }
.secondary-mode-card-title { display: grid; gap: 3px; min-width: 0; flex: 1; }
.secondary-mode-card-title strong { color: var(--ink); font: 700 17px var(--display); overflow-wrap: anywhere; }
.secondary-mode-card-title small { color: var(--muted); font: 9px var(--mono); overflow-wrap: anywhere; }
.secondary-mode-card-title em { color: var(--teal-strong); font-size: 10px; line-height: 1.4; font-style: normal; overflow-wrap: anywhere; }
.secondary-mode-card-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.secondary-mode-card-body { padding: 0 12px 13px; }
.secondary-mode-banner { display: grid; gap: 5px; margin-bottom: 10px; }
.secondary-mode-banner img { width: 100%; max-height: 100px; object-fit: cover; border: 1px solid rgba(183,144,71,.3); border-radius: 7px; }
.secondary-mode-banner .asset-open-link { justify-self: start; }
.secondary-mode-description { color: var(--muted-dark); font-size: 10px; line-height: 1.6; }
.secondary-mode-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 11px; }
.secondary-mode-stat { min-width: 0; padding: 7px; border: 1px solid rgba(35,34,29,.11); border-radius: 7px; background: rgba(255,255,255,.46); }
.secondary-mode-stat b, .secondary-mode-stat span { display: block; overflow-wrap: anywhere; }
.secondary-mode-stat b { color: var(--gold-dark); font: 9px var(--mono); }
.secondary-mode-stat span { margin-top: 3px; color: var(--muted-dark); font-size: 10px; line-height: 1.45; }
.secondary-mode-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.secondary-mode-check { min-width: 0; padding: 8px; border: 1px solid rgba(183,144,71,.24); border-radius: 7px; background: rgba(255,250,239,.66); }
.secondary-mode-check > b { display: block; color: var(--ink); font-size: 10px; }
.secondary-mode-level-list, .secondary-mode-raw-list { display: grid; gap: 5px; margin-top: 7px; }
.secondary-mode-level, .secondary-mode-raw-list > div { display: grid; gap: 2px; min-width: 0; padding: 6px; border-left: 2px solid rgba(64,102,96,.38); background: rgba(64,102,96,.06); }
.secondary-mode-level strong, .secondary-mode-raw-list span { color: var(--ink); font-size: 10px; overflow-wrap: anywhere; }
.secondary-mode-level small, .secondary-mode-raw-list small { color: var(--muted); font: 9px/1.4 var(--mono); overflow-wrap: anywhere; }
.secondary-mode-raw-list > div { border-left-color: rgba(183,144,71,.52); background: rgba(183,144,71,.07); }
.secondary-mode-highlights { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line-strong); color: var(--muted-dark); font-size: 10px; line-height: 1.5; }
.secondary-mode-highlights ul { display: grid; gap: 4px; margin: 6px 0 0 15px; padding: 0; }
.secondary-mode-foot { display: grid; gap: 4px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--muted-dark); font: 9px/1.5 var(--mono); overflow-wrap: anywhere; }
.secondary-mode-foot b { color: var(--gold-dark); }
.secondary-mode-card-body > code { display: block; margin-top: 9px; color: var(--muted); font: 9px/1.45 var(--mono); overflow-wrap: anywhere; }
.secondary-mode-comparison { margin-top: 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.36); overflow: hidden; }
.secondary-mode-comparison > summary { display: flex; align-items: center; gap: 8px; padding: 11px 12px; cursor: pointer; list-style: none; color: var(--gold-dark); font: 10px var(--mono); }
.secondary-mode-comparison > summary strong { color: var(--ink); font-size: 13px; }
.secondary-mode-comparison > summary span { margin-left: auto; color: var(--muted); font-size: 9px; }
.secondary-mode-comparison .table-wrap { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.secondary-mode-comparison table { min-width: 850px; }
.secondary-mode-comparison td:first-child { min-width: 180px; }
.secondary-mode-comparison td:first-child strong, .secondary-mode-comparison td:first-child small { display: block; }
.secondary-mode-comparison td:first-child small { margin-top: 3px; color: var(--muted); font: 9px/1.4 var(--mono); }
.secondary-mode-callout { margin-top: 10px; font-size: 10px; }
.mission-loot-index-context-list { display: grid; gap: 7px; }
.mission-loot-index-context { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 7px; align-items: start; margin-top: 5px; padding: 5px 6px; border-left: 2px solid rgba(64,102,96,.38); background: rgba(64,102,96,.055); border-radius: 0 6px 6px 0; }
.mission-loot-index-media { display: grid; gap: 2px; justify-items: center; }
.mission-map-thumb { width: 38px; height: 30px; object-fit: cover; border: 1px solid rgba(32,31,24,.14); border-radius: 5px; }
.mission-loot-index-media small { font-size: 7px; color: var(--muted); }
.mission-loot-index-copy { min-width: 0; display: grid; gap: 2px; }
.mission-loot-index-copy strong { color: var(--ink); }
.mission-loot-index-empty { display: block; margin-top: 4px; }
.raw-english { color: var(--muted-dark); font-style: italic; }
.raw-english .field-label { color: var(--muted); font-style: normal; }
.loot-chain-extra, .loot-chain-candidate { display: grid; justify-content: stretch; gap: 4px; margin-bottom: 6px; }
.loot-chain-extra:last-child, .loot-chain-candidate:last-child { margin-bottom: 0; }
.loot-chain-extra .inline-item-link, .loot-chain-candidate .inline-item-link { max-width: 190px; }
.loot-chain-extra .inline-item-link strong, .loot-chain-candidate .inline-item-link strong { max-width: 145px; }
.drawer-subheading { margin: 15px 0 8px; color: var(--gold-dark); font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.loot-chain-all-candidates { margin-top: 10px; }
.loot-chain-all-candidates .drawer-list { max-height: 420px; overflow: auto; }
.research-guide-warning { margin-top: 20px; color: #403a2d; }
.research-guide-warning .badge, .research-guide-card-head .badge, .research-guide-subsection-head .badge { margin-left: 6px; vertical-align: middle; }
.research-guide-section { margin-top: 24px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.28); }
.research-guide-section-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.research-guide-section-head h2 { margin-top: 7px; color: var(--ink); font: 700 24px var(--display); }
.research-guide-section-head p { max-width: 720px; margin-top: 6px; color: var(--muted-dark); font-size: 11px; line-height: 1.6; }
.research-guide-item-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 15px; }
.research-guide-item { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.42); transition: border-color .15s ease, background .15s ease; }
.research-guide-item:hover { border-color: rgba(183,144,71,.62); background: rgba(255,255,255,.68); }
.research-guide-item-head { display: flex; align-items: start; justify-content: space-between; gap: 8px; min-height: 25px; }
.research-guide-rank { color: var(--gold-dark); font: 700 10px var(--mono); letter-spacing: .08em; }
.research-guide-item-main { display: flex; align-items: center; gap: 10px; margin-top: 8px; min-width: 0; }
.research-guide-thumb { width: 50px; height: 50px; border-radius: 11px; flex: 0 0 auto; }
.research-guide-item-main .inline-item-link { flex: 0 0 auto; }
.research-guide-item-main .inline-item-link strong, .research-guide-item-main .inline-item-link small { display: none; }
.research-guide-item-title { min-width: 0; }
.research-guide-item-title strong { display: block; color: var(--ink); font: 700 16px var(--display); overflow-wrap: anywhere; }
.research-guide-item-title span { display: block; margin-top: 3px; color: var(--muted-dark); font: 10px var(--mono); overflow-wrap: anywhere; }
.research-guide-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 10px; margin-top: 12px; }
.research-guide-stats span { min-width: 0; color: var(--muted-dark); font: 9px/1.45 var(--mono); overflow-wrap: anywhere; }
.research-guide-stats b, .research-guide-context b { display: block; margin-bottom: 2px; color: var(--gold-dark); font-weight: 600; }
.research-guide-context { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--line-strong); }
.research-guide-context span { min-width: 0; color: var(--muted-dark); font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
.research-guide-key-ids { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.research-guide-key-ids .sub-cell { width: 100%; margin-top: 0; }
.research-guide-highlight { margin-top: 11px; color: var(--muted-dark); font-size: 10px; line-height: 1.55; }
.research-guide-source { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font: 9px/1.5 var(--mono); overflow-wrap: anywhere; }
.research-guide-source b { color: #5d4b2d; font-weight: 600; }
.research-guide-source-reference-list { display: grid; gap: 7px; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line-strong); }
.research-guide-source-reference-intro { color: var(--muted-dark); font-size: 10px; line-height: 1.5; }
.research-guide-source-reference { min-width: 0; padding: 8px; border: 1px solid rgba(183,144,71,.3); border-radius: 8px; background: rgba(255,250,239,.55); }
.research-guide-source-reference-unresolved { border-color: rgba(157,68,55,.25); background: rgba(244,225,221,.34); }
.research-guide-source-reference-head { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.research-guide-source-reference-head strong { min-width: 0; color: var(--ink); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.research-guide-source-reference-head .badge-stack { flex: 0 0 auto; }
.research-guide-source-reference > p { margin-top: 6px; line-height: 1.45; }
.research-guide-source-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 7px; }
.research-guide-source-link { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; min-width: 0; padding: 7px; border: 1px solid rgba(36,92,96,.18); border-radius: 7px; background: rgba(255,255,255,.68); }
.research-guide-source-link-media { min-width: 0; }
.research-guide-source-link-media .container-media-caption { max-width: 74px; font-size: 9px; line-height: 1.25; white-space: normal; }
.research-guide-source-map { width: 70px; height: 48px; border-radius: 6px; }
.research-guide-source-link-copy { display: grid; align-content: start; gap: 2px; min-width: 0; }
.research-guide-source-link-copy strong { color: var(--ink); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.research-guide-source-link-copy span, .research-guide-source-link-copy small { color: var(--muted-dark); font: 10px/1.4 var(--mono); overflow-wrap: anywhere; }
.research-guide-source-link-copy small { color: var(--muted); }
.research-guide-source-link-action { justify-self: start; margin-top: 3px; padding: 0; border: 0; color: var(--teal-strong); background: transparent; font: 700 10px/1.4 var(--mono); cursor: pointer; }
.research-guide-source-link-action:hover, .research-guide-source-link-action:focus-visible { color: var(--ink); text-decoration: underline; outline: none; }
.research-guide-luck-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 15px; }
.research-guide-luck-card { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.4); }
.research-guide-card-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.research-guide-card-head h3 { color: var(--ink); font: 700 18px var(--display); }
.research-guide-luck-card > p { margin-top: 9px; color: var(--muted-dark); font-size: 10px; line-height: 1.6; }
.research-guide-layer-list { display: grid; gap: 6px; margin-top: 13px; }
.research-guide-layer-list > div { display: flex; align-items: start; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.34); }
.research-guide-layer-id { flex: 0 0 48px; color: var(--gold-dark); font: 10px var(--mono); }
.research-guide-layer-list b, .research-guide-layer-list small { display: block; }
.research-guide-layer-list b { color: var(--ink); font-size: 10px; }
.research-guide-layer-list small { margin-top: 2px; color: var(--muted); font: 9px/1.4 var(--mono); }
.research-guide-inner-callout { margin-top: 13px; font-size: 10px; }
.research-guide-luck-card .text-link { margin-top: 12px; }
.research-guide-protocol-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 15px; }
.research-guide-protocol { min-width: 0; padding: 13px; border: 1px solid rgba(173,93,76,.24); border-radius: 9px; background: #fbf1ed; }
.research-guide-step { color: #79464a; font: 700 9px var(--mono); letter-spacing: .08em; }
.research-guide-protocol h3 { margin-top: 9px; color: #342b29; font: 700 15px/1.2 var(--display); overflow-wrap: anywhere; }
.research-guide-protocol p { margin-top: 7px; color: #554844; font-size: 10px; line-height: 1.6; }
.research-guide-protocol .badge-stack { display: block; margin-top: 10px; }
.research-guide-protocol .sub-cell { margin-top: 8px; overflow-wrap: anywhere; }
.research-guide-subsection { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.research-guide-subsection-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.research-guide-subsection-head p { margin-top: 5px; color: var(--muted-dark); font-size: 10px; line-height: 1.5; }
.research-guide-claim-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 11px; }
.research-guide-claim { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.34); }
.research-guide-claim-head { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.research-guide-claim-head strong { color: var(--ink); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.research-guide-claim p { margin-top: 7px; color: var(--muted-dark); font-size: 10px; line-height: 1.55; }
.research-guide-claim .sub-cell { margin-top: 7px; overflow-wrap: anywhere; }
.research-guide-source-note { margin-top: 14px; }
.kb-knowledge-section { background: linear-gradient(135deg, rgba(255,255,255,.52), rgba(250,245,232,.7)); }
.kb-rate-grid, .kb-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kb-rate-card { background: rgba(255,255,255,.58); }
.kb-worked-example-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 11px; }
.kb-worked-example-card { background: rgba(255,255,255,.58); }
.kb-worked-example-card > p { margin-top: 8px; color: var(--muted-dark); font-size: 10px; line-height: 1.55; }
.kb-example-row-list { display: grid; gap: 6px; margin-top: 10px; }
.kb-example-row { padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.42); }
.kb-example-row-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(58px, .45fr); gap: 8px; align-items: start; }
.kb-example-row-head > div { min-width: 0; }
.kb-example-row-head strong, .kb-example-row-head .sub-cell { display: block; }
.kb-example-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.kb-example-metrics > div { min-width: 0; padding: 6px 7px; border-left: 2px solid rgba(183,144,71,.46); background: rgba(183,144,71,.07); }
.kb-example-metrics span, .kb-example-metrics strong { display: block; overflow-wrap: anywhere; }
.kb-example-metrics span { color: var(--muted); font-size: 9px; line-height: 1.35; }
.kb-example-metrics strong { margin-top: 3px; color: var(--gold-dark); font: 10px var(--mono); }
.kb-example-note { padding-top: 8px; border-top: 1px dashed var(--line-strong); }
.kb-formula { margin-top: 9px; padding: 8px 9px; border-left: 2px solid var(--gold); background: rgba(183,144,71,.1); color: var(--ink); font: 10px/1.55 var(--mono); overflow-wrap: anywhere; }
.kb-rate-card p { margin-top: 8px; color: var(--muted-dark); font-size: 10px; line-height: 1.55; }
.kb-route-card { padding: 14px; background: rgba(255,255,255,.6); }
.kb-route-head, .kb-chest-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.kb-route-head h3 { margin-top: 5px; color: var(--ink); font: 700 18px/1.2 var(--display); overflow-wrap: anywhere; }
.kb-route-head .kb-route-room-target { min-width: 0; padding: 4px 6px; margin: -4px -6px; border: 1px solid transparent; border-radius: 7px; cursor: pointer; }
.kb-route-head .kb-route-room-target small { display: block; margin-top: 4px; color: var(--teal-strong); font: 10px var(--mono); }
.kb-route-grade { flex: 0 0 auto; min-width: 38px; padding: 5px 8px; border: 1px solid rgba(183,144,71,.55); border-radius: 999px; color: var(--gold-dark); text-align: center; font: 700 13px var(--mono); }
.kb-route-focus { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.55); }
.kb-route-focus .inline-item-link { flex: 0 0 auto; }
.kb-route-thumb { width: 48px; height: 48px; border-radius: 10px; }
.kb-route-focus strong, .kb-route-focus .sub-cell { display: block; }
.kb-route-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 11px; }
.kb-route-facts span { min-width: 0; color: var(--muted-dark); font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
.kb-route-facts b, .kb-route-subsection > strong { display: block; margin-bottom: 3px; color: var(--gold-dark); font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.kb-route-subsection { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-strong); }
.kb-key-list { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-key-chip { display: inline-flex; flex-direction: column; gap: 2px; max-width: 100%; padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.6); cursor: pointer; }
.kb-key-chip:hover, .kb-click-target:hover { border-color: rgba(183,144,71,.72); background: rgba(255,255,255,.88); }
.kb-key-chip strong { color: var(--ink); font-size: 10px; overflow-wrap: anywhere; }
.kb-key-chip small { color: var(--muted); font: 9px var(--mono); }
.kb-route-chest-list, .kb-drawer-route-list { display: grid; gap: 8px; }
.kb-chest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 11px; }
.kb-chest-card { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 9px; min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.48); }
.kb-chest-media { min-width: 0; }
.kb-chest-map { width: 70px; height: 70px; border-radius: 8px; object-fit: cover; }
.kb-chest-copy { min-width: 0; }
.kb-chest-head .kb-click-target { display: flex; flex-direction: column; min-width: 0; cursor: pointer; }
.kb-chest-head .kb-click-target strong { color: var(--ink); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.kb-chest-head .kb-click-target small { margin-top: 2px; color: var(--muted); }
.kb-ranking-table-wrap { margin-top: 11px; }
.kb-ranking-table { min-width: 1040px; }
.kb-ranking-table th, .kb-ranking-table td { vertical-align: top; }
.kb-ranking-table th { white-space: nowrap; }
.kb-ranking-row > td { padding-top: 12px; padding-bottom: 12px; }
.kb-ranking-tier { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 8px; border: 1px solid rgba(183,144,71,.68); border-radius: 999px; color: var(--gold-dark); background: rgba(250,244,224,.92); font: 700 11px/1.25 var(--mono); }
.kb-ranking-chest { display: grid; grid-template-columns: 58px minmax(180px, 1fr); gap: 9px; min-width: 250px; align-items: start; }
.kb-ranking-media { min-width: 0; }
.kb-ranking-thumb { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; }
.kb-ranking-chest strong { display: block; color: var(--ink); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.kb-ranking-chest .sub-cell, .kb-ranking-loot .sub-cell { overflow-wrap: anywhere; }
.kb-ranking-loot { min-width: 190px; }
.kb-ranking-loot strong { display: block; color: var(--ink); font: 700 12px/1.35 var(--mono); }
.kb-ranking-table .content-status { margin-top: 7px; }
.kb-ranking-table .badge-stack { display: flex; flex-wrap: wrap; gap: 4px; }
.kb-chain-summary { margin-top: 8px; }
.kb-chain-branch { display: grid; gap: 4px; margin-top: 5px; padding: 6px; border-left: 2px solid rgba(183,144,71,.45); background: rgba(183,144,71,.07); color: var(--muted-dark); font-size: 9px; line-height: 1.4; }
.kb-chain-extra { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.kb-chain-extra > div { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.kb-chain-extra .inline-item-link { min-width: 0; }
.kb-difficulty-table { display: grid; gap: 6px; margin-top: 10px; }
.kb-difficulty-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(100px, .4fr); gap: 8px; align-items: start; padding: 8px 9px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.38); }
.kb-difficulty-row strong { color: var(--gold-dark); font: 10px var(--mono); }
.kb-difficulty-row span { color: var(--muted-dark); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.kb-difficulty-row small { color: var(--muted); font: 9px var(--mono); overflow-wrap: anywhere; }
.kb-difficulty-details summary { display: flex; justify-content: space-between; gap: 8px; color: var(--muted-dark); cursor: pointer; }
.kb-difficulty-details summary strong { color: var(--gold-dark); font-size: 10px; }
.kb-difficulty-list { margin-top: 8px; }
.kb-treasure-pool-list { display: grid; gap: 9px; margin-top: 11px; }
.kb-treasure-pool { border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.5); overflow: hidden; }
.kb-treasure-pool > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; color: var(--ink); cursor: pointer; list-style: none; }
.kb-treasure-pool > summary::-webkit-details-marker { display: none; }
.kb-treasure-pool > summary::before { content: "＋"; width: 14px; color: var(--gold-dark); font: 12px var(--mono); }
.kb-treasure-pool[open] > summary::before { content: "−"; }
.kb-treasure-pool > summary > span:first-of-type { display: grid; gap: 3px; min-width: 0; flex: 1; }
.kb-treasure-pool > summary strong { font-size: 13px; overflow-wrap: anywhere; }
.kb-treasure-pool > summary small { color: var(--muted-dark); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.kb-treasure-pool-body { display: grid; gap: 8px; padding: 0 12px 12px; }
.kb-treasure-pool-body .table-wrap { max-height: 480px; }
.kb-treasure-pool-body .inline-item-link { min-width: 150px; }
.kb-themed-context { display: inline-grid; gap: 3px; width: fit-content; max-width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.7); cursor: pointer; }
.kb-themed-context:hover { border-color: rgba(183,144,71,.72); background: rgba(255,255,255,.92); }
.kb-treasure-pool .badge-stack { max-width: 220px; }
.kb-probability-model-status { display: block; margin-top: 8px; color: var(--muted-dark); }
.kb-dedicated-red-section .table-wrap { margin-top: 10px; }
.kb-dedicated-red-table td { vertical-align: top; }
.kb-dedicated-room { display: inline-grid; gap: 3px; min-width: 145px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.62); cursor: pointer; }
.kb-dedicated-room:hover { border-color: rgba(183,144,71,.72); background: rgba(255,255,255,.94); }
.kb-dedicated-room strong { color: var(--ink); }
.kb-dedicated-room small { color: var(--muted-dark); }
.kb-route-status { margin-top: 11px; padding-top: 8px; border-top: 1px solid var(--line); }
.kb-route-inner-callout { margin-top: 8px; font-size: 10px; }
.kb-drawer-section .kb-route-card { border-color: var(--line-strong); }
.item-gap-panel { margin-top: 12px; padding-top: 13px; border-top: 1px solid var(--line); }
.item-gap-panel h3 { color: var(--ink); font-size: 13px; }
.item-gap-panel p { margin-top: 5px; }
.item-gap-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 11px; }
.item-gap-row { min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.28); }
.item-gap-link { min-width: 0; }
.item-gap-empty { color: var(--muted); font-size: 10px; }
.item-secondary-image-note { margin-top: 10px; padding: 9px 10px; border: 1px dashed rgba(183,144,71,.4); border-radius: 8px; color: var(--muted-dark); background: rgba(255,250,238,.58); font: 9px/1.55 var(--mono); }
.item-audit-tabs { margin-top: 0; }
.asset-audit-details { margin: 0 0 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.24); overflow: hidden; }
.asset-audit-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; color: var(--gold-dark); cursor: pointer; list-style: none; }
.asset-audit-details > summary::-webkit-details-marker { display: none; }
.asset-audit-details > summary::before { content: "＋"; color: var(--gold-dark); font: 12px var(--mono); }
.asset-audit-details[open] > summary::before { content: "−"; }
.asset-audit-details > summary > span:first-of-type { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.asset-audit-details > summary strong { color: var(--ink); font-size: 12px; }
.asset-audit-details > summary small { color: var(--muted); font: 9px var(--mono); }
.asset-audit-details > .source-explain { margin: 0 14px 10px; max-width: none; }
.asset-audit-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 0 14px 14px; }
.asset-audit-item { min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.32); }
.asset-audit-item strong { display: block; color: var(--ink); font-size: 10px; overflow-wrap: anywhere; }
.asset-audit-item .mono { display: block; margin-top: 4px; }
.asset-audit-item small { display: block; margin-top: 4px; color: var(--muted); font: 8px/1.45 var(--mono); overflow-wrap: anywhere; }
.asset-audit-empty { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
.chest-source-coverage { margin: 22px 0 16px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.26); }
.coverage-intro { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.coverage-intro h2 { margin-top: 5px; color: var(--ink); font: 700 20px var(--display); }
.coverage-intro p { max-width: 650px; margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.chest-source-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.chest-source-grid article { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.32); }
.source-card-head { display: flex; align-items: start; justify-content: space-between; gap: 8px; min-height: 34px; }
.source-card-head strong { color: var(--ink); font-size: 11px; line-height: 1.35; }
.source-card-head .badge-stack { flex: 0 0 auto; }
.source-card-count { display: block; margin-top: 10px; color: var(--gold-dark); font: 700 24px var(--display); }
.chest-source-grid article > span { display: block; margin-top: 2px; color: var(--muted-dark); font-size: 10px; }
.chest-source-grid article small { display: block; min-height: 42px; margin-top: 8px; color: var(--muted); font: 9px/1.5 var(--mono); }
.chest-source-grid .text-link { margin-top: 8px; padding: 3px 0; font-size: 10px; }
.room-grid, .boss-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.room-card, .boss-card { border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.28); overflow: hidden; }
.room-visual { position: relative; height: 148px; background: #24241f; overflow: hidden; }
.room-visual img { width: 100%; height: 100%; object-fit: cover; opacity: .73; filter: saturate(.72) contrast(1.06); }
.room-visual.no-image { display: grid; place-items: center; color: #c9bd9f; background: repeating-linear-gradient(135deg, #2c2b24, #2c2b24 9px, #26251f 9px, #26251f 18px); font: 10px var(--mono); }
.room-image-caption { position: absolute; left: 10px; bottom: 9px; padding: 4px 7px; border: 1px solid rgba(232, 216, 174, .25); border-radius: 5px; color: #f2e5c7; background: rgba(34, 32, 25, .8); font: 9px var(--mono); letter-spacing: .04em; }
.room-visual > .asset-open-link { position: absolute; right: 10px; bottom: 9px; margin-top: 0; padding: 4px 7px; border: 1px solid rgba(232, 216, 174, .25); border-radius: 5px; color: #f2e5c7; background: rgba(34, 32, 25, .8); }
.room-visual > .asset-open-link:hover, .room-visual > .asset-open-link:focus-visible { color: #fff5d9; background: rgba(34, 32, 25, .94); }
.room-tier-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 7px 9px; margin-top: 8px; padding: 9px 10px; border: 1px solid rgba(183,144,71,.26); border-radius: 9px; background: rgba(183,144,71,.07); }
.room-tier-label { color: var(--gold-dark); font-weight: 700; line-height: 1.35; }
.room-tier-chip-list { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.room-tier-chip { display: inline-grid; gap: 2px; min-width: 112px; padding: 5px 7px; border: 1px solid rgba(183,144,71,.24); border-radius: 7px; color: var(--ink); background: rgba(255,255,255,.5); font: 10px/1.35 var(--mono); }
.room-tier-chip b { color: var(--gold-dark); font: 700 9px/1.35 var(--sans); }
.room-tier-summary > .sub-cell, .room-tier-summary > .room-tier-status { grid-column: 1 / -1; }
.room-tier-summary > .sub-cell { overflow-wrap: anywhere; }
.room-tier-status { display: inline-flex; min-width: 0; }
.room-info, .boss-info { padding: 17px; }
.room-coverage { margin: 20px 0 2px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.24); }
.room-coverage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.room-coverage-grid article { min-width: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.32); }
.room-coverage-grid strong { display: block; color: var(--ink); font-size: 11px; line-height: 1.35; }
.room-coverage-grid b { display: block; margin-top: 8px; color: var(--gold-dark); font: 700 22px var(--display); }
.room-coverage-grid article > span:not(.badge-stack) { display: block; min-height: 30px; margin-top: 2px; color: var(--muted-dark); font-size: 10px; line-height: 1.45; }
.room-coverage-grid .badge-stack { display: block; margin-top: 7px; }
.room-title-row, .boss-title-row { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.room-title-row h3, .boss-title-row h3 { font: 700 20px var(--display); }
.room-meta { margin-top: 6px; color: var(--muted); font: 10px var(--mono); }
.map-context-conflict { color: #7a3328; font-weight: 600; }
.map-context-identity { color: #4d4a42; font-weight: 600; overflow-wrap: anywhere; }
.room-raw-fields { color: #5c4c2f; }
.room-map-context { display: grid; gap: 3px; }
.room-map-primary { color: var(--muted-dark); font-weight: 700; }
.room-map-context .sub-cell { color: #4d4a42; }
.room-map-context .sub-cell.map-context-conflict { color: #7a3328; font-weight: 600; }
.map-context-navigation { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.map-context-navigation-label { color: #4d4a42; font: 600 9px/1.35 var(--mono); }
.map-context-open-button { display: inline-grid; gap: 1px; max-width: 100%; padding: 5px 7px; border: 1px solid rgba(36,92,96,.28); border-radius: 6px; color: #245c60; background: #edf4f1; text-align: left; cursor: pointer; }
.map-context-open-button:hover { border-color: rgba(36,92,96,.55); background: #e0efeb; }
.map-context-open-button span { overflow-wrap: anywhere; font: 700 9px/1.25 var(--sans); }
.map-context-open-button small { overflow-wrap: anywhere; color: #3d5f60; font: 8px/1.25 var(--mono); }
.map-context-navigation-more { color: #4d4a42; font: 9px/1.35 var(--mono); }
.room-location-status { color: var(--muted-dark); }
.room-items, .boss-loot { display: grid; gap: 6px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.room-key-preview { display: grid; gap: 6px; margin-top: 13px; padding: 9px 0 2px; border-top: 1px dashed rgba(35,34,29,.14); }
.room-key-item { display: block; min-width: 0; padding: 5px 7px; border: 1px solid rgba(183,144,71,.18); border-radius: 7px; background: rgba(183,144,71,.055); }
.room-key-item .inline-item-link strong { max-width: 100%; }
.room-key-requirement { display: grid; gap: 5px; min-width: 0; }
.room-key-requirement-label { color: var(--gold-dark); font-weight: 700; }
.room-key-requirement-list { display: grid; gap: 5px; }
.room-key-requirement-item { display: block; min-width: 0; padding: 4px 6px; border: 1px solid rgba(183,144,71,.2); border-radius: 7px; background: rgba(183,144,71,.07); }
.room-key-unresolved { color: var(--muted-dark); line-height: 1.45; }
.room-key-raw { overflow-wrap: anywhere; }
.room-chest-preview { display: grid; gap: 5px; margin-top: 10px; padding: 9px 0 2px; border-top: 1px dashed rgba(35,34,29,.14); }
.room-context-container-head { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.room-context-container-copy { min-width: 0; flex: 1; }
.room-context-thumb { width: 64px; height: 42px; border: 1px solid rgba(32,31,24,.18); border-radius: 7px; object-fit: cover; background: #292821; }
.room-chest-entry { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border: 1px solid rgba(183,144,71,.18); border-radius: 7px; background: rgba(183,144,71,.055); cursor: pointer; }
.room-chest-entry:hover { border-color: rgba(183,144,71,.56); background: rgba(183,144,71,.12); }
.room-chest-entry-media { flex: 0 0 auto; }
.room-chest-entry-copy { min-width: 0; flex: 1; }
.room-chest-thumb { width: 48px; height: 32px; border: 1px solid rgba(32,31,24,.18); border-radius: 6px; object-fit: cover; background: #292821; }
.room-chest-entry strong { display: block; overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.room-chest-entry small { display: block; margin-top: 3px; color: var(--muted); font: 9px var(--mono); }
.room-item-line, .boss-item-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted-dark); font-size: 10px; }
.room-item-line span:last-child { color: var(--gold-dark); font: 10px var(--mono); }
.quality-composition { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.quality-record-audit { margin: 18px 0 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.24); }
.quality-record-audit-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.quality-record-audit-head h3 { margin-top: 4px; color: var(--ink); font: 700 17px var(--display); }
.quality-record-audit-head p { max-width: 690px; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.quality-record-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; margin-top: 11px; }
.quality-record-list article { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.32); }
.quality-record-label { min-height: 27px; color: var(--muted-dark); font-size: 10px; line-height: 1.35; }
.quality-record-list strong { display: block; margin-top: 5px; color: var(--gold-dark); font: 700 22px var(--display); }
.quality-record-list article > span:not(.badge-stack):not(.badge-q) { display: block; margin-top: 2px; color: var(--muted); font: 9px var(--mono); }
.quality-record-list .badge-stack { display: block; margin-top: 7px; }
.quality-record-audit > .source-explain { margin-top: 10px; }
.inline-item-list, .pool-preview, .candidate-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.inline-item-link { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink); cursor: pointer; }
.inline-item-link.is-unresolved { cursor: help; opacity: .82; }
.inline-item-link:hover strong { color: var(--gold-dark); text-decoration: underline; }
.inline-item-link strong { display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.inline-item-link small { display: block; margin-top: 2px; color: var(--muted); font: 9px var(--mono); }
.prob-pill { padding: 3px 5px; border: 1px solid rgba(183,144,71,.22); border-radius: 5px; color: var(--gold-dark); background: rgba(183,144,71,.08); font: 9px var(--mono); white-space: nowrap; }
.value-rank-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.value-rank-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px; border: 1px solid rgba(183,144,71,.22); border-radius: 5px; color: var(--gold-dark); background: rgba(183,144,71,.08); font: 9px var(--mono); white-space: nowrap; }
.value-rank-pill strong { color: var(--ink); font-weight: 600; }
.value-rank-thumb, .value-rank-mini { border: 1px solid rgba(32, 31, 24, .16); border-radius: 6px; object-fit: contain; background: #fbfaf6; }
.value-rank-thumb { width: 42px; height: 42px; }
.value-rank-mini { width: 24px; height: 24px; display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.value-rank-media { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; flex: 0 0 auto; }
.value-rank-media .asset-open-link { margin-top: 1px; font-size: 8px; }
.value-rank-line { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.candidate-preview { margin-top: 7px; padding-top: 7px; border-top: 1px dashed rgba(35,34,29,.14); }
.candidate-preview .inline-item-link { width: 100%; }
.candidate-preview .inline-item-link strong { max-width: 150px; }
.room-secondary-summary { display: grid; gap: 6px; margin-top: 10px; padding: 9px 0 2px; border-top: 1px dashed rgba(35,34,29,.14); }
.room-secondary-heading { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.room-secondary-set-list { display: flex; flex-wrap: wrap; gap: 4px; }
.room-secondary-set { padding: 3px 5px; border: 1px solid rgba(183,144,71,.18); border-radius: 5px; color: var(--muted-dark); background: rgba(183,144,71,.055); font: 9px var(--mono); }
.room-secondary-count { color: var(--muted); font: 9px/1.45 var(--mono); }
.room-search-match-note { display: block; margin-top: 8px; padding: 6px 8px; border-left: 3px solid var(--teal-strong); border-radius: 0 5px 5px 0; color: #245255; background: #e5f0ed; font: 11px/1.45 var(--sans); }
.room-secondary-preview { display: grid; gap: 5px; }
.room-secondary-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.room-secondary-item > span:first-child { min-width: 0; }
.room-secondary-item .inline-item-link { width: 100%; }
.room-secondary-item .inline-item-link strong { max-width: 150px; }
.room-note { margin-top: 7px; }
.room-note .badge-stack { white-space: normal; }
.room-card-foot { display: flex; justify-content: space-between; gap: 10px; padding: 11px 17px; border-top: 1px solid var(--line); color: var(--muted); font: 9px/1.45 var(--mono); }
.room-card-foot span, .boss-detail-link { color: var(--gold-dark); white-space: nowrap; }
.container-context { display: flex; align-items: center; gap: 8px; min-width: 170px; }
.container-context > div:last-child { min-width: 0; }
.container-context-copy { display: grid; gap: 2px; min-width: 0; }
.container-context-copy .name-cell { font-size: 12px; line-height: 1.35; }
.field-label { color: var(--muted-dark); font-weight: 700; }
.technical-line { overflow-wrap: anywhere; }
.container-detail-context { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.34); }
.container-detail-context strong { display: block; color: var(--ink); font-size: 12px; }
.container-detail-context .chest-ui-reference { align-self: center; min-width: 118px; }
.container-detail-context .chest-ui-reference-pair { min-height: 50px; }
.container-detail-context .source-record-chest-thumb { width: 44px; height: 44px; }
.container-detail-context .source-record-media-note { max-width: 170px; }
.container-map-media { display: inline-flex; flex: 0 0 auto; min-width: 0; flex-direction: column; align-items: flex-start; gap: 3px; vertical-align: middle; }
.container-media-caption { color: #4d4a42; font: 8px/1.2 var(--mono); font-weight: 500; letter-spacing: .04em; white-space: nowrap; }
.media-provenance-note { display: block; max-width: 210px; color: #4f4c44; font: 9px/1.35 var(--mono); overflow-wrap: anywhere; white-space: normal; }
.container-map-thumb { width: 52px; height: 38px; border: 1px solid rgba(32, 31, 24, .18); border-radius: 7px; object-fit: cover; background: #292821; }
.treasure-table-context-cell { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; align-items: start; min-width: 0; }
.treasure-table-context-media { display: grid; gap: 2px; min-width: 0; justify-items: start; }
.treasure-table-context-media .container-map-media, .treasure-table-context-media .map-image-media { max-width: 72px; }
.treasure-table-context-media .container-map-media { align-items: flex-start; }
.treasure-table-context-media .map-image-media { align-items: flex-start; }
.treasure-table-map-thumb { width: 70px; height: 44px; border: 1px solid rgba(32, 31, 24, .18); border-radius: 7px; object-fit: cover; background: #292821; }
.treasure-table-context-media small { display: block; max-width: 72px; color: #4d4a42; font: 8px/1.25 var(--mono); overflow-wrap: anywhere; }
.treasure-table-context-copy { min-width: 0; }
.treasure-table-context-media .asset-open-link { display: block; max-width: 72px; overflow-wrap: anywhere; font-size: 8px; line-height: 1.2; }
.container-table-visual, .openable-container-preview { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 118px; }
.container-table-visual .source-record-media-block, .openable-container-preview .source-record-media-block { flex: 0 0 auto; }
.container-table-visual .chest-ui-reference-pair { min-height: 42px; }
.container-table-visual .container-table-chest-thumb { width: 34px; height: 34px; }
.container-table-visual .source-record-media-block small { max-width: 105px; font-size: 8px; }
.container-table-visual .source-record-media-note { max-width: 105px; font-size: 8px; }
.openable-container-preview .source-record-media-block small { max-width: 74px; font-size: 8px; }
.drawer-map { width: 210px; height: 118px; border: 1px solid rgba(32, 31, 24, .18); border-radius: 10px; object-fit: cover; background: #292821; flex: 0 0 auto; }
.map-variant-row { display: flex; align-items: center; gap: 10px; }
.map-variant-media { flex: 0 0 auto; }
.map-image-media { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 100%; }
.map-image-media .media-provenance-note { max-width: 210px; }
.room-variant-map { width: 86px; height: 50px; border: 1px solid rgba(32, 31, 24, .18); border-radius: 7px; object-fit: cover; background: #292821; }
.map-variant-copy { min-width: 0; }
.map-region-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 14px; margin-top: 20px; align-items: start; }
.map-asset-gallery { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.24); overflow: hidden; }
.map-asset-gallery > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; color: var(--gold-dark); cursor: pointer; list-style: none; }
.map-asset-gallery > summary::-webkit-details-marker { display: none; }
.map-asset-gallery > summary::before { content: "＋"; color: var(--gold-dark); font: 12px var(--mono); }
.map-asset-gallery[open] > summary::before { content: "−"; }
.map-asset-gallery > summary > span:first-of-type { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.map-asset-gallery > summary strong { color: var(--ink); font-size: 12px; }
.map-asset-gallery > summary small { color: var(--muted); font: 9px var(--mono); }
.map-asset-gallery > .source-explain { margin: 0 14px 10px; max-width: none; }
.map-asset-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0 14px 14px; }
.map-asset-card { min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.34); overflow: hidden; }
.map-asset-media { height: 100px; background: #292821; overflow: hidden; }
.map-asset-media img { width: 100%; height: 100%; object-fit: cover; }
.map-asset-media .asset-open-link { display: flex; justify-content: center; width: 100%; margin: 0; padding: 5px 7px; color: #c8e4df; background: #292821; font-size: 9px; text-align: center; }
.map-asset-media .asset-open-link:hover, .map-asset-media .asset-open-link:focus-visible { color: #f2fffb; background: #1f201c; }
.map-asset-card figcaption { display: grid; gap: 4px; padding: 8px; }
.map-asset-card figcaption > strong { color: var(--ink); font-size: 10px; overflow-wrap: anywhere; }
.map-asset-card figcaption .sub-cell { overflow-wrap: anywhere; }
.map-region-picker-panel, .map-region-main { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.3); }
.map-region-picker-panel { position: sticky; top: 16px; }
.map-region-picker-panel .panel-head { display: block; padding: 0 0 10px; border-bottom: 1px solid var(--line); }
.map-region-picker-panel .panel-head h2 { font: 700 18px var(--display); }
.map-region-picker-panel .panel-head p { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.map-region-picker-panel .panel-head .mono { display: block; margin-top: 7px; color: var(--gold-dark); }
.map-region-picker-list { display: grid; gap: 5px; max-height: 680px; margin-top: 10px; overflow: auto; }
.map-region-picker { display: flex; align-items: start; justify-content: space-between; gap: 8px; width: 100%; padding: 9px; border: 1px solid transparent; border-radius: 8px; color: var(--muted-dark); background: transparent; text-align: left; cursor: pointer; }
.map-region-picker:hover, .map-region-picker.is-active { border-color: rgba(183,144,71,.46); color: var(--ink); background: rgba(183,144,71,.1); }
.map-region-picker strong, .map-region-picker small { display: block; }
.map-region-picker strong { font-size: 11px; }
.map-region-picker small { margin-top: 4px; color: var(--muted); font: 9px/1.4 var(--mono); }
.map-region-picker .map-client-name { margin-top: 6px; color: var(--gold-dark); }
.map-client-name { display: grid; gap: 2px; color: var(--gold-dark); font: 10px/1.45 var(--mono); overflow-wrap: anywhere; }
.map-client-name strong { color: var(--ink); font-weight: 700; }
.map-client-name-status { color: #4d4a42; font-size: 9px; font-weight: 500; }
.map-client-name.is-compact { font-size: 9px; }
.map-client-name.is-compact .map-client-name-status { font-size: 8px; }
.map-region-picker > .mono { color: var(--gold-dark); font-size: 9px; white-space: nowrap; }
.map-region-summary { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.map-region-summary h2 { margin-top: 6px; font: 700 25px var(--display); }
.map-region-summary p { margin-top: 5px; color: var(--muted); font: 10px var(--mono); }
.map-region-chip-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.map-region-summary-meta { display: grid; gap: 5px; min-width: 220px; color: var(--muted); font: 9px/1.45 var(--mono); text-align: right; overflow-wrap: anywhere; }
.map-region-summary-meta strong { color: var(--ink); }
.map-region-visual-grid { display: grid; grid-template-columns: minmax(180px, .72fr) minmax(0, 1.28fr); gap: 10px; margin-top: 14px; }
.map-region-reference-panel, .map-region-schematic-panel, .map-region-layers { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.28); }
.map-region-reference-panel h3, .map-region-schematic-panel h3, .map-region-layers h3 { color: var(--gold-dark); font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.map-region-image-pair { display: grid; gap: 8px; margin-top: 10px; min-width: 0; }
.map-region-image-wrap { min-width: 0; margin: 0; }
.map-region-image { display: block; width: 100%; height: 166px; border-radius: 8px; object-fit: cover; background: #292821; }
.map-region-image-wrap figcaption { min-width: 0; margin-top: 7px; color: var(--muted); font: 9px/1.45 var(--mono); overflow-wrap: anywhere; word-break: break-word; }
.map-region-reference-panel > .image-placeholder { width: 100%; height: 166px; margin-top: 10px; color: #5b574f; background: #e9e6dd; }
.map-region-schematic { display: block; width: 100%; height: 224px; margin-top: 10px; border: 1px solid rgba(32,31,24,.13); border-radius: 8px; background: #292821; }
.map-schematic-background { fill: #292821; }
.map-schematic-layer { fill: none; stroke: #c9a15c; stroke-width: 2; stroke-dasharray: 8 5; opacity: .7; vector-effect: non-scaling-stroke; }
.map-schematic-room { fill: rgba(112,166,180,.18); stroke: #90c5cd; stroke-width: 1.5; opacity: .92; vector-effect: non-scaling-stroke; }
.map-schematic-dot { fill: #dfb35e; stroke: #211f1a; stroke-width: 1; vector-effect: non-scaling-stroke; }
.map-layer-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.map-layer-row { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.2); }
.map-layer-row img, .map-layer-no-image { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 5px; object-fit: contain; background: #292821; }
.map-layer-media { display: inline-flex; flex: 0 0 46px; flex-direction: column; align-items: center; gap: 1px; }
.map-layer-media .asset-open-link { margin-top: 1px; color: #2f6669; font-size: 9px; font-weight: 700; }
.map-layer-media .asset-open-link:hover, .map-layer-media .asset-open-link:focus-visible { color: #17484b; }
.map-layer-no-image { display: grid; place-items: center; color: #d1c6ad; font: 10px var(--mono); }
.map-layer-row > span { min-width: 0; }
.map-layer-row strong, .map-layer-row small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-layer-row strong { color: var(--ink); font-size: 10px; }
.map-layer-row small { margin-top: 2px; color: var(--muted); font: 8px/1.3 var(--mono); }
.map-region-layers { margin-top: 12px; }
.map-region-layers .section-head { margin: 0; }
.map-region-table-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-top: 18px; }
.map-region-table-head h3 { font: 700 18px var(--display); }
.map-region-table-head p { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.map-region-table { min-width: 760px; }
.map-region-callout { margin-top: 12px; }
.map-slot-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 14px; margin-top: 20px; align-items: start; }
.map-slot-picker-panel, .map-slot-main { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.3); }
.map-slot-picker-panel { position: sticky; top: 16px; }
.map-slot-picker-panel .panel-head { display: block; padding: 0 0 10px; border-bottom: 1px solid var(--line); }
.map-slot-picker-panel .panel-head h2 { font: 700 18px var(--display); }
.map-slot-picker-panel .panel-head p { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.map-slot-picker-panel .panel-head .mono { display: block; margin-top: 7px; color: var(--gold-dark); }
.map-slot-picker-list { display: grid; gap: 5px; max-height: 680px; margin-top: 10px; overflow: auto; }
.map-slot-picker { display: flex; align-items: start; justify-content: space-between; gap: 8px; width: 100%; padding: 9px; border: 1px solid transparent; border-radius: 8px; color: var(--muted-dark); background: transparent; text-align: left; cursor: pointer; }
.map-slot-picker:hover, .map-slot-picker.is-active { border-color: rgba(183,144,71,.46); color: var(--ink); background: rgba(183,144,71,.1); }
.map-slot-picker > span:first-child { min-width: 0; }
.map-slot-picker .map-slot-context strong { display: block; font-size: 11px; }
.map-slot-picker small { display: block; margin-top: 4px; color: var(--muted); font: 9px/1.4 var(--mono); overflow-wrap: anywhere; }
.map-slot-picker .map-slot-picker-count { display: grid; grid-template-columns: auto auto; gap: 1px 5px; flex: 0 0 auto; color: var(--gold-dark); text-align: right; }
.map-slot-picker-count b { font: 700 13px var(--display); }
.map-slot-picker-count small { margin: 0; font-size: 8px; }
.map-slot-context { display: grid; gap: 3px; min-width: 0; }
.map-slot-context strong { color: var(--ink); overflow-wrap: anywhere; }
.map-slot-context .sub-cell { overflow-wrap: anywhere; }
.map-slot-summary { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.map-slot-summary h2 { margin-top: 6px; font: 700 25px var(--display); }
.map-slot-chip-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.map-slot-summary-meta { display: grid; gap: 5px; min-width: 220px; color: var(--muted); font: 9px/1.45 var(--mono); text-align: right; overflow-wrap: anywhere; }
.map-slot-summary-meta strong { color: var(--ink); }
.map-slot-visual-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 14px; }
.map-slot-image-panel, .map-slot-boundary-panel { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.28); }
.map-slot-image-panel h3, .map-slot-boundary-panel h3 { color: var(--gold-dark); font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.map-slot-simulation { margin: 10px 0 17px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.36); }
.map-slot-simulation-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.map-slot-simulation-head > div { display: grid; gap: 3px; min-width: 0; }
.map-slot-simulation-head strong { color: var(--ink); font-size: 15px; }
.map-slot-simulation-head span:not(.badge) { color: var(--muted-dark); font: 10px/1.45 var(--mono); }
.map-slot-simulation-head .badge { flex: 0 0 auto; }
.map-slot-simulation-svg { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }

/*
 * Làm mới trải nghiệm đọc 2026-08-24.
 * Dữ liệu, bảng và các nhãn bằng chứng vẫn giữ nguyên; lớp này chỉ tăng
 * độ tương phản, cỡ chữ, khoảng cách và chuyển menu mobile thành ngăn
 * điều hướng có nhãn đầy đủ để không buộc người dùng phải đoán bằng icon.
 */
:root {
  --reader-font: 15px;
  --reader-line: 1.6;
  --reader-surface: rgba(255, 255, 255, .48);
  --reader-focus: rgba(49, 85, 143, .32);
}

html { font-size: 16px; }
body { font-size: var(--reader-font); line-height: var(--reader-line); }
body.mobile-nav-locked { overflow: hidden; }

:where(button, a, input, select, summary):focus-visible {
  outline: 3px solid var(--reader-focus);
  outline-offset: 2px;
}

.app-shell { grid-template-columns: 296px minmax(0, 1fr); }
.sidebar { padding: 30px 20px 22px; }
.brand-lockup { gap: 13px; padding-inline: 9px; }
.brand-mark { width: 50px; height: 50px; border-radius: 15px; }
.brand-name { font-size: 21px; }
.eyebrow { font-size: 10px; }
.sidebar-divider { margin: 28px 9px 21px; }
.main-nav { gap: 6px; }
.nav-item { min-height: 47px; padding: 12px 13px; border-radius: 12px; gap: 12px; font-size: 14px; line-height: 1.3; }
.nav-icon { width: 21px; font-size: 17px; }
.nav-count { font-size: 11px; }
.nav-count-context { font-size: 10px; }
.sidebar-foot { margin-inline: 9px; font-size: 11px; line-height: 1.6; }
.status-dot { font-size: 11px; }
.version-chip { font-size: 10px; }

.topbar { min-height: 82px; padding-inline: clamp(24px, 4vw, 64px); gap: 20px; }
.breadcrumb { font-size: 11px; }
.global-search { width: min(440px, 42vw); min-height: 46px; padding: 10px 13px; border-radius: 11px; }
.global-search input { font-size: 14px; }
kbd { padding: 3px 6px; font-size: 10px; }
.icon-button { width: 40px; height: 40px; font-size: 15px; }
.mobile-menu-button, .mobile-nav-backdrop { display: none; }

.page-wrap { max-width: 1560px; padding: 52px clamp(28px, 4vw, 72px) 92px; }
.hero-copy { font-size: 15px; line-height: 1.8; }
.hero-note { padding: 23px; }
.hero-note h3 { font-size: 20px; }
.hero-note p { font-size: 13px; line-height: 1.7; }
.hero-note-foot { font-size: 11px; }
.section-kicker { font-size: 11px; }
.hero h1 { margin-top: 19px; }

.section-header h1 { font-size: clamp(36px, 4vw, 58px); line-height: 1.05; }
.section-header p { max-width: 680px; font-size: 14px; line-height: 1.75; }
.panel-head { padding: 23px 24px 18px; }
.panel-head h2 { font-size: 23px; }
.panel-head p { font-size: 13px; line-height: 1.65; }
.panel-body { padding: 24px; }
.page-reading-brief { margin-block: 20px 25px; }
.page-reading-brief summary { padding: 16px 18px; }
.page-reading-brief summary strong { font-size: 15px; }
.page-reading-toggle { font-size: 11px; }
.page-reading-grid { gap: 13px; padding: 0 18px 18px 50px; }
.page-reading-label { font-size: 11px; }
.page-reading-grid p, .page-reading-steps { font-size: 13px; line-height: 1.65; }
.page-reading-steps li + li { margin-top: 5px; }

.metric-grid { gap: 13px; margin-block: 28px 43px; }
.metric-card { min-height: 120px; padding: 20px 19px; border-radius: 15px; }
.metric-card .metric-label { font-size: 12px; }
.metric-card strong { margin-top: 10px; font-size: 33px; }
.metric-card small { font-size: 11px; }
.overview-reader-panel, .overview-coverage-panel { padding: 24px; }
.overview-panel-head h2 { font-size: 24px; }
.overview-panel-head p { font-size: 13px; line-height: 1.65; }
.overview-reader-card, .overview-coverage-card { padding: 17px; }
.overview-reader-kicker { font-size: 10px; }
.overview-reader-card h3 { font-size: 16px; }
.overview-reader-card p, .overview-coverage-card > span:not(.overview-reader-kicker):not(.badge-stack) { font-size: 13px; line-height: 1.6; }
.overview-coverage-card > p { font-size: 11px; line-height: 1.6; }

.badge { padding: 5px 9px; border-radius: 6px; font-size: 11px; line-height: 1.25; }
.badge-stack { gap: 5px; }
.filter-row { gap: 10px; margin-block: 26px 17px; }
.filter-input, .filter-select { min-height: 44px; padding-inline: 13px; border-radius: 9px; font-size: 14px; }
.filter-input { min-width: 260px; }
.results-note, .source-filter-note { font-size: 12px; line-height: 1.65; }
.table-reading-hint { margin-block: 14px 9px; padding: 10px 13px; font-size: 13px; line-height: 1.6; }
.subnav { gap: 8px; margin-block: 28px 16px; }
.subnav button { min-height: 40px; padding: 8px 13px; border-radius: 8px; font-size: 13px; }
.subnav-label { font-size: 11px; }
.pagination { gap: 8px; margin-top: 16px; }
.pagination-button { min-height: 40px; padding-inline: 13px; font-size: 12px; }
.pagination-total { font-size: 11px; }

table { min-width: 820px; }
th { padding: 15px 17px; font-size: 11px; letter-spacing: .1em; }
td { padding: 16px 17px; font-size: 13px; line-height: 1.6; }
.id-code, .mono { font-size: 11.5px; }
.sub-cell { font-size: 11.5px; line-height: 1.5; }
.name-cell { font-size: 14px; }
.text-link { margin-top: 25px; padding-block: 10px; font-size: 13px; }
.callout, .scope-note { font-size: 13px; line-height: 1.7; }
.empty-state { padding: 68px 24px; font-size: 14px; }

.detail-drawer { width: min(760px, 100%); padding: 32px 32px 46px; }
.drawer-head { gap: 20px; padding-bottom: 22px; }
.drawer-head h2 { font-size: 36px; line-height: 1.08; }
.drawer-section { margin-top: 28px; }
.drawer-section h3, .drawer-subheading { margin-bottom: 13px; font-size: 12px; }
.detail-field { min-height: 78px; padding: 14px; }
.detail-field span { font-size: 11px; }
.detail-field strong { margin-top: 5px; font-size: 14px; line-height: 1.55; }
.drawer-list { gap: 9px; }
.drawer-list-item { padding: 12px 13px; font-size: 13px; line-height: 1.6; }
.source-explain { font-size: 13px; line-height: 1.7; }
.raw-block { font-size: 12px; line-height: 1.65; }

.interactive-map-toolbar { gap: 15px; margin-block: 22px 15px; padding: 17px; }
.interactive-map-select-group { gap: 13px; }
.interactive-map-select-group label > span, .filter-caption { font-size: 11px; }
.interactive-map-select-group select, .interactive-map-search input { min-height: 46px; padding-inline: 13px; font-size: 14px; }
.map-preset-button { min-height: 38px; padding-inline: 13px; font-size: 12px; }
.interactive-map-context-strip { margin-bottom: 18px; padding: 11px 13px; font-size: 13px; line-height: 1.6; }
.interactive-map-workspace { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: 16px; }
.interactive-map-stage-head { padding: 18px 20px 14px; }
.interactive-map-stage-head h2 { font-size: 25px; }
.interactive-map-stage-head p { font-size: 13px; }
.interactive-map-stage-shell { min-height: 640px; padding: 10px; }
.interactive-map-canvas { height: min(72vh, 760px); min-height: 520px; }
.interactive-map-stage-help { left: 21px; bottom: 20px; padding: 8px 10px; font-size: 11px; }
.interactive-map-map-legend, .interactive-map-raw-legend { padding: 11px 16px; font-size: 12px; }
.interactive-map-layer-panel .section-head, .interactive-map-profile-panel .section-head, .interactive-map-event-panel .section-head, .interactive-map-search-results .section-head { padding: 16px 17px 11px; }
.interactive-map-layer-panel h3, .interactive-map-profile-panel h3, .interactive-map-event-panel h3, .interactive-map-search-results h3 { font-size: 17px; }
.interactive-map-layer-panel p, .interactive-map-profile-panel p, .interactive-map-event-panel p, .interactive-map-search-results p { font-size: 12px; line-height: 1.55; }
.interactive-map-layer-list { gap: 7px; padding: 0 12px 13px; }
.interactive-map-layer { gap: 9px; padding: 10px 8px; }
.interactive-map-layer strong { font-size: 13px; }
.interactive-map-layer small { font-size: 10px; line-height: 1.4; }
.interactive-map-layer > b { font-size: 12px; }
.interactive-map-layer-note { padding: 0 17px 16px; font-size: 11px; line-height: 1.55; }
.interactive-map-selection, .interactive-map-selection-empty { padding: 18px; }
.interactive-map-selection-empty h3, .interactive-map-selection-title h3 { font-size: 22px; }
.interactive-map-selection-empty p, .interactive-map-selection-title p { font-size: 13px; line-height: 1.6; }
.interactive-map-inspector-stats { gap: 8px; margin-top: 17px; }
.interactive-map-inspector-stats > div { padding: 10px; }
.interactive-map-inspector-stats strong { font-size: 20px; }
.interactive-map-inspector-stats span { font-size: 10px; }
.interactive-map-field-grid { gap: 8px; margin-top: 17px; }
.interactive-map-field-grid > div { padding: 10px; }
.interactive-map-field-grid span, .interactive-map-status-stack span { font-size: 10px; }
.interactive-map-field-grid strong, .interactive-map-status-stack strong { font-size: 13px; line-height: 1.5; }

@media (max-width: 1200px) {
  .app-shell { grid-template-columns: 270px minmax(0, 1fr); }
  .page-wrap { padding-inline: 32px; }
  .topbar { padding-inline: 32px; }
  .interactive-map-workspace { grid-template-columns: minmax(0, 1fr) minmax(310px, 360px); }
}

@media (max-width: 900px) {
  .interactive-map-workspace { grid-template-columns: 1fr; }
  .interactive-map-inspector { position: static; }
  .interactive-map-canvas { height: min(70vh, 680px); }
}

@media (max-width: 760px) {
  .app-shell { display: block; min-height: 100vh; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: min(348px, 88vw);
    height: 100dvh;
    padding: 24px 18px 22px;
    border-top: 0;
    border-right: 1px solid rgba(220, 185, 107, .28);
    box-shadow: 24px 0 60px rgba(0, 0, 0, .28);
    transform: translateX(-106%);
    transition: transform .22s ease;
  }
  .app-shell.mobile-nav-open .sidebar { transform: translateX(0); }
  .app-shell.mobile-nav-open .mobile-nav-backdrop { display: block; }
  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 25;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(15, 14, 11, .56);
    backdrop-filter: blur(3px);
    cursor: pointer;
  }
  .brand-lockup { display: flex; }
  .sidebar-divider { display: block; margin-block: 25px 18px; }
  .main-nav { display: grid; gap: 6px; overflow-y: auto; overflow-x: hidden; padding-right: 4px; }
  .nav-item { width: 100%; min-height: 49px; justify-content: flex-start; padding: 12px 13px; }
  .nav-item span:not(.nav-icon) { display: inline; }
  .nav-item.is-active::before { left: -19px; inset-block: auto; width: 3px; height: 27px; }
  .nav-item.is-active::after { display: none; }
  .sidebar-foot {
    display: block;
    margin-top: 17px;
    padding-top: 13px;
    background: linear-gradient(to bottom, rgba(21, 21, 17, .96), #151511 30%);
  }
  .mobile-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 44px;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--gold-readable);
    background: rgba(255,255,255,.46);
    font-size: 13px;
    font-weight: 700;
  }
  .mobile-menu-button:hover { background: var(--paper-soft); }
  .mobile-menu-icon { font-size: 18px; line-height: 1; }
  .topbar { min-height: 76px; padding: 0 14px; gap: 9px; }
  .breadcrumb { display: none; }
  .topbar-actions { min-width: 0; flex: 1; }
  .global-search { width: 100%; min-height: 46px; padding-inline: 12px; }
  .global-search input { font-size: 13px; }
  .icon-button { width: 40px; height: 40px; }
  .page-wrap { padding: 34px 16px 46px; }
  .hero { gap: 24px; }
  .hero h1 { font-size: clamp(42px, 12vw, 56px); }
  .hero-copy { font-size: 15px; }
  .hero-note { padding: 19px; }
  .section-header { display: block; }
  .section-header h1 { font-size: clamp(36px, 10vw, 48px); }
  .section-header p { font-size: 14px; }
  .section-actions { margin-top: 19px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .metric-card { min-height: 112px; padding: 17px 15px; }
  .metric-card:last-child { grid-column: span 2; }
  .overview-reader-panel, .overview-coverage-panel { padding: 18px; }
  .overview-panel-head { display: block; }
  .overview-panel-head > .badge, .overview-panel-head > .badge-stack { display: inline-flex; margin-top: 12px; }
  .overview-panel-head h2 { font-size: 22px; }
  .overview-panel-head p { font-size: 13px; }
  .page-reading-grid { grid-template-columns: 1fr; padding: 0 14px 14px 41px; }
  .page-reading-grid p, .page-reading-steps { font-size: 13px; }
  .filter-row { display: grid; grid-template-columns: 1fr; }
  .filter-input { min-width: 0; width: 100%; }
  .subnav { gap: 8px; }
  .subnav button { width: auto; max-width: 100%; white-space: normal; text-align: left; }
  .table-reading-hint { display: block; font-size: 13px; }
  .table-reading-hint strong { display: block; margin-bottom: 3px; }
  .table-wrap { border-radius: 11px; }
  th { font-size: 10px; }
  td { padding: 15px 13px; font-size: 13px; }
  .detail-drawer { width: 100%; padding: 25px 18px 36px; }
  .drawer-head { gap: 13px; }
  .drawer-head h2 { font-size: 31px; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-field { min-height: 70px; padding: 13px; }
  .detail-field strong { font-size: 14px; }
  .interactive-map-toolbar { padding: 14px; }
  .interactive-map-select-group { grid-template-columns: 1fr; gap: 10px; }
  .interactive-map-workspace { gap: 13px; }
  .interactive-map-stage-head { display: block; }
  .interactive-map-zoom-controls { margin-top: 13px; }
  .interactive-map-stage-shell { min-height: 0; padding: 7px; }
  .interactive-map-canvas { height: min(66vh, 620px); min-height: 360px; }
  .interactive-map-stage-help { left: 14px; bottom: 14px; max-width: calc(100% - 28px); font-size: 10px; }
  .interactive-map-selection, .interactive-map-selection-empty { padding: 16px; }
  .interactive-map-selection-title h3, .interactive-map-selection-empty h3 { font-size: 22px; }
  .interactive-map-field-grid { grid-template-columns: 1fr; }
  .interactive-map-inspector-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 761px) {
  /* Tạo nền liền mạch để trạng thái phiên bản không che lẫn mục menu cuối. */
  .sidebar-foot {
    padding-top: 13px;
    background: linear-gradient(to bottom, rgba(21, 21, 17, .96), #151511 30%);
  }
}

@media (max-width: 480px) {
  .mobile-menu-button { padding-inline: 9px; }
  .mobile-menu-button > span:last-child { display: none; }
  .global-search input { font-size: 12px; }
  .page-wrap { padding-inline: 13px; }
  .hero h1 { font-size: clamp(39px, 13vw, 51px); }
  .metric-card strong { font-size: 29px; }
  .metric-card .metric-label { font-size: 11px; }
  .interactive-map-inspector-stats { gap: 5px; }
  .interactive-map-inspector-stats > div { padding: 8px 6px; }
  .interactive-map-inspector-stats strong { font-size: 17px; }
  .interactive-map-inspector-stats span { font-size: 9px; }
}
.map-slot-simulation-surface { fill: rgba(255,255,255,.46); stroke: var(--line-strong); stroke-width: 1; }
.map-slot-simulation-gridline { stroke: var(--line); stroke-width: 1; }
.map-slot-simulation-axis { stroke: var(--line-strong); stroke-width: 1.25; }
.map-slot-simulation-tick { fill: var(--muted-dark); font: 10px var(--mono); }
.map-slot-simulation-axis-title { fill: var(--gold-dark); font: 500 10px var(--mono); letter-spacing: .04em; }
.map-slot-simulation-marker { cursor: pointer; }
.map-slot-simulation-marker-dot { fill: currentColor; stroke: var(--paper-soft); stroke-width: 2; vector-effect: non-scaling-stroke; }
.map-slot-simulation-marker-chest_slot { color: var(--gold-dark); }
.map-slot-simulation-marker-loot_slot { color: var(--teal-strong); }
.map-slot-simulation-marker-monster_position { color: var(--red); }
.map-slot-simulation-marker-mixed { color: var(--muted-dark); }
.map-slot-simulation-marker:hover .map-slot-simulation-marker-dot { stroke: var(--ink); stroke-width: 2.5; }
.map-slot-simulation-count { fill: var(--paper-soft); font: 500 10px var(--mono); pointer-events: none; }
.map-slot-simulation-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 13px; margin-top: 7px; color: var(--muted-dark); font: 9px/1.4 var(--mono); }
.map-slot-simulation-legend span { display: inline-flex; align-items: center; gap: 5px; }
.map-slot-simulation-key { display: inline-block; width: 10px; height: 10px; border: 1px solid var(--paper-soft); border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); }
.map-slot-simulation-key-chest_slot { background: var(--gold-dark); }
.map-slot-simulation-key-loot_slot { background: var(--teal-strong); }
.map-slot-simulation-key-monster_position { background: var(--red); }
.map-slot-simulation-note { margin-left: auto; color: var(--muted); }
.map-slot-simulation figcaption { display: block; margin-top: 8px; color: var(--muted-dark); font: 9px/1.5 var(--mono); }
.map-slot-simulation-empty { display: grid; gap: 4px; min-height: 180px; place-content: center; color: var(--muted-dark); font-size: 11px; text-align: center; }
.map-slot-simulation-empty strong { color: var(--ink); }
.map-slot-coordinate-plot { margin: 10px 0 14px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.42); }
.map-slot-coordinate-plot-head { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.map-slot-coordinate-plot-head > div { display: grid; gap: 2px; min-width: 0; }
.map-slot-coordinate-plot-head strong { color: var(--ink); font-size: 11px; }
.map-slot-coordinate-plot-head span:not(.badge) { color: var(--muted); font: 8px/1.35 var(--mono); }
.map-slot-coordinate-plot-head .badge { flex: 0 0 auto; font-size: 8px; }
.map-slot-coordinate-plot svg { display: block; width: 100%; height: auto; margin-top: 6px; }
.map-slot-plot-axis-label { fill: #58554d; font: 8px var(--mono); }
.map-slot-plot-legend { display: flex; flex-wrap: wrap; gap: 5px 9px; margin-top: 5px; color: var(--muted-dark); font: 8px/1.3 var(--mono); }
.map-slot-plot-legend span { display: inline-flex; align-items: center; gap: 4px; }
.map-slot-plot-dot { display: inline-block; width: 8px; height: 8px; border: 1px solid #f6f4ee; border-radius: 50%; box-shadow: 0 0 0 1px rgba(32,31,24,.14); }
.map-slot-plot-dot-chest { background: #9c7428; }
.map-slot-plot-dot-loot { background: #2b7378; }
.map-slot-plot-dot-monster { background: #8b4b59; }
.map-slot-coordinate-plot figcaption { display: block; margin-top: 6px; color: var(--muted-dark); font: 9px/1.4 var(--mono); }
.map-slot-coordinate-plot-empty { display: grid; gap: 4px; color: var(--muted-dark); font-size: 10px; }
.map-slot-coordinate-plot-empty strong { color: var(--ink); }
.map-slot-image-wrap { margin: 10px 0 0; min-width: 0; }
.map-slot-image-wrap img { display: block; width: 100%; height: 166px; border-radius: 8px; object-fit: cover; background: #292821; }
.map-slot-image-wrap figcaption { display: grid; gap: 3px; margin-top: 7px; color: var(--muted); font: 9px/1.45 var(--mono); overflow-wrap: anywhere; }
.map-slot-image-wrap figcaption strong { color: var(--ink); font-size: 10px; }
.map-slot-image-wrap .asset-open-link { margin-inline: 0; }
.map-slot-no-image { display: grid; place-items: center; min-height: 166px; margin-top: 10px; padding: 14px; border: 1px dashed rgba(32,31,24,.2); border-radius: 8px; color: var(--muted); background: rgba(32,31,24,.04); text-align: center; }
.map-slot-no-image strong { color: var(--ink); }
.map-slot-no-image span, .map-slot-no-image small { display: block; margin-top: 5px; font: 9px/1.45 var(--mono); overflow-wrap: anywhere; }
.map-slot-detail-context { display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr); gap: 12px; align-items: start; }
.map-slot-detail-context .map-slot-image-wrap { margin-top: 0; }
.map-slot-detail-context .map-slot-no-image { margin-top: 0; min-height: 150px; }
.map-slot-context-links { display: grid; gap: 9px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.28); }
.map-slot-context-links > .sub-cell { line-height: 1.5; }
.map-slot-context-link-list { display: grid; gap: 7px; }
.map-slot-context-link { display: flex; align-items: start; justify-content: space-between; gap: 10px; padding: 9px; border: 1px solid rgba(183,144,71,.22); border-radius: 8px; background: rgba(183,144,71,.045); }
.map-slot-context-link > div { display: grid; gap: 3px; min-width: 0; }
.map-slot-context-link strong { color: var(--ink); font-size: 12px; }
.map-slot-context-link .sub-cell { overflow-wrap: anywhere; }
.map-slot-context-link .inline-action { flex: 0 0 auto; min-height: 30px; padding: 0 9px; border: 1px solid rgba(124,90,36,.35); border-radius: 7px; color: var(--gold-dark); background: var(--paper); font: 700 9px var(--mono); cursor: pointer; white-space: nowrap; }
.map-slot-context-link .inline-action:hover { color: var(--ink); background: var(--paper-deep); }
.map-slot-context-links-empty { min-height: 100%; align-content: center; color: var(--muted-dark); font-size: 10px; line-height: 1.5; }
.map-slot-context-links-empty strong { color: var(--ink); }
.map-slot-boundary-list { display: grid; gap: 7px; margin-top: 10px; }
.map-slot-boundary-list > div { display: flex; align-items: start; justify-content: space-between; gap: 10px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.2); color: var(--muted-dark); font-size: 10px; }
.map-slot-boundary-list > div > span:first-child { min-width: 0; }
.map-slot-table-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-top: 18px; }
.map-slot-table-head h3 { font: 700 18px var(--display); }
.map-slot-table-head p { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.map-slot-table { min-width: 920px; }
.map-slot-table td { vertical-align: top; }
.map-slot-kind-cell { display: flex; align-items: flex-start; gap: 8px; min-width: 118px; }
.map-slot-kind-cell > span:last-child { display: grid; gap: 3px; min-width: 0; }
.map-slot-kind-media { display: grid; justify-items: center; gap: 2px; flex: 0 0 34px; min-width: 34px; }
.map-slot-kind-media img { width: 30px; height: 30px; object-fit: contain; border: 1px solid rgba(32,31,24,.2); border-radius: 6px; background: #292821; }
.map-slot-kind-media small { color: #5f4a22; font: 8px/1.2 var(--mono); text-align: center; }
.map-slot-kind-symbol { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border: 1px solid rgba(32,31,24,.16); border-radius: 7px; font: 700 13px var(--mono); }
.map-slot-kind-symbol-chest_slot { color: #694615; background: #efe3c1; }
.map-slot-kind-symbol-loot_slot { color: #205560; background: #d9eceb; }
.map-slot-kind-symbol-monster_position { color: #6c3e46; background: #f0dfe2; }
.map-slot-kind-symbol-unknown { color: #4c4a44; background: #e1dfd7; }
.map-slot-kind-legend { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 8px; color: var(--muted-dark); font: 9px/1.4 var(--mono); }
.map-slot-kind-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.map-slot-kind-legend-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font: 700 10px var(--mono); }
.map-slot-kind-legend-chest { color: #694615; background: #efe3c1; }
.map-slot-kind-legend-loot { color: #205560; background: #d9eceb; }
.map-slot-kind-legend-monster { color: #6c3e46; background: #f0dfe2; }
.map-slot-position { display: grid; gap: 2px; }
.map-slot-callout { margin-top: 12px; }
.key-strip { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.key-pill { padding: 5px 7px; border: 1px solid rgba(183,144,71,.24); border-radius: 6px; color: var(--gold-dark); background: rgba(183,144,71,.08); font: 9px var(--mono); cursor: pointer; }
.key-pill:hover { border-color: rgba(183,144,71,.6); background: rgba(183,144,71,.15); }
.key-pill-inner { display: inline-flex; align-items: center; gap: 6px; }
.key-list { display: grid; gap: 11px; margin-top: 12px; }
.key-entry { padding: 9px; border: 1px solid rgba(183,144,71,.18); border-radius: 8px; background: rgba(183,144,71,.035); }
.key-entry .key-pill { display: inline-block; }
.key-description { display: block; margin-top: 7px; color: var(--muted-dark); font-size: 10px; line-height: 1.55; }
.key-status { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.key-entry-meta, .key-lore, .key-source { display: block; margin-top: 6px; color: var(--muted); font: 9px/1.45 var(--mono); overflow-wrap: anywhere; }
.key-lore { color: var(--muted-dark); font-family: var(--sans); font-size: 10px; }
.key-catalog-coverage { margin: 22px 0 16px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.26); }
.key-catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.key-catalog-grid article { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.32); }
.key-catalog-grid strong { display: block; color: var(--ink); font-size: 11px; line-height: 1.35; }
.key-catalog-grid b { display: block; margin-top: 9px; color: var(--gold-dark); font: 700 24px var(--display); }
.key-catalog-grid article > span:not(.badge-stack) { display: block; min-height: 30px; margin-top: 2px; color: var(--muted-dark); font-size: 10px; line-height: 1.45; }
.key-catalog-grid .badge-stack { display: block; margin-top: 8px; }
.key-catalog-note { margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(35,34,29,.14); color: var(--muted); font: 9px/1.55 var(--mono); }
.key-catalog-index { margin: 0 0 16px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.22); }
.key-index-table { min-width: 900px; }
.boss-card { min-height: 250px; }
.boss-variant-summary { display: grid; gap: 4px; margin-top: 4px; }
.boss-variant-summary .room-item-line { align-items: start; }
.boss-variant-copy { display: grid; flex: 1; min-width: 0; gap: 2px; }
.boss-variant-name { color: var(--ink); font-size: 10px; line-height: 1.35; }
.boss-variant-copy .sub-cell { overflow-wrap: anywhere; }
.boss-variant-loot { color: var(--gold-dark); font: 10px/1.35 var(--mono); }
.boss-variant-summary .candidate-preview { padding-left: 8px; }
.boss-variant-candidates { display: grid; gap: 5px; }
.boss-info p { margin-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.boss-loot strong { color: var(--ink); font-size: 11px; }
.boss-prefab { margin-top: 12px; color: var(--gold-dark); font: 9px/1.55 var(--mono); word-break: break-word; }
.boss-detail-link { margin-top: 7px; font: 9px var(--mono); }
.boss-title-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.boss-name-hint { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 7px; padding: 6px 8px; border-left: 2px solid rgba(183, 144, 71, .68); border-radius: 0 6px 6px 0; background: rgba(183, 144, 71, .08); color: var(--gold-dark); font: 9px/1.45 var(--mono); }
.boss-name-hint-label { color: var(--muted-dark); }
.boss-name-hint strong { color: var(--ink); font-size: 10px; }
.boss-map-icon-list { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; vertical-align: middle; }
.boss-map-icon-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 6px; border: 1px solid rgba(183, 144, 71, .3); border-radius: 7px; color: var(--muted-dark); background: rgba(183, 144, 71, .07); vertical-align: middle; }
.boss-map-icon-chip img, .boss-map-icon-placeholder { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 5px; object-fit: contain; background: #292821; }
.boss-map-icon-placeholder { display: grid; place-items: center; color: #d6cdb6; font: 10px var(--mono); }
.boss-map-icon-chip strong { display: block; color: var(--ink); font-size: 10px; line-height: 1.25; }
.boss-map-icon-chip small { display: block; max-width: 240px; margin-top: 2px; color: var(--muted-dark); font: 9px/1.3 var(--mono); overflow-wrap: anywhere; }
.boss-map-icon-chip.is-compact { padding: 3px 5px; }
.boss-map-icon-chip.is-compact img, .boss-map-icon-chip.is-compact .boss-map-icon-placeholder { width: 20px; height: 20px; }
.boss-map-icon-chip.is-compact small { max-width: 190px; }
.boss-map-icon-unresolved { color: var(--muted); font: 9px var(--mono); }
.boss-map-context { display: grid; gap: 6px; margin-top: 9px; padding: 8px 9px; border: 1px solid rgba(36, 92, 96, .22); border-radius: 8px; color: var(--muted-dark); background: rgba(219, 235, 231, .38); }
.boss-map-context-unresolved { border-color: rgba(122, 51, 40, .24); background: rgba(157, 68, 55, .055); }
.boss-map-context-list { display: grid; gap: 5px; }
.boss-map-context-entry { display: grid; gap: 2px; min-width: 0; padding: 5px 7px; border-left: 2px solid rgba(36, 92, 96, .42); background: rgba(255, 255, 255, .28); }
.boss-map-context-entry strong { color: var(--ink); font-size: 11px; overflow-wrap: anywhere; }
.boss-map-context-entry span, .boss-map-context-entry small { color: #46433c; font: 10px/1.4 var(--mono); overflow-wrap: anywhere; }
.boss-map-context-entry small { color: #6a4035; }
.boss-map-slot-groups { display: grid; gap: 13px; }
.boss-map-slot-group { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .22); }
.boss-map-slot-group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.boss-map-slot-group-head h4 { color: var(--ink); font: 700 15px var(--display); overflow-wrap: anywhere; }
.boss-map-slot-group-head .map-slot-context { margin-top: 4px; }
.boss-map-slot-media { max-width: 420px; margin-top: 10px; }
.boss-map-slot-media .map-slot-image-wrap { max-width: 420px; }
.boss-map-slot-media .map-slot-no-image { min-height: 64px; }
.boss-avatar { width: 52px; height: 52px; border: 1px solid rgba(32, 31, 24, .16); border-radius: 10px; object-fit: contain; background: #fbfaf6; flex: 0 0 auto; }
.boss-variant-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.boss-catalog-table { min-width: 1220px; }
.boss-catalog-table td { vertical-align: top; }
.boss-catalog-table .boss-avatar { display: block; margin-bottom: 6px; }
.boss-mode-summary { min-width: 150px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.34); }
.boss-mode-summary.is-compact { min-width: 130px; padding: 7px 8px; }
.boss-mode-summary strong { color: var(--ink); font-size: 11px; }
.boss-mode-summary .sub-cell { line-height: 1.5; }
.boss-mode-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.boss-mode-details { margin-top: 8px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.28); overflow: hidden; }
.boss-mode-details summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; color: var(--gold-dark); cursor: pointer; list-style-position: inside; font: 500 10px var(--mono); }
.boss-mode-details summary:hover { background: rgba(183,144,71,.08); }
.boss-mode-details summary strong { color: var(--ink); font: 700 15px var(--display); }
.boss-mode-details summary small { display: block; margin-top: 4px; color: var(--muted); font: 9px var(--mono); }
.boss-mode-detail-meta { display: grid; gap: 7px; padding: 0 12px 10px; }
.boss-drop-table { min-width: 760px; border: 0; }
.boss-drop-table th { padding: 9px 10px; }
.boss-drop-table td { padding: 9px 10px; font-size: 10px; }
.boss-drop-table .inline-item-link { max-width: 230px; }

.stat-board { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px; margin-top: 24px; }
.stat-card { padding: 21px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.3); }
.stat-card h3 { font: 700 21px var(--display); }
.stat-card p { margin-top: 9px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.attr-number { display: flex; align-items: baseline; gap: 6px; margin-top: 23px; color: var(--gold-dark); font: 700 40px var(--display); }
.attr-number small { color: var(--muted); font: 10px var(--mono); }
.stat-list { display: grid; gap: 7px; margin-top: 18px; }
.stat-list-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 10px; }
.stat-list-row span:last-child { color: var(--gold-dark); font: 10px var(--mono); }
.callout { margin-top: 20px; padding: 14px 16px; border-left: 3px solid var(--gold); color: var(--muted-dark); background: rgba(183,144,71,.08); font-size: 11px; line-height: 1.65; }
.road-branch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.road-branch-card { padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-soft); }
.road-branch-card strong { display: block; margin-top: 9px; color: var(--ink); font: 700 20px var(--display); }
.road-branch-card span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.road-subsection { margin-top: 24px; }
.road-table { min-width: 1040px; }
.road-icon { width: 34px; height: 34px; border: 1px solid rgba(215, 184, 107, .32); border-radius: 8px; object-fit: contain; background: #292821; }
.road-description { max-width: 410px; color: var(--muted-dark); line-height: 1.55; }
.road-alt { margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--line-strong); color: var(--muted-dark); font-size: 10px; }
.road-alt summary { color: var(--gold-dark); cursor: pointer; font: 500 9px var(--mono); }
.road-alt span, .road-alt small { display: block; margin-top: 6px; line-height: 1.55; }
.road-alt small { color: var(--muted); font: 9px var(--mono); overflow-wrap: anywhere; }

.evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.evidence-card { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.3); }
.evidence-card h3 { font: 700 18px var(--display); }
.evidence-card p { margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.evidence-card code { display: block; margin-top: 15px; padding: 10px; border-radius: 7px; color: #5c4c2f; background: rgba(183,144,71,.1); font: 9px/1.6 var(--mono); overflow-wrap: anywhere; }
.source-list { display: grid; gap: 7px; margin-top: 15px; }
.source-list div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--muted-dark); font-size: 10px; }
.source-list span:last-child { color: var(--gold-dark); font: 9px var(--mono); text-align: right; }
.source-audit-list { display: grid; gap: 8px; margin-top: 15px; }
.source-audit-entry { border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.34); }
.source-audit-entry > summary { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 10px 12px; cursor: pointer; list-style: none; }
.source-audit-entry > summary::-webkit-details-marker { display: none; }
.source-audit-entry > summary::after { flex: 0 0 auto; content: "＋"; color: var(--teal-strong); font: 700 14px/1 var(--mono); }
.source-audit-entry[open] > summary::after { content: "－"; }
.source-audit-summary-main { display: grid; gap: 4px; min-width: 0; }
.source-audit-summary-main strong { color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.source-audit-summary-main small { color: var(--muted-dark); font-size: 11px; line-height: 1.5; }
.source-audit-summary-decision { max-width: 48%; color: var(--gold-dark); font: 10px/1.5 var(--mono); text-align: right; overflow-wrap: anywhere; }
.source-audit-detail { display: grid; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.source-audit-detail > div { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 8px; color: var(--muted-dark); font-size: 11px; line-height: 1.55; }
.source-audit-detail > div > b { color: var(--ink); }
.source-audit-detail .mono { overflow-wrap: anywhere; }
.method-panel { margin-top: 24px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.3); }
.method-panel-head { display: flex; align-items: start; justify-content: space-between; gap: 22px; }
.method-panel-head h2 { margin-top: 6px; font: 700 25px var(--display); }
.method-panel-head p { max-width: 760px; margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.method-panel-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.method-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.method-summary-grid > div { padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.34); }
.method-summary-grid strong { display: block; color: var(--ink); font: 700 20px var(--display); }
.method-summary-grid span { display: block; margin-top: 4px; color: var(--muted); font: 9px/1.45 var(--mono); }
.method-step-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.method-step { min-height: 132px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper-soft); }
.method-step-number { color: var(--gold-dark); font: 700 10px var(--mono); letter-spacing: .08em; }
.method-step h3 { margin-top: 9px; color: var(--ink); font: 700 16px var(--display); }
.method-step p { margin-top: 6px; color: var(--muted-dark); font-size: 10px; line-height: 1.55; }
.method-table-wrap { margin-top: 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; }
.method-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; }
.method-table th { padding: 10px 12px; color: var(--gold-dark); background: rgba(183,144,71,.08); font: 500 9px var(--mono); letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.method-table td { padding: 11px 12px; border-top: 1px solid var(--line); color: var(--muted-dark); font-size: 10px; line-height: 1.55; overflow-wrap: anywhere; vertical-align: top; }
.method-table th:first-child, .method-table td:first-child { width: 23%; color: var(--ink); }
.method-table th:nth-child(2), .method-table td:nth-child(2) { width: 25%; }
.method-table th:nth-child(3), .method-table td:nth-child(3) { width: 32%; }
.method-table th:last-child, .method-table td:last-child { width: 20%; }
.method-callout { margin-top: 14px; }
.requirement-audit-panel { background: linear-gradient(135deg, rgba(255,255,255,.46), rgba(239,232,215,.42)); }
.requirement-audit-table { min-width: 1040px; }
.requirement-audit-table th:first-child, .requirement-audit-table td:first-child { width: 18%; }
.requirement-audit-table th:nth-child(2), .requirement-audit-table td:nth-child(2) { width: 22%; }
.requirement-audit-table th:nth-child(3), .requirement-audit-table td:nth-child(3) { width: 17%; }
.requirement-audit-table th:nth-child(4), .requirement-audit-table td:nth-child(4) { width: 28%; }
.requirement-audit-table th:last-child, .requirement-audit-table td:last-child { width: 15%; }
.requirement-title { display: block; color: var(--ink); font-size: 13px; line-height: 1.45; }
.requirement-coverage { display: block; color: var(--ink); font: 600 10px/1.6 var(--mono); }
.requirement-gap { display: block; color: var(--muted-dark); font-size: 10px; line-height: 1.6; }
.requirement-route-list { display: flex; flex-wrap: wrap; gap: 6px; }
.research-requirement-link { display: inline-flex; align-items: center; padding: 6px 8px; border: 1px solid rgba(183,144,71,.38); border-radius: 7px; color: var(--teal-strong); background: rgba(255,255,255,.48); font-size: 10px; font-weight: 700; line-height: 1.3; text-align: left; }
.research-requirement-link:hover { border-color: var(--gold-dark); color: var(--ink); background: rgba(183,144,71,.12); }
.research-page-audit-panel { background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(228,239,234,.34)); }
.research-page-audit-stages { display: grid; gap: 10px; margin-top: 18px; }
.research-page-audit-stage { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.28); }
.research-page-audit-stage > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; color: var(--gold-dark); cursor: pointer; list-style: none; }
.research-page-audit-stage > summary::-webkit-details-marker { display: none; }
.research-page-audit-stage > summary::after { flex: 0 0 auto; margin-left: auto; color: var(--teal-strong); content: "＋"; font: 700 15px/1 var(--mono); }
.research-page-audit-stage[open] > summary::after { content: "－"; }
.research-page-audit-stage > summary > span:first-child { display: grid; gap: 3px; min-width: 0; }
.research-page-audit-stage > summary strong { color: var(--ink); font-size: 14px; line-height: 1.35; }
.research-page-audit-stage > summary small { color: var(--muted-dark); font: 10px/1.4 var(--mono); }
.research-page-audit-stage > summary > .mono { flex: 0 0 auto; color: var(--gold-dark); font-size: 11px; }
.research-page-audit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 0 10px 10px; }
.research-page-audit-card { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.42); }
.research-page-audit-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.research-page-audit-card-head > div { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.research-page-audit-index { flex: 0 0 auto; padding-top: 2px; color: var(--gold-dark); font: 700 10px var(--mono); }
.research-page-audit-card h3 { color: var(--ink); font: 700 17px/1.2 var(--display); overflow-wrap: anywhere; }
.research-page-audit-question { margin-top: 6px; color: var(--muted-dark); font-size: 10px; line-height: 1.5; }
.research-page-audit-coverage { margin-top: 9px; padding: 8px 9px; border-left: 2px solid var(--teal-strong); border-radius: 0 6px 6px 0; background: #e4efeb; }
.research-page-audit-coverage b, .research-page-audit-fields b { display: block; margin-bottom: 3px; color: var(--gold-dark); font: 700 9px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.research-page-audit-coverage span, .research-page-audit-fields span { color: var(--muted-dark); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.research-page-audit-fields { display: grid; gap: 7px; margin-top: 9px; }
.research-page-audit-fields > div { padding-top: 7px; border-top: 1px dashed var(--line-strong); }
.research-page-audit-card .requirement-route-list { margin-top: 9px; }
.research-page-audit-card .research-requirement-link { width: 100%; justify-content: center; }
.research-page-audit-stage > summary:focus-visible, .research-page-audit-card .research-requirement-link:focus-visible { outline: 2px solid var(--teal-strong); outline-offset: 2px; }
.external-research-panel { background: linear-gradient(135deg, rgba(255,255,255,.48), rgba(240,234,220,.48)); }
.external-research-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 18px; }
.external-research-card { min-width: 0; padding: 12px 13px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.46); }
.external-research-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.external-research-card-head > div { min-width: 0; }
.external-research-type { display: block; color: var(--gold-dark); font: 700 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.external-research-card h3 { margin-top: 5px; color: var(--ink); font: 700 16px/1.25 var(--display); overflow-wrap: anywhere; }
.external-research-card p { margin-top: 8px; color: var(--muted-dark); font-size: 10px; line-height: 1.55; }
.external-research-meta { display: grid; gap: 4px; margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line-strong); color: var(--muted-dark); font-size: 10px; line-height: 1.45; }
.external-research-meta b { color: var(--gold-dark); }
.external-research-link { display: inline-flex; margin-top: 10px; color: var(--teal-strong); font-size: 10px; font-weight: 700; line-height: 1.4; text-decoration: none; }
.external-research-link:hover, .external-research-link:focus-visible { color: var(--ink); text-decoration: underline; outline: none; }
.external-research-card > small { display: block; margin-top: 7px; color: var(--muted); font: 9px/1.4 var(--mono); overflow-wrap: anywhere; }
.runtime-research-panel { background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(235,239,232,.42)); }
.runtime-research-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 18px; }
.runtime-research-card { min-width: 0; padding: 12px 13px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.46); }
.runtime-research-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.runtime-research-priority { display: inline-flex; max-width: 100%; padding: 5px 7px; border-radius: 5px; font: 700 9px/1.3 var(--mono); letter-spacing: .04em; overflow-wrap: anywhere; }
.runtime-research-priority-p0 { color: #6f3329; background: #f0d8d2; }
.runtime-research-priority-p1 { color: #5b471e; background: #eee2bd; }
.runtime-research-card h3 { margin-top: 9px; color: var(--ink); font: 700 17px/1.25 var(--display); overflow-wrap: anywhere; }
.runtime-research-field { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line-strong); }
.runtime-research-field b { display: block; margin-bottom: 3px; color: var(--gold-dark); font: 700 9px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.runtime-research-field span { display: block; color: var(--muted-dark); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.runtime-research-card .requirement-route-list { margin-top: 10px; }
.runtime-research-card .research-requirement-link { flex: 1 1 auto; justify-content: center; }

.modal-backdrop { position: fixed; inset: 0; z-index: 20; display: flex; justify-content: flex-end; background: rgba(15, 14, 11, .42); backdrop-filter: blur(3px); }
.detail-drawer { width: min(620px, 100%); height: 100%; padding: 25px 25px 35px; overflow-y: auto; background: var(--paper-soft); box-shadow: -20px 0 60px rgba(0,0,0,.2); animation: drawer-in .22s ease; }
@keyframes drawer-in { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.drawer-head { display: flex; justify-content: space-between; align-items: start; gap: 15px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin-top: 8px; font: 700 29px/1.05 var(--display); }
.drawer-head-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.drawer-back { min-height: 32px; padding: 0 10px; border: 1px solid rgba(124,90,36,.35); border-radius: 7px; color: var(--gold-dark); background: var(--paper); font: 700 10px var(--mono); white-space: nowrap; }
.drawer-back:hover { color: var(--ink); background: var(--paper-deep); }
.drawer-close { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: transparent; font-size: 18px; }
.drawer-section { margin-top: 22px; }
.drawer-section h3 { margin-bottom: 10px; color: var(--gold-dark); font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.detail-field { min-height: 55px; padding: 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.detail-field span { display: block; color: var(--muted); font: 9px var(--mono); }
.detail-field strong { display: block; margin-top: 4px; color: var(--ink); font-size: 11px; line-height: 1.45; word-break: break-word; }
.raw-block { max-height: 300px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; color: #645c4e; background: #e9e5da; font: 9px/1.65 var(--mono); white-space: pre-wrap; overflow: auto; }
.drawer-list { display: grid; gap: 6px; }
.drawer-list-item { padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted-dark); background: rgba(255,255,255,.34); font-size: 10px; line-height: 1.5; }
.drawer-list-item strong + .sub-cell { color: var(--muted-dark); font: 11px/1.65 var(--sans); white-space: pre-wrap; }
.secondary-content { border-color: rgba(183,144,71,.34); background: rgba(183,144,71,.08); }
.content-status { margin-top: 8px; }
.container-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.treasure-source-grid { display: grid; gap: 8px; }
.treasure-source-card { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted-dark); background: rgba(255,255,255,.34); }
.treasure-source-card.click-row:hover { border-color: rgba(183,144,71,.58); background: rgba(183,144,71,.09); }
.treasure-source-card-media { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.treasure-source-card-copy { min-width: 0; }
.treasure-source-card-copy strong { color: var(--ink); font-size: 12px; line-height: 1.4; }
.treasure-source-card-copy .sub-cell { overflow-wrap: anywhere; }
.treasure-dedicated-source { display: grid; gap: 3px; min-width: 0; margin-top: 4px; }
.treasure-dedicated-source > .badge { width: fit-content; max-width: 100%; white-space: normal; line-height: 1.25; }
.treasure-source-note { color: #4f4a40; font-size: 9px; line-height: 1.35; }
.treasure-source-raw { overflow-wrap: anywhere; word-break: break-word; }
.treasure-source-map { width: 78px; height: 54px; border: 1px solid rgba(32, 31, 24, .18); border-radius: 7px; object-fit: cover; background: #292821; }
.treasure-source-chest-icon { width: 28px; height: 28px; border: 1px solid rgba(32, 31, 24, .2); border-radius: 6px; object-fit: contain; background: #292821; }
.treasure-source-more { margin-top: 8px; }
.chest-code-audit { margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.3); }
.chest-code-audit h2 { margin-top: 5px; color: var(--ink); font: 700 20px var(--display); }
.chest-code-audit p { max-width: 780px; margin-top: 7px; color: var(--muted-dark); font-size: 10px; line-height: 1.6; }
.chest-code-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.chest-code-grid article { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper-soft); }
.chest-code-grid article > strong { display: block; color: var(--ink); font-size: 12px; }
.chest-code-grid article > small { display: block; margin-top: 8px; color: var(--muted-dark); font: 9px/1.45 var(--mono); }
.chest-code-values { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.chest-code-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 6px; border: 1px solid rgba(183,144,71,.32); border-radius: 6px; color: var(--ink); background: rgba(183,144,71,.08); }
.chest-code-chip strong { font: 700 11px var(--mono); }
.chest-code-chip small { color: var(--muted-dark); font: 9px var(--mono); }
.chest-code-note { padding-top: 10px; border-top: 1px dashed var(--line-strong); }
.source-record-extra { margin-top: 7px; padding: 6px 8px; border-left: 2px solid rgba(183,144,71,.48); color: var(--muted-dark); font-size: 9px; }

.item-thumb, .image-placeholder { width: 38px; height: 38px; border: 1px solid rgba(32, 31, 24, .16); border-radius: 9px; object-fit: contain; background: #fbfaf6; }
.image-secondary { border-style: dashed; border-color: rgba(183, 144, 71, .72); background: #fffaf0; }
.image-placeholder { display: grid; place-items: center; color: #4f4b43; font: 11px var(--mono); }
.image-gap-placeholder { padding: 3px; font-size: 0; text-align: center; }
.image-gap-placeholder::after { content: "Chưa có ảnh exact"; color: #6a4035; font: 9px/1.25 var(--sans); }
.image-placeholder.container-map-thumb { background: #292821; color: #d6cdb6; }
.tiny-thumb { width: 24px; height: 24px; border: 1px solid rgba(32, 31, 24, .16); border-radius: 6px; object-fit: contain; background: #fbfaf6; }
.room-item-name { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.drawer-title-wrap { display: flex; align-items: center; gap: 13px; min-width: 0; }
.drawer-media { width: 68px; height: 68px; border: 1px solid rgba(32, 31, 24, .16); border-radius: 14px; object-fit: contain; background: #fbfaf6; flex: 0 0 auto; }
.source-section-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.source-explain { max-width: 440px; margin: -4px 0 12px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.item-acquisition-summary { margin-bottom: 12px; padding: 15px; border: 1px solid rgba(183,144,71,.34); border-radius: 12px; background: linear-gradient(145deg, rgba(255,250,239,.72), rgba(246,242,232,.6)); }
.item-acquisition-summary-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.item-acquisition-summary-head h3 { margin-top: 4px; color: var(--ink); font: 700 18px var(--display); }
.item-acquisition-summary-head p { max-width: 680px; margin-top: 6px; color: var(--muted-dark); font-size: 11px; line-height: 1.55; }
.item-acquisition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.item-acquisition-card { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.52); }
.item-acquisition-card-head { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.item-acquisition-card-head strong { min-width: 0; color: var(--ink); font-size: 12px; overflow-wrap: anywhere; }
.item-acquisition-card-head .badge { flex: 0 0 auto; }
.item-acquisition-card-role { display: block; margin-top: 3px; font: 700 9px/1.35 var(--mono); overflow-wrap: anywhere; }
.item-acquisition-card-role.role-direct { color: #2f623b; }
.item-acquisition-card-role.role-context { color: #6e4d0f; }
.item-acquisition-card-role.role-mechanism { color: #4b5660; }
.item-acquisition-card-role.role-structure { color: #5f4a70; }
.item-acquisition-card-role.role-reference { color: #6a4035; }
.item-acquisition-card-note { display: block; margin-top: 4px; color: var(--muted); font: 10px/1.45 var(--mono); }
.item-acquisition-card-line { margin-top: 7px; color: var(--muted-dark); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.item-acquisition-card-line b { color: var(--gold-dark); font-weight: 700; }
.item-acquisition-card-actions { margin-top: 9px; padding-top: 8px; border-top: 1px dashed rgba(183,144,71,.28); color: var(--muted-dark); font-size: 10px; line-height: 1.45; }
.item-acquisition-card-action-label { display: block; color: var(--gold-dark); font: 700 10px var(--mono); }
.item-acquisition-card-links { display: grid; gap: 4px; margin-top: 5px; }
.source-summary-link { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; padding: 5px 6px; border: 1px solid rgba(36,92,96,.2); border-radius: 6px; color: var(--teal-strong); background: rgba(36,92,96,.055); text-align: left; cursor: pointer; }
.source-summary-link:hover, .source-summary-link:focus-visible { border-color: rgba(36,92,96,.48); color: #17484b; background: rgba(36,92,96,.12); outline: none; }
.source-summary-link span { min-width: 0; overflow-wrap: anywhere; font-size: 11px; font-weight: 700; }
.source-summary-link small { flex: 0 0 auto; color: var(--muted-dark); font: 9px/1.35 var(--mono); text-align: right; }
.item-acquisition-card-media { display: grid; gap: 5px; margin-top: 9px; padding-top: 8px; border-top: 1px dashed rgba(183,144,71,.22); }
.item-acquisition-card-media-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.item-acquisition-card-media-entry { display: grid; gap: 4px; min-width: 0; padding: 5px; border: 1px solid rgba(32,31,24,.1); border-radius: 7px; background: rgba(255,255,255,.42); }
.item-acquisition-card-media-entry > .source-record-media { flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 5px; min-width: 0; }
.item-acquisition-card-media-entry .source-record-media-block { min-width: 0; }
.item-acquisition-card-media-entry .source-record-thumb { width: 38px; height: 38px; }
.item-acquisition-card-media-entry .source-record-map-thumb { width: 44px; height: 30px; }
.item-acquisition-card-media-entry .source-record-media-block small { max-width: 54px; font-size: 8px; line-height: 1.2; overflow-wrap: anywhere; }
.item-acquisition-card-media-entry > span:last-child { color: var(--muted-dark); font: 9px/1.3 var(--mono); overflow-wrap: anywhere; }
.item-acquisition-card-media-empty { color: var(--muted); font: 10px/1.45 var(--mono); }
.item-acquisition-card-unresolved { display: block; margin-top: 5px; color: var(--muted); font: 9px/1.4 var(--mono); }
.source-graph-reading-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.source-graph-reading-strip > div { padding: 8px 9px; border: 1px solid rgba(183,144,71,.26); border-radius: 7px; background: rgba(255,255,255,.38); }
.source-graph-reading-strip strong { display: block; color: var(--ink); font: 700 17px var(--display); }
.source-graph-reading-strip span { display: block; margin-top: 2px; color: var(--muted-dark); font: 9px/1.35 var(--mono); }
.source-record-list { display: grid; gap: 8px; max-height: 620px; overflow: auto; padding-right: 3px; }
.source-record-media-empty { display: flex; flex: 0 0 92px; flex-direction: column; justify-content: center; gap: 4px; min-height: 70px; padding: 7px; border: 1px dashed rgba(106, 64, 53, .3); border-radius: 8px; color: #6a4035; background: rgba(106, 64, 53, .045); text-align: center; }
.source-record-media-empty span { font-size: 10px; line-height: 1.35; }
.source-record-media-empty small { color: var(--muted); font: 8px/1.35 var(--mono); overflow-wrap: anywhere; }
.room-candidate-cta { display: block; margin-top: 5px; color: var(--teal-strong); font: 700 10px/1.45 var(--mono); }
.source-graph-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.source-graph-summary > div { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.34); }
.source-graph-summary strong { display: block; color: var(--ink); font: 700 17px var(--display); }
.source-graph-summary span { display: block; margin-top: 3px; color: var(--muted); font: 8px var(--mono); }
.source-record-groups { display: grid; gap: 8px; }
.source-record-group { border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.22); overflow: hidden; }
.source-record-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; color: var(--muted-dark); cursor: pointer; list-style: none; }
.source-record-group > summary::-webkit-details-marker { display: none; }
.source-record-group > summary::before { content: "＋"; width: 14px; color: var(--gold-dark); font: 12px var(--mono); }
.source-record-group[open] > summary::before { content: "−"; }
.source-record-group > summary > span:first-of-type { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
.source-record-group > summary > .source-group-summary-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.source-record-group > summary strong { min-width: 0; color: var(--ink); font-size: 11px; overflow-wrap: anywhere; }
.source-record-group > summary small { color: var(--muted); font: 10px/1.45 var(--mono); }
.source-group-preview { display: block; max-width: 100%; color: var(--muted-dark); font: 11px/1.5 var(--mono); overflow-wrap: anywhere; }
.source-group-preview b { color: var(--gold-dark); font-weight: 700; }
.item-source-table-cell { min-width: 190px; max-width: 320px; }
.item-source-table-cell .source-group-preview { font-size: 10px; line-height: 1.45; }
.item-source-table-cell > .sub-cell { display: block; margin-top: 3px; }
.item-source-kinds { margin-top: 5px; }
.item-source-kinds summary { color: var(--teal-strong); font: 600 10px/1.4 var(--mono); cursor: pointer; }
.item-source-kinds summary:hover, .item-source-kinds summary:focus-visible { color: #17484b; text-decoration: underline; outline: none; }
.item-source-kinds-list { display: block; margin-top: 4px; color: var(--muted-dark); font: 10px/1.45 var(--mono); overflow-wrap: anywhere; }
.source-record-group-body { display: grid; gap: 8px; padding: 0 10px 10px; }
.source-record { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted-dark); background: rgba(255,255,255,.36); }
.source-record-content { min-width: 0; }
.source-record-media { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.source-record-media-block { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.source-record-media-block small { color: var(--muted-dark); font: 9px/1.25 var(--mono); text-align: center; }
.source-record-thumb, .source-record-map-thumb { width: 56px; height: 56px; object-fit: cover; border: 1px solid rgba(32,31,24,.14); border-radius: 8px; background: var(--paper-deep); }
.source-record-map-thumb { width: 62px; height: 42px; }
.chest-ui-reference { gap: 4px; }
.chest-ui-reference-pair { display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 30px; }
.source-record-chest-thumb { width: 27px; height: 27px; object-fit: contain; border: 1px solid rgba(32,31,24,.2); border-radius: 6px; background: #292821; }
.source-record-media-warning { display: block; max-width: 62px; color: var(--muted-dark); font: 9px/1.3 var(--mono); text-align: center; }
.source-record-media-note { max-width: 62px; color: #4d4a42; font: 8px/1.25 var(--mono); font-weight: 500; text-align: center; }
.source-record-media .container-map-media { min-width: 0; align-items: center; }
.source-record-media .container-media-caption { font-size: 8px; }
.source-record-media-unresolved { display: grid; place-items: center; width: 58px; min-height: 46px; padding: 5px; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--muted); font: 9px/1.3 var(--mono); text-align: center; }
.source-reference-preview { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 62px; }
.source-reference-preview-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 62px; }
.source-reference-item { display: grid; justify-items: center; gap: 2px; min-width: 27px; max-width: 29px; }
.source-reference-item-media { min-height: 29px; }
.source-reference-thumb { width: 27px; height: 27px; object-fit: contain; border: 1px solid rgba(32,31,24,.18); border-radius: 5px; background: var(--paper-deep); }
.source-reference-item small, .source-reference-preview > small { max-width: 62px; color: var(--muted-dark); font: 8px/1.25 var(--mono); overflow-wrap: anywhere; text-align: center; }
.source-name-qualifier { display: block; margin: 4px 0 0 6px; color: var(--gold-dark); }
.source-record-head, .source-record-meta { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.source-record-title { display: flex; align-items: start; justify-content: space-between; gap: 10px; min-width: 0; }
.source-record-title > div:first-child { min-width: 0; }
.source-record-title > div:first-child { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; gap: 4px 7px; }
.source-record-head strong { display: inline-block; color: var(--ink); font-size: 11px; }
.source-name-raw { margin-left: 6px; color: var(--muted-dark); }
.source-record-link { flex: 0 0 auto; padding: 2px 0; border: 0; color: var(--gold-dark); background: transparent; font: 9px var(--mono); cursor: pointer; white-space: nowrap; }
.source-record-link:hover, .source-record-link:focus-visible { color: var(--ink); text-decoration: underline; outline: none; }
.source-record-meta { margin-top: 7px; color: var(--muted-dark); font: 9px/1.45 var(--mono); }
.source-record-meta span:first-child { min-width: 0; overflow-wrap: anywhere; }
.source-record-note { margin-top: 7px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.perk-description-vi { line-height: 1.45; overflow-wrap: anywhere; }
.perk-name-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.raw-description-details { margin-top: 8px; }
.raw-description-details summary { color: var(--gold-dark); cursor: pointer; font: 10px var(--mono); }
.source-kind-list { max-width: 220px; overflow-wrap: anywhere; }
.item-type-summary { display: grid; gap: 2px; min-width: 0; }
.item-type-summary .name-cell { overflow-wrap: anywhere; }
.item-type-summary .sub-cell { margin-top: 0; overflow-wrap: anywhere; }
.item-table { min-width: 920px; table-layout: fixed; }
.treasure-table { min-width: 980px; }
.item-table th:nth-child(1), .item-table td:nth-child(1) { width: 7%; }
.item-table th:nth-child(2), .item-table td:nth-child(2) { width: 8%; }
.item-table th:nth-child(3), .item-table td:nth-child(3) { width: 17%; }
.item-table th:nth-child(4), .item-table td:nth-child(4) { width: 9%; }
.item-table th:nth-child(5), .item-table td:nth-child(5) { width: 9%; }
.item-table th:nth-child(6), .item-table td:nth-child(6) { width: 12%; }
.item-table th:nth-child(7), .item-table td:nth-child(7) { width: 12%; }
.item-table th:nth-child(8), .item-table td:nth-child(8) { width: 7%; }
.item-table th:nth-child(9), .item-table td:nth-child(9) { width: 8%; }
.item-table th:nth-child(10), .item-table td:nth-child(10) { width: 11%; }
.item-table td { overflow-wrap: anywhere; vertical-align: top; }
.item-table th { white-space: normal; line-height: 1.35; overflow-wrap: anywhere; }
.item-table .source-kind-list { display: block; max-height: 42px; overflow: hidden; }
.item-source-index-table { min-width: 980px; table-layout: fixed; }
.item-source-index-table th:nth-child(1), .item-source-index-table td:nth-child(1) { width: 18%; }
.item-source-index-table th:nth-child(2), .item-source-index-table td:nth-child(2) { width: 14%; }
.item-source-index-table th:nth-child(3), .item-source-index-table td:nth-child(3) { width: 20%; }
.item-source-index-table th:nth-child(4), .item-source-index-table td:nth-child(4) { width: 33%; }
.item-source-index-table th:nth-child(5), .item-source-index-table td:nth-child(5) { width: 15%; }
.item-source-index-table td { padding-top: 15px; padding-bottom: 15px; color: #3f3c35; font-size: 11.5px; line-height: 1.5; vertical-align: top; overflow-wrap: anywhere; }
.item-source-index-table th { white-space: normal; line-height: 1.35; overflow-wrap: anywhere; }
.item-source-index-preview { min-width: 240px; }
.item-source-index-preview .source-group-preview { font-size: 11px; line-height: 1.55; }
.item-source-index-table .sub-cell { color: #4b4841; font-size: 10.5px; line-height: 1.5; }
.item-source-index-layers { min-width: 0; }
.item-source-index-layers .badge-stack { display: flex; flex-wrap: wrap; gap: 4px; }
.item-source-index-layers .sub-cell { line-height: 1.45; }
.item-source-index-summary { margin: 16px 0 10px; }
.item-mobile-meta { display: none; }
.chest-mobile-meta { display: none; }
.badge-source-kind { color: #5b471e; background: #eee2bd; }
.compact-empty { padding: 22px 12px; }
.secondary-source-section { padding-top: 4px; border-top: 1px solid rgba(183,144,71,.28); }
.secondary-drop-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 2px 0 12px; color: var(--muted-dark); font: 9px/1.45 var(--mono); }
.secondary-drop-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 10px; }
.secondary-drop-summary-card { min-height: 67px; padding: 9px 10px; border: 1px solid rgba(183,144,71,.3); border-radius: 8px; color: var(--muted-dark); background: #f5eedf; }
.secondary-drop-summary-card strong { display: block; color: var(--ink); font-size: 11px; }
.secondary-drop-summary-card span, .secondary-drop-summary-card small { display: block; margin-top: 3px; color: var(--muted-dark); font: 9px/1.4 var(--mono); }
.secondary-drop-quality { padding: 8px 9px; border: 1px solid rgba(183,144,71,.25); border-radius: 7px; background: #faf7ef; }
.secondary-drop-row { background: #fbfaf6; }
.secondary-drop-row .prob-pill { color: #5b4518; background: #f3e4b8; }
.secondary-drop-mode > summary { background: #f6f2e9; }

/* Tăng cỡ chữ và khoảng thở để dữ liệu dài dễ đọc hơn khi tra cứu. */
body { font-size: 15px; line-height: 1.55; }
.nav-item { padding-block: 13px; font-size: 13px; }
.nav-count, .sidebar-foot, .status-dot { font-size: 11px; }
.version-chip { font-size: 10px; }
.breadcrumb { font-size: 11px; }
.global-search input { font-size: 13px; }
kbd { font-size: 10px; }
.icon-button { font-size: 14px; }
.loading-state { font-size: 13px; }
.section-kicker { font-size: 11px; }
.hero-copy { font-size: 14px; }
.hero-note p { font-size: 12px; }
.hero-note-foot { font-size: 11px; }
.badge { padding: 5px 8px; font-size: 10px; }
.metric-card { min-height: 108px; }
.metric-card .metric-label { font-size: 11px; }
.metric-card strong { font-size: 30px; }
.metric-card small { font-size: 10px; }
.overview-panel-head h2 { font-size: 22px; }
.overview-panel-head p { font-size: 11px; }
.overview-reader-kicker { font-size: 10px; }
.overview-reader-card h3 { font-size: 14px; }
.overview-reader-card p { min-height: 56px; font-size: 12px; }
.overview-coverage-card > span:not(.overview-reader-kicker):not(.badge-stack) { font-size: 11px; }
.overview-coverage-card > p { font-size: 10px; }
.panel-head p { font-size: 11px; }
.quality-card span { font-size: 11px; }
.featured-card .alias { font-size: 11px; }
.featured-card p { font-size: 12px; }
.featured-stat span { font-size: 10px; }
.text-link { font-size: 12px; }
.section-header h1 { font-size: clamp(32px, 4.2vw, 56px); }
.section-header p { font-size: 13px; }
.page-reading-brief .section-kicker { font-size: 10px; }
.page-reading-brief summary strong { font-size: 14px; }
.page-reading-toggle { font-size: 10px; }
.page-reading-brief[open] .page-reading-toggle::after { font-size: 10px; }
.page-reading-label { font-size: 10px; }
.page-reading-grid p { font-size: 12px; line-height: 1.6; }
.filter-input, .filter-select { min-height: 40px; font-size: 13px; }
.results-note { font-size: 11px; line-height: 1.5; }
.pagination-button { min-height: 35px; font-size: 11px; }
.pagination-total { font-size: 10px; }
th { font-size: 11px; }
td { font-size: 13px; line-height: 1.5; }
.id-code, .mono { font-size: 12px; }
.name-cell { font-size: 13px; }
.sub-cell { color: #4f4c44; font-size: 11px; line-height: 1.5; }
.content-summary { font-size: 10px; }
.item-content-preview { font-size: 12px; line-height: 1.55; }
.item-content-preview-label { font-size: 10px; }
.item-content-preview-empty { font-size: 10px; }
.empty-state { font-size: 14px; }
.subnav button { padding: 9px 12px; font-size: 12px; }
.scope-note { font-size: 12px; line-height: 1.6; }
.subnav-label, .source-filter-note { font-size: 10px; }
.source-filter-note { line-height: 1.6; }
.item-coverage-grid strong, .item-source-coverage-card strong, .key-catalog-grid strong,
.room-coverage-grid strong, .source-card-head strong { font-size: 12px; }
.item-coverage-grid article > span:not(.badge-stack), .item-source-coverage-card span,
.key-catalog-grid article > span:not(.badge-stack), .room-coverage-grid article > span:not(.badge-stack),
.chest-source-grid article > span { font-size: 11px; }
.research-guide-section-head p, .research-guide-luck-card > p, .research-guide-protocol p,
.research-guide-claim p, .evidence-card p, .method-panel-head p, .method-step p,
.stat-card p, .boss-info p, .key-description, .road-branch-card span { font-size: 12px; }
.research-guide-rank, .research-guide-step, .method-step-number { font-size: 10px; }
.research-guide-stats span, .research-guide-context span, .research-guide-highlight,
.research-guide-subsection-head p, .research-guide-source, .research-guide-source-note,
.evidence-card code, .source-list div, .method-table td { font-size: 11px; }
.research-guide-item-title span, .research-guide-source, .source-list span:last-child,
.method-table th, .method-summary-grid span { font-size: 10px; }
.drawer-head h2 { font-size: 31px; }
.drawer-section h3 { font-size: 12px; }
.detail-field span { font-size: 11px; }
.detail-field strong { font-size: 13px; }
.detail-field strong .badge { display: inline-flex; }
.detail-field strong .badge-confirmed { color: #356b43; }
.detail-field strong .badge-inference { color: #7c5b19; }
.detail-field strong .badge-hypothesis { color: #79464a; }
.detail-field strong .badge-unresolved { color: #4e4b43; }
.detail-field strong .badge-show { color: #214b61; }
.detail-field strong .badge-q { color: #fff; }
.detail-field strong .q-item-1,
.detail-field strong .q-item-2,
.detail-field strong .q-item-3 { color: #4f3f25; }
.detail-field strong .q-item-7 { color: #3f3214; }
.raw-block { font-size: 11px; }
.asset-open-link { display: inline-flex; align-items: center; width: fit-content; margin-top: 5px; color: var(--teal-strong); font: 700 11px/1.4 var(--mono); text-decoration: none; }
.asset-open-link:hover, .asset-open-link:focus-visible { color: #17484b; text-decoration: underline; outline: none; }
.asset-thumb-media { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; max-width: 100%; }
.asset-thumb-media .asset-open-link { margin-top: 1px; font-size: 8px; }
.drawer-list-item { font-size: 12px; line-height: 1.6; }
.drawer-list-item strong + .sub-cell { font-size: 12px; }
.source-record-extra { font-size: 11px; line-height: 1.55; }
.source-explain { font-size: 12px; line-height: 1.6; }
.page-reading-next { margin: 0 15px 15px 45px; padding: 10px 12px; border: 1px solid rgba(36, 92, 96, .24); border-radius: 8px; color: #3f3c35; background: rgba(219, 235, 231, .72); }
.page-reading-next .page-reading-label { color: #245c60; }
.page-reading-next p { margin-top: 4px; color: #3f3c35; font-size: 12px; line-height: 1.55; }
.results-note, .source-explain { color: #47443d; }
.image-availability { max-width: 220px; overflow-wrap: anywhere; word-break: break-word; }
.image-availability-unresolved { color: #6a4035; font-size: 10px; line-height: 1.4; }
.image-availability-confirmed { color: #356b43; font-size: 10px; line-height: 1.4; }
.inline-item-link .image-availability { max-width: 190px; margin-top: 2px; font-size: 9px; line-height: 1.35; }
.lootable-reference { display: block; min-width: 0; }
.lootable-reference > .sub-cell { overflow-wrap: anywhere; }
.lootable-reference .mono { overflow-wrap: anywhere; }
.source-graph-summary span { font-size: 11px; }
.source-record-group > summary strong, .source-record-head strong { font-size: 13px; }
.source-record-group > summary small, .source-record-link, .source-record-meta { font-size: 11px; }
.source-record-note { font-size: 11px; line-height: 1.6; }
.chest-code-audit p { font-size: 12px; line-height: 1.6; }
.chest-code-grid article > strong { font-size: 13px; }
.chest-code-grid article > small, .chest-code-chip small { font-size: 10px; }
.chest-code-chip strong { font-size: 12px; }
.source-record-media-block small { font-size: 10px; }
.source-record-media-note { font-size: 9px; }
.room-meta, .room-item-line, .boss-loot strong { font-size: 12px; }
.room-chest-entry strong { font-size: 12px; }
.room-chest-entry small, .room-card-foot, .boss-detail-link { font-size: 11px; }
.map-region-picker-panel .panel-head p, .map-region-picker strong, .map-region-summary p,
.map-region-table-head p, .map-region-image-wrap figcaption, .map-layer-row strong,
.map-region-summary-meta, .key-entry-meta, .key-source, .boss-name-hint,
.boss-prefab, .road-alt, .road-alt summary { font-size: 11px; }
.map-region-picker small, .map-region-picker > .mono, .map-layer-row small,
.container-media-caption { font-size: 9px; }
.map-region-reference-panel h3, .map-region-schematic-panel h3, .map-region-layers h3 { font-size: 11px; }
.method-table th { font-size: 10px; }

/* Các chú thích kỹ thuật phải đọc được ở cả màn hình lớn lẫn drawer hẹp. */
.asset-audit-item small { color: #4f4c44; font-size: 9px; line-height: 1.5; }
.map-layer-row strong, .map-layer-row small { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.map-layer-row small { color: #4f4c44; font-size: 10px; line-height: 1.4; }
.map-layer-all, .room-candidate-all { margin-top: 10px; border-top: 1px dashed var(--line-strong); }
.map-layer-all > summary, .room-candidate-all > summary { padding: 10px 2px 2px; color: var(--teal-strong); font-size: 12px; font-weight: 700; cursor: pointer; }
.map-layer-all > summary .mono, .room-candidate-all > summary .mono { margin-left: 6px; color: var(--muted); font: 10px var(--mono); font-weight: 400; }
.room-candidate-row { gap: 4px; }
.treasure-pool-source-summary { margin: 7px 0 2px; padding: 6px 8px; border-left: 2px solid rgba(36, 92, 96, .28); border-radius: 0 6px 6px 0; background: rgba(219, 235, 231, .42); }
.treasure-pool-source-summary .pool-source-preview { color: #3f3c35; }
.research-order-grid { display: grid; gap: 11px; margin-top: 14px; }
.research-order-stage { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.25); }
.research-order-stage-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.research-order-stage-head h3 { margin-top: 4px; color: var(--ink); font: 700 17px var(--display); }
.research-order-page-list { display: grid; gap: 6px; margin-top: 9px; }
.research-order-page { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 9px 10px; border: 1px solid rgba(32,31,24,.1); border-radius: 8px; background: rgba(255,255,255,.35); }
.research-order-page:hover { border-color: rgba(183,144,71,.48); background: rgba(255,255,255,.52); }
.research-order-index { color: var(--gold-dark); font: 700 10px var(--mono); }
.research-order-copy { display: grid; gap: 2px; min-width: 0; }
.research-order-copy strong { color: var(--ink); font-size: 13px; }
.research-order-copy span { color: var(--muted-dark); font-size: 11px; line-height: 1.45; }
.research-order-copy small { color: #4f4c44; font: 10px/1.45 var(--mono); overflow-wrap: anywhere; }
.research-order-page .text-link { margin: 0; white-space: nowrap; }

/* Giữ phần ảnh và provenance đọc được trong drawer hẹp; đường dẫn dài phải tự xuống dòng. */
.asset-image-link { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.container-detail-context > * { min-width: 0; }
.container-detail-context .source-record-media-block { flex: 0 1 170px; max-width: 100%; }
.container-detail-context .source-record-media-block small,
.container-detail-context .container-media-caption,
.container-detail-context .asset-open-link,
.container-detail-context .sub-cell { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
.container-detail-context .container-map-media { flex: 0 1 210px; max-width: 100%; }
.container-detail-context .drawer-map { max-width: 100%; }
.container-detail-context .chest-ui-reference-pair { flex-wrap: wrap; }
.container-detail-context .chest-ui-reference .asset-open-link { text-align: center; }
.map-asset-media { height: auto; min-height: 100px; display: flex; flex-direction: column; align-items: stretch; }
.map-asset-media img { flex: 0 0 100px; height: 100px; }
.map-asset-media .asset-open-link { margin: 6px 8px 8px; }
.map-region-image-wrap .asset-open-link { margin-inline: 0; }
.map-region-coverage { margin: 20px 0 16px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.26); }
.map-region-coverage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.map-region-coverage-grid article { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.34); }
.map-region-coverage-grid strong { display: block; color: var(--ink); font-size: 11px; line-height: 1.35; }
.map-region-coverage-grid b { display: block; margin-top: 8px; color: var(--gold-dark); font: 700 23px var(--display); }
.map-region-coverage-grid span { display: block; margin-top: 2px; color: var(--muted-dark); font-size: 10px; line-height: 1.45; }
.map-region-coverage-details { margin-top: 13px; border-top: 1px solid var(--line); }
.map-region-coverage-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px 2px; color: var(--teal-strong); cursor: pointer; list-style: none; }
.map-region-coverage-details > summary::-webkit-details-marker { display: none; }
.map-region-coverage-details > summary::before { content: "＋"; width: 14px; color: var(--gold-dark); font: 12px var(--mono); }
.map-region-coverage-details[open] > summary::before { content: "−"; }
.map-region-coverage-details > summary > span:first-of-type { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.map-region-coverage-details > summary strong { color: var(--ink); font-size: 12px; }
.map-region-coverage-details > summary small { color: var(--muted-dark); font: 10px/1.45 var(--mono); }
.map-region-coverage-action { flex: 0 0 auto; color: var(--teal-strong); font: 700 10px var(--mono); }
.map-region-coverage-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.map-region-coverage-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted-dark); background: rgba(255,255,255,.3); text-align: left; }
.map-region-coverage-row:hover, .map-region-coverage-row:focus-visible { border-color: rgba(183,144,71,.58); background: rgba(255,255,255,.52); outline: none; }
.map-region-coverage-media { display: grid; place-items: center; width: 72px; height: 48px; overflow: hidden; border: 1px solid rgba(32,31,24,.14); border-radius: 7px; background: #292821; }
.map-region-coverage-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.map-region-coverage-no-image { color: #d6cdb6; font: 12px var(--mono); }
.map-region-coverage-copy { display: grid; gap: 2px; min-width: 0; }
.map-region-coverage-copy strong { color: var(--ink); font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
.map-region-coverage-copy small { color: #46433c; font: 10px/1.45 var(--mono); overflow-wrap: anywhere; }
.map-region-coverage-copy small:first-of-type { color: var(--gold-dark); }
.map-region-coverage-row > .map-region-coverage-action { white-space: nowrap; }
.map-region-loot-context { margin-top: 14px; padding: 14px; border: 1px solid rgba(183,144,71,.42); border-radius: 12px; background: rgba(255,252,239,.58); }
.map-region-loot-context > .source-section-head { align-items: start; margin: 0; }
.map-region-loot-context > .source-section-head h2 { margin-top: 4px; font: 700 21px var(--display); }
.map-region-loot-context > .source-section-head .source-explain { max-width: 850px; }
.map-region-loot-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.map-region-loot-summary article { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.6); }
.map-region-loot-summary strong, .map-region-loot-summary span { display: block; }
.map-region-loot-summary strong { color: var(--muted-dark); font-size: 10px; line-height: 1.3; }
.map-region-loot-summary b { display: block; margin-top: 5px; color: var(--gold-dark); font: 700 21px var(--display); }
.map-region-loot-summary span { margin-top: 3px; color: #46433c; font: 9px/1.4 var(--mono); overflow-wrap: anywhere; }
.map-region-loot-context-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr); gap: 10px; margin-top: 10px; }
.map-region-level-panel, .map-region-item-panel, .map-region-source-section { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.38); }
.map-region-level-panel .section-head, .map-region-item-panel .section-head, .map-region-source-section > .section-head { margin: 0; }
.map-region-level-panel h3, .map-region-item-panel h3, .map-region-source-section h3 { color: var(--gold-dark); font: 700 12px var(--display); }
.map-region-level-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.map-region-level-chip { display: grid; gap: 3px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.55); }
.map-region-level-chip strong { color: var(--ink); font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
.map-region-level-chip > span { color: #46433c; font: 9px/1.4 var(--mono); overflow-wrap: anywhere; }
.map-region-level-chip > .mono { color: var(--gold-dark); }
.map-region-item-preview { display: grid; gap: 6px; max-height: 292px; margin-top: 9px; overflow: auto; }
.map-region-item-preview .inline-item-link { min-width: 0; padding: 5px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.55); }
.map-region-item-panel > .sub-cell { display: block; margin-top: 7px; }
.map-region-drop-list { display: grid; gap: 5px; margin-top: 10px; max-height: 205px; overflow: auto; }
.map-region-drop-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 7px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted-dark); background: rgba(255,255,255,.5); cursor: pointer; text-align: left; }
.map-region-drop-row:hover, .map-region-drop-row:focus-visible { border-color: rgba(183,144,71,.62); background: rgba(255,255,255,.78); outline: none; }
.map-region-drop-row > span:first-child { display: grid; gap: 2px; min-width: 0; }
.map-region-drop-row strong { color: var(--ink); font-size: 10px; overflow-wrap: anywhere; }
.map-region-drop-row small { color: #46433c; font: 9px/1.35 var(--mono); overflow-wrap: anywhere; }
.map-region-drop-row > .mono { flex: 0 0 auto; color: var(--gold-dark); font-size: 9px; }
.map-region-source-section { margin-top: 10px; }
.map-region-source-section > .section-head { align-items: start; }
.map-region-source-section .source-explain { max-width: 760px; }
.map-region-source-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 9px; }
.map-region-source-card { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; padding: 7px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted-dark); background: rgba(255,255,255,.58); cursor: pointer; text-align: left; }
.map-region-source-card:hover, .map-region-source-card:focus-visible { border-color: rgba(183,144,71,.68); background: rgba(255,255,255,.86); outline: none; }
.map-region-source-media { display: grid; place-items: center; min-width: 0; min-height: 54px; overflow: hidden; border-radius: 6px; background: #292821; }
.map-region-source-media .source-record-media-block { width: 100%; min-width: 0; }
.map-region-source-media .chest-ui-reference-pair { min-height: 43px; }
.map-region-source-thumb { width: 39px; height: 39px; object-fit: contain; }
.map-region-source-media small { display: block; max-width: 100%; padding: 2px 3px; color: #e9e3d5; font: 7px/1.2 var(--mono); text-align: center; overflow-wrap: anywhere; }
.map-region-source-media .chest-ui-reference .source-record-media-note { color: #e9e3d5; }
.map-region-source-copy { display: grid; gap: 3px; min-width: 0; }
.map-region-source-copy strong { color: var(--ink); font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
.map-region-source-copy small { color: #46433c; font: 8px/1.35 var(--mono); overflow-wrap: anywhere; }
.map-region-source-copy .badge-stack { display: flex; flex-wrap: wrap; }
.map-region-source-copy .badge { font-size: 7px; }
.map-region-loot-context > .callout { margin: 10px 0 0; }
.chest-ui-reference .source-record-media-note { max-width: 105px; color: #4b4841; font-size: 8px; line-height: 1.3; }

/* Các bảng item/source có nhiều cột không được ép về vài chục pixel;
   giữ chiều rộng đọc tối thiểu và báo rõ thao tác cuộn ngang cho người dùng. */
.table-reading-hint { display: flex; align-items: baseline; gap: 8px; margin: 11px 0 7px; padding: 8px 10px; border-left: 3px solid var(--teal-strong); border-radius: 0 8px 8px 0; color: #3f3c35; background: rgba(219,235,231,.58); font-size: 11px; line-height: 1.5; }
.table-reading-hint strong { flex: 0 0 auto; color: #245c60; font-weight: 700; }
.table-reading-hint span { min-width: 0; }
.container-direct-table { min-width: 1320px; }
.container-catalog-table { min-width: 1160px; }
.container-all-table { min-width: 1120px; }
.item-table { min-width: 1260px; }
.item-source-index-table { min-width: 1160px; }
.treasure-table { min-width: 1160px; }
.item-table td, .item-source-index-table td, .treasure-table td { overflow-wrap: anywhere; }
.wide-research-table { min-width: 1040px; }
.chest-index-table { min-width: 1280px; }
.openable-inventory-table { min-width: 1180px; }
.special-container-table { min-width: 1120px; }
.rare-item-table { min-width: 1220px; }
.value-ranking-table { min-width: 1080px; }
.mission-loot-table { min-width: 1040px; }
.luck-primary-table, .perk-index-table { min-width: 980px; }
.wide-research-table td, .chest-index-table td, .special-container-table td,
.rare-item-table td, .value-ranking-table td, .mission-loot-table td,
.luck-primary-table td, .perk-index-table td { font-size: 12px; line-height: 1.45; }
/* Giữ các mốc rộng riêng của bảng chain/pool/mode sau khi gắn nhãn hướng dẫn chung. */
.loot-chain-table.wide-research-table { min-width: 1320px; }
.loot-pool-table.wide-research-table { min-width: 1240px; }
.loot-mode-table.wide-research-table { min-width: 1180px; }

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .topbar { padding: 0 25px; }
  .page-wrap { padding-inline: 25px; }
  .hero { grid-template-columns: 1fr; gap: 24px; }
  .hero-note { min-height: 210px; }
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .home-grid, .stat-board { grid-template-columns: 1fr; }
  .overview-reader-grid, .overview-coverage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-asset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chest-source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-coverage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-coverage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-source-coverage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-acquisition-grid { grid-template-columns: 1fr; }
  .loot-pool-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .secondary-mode-grid { grid-template-columns: 1fr; }
  .interaction-rule-grid { grid-template-columns: 1fr; }
  .research-guide-item-grid, .research-guide-luck-grid { grid-template-columns: 1fr; }
  .kb-rate-grid, .kb-route-grid { grid-template-columns: 1fr; }
  .kb-worked-example-grid { grid-template-columns: 1fr; }
  .kb-chest-grid { grid-template-columns: 1fr; }
  .research-guide-protocol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .research-guide-claim-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .research-guide-claim-list.kb-rate-grid,
  .research-guide-claim-list.kb-route-grid { grid-template-columns: 1fr; }
  .key-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality-record-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .method-summary-grid, .method-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .external-research-grid { grid-template-columns: 1fr; }
  .runtime-research-grid { grid-template-columns: 1fr; }
  .research-page-audit-grid { grid-template-columns: 1fr; }
  .map-region-loot-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .map-region-source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-region-layout { grid-template-columns: 1fr; }
  .map-region-picker-panel { position: static; }
  .map-region-picker-list { max-height: 420px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-slot-layout { grid-template-columns: 1fr; }
  .map-slot-picker-panel { position: static; }
  .map-slot-picker-list { max-height: 420px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; inset: auto 0 0; z-index: 10; width: 100%; height: auto; padding: 8px 9px; border-top: 1px solid rgba(220, 185, 107, .22); }
  .brand-lockup, .sidebar-divider, .sidebar-foot { display: none; }
  .main-nav { display: flex; justify-content: space-between; gap: 3px; }
  .nav-item { position: relative; justify-content: center; padding: 9px 5px; border-radius: 8px; }
  .nav-item span:not(.nav-icon) { display: none; }
  .nav-icon { font-size: 16px; }
  .nav-item.is-active::before { inset: auto 20% -8px; width: 60%; height: 2px; }
  .nav-item.is-active::after { content: attr(aria-label); position: absolute; right: 50%; bottom: calc(100% + 7px); z-index: 1; transform: translateX(50%); padding: 4px 7px; border: 1px solid rgba(183,144,71,.42); border-radius: 6px; color: #f2e5c7; background: #29261d; box-shadow: 0 5px 14px rgba(0,0,0,.18); font: 9px var(--mono); white-space: nowrap; pointer-events: none; }
  .topbar { min-height: 62px; padding: 0 16px; }
  .breadcrumb { display: none; }
  .global-search { width: calc(100vw - 75px); }
  .page-wrap { padding: 26px 16px 100px; }
  .hero { min-height: 0; padding-top: 8px; }
  .hero h1 { font-size: 44px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .metric-card:last-child { grid-column: span 2; }
  .overview-reader-grid, .overview-coverage-grid { grid-template-columns: 1fr; }
  .overview-panel-head { display: block; }
  .overview-panel-head > .badge, .overview-panel-head > .badge-stack { display: inline-flex; margin-top: 10px; }
  .quality-grid { grid-template-columns: repeat(2, 1fr); }
  .quality-card:last-child { grid-column: span 2; }
  .section-header { display: block; }
  .page-reading-brief summary { align-items: flex-start; }
  .page-reading-grid { grid-template-columns: 1fr; padding: 0 12px 12px 38px; }
  .page-reading-next { margin: 0 12px 12px 38px; }
  .coverage-intro { display: block; }
  .coverage-intro > .badge { margin-top: 10px; }
  .quality-record-audit-head { display: block; }
  .quality-record-audit-head > .badge { margin-top: 10px; }
  .quality-record-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-coverage-grid, .item-coverage-grid, .item-source-coverage-grid, .item-gap-list { grid-template-columns: 1fr; }
  .loot-pool-summary { grid-template-columns: 1fr; }
  .secondary-mode-research-head { display: block; }
  .secondary-mode-research-status { justify-content: flex-start; margin-top: 12px; }
  .secondary-mode-check-grid { grid-template-columns: 1fr; }
  .secondary-mode-comparison > summary { align-items: flex-start; flex-wrap: wrap; }
  .secondary-mode-comparison > summary span { width: 100%; margin-left: 20px; }
  .research-guide-section-head, .research-guide-subsection-head { display: block; }
  .research-guide-section-head > .badge, .research-guide-subsection-head > .badge { display: inline-flex; margin-top: 10px; }
  .research-guide-protocol-grid, .research-guide-claim-list { grid-template-columns: 1fr; }
  .research-guide-source-links { grid-template-columns: 1fr; }
  .research-guide-context { grid-template-columns: 1fr; }
  .kb-route-facts { grid-template-columns: 1fr; }
  .kb-example-row-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-example-row-head > div:last-child { grid-column: span 2; }
  .kb-example-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-difficulty-row { grid-template-columns: 1fr; gap: 4px; }
  .key-catalog-grid { grid-template-columns: 1fr; }
  .asset-audit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chest-source-grid { grid-template-columns: 1fr; }
  .chest-code-grid { grid-template-columns: 1fr; }
  .section-actions { margin-top: 18px; }
  .room-grid, .boss-grid, .evidence-grid { grid-template-columns: 1fr; }
  .map-region-layout { grid-template-columns: 1fr; }
  .map-asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-region-picker-panel { position: static; }
  .map-region-picker-list { max-height: 230px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-region-summary { display: block; }
  .map-region-summary-meta { min-width: 0; margin-top: 13px; text-align: left; }
  .map-region-visual-grid { grid-template-columns: 1fr; }
  .map-region-loot-context-grid { grid-template-columns: 1fr; }
  .map-region-source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-region-image { height: 190px; }
  .map-region-table-head { display: block; }
  .map-region-table-head .pagination { margin-top: 10px; }
  .map-slot-picker-list { max-height: 230px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-slot-picker-panel { position: static; }
  .map-slot-summary { display: block; }
  .map-slot-summary-meta { min-width: 0; margin-top: 13px; text-align: left; }
  .map-slot-visual-grid { grid-template-columns: 1fr; }
  .map-slot-detail-context { grid-template-columns: 1fr; }
  .map-slot-context-link { display: block; }
  .map-slot-context-link .inline-action { margin-top: 8px; }
  .map-slot-image-wrap img { height: 190px; }
  .map-slot-table-head { display: block; }
  .map-slot-table-head .pagination { margin-top: 10px; }
  .road-branch-grid { grid-template-columns: 1fr; }
  .panel-head { display: block; }
  .panel-head .badge { margin-top: 10px; }
  .method-panel-head { display: block; }
  .method-panel-status { justify-content: flex-start; margin-top: 12px; }
  .method-summary-grid, .method-step-grid { grid-template-columns: 1fr; }
  .external-research-grid { grid-template-columns: 1fr; }
  .runtime-research-grid { grid-template-columns: 1fr; }
  .research-page-audit-stage > summary { align-items: flex-start; }
  .research-page-audit-card h3 { font-size: 16px; }
  .source-graph-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .source-record-head, .source-record-meta { display: block; }
  .source-record-title { display: block; }
  .source-record-link { display: block; margin-top: 6px; }
  .source-record-head > div:last-child, .source-record-meta > span:last-child { margin-top: 5px; }
  .secondary-drop-summary-grid { grid-template-columns: 1fr; }
  .secondary-drop-meta { display: grid; grid-template-columns: 1fr; gap: 5px; }
  .boss-mode-summary-grid { grid-template-columns: 1fr; }
  .source-audit-entry > summary { gap: 8px; }
  .source-audit-summary-decision { max-width: 42%; font-size: 9px; }
  .source-audit-detail > div { grid-template-columns: 1fr; gap: 3px; }
  .method-table { min-width: 760px; table-layout: auto; }
  .requirement-audit-table { display: block; min-width: 0; }
  .requirement-audit-table thead { display: none; }
  .requirement-audit-table tbody { display: grid; gap: 9px; padding: 9px; }
  .requirement-audit-table tr { display: block; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.35); }
  .requirement-audit-table td, .requirement-audit-table td:first-child, .requirement-audit-table td:nth-child(2), .requirement-audit-table td:nth-child(3), .requirement-audit-table td:nth-child(4), .requirement-audit-table td:last-child { display: block; width: auto; padding: 6px 0; border: 0; color: var(--muted-dark); }
  .requirement-audit-table td::before { display: block; margin-bottom: 3px; color: var(--gold-dark); content: attr(data-label); font: 500 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
  .requirement-audit-table td:first-child { padding-top: 0; }
  .requirement-audit-table td:last-child { padding-bottom: 0; }
  .detail-grid { grid-template-columns: 1fr; }
  .item-mobile-meta { display: block; color: var(--gold-dark); }
  .chest-mobile-meta { display: block; color: var(--gold-dark); }
}

@media (max-width: 480px) {
  .map-region-picker-list, .map-layer-list, .map-asset-grid, .map-slot-picker-list, .map-region-coverage-list { grid-template-columns: 1fr; }
  .map-region-coverage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-region-loot-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-region-level-grid, .map-region-source-grid { grid-template-columns: 1fr; }
  .asset-audit-list { grid-template-columns: 1fr; }
  .map-region-picker-panel, .map-region-main { padding: 12px; }
  .map-region-summary h2 { font-size: 22px; }
  .map-region-schematic { height: 190px; }
  .map-slot-picker-panel, .map-slot-main { padding: 12px; }
  .map-slot-summary h2 { font-size: 22px; }
  .map-slot-simulation-head { display: block; }
  .map-slot-simulation-head .badge { display: inline-flex; margin-top: 8px; white-space: normal; }
  .map-slot-simulation-note { margin-left: 0; }
}

@media (max-width: 760px) {
  .sidebar { overflow: visible; }
  .nav-item { width: auto; min-width: 0; flex: 1 1 0; padding-inline: 0; }
  .topbar { min-height: 68px; }
  .global-search { padding-block: 9px; }
  .page-wrap { padding-top: 28px; }
  .hero h1 { font-size: clamp(42px, 12vw, 54px); }
  .section-header h1 { font-size: clamp(34px, 10vw, 46px); }
  .section-header p { font-size: 13px; }
  .metric-card { min-height: 104px; padding: 16px 14px; }
  .filter-input, .filter-select { min-height: 42px; }
  th { font-size: 10px; }
  td { padding: 14px 12px; font-size: 13px; }
  .detail-drawer { padding: 22px 18px 32px; }
  .drawer-head h2 { font-size: 29px; }
  .nav-item.is-active::after { bottom: calc(100% + 8px); padding: 5px 8px; font-size: 10px; }
  .table-reading-hint { display: block; font-size: 11px; }
  .table-reading-hint strong { display: block; margin-bottom: 2px; }
  /* Canh nhãn active vào trong mép màn hình để tab đầu/cuối không bị cắt. */
  .nav-item:nth-child(-n+3).is-active::after { left: 0; right: auto; transform: none; }
  .nav-item:nth-last-child(-n+3).is-active::after { left: auto; right: 0; transform: none; }
}

/* Tăng độ tương phản cho chú thích, mã kỹ thuật và badge nhỏ mà không đổi bố cục. */
:root { --muted: #514e47; --muted-dark: #46433c; }
.sub-cell { color: #48453e; }
.unresolved-text { color: #7b4036; }
.badge-confirmed { color: #2f623b; }
.badge-inference { color: #6e4d0f; }
.badge-hypothesis { color: #6f3d43; }
.badge-show { color: #1c4256; }
.badge-source-kind { color: #4a3815; }
.nav-count-context { font-size: 10px; }
.source-record-media-block small { font-size: 10px; line-height: 1.4; }
.source-record-media-note { font-size: 10px; line-height: 1.4; }
.map-region-source-media small { font-size: 9px; line-height: 1.35; }
.map-region-source-copy strong { font-size: 11px; line-height: 1.4; }
.map-region-source-copy small { font-size: 10px; line-height: 1.45; }
.map-region-source-copy .badge { font-size: 9px; }
.map-region-drop-row strong { font-size: 11px; }
.map-region-drop-row small { font-size: 10px; line-height: 1.45; }
.chest-ui-reference .source-record-media-note { font-size: 9px; line-height: 1.4; }
.detail-drawer { overflow-x: hidden; }
.source-record-media-block small,
.source-record-media-note,
.source-record-media-warning,
.source-record-media .container-media-caption { width: 100%; max-width: 100%; overflow-wrap: anywhere; word-break: normal; white-space: normal; }
.treasure-source-card-media { overflow: hidden; }

.treasure-research-toolbar { display: grid; gap: 12px; margin: 14px 0; }
.treasure-scope-tabs { flex-wrap: wrap; }
.treasure-scope-tabs button { min-height: 32px; }
.treasure-research-coverage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.treasure-research-coverage article { display: grid; gap: 4px; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.42); }
.treasure-research-coverage span { color: var(--muted-dark); font: 700 9px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.treasure-research-coverage strong { color: var(--ink); font: 700 20px/1.1 var(--display); }
.treasure-research-coverage small { color: var(--muted-dark); font-size: 10px; line-height: 1.4; }
.treasure-source-signal { color: #3e514d; }
.kb-operational-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 13px; }
.kb-operational-card, .kb-play-recommendation { min-width: 0; padding: 12px; border: 1px solid rgba(183,144,71,.28); border-radius: 9px; background: rgba(255,252,241,.72); }
.kb-operational-card-head { display: flex; align-items: start; gap: 10px; min-width: 0; }
.kb-operational-card-head > div { min-width: 0; flex: 1; }
.kb-operational-rank { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid rgba(183,144,71,.4); border-radius: 50%; color: var(--gold-dark); font: 700 12px var(--mono); background: rgba(183,144,71,.12); }
.kb-operational-card h3, .kb-play-recommendation h3 { color: var(--ink); font: 700 15px/1.3 var(--display); overflow-wrap: anywhere; }
.kb-operational-card p { margin-top: 6px; color: var(--muted-dark); font-size: 10px; line-height: 1.55; }

/* Nhãn màu vàng trên nền giấy cần đủ đậm khi người dùng đọc ở kích thước nhỏ. */
:root { --gold-readable: #694615; }
.section-kicker,
.text-link,
.page-reading-toggle,
.room-tier-label,
.room-tier-chip b,
.prob-pill,
.value-rank-pill,
.map-slot-picker .map-slot-picker-count,
.map-slot-image-panel h3,
.map-slot-boundary-panel h3,
.item-acquisition-card-action-label,
.source-record-link { color: var(--gold-readable); }
.badge-inference { color: #68460f; }
.detail-field strong .badge-inference { color: #68460f; }
.item-content-preview-line.content-secondary .item-content-preview-label { color: #6a4617; }
.item-content-preview-line.content-untranslated .item-content-preview-label { color: #674614; }
.kb-operational-card > .badge { display: inline-flex; margin-top: 9px; }
.kb-operational-subsection { margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--line); }
.kb-operational-comparison-list { display: grid; gap: 7px; margin-top: 10px; }
.kb-operational-comparison { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted-dark); background: rgba(255,255,255,.38); font-size: 11px; }
.kb-operational-comparison span { overflow-wrap: anywhere; }
.kb-operational-comparison strong { color: var(--gold-dark); font-size: 16px; }
.kb-play-recommendation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
.kb-play-recommendation .badge { margin-left: auto; }
.kb-play-recommendation ul { display: grid; gap: 5px; margin: 10px 0 0 18px; color: var(--muted-dark); font-size: 10px; line-height: 1.55; }

/* Atlas ảnh giúp nhận diện asset nhưng giữ ranh giới rõ với sprite exact của record. */
.chest-asset-reference-panel { margin: 16px 0 18px; border: 1px solid rgba(183,144,71,.38); border-radius: 14px; background: rgba(255,252,241,.66); overflow: hidden; }
.chest-asset-reference-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; cursor: pointer; list-style: none; }
.chest-asset-reference-panel > summary::-webkit-details-marker { display: none; }
.chest-asset-reference-panel > summary::before { content: "＋"; flex: 0 0 auto; color: var(--gold-readable); font: 13px var(--mono); }
.chest-asset-reference-panel[open] > summary::before { content: "−"; }
.chest-asset-reference-panel > summary:hover { background: rgba(183,144,71,.1); }
.chest-asset-reference-summary { display: grid; gap: 3px; min-width: 0; flex: 1; }
.chest-asset-reference-summary strong { color: var(--ink); font: 700 17px/1.3 var(--display); }
.chest-asset-reference-summary small { color: var(--muted-dark); font-size: 10px; line-height: 1.45; }
.chest-asset-reference-body { padding: 0 15px 16px; }
.chest-asset-reference-body > .callout { margin: 0 0 15px; }
.chest-asset-reference-group + .chest-asset-reference-group { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.chest-asset-reference-group-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.chest-asset-reference-group-head h3 { color: var(--ink); font: 700 15px/1.3 var(--display); }
.chest-asset-reference-group-head p { margin-top: 4px; color: var(--muted-dark); font-size: 10px; line-height: 1.5; }
.chest-asset-reference-group-head > .mono { color: var(--gold-readable); white-space: nowrap; }
.chest-asset-reference-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.chest-asset-reference-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 9px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.5); }
.chest-asset-reference-media { display: grid; align-content: start; justify-items: center; gap: 4px; min-width: 0; }
.chest-asset-reference-media img { width: 72px; height: 68px; object-fit: contain; border: 1px solid rgba(32,31,24,.14); border-radius: 7px; background: #fbfaf6; }
.chest-asset-reference-media .asset-open-link { margin-top: 0; font-size: 8px; }
.chest-asset-reference-copy { display: grid; align-content: start; gap: 5px; min-width: 0; }
.chest-asset-reference-copy strong { color: var(--ink); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.chest-asset-reference-copy .badge { justify-self: start; max-width: 100%; white-space: normal; text-align: left; }
.chest-asset-reference-copy small { color: var(--muted-dark); font: 9px/1.35 var(--mono); overflow-wrap: anywhere; }

.boss-title-status { display: grid; gap: 4px; flex: 0 0 auto; min-width: 112px; }
.boss-status-line { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.boss-status-label { color: var(--muted-dark); font: 600 9px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.boss-status-line .badge-stack { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; }

.treasure-pool-table-list { display: grid; gap: 8px; min-width: 210px; }
.treasure-pool-table-item { display: grid; gap: 3px; padding: 7px 8px; border: 1px solid rgba(183,144,71,.25); border-radius: 7px; background: rgba(255,255,255,.42); }
.treasure-pool-table-item > .mono { color: var(--gold-readable); font-size: 11px; }
.treasure-pool-table-item .pool-source-preview { color: var(--ink); font-size: 10px; line-height: 1.35; }
.treasure-pool-table-item .sub-cell { line-height: 1.35; }

@media (max-width: 1100px) {
  .chest-asset-reference-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .chest-asset-reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .chest-asset-reference-panel > summary { align-items: start; }
  .chest-asset-reference-panel > summary > .badge { max-width: 125px; white-space: normal; text-align: center; }
  .chest-asset-reference-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .treasure-research-coverage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-operational-grid, .kb-play-recommendation-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .treasure-research-coverage { grid-template-columns: 1fr; }
  .treasure-scope-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .treasure-scope-tabs button { min-width: 0; white-space: normal; }
}

/* Tab trang bị ưu tiên giải thích theo lớp, không dồn toàn bộ raw field vào một cột. */
.equipment-lesson-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0 14px; }
.equipment-lesson-card { min-width: 0; padding: 16px; border: 1px solid rgba(183,144,71,.3); border-radius: 13px; background: linear-gradient(145deg, rgba(255,252,242,.94), rgba(247,242,228,.78)); }
.equipment-lesson-card h3 { margin-top: 6px; color: var(--ink); font: 700 17px/1.25 var(--display); }
.equipment-lesson-card p { margin-top: 8px; color: var(--muted-dark); font-size: 11px; line-height: 1.6; }
.equipment-lesson-card .mono { color: var(--gold-readable); }
.lesson-rule { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--gold-readable); font: 10px/1.45 var(--mono); }
.equipment-metric-grid { margin-top: 14px; }
.equipment-source-callout { margin: 10px 0 14px; }
.equipment-source-callout .sub-cell { display: block; margin-top: 5px; }
.equipment-scope-tabs { margin-bottom: 8px; }
.equipment-filter-row { margin-bottom: 12px; }
.equipment-table { min-width: 1240px; }
.equipment-table th, .equipment-table td { vertical-align: top; }
.equipment-table th:nth-child(1) { width: 90px; }
.equipment-table th:nth-child(2) { min-width: 210px; }
.equipment-table th:nth-child(3) { width: 112px; }
.equipment-table th:nth-child(4) { min-width: 220px; }
.equipment-table th:nth-child(5) { min-width: 270px; }
.equipment-table th:nth-child(6) { min-width: 220px; }
.equipment-table th:nth-child(7) { min-width: 190px; }
.equipment-thumb { width: 54px; height: 54px; object-fit: contain; border: 1px solid rgba(32,31,24,.16); border-radius: 9px; background: var(--paper-deep); }
.equipment-attribute-list { display: grid; gap: 5px; min-width: 180px; }
.equipment-attribute-chip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 6px 7px; border: 1px solid rgba(54,95,83,.2); border-radius: 7px; background: rgba(228,241,235,.62); }
.equipment-attribute-chip b { min-width: 0; color: #245c50; font-size: 10px; line-height: 1.25; overflow-wrap: anywhere; }
.equipment-attribute-chip strong { color: var(--ink); font: 700 11px var(--mono); text-align: right; }
.equipment-attribute-chip small { grid-column: 1 / -1; color: var(--muted); font: 8px/1.25 var(--mono); }
.equipment-attribute-chip.is-unresolved { border-color: rgba(145,78,53,.28); background: rgba(251,237,226,.62); }
.equipment-attribute-chip.is-unresolved b { color: #754734; }
.equipment-raw-line { display: block; margin-top: 6px; max-width: 310px; overflow-wrap: anywhere; }
.equipment-effect-text { display: block; color: var(--ink); font-size: 11px; line-height: 1.5; }
.equipment-tag-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.equipment-tag { display: inline-flex; padding: 3px 5px; border: 1px solid rgba(183,144,71,.35); border-radius: 999px; color: var(--gold-readable); background: rgba(250,243,218,.75); font: 9px/1.1 var(--mono); }
.equipment-raw-evidence { max-width: 180px; overflow-wrap: anywhere; }
.equipment-runtime-empty { display: grid; gap: 4px; color: var(--muted-dark); }
.equipment-runtime-empty small { color: var(--muted); font: 9px/1.35 var(--mono); }
.equipment-runtime-summary { display: grid; gap: 9px; }
.equipment-runtime-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.equipment-runtime-grid > div { min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.42); }
.equipment-runtime-grid strong { display: block; margin-top: 3px; color: var(--ink); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.equipment-effect-detail { display: grid; gap: 8px; }
.equipment-effect-detail p { color: var(--ink); font-size: 13px; line-height: 1.65; }
.detail-field .equipment-attribute-list { min-width: 0; }

@media (max-width: 980px) {
  .equipment-lesson-grid { grid-template-columns: 1fr; }
  .equipment-lesson-card { padding: 14px; }
}

@media (max-width: 560px) {
  .equipment-scope-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equipment-scope-tabs button { min-width: 0; white-space: normal; }
  .equipment-filter-row { display: grid; grid-template-columns: 1fr; }
  .equipment-runtime-grid { grid-template-columns: 1fr; }
}

/* Bản đồ tương tác: giữ geometry ở trung tâm, còn raw world point nằm trong
   lớp diagnostic riêng để người dùng không nhầm X/Z với tọa độ phòng. */
.interactive-map-toolbar { display: grid; gap: 12px; margin: 18px 0 12px; padding: 13px; border: 1px solid rgba(183,144,71,.3); border-radius: 13px; background: rgba(255,252,241,.72); }
.interactive-map-select-group { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(210px, 1fr) minmax(240px, 1.4fr); gap: 10px; }
.interactive-map-select-group label { display: grid; gap: 5px; min-width: 0; }
.interactive-map-select-group label > span, .filter-caption { color: var(--muted-dark); font: 700 9px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.interactive-map-select-group select, .interactive-map-search input { min-height: 38px; width: 100%; padding: 8px 10px; border: 1px solid rgba(32,31,24,.18); border-radius: 8px; color: var(--ink); background: rgba(255,255,255,.72); font: 600 12px var(--sans); }
.interactive-map-search input { outline: none; }
.interactive-map-search input:focus, .interactive-map-select-group select:focus { border-color: var(--gold-readable); box-shadow: 0 0 0 3px rgba(183,144,71,.14); }
.interactive-map-preset-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.map-preset-button { min-height: 32px; padding: 6px 10px; border: 1px solid rgba(32,31,24,.18); border-radius: 999px; color: var(--muted-dark); background: rgba(255,255,255,.54); cursor: pointer; font: 600 10px var(--sans); }
.map-preset-button:hover, .map-preset-button.is-active { border-color: rgba(183,144,71,.58); color: var(--gold-dark); background: rgba(250,243,218,.9); }
.interactive-map-context-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 14px; padding: 9px 11px; border-left: 3px solid var(--gold-readable); color: var(--muted-dark); background: rgba(250,243,218,.55); font-size: 11px; line-height: 1.45; }
.interactive-map-context-strip b { color: var(--ink); }
.interactive-map-context-strip .mono { color: var(--gold-readable); }
.interactive-map-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(285px, 340px); gap: 12px; align-items: start; }
.interactive-map-stage-panel, .interactive-map-inspector, .interactive-map-raw-panel, .interactive-map-event-panel { min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.48); overflow: hidden; }
.interactive-map-stage-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 15px 16px 11px; border-bottom: 1px solid var(--line); }
.interactive-map-stage-head h2 { margin-top: 4px; color: var(--ink); font: 700 21px/1.2 var(--display); }
.interactive-map-stage-head p { margin-top: 4px; color: var(--muted-dark); font-size: 10px; }
.interactive-map-zoom-controls { display: flex; gap: 5px; flex: 0 0 auto; }
.interactive-map-zoom-controls button { min-width: 34px; min-height: 32px; padding: 5px 8px; border: 1px solid rgba(32,31,24,.18); border-radius: 7px; color: var(--gold-dark); background: rgba(255,252,241,.84); cursor: pointer; font: 700 11px var(--mono); }
.interactive-map-zoom-controls button:hover { border-color: var(--gold-readable); background: var(--gold-soft); }
.interactive-map-stage-shell { position: relative; min-height: 560px; padding: 8px; background: radial-gradient(circle at 50% 35%, rgba(248,244,231,.98), rgba(231,226,211,.92)); overflow: hidden; }
.interactive-map-canvas { display: block; width: 100%; height: min(68vh, 690px); min-height: 470px; border: 1px solid rgba(54,95,83,.18); border-radius: 10px; background: rgba(247,245,236,.76); cursor: grab; touch-action: none; user-select: none; }
.interactive-map-canvas.is-dragging { cursor: grabbing; }
.interactive-map-background { opacity: .24; filter: saturate(.7) sepia(.1); pointer-events: none; }
.interactive-map-room { cursor: pointer; outline: none; }
.interactive-map-room polygon { fill: rgba(62,118,103,.18); stroke: rgba(42,84,73,.7); stroke-width: 2; vector-effect: non-scaling-stroke; transition: fill .15s ease, stroke .15s ease; }
.interactive-map-room:nth-child(3n) polygon { fill: rgba(183,144,71,.14); }
.interactive-map-room:nth-child(4n) polygon { fill: rgba(145,78,53,.12); }
.interactive-map-room:hover polygon, .interactive-map-room:focus polygon, .interactive-map-room.is-selected polygon { fill: rgba(183,144,71,.38); stroke: var(--gold-dark); stroke-width: 3; }
.interactive-map-room text { fill: #1e4037; font: 700 15px var(--sans); pointer-events: none; paint-order: stroke; stroke: rgba(247,245,236,.85); stroke-width: 4px; stroke-linejoin: round; }
.interactive-map-room .interactive-map-room-id { fill: #506b61; font: 600 11px var(--mono); stroke-width: 3px; }
.interactive-map-mapped-marker { cursor: pointer; }
.interactive-map-mapped-marker circle { stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.interactive-map-mapped-marker text { fill: var(--ink); font: 700 10px var(--mono); pointer-events: none; }
.interactive-map-marker-chests circle, .interactive-map-legend-chest { fill: #b37e18; background: #b37e18; }
.interactive-map-marker-loot circle, .interactive-map-legend-loot { fill: #39796b; background: #39796b; }
.interactive-map-marker-elites circle, .interactive-map-legend-monster { fill: #a6543d; background: #a6543d; }
.interactive-map-marker-bosses circle { fill: #7a3a2e; }
.interactive-map-marker-monsters circle { fill: #707a76; }
.interactive-map-stage-note text, .interactive-map-empty-label text { fill: #6c5c3b; font: 700 15px var(--sans); pointer-events: none; }
.interactive-map-stage-note text { font: 600 12px var(--mono); }
.interactive-map-stage-help { position: absolute; left: 18px; bottom: 17px; padding: 6px 8px; border: 1px solid rgba(32,31,24,.12); border-radius: 6px; color: var(--muted-dark); background: rgba(255,252,241,.84); font: 9px var(--mono); pointer-events: none; }
.interactive-map-map-legend, .interactive-map-raw-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--muted-dark); font-size: 10px; }
.interactive-map-map-legend span, .interactive-map-raw-legend span { display: inline-flex; align-items: center; gap: 5px; }
.interactive-map-map-legend i, .interactive-map-raw-legend i, .interactive-map-layer-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.interactive-map-legend-room { border: 2px solid #3d7565; background: rgba(62,118,103,.24); }
.interactive-map-layer-panel { border-bottom: 1px solid var(--line); }
.interactive-map-layer-panel .section-head, .interactive-map-profile-panel .section-head, .interactive-map-event-panel .section-head, .interactive-map-search-results .section-head { padding: 13px 14px 9px; }
.interactive-map-layer-panel h3, .interactive-map-profile-panel h3, .interactive-map-event-panel h3, .interactive-map-search-results h3 { color: var(--ink); font: 700 14px/1.25 var(--display); }
.interactive-map-layer-panel p, .interactive-map-profile-panel p, .interactive-map-event-panel p, .interactive-map-search-results p { margin-top: 3px; color: var(--muted-dark); font-size: 10px; line-height: 1.4; }
.interactive-map-layer-list { display: grid; gap: 5px; padding: 0 10px 10px; }
.interactive-map-layer { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 7px; align-items: center; width: 100%; padding: 7px 6px; border: 1px solid transparent; border-radius: 8px; color: var(--muted-dark); background: transparent; text-align: left; cursor: pointer; }
.interactive-map-layer:hover, .interactive-map-layer.is-on { border-color: rgba(183,144,71,.25); background: rgba(250,243,218,.52); }
.interactive-map-layer strong { display: block; color: var(--ink); font-size: 10px; line-height: 1.25; }
.interactive-map-layer small { display: block; margin-top: 2px; color: var(--muted); font: 8px/1.25 var(--mono); }
.interactive-map-layer > b { color: var(--gold-readable); font: 700 11px var(--mono); }
.interactive-map-layer-dot { opacity: .35; }
.interactive-map-layer.is-on .interactive-map-layer-dot { opacity: 1; box-shadow: 0 0 0 3px rgba(183,144,71,.12); }
.interactive-map-layer-dot-rooms { border: 2px solid #3d7565; background: rgba(62,118,103,.24); }
.interactive-map-layer-dot-chests { background: #b37e18; }
.interactive-map-layer-dot-loot { background: #39796b; }
.interactive-map-layer-dot-monsters { background: #707a76; }
.interactive-map-layer-dot-elites { background: #a6543d; }
.interactive-map-layer-dot-bosses { background: #7a3a2e; }
.interactive-map-layer-dot-events { background: #71589a; }
.interactive-map-layer-note { padding: 0 14px 13px; color: var(--muted); font: 9px/1.45 var(--mono); }
.interactive-map-inspector { position: sticky; top: 14px; }
.interactive-map-selection, .interactive-map-selection-empty { padding: 14px; }
.interactive-map-selection-empty { color: var(--muted-dark); }
.interactive-map-selection-empty h3 { margin-top: 5px; color: var(--ink); font: 700 18px/1.25 var(--display); }
.interactive-map-selection-empty p { margin-top: 8px; font-size: 11px; line-height: 1.55; }
.interactive-map-inspector-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 14px; }
.interactive-map-inspector-stats > div { padding: 7px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.45); }
.interactive-map-inspector-stats strong { display: block; color: var(--ink); font: 700 16px var(--mono); }
.interactive-map-inspector-stats span { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.25; }
.interactive-map-selection-title { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-top: 5px; }
.interactive-map-selection-title h3 { color: var(--ink); font: 700 18px/1.25 var(--display); overflow-wrap: anywhere; }
.interactive-map-selection-title p { margin-top: 3px; color: var(--muted-dark); font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.interactive-map-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.interactive-map-field-grid > div { min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.4); }
.interactive-map-field-grid span, .interactive-map-status-stack span { display: block; color: var(--muted); font: 8px/1.25 var(--mono); text-transform: uppercase; }
.interactive-map-field-grid strong { display: block; margin-top: 3px; color: var(--ink); font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.interactive-map-status-stack { display: grid; gap: 7px; margin-top: 10px; }
.interactive-map-status-stack > div { padding-top: 7px; border-top: 1px solid var(--line); }
.interactive-map-status-stack strong { display: block; margin-top: 3px; color: var(--ink); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.interactive-map-status-stack .badge-stack { display: inline-flex; margin-top: 4px; }
.interactive-map-selection .text-link { display: inline-block; margin-top: 12px; padding: 0; border: 0; color: var(--gold-readable); background: none; cursor: pointer; font: 700 10px var(--sans); }
.interactive-map-selection .text-link:hover { color: var(--gold-dark); text-decoration: underline; }
.interactive-map-profile-panel { padding-bottom: 13px; border-top: 1px solid var(--line); }
.interactive-map-rate-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px 55px; gap: 7px; align-items: center; margin: 0 10px; padding: 7px 4px; border-top: 1px solid rgba(32,31,24,.08); color: var(--gold-readable); font: 700 9px/1.3 var(--mono); }
.interactive-map-rate-row strong { display: block; color: var(--ink); font: 700 10px/1.25 var(--sans); overflow-wrap: anywhere; }
.interactive-map-rate-row .sub-cell { display: block; margin-top: 2px; color: var(--muted); font: 8px/1.3 var(--mono); overflow-wrap: anywhere; }
.interactive-map-profile-panel .compact-callout, .interactive-map-selection .compact-callout { margin: 10px 13px 0; padding: 8px 9px; font-size: 9px; line-height: 1.45; }
.interactive-map-raw-panel, .interactive-map-event-panel { margin-top: 14px; }
.interactive-map-raw-panel > .section-head, .interactive-map-event-panel > .section-head { padding: 15px 16px 10px; }
.interactive-map-raw-panel h2 { margin-top: 4px; color: var(--ink); font: 700 19px/1.2 var(--display); }
.interactive-map-raw-panel p { margin-top: 4px; color: var(--muted-dark); font-size: 10px; line-height: 1.45; }
.interactive-map-raw-canvas-wrap { padding: 0 13px; }
.interactive-map-raw-canvas { display: block; width: 100%; height: 340px; border: 1px solid rgba(54,95,83,.18); border-radius: 10px; background: linear-gradient(180deg, rgba(234,242,237,.9), rgba(246,239,223,.84)); }
.interactive-map-raw-canvas rect { fill: transparent; }
.interactive-map-raw-canvas text { fill: var(--muted-dark); font: 10px var(--mono); }
.interactive-map-raw-axis { fill: none; stroke: rgba(54,95,83,.35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.interactive-map-raw-marker { cursor: pointer; }
.interactive-map-raw-marker circle { stroke: rgba(255,255,255,.9); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: r .12s ease; }
.interactive-map-raw-marker:hover circle, .interactive-map-raw-marker:focus circle { r: 8; stroke: var(--gold-dark); stroke-width: 2; }
.interactive-map-raw-scale { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 2px 0; color: var(--muted); font: 9px var(--mono); }
.interactive-map-raw-empty { margin: 0 13px; padding: 28px 12px; border: 1px dashed rgba(145,78,53,.4); border-radius: 10px; color: var(--muted-dark); background: rgba(251,237,226,.5); text-align: center; font-size: 11px; }
.interactive-map-event-list { display: grid; gap: 5px; padding: 0 10px 11px; }
.interactive-map-event-row, .interactive-map-search-result { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; padding: 8px; border: 1px solid transparent; border-radius: 8px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.interactive-map-event-row:hover, .interactive-map-search-result:hover { border-color: rgba(183,144,71,.28); background: rgba(250,243,218,.55); }
.interactive-map-event-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: #71589a; background: rgba(113,88,154,.12); font-size: 13px; }
.interactive-map-event-row strong, .interactive-map-search-result strong { display: block; color: var(--ink); font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
.interactive-map-event-row small, .interactive-map-search-result small { display: block; margin-top: 2px; color: var(--muted); font: 8px/1.3 var(--mono); overflow-wrap: anywhere; }
.interactive-map-event-row > .mono { color: var(--gold-readable); font-size: 9px; }
.interactive-map-search-results { margin: 0 0 14px; border: 1px solid rgba(183,144,71,.3); border-radius: 12px; background: rgba(255,252,241,.68); overflow: hidden; }
.interactive-map-search-results .section-head { border-bottom: 1px solid var(--line); }
.interactive-map-search-result { grid-template-columns: 42px minmax(0, 1fr); margin: 0 8px; width: calc(100% - 16px); }
.interactive-map-result-type { align-self: start; padding: 4px 5px; border-radius: 5px; color: var(--gold-readable); background: rgba(250,243,218,.9); font: 700 8px var(--mono); text-align: center; }
.interactive-map-final-note { margin-top: 14px; }
.interactive-map-final-note .mono { overflow-wrap: anywhere; word-break: break-all; }
.interactive-map-debug-panel { margin-top: 14px; border: 1px solid rgba(113,88,154,.28); border-radius: 14px; background: rgba(246,242,251,.62); overflow: hidden; }
.interactive-map-debug-panel > .section-head { padding: 15px 16px 10px; }
.interactive-map-debug-panel h2 { margin-top: 4px; color: var(--ink); font: 700 19px/1.2 var(--display); }
.interactive-map-debug-panel p { margin-top: 4px; color: var(--muted-dark); font-size: 10px; line-height: 1.45; }
.interactive-map-debug-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding: 0 13px 12px; }
.interactive-map-debug-grid > div { min-width: 0; padding: 8px; border: 1px solid rgba(113,88,154,.18); border-radius: 8px; background: rgba(255,255,255,.48); }
.interactive-map-debug-grid span { display: block; color: var(--muted); font: 8px/1.25 var(--mono); text-transform: uppercase; }
.interactive-map-debug-grid strong { display: block; margin-top: 4px; color: var(--ink); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.interactive-map-debug-gap-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 0 13px 13px; }
.interactive-map-debug-gap-list > div { min-width: 0; padding: 8px; border: 1px solid rgba(145,78,53,.2); border-radius: 8px; background: rgba(251,237,226,.48); }
.interactive-map-debug-gap-list strong { display: block; margin-top: 5px; color: var(--ink); font: 700 10px var(--mono); overflow-wrap: anywhere; }
.interactive-map-debug-gap-list p { margin-top: 4px; color: var(--muted-dark); font-size: 10px; line-height: 1.4; }
.interactive-map-debug-gap-list small { display: block; margin-top: 5px; color: var(--muted); font: 9px/1.4 var(--mono); }

@media (max-width: 980px) {
  .interactive-map-workspace { grid-template-columns: 1fr; }
  .interactive-map-inspector { position: static; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
  .interactive-map-layer-panel { border-right: 1px solid var(--line); border-bottom: 0; }
  .interactive-map-profile-panel { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .interactive-map-select-group { grid-template-columns: 1fr 1fr; }
  .interactive-map-search { grid-column: 1 / -1; }
  .interactive-map-stage-shell { min-height: 440px; padding: 5px; }
  .interactive-map-canvas { height: 470px; min-height: 390px; }
  .interactive-map-inspector { display: block; }
  .interactive-map-layer-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .interactive-map-raw-canvas { height: 260px; }
  .interactive-map-debug-grid, .interactive-map-debug-gap-list { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .interactive-map-select-group { grid-template-columns: 1fr; }
  .interactive-map-search { grid-column: auto; }
  .interactive-map-stage-head { align-items: start; }
  .interactive-map-zoom-controls button { min-width: 29px; padding: 5px; }
  .interactive-map-room text { font-size: 12px; }
  .interactive-map-room .interactive-map-room-id { font-size: 9px; }
  .interactive-map-field-grid { grid-template-columns: 1fr; }
  .interactive-map-inspector-stats strong { font-size: 13px; }
  .interactive-map-rate-row { grid-template-columns: minmax(0, 1fr) 62px 50px; }
}

/* Ghi đè cuối file để các breakpoint cũ không thu menu mobile về dải icon. */
@media (max-width: 760px) {
  .app-shell { display: block; min-height: 100vh; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: min(348px, 88vw);
    height: 100dvh;
    padding: 24px 18px 22px;
    border-top: 0;
    border-right: 1px solid rgba(220, 185, 107, .28);
    box-shadow: 24px 0 60px rgba(0, 0, 0, .28);
    transform: translateX(-106%);
    transition: transform .22s ease;
  }
  .app-shell.mobile-nav-open .sidebar { transform: translateX(0); }
  .app-shell.mobile-nav-open .mobile-nav-backdrop { display: block; }
  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: none;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(15, 14, 11, .56);
    backdrop-filter: blur(3px);
    cursor: pointer;
  }
  .brand-lockup { display: flex; }
  .sidebar-divider { display: block; margin-block: 25px 18px; }
  .main-nav { display: grid; gap: 6px; overflow-y: auto; overflow-x: hidden; padding-right: 4px; }
  .nav-item { width: 100%; min-height: 49px; justify-content: flex-start; padding: 12px 13px; }
  .nav-item span:not(.nav-icon) { display: inline; }
  .nav-item.is-active::before { left: -19px; inset-block: auto; width: 3px; height: 27px; }
  .nav-item.is-active::after { display: none; }
  .sidebar-foot { display: block; margin-top: 17px; }
  .mobile-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 44px;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--gold-readable);
    background: rgba(255,255,255,.46);
    font-size: 13px;
    font-weight: 700;
  }
  .mobile-menu-icon { font-size: 18px; line-height: 1; }
  .topbar { min-height: 76px; padding: 0 14px; gap: 9px; }
  .breadcrumb { display: none; }
  .topbar-actions { min-width: 0; flex: 1; }
  .global-search { width: 100%; min-height: 46px; padding-inline: 12px; }
  .global-search input { font-size: 13px; }
  .icon-button { width: 40px; height: 40px; }
  .page-wrap { padding: 34px 16px 46px; }
  .hero-copy { font-size: 15px; }
  .section-header { display: block; }
  .section-actions { margin-top: 19px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .metric-card { min-height: 112px; padding: 17px 15px; }
  .metric-card:last-child { grid-column: span 2; }
  .overview-reader-panel, .overview-coverage-panel { padding: 18px; }
  .overview-panel-head { display: block; }
  .overview-panel-head > .badge, .overview-panel-head > .badge-stack { display: inline-flex; margin-top: 12px; }
  .page-reading-grid { grid-template-columns: 1fr; padding: 0 14px 14px 41px; }
  .filter-row { display: grid; grid-template-columns: 1fr; }
  .filter-input { min-width: 0; width: 100%; }
  .subnav button { max-width: 100%; white-space: normal; text-align: left; }
  .table-reading-hint { display: block; font-size: 13px; }
  .table-reading-hint strong { display: block; margin-bottom: 3px; }
  th { font-size: 10px; }
  td { padding: 15px 13px; font-size: 13px; }
  .detail-drawer { width: 100%; padding: 25px 18px 36px; }
  .drawer-head h2 { font-size: 31px; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-field { min-height: 70px; padding: 13px; }
  .detail-field strong { font-size: 14px; }
  .interactive-map-workspace { grid-template-columns: 1fr; gap: 13px; }
  .interactive-map-inspector { position: static; display: block; }
  .interactive-map-select-group { grid-template-columns: 1fr; }
  .interactive-map-search { grid-column: auto; }
  .interactive-map-stage-head { display: block; }
  .interactive-map-zoom-controls { margin-top: 13px; }
  .interactive-map-stage-shell { min-height: 0; padding: 7px; }
  .interactive-map-canvas { height: min(66vh, 620px); min-height: 360px; }
  .interactive-map-stage-help { left: 14px; bottom: 14px; max-width: calc(100% - 28px); font-size: 10px; }
  .interactive-map-selection, .interactive-map-selection-empty { padding: 16px; }
  .interactive-map-field-grid { grid-template-columns: 1fr; }
  .interactive-map-inspector-stats strong { font-size: 17px; }
}

@media (max-width: 480px) {
  .mobile-menu-button { padding-inline: 9px; }
  .mobile-menu-button > span:last-child { display: none; }
  .global-search input { font-size: 12px; }
  .page-wrap { padding-inline: 13px; }
  .metric-card strong { font-size: 29px; }
  .metric-card .metric-label { font-size: 11px; }
  .interactive-map-inspector-stats { gap: 5px; }
  .interactive-map-inspector-stats > div { padding: 8px 6px; }
  .interactive-map-inspector-stats strong { font-size: 17px; }
  .interactive-map-inspector-stats span { font-size: 9px; }
}