/* ==========================================================================
   Detalle de carta en pestañas, gráfico de precio y resumen de la colección
   ========================================================================== */

/* Colores de los gráficos (validados para daltonismo sobre el fondo de la app) */
:root {
  --viz-1: #3987e5; /* azul */
  --viz-2: #d95926; /* naranja */
  --viz-3: #199e70; /* aguamarina */
  --viz-4: #c98500; /* amarillo */
  --viz-5: #d55181; /* magenta */
  --viz-7: #9085e9; /* violeta */
  --viz-up: #3987e5;
  --viz-down: #e66767;
  --viz-quiet: #6a6c78; /* serie secundaria: ventas y minigráficos */
  --viz-grid: #1f1f23; /* rejilla: casi invisible */
  --viz-base: #3a3a41; /* eje y línea de base */
}

/* ---------- Pestañas del detalle de carta ---------- */
.card-dialog .dlg-body { padding-top: 12px; }
.cd-tabs { display: flex; gap: 2px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.cd-tabs button { position: relative; height: 40px; padding: 0 14px; border: 0; background: none; color: var(--muted); font-weight: 560; font-size: var(--fs-sm); }
.cd-tabs button:hover { color: var(--text); }
.cd-tabs button.on { color: var(--text); }
.cd-tabs button.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }
.cd-tabs button:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: var(--r-sm); }

/* ---------- Dónde está ---------- */
.where { display: grid; gap: 8px; }
.where:empty { display: none; }
.where-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.where-head h3 { margin: 0; font-size: var(--fs-2xs); font-weight: 600; font-stretch: var(--label-stretch); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--muted); }
.where-head span { color: var(--muted); font-size: var(--fs-xs); }
.where-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; width: 100%; padding: 10px 14px; text-align: left; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-2); color: inherit; transition: border-color .15s, background .15s; }
.where-item:hover { border-color: var(--line-3); background: var(--surface-2); }
.where-item.here { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); cursor: default; }
.where-item > .i { width: 16px; height: 16px; color: var(--muted); }
.where-item .w-main { display: grid; gap: 1px; min-width: 0; }
.where-item .w-main b { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.where-item .w-main span { color: var(--text-2); font-size: var(--fs-sm); }
.where-item .w-state { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 650; }
.where-item .w-state .i { width: 13px; height: 13px; stroke-width: 3; }
.where-item .w-state.owned { color: var(--ok); }
.where-item .w-state.missing { color: var(--muted); }
.where-item .w-here { font-size: var(--fs-2xs); font-weight: 600; font-stretch: var(--label-stretch); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--accent-2); }
.where-none { color: var(--muted); font-size: var(--fs-sm); padding: 4px 2px; }
.where-none:empty { display: none; }
.page-map { display: grid; gap: 2px; width: 30px; padding: 3px; border-radius: var(--r-xs); background: var(--surface-3); }
.page-map i { aspect-ratio: 63 / 88; border-radius: 1.5px; background: var(--surface-4); }
.page-map i.on { background: var(--accent); }

/* ---------- Precio en el resumen ---------- */
.price-block { display: grid; gap: 8px; }
.price-trend { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 44px; padding: 0 13px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-2); color: inherit; text-align: left; }
.price-trend:hover { border-color: var(--line-3); background: var(--surface-2); }
.price-trend .pt-l { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.price-trend .pt-v { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--fs-xs); min-width: 0; }
.price-trend .pt-v b { font-size: var(--fs-md); color: var(--text-2); }
.price-trend .pt-go { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); font-size: var(--fs-xs); font-weight: 650; }
.price-trend .pt-go .i { width: 14px; height: 14px; }
.up { color: var(--ok) !important; }
.down { color: var(--bad) !important; }
.spark { flex: none; overflow: visible; }
.spark path { fill: none; stroke: var(--viz-quiet); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark circle { fill: var(--accent-2); stroke: var(--bg-2); stroke-width: 1.5; }

/* ---------- Pestaña Precio ---------- */
.cd-price-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.cd-price-head img { width: 44px; aspect-ratio: 63 / 88; border-radius: var(--r-xs); object-fit: cover; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.detail-name.sm { font-size: var(--fs-xl); }

.pc { display: grid; gap: 14px; }
.pc.loading .pc-plot svg, .pc.loading .pc-stats { opacity: .45; transition: opacity .2s; }
.pc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.pc-bar .spacer { flex: 1; }
.segmented.sm button { height: 26px; padding: 0 10px; font-size: var(--fs-xs); }
.select.sm { height: 32px; width: auto; font-size: var(--fs-sm); padding-left: 9px; }
.pc-cond { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-xs); font-weight: 550; }
.pc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
/* Cifras de la gráfica: tira con filetes, como los KPIs */
.pc-stats { gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-2); overflow: hidden; }
.pc-tile { display: grid; gap: 2px; padding: 11px 14px; border-radius: 0; background: transparent; border: 0; box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); min-width: 0; }
.pc-tile .lbl { color: var(--muted); font-size: var(--fs-2xs); font-weight: 600; font-stretch: var(--label-stretch); letter-spacing: var(--label-track); text-transform: uppercase; }
.pc-tile .val { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.pc-tile .val small { font-size: var(--fs-xs); font-weight: 600; margin-left: 1px; }
.pc-tile .sub { color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.pc-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: transparent; color: var(--muted); font-size: var(--fs-xs); font-weight: 560; }
.pc-chip:hover:not(:disabled) { color: var(--text); border-color: var(--muted); }
.pc-chip.on { color: var(--text); background: var(--surface-2); border-color: var(--line-3); }
.pc-chip:disabled { cursor: default; }
.pc-chip:not(.on) .key { opacity: .35; }
.pc-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* claves de leyenda y tooltip: línea para las líneas, barra para las barras */
.key { display: inline-block; flex: none; }
.key.line { width: 14px; height: 2px; border-radius: 2px; background: var(--k); }
.key.dash { width: 14px; height: 0; border-top: 2px dashed var(--k); }
.key.whisker { width: 3px; height: 12px; border-radius: 2px; background: var(--k); opacity: .6; }
.key.bar { width: 8px; height: 10px; border-radius: 2px 2px 0 0; background: var(--k); }
.key.area { width: 12px; height: 10px; border-radius: var(--r-xs); background: var(--k); }
.key.s-price, .key.s-band { --k: var(--viz-1); }
.key.s-maS { --k: var(--viz-4); }
.key.s-maL { --k: var(--viz-3); }
.key.s-trend { --k: var(--viz-5); }
.key.s-cm { --k: var(--viz-2); }
.key.s-paid { --k: var(--viz-7); }
.key.s-vol { --k: var(--viz-quiet); }

.pc-plot { position: relative; min-height: 120px; }
.pc-empty { display: grid; place-items: center; min-height: 260px; color: var(--muted); font-size: var(--fs-sm); text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r-lg); padding: 20px; }
.pc-svg, .cv-svg { display: block; width: 100%; height: auto; overflow: visible; outline: none; }
.pc-svg:focus-visible, .cv-svg:focus-visible { box-shadow: 0 0 0 2px var(--accent-soft); border-radius: var(--r-md); }
.pc-svg .grid, .cv-svg .grid { stroke: var(--viz-grid); stroke-width: 1; }
.pc-svg .base, .pc-svg .tick, .cv-svg .base, .cv-svg .tick { stroke: var(--viz-base); stroke-width: 1; }
.pc-svg .ax, .cv-svg .ax { fill: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.pc-svg .ax.cap { font-size: var(--fs-xs); font-weight: 600; }
.pc-svg .lbl, .cv-svg .lbl { fill: var(--text-2); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.pc-svg .lbl.strong, .cv-svg .lbl.strong { fill: var(--text); font-size: var(--fs-xs); font-weight: 650; }
.pc-svg path.s-price { fill: none; stroke: var(--viz-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pc-svg .s-band { stroke: var(--viz-1); stroke-width: 3.5; stroke-linecap: round; opacity: .32; }
.pc-svg .s-maS { fill: none; stroke: var(--viz-4); stroke-width: 2; stroke-linejoin: round; }
.pc-svg .s-maL { fill: none; stroke: var(--viz-3); stroke-width: 2; stroke-linejoin: round; }
.pc-svg .s-trend { stroke: var(--viz-5); stroke-width: 2; stroke-dasharray: 6 5; stroke-linecap: round; }
.pc-svg .s-cm { stroke: var(--viz-2); stroke-width: 2; stroke-linecap: round; }
.pc-svg .s-paid { stroke: var(--viz-7); stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; }
.pc-svg .s-vol { fill: var(--viz-quiet); }
.pc-svg .dot, .cv-svg .dot { stroke: var(--surface); stroke-width: 2; }
.pc-svg .s-price-dot { fill: var(--viz-1); }
.pc-svg .s-maS-dot { fill: var(--viz-4); }
.pc-svg .s-maL-dot { fill: var(--viz-3); }
.pc-svg .s-trend-dot { fill: var(--viz-5); }
.pc-svg .cross, .cv-svg .cross { stroke: var(--muted); stroke-width: 1; opacity: .7; }
.pc-svg .hit, .cv-svg .hit { fill: transparent; cursor: crosshair; }
.pc-tip, .cv-tip { position: absolute; z-index: 3; min-width: 190px; max-width: 290px; padding: 10px 12px; border-radius: var(--r-md); background: var(--overlay); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line-2); box-shadow: var(--e-2); pointer-events: none; display: grid; gap: 5px; font-size: var(--fs-xs); }
.tt-date { color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.tt-row { display: grid; grid-template-columns: 14px auto minmax(0, 1fr); align-items: center; gap: 8px; }
.tt-row b { color: var(--text); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-row span { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-row.total { border-top: 1px solid var(--line); padding-top: 5px; margin-top: 2px; }
.pc-note, .cv-note { margin: 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }
.pc-table, .cv-table { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-2); }
.pc-table table, .cv-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.pc-table th, .pc-table td, .cv-table th, .cv-table td { padding: 8px 12px; text-align: right; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.pc-table th:first-child, .pc-table td:first-child, .cv-table th:first-child, .cv-table td:first-child { text-align: left; }
.pc-table th, .cv-table th { position: sticky; top: 0; background: var(--surface-2); color: var(--muted); font-size: var(--fs-2xs); font-weight: 600; font-stretch: var(--label-stretch); letter-spacing: var(--label-track); text-transform: uppercase; border-bottom-color: var(--line-2); }

/* ---------- Pestaña Descripción ---------- */
.cardtext { display: grid; gap: 14px; }
.ct-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr)); gap: 8px; }
.ct-stat { display: grid; gap: 3px; align-content: start; min-width: 0; padding: 10px 12px; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); }
.ct-stat span { overflow-wrap: anywhere; color: var(--muted); font-size: var(--fs-2xs); font-weight: 600; font-stretch: var(--label-stretch); letter-spacing: var(--label-track); text-transform: uppercase; }
.ct-stat b { overflow-wrap: anywhere; font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; }
.ct-stat.cost b, .ct-stat.life b { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: var(--fs-lg); background: var(--surface-3); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); }
.ct-stat.attr b { font-size: var(--fs-lg); }
.ct-types { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ct-types > span:first-child { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; margin-right: 4px; }
.ct-effect { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); }
.ct-effect p { margin: 0; font-size: var(--fs-md); line-height: 1.7; color: var(--text); }
.ct-effect p.trigger { padding-top: 10px; border-top: 1px solid var(--line); }
.kw { display: inline-block; padding: 0 7px; margin: 0 1px; border-radius: var(--r-xs); font-size: var(--fs-xs); font-weight: 700; line-height: 1.6; vertical-align: 1px; white-space: nowrap; }
.kw-timing { background: #1f4f9a; color: #e8f0ff; }
.kw-trigger { background: #f1d24a; color: #2a2000; }
.kw-don { background: #0c0c0c; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.kw-once { background: #b0306a; color: #fff; }
.kw-ability { background: #c8571d; color: #fff; }
.kw-counter { background: #9b2c2c; color: #fff; }

/* ---------- Tu colección ---------- */
.dialog.xl { width: min(1180px, calc(100vw - 32px)); height: calc(100vh - 40px); }
.cv { display: grid; gap: 26px; }
.cv-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cv-filters .lbl { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.cv-binders { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-bchip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 11px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: transparent; color: var(--muted); font-size: var(--fs-xs); font-weight: 560; }
.cv-bchip.on { color: var(--text); background: var(--surface-2); }
.cv-bchip:not(.on) .key { opacity: .3; }
.cv-bchip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cv-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: end; }
.cv-hero .figure { font-family: var(--serif); font-size: 56px; font-weight: 400; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.cv-hero .figure-sub { margin-top: 8px; color: var(--text-2); font-size: var(--fs-md); }
.cv-hero .figure-sub b { font-weight: 700; }
.cv-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cv-tile { display: grid; gap: 3px; align-content: start; padding: 13px 15px; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); min-width: 0; }
.cv-tile .lbl { color: var(--muted); font-size: var(--fs-2xs); font-weight: 600; font-stretch: var(--label-stretch); letter-spacing: var(--label-track); text-transform: uppercase; }
.cv-tile .val { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums lining-nums; }
.cv-tile .sub { color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.cv-card { display: grid; gap: 12px; align-content: start; padding: 18px 20px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--hairline-top); min-width: 0; }
.cv-card h3 { margin: 0; font-family: var(--serif); font-size: var(--fs-xl); font-weight: 500; }
.cv-card .cv-sub { margin: -6px 0 0; color: var(--muted); font-size: var(--fs-xs); }
.cv-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 14px; }
.cv-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--text-2); font-size: var(--fs-xs); }
.cv-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cv-plot { position: relative; }
.cv-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.tag { white-space: nowrap; }
.cv-svg .area { opacity: .16; }
.cv-svg .edge { fill: none; stroke-width: 2; stroke-linejoin: round; }
.cv-svg .total { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; }
.cv-svg .bar-hit { fill: transparent; }
.cv-svg .bar:hover, .cv-svg .bar.hot { filter: brightness(1.2); }
.cv-svg .muted-bar { fill: var(--surface-4); }
.cv-svg .zero { stroke: var(--viz-base); stroke-width: 1; }
.cv-list { display: grid; gap: 4px; }
.cv-item { display: grid; grid-template-columns: 22px 38px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 6px 8px; border-radius: var(--r-md); border: 0; background: none; color: inherit; text-align: left; width: 100%; }
.cv-item:hover { background: var(--surface-2); }
.cv-item .rk { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.cv-item img, .cv-item .ph { width: 38px; aspect-ratio: 63 / 88; border-radius: var(--r-xs); object-fit: cover; background: var(--surface-3); display: block; }
.cv-item .t1 { font-weight: 650; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-item .t2 { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-item .t3 { text-align: right; font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.cv-item .t3 small { display: block; font-size: var(--fs-xs); font-weight: 600; }
.cv-progress { display: grid; gap: 10px; place-items: center; min-height: 240px; color: var(--muted); font-size: var(--fs-sm); text-align: center; }
.cv-progress .meter { width: min(320px, 80%); height: 6px; }
/* Historial que aún se está completando, encima de la gráfica (sin taparla) */
.pf-hist-note { display: flex; align-items: center; gap: 10px; margin: -4px 0 8px; }
.pf-hist-note .meter { flex: 0 1 160px; height: 4px; }
.cv-table th[data-sort] { cursor: pointer; user-select: none; }
.cv-table th[data-sort]:hover { color: var(--text); }
.cv-table th.sorted { color: var(--text); }
.cv-table td.name { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.cv-table tr[data-card] { cursor: pointer; }
.cv-table tr[data-card]:hover td { background: var(--surface-2); }
.cv-tip.floating { position: absolute; z-index: 10; min-width: 0; max-width: 300px; font-size: var(--fs-xs); color: var(--text); }

/* barras horizontales: extremo redondeado, base recta, 2 px entre tramos */
.hbars { display: grid; gap: 16px; }
.hbar-row { display: grid; gap: 6px; }
.hbar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: var(--fs-sm); }
.hbar-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 560; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar-name small { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.hbar-val { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hbar-val small { color: var(--muted); font-weight: 600; }
/* La pista entera, apagada, para leer la proporción de un vistazo */
.hbar-track { display: flex; gap: 2px; height: 8px; border-radius: 0 4px 4px 0; background: var(--surface-3); }
.hbar-track .seg { display: block; height: 100%; min-width: 2px; }
.hbar-track .seg:last-child { border-radius: 0 4px 4px 0; }
.hbar-track .seg:first-child { border-radius: 2px 0 0 2px; }
.hbar-track .seg.rest { background: var(--surface-4); }
.hbar-row:hover .seg { filter: brightness(1.15); }

/* barras divergentes desde el cero */
.dbars { display: grid; gap: 2px; }
.dbar-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 58px; align-items: center; gap: 10px; width: 100%; padding: 5px 6px; border: 0; border-radius: var(--r-md); background: none; color: inherit; text-align: left; }
.dbar-row:hover { background: var(--surface-2); }
.dbar-name { display: grid; min-width: 0; }
.dbar-name b { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbar-name span { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbar-track { position: relative; height: 10px; }
.dbar-track .zero { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--viz-base); }
.dbar-track .seg { position: absolute; top: 0; bottom: 0; }
.dbar-track .seg.pos { background: var(--viz-up); border-radius: 0 4px 4px 0; }
.dbar-track .seg.neg { background: var(--viz-down); border-radius: 4px 0 0 4px; }
.dbar-val { display: grid; text-align: right; font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dbar-val small { font-size: var(--fs-xs); font-weight: 600; opacity: .8; }

@media (max-width: 900px) {
  .where-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .where-item > .i, .where-item .w-here { display: none; }
  .price-trend { grid-template-columns: minmax(0, 1fr) auto; }
  .price-trend .pt-l { display: none; }
  .cv-hero { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cv-hero .figure { font-size: 44px; }
  .cv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-cols { grid-template-columns: minmax(0, 1fr); }
}