:root {
  color-scheme: light dark;
  --bg: #0b1017;
  --bg-soft: #101823;
  --panel: #141e2a;
  --panel-2: #172332;
  --line: #29384a;
  --line-soft: #202d3d;
  --text: #f4f7fb;
  --muted: #9fb0c5;
  --accent: #d7aa58;
  --accent-soft: rgba(215, 170, 88, .13);
  --blue: #74a8d8;
  --green: #70bd91;
  --red: #d67c74;
  --purple: #a998da;
  --shadow: 0 18px 50px rgba(0,0,0,.24);
  --radius: 16px;
  --max: 1500px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 15% -20%, rgba(55,84,119,.23), transparent 38rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
}
button, input, select { font: inherit; }
button { color: inherit; }
a { color: var(--blue); }
.visually-hidden {
  position: absolute!important;
  width: 1px!important;
  height: 1px!important;
  padding: 0!important;
  margin: -1px!important;
  overflow: hidden!important;
  clip: rect(0,0,0,0)!important;
  white-space: nowrap!important;
  border: 0!important;
}
.app-header {
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px 28px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 12px;
  display:grid; place-items:center;
  font-weight: 900; letter-spacing: -.04em;
  background: linear-gradient(145deg, var(--accent), #9b7335);
  color: #111;
  box-shadow: inset 0 1px rgba(255,255,255,.28);
}
.brand-name { font-weight: 800; letter-spacing: -.02em; }
.brand-subtitle { color: var(--muted); font-size: 13px; margin-top: 1px; }
.header-actions { display:flex; align-items:end; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.select-wrap, .filter-bar label { display:flex; flex-direction:column; gap:5px; color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; }
select, input[type="search"] {
  min-height: 42px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 12px;
  outline: none;
}
select:focus, input:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.app-main { max-width: var(--max); margin:0 auto; padding: 14px 28px 64px; }
.hero {
  min-height: 164px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:30px;
  padding: 30px 0 25px;
  border-bottom: 1px solid var(--line-soft);
}
.eyebrow, .panel-kicker {
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}
.hero h1 { margin: 6px 0 5px; font-size: clamp(38px, 6vw, 72px); line-height:.96; letter-spacing:-.055em; }
.player-meta { color: var(--muted); display:flex; gap:9px; flex-wrap:wrap; }
.meta-pill, .chip {
  display:inline-flex; align-items:center; min-height:25px;
  padding:4px 8px; border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.025); font-size:12px;
}
.chip.card { color:#f2d59c; border-color:rgba(215,170,88,.42); background:var(--accent-soft); }
.metric-grid {
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 10px;
  padding: 18px 0 22px;
}
.metric {
  min-width:0;
  border:1px solid var(--line-soft);
  border-radius:14px;
  padding:16px 15px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.012));
}
.metric-label { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:800; }
.metric-value { font-size:26px; font-weight:850; letter-spacing:-.04em; margin-top:5px; }
.metric-note { color:var(--muted); font-size:11px; margin-top:2px; }

.tabs {
  display:flex; gap:4px; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10; background:rgba(11,16,23,.94); backdrop-filter:blur(14px);
}
.tab {
  background:transparent; border:0; border-bottom:2px solid transparent;
  padding:13px 17px; cursor:pointer; color:var(--muted); font-weight:750;
}
.tab.active { color:var(--text); border-bottom-color:var(--accent); }
.tab-panel { display:none; padding-top:18px; }
.tab-panel.active { display:block; }

.question-strip {
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  color:var(--muted); font-size:12px; margin: 2px 0 16px;
}
.question-link, .text-button {
  border:0; background:transparent; color:var(--blue); padding:2px 3px; cursor:pointer; font-weight:700;
}
.question-link:hover, .text-button:hover { text-decoration:underline; }

.dashboard-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px; }
.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}
.panel {
  min-width:0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  background:linear-gradient(180deg, rgba(20,30,42,.98), rgba(15,23,33,.98));
  box-shadow: 0 1px rgba(255,255,255,.025) inset;
}
.panel-heading { display:flex; justify-content:space-between; gap:16px; align-items:start; margin-bottom:17px; }
.panel h2 { font-size:18px; margin:3px 0 0; letter-spacing:-.02em; }
.panel-stat { color:var(--muted); font-size:12px; text-align:right; max-width:180px; }
.panel-footnote { color:var(--muted); font-size:11px; margin:14px 0 0; }

.bar-chart { display:flex; flex-direction:column; gap:12px; }
.bar-row { display:grid; grid-template-columns:minmax(110px, 1.1fr) minmax(100px,3fr) auto; gap:11px; align-items:center; font-size:12px; }
.bar-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#dce6f1; }
.bar-track { height:9px; background:#0d141e; border-radius:999px; overflow:hidden; border:1px solid rgba(255,255,255,.025); }
.bar-fill { height:100%; border-radius:inherit; background:linear-gradient(90deg, #6f96bd, #a9c6df); }
.bar-fill.gold { background:linear-gradient(90deg, #a77832, #e0bd73); }
.bar-value { color:var(--muted); font-variant-numeric:tabular-nums; }
.compact .bar-row { gap:9px; grid-template-columns:minmax(135px,1.2fr) minmax(80px,2.6fr) auto; }

.signal-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.signal {
  border:1px solid var(--line-soft); border-radius:12px; padding:13px;
  background:rgba(255,255,255,.02);
}
.signal-value { font-size:25px; font-weight:850; letter-spacing:-.04em; }
.signal-label { color:var(--muted); font-size:11px; margin-top:2px; }
.signal.accent .signal-value { color:#f0ca85; }

.comparison-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.compare-card { border:1px solid var(--line-soft); border-radius:13px; padding:15px; background:rgba(255,255,255,.02); }
.compare-title { font-size:13px; font-weight:800; margin-bottom:12px; }
.compare-metric { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-top:1px solid var(--line-soft); font-size:12px; }
.compare-metric span:first-child { color:var(--muted); }
.compare-metric strong { font-variant-numeric:tabular-nums; }

.rank-list { display:flex; flex-direction:column; }
.rank-item {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center;
  padding:11px 0; border-top:1px solid var(--line-soft);
}
.rank-item:first-child { border-top:0; padding-top:0; }
.rank-number { width:25px; height:25px; border-radius:8px; display:grid; place-items:center; background:#0d151f; color:var(--muted); font-size:11px; font-weight:800; }
.rank-main { min-width:0; }
.rank-title { font-size:13px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-sub { color:var(--muted); font-size:11px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-value { font-weight:800; font-size:13px; text-align:right; white-space:nowrap; }
.rank-button { appearance:none; border:0; background:transparent; color:inherit; width:100%; padding:0; text-align:left; cursor:pointer; display:contents; }
.rank-button:hover .rank-title { color:#fff0c9; }

.filter-bar {
  display:flex; flex-wrap:wrap; gap:10px; align-items:end;
  padding: 5px 0 14px;
}
.search-field { flex: 1 1 360px; }
.search-field input { width:100%; font-size:15px; }
.filter-bar label:not(.search-field){ min-width:170px; }
.section-summary { display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:12px; margin-bottom:12px; }
.muted { color:var(--muted); }

.exposure-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.exposure-card {
  display:grid; grid-template-columns:88px minmax(0,1fr); gap:14px;
  border:1px solid var(--line); border-radius:14px; padding:12px;
  background:var(--panel); cursor:pointer; transition:.15s ease;
  min-height:126px;
}
.exposure-card:hover { transform:translateY(-1px); border-color:#465f79; background:var(--panel-2); }
.exposure-thumb {
  width:88px; height:100px; border-radius:10px; overflow:hidden;
  background:
    linear-gradient(145deg, rgba(215,170,88,.18), transparent 60%),
    #0c141e;
  border:1px solid var(--line-soft);
  display:grid; place-items:center; color:var(--muted); text-align:center; padding:8px;
}
.exposure-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.thumb-year { font-size:18px; font-weight:900; color:#d6dfeb; }
.thumb-source { font-size:9px; margin-top:3px; line-height:1.2; }
.exposure-info { min-width:0; display:flex; flex-direction:column; }
.exposure-id { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.05em; }
.exposure-title { font-size:13px; font-weight:780; line-height:1.3; margin-top:4px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.exposure-footer {
  margin-top:auto;
  padding-top:8px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.exposure-tags { display:flex; gap:5px; flex-wrap:wrap; min-width:0; }
.last-auction-label {
  margin-left:auto;
  color:var(--muted);
  font-size:10px;
  line-height:1.2;
  white-space:nowrap;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.mini-tag { font-size:10px; border:1px solid var(--line); border-radius:999px; padding:3px 6px; color:var(--muted); }
.mini-tag.gold { color:#eac77f; border-color:rgba(215,170,88,.35); }

.line-chart { min-height:280px; }
.line-chart svg { width:100%; height:auto; display:block; overflow:visible; }
.chart-grid-line { stroke:#263648; stroke-width:1; }
.chart-axis-label { fill:#8498ae; font-size:10px; }
.chart-median-line { stroke:#7fb0e3; stroke-width:2.5; fill:none; }
.chart-median-dot { fill:#7fb0e3; stroke:#141e2a; stroke-width:1.5; }
.chart-sale-dot { fill:#d7aa58; stroke:#141e2a; stroke-width:1.5; opacity:.95; }
.price-stack { display:flex; flex-direction:column; gap:10px; }
.price-card { border-top:1px solid var(--line-soft); padding-top:12px; }
.price-card:first-child { border-top:0; padding-top:0; }
.price-label { color:var(--muted); font-size:11px; }
.price-value { font-size:25px; font-weight:850; letter-spacing:-.04em; margin-top:2px; }
.price-note { color:var(--muted); font-size:10px; margin-top:2px; }

.review-list, .queue-list { display:flex; flex-direction:column; gap:10px; }
.review, .queue-item { border:1px solid var(--line-soft); border-radius:12px; padding:13px; background:rgba(255,255,255,.018); }
.review-head, .queue-head { display:flex; justify-content:space-between; gap:12px; align-items:start; }
.review-type, .priority { font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:850; color:var(--muted); }
.verdict { margin-top:7px; font-size:13px; font-weight:730; }
.evidence-list { color:var(--muted); font-size:11px; padding-left:17px; margin:7px 0 0; }
.priority.high { color:#e0b765; }
.priority.medium { color:#8fb8de; }

.model-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:9px; align-items:center; }
.model-node { border:1px solid var(--line); border-radius:12px; padding:13px; min-height:95px; }
.model-node strong { display:block; color:#f0cf91; }
.model-node span { display:block; color:var(--muted); font-size:11px; margin-top:5px; }
.model-arrow { color:var(--muted); font-size:24px; }

.drawer { position:fixed; inset:0; z-index:100; pointer-events:none; visibility:hidden; }
.drawer.open { pointer-events:auto; visibility:visible; }
.drawer-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.62); opacity:0; transition:.18s ease; }
.drawer.open .drawer-backdrop { opacity:1; }
.drawer-panel {
  position:absolute; top:0; right:0; height:100%; width:min(720px, 94vw);
  overflow:auto; background:#0e1620; border-left:1px solid var(--line);
  box-shadow:var(--shadow); transform:translateX(100%); transition:.22s ease;
}
.drawer.open .drawer-panel { transform:translateX(0); }
.drawer-toolbar {
  position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center;
  padding:18px 20px; background:rgba(14,22,32,.96); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.drawer-id { color:var(--muted); font-size:11px; margin-top:2px; }
.icon-button { border:1px solid var(--line); background:var(--panel); border-radius:10px; width:40px; height:40px; cursor:pointer; font-size:24px; line-height:1; }
#drawerContent { padding:20px 20px 50px; }
.drawer-title { font-size:28px; line-height:1.1; letter-spacing:-.035em; margin:0 0 10px; }
.drawer-meta { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:17px; }
.drawer-section { border-top:1px solid var(--line); padding-top:18px; margin-top:18px; }
.drawer-section h3 { margin:0 0 10px; font-size:14px; }
.hero-image { max-height:390px; width:100%; object-fit:contain; background:#070b10; border:1px solid var(--line); border-radius:12px; }
.asset-gallery { outline:none; }
.asset-gallery:focus-visible { box-shadow:0 0 0 2px rgba(215,170,88,.75); border-radius:12px; }
.asset-stage { position:relative; display:grid; place-items:center; min-height:260px; background:#070b10; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.asset-stage .hero-image { border:0; border-radius:0; min-height:260px; }
.gallery-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:1;
  width:42px; height:52px; border:1px solid rgba(255,255,255,.22); border-radius:11px;
  background:rgba(7,11,16,.78); color:#fff; font-size:32px; line-height:1; cursor:pointer;
  box-shadow:0 7px 24px rgba(0,0,0,.35);
}
.gallery-arrow:hover,.gallery-arrow:focus-visible { background:rgba(215,170,88,.92); color:#111; }
.gallery-arrow-prev { left:12px; }
.gallery-arrow-next { right:12px; }
.asset-caption { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:11px 2px 7px; }
.asset-caption strong,.asset-caption span { display:block; }
.asset-caption strong { font-size:12px; }
.asset-caption span { color:var(--muted); font-size:10px; margin-top:2px; }
.asset-caption-actions { display:flex; align-items:center; gap:11px; white-space:nowrap; text-align:right; }
.asset-caption-actions #drawerAssetCount { margin:0; }
.asset-thumbnails { display:flex; gap:8px; overflow-x:auto; padding:5px 2px 10px; scroll-snap-type:x proximity; }
.asset-thumbnail {
  flex:0 0 112px; display:grid; grid-template-rows:78px auto auto; gap:3px; padding:6px;
  color:var(--text); text-align:left; background:rgba(255,255,255,.025); border:1px solid var(--line);
  border-radius:10px; cursor:pointer; scroll-snap-align:start;
}
.asset-thumbnail:hover { border-color:#67809a; background:rgba(255,255,255,.05); }
.asset-thumbnail.active { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); background:var(--accent-soft); }
.asset-thumbnail img { width:100%; height:78px; object-fit:contain; background:#070b10; border-radius:6px; }
.asset-thumbnail span { font-size:11px; font-weight:800; }
.asset-thumbnail small { color:var(--muted); font-size:9px; overflow:hidden; text-overflow:ellipsis; }
.photo-card { border:1px solid var(--line-soft); border-radius:12px; padding:13px; margin-top:9px; }
.photo-head { display:flex; justify-content:space-between; gap:15px; }
.photo-head-badges { display:flex; align-items:flex-end; flex-direction:column; gap:6px; }
.photo-id { font-weight:800; font-size:12px; }
.photo-cert { color:#f0cc88; font-size:11px; }
.auction-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; border-top:1px solid var(--line-soft); padding:9px 0; }
.auction-row:first-child { border-top:0; }
.auction-house { font-size:12px; font-weight:750; }
.auction-meta { color:var(--muted); font-size:10px; margin-top:2px; }
.auction-price { font-weight:850; white-space:nowrap; font-size:12px; }
.note-box { border-left:3px solid var(--accent); background:var(--accent-soft); padding:11px 13px; border-radius:0 9px 9px 0; font-size:12px; color:#e7d8b9; }
.details-list { margin:0; padding-left:18px; color:var(--muted); font-size:12px; }

.empty-state { text-align:center; color:var(--muted); padding:28px 12px; border:1px dashed var(--line); border-radius:12px; }

@media (max-width:1100px){
  .metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .span-4,.span-5,.span-6,.span-7,.span-8{grid-column:span 6}
  .exposure-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .app-header,.app-main{padding-left:16px;padding-right:16px}
  .app-header{align-items:flex-start;flex-direction:column}
  .header-actions{justify-content:flex-start;width:100%}
  .hero{align-items:flex-start;flex-direction:column;min-height:auto}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-grid{grid-template-columns:1fr}
  .span-4,.span-5,.span-6,.span-7,.span-8{grid-column:auto}
  .exposure-grid{grid-template-columns:1fr}
  .tabs{overflow-x:auto}
  .model-flow{grid-template-columns:1fr}
  .model-arrow{transform:rotate(90deg);justify-self:center}
  .comparison-grid{grid-template-columns:1fr}
  .asset-caption{align-items:stretch;flex-direction:column}
  .asset-caption-actions{justify-content:space-between;text-align:left}
  .asset-stage,.asset-stage .hero-image{min-height:220px}
  .gallery-arrow{width:38px;height:46px}
}
@media (max-width:460px){
  .metric-grid{grid-template-columns:1fr}
  .header-actions .button{flex:1 1 100%}
  .bar-row{grid-template-columns:90px minmax(70px,1fr) auto}
  .exposure-card{grid-template-columns:74px minmax(0,1fr)}
  .exposure-thumb{width:74px}
  .exposure-footer{align-items:flex-start;flex-direction:column}
  .last-auction-label{margin-left:0;text-align:left}
}


.chart-break-line { stroke:#50647b; stroke-dasharray:4 4; }
.chart-break-label { fill:#c5d2df; font-weight:700; }
.axis-break-mark path {
  stroke:#8498ae;
  stroke-width:1.4;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.auction-source-note{margin-top:4px;max-width:580px;font-size:11px;line-height:1.35;color:var(--muted,#8ea0b4)}
