/* inventory.css — the bag (js/inventory.js) in the look the user picked, concept "K" (assets/gen/nightcamp_mob_inv_raw.png):
   cream windows with sky-blue title bars and chunky navy outlines, slots filled with their rarity colour, a dark item
   card. Sizes are 1080p pixels times --u, like the rest of the HUD. */
.iv-panel { display: block; background: rgba(14, 12, 30, 0.38); }
.iv-panel[hidden] { display: none; }
.iv-wrap {
  position: absolute; left: 50%; top: calc(118 * var(--u)); transform: translateX(-50%); transform-origin: 50% 0;
  display: flex; align-items: flex-start; gap: calc(16 * var(--u));
  font: 400 calc(18 * var(--u)) / 1.45 'Mitr', sans-serif; color: var(--ink);
}
.iv-wrap button { font-family: 'Mitr', sans-serif; }

/* ---------------- windows ---------------- */
.iv-win {
  position: relative; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden;
  background: #f7efdc; border: calc(5 * var(--u)) solid var(--ink); border-radius: calc(24 * var(--u));
  box-shadow: inset 0 0 0 calc(4 * var(--u)) #74b6ec, 0 calc(10 * var(--u)) 0 rgba(0, 0, 0, 0.3);
}
.iv-char { width: calc(520 * var(--u)); height: calc(760 * var(--u)); }
.iv-bag { width: calc(548 * var(--u)); height: calc(760 * var(--u)); }
.iv-title {
  position: relative; flex: none; display: flex; align-items: center; justify-content: center; height: calc(58 * var(--u));
  background: linear-gradient(#7fcaf8, #3b8fdc); border-bottom: calc(4 * var(--u)) solid var(--ink);
  font: 800 calc(32 * var(--u)) / 1 'Baloo 2', 'Mitr', sans-serif; color: #fff; letter-spacing: 0.02em;
  -webkit-text-stroke: calc(6 * var(--u)) var(--ink); paint-order: stroke fill;
}
.iv-title::before, .iv-title::after {
  content: ''; position: absolute; top: 50%; width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-top: calc(-8 * var(--u));
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f4f8ff, #9fb6cf); border: calc(3 * var(--u)) solid var(--ink);
}
.iv-title::before { left: calc(16 * var(--u)); }
.iv-title::after { right: calc(16 * var(--u)); }
.iv-bag .iv-title::after { display: none; }
.iv-x {
  position: absolute; right: calc(12 * var(--u)); top: 50%; transform: translateY(-50%); cursor: pointer; padding: 0;
  width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; border: calc(4 * var(--u)) solid var(--ink);
  background: linear-gradient(#ff9d9d, #e0525e); color: #fff; font: 800 calc(20 * var(--u)) / 1 'Baloo 2', sans-serif;
  -webkit-text-stroke: calc(3 * var(--u)) var(--ink); paint-order: stroke fill; box-shadow: inset 0 calc(-3 * var(--u)) 0 rgba(0, 0, 0, 0.2);
}

/* ---------------- tabs ---------------- */
.iv-tabs { flex: none; display: flex; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)) 0; border-bottom: calc(4 * var(--u)) solid var(--ink); }
.iv-tabs button {
  position: relative; flex: 1; cursor: pointer; margin-bottom: calc(-4 * var(--u)); padding: calc(5 * var(--u)) 0;
  border: calc(4 * var(--u)) solid var(--ink); border-radius: calc(16 * var(--u)) calc(16 * var(--u)) 0 0;
  background: linear-gradient(#f5ecd9, #ddd0b5); color: var(--ink); font: 600 calc(19 * var(--u)) / 1.3 'Mitr', sans-serif;
}
.iv-tabs button.on {
  z-index: 1; background: linear-gradient(#7fcaf8, #3b8fdc); color: #fff;
  -webkit-text-stroke: calc(4 * var(--u)) var(--ink); paint-order: stroke fill;
}
.iv-tabs-s button { flex: none; width: calc(150 * var(--u)); }
.iv-tabs-b button { display: flex; flex-direction: column; align-items: center; gap: calc(1 * var(--u)); padding: calc(6 * var(--u)) 0 calc(4 * var(--u)); }
.iv-tabs-b img { width: calc(38 * var(--u)); height: calc(38 * var(--u)); object-fit: contain; filter: drop-shadow(0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.18)); }
.iv-dot {
  position: absolute; top: calc(6 * var(--u)); right: calc(8 * var(--u)); width: calc(13 * var(--u)); height: calc(13 * var(--u));
  border-radius: 50%; background: #ff4d5e; border: calc(2.5 * var(--u)) solid var(--ink);
}

/* ---------------- search ---------------- */
.iv-find { flex: none; display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)) 0; }
.iv-search { position: relative; flex: 1; }
.iv-search input {
  width: 100%; box-sizing: border-box; height: calc(40 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(42 * var(--u));
  border: calc(3 * var(--u)) solid var(--ink); border-radius: calc(20 * var(--u)); outline: none;
  background: #fffaf0; color: var(--ink); font: 400 calc(17 * var(--u)) 'Mitr', sans-serif;
}
.iv-search input:focus { box-shadow: 0 0 0 calc(3 * var(--u)) #7fcaf8; }
.iv-search::before {
  content: ''; position: absolute; left: calc(15 * var(--u)); top: calc(10 * var(--u)); width: calc(12 * var(--u)); height: calc(12 * var(--u));
  border: calc(3 * var(--u)) solid #6a6078; border-radius: 50%; pointer-events: none;
}
.iv-search::after {
  content: ''; position: absolute; left: calc(29 * var(--u)); top: calc(25 * var(--u)); width: calc(8 * var(--u)); height: calc(3 * var(--u));
  background: #6a6078; border-radius: calc(2 * var(--u)); transform: rotate(45deg); pointer-events: none;
}
.iv-chip {
  flex: none; cursor: pointer; height: calc(40 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(20 * var(--u));
  border: calc(3 * var(--u)) solid var(--ink); background: linear-gradient(#7fcaf8, #3b8fdc); color: #fff;
  font: 600 calc(16 * var(--u)) 'Mitr', sans-serif; -webkit-text-stroke: calc(3 * var(--u)) var(--ink); paint-order: stroke fill;
}
.iv-chip[hidden] { display: none; }
.iv-chip b { margin-left: calc(4 * var(--u)); }

/* ---------------- the grid and its cells ---------------- */
.iv-grid {
  position: relative; flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: min-content;
  align-content: start; gap: calc(10 * var(--u)); margin: calc(10 * var(--u)) calc(16 * var(--u)) 0; padding: calc(10 * var(--u));
  background: #ede3ca; border: calc(3 * var(--u)) solid #cdbf9f; border-radius: calc(16 * var(--u));
  scrollbar-width: thin; scrollbar-color: #74b6ec transparent;
}
.iv-grid::-webkit-scrollbar { width: calc(10 * var(--u)); }
.iv-grid::-webkit-scrollbar-thumb { background: #74b6ec; border-radius: calc(5 * var(--u)); }
.iv-cell {
  position: relative; aspect-ratio: 1; min-width: 0; min-height: 0; padding: 0; margin: 0; cursor: pointer; display: grid; place-items: center;
  border: calc(4 * var(--u)) solid var(--ink); border-radius: calc(14 * var(--u)); background: linear-gradient(#f7f2e7, #dcd2be);
  box-shadow: inset 0 calc(-5 * var(--u)) 0 rgba(0, 0, 0, 0.12), inset 0 calc(3 * var(--u)) 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.08s;
}
.iv-cell canvas, .iv-cell > img { position: absolute; left: 8%; top: 8%; width: 84%; height: 84%; object-fit: contain; pointer-events: none; } /* (tall pictures, the rods: never resize the cell) */
.iv-cell:not(.empty):hover { transform: translateY(calc(-2 * var(--u))); filter: brightness(1.05); }
.iv-cell.empty { cursor: default; border-color: #bfb193; background: #e4d8bd; box-shadow: inset 0 calc(3 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.1); }
.iv-cell.sel { z-index: 1; box-shadow: 0 0 0 calc(3 * var(--u)) #fff, 0 0 calc(14 * var(--u)) calc(6 * var(--u)) rgba(80, 170, 255, 0.95); }
.iv-cell.low canvas { opacity: 0.45; filter: grayscale(0.7); }
.iv-cell.nojob canvas { filter: grayscale(0.85) brightness(0.8); }

/* rarity fills: cells, worn slots, the card's big icon */
.iv-wrap .r-common { background: linear-gradient(#f7f2e7, #dcd2be); }
.iv-wrap .r-rare { background: linear-gradient(#d3e9ff, #86bcf1); }
.iv-wrap .r-epic { background: linear-gradient(#e8d6ff, #a985ec); }
.iv-wrap .r-legend { background: linear-gradient(#fff1bd, #f1bc4b); }
.iv-wrap .r-fashion { background: linear-gradient(#ffe2f1, #f6a2cd); }

/* badges */
.iv-cell i, .iv-cell b { font-style: normal; pointer-events: none; }
.iv-n {
  position: absolute; right: calc(5 * var(--u)); bottom: calc(1 * var(--u)); font: 800 calc(20 * var(--u)) / 1.1 'Baloo 2', sans-serif;
  color: #fff; -webkit-text-stroke: calc(5 * var(--u)) var(--ink); paint-order: stroke fill;
}
.iv-new {
  position: absolute; top: calc(-7 * var(--u)); right: calc(-6 * var(--u)); padding: 0 calc(6 * var(--u)); border-radius: calc(8 * var(--u));
  background: #ff4d5e; border: calc(2.5 * var(--u)) solid var(--ink); color: #fff; font: 800 calc(12 * var(--u)) / 1.45 'Baloo 2', sans-serif;
}
.iv-e {
  position: absolute; top: calc(3 * var(--u)); left: calc(3 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%;
  background: #3b8fdc; border: calc(2.5 * var(--u)) solid var(--ink); color: #fff; text-align: center;
  font: 800 calc(13 * var(--u)) / calc(17 * var(--u)) 'Baloo 2', sans-serif;
}
.iv-lv {
  position: absolute; left: calc(3 * var(--u)); bottom: calc(3 * var(--u)); padding: 0 calc(5 * var(--u)); border-radius: calc(6 * var(--u));
  background: #e0525e; border: calc(2 * var(--u)) solid var(--ink); color: #fff; font: 700 calc(12 * var(--u)) / 1.4 'Baloo 2', sans-serif;
}
.iv-nj {
  position: absolute; right: calc(4 * var(--u)); bottom: calc(2 * var(--u)); color: #ff6b7a; font: 800 calc(18 * var(--u)) / 1 'Baloo 2', sans-serif;
  -webkit-text-stroke: calc(4 * var(--u)) var(--ink); paint-order: stroke fill;
}
.iv-cell > img.iv-lk { position: absolute; top: calc(3 * var(--u)); left: calc(3 * var(--u)); width: calc(22 * var(--u)); height: auto; pointer-events: none; }

/* ---------------- the footer ---------------- */
.iv-foot { flex: none; display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); }
.iv-coins {
  display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(42 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(4 * var(--u));
  border-radius: calc(21 * var(--u)); background: #fffaf0; border: calc(3 * var(--u)) solid var(--ink);
}
.iv-coins img { width: calc(34 * var(--u)); height: calc(34 * var(--u)); object-fit: contain; }
.iv-coins b { font: 800 calc(21 * var(--u)) / 1 'Baloo 2', sans-serif; }
.iv-count { flex: 1; font: 500 calc(16 * var(--u)) 'Mitr', sans-serif; color: #6a6078; white-space: nowrap; }
.iv-count.full { color: #c8503c; font-weight: 600; } /* (a full gear bag or storage: js/gearbag.js, 2026-10-08) */
.iv-count.more { cursor: pointer; } .iv-count.more:hover { text-decoration: underline; } /* (the gear tab's count opens ขยายกระเป๋า) */
.iv-btn {
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); height: calc(44 * var(--u));
  padding: 0 calc(14 * var(--u)); border: calc(4 * var(--u)) solid var(--ink); border-radius: calc(14 * var(--u)); white-space: nowrap;
  font: 700 calc(18 * var(--u)) / 1 'Mitr', sans-serif; color: #fff; -webkit-text-stroke: calc(4 * var(--u)) var(--ink); paint-order: stroke fill;
  box-shadow: inset 0 calc(-4 * var(--u)) 0 rgba(0, 0, 0, 0.18), 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.25);
}
.iv-btn[hidden] { display: none; }
.iv-btn img { width: calc(26 * var(--u)); height: calc(26 * var(--u)); object-fit: contain; }
.iv-btn.blue { background: linear-gradient(#7fcaf8, #3b8fdc); }
.iv-btn.gold { background: linear-gradient(#ffe384, #f2b632); color: var(--ink); -webkit-text-stroke: 0; }
.iv-btn.grey { background: linear-gradient(#cfd1dc, #9ea2b3); }
.iv-btn.dark { background: linear-gradient(#4d5476, #33384f); }
.iv-btn:not(:disabled):hover { filter: brightness(1.08); }
.iv-btn:not(:disabled):active { transform: translateY(calc(2 * var(--u))); box-shadow: inset 0 calc(-2 * var(--u)) 0 rgba(0, 0, 0, 0.18); }
.iv-btn:disabled { cursor: default; filter: grayscale(0.75); opacity: 0.6; }

/* ---------------- the character window ---------------- */
.iv-stage {
  position: relative; flex: 1; min-height: 0; margin: calc(10 * var(--u)) calc(14 * var(--u)) 0; border-radius: calc(16 * var(--u));
  background: radial-gradient(ellipse at 50% 64%, #fffbf2 0%, #f3e9d3 55%, #e5d7b9 100%); border: calc(3 * var(--u)) solid #cdbf9f; overflow: hidden;
}
#iv-hero { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.iv-who { position: absolute; top: calc(8 * var(--u)); left: calc(110 * var(--u)); right: calc(110 * var(--u)); text-align: center; line-height: 1.25; pointer-events: none; z-index: 1; }
.iv-who b { display: block; font: 700 calc(23 * var(--u)) 'Mitr', sans-serif; -webkit-text-stroke: calc(4 * var(--u)) #fffbf2; paint-order: stroke fill; }
.iv-who span { font: 500 calc(15 * var(--u)) 'Mitr', sans-serif; color: #5d5470; -webkit-text-stroke: calc(3 * var(--u)) #fffbf2; paint-order: stroke fill; }
.iv-col { position: absolute; top: calc(12 * var(--u)); display: flex; flex-direction: column; gap: calc(6 * var(--u)); z-index: 1; }
.iv-col.L { left: calc(10 * var(--u)); }
.iv-col.R { right: calc(10 * var(--u)); }
.iv-row { position: absolute; bottom: calc(8 * var(--u)); left: 50%; transform: translateX(-50%); display: flex; gap: calc(30 * var(--u)); z-index: 1; }
.iv-slot {
  position: relative; background: none; border: 0; padding: 0; cursor: pointer; width: calc(92 * var(--u));
  display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u)); color: var(--ink);
}
.iv-sbox {
  position: relative; width: calc(80 * var(--u)); height: calc(80 * var(--u)); display: grid; place-items: center; box-sizing: border-box;
  border: calc(4 * var(--u)) solid var(--ink); border-radius: calc(14 * var(--u)); transition: transform 0.08s;
  box-shadow: inset 0 calc(-5 * var(--u)) 0 rgba(0, 0, 0, 0.12), inset 0 calc(3 * var(--u)) 0 rgba(255, 255, 255, 0.6);
}
.iv-wrap .iv-sbox.empty { background: #e4d8bd; border-color: #a99a7d; box-shadow: inset 0 calc(3 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.1); }
.iv-sbox canvas { width: 86%; height: 86%; pointer-events: none; }
.iv-slot .lbl { padding: 0 calc(6 * var(--u)); border-radius: calc(7 * var(--u)); background: rgba(250, 243, 226, 0.92); font: 700 calc(14 * var(--u)) / 1.35 'Mitr', sans-serif; } /* (a big weapon's blade may pass behind) */
.iv-slot:hover .iv-sbox { transform: translateY(calc(-2 * var(--u))); }
.iv-slot.on .iv-sbox { box-shadow: 0 0 0 calc(3 * var(--u)) #fff, 0 0 calc(12 * var(--u)) calc(5 * var(--u)) rgba(80, 170, 255, 0.95); }
.iv-slot.covered .iv-sbox { opacity: 0.4; }
.iv-wset {
  position: absolute; top: calc(-8 * var(--u)); right: calc(-14 * var(--u)); display: flex; border: calc(2.5 * var(--u)) solid var(--ink);
  border-radius: calc(9 * var(--u)); overflow: hidden; background: #fffaf0; box-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.2);
}
.iv-wset i { font: 800 calc(13 * var(--u)) / 1.45 'Baloo 2', sans-serif; font-style: normal; padding: 0 calc(6 * var(--u)); color: #6a6078; }
.iv-wset i.on { background: #3b8fdc; color: #fff; }
.iv-note {
  position: absolute; left: calc(112 * var(--u)); right: calc(112 * var(--u)); bottom: calc(10 * var(--u)); text-align: center;
  font: 400 calc(14 * var(--u)) / 1.4 'Mitr', sans-serif; color: #5d5470; -webkit-text-stroke: calc(3 * var(--u)) #fffbf2; paint-order: stroke fill;
}
.iv-strip {
  flex: none; display: flex; align-items: center; gap: calc(10 * var(--u)); margin: calc(12 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u));
  padding: calc(5 * var(--u)) calc(6 * var(--u)) calc(5 * var(--u)) calc(14 * var(--u)); background: #fffaf0;
  border: calc(3 * var(--u)) solid var(--ink); border-radius: calc(16 * var(--u)); font: 700 calc(18 * var(--u)) / 1 'Baloo 2', sans-serif;
}
.iv-strip span { white-space: nowrap; }
.iv-strip span + span { padding-left: calc(10 * var(--u)); border-left: calc(2 * var(--u)) solid #cdbf9f; }
.iv-strip b { color: #6a6078; margin-right: calc(4 * var(--u)); }
.iv-strip .iv-btn { margin-left: auto; height: calc(40 * var(--u)); font-size: calc(17 * var(--u)); }

/* ---------------- the item card ---------------- */
.iv-detail {
  flex: none; width: calc(430 * var(--u)); max-height: calc(702 * var(--u)); margin-top: calc(58 * var(--u)); box-sizing: border-box;
  overflow-y: auto; padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)); color: #eef0ff;
  background: linear-gradient(#272b47, #1b1e33); border: calc(5 * var(--u)) solid var(--ink); border-radius: calc(20 * var(--u));
  box-shadow: inset 0 0 0 calc(3 * var(--u)) #4b5687, 0 calc(10 * var(--u)) 0 rgba(0, 0, 0, 0.3); scrollbar-width: thin; scrollbar-color: #4b5687 transparent;
}
.iv-detail.rd-rare { box-shadow: inset 0 0 0 calc(3 * var(--u)) #4f8fd6, 0 calc(10 * var(--u)) 0 rgba(0, 0, 0, 0.3); }
.iv-detail.rd-epic { box-shadow: inset 0 0 0 calc(3 * var(--u)) #8f6ad6, 0 calc(10 * var(--u)) 0 rgba(0, 0, 0, 0.3); }
.iv-detail.rd-legend { box-shadow: inset 0 0 0 calc(3 * var(--u)) #c9973a, 0 calc(10 * var(--u)) 0 rgba(0, 0, 0, 0.3); }
.iv-detail.rd-fashion { box-shadow: inset 0 0 0 calc(3 * var(--u)) #d27aa9, 0 calc(10 * var(--u)) 0 rgba(0, 0, 0, 0.3); }
.iv-stars { font: 400 calc(26 * var(--u)) / 1.1 sans-serif; color: #ffcf4a; letter-spacing: calc(2 * var(--u)); -webkit-text-stroke: calc(1.5 * var(--u)) var(--ink); }
.iv-stars i { font-style: normal; color: #454a6a; }
.iv-stars span { margin-left: calc(8 * var(--u)); font: 500 calc(15 * var(--u)) 'Mitr', sans-serif; color: #aab0d4; letter-spacing: 0; -webkit-text-stroke: 0; vertical-align: middle; }
.iv-name { margin-top: calc(2 * var(--u)); font: 700 calc(27 * var(--u)) / 1.2 'Mitr', sans-serif; text-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.55); }
.iv-type { font: 400 calc(17 * var(--u)) / 1.5 'Mitr', sans-serif; color: #d9dcf2; }
.iv-type b { font-weight: 600; margin-right: calc(6 * var(--u)); }
.iv-tags { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); margin-top: calc(6 * var(--u)); }
.iv-tag {
  padding: 0 calc(9 * var(--u)); border-radius: calc(8 * var(--u)); background: #394166; border: calc(2 * var(--u)) solid #5d6798;
  font: 700 calc(14 * var(--u)) / 1.65 'Mitr', sans-serif; color: #e9ecff;
}
.iv-tag.lv { background: #2f6fc4; border-color: #7fcaf8; }
.iv-tag.bad { background: #b83a4a; border-color: #ff8a95; }
.iv-tag.pink { background: #a34a7c; border-color: #ff9ad5; }
.iv-why { margin-top: calc(6 * var(--u)); font: 500 calc(15 * var(--u)) / 1.4 'Mitr', sans-serif; color: #ff9aa4; }
.iv-hero { display: flex; align-items: center; gap: calc(14 * var(--u)); margin-top: calc(12 * var(--u)); }
.iv-big {
  flex: none; width: calc(128 * var(--u)); height: calc(128 * var(--u)); display: grid; place-items: center; box-sizing: border-box;
  border: calc(4 * var(--u)) solid var(--ink); border-radius: calc(16 * var(--u)); box-shadow: 0 0 calc(16 * var(--u)) rgba(255, 255, 255, 0.12);
}
.iv-big canvas, .iv-big img { width: 88%; height: 88%; object-fit: contain; }
.iv-main { min-width: 0; font: 500 calc(18 * var(--u)) / 1.5 'Mitr', sans-serif; }
.iv-main b { font-weight: 500; color: #aab0d4; margin-right: calc(7 * var(--u)); }
.iv-main small, .iv-set small { color: #aab0d4; font-size: 0.85em; }
.iv-main .dim { color: #9ca1c4; }
.iv-lines { margin-top: calc(10 * var(--u)); font: 500 calc(17 * var(--u)) / 1.5 'Mitr', sans-serif; color: #8ff08a; }
.iv-lines .src { color: #cfd3ee; font-weight: 400; }
.iv-lines .fx { color: #ffd27a; }
.iv-set {
  margin-top: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(12 * var(--u));
  background: rgba(255, 255, 255, 0.05); font: 400 calc(15 * var(--u)) / 1.5 'Mitr', sans-serif; color: #9ca1c4;
}
.iv-set .h { color: #e9ecff; font-weight: 600; }
.iv-set .on, .iv-set .b.on { color: #8ff08a; }
.iv-set .b { margin-top: calc(2 * var(--u)); }
.iv-cmp {
  margin-top: calc(10 * var(--u)); padding-top: calc(10 * var(--u)); border-top: calc(2 * var(--u)) solid #3b4166;
  font: 600 calc(17 * var(--u)) / 1.5 'Mitr', sans-serif; color: #cfd3ee;
}
.iv-cmp .h { font-weight: 400; font-size: calc(15 * var(--u)); color: #9ca1c4; }
.iv-cmp .up { color: #8ff08a; }
.iv-cmp .down { color: #ff8a95; }
.iv-cmp.now { color: #8fd0ff; }
.iv-desc { margin-top: calc(10 * var(--u)); font: italic 400 calc(16 * var(--u)) / 1.5 'Mitr', sans-serif; color: #a9aecd; }
.iv-acts { display: flex; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); }
.iv-acts .iv-btn { flex: 1; }
.iv-hint { margin-top: calc(8 * var(--u)); text-align: center; font: 400 calc(14 * var(--u)) / 1.4 'Mitr', sans-serif; color: #9ca1c4; }
.iv-empty { display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(40 * var(--u)) calc(10 * var(--u)); text-align: center; }
.iv-empty b { font: 600 calc(22 * var(--u)) 'Mitr', sans-serif; }
.iv-empty span { font: 400 calc(16 * var(--u)) / 1.5 'Mitr', sans-serif; color: #9ca1c4; }