/* «Ломбард»: показатели как ценники, цены золотом, скидка штампом.
   Подключается последней, после vibe.css. Цвета и фон тем задаёт vibe.css,
   здесь только формы, общие для всех трёх тем. */
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600 900; font-display: swap; src: url('/static/fonts/unbounded-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600 900; font-display: swap; src: url('/static/fonts/unbounded-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --disp: 'Unbounded', 'Onest', system-ui, sans-serif;
  --money: var(--gold);
  --rule: rgba(200, 190, 255, .2);
  --stamp: #ef6794;
  /* ценник: тёплая бумага с зерном и волокнами, картинка нарисована прямо здесь */
  --tag-bg: #ebe1cb; --tag-fg: #18142d; --tag-muted: #5a5072;
  --tag-good: #0b6e4c; --tag-bad: #b01f52; --tag-gold: #7d5200;
  --paper-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .25 0 0 0 0 .1 0 0 0 .3 0'/%3E%3C/filter%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .55' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .28 0 0 0 0 .12 0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3Crect width='220' height='220' filter='url(%23f)'/%3E%3C/svg%3E");
}
html[data-theme="light"] {
  --rule: rgba(40, 30, 90, .2); --stamp: #d63f78;
  --tag-bg: #18142d; --tag-fg: #f3f3f1; --tag-muted: #b9b3da;
  --tag-good: #6fe3b4; --tag-bad: #ff8aa0; --tag-gold: #f7c56e;
}

/* ── панели и заголовки ───────────────────────────────────────────── */
.card { border-radius: 10px !important; }
.card > h3, .card-head-row h3, .card-title span {
  font: 800 calc(13px * var(--fs)) var(--disp) !important; letter-spacing: .05em !important; text-transform: uppercase; color: var(--head);
}
.page-head h2 { font: 900 calc(30px * var(--fs))/1.1 var(--disp) !important; letter-spacing: -.01em !important; }
.page-head h2::after { content: ""; display: block; width: 96px; height: 6px; margin-top: 10px; background: var(--gold); transform: skewX(-24deg); }
.brand span { font: 800 calc(12.5px * var(--fs)) var(--disp); letter-spacing: 0; }
.mini-title { font-family: var(--disp); }

/* ── показатели: ярлык-ценник с дыркой под верёвку ────────────────── */
.kpis .kpi {
  padding: 12px 14px 12px 34px; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  color: var(--tag-fg);
  background: radial-gradient(circle at 16px 50%, var(--bg) 5px, transparent 6px), var(--paper-tex), var(--tag-bg) !important;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 72%, 0 28%);
}
.kpis .kpi-lbl, .kpis .kpi-sub { color: var(--tag-muted) !important; }
.kpis .kpi-val { font: 800 calc(21px * var(--fs)) var(--disp) !important; letter-spacing: -.01em; color: var(--tag-fg) !important; }
.kpis .kpi-val.good { color: var(--tag-good) !important; }
.kpis .kpi-val.bad { color: var(--tag-bad) !important; }
.kpis .kpi-val.gold { color: var(--tag-gold) !important; }

/* ── списки: строки как в квитанции, цены золотом ─────────────────── */
.rank-list { gap: 0; }
.rank-row, .dd-row, .mini-row { border-radius: 0 !important; border-top: 1px dashed var(--rule); }
.rank-row:first-child, .dd-row:first-child, .mini-row:first-child { border-top-color: transparent; }
.rank-row .pr, .dd-price, .item-row .px, .mk-price { color: var(--money) !important; }
.item-row .px small { color: var(--text-3); }

/* скидка — штамп */
.dd-disc {
  min-width: 0; padding: 2px 7px; font: 800 calc(11.5px * var(--fs)) var(--disp);
  color: var(--stamp); border: 2px solid var(--stamp); border-radius: 4px; transform: rotate(-5deg);
}

/* Аксель над находками */
.axel-says { display: flex; align-items: center; gap: 12px; margin: 2px 0 12px; }
.axel-says[hidden] { display: none; }
.axel-says img {
  flex: none; width: 84px; height: 84px; object-fit: contain; transform: rotate(-5deg);
  filter: drop-shadow(2px 0 0 #f3f3f1) drop-shadow(-2px 0 0 #f3f3f1) drop-shadow(0 2px 0 #f3f3f1) drop-shadow(0 -2px 0 #f3f3f1) drop-shadow(4px 6px 0 rgba(0, 0, 0, .4));
}
/* реплика: облачко с хвостиком в сторону Акселя */
.axel-says p {
  position: relative; margin: 0 0 0 4px; padding: 11px 15px; border-radius: 16px;
  background: var(--paper-tex), var(--tag-bg); color: var(--tag-fg); font-weight: 500;
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .28));
}
.axel-says p::before {
  content: ""; position: absolute; left: -12px; top: 50%; margin-top: -4px;
  border-style: solid; border-width: 2px 13px 12px 0; border-color: transparent var(--tag-bg) transparent transparent;
}

/* ── навигация и выбор ────────────────────────────────────────────── */
.nav button, .side-btn, .switch-row { border-radius: 8px !important; }
.nav button.active, #tabs button.active {
  background: transparent !important; border-radius: 0 !important;
  box-shadow: inset 3px 0 0 var(--gold) !important; color: var(--gold) !important;
}
.item-row { border-radius: 8px; }
.item-row.selected { background: var(--panel-2) !important; box-shadow: inset 3px 0 0 var(--gold) !important; }
.beta-tag { background: var(--gold) !important; border-color: var(--gold) !important; color: #18142d !important; font-weight: 700; }

/* ── кнопки и поля: скруглённые углы вместо «таблеток» ────────────── */
.btn, .btn-primary, .btn-sniper, .btn-sold, .seg, .seg button, .cf-chip { border-radius: 8px !important; }
input, select { border-radius: 8px !important; }
.dash-bars .bcol.last .bar { box-shadow: none !important; }

@media (max-width: 900px) {
  .page-head h2 { font-size: calc(22px * var(--fs)) !important; }
  .axel-says img { width: 64px; height: 64px; }
}

/* заголовок панели не переносится; пояснение рядом сжимается */
.card-head-row h3 { white-space: nowrap; flex: none; }
.card-head-row > .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-head-row .input-sm { min-width: 0; flex: 0 1 130px; }
/* пять ценников в один ряд, пока хватает ширины */
@media (min-width: 1200px) {
  #market-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #market-strip .kpi-lbl, #market-strip .kpi-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #market-strip .kpi-val { font-size: clamp(15px, 1.35vw, 21px) !important; }
}
#dash-deals .card-head-row { flex-wrap: wrap; }