:root {
  color-scheme: dark;
  --xh-bg: #071019;
  --xh-panel: #0b1722;
  --xh-panel-2: #0e1d2a;
  --xh-line: #213445;
  --xh-line-soft: rgba(113, 148, 176, .18);
  --xh-text: #e5eef5;
  --xh-muted: #8ea5b8;
  --xh-cyan: #46e0d1;
  --xh-blue: #67a7ff;
  --xh-amber: #f4bf62;
  --xh-red: #ef7380;
  --xh-green: #61d99a;
  --xh-shadow: 0 18px 50px rgba(0, 0, 0, .36);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--xh-bg); color: var(--xh-text); }
body.xavi-hud-body { overflow: hidden; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.xh-skip { position: fixed; left: 1rem; top: -5rem; z-index: 9999; background: #fff; color: #000; padding: .7rem 1rem; }
.xh-skip:focus { top: 1rem; }

.xh-app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: 58px 48px minmax(0, 1fr);
  background: radial-gradient(circle at 70% 20%, rgba(41, 98, 129, .18), transparent 36%), var(--xh-bg);
  overflow: hidden;
}

.xh-topbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(280px, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--xh-line);
  background: rgba(5, 14, 22, .96);
  backdrop-filter: blur(16px);
  z-index: 20;
}
.xh-brand { display: flex; align-items: center; gap: .72rem; min-width: 0; }
.xh-brand > span:last-child { display: grid; line-height: 1.05; }
.xh-brand strong { font-size: .98rem; letter-spacing: .02em; white-space: nowrap; }
.xh-brand small { margin-top: .25rem; color: var(--xh-muted); font-size: .58rem; letter-spacing: .18em; }
.xh-brand-mark { width: 29px; height: 29px; position: relative; display: inline-block; }
.xh-brand-mark i { position: absolute; width: 10px; height: 10px; border: 1px solid var(--xh-cyan); transform: rotate(45deg); box-shadow: 0 0 14px rgba(70, 224, 209, .32); }
.xh-brand-mark i:nth-child(1) { left: 1px; top: 9px; }
.xh-brand-mark i:nth-child(2) { left: 10px; top: 1px; }
.xh-brand-mark i:nth-child(3) { left: 18px; top: 10px; }
.xh-top-status { display: flex; align-items: center; gap: .48rem; color: var(--xh-muted); font-size: .68rem; letter-spacing: .08em; white-space: nowrap; }
.xh-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--xh-amber); box-shadow: 0 0 12px currentColor; }
.xh-live-dot.good { background: var(--xh-green); }
.xh-live-dot.bad { background: var(--xh-red); }
.xh-clock { padding-left: .55rem; margin-left: .25rem; border-left: 1px solid var(--xh-line); }
.xh-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.xh-button, .xh-icon-button, .xh-map-tools button, .xh-data-actions button {
  border: 1px solid #315067;
  border-radius: 5px;
  background: #112638;
  color: var(--xh-text);
  padding: .56rem .72rem;
  font-size: .64rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .16s, background .16s, transform .16s;
}
.xh-button:hover, .xh-icon-button:hover, .xh-map-tools button:hover, .xh-data-actions button:hover { border-color: var(--xh-cyan); background: #173448; }
.xh-button:active, .xh-icon-button:active { transform: translateY(1px); }
.xh-button.primary { border-color: rgba(70, 224, 209, .72); background: rgba(21, 84, 82, .72); }
.xh-button.ghost { background: transparent; }
.xh-icon-button { display: none; }

.xh-statbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr)) minmax(190px, 1.4fr);
  border-bottom: 1px solid var(--xh-line);
  background: #09141e;
  z-index: 15;
}
.xh-statbar > div { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .55rem .85rem; border-right: 1px solid var(--xh-line-soft); }
.xh-statbar span { color: var(--xh-muted); font-size: .56rem; letter-spacing: .13em; white-space: nowrap; }
.xh-statbar strong { color: #fff; font-size: .86rem; font-variant-numeric: tabular-nums; }

.xh-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 238px;
  grid-template-areas: "sidebar map" "sidebar data";
}

.xh-sidebar {
  grid-area: sidebar;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1rem;
  overflow: auto;
  border-right: 1px solid var(--xh-line);
  background: linear-gradient(180deg, #0b1823, #08131d);
  z-index: 14;
}
.xh-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--xh-line); }
.xh-panel-heading h1 { margin: .25rem 0 0; font-size: 1.05rem; }
.xh-kicker { color: var(--xh-cyan); font-size: .56rem; font-weight: 800; letter-spacing: .16em; }
.xh-close { display: none; border: 0; background: none; color: var(--xh-text); font-size: 1.5rem; cursor: pointer; }
.xh-field { display: grid; gap: .38rem; }
.xh-field label { display: flex; justify-content: space-between; color: #aec0ce; font-size: .68rem; font-weight: 650; }
.xh-field output { color: var(--xh-cyan); }
.xh-field input:not([type="range"]), .xh-field select {
  width: 100%; min-width: 0; height: 37px;
  border: 1px solid #294155; border-radius: 5px;
  background: #08131d; color: #e9f3fa; padding: 0 .65rem; outline: none;
}
.xh-field input:focus, .xh-field select:focus { border-color: var(--xh-cyan); box-shadow: 0 0 0 2px rgba(70, 224, 209, .1); }
.xh-search-wrap { position: relative; }
.xh-search-wrap input { padding-right: 2rem !important; }
.xh-search-wrap span { position: absolute; right: .7rem; top: .35rem; color: var(--xh-muted); font-size: 1.15rem; }
.xh-grid-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.xh-field input[type="range"] { width: 100%; accent-color: var(--xh-cyan); }
.xh-check { display: flex; align-items: center; gap: .5rem; color: #a6bac9; font-size: .68rem; }
.xh-check input { accent-color: var(--xh-cyan); }
.xh-filter-actions { display: grid; grid-template-columns: 1fr .7fr; gap: .55rem; }
.xh-case-list { margin-top: .25rem; padding-top: .9rem; border-top: 1px solid var(--xh-line); }
.xh-section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: .55rem; }
.xh-section-title h2 { margin: 0; font-size: .78rem; letter-spacing: .05em; }
.xh-section-title span { color: var(--xh-muted); font-size: .65rem; }
.xh-case-cards { display: grid; gap: .45rem; }
.xh-case-card { width: 100%; text-align: left; display: grid; gap: .25rem; padding: .65rem; border: 1px solid #20384b; border-radius: 6px; background: #0a1620; color: var(--xh-text); cursor: pointer; }
.xh-case-card:hover, .xh-case-card.active { border-color: var(--xh-cyan); background: #0e2330; }
.xh-case-card strong { font-size: .73rem; }
.xh-case-card span { display: flex; justify-content: space-between; color: var(--xh-muted); font-size: .61rem; }
.xh-sidebar-footer { margin-top: auto; display: flex; justify-content: space-between; gap: 1rem; padding-top: .8rem; border-top: 1px solid var(--xh-line); color: var(--xh-muted); font-size: .6rem; line-height: 1.45; }
.xh-sidebar-footer a { color: var(--xh-cyan); }

.xh-map-stage { grid-area: map; position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #061019; }
.xh-map { position: absolute; inset: 0; }
.xh-map::after { content: ""; pointer-events: none; position: absolute; inset: 0; box-shadow: inset 0 0 100px rgba(0, 0, 0, .22); }
.xh-map-tools { position: absolute; top: .75rem; right: .75rem; display: flex; gap: .4rem; z-index: 5; }
.xh-map-tools button { backdrop-filter: blur(10px); background: rgba(8, 22, 32, .86); }
.xh-map-status { position: absolute; left: 50%; top: 1rem; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: .45rem; padding: .48rem .7rem; border: 1px solid #294457; border-radius: 999px; background: rgba(6, 18, 27, .88); color: #b9cad7; font-size: .64rem; box-shadow: var(--xh-shadow); }
.xh-map-status.good { border-color: rgba(97, 217, 154, .45); }
.xh-map-status.error { border-color: rgba(239, 115, 128, .6); color: #ffd0d5; }
.xh-map-status.hidden { display: none; }
.xh-spinner { width: 10px; height: 10px; border: 2px solid rgba(255,255,255,.22); border-top-color: var(--xh-cyan); border-radius: 50%; animation: xh-spin .8s linear infinite; }
@keyframes xh-spin { to { transform: rotate(360deg); } }
.xh-legend { position: absolute; left: .75rem; bottom: .75rem; z-index: 5; display: flex; flex-wrap: wrap; gap: .7rem; padding: .48rem .65rem; border: 1px solid #294457; border-radius: 5px; background: rgba(7, 19, 28, .88); color: #bdcbd6; font-size: .58rem; backdrop-filter: blur(10px); }
.xh-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.xh-legend i { width: 7px; height: 7px; border-radius: 50%; }
.xh-legend .verified { background: var(--xh-green); }
.xh-legend .corroborated { background: var(--xh-blue); }
.xh-legend .unverified { background: var(--xh-amber); }
.xh-legend .contradicted { background: var(--xh-red); }

.xh-detail { position: absolute; right: .75rem; top: 3.8rem; z-index: 7; width: min(350px, calc(100% - 1.5rem)); max-height: calc(100% - 5.5rem); overflow: auto; padding: 1rem; border: 1px solid #315065; border-radius: 7px; background: rgba(8, 22, 32, .96); box-shadow: var(--xh-shadow); transform: translateX(calc(100% + 2rem)); opacity: 0; pointer-events: none; transition: transform .22s ease, opacity .22s ease; }
.xh-detail.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
.xh-detail-close { position: absolute; right: .5rem; top: .35rem; border: 0; background: transparent; color: #b8c7d2; font-size: 1.4rem; cursor: pointer; }
.xh-detail h2 { margin: .4rem 2rem .6rem 0; font-size: 1rem; line-height: 1.35; }
.xh-detail p { color: #b7c6d2; font-size: .72rem; line-height: 1.55; white-space: pre-wrap; }
.xh-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin: .8rem 0; }
.xh-detail-grid div { padding: .55rem; border: 1px solid #20384a; border-radius: 5px; background: #091721; }
.xh-detail-grid span { display: block; color: var(--xh-muted); font-size: .54rem; letter-spacing: .08em; text-transform: uppercase; }
.xh-detail-grid strong { display: block; margin-top: .25rem; font-size: .69rem; overflow-wrap: anywhere; }
.xh-detail-source { border-top: 1px solid var(--xh-line); padding-top: .7rem; color: var(--xh-muted); font-size: .63rem; }
.xh-detail-source a { color: var(--xh-cyan); overflow-wrap: anywhere; }
.xh-detail-empty { color: var(--xh-muted); font-size: .72rem; line-height: 1.5; }

.xh-data-panel { grid-area: data; min-width: 0; min-height: 0; display: grid; grid-template-rows: 42px minmax(0, 1fr); border-top: 1px solid var(--xh-line); background: #08131c; transition: height .2s; }
.xh-data-panel.collapsed { grid-template-rows: 42px 0; }
.xh-data-header { display: flex; justify-content: space-between; align-items: center; padding: 0 .8rem; border-bottom: 1px solid var(--xh-line); }
.xh-data-header > div:first-child { display: flex; align-items: center; gap: .8rem; }
.xh-data-header strong { font-size: .72rem; }
.xh-data-actions { display: flex; align-items: center; gap: .7rem; color: var(--xh-muted); font-size: .6rem; }
.xh-data-actions button { padding: .34rem .5rem; background: transparent; }
.xh-table-wrap { min-height: 0; overflow: auto; }
.xh-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .66rem; }
.xh-table th { position: sticky; top: 0; z-index: 2; height: 32px; padding: 0 .65rem; text-align: left; background: #0d1b27; color: #90a7b8; border-bottom: 1px solid var(--xh-line); font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; }
.xh-table td { padding: .5rem .65rem; border-bottom: 1px solid rgba(38, 57, 72, .62); color: #c8d5df; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xh-table tbody tr { cursor: pointer; }
.xh-table tbody tr:hover, .xh-table tbody tr.selected { background: #102636; }
.xh-table th:nth-child(1), .xh-table td:nth-child(1) { width: 130px; }
.xh-table th:nth-child(2), .xh-table td:nth-child(2) { width: 120px; }
.xh-table th:nth-child(4), .xh-table td:nth-child(4) { width: 100px; }
.xh-table th:nth-child(5), .xh-table td:nth-child(5) { width: 105px; }
.xh-table th:nth-child(6), .xh-table td:nth-child(6) { width: 82px; }
.xh-table th:nth-child(7), .xh-table td:nth-child(7) { width: 135px; }
.xh-empty { color: var(--xh-muted) !important; text-align: center !important; padding: 1rem !important; }
.xh-empty.compact { font-size: .66rem; }
.xh-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .38rem; border-radius: 999px; border: 1px solid #365064; font-size: .56rem; text-transform: uppercase; }
.xh-badge.verified { color: #9af1c3; border-color: rgba(97,217,154,.45); }
.xh-badge.corroborated { color: #a9caff; border-color: rgba(103,167,255,.45); }
.xh-badge.unverified { color: #ffd897; border-color: rgba(244,191,98,.45); }
.xh-badge.contradicted, .xh-badge.rejected { color: #ffadb6; border-color: rgba(239,115,128,.48); }

.xh-toast { position: fixed; left: 50%; bottom: 1rem; z-index: 100; transform: translate(-50%, 130%); opacity: 0; padding: .65rem .85rem; border: 1px solid #315065; border-radius: 6px; background: #0c1c28; color: #dce8f0; font-size: .7rem; box-shadow: var(--xh-shadow); transition: .2s; }
.xh-toast.show { transform: translate(-50%, 0); opacity: 1; }
.xh-cms-edit-area { position: fixed; left: 10%; right: 10%; top: 130px; z-index: 1000; max-height: 60vh; overflow: auto; padding: 1rem; background: white; color: #111; border-radius: 8px; box-shadow: 0 20px 80px rgba(0,0,0,.45); }

.xh-content-page { min-height: 100vh; background: var(--xh-bg); }
.xh-content-page > header { display: flex; justify-content: space-between; padding: 1rem 2rem; border-bottom: 1px solid var(--xh-line); }
.xh-content-page a { color: var(--xh-cyan); }
.xh-content-page article { width: min(900px, calc(100% - 2rem)); margin: 3rem auto; line-height: 1.65; }
.xh-content-page h1 { font-size: clamp(2rem, 5vw, 4rem); }

.maplibregl-ctrl-group { background: #0b1b27 !important; border: 1px solid #294457; box-shadow: none !important; }
.maplibregl-ctrl-group button { filter: invert(1); opacity: .78; }
.maplibregl-popup-content { border: 1px solid #315065; border-radius: 6px; background: #0b1a25; color: #e7eff5; box-shadow: var(--xh-shadow); }
.maplibregl-popup-tip { border-top-color: #0b1a25 !important; }

@media (max-width: 980px) {
  .xh-topbar { grid-template-columns: 1fr auto; }
  .xh-top-status { display: none; }
  .xh-actions { grid-column: 2; }
  .xh-actions .ghost { display: none; }
  .xh-icon-button { display: inline-flex; }
  .xh-statbar { grid-template-columns: repeat(4, 1fr); }
  .xh-statbar .wide { display: none; }
  .xh-workspace { grid-template-columns: 1fr; grid-template-areas: "map" "data"; }
  .xh-sidebar { position: fixed; inset: 58px auto 0 0; width: min(350px, 92vw); transform: translateX(-105%); transition: transform .22s; box-shadow: var(--xh-shadow); }
  .xh-sidebar.open { transform: translateX(0); }
  .xh-close { display: block; }
}

@media (max-width: 680px) {
  .xh-app { grid-template-rows: 54px 42px minmax(0, 1fr); }
  .xh-topbar { padding: 0 .65rem; }
  .xh-brand small { display: none; }
  .xh-brand strong { font-size: .82rem; }
  .xh-button.primary { padding: .48rem .55rem; font-size: .56rem; }
  .xh-icon-button { padding: .48rem .55rem; font-size: .56rem; }
  .xh-statbar > div { padding: .45rem .5rem; display: grid; gap: .15rem; }
  .xh-statbar span { font-size: .46rem; }
  .xh-statbar strong { font-size: .72rem; }
  .xh-workspace { grid-template-rows: minmax(0, 1fr) 190px; }
  .xh-map-tools { top: .5rem; right: .5rem; }
  .xh-map-tools button { padding: .45rem; font-size: .52rem; }
  .xh-legend { left: .5rem; bottom: .5rem; gap: .45rem; }
  .xh-detail { top: 3.4rem; right: .5rem; width: calc(100% - 1rem); max-height: calc(100% - 4rem); }
  .xh-table th:nth-child(1), .xh-table td:nth-child(1),
  .xh-table th:nth-child(7), .xh-table td:nth-child(7) { display: none; }
  .xh-table th:nth-child(2), .xh-table td:nth-child(2) { width: 95px; }
  .xh-table th:nth-child(4), .xh-table td:nth-child(4) { width: 80px; }
  .xh-table th:nth-child(5), .xh-table td:nth-child(5) { width: 95px; }
  .xh-table th:nth-child(6), .xh-table td:nth-child(6) { width: 70px; }
}