/* H.viz uslublari (F). Ranglar tokenlardan; soya yo'q. To'lish animatsiyasi faqat .vz-anim bilan va reduced-motion'da o'chadi. */
.vz-ring { position: relative; flex: none; display: inline-block; }
.vz-ring svg { display: block; transform: none; }
.vz-ring .bg { fill: none; stroke: var(--v-t, #f3ecfe); }
.vz-ring .fg { fill: none; stroke: var(--v, #7703fc); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 180ms ease; }
.vz-ring .fg.g { stroke: var(--green, #16a34a); } .vz-ring .fg.r { stroke: var(--red, #e2445c); } .vz-ring .fg.b { stroke: var(--blue, #3894f7); } .vz-ring .fg.y { stroke: var(--amber, #d97706); }
.vz-ring .ct { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.1; }
.vz-ring .ct b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.vz-ring.big .ct b { font-size: 34px; }
.vz-ring .ct small { color: var(--gray, #6e6c78); font-size: 11.5px; margin-top: 2px; }
.vz-ring.vz-anim .fg { animation: vz-ring 900ms cubic-bezier(.22, .8, .24, 1) both; }
@keyframes vz-ring { from { stroke-dashoffset: 100; } }

.vz-bar { display: block; width: 100%; overflow: hidden; border-radius: 999px; }
.vz-bar .bg { fill: var(--panel, #f4f4f7); }
.vz-bar .fg { fill: var(--v, #7703fc); transform-box: fill-box; transform-origin: left center; }
.vz-bar .fg.g { fill: var(--green, #16a34a); } .vz-bar .fg.r { fill: var(--red, #e2445c); } .vz-bar .fg.b { fill: var(--blue, #3894f7); } .vz-bar .fg.y { fill: var(--amber, #d97706); }
.vz-bar .mk { fill: var(--ink, #1c1b22); opacity: .55; }
.vz-bar.vz-anim .fg { animation: vz-grow 700ms cubic-bezier(.22, .8, .24, 1) both; }
@keyframes vz-grow { from { transform: scaleX(0); } }

.vz-bars { display: grid; gap: 14px; }
.vz-brow { display: grid; gap: 6px; }
.vz-bh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.vz-bl { color: var(--ink, #1c1b22); font-weight: 500; font-size: 14px; }
.vz-bv { font-weight: 700; font-variant-numeric: tabular-nums; }
.vz-bv.g { color: var(--green, #16a34a); } .vz-bv.r { color: var(--red, #e2445c); } .vz-bv.v { color: var(--v, #7703fc); } .vz-bv.b { color: var(--blue, #3894f7); }
.vz-bs { color: var(--gray, #6e6c78); font-size: 12.5px; }

.vz-spark { display: block; overflow: visible; }
.vz-spark .ln { fill: none; stroke: var(--v, #7703fc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 100; }
.vz-page .lnk { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--ink, #1c1b22); text-align: left; cursor: pointer;
  background-image: linear-gradient(var(--v, #7703fc), var(--v, #7703fc)); background-size: 0 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 180ms ease, color 180ms ease; }
.vz-page .lnk:hover, .vz-page .lnk:focus-visible { color: var(--v, #7703fc); background-size: 100% 1.5px; }
.vz-spark .ar { fill: var(--v, #7703fc); opacity: .08; }
.vz-spark .dt { fill: var(--v, #7703fc); }
.vz-spark.g .ln, .vz-spark.g .dt { stroke: var(--green, #16a34a); fill: var(--green, #16a34a); } .vz-spark.g .ln { fill: none; }
.vz-spark.r .ln, .vz-spark.r .dt { stroke: var(--red, #e2445c); fill: var(--red, #e2445c); } .vz-spark.r .ln { fill: none; }
.vz-spark.vz-anim .ln { animation: vz-draw 900ms ease both; }
@keyframes vz-draw { from { stroke-dashoffset: 100; } }

.vz-delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 999px; padding: 2px 9px 2px 7px;
  background: var(--panel, #f4f4f7); color: var(--gray, #6e6c78); font-size: 13px; line-height: 1.4; }
.vz-delta .tr { fill: currentColor; } .vz-delta .fl { stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.vz-delta.good { background: var(--green-t, #e8f8ee); color: var(--green, #16a34a); }
.vz-delta.bad { background: var(--red-t, #fcebee); color: var(--red, #e2445c); }

@media (prefers-reduced-motion: reduce) {
  .vz-ring.vz-anim .fg, .vz-bar.vz-anim .fg, .vz-spark.vz-anim .ln { animation: none; }
  .vz-ring .fg { transition: none; }
}
html[data-motion="off"] .vz-anim .fg, html[data-motion="off"] .vz-anim .ln { animation: none; }

/* ===== F sahifalari umumiy bo'laklari (Reja, Expansion, Reyting, Bonuslar) ===== */
.vz-page { display: grid; gap: 18px; align-content: start; }
.vz-page > .phead { margin-bottom: 0; }
.vz-page .subh { margin: 10px 0 -4px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.vz-page .lead { margin: 0; color: var(--gray, #6e6c78); }
.vz-page .meta { margin: 0; color: var(--gray, #6e6c78); font-size: 13px; }
.vz-page .hint, .vz-page .asof { margin-top: 0; }
.vz-page .cok { color: var(--green-tx, #0f6b31); font-weight: 600; }
.vz-page .cbad { color: var(--red-tx, #a11a30); font-weight: 600; }
.vz-page .muted { color: var(--gray, #6e6c78); }
.vz-page .kvrow { display: flex; gap: 22px; flex-wrap: wrap; }
.vz-page .kv .caps { font: 700 11px/1.2 var(--font-caps, 'Manrope', system-ui, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--gray, #6e6c78); }
.vz-page .kv b { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.vz-page .kv.sm b { font-size: 18px; }
.vz-g2 { display: grid; gap: var(--gap, 16px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vz-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.vz-tile { padding: 14px 16px; }
.vz-tile .kv b { font-size: 26px; }

/* Hero, plitkalar, kartalar: hover 2px ko'tarilish + binafsha chegara, soya yo'q */
.vz-hero { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.vz-hside { flex: 1; min-width: 240px; display: grid; gap: 12px; }
.vz-left { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 20px; color: var(--gray, #6e6c78); }
.vz-left b { font-size: clamp(40px, 5vw, 60px); line-height: 1.04; font-weight: 700; letter-spacing: -.03em; color: var(--v, #7703fc); font-variant-numeric: tabular-nums; }
.vz-left.done span { color: var(--green-tx, #0f6b31); font-weight: 600; }
.vz-tile, .vz-card, .vz-sw { transition: transform 180ms ease, border-color 180ms ease; }
@media (hover: hover) and (pointer: fine) {
  .vz-tile:hover, .vz-card:hover, .vz-sw:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--v, #7703fc) 45%, var(--line, #e8e7ee)); }
}
.vz-tile.alarm { border-color: color-mix(in srgb, var(--red, #e2445c) 40%, var(--line, #e8e7ee)); }
.vz-card { display: grid; gap: 12px; align-content: start; }
.vz-ch { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.vz-ch .subh { margin: 0; }
.vz-note { margin: 0; font-size: 13.5px; font-weight: 500; }
.vz-note.r { color: var(--red-tx, #a11a30); } .vz-note.g { color: var(--green-tx, #0f6b31); }
.vz-more { border-top: 1px solid var(--line, #e8e7ee); padding-top: 8px; }
.vz-more > summary { cursor: pointer; color: var(--gray, #6e6c78); font-size: 13px; font-weight: 600; list-style: none; }
.vz-more > summary::-webkit-details-marker { display: none; }
.vz-more > summary::before { content: '+ '; color: var(--v, #7703fc); }
.vz-more[open] > summary::before { content: '\2212 '; }
.vz-more[open] > .tw { margin-top: 8px; animation: vz-in 180ms ease both; }
.vz-page .empty.vz-empty { border: 1px dashed color-mix(in srgb, var(--v, #7703fc) 28%, var(--line, #e8e7ee)); border-radius: var(--r, 18px); background: var(--card, #fff); }

@keyframes vz-in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 760px) {
  .vz-g2 { grid-template-columns: minmax(0, 1fr); }
  .vz-hero { gap: 16px; }
  .vz-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vz-tile .kv b { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .vz-more[open] > .tw { animation: none; }
  .vz-tile, .vz-card, .vz-sw { transition: none; }
}
.vz-head .helpbox .vz-intro { margin: 0 0 8px; color: var(--ink, #1c1b22); font-weight: 500; }