/* CopperScan AI — интерфейс
 * Проектиран за работа на двора: едри бутони, висок контраст,
 * четимост на пряка слънчева светлина, работа с една ръка. */

:root {
  --bg:        #0e1116;
  --bg2:       #161b23;
  --bg3:       #1e2530;
  --line:      #2a323f;
  --text:      #e8edf4;
  --muted:     #8e9bb0;
  --copper:    #c87137;
  --copper-lt: #e08a4a;
  --green:     #2ea043;
  --amber:     #d29922;
  --red:       #da3633;
  --blue:      #3d8bfd;
  --radius:    12px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body { padding-bottom: 78px; }   /* място за долната навигация */

/* ============================ ХЕДЪР ============================ */

header {
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(180deg, #171d26 0%, #131820 100%);
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
}
header .logo {
  /* 32 px, а не 28: под това детайлът на мотора в знака се слива на каша */
  width: 32px; height: 32px; flex: none;
  display: block; object-fit: contain;
}
header h1 {
  margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .3px;
  flex: 1;
}
header h1 span { color: var(--copper-lt); }
header .badge {
  font-size: 11px; color: var(--muted); background: var(--bg3);
  padding: 3px 8px; border-radius: 20px; border: 1px solid var(--line);
  white-space: nowrap;
}

/* ============================ ОБВИВКА ============================ */

main { padding: 14px; max-width: 720px; margin: 0 auto; }
.view { display: none; }
.view.active { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.card {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}
.card h2 {
  margin: 0 0 12px; font-size: 15px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .6px;
}
.card h2.plain { text-transform: none; letter-spacing: 0; color: var(--text); font-size: 16px; }

/* ============================ ФОРМИ ============================ */

label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; font-weight: 600; }
.hint { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.35; }

input[type=text], input[type=number], input[type=date], select, textarea {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 10px;
  padding: 12px 12px;
  font-size: 16px;           /* 16px спира авто-зуума на iPhone */
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--copper); }
textarea { min-height: 70px; resize: vertical; }
select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%238e9bb0' stroke-width='2' fill='none'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }

/* Плъзгач за разхода на гориво. Дебел е нарочно — пипа се с палец,
   а не с мишка, и трябва да се хване без прицелване. */
input[type=range] {
  width: 100%; appearance: none; background: transparent;
  margin: 6px 0 2px; outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: var(--bg3); border: 1px solid var(--line);
}
input[type=range]::-moz-range-track {
  height: 6px; border-radius: 3px;
  background: var(--bg3); border: 1px solid var(--line);
}
input[type=range]::-webkit-slider-thumb {
  appearance: none; width: 22px; height: 22px; margin-top: -9px;
  border-radius: 50%; background: var(--copper);
  border: 2px solid var(--bg2); cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--copper); border: 2px solid var(--bg2); cursor: pointer;
}

.field { margin-bottom: 12px; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; min-width: 0; }

.unit-wrap { position: relative; }
.unit-wrap .unit {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--muted); pointer-events: none;
}
.unit-wrap input { padding-right: 56px; }

.check {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg3); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px; cursor: pointer;
}
.check input { width: 20px; height: 20px; accent-color: var(--copper); margin: 0; flex: none; }
.check span { font-size: 14px; color: var(--text); font-weight: 500; }

/* ============================ БУТОНИ ============================ */

button, .btn {
  font-family: inherit; font-size: 15px; font-weight: 700;
  border: none; border-radius: 10px; padding: 14px 16px;
  cursor: pointer; transition: filter .15s, transform .05s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
button:active, .btn:active { transform: scale(.985); }
.btn-primary { background: var(--copper); color: #fff; width: 100%; font-size: 17px; padding: 16px; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { background: var(--bg3); color: var(--text); border: 1px solid var(--line); }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); font-weight: 600; }
.btn-danger { background: transparent; color: var(--red); border: 1px solid var(--red); }
.btn-sm { padding: 9px 12px; font-size: 13px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row > * { flex: 1; min-width: 120px; }

/* ====================== ИЗБОР НА КАТЕГОРИЯ ====================== */

.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cat-btn {
  background: var(--bg3); border: 2px solid var(--line);
  border-radius: var(--radius); padding: 16px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; transition: all .15s; color: var(--text);
}
.cat-btn .ico { font-size: 30px; line-height: 1; }
.cat-btn .nm { font-size: 13px; font-weight: 700; text-align: center; }
.cat-btn.active { border-color: var(--copper); background: rgba(200,113,55,.14); }

/* ============================ РЕЗУЛТАТ ============================ */

.verdict {
  border-radius: var(--radius); padding: 18px; text-align: center;
  margin-bottom: 12px; border: 2px solid;
}
.verdict .big { font-size: 26px; font-weight: 900; letter-spacing: .5px; margin: 6px 0; }
.verdict .sub { font-size: 14px; opacity: .95; }
.verdict.buy    { background: rgba(46,160,67,.14);  border-color: var(--green); color: #7ee08e; }
.verdict.haggle { background: rgba(210,153,34,.14); border-color: var(--amber); color: #f0c451; }
.verdict.no     { background: rgba(218,54,51,.14);  border-color: var(--red);   color: #ff8a87; }
.verdict.info   { background: rgba(61,139,253,.12); border-color: var(--blue);  color: #8ab7ff; }

.headline {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.headline .title { font-size: 18px; font-weight: 800; }
.headline .conf { font-size: 13px; color: var(--muted); white-space: nowrap; }

.conf-bar { height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
.conf-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--amber), var(--green)); }

/* Редове с числа */
.lines { display: flex; flex-direction: column; gap: 1px; background: var(--line); border-radius: 10px; overflow: hidden; }
.line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  background: var(--bg2); padding: 11px 13px; font-size: 14px;
}
.line .k { color: var(--muted); }
.line .v { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.line.total { background: var(--bg3); }
.line.total .k, .line.total .v { font-size: 15px; color: var(--text); font-weight: 800; }
.line .v.pos { color: #7ee08e; }
.line .v.neg { color: #ff8a87; }
.line .v.cu  { color: var(--copper-lt); }

.range { font-size: 12px; color: var(--muted); font-weight: 500; }

/* Предупреждения */
.warn {
  display: flex; gap: 9px; padding: 11px 12px; border-radius: 9px;
  font-size: 13px; line-height: 1.45; margin-bottom: 8px; border: 1px solid;
}
.warn .ic { flex: none; font-size: 15px; }
.warn.danger { background: rgba(218,54,51,.10);  border-color: rgba(218,54,51,.35);  color: #ffb3b1; }
.warn.warn   { background: rgba(210,153,34,.10); border-color: rgba(210,153,34,.35); color: #f2d38a; }
.warn.info   { background: rgba(61,139,253,.09); border-color: rgba(61,139,253,.30); color: #a9c9ff; }

.pill {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 20px; margin-right: 6px;
  background: var(--bg3); border: 1px solid var(--line); color: var(--muted);
}
.pill.ok { color: #7ee08e; border-color: rgba(46,160,67,.4); background: rgba(46,160,67,.1); }
.pill.cu { color: var(--copper-lt); border-color: rgba(200,113,55,.4); background: rgba(200,113,55,.1); }

/* Списък с причини — „Защо?“ и разбивката на увереността */
.why { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.why li {
  display: flex; gap: 9px; align-items: baseline;
  font-size: 13px; line-height: 1.45; color: var(--text);
}
.why li > span { flex: none; width: 14px; font-weight: 800; }
.why li > div { flex: 1; }
.why li > b { flex: none; font-variant-numeric: tabular-nums; font-size: 12px; }
.why li.plus  > span, .why li.plus  > b { color: #7ee08e; }
.why li.minus > span, .why li.minus > b { color: #ff8a87; }
.why li.zero  > span { color: var(--muted); }
.why li.zero  > div { color: var(--muted); }

/* Сгъната подробност — не тежи на екрана, докато не я поискаш */
.drill { margin-bottom: 12px; }
.drill > summary {
  cursor: pointer; font-size: 12px; color: var(--muted);
  list-style: none; padding: 2px 0; user-select: none;
}
.drill > summary::-webkit-details-marker { display: none; }
.drill > summary::before { content: '▸ '; }
.drill[open] > summary::before { content: '▾ '; }
.drill > summary:hover { color: var(--text); }
.drill > .why { margin: 8px 0 4px; padding: 10px 12px; background: var(--bg3); border-radius: 9px; }

/* ============================ БАЗА ============================ */

.rec {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px; margin-bottom: 9px;
  cursor: pointer; transition: border-color .15s;
}
.rec:hover { border-color: var(--copper); }
.rec .top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.rec .nm { font-weight: 700; font-size: 15px; }
.rec .meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.rec .nums { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; font-size: 13px; }
.rec .nums b { color: var(--copper-lt); }

.status {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  padding: 3px 8px; border-radius: 20px; white-space: nowrap;
}
.status.listing    { background: rgba(61,139,253,.15); color: #8ab7ff; }
.status.bought     { background: rgba(210,153,34,.15); color: #f0c451; }
.status.dismantled { background: rgba(46,160,67,.15);  color: #7ee08e; }
.status.skipped    { background: var(--bg3);           color: var(--muted); }

/* Преливат на нов ред, не в скрол. Хоризонтален скрол на телефон
   крие бутони зад ръба и никой не се сеща да дърпа настрани. */
.filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.filters button {
  background: var(--bg3); border: 1px solid var(--line); color: var(--muted);
  padding: 8px 13px; font-size: 13px; border-radius: 20px; white-space: nowrap; font-weight: 600;
}
.filters button.active { background: var(--copper); color: #fff; border-color: var(--copper); }

.empty { text-align: center; padding: 36px 20px; color: var(--muted); }
.empty .ico { font-size: 40px; margin-bottom: 10px; }

/* ====================== 📷 КАМЕРА ====================== */

.cam-modal {
  position: fixed; inset: 0; z-index: 300;
  background: #000; display: flex; flex-direction: column;
}
.cam-stage { flex: 1; position: relative; overflow: hidden; display: flex;
  align-items: center; justify-content: center; }
.cam-stage video, .cam-stage canvas {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
}

/* Рамката за табелката — 86% × 46%, същите числа както при изрязването */
.cam-guide {
  position: absolute; left: 7%; top: 27%; width: 86%; height: 46%;
  border: 2px dashed rgba(224,138,74,.9); border-radius: 10px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.45);
  display: flex; align-items: flex-start; justify-content: center;
  pointer-events: none;
}
.cam-guide span {
  background: rgba(0,0,0,.7); color: #e08a4a; font-size: 12px; font-weight: 700;
  padding: 4px 12px; border-radius: 0 0 8px 8px;
}
.cam-hint {
  position: absolute; bottom: 12px; left: 12px; right: 12px;
  color: #cfd8e6; font-size: 12.5px; text-align: center; line-height: 1.4;
  background: rgba(0,0,0,.55); padding: 8px 12px; border-radius: 8px;
}

.cam-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
  background: #0b0e13;
}
.cam-btn { background: #1e2530; color: #e8edf4; border: 1px solid #2a323f;
  padding: 12px 18px; border-radius: 10px; font-size: 14px; font-weight: 700; }
.cam-btn.primary { background: var(--copper); color: #fff; border-color: var(--copper); flex: 1; }
.cam-btn.ghost { background: transparent; color: #8e9bb0; }
.cam-shutter {
  width: 66px; height: 66px; border-radius: 50%; background: #fff;
  border: 4px solid #8e9bb0; padding: 0; flex: none;
}
.cam-shutter:active { background: var(--copper-lt); }

/* ====================== 🏷️ ТАБЕЛКА ====================== */

.plate-status {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.45;
  border: 1px solid;
}
.plate-status .ic { font-size: 17px; flex: none; }
.plate-status.ok   { background: rgba(46,160,67,.10);  border-color: rgba(46,160,67,.35);  color: #b9e8c4; }
.plate-status.wait { background: rgba(61,139,253,.10); border-color: rgba(61,139,253,.35); color: #b8d3ff; }
.plate-status.busy { background: rgba(200,113,55,.12); border-color: rgba(200,113,55,.4);  color: #f0c09a; }
.plate-status.err  { background: rgba(218,54,51,.10);  border-color: rgba(218,54,51,.35);  color: #ffb3b1; }

/* Поле в прегледа на табелката */
.pf { margin-bottom: 13px; }
.pf-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.pf-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.pf-conf { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pf-conf.hi  { color: #7ee08e; }
.pf-conf.mid { color: #f0c451; }
.pf-conf.lo  { color: #ff8a87; }
.pf-why { font-size: 11px; color: var(--muted); margin-top: 4px; font-style: italic; }
.pf-bar { height: 3px; background: var(--bg3); border-radius: 2px; overflow: hidden; margin-top: 5px; }
.pf-bar i { display: block; height: 100%; }
.pf-bar i.hi  { background: var(--green); }
.pf-bar i.mid { background: var(--amber); }
.pf-bar i.lo  { background: var(--red); }

/* ====================== 🎯 ЛОВ НА СДЕЛКИ ====================== */

.hunt {
  background: var(--bg2); border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius); padding: 13px; margin-bottom: 10px;
}
.hunt.buy    { border-left-color: var(--green); }
.hunt.haggle { border-left-color: var(--amber); }
.hunt.no     { border-left-color: var(--red);  opacity: .72; }
.hunt.info   { border-left-color: var(--blue); }

.hunt-bell {
  font-size: 11.5px; font-weight: 700; color: #f0c451;
  background: rgba(210,153,34,.13); border: 1px solid rgba(210,153,34,.35);
  border-radius: 6px; padding: 4px 9px; margin-bottom: 9px; display: inline-block;
}

.hunt-top { display: flex; gap: 12px; align-items: flex-start; }
.hunt-title { font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.hunt-title small { color: var(--muted); font-weight: 500; }
.hunt-facts { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.4; }

.hunt-profit {
  text-align: right; flex: none; font-size: 19px; font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.hunt-profit.pos { color: #7ee08e; }
.hunt-profit.neg { color: #ff8a87; }
.hunt-profit .stars {
  display: block; font-size: 11px; color: var(--amber); letter-spacing: 1px; margin-top: 2px;
}

.hunt-mid {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin: 10px 0 8px; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: 13px;
}
.hunt-price { font-weight: 700; }
.hunt-max   { color: var(--muted); }
.hunt-cu    { color: var(--copper-lt); font-weight: 600; margin-left: auto; }

.hunt-verdict { font-size: 14px; font-weight: 800; letter-spacing: .2px; }
.hunt-verdict.buy    { color: #7ee08e; }
.hunt-verdict.haggle { color: #f0c451; }
.hunt-verdict.no     { color: #ff8a87; }
.hunt-verdict.info   { color: #8ab7ff; }

.hunt-assume {
  font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.4;
  font-style: italic;
}

/* Чипове за поправка на място. Минимум 34px височина — под това пръстът
   бърка съседния чип, а грешен чип тук значи грешна оценка. */
.hunt-chips {
  display: flex; align-items: center; gap: 5px;
  flex-wrap: wrap; margin-top: 8px;
}
.chip-lbl {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .4px; margin-right: 2px;
}
.chip-unit { font-size: 11.5px; color: var(--muted); }
.chip {
  min-height: 34px; padding: 6px 12px;
  background: var(--bg3); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.chip:hover { border-color: var(--copper); }
.chip.on {
  background: var(--copper); border-color: var(--copper);
  color: #fff;
}

/* Предложения за търсене. Редове, а не чипове: до всяко стои колко
   струва килограм, а това не се побира в чип на телефон. */
/* Изборът „какво търся" — карти с размер на палец, не етикети */
.pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pick {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 6px; min-height: 74px;
  background: var(--bg3); border: 1px solid var(--line); border-radius: 11px;
  color: var(--text); font-family: inherit;
  font-size: 11.5px; font-weight: 700; line-height: 1.2; text-align: center;
}
.pick-ic { font-size: 21px; line-height: 1; }
.pick:hover { border-color: var(--copper); }
.pick.on { border-color: var(--copper); background: rgba(200,113,55,.15); }
@media (max-width: 400px) { .pick { font-size: 10.5px; padding: 10px 4px; } }

.sugg-list { display: flex; flex-direction: column; gap: 6px; }
.sugg {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; width: 100%; text-align: left;
  padding: 9px 12px; min-height: 42px;
  background: var(--bg3); border: 1px solid var(--line);
  border-radius: 10px; color: var(--text);
  font-size: 14px; font-weight: 600; font-family: inherit;
}
.sugg:hover { border-color: var(--copper); }
.sugg.on { border-color: var(--copper); background: rgba(200,113,55,.14); }
.sugg-q { min-width: 0; }
.sugg-v {
  flex: none; display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  color: var(--copper-lt); white-space: nowrap;
}
.sugg.on .sugg-v { color: var(--copper-lt); }

/* Заглавие на колоните. „1.64 €/кг" без него не казва дали е цена,
   която давам, или която взимам. */
.sugg-head {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 0 12px 2px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .3px; text-transform: uppercase; color: var(--muted);
}
.sugg-sep {
  padding: 8px 12px 2px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .3px; text-transform: uppercase; color: var(--muted);
}

/* Наличността: три точки, пълни колкото е степента. Празните остават
   на мястото си — три пълни срещу една пълна се сравняват с поглед,
   а „●" срещу „●●●" без празнини иска четене. */
.dots { flex: none; display: inline-flex; gap: 3px; }
.dots i {
  width: 7px; height: 7px; border-radius: 50%;
  /* Плътна бледа точка, не пръстен. На 7 px 1 px кант в --line (#2a323f
     върху фон #1e2530) е невидим и празните места изчезват — а те са
     половината от смисъла: три пълни срещу една пълна се сравняват
     само ако и трите места се виждат. */
  background: rgba(142,155,176,.34);
}
.dots i.on { background: var(--copper); }

/* ---- Таблото „Днешният лов" ----------------------------------------
   Причината да отваряш екрана всеки ден. Стои най-горе и е единственото
   тук с право на едри числа. */

.card.today-head { padding-bottom: 12px; }
.th-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.th-title { font-size: 14px; font-weight: 900; letter-spacing: 1.2px; }
.th-when { margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.th-nums { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px;
  font-size: 13px; font-weight: 700; }
.tn.fire { color: var(--copper-lt); }
.tn.good { color: #7ee08e; }
.tn.eye  { color: var(--muted); font-weight: 600; }
.th-pot  { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.th-fail { margin-top: 8px; font-size: 12px; color: #e0b45a; }

/* Изпитният режим се ОБЯВЯВА. Приложение, което показва измислени обяви
   като истински, губи доверие веднъж и завинаги. */
.test-badge {
  margin: -2px 0 10px; padding: 6px 10px; border-radius: 8px;
  background: rgba(224,180,90,.13); border: 1px solid rgba(224,180,90,.4);
  color: #e0b45a; font-size: 11.5px; font-weight: 700;
}

.hunt-empty { text-align: center; padding: 26px 18px; }
.he-ic { font-size: 34px; line-height: 1; }
.he-title { margin-top: 8px; font-size: 15px; font-weight: 800; }
.he-sub { margin-top: 6px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.today-honest {
  margin: -4px 0 14px; padding: 10px 12px;
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
  border-left: 2px solid var(--line);
}

/* ---- Картата на сделката ---- */
.card.deal-card { border-left: 3px solid var(--line); }
.card.deal-card.fire { border-left-color: var(--copper); }
.card.deal-card.good { border-left-color: #7ee08e; }

.dc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dc-rank { font-size: 14px; font-weight: 900; letter-spacing: .5px; }
.dc-profit { text-align: right; font-size: 22px; font-weight: 900; color: #7ee08e; line-height: 1.1; }
.dc-roi { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); margin-top: 2px; }

.dc-title { margin-top: 8px; font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.dc-where { margin-top: 3px; font-size: 12px; color: var(--muted); }

/* Разбивката стои ОТВОРЕНА: при сделка от двеста евро транспортът и
   трудът са половината от решението, а не подробност. */
.dc-costs {
  margin-top: 10px; padding: 10px 12px;
  background: var(--bg3); border-radius: 10px; font-size: 13px;
}
.cost-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; color: var(--muted); }
.cost-row.strong { color: var(--text); font-weight: 800; }
.cost-row.strong:first-of-type { margin-top: 4px; padding-top: 7px; border-top: 1px solid var(--line); }

.dc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px;
  font-size: 11.5px; color: var(--muted); }
.dc-risks { margin-top: 8px; font-size: 12px; color: #e0b45a; line-height: 1.5; }
.dc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dc-reasons { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.55; }

/* История на ловите — три колони, за да се четат вертикално */
.hh-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
  align-items: baseline; padding: 7px 2px;
  border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.hh-row:last-child { border-bottom: none; }
.hh-when { color: var(--muted); font-variant-numeric: tabular-nums; }
.hh-nums { color: var(--text); }
.hh-pot  { font-weight: 700; color: var(--copper-lt); font-variant-numeric: tabular-nums; }

.neg-list { margin-top: 4px; }
.neg-title { margin: 0 4px 8px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .3px; text-transform: uppercase; color: var(--muted); }

/* ---- Входът на „Лов" -----------------------------------------------
   Кутията за текст не е продуктът. Свита, тя е ивица за лепене; целият
   екран приема Ctrl+V, така че скриването не струва нито едно
   допълнително натискане — а това беше единственото възражение срещу
   скриването ѝ.

   `has-text` се слага от app.js, щом има какво да се сканира. */

.hero { text-align: center; padding: 4px 0 14px; }
.hero-title {
  font-size: 26px; font-weight: 900; letter-spacing: 1.5px;
  line-height: 1.1;
}
.hero-sub { margin-top: 5px; font-size: 12.5px; color: var(--muted); }

.paste-zone {
  width: 100%; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 20px 14px;
  background: var(--bg3); color: var(--text); font-family: inherit;
  border: 1.5px dashed var(--line); border-radius: 12px;
  transition: border-color .2s, background .2s;
}
.paste-zone:hover { border-color: var(--copper); background: rgba(200,113,55,.07); }
.pz-ic   { font-size: 22px; line-height: 1; }
.pz-main { font-size: 15px; font-weight: 700; }
.pz-sub  { font-size: 11.5px; color: var(--muted); }
.pz-sub kbd {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 5px; font-family: inherit; font-size: 11px;
}

/* Кутията и голямото копче живеят само когато има текст */
.hunt-input #huntText,
.hunt-input .scan-big,
.hunt-input #huntSecondary { display: none; }

.hunt-input.has-text .paste-zone { display: none; }
.hunt-input.has-text #huntText { display: block; min-height: 110px; }
.hunt-input.has-text .scan-big,
.hunt-input.has-text #huntSecondary { display: flex; }

/* НАЙ-ГОЛЕМИЯТ БУТОН В ПРИЛОЖЕНИЕТО. Той е причината този екран да
   съществува и трябва да се вижда като такъв, а не да е трети поред. */
.scan-big {
  width: 100%; margin-top: 12px;
  align-items: center; justify-content: center;
  min-height: 56px; font-size: 17px; font-weight: 800; letter-spacing: .5px;
}
#huntSecondary { margin-top: 8px; justify-content: center; }

/* Целият екран свети, докато влачиш файл или лепиш */
.hunt-input.armed { border-color: var(--copper); }

/* ---- Присъдата е най-голямото нещо на картата ----------------------
   Дотук се четеше марката, после числата, и чак после „КУПУВАЙ" — в
   реда, в който смята моделът, не в реда, в който пита човекът. */
.verdict-big {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px 14px;
}
.vb-dot { flex: none; font-size: 26px; line-height: 1; }
.vb-text { flex: 1; min-width: 0; }
.vb-word {
  font-size: 19px; font-weight: 900; letter-spacing: .4px;
  text-transform: uppercase; line-height: 1.15;
}
.vb-sub { margin-top: 2px; font-size: 12px; color: var(--muted); }
.vb-profit {
  flex: none; text-align: right;
  font-size: 22px; font-weight: 900; line-height: 1.1;
}
.vb-profit .stars { display: block; font-size: 11px; margin-top: 2px; }
.verdict-big.buy    .vb-word { color: #7ee08e; }
.verdict-big.haggle .vb-word { color: #e0b45a; }
.verdict-big.no     .vb-word { color: #e07a6a; }

/* ---- Двете нива --------------------------------------------------
   `.exp` е машинното отделение. Скрито е по подразбиране и се пуска с
   един клас на <body>, за да е моментално и без преизчисляване. */
.exp { display: none; }
body.expert .exp { display: block; }
body.expert .btn-row.exp { display: flex; }

.expert-bar { display: flex; justify-content: center; margin: 4px 0 14px; }
#btnExpert {
  background: none; border: none; font-family: inherit;
  color: var(--muted); font-size: 12.5px; font-weight: 700;
  letter-spacing: .3px; padding: 8px 14px; border-radius: 8px;
}
#btnExpert:hover { color: var(--copper-lt); background: var(--bg2); }
body.expert #btnExpert { color: var(--copper-lt); }

/* ---- Памет за обявите ----------------------------------------------
   Историята е ТИХА, новината е силна. Редът „видях я преди 11 дни" е
   контекст и стои бледо; „вече си струва" е причината да отвориш
   телефона и има право на цвят. */
.hunt-hist {
  margin-top: 8px; font-size: 12px; color: var(--muted);
  line-height: 1.4;
}
.hunt-news {
  margin-top: 8px; padding: 8px 10px; border-radius: 9px;
  font-size: 13px; font-weight: 600; line-height: 1.4;
  border: 1px solid var(--line); background: var(--bg3);
}
.hunt-news.hot {
  border-color: rgba(200,113,55,.55); background: rgba(200,113,55,.14);
  color: var(--copper-lt);
}
.hunt-news.good { border-color: rgba(126,224,142,.4); color: #7ee08e; }
.hunt-news.warn { border-color: rgba(224,180,90,.4);  color: #e0b45a; }
.hunt-news.info { color: var(--muted); }

/* Решението: докато го няма — избор; щом го има — тих ред с връщане.
   Записано решение не бива да прилича на бутон, който чака натискане. */
/* Дребни нарочно: дневникът е важен, но не е присъдата. Три избора на
   един ред вместо два реда едри копчета. */
.hunt-chips.decide { margin-top: 10px; gap: 5px; }
.hunt-chips.decide .chip { padding: 6px 9px; font-size: 12px; min-height: 32px; }
.hunt-decided {
  margin-top: 10px; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.link-btn {
  background: none; border: none; padding: 0;
  color: var(--muted); font-size: 12px; font-weight: 600;
  text-decoration: underline; font-family: inherit;
}

/* Най-добрата жива сделка — единствената карта с медна рамка отгоре.
   Ако всичко свети, нищо не свети. */
.card.best-deal {
  border-color: rgba(200,113,55,.5);
  background: linear-gradient(180deg, rgba(200,113,55,.10), transparent 60%), var(--bg2);
}
.best-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--copper-lt); margin-bottom: 6px;
}
.best-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.best-name { font-size: 16px; font-weight: 800; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.best-profit { flex: none; font-size: 18px; font-weight: 800; color: #7ee08e; }
.best-sub { margin-top: 3px; font-size: 12px; color: var(--muted); }

.journal {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
}

/* ---- Какво показва снимката от обявата ---------------------------
   Отделена визуално от картите с резултати: това не е оценка, а
   ПРЕДЛОЖЕНИЕ да се смени оценката. Изглеждат ли еднакво, човек
   решава, че вече е приложено. */
.card.insight { border-color: rgba(200,113,55,.42); }
.card.insight.busy, .card.insight.muted-note {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; line-height: 1.45;
}
.card.insight .ic { flex: none; font-size: 18px; line-height: 1.2; }
.card.insight.muted-note { border-color: var(--line); color: var(--muted); }

.insight-list { list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; }
.insight-list li {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; background: var(--bg3);
  border: 1px solid var(--line); border-radius: 9px; font-size: 13.5px;
}
.in-label { flex: none; font-weight: 700; min-width: 76px; }
.in-val   { flex: 1; min-width: 0; color: var(--copper-lt); font-weight: 600; }

/* Произходът е ЦВЕТОВО различен, не само текстово. „Прочетено от
   табелката" и „познато по ребрата отвън" не бива да изглеждат
   еднакво — цялата разлика в доверието е там. */
.in-src {
  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; padding: 2px 7px; border-radius: 20px;
}
.in-src.plate   { background: rgba(126,224,142,.16); color: #7ee08e; }
.in-src.machine { background: rgba(142,155,176,.16); color: var(--muted); }
.in-conf { flex: none; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- Сгъваема карта -------------------------------------------------
   Същият механизъм като стъпките в „Оценка" (0fr → 1fr), но без
   номерче и без правилото „отворена е точно една". Тук е за вторичен
   инструмент, който не бива да бута резултатите от Smart Scan надолу. */
.card.fold { padding: 0; overflow: hidden; }
.fold-head {
  width: 100%; background: none; border: none; padding: 13px 14px;
  display: flex; align-items: center; gap: 10px; text-align: left;
  color: var(--text); font-family: inherit;
}
.fold-title {
  flex: none; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
}
.fold-sum {
  flex: 1; min-width: 0; text-align: right;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card.fold.open .fold-sum { opacity: 0; }
.fold-chev {
  flex: none; color: var(--muted); font-size: 13px;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.card.fold.open .fold-chev { transform: rotate(180deg); }
.fold-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .34s cubic-bezier(.2,.8,.2,1);
}
.card.fold.open .fold-body { grid-template-rows: 1fr; }
/* ОТСТЪПЪТ Е НА ДЕТЕТО, не на свиващия се елемент. При 0fr пътечката
   отива на нула, но padding-ът на самия grid item не се свива с нея и
   оставя 14 px, през които се вижда първият ред. Затова .fold-inner е
   гол — той само реже, а .fold-pad носи разстоянията. */
.fold-inner { overflow: hidden; min-height: 0; }
.fold-pad { padding: 0 14px 14px; }
.fold-pad > *:first-child { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .fold-body, .fold-chev { transition: none; }
}

/* Линк към обявата и телефон. Височината е като на чиповете — редът
   под картата е един и същ жест с палец, независимо какво натискаш. */
.hunt-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hunt-link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 7px 12px;
  background: var(--bg3); border: 1px solid var(--line);
  border-radius: 8px; color: var(--text);
  font-size: 13px; font-weight: 600; text-decoration: none;
}
.hunt-link:hover { border-color: var(--copper); }
.hunt-link .src {
  font-size: 11px; color: var(--muted); font-weight: 500;
  border-left: 1px solid var(--line); padding-left: 6px;
}
.hunt-link.off { color: var(--muted); font-weight: 500; cursor: default; }

/* Миниатюрите се превъртат настрани, за да не изядат картата на телефон.
   Счупена снимка не бива да чупи и подредбата — оттам фиксираният размер. */
.hunt-thumbs {
  display: flex; gap: 6px; margin-top: 8px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.hunt-thumbs img {
  width: 74px; height: 74px; flex: none;
  object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg3);
}

/* ====================== ПОДРАЗДЕЛИ (Знание / Библиотека) ====================== */

.subtabs {
  display: flex; gap: 6px; background: var(--bg2); padding: 5px;
  border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px;
}
.subtabs button {
  flex: 1; background: transparent; color: var(--muted);
  padding: 10px 8px; font-size: 14px; border-radius: 8px; font-weight: 700;
}
.subtabs button.active { background: var(--bg3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.sub { display: none; }
.sub.active { display: block; }

/* ====================== БИБЛИОТЕКА ====================== */

.mdl {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px; margin-bottom: 9px; cursor: pointer;
  transition: border-color .15s;
}
.mdl:hover { border-color: var(--copper); }
.mdl .top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mdl .nm { font-weight: 700; font-size: 15px; }
.mdl .nm small { color: var(--muted); font-weight: 500; }
.mdl .meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.mdl .srcs { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }

.src-chip {
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 20px;
  background: var(--bg3); border: 1px solid var(--line); color: var(--muted);
  white-space: nowrap;
}
.src-chip.own  { color: #7ee08e; border-color: rgba(46,160,67,.4);  background: rgba(46,160,67,.1); }
.src-chip.high { color: #8ab7ff; border-color: rgba(61,139,253,.35); background: rgba(61,139,253,.09); }

/* Провенанс — откъде идва конкретното число */
.prov {
  display: inline-block; font-size: 10px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; margin-left: 6px;
  vertical-align: middle; font-weight: 600;
}
.prov.auth { color: #7ee08e; border-color: rgba(46,160,67,.35); }
.prov.weak { color: #f0c451; border-color: rgba(210,153,34,.35); }

/* Кутия със спецификация под полето „Модел“ */
.spec-box {
  background: rgba(61,139,253,.08); border: 1px solid rgba(61,139,253,.3);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px;
}
.spec-box .hd { font-weight: 700; color: #8ab7ff; margin-bottom: 5px; font-size: 12px; }
.spec-box .vals { display: flex; gap: 12px; flex-wrap: wrap; color: var(--text); }
.spec-box .vals b { color: var(--copper-lt); }
.spec-box button {
  margin-top: 8px; background: rgba(61,139,253,.2); color: #a9c9ff;
  border: 1px solid rgba(61,139,253,.4); padding: 7px 12px; font-size: 12.5px; border-radius: 8px;
}

/* ====================== ВНАСЯНЕ НА ДАННИ ====================== */

.imp-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 12px 0; }
.imp-summary .box {
  background: var(--bg3); border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 6px; text-align: center;
}
.imp-summary .box .n { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.imp-summary .box .l { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.imp-summary .box.ok  .n { color: #7ee08e; }
.imp-summary .box.bad .n { color: #ff8a87; }
.imp-summary .box.dup .n { color: #f0c451; }

.map-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  background: var(--bg2); border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.map-row:last-child { border-bottom: none; }
.map-row .col { flex: 1; color: var(--muted); font-family: ui-monospace, monospace; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-row .arrow { color: var(--copper-lt); flex: none; }
.map-row select { flex: 1.2; padding: 6px 8px; font-size: 12.5px; border-radius: 7px; }

.imp-row {
  font-size: 12px; padding: 8px 10px; border-radius: 8px; margin-bottom: 5px;
  border: 1px solid var(--line); background: var(--bg2);
}
.imp-row.bad  { border-color: rgba(218,54,51,.4);  background: rgba(218,54,51,.07); }
.imp-row.dup  { border-color: rgba(210,153,34,.35); background: rgba(210,153,34,.06); }
.imp-row.note { border-color: rgba(210,153,34,.25); }
.imp-row .ln { color: var(--muted); font-weight: 700; margin-right: 6px; }
.imp-row .msg { color: #ffb3b1; display: block; margin-top: 3px; }
.imp-row .msg.warn { color: #f2d38a; }

/* Статистики */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 12px; }
.stat { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 8px; text-align: center; }
.stat .n { font-size: 21px; font-weight: 800; color: var(--copper-lt); font-variant-numeric: tabular-nums; }
.stat .l { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.25; }

/* ============================ МОДАЛ ============================ */

.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.72); backdrop-filter: blur(3px);
  display: none; align-items: flex-end; justify-content: center;
}
.modal.open { display: flex; }
.modal-inner {
  background: var(--bg); width: 100%; max-width: 720px;
  max-height: 92vh; overflow-y: auto;
  border-radius: 16px 16px 0 0; border-top: 1px solid var(--line);
  padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
  animation: slideUp .22s ease;
}
@keyframes slideUp { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-head h3 { margin: 0; font-size: 17px; }
.modal-head button { background: none; color: var(--muted); font-size: 26px; padding: 0 6px; line-height: 1; }

/* ============================ НАВИГАЦИЯ ============================ */

nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: #131820; border-top: 1px solid var(--line);
  display: flex; padding-bottom: env(safe-area-inset-bottom);
}
nav button {
  flex: 1; background: none; border: none; color: var(--muted);
  padding: 9px 4px 11px; font-size: 10.5px; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
nav button .ico { font-size: 20px; line-height: 1; }
nav button.active { color: var(--copper-lt); }

/* С шест раздела „Настройки" не се побира на телефон при 10.5px.
 * Свиваме само етикета — иконите остават четими. */
@media (max-width: 400px) {
  nav button {
    font-size: 9.5px; padding: 9px 2px 11px; letter-spacing: -.2px;
    white-space: nowrap;
  }
}

/* ============================ ТАБЛИЦА ============================ */

.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 380px; }
th, td { padding: 9px 11px; text-align: left; border-bottom: 1px solid var(--line); }
th { background: var(--bg3); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; position: sticky; top: 0; }
td { background: var(--bg2); }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ============================ РАЗНИ ============================ */

/* ═══════════ 📸 РЕФЕРЕНТНА ГАЛЕРИЯ ═══════════ */

.ref-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ref-card {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; cursor: pointer;
}
.ref-card:hover { border-color: var(--copper); }

/* Резервното квадратче стои ПОД снимката. Ако тя не се зареди
 * (офлайн, изхвърлена от кеша), скрива се и отдолу остава иконата на
 * кадъра — вместо счупена картинка, която изглежда като счупен софтуер. */
.ref-thumb {
  position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
}
.ref-thumb::before {
  content: attr(data-fallback); font-size: 26px; opacity: .35;
}
.ref-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block; background: var(--bg3);
}
.ref-meta { padding: 8px 10px 10px; }
.ref-title { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.ref-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* Лентата под избора на подтип на екрана „Оценка" */
.ref-strip-head { font-size: 12px; color: var(--muted); font-weight: 700; margin: 2px 0 6px; }
.ref-strip { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; }
.ref-strip img {
  width: 84px; height: 64px; object-fit: cover; border-radius: 9px;
  border: 1px solid var(--line); flex: none; cursor: pointer; background: var(--bg3);
}
.ref-strip img:hover { border-color: var(--copper); }

/* ═══════════ 📷 ПРОТОКОЛ ЗА СНИМКИТЕ ═══════════ */

.shot-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.shot {
  border: 2px dashed var(--line); border-radius: 9px; background: var(--bg3);
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; cursor: pointer; overflow: hidden; position: relative;
  padding: 3px;
}
.shot.got { border-style: solid; border-color: var(--green); }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot-ico { font-size: 18px; line-height: 1; }
.shot-nm {
  font-size: 8.5px; color: var(--muted); text-align: center; line-height: 1.15;
  position: relative; z-index: 1;
}
.shot.got .shot-nm {
  background: rgba(13,17,23,.78); color: #cfe6d6; width: 100%;
  position: absolute; bottom: 0; left: 0; padding: 2px 1px;
}
.shot-nm b { color: var(--copper-lt); }

.photos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.photos img { width: 74px; height: 74px; object-fit: cover; border-radius: 9px; border: 1px solid var(--line); }
.photo-add {
  width: 74px; height: 74px; border-radius: 9px; border: 2px dashed var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  color: var(--muted); cursor: pointer; background: var(--bg3);
}

details { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 9px; }
details summary { padding: 12px 14px; cursor: pointer; font-weight: 700; font-size: 14px; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: '▸ '; color: var(--copper-lt); }
details[open] summary::before { content: '▾ '; }
details .body { padding: 0 14px 14px; font-size: 13.5px; line-height: 1.6; color: #c3cddc; }
details .body p { margin: 0 0 10px; }
details .body ul { margin: 0 0 10px; padding-left: 20px; }
details .body li { margin-bottom: 5px; }
details .body strong { color: var(--text); }

.toast {
  position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%);
  background: var(--bg3); border: 1px solid var(--copper); color: var(--text);
  padding: 12px 20px; border-radius: 24px; font-size: 14px; font-weight: 600;
  z-index: 200; opacity: 0; pointer-events: none; transition: opacity .22s;
  max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; }

.sep { height: 1px; background: var(--line); margin: 14px 0; }
.muted { color: var(--muted); font-size: 13px; }
.center { text-align: center; }

/* ============ РИСУНКА НА ИЗБРАНАТА МАШИНА ============
 * Вградени SVG силуети, не снимки: работят офлайн, тежат байтове
 * и не носят въпроси с правата. Категория без рисунка показва
 * иконата си уголемена — app.js се справя сам. */

.art-wrap { position: relative; overflow: hidden; }
.machine-art {
  position: absolute; top: 8px; right: 6px; z-index: 0;
  width: 132px; height: 88px; pointer-events: none; user-select: none;
  background: no-repeat center / contain;
  opacity: .09;
  display: flex; align-items: center; justify-content: center;
  font-size: 54px; line-height: 1; color: var(--copper);
}
.art-wrap > *:not(.machine-art) { position: relative; z-index: 1; }

/* Влизане при смяна на категорията */
.machine-art.in { animation: artIn .5s cubic-bezier(.2,.8,.25,1) both; }
@keyframes artIn {
  from { opacity: 0; transform: translateX(26px) scale(.88); }
  to   { opacity: .09; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .machine-art.in { animation: none; opacity: .09; }
}
/* На тесен екран рисунката се смалява, за да не влиза в заглавието */
@media (max-width: 400px) { .machine-art { width: 104px; height: 70px; font-size: 42px; } }

/* Вариантът в празната клетка на мрежата — има място, значи се вижда */
.machine-art.slot {
  position: static; width: auto; height: auto; min-height: 92px;
  opacity: .34; font-size: 44px;
  border: 2px dashed transparent; border-radius: var(--radius);
}
.machine-art.slot.in { animation: artSlotIn .5s cubic-bezier(.2,.8,.25,1) both; }
@keyframes artSlotIn {
  from { opacity: 0; transform: scale(.8) rotate(-6deg); }
  to   { opacity: .34; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .machine-art.slot.in { animation: none; opacity: .34; }
}

.machine-art[data-cat='motor'] { color: transparent; background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2080'><g%20fill='none'%20stroke='%23c87137'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'>%20<rect%20x='24'%20y='20'%20width='58'%20height='38'%20rx='7'/>%20<path%20d='M33%2020v38M42%2020v38M51%2020v38M60%2020v38M69%2020v38'/>%20<rect%20x='42'%20y='11'%20width='20'%20height='9'%20rx='2'/>%20<path%20d='M46%2011v-4M58%2011v-4'/>%20<path%20d='M16%2028h8v22h-8z'/>%20<circle%20cx='90'%20cy='39'%20r='7'/><path%20d='M97%2039h11'/>%20<path%20d='M30%2058v7h11M65%2058v7h11'/>%20</g></svg>"); }
.machine-art[data-cat='generator'] { color: transparent; background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2080'><g%20fill='none'%20stroke='%23c87137'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'>%20<rect%20x='36'%20y='20'%20width='56'%20height='40'%20rx='19'/>%20<path%20d='M48%2027v26M58%2027v26M70%2027v26M80%2027v26'/>%20<circle%20cx='22'%20cy='40'%20r='12'/><circle%20cx='22'%20cy='40'%20r='4.5'/>%20<path%20d='M34%2040h2'/>%20<path%20d='M92%2034h11M92%2046h11'/>%20<path%20d='M46%2060v6M82%2060v6'/>%20</g></svg>"); }
.machine-art[data-cat='transformer'] { color: transparent; background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2080'><g%20fill='none'%20stroke='%23c87137'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'>%20<rect%20x='30'%20y='24'%20width='58'%20height='40'%20rx='3'/>%20<path%20d='M22%2030v28M26%2030v28M92%2030v28M96%2030v28'/>%20<circle%20cx='46'%20cy='13'%20r='5'/><path%20d='M46%2018v6M41%2024h10'/>%20<circle%20cx='72'%20cy='13'%20r='5'/><path%20d='M72%2018v6M67%2024h10'/>%20<path%20d='M44%2034v20M60%2034v20M76%2034v20'/>%20<path%20d='M38%2064v6h42v-6'/>%20</g></svg>"); }
.machine-art[data-cat='cable'] { color: transparent; background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2080'><g%20fill='none'%20stroke='%23c87137'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'>%20<circle%20cx='56'%20cy='40'%20r='27'/><circle%20cx='56'%20cy='40'%20r='13'/>%20<path%20d='M56%2013V6M83%2040h8M56%2067v7M29%2040h-8'/>%20<path%20d='M83%2040c9%200%2012-9%2020-9'/>%20<circle%20cx='50'%20cy='34'%20r='3'/><circle%20cx='62'%20cy='34'%20r='3'/>%20<circle%20cx='50'%20cy='46'%20r='3'/><circle%20cx='62'%20cy='46'%20r='3'/>%20</g></svg>"); }
.machine-art[data-cat='ac'] { color: transparent; background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2080'><g%20fill='none'%20stroke='%23c87137'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'>%20<rect%20x='22'%20y='16'%20width='78'%20height='48'%20rx='4'/>%20<circle%20cx='63'%20cy='40'%20r='16'/><circle%20cx='63'%20cy='40'%20r='4'/>%20<path%20d='M63%2024c8%204%208%2012%200%2016M79%2040c-4%208-12%208-16%200M63%2056c-8-4-8-12%200-16'/>%20<path%20d='M28%2022v36M34%2022v36'/>%20<path%20d='M30%2064v7M92%2064v7'/>%20</g></svg>"); }
.machine-art[data-cat='appliance'] { color: transparent; background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2080'><g%20fill='none'%20stroke='%23c87137'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'>%20<rect%20x='31'%20y='8'%20width='58'%20height='62'%20rx='4'/>%20<path%20d='M31%2024h58'/>%20<circle%20cx='42'%20cy='16'%20r='3.5'/><path%20d='M53%2016h28'/>%20<circle%20cx='60'%20cy='46'%20r='17'/><circle%20cx='60'%20cy='46'%20r='10'/>%20<path%20d='M38%2070v6M82%2070v6'/>%20</g></svg>"); }

/* ============ КАМЕРА ПО СТЪПКИ ============
 * Заглавието и броячът идват от воденото сканиране. При старите две
 * извиквания ги няма и камерата изглежда точно както преди. */
.cam-step {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 3; font-size: 12px; font-weight: 800; letter-spacing: .5px;
  color: #fff; background: rgba(0,0,0,.55); padding: 5px 12px; border-radius: 20px;
  text-transform: uppercase;
}
.cam-title {
  position: absolute; top: 48px; left: 0; right: 0; z-index: 3;
  text-align: center; font-size: 17px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.8); padding: 0 20px;
}
.cam-btn.on { color: #ffd166; }

/* ==================== ВОДЕНО СКАНИРАНЕ ==================== */
.guided {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: var(--bg); overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom);
}
.guided-top {
  position: sticky; top: 0; z-index: 2; background: #131820;
  border-bottom: 1px solid var(--line); padding: 12px 14px;
}
.guided-x {
  position: absolute; right: 8px; top: 8px; z-index: 3;
  background: none; border: none; color: var(--muted); font-size: 20px; padding: 6px 10px;
}
.guided-body { padding: 14px; max-width: 560px; margin: 0 auto; }

/* Лентата с трите стъпки */
.gprog { display: flex; align-items: center; gap: 4px; padding-right: 34px; }
.gprog-line { flex: 1; height: 2px; background: var(--line); border-radius: 2px; }
.gprog-dot { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 58px; }
.gprog-dot b { font-size: 13px; color: var(--muted); line-height: 1; }
.gprog-dot em { font-style: normal; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.gprog-dot.now b, .gprog-dot.now em { color: var(--copper-lt); font-weight: 800; }
.gprog-dot.done b { color: var(--green); }

.gcard { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.gcard.center { text-align: center; }
.gcard h3 { margin: 0 0 6px; font-size: 19px; font-weight: 800; }
.gcard h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase;
            letter-spacing: .5px; color: var(--muted); }
.gcard .btn-primary { margin-top: 14px; }
.gicon { font-size: 46px; text-align: center; margin-bottom: 6px; }

.gsteps { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gsteps li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; }
.gsteps li span { font-size: 22px; line-height: 1.2; flex: none; }

.gshot { border-radius: 10px; overflow: hidden; margin-bottom: 12px; background: var(--bg3); }
.gshot img { display: block; width: 100%; max-height: 42vh; object-fit: contain; }

.gsection { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.gchecks { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.gcheck {
  display: flex; align-items: baseline; gap: 9px; font-size: 13.5px;
  padding: 8px 10px; border-radius: 9px; background: var(--bg3);
}
.gcheck span { flex: none; width: 14px; font-weight: 900; }
.gcheck b { font-weight: 600; color: var(--text); }
.gcheck em { font-style: normal; margin-left: auto; color: var(--muted); }
.gcheck.ok span { color: #7ee08e; }
.gcheck.bad span { color: #ff8a87; }
.gcheck.warn span { color: #f0c451; }
.gcheck.unknown span, .gcheck.unknown em { color: var(--muted); }

.gfield { margin-bottom: 9px; }
.gfield label { display: flex; align-items: center; gap: 8px; }

.gspin {
  width: 34px; height: 34px; margin: 8px auto 14px;
  border: 3px solid var(--line); border-top-color: var(--copper);
  border-radius: 50%; animation: gspin .8s linear infinite;
}
@keyframes gspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gspin { animation-duration: 2.4s; } }

/* Снимка на обявата в картата от лова */
.hunt-photo {
  width: 92px; height: 92px; object-fit: cover;
  border-radius: 9px; border: 1px solid var(--line);
}
#huntPhotos .photos img { cursor: pointer; }
#huntPhotos .photos img:hover { border-color: var(--red); }

/* ====================== СТАРТОВ ЕКРАН ====================== */

#splash {
  position: fixed; inset: 0; z-index: 500;
  background: radial-gradient(ellipse at 50% 38%, #090f12 0%, #060809 74%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; transition: opacity .45s ease, visibility .45s;
}
#splash.done { opacity: 0; visibility: hidden; }

#splash img {
  width: min(58vw, 300px); height: auto;
  filter: drop-shadow(0 12px 40px rgba(0,0,0,.6));
}

.splash-word {
  font-size: clamp(26px, 8.5vw, 44px); font-weight: 900;
  letter-spacing: .06em; margin-top: 18px; line-height: 1;
}
.splash-word b    { color: var(--copper-lt); font-weight: 900; }
.splash-word span { color: #8fa3a5; font-weight: 700; }

.splash-bar {
  width: min(62vw, 320px); height: 7px; margin-top: 26px;
  background: #1b2024; border-radius: 4px; overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
}
.splash-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #1d9c94, #35d6c8);
  box-shadow: 0 0 12px rgba(53,214,200,.65);
  border-radius: 4px;
  transition: width .28s cubic-bezier(.4,0,.2,1);
}

.splash-pct {
  margin-top: 10px; font-size: 13px; font-weight: 700;
  color: #6f8486; font-variant-numeric: tabular-nums;
}
.splash-tag {
  margin-top: 22px; font-size: clamp(10px, 3vw, 12.5px);
  letter-spacing: .22em; color: #55686a; font-weight: 700;
}

/* Докато стартовият екран стои, тялото не се превърта */
body.loading { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  #splash, .splash-bar i { transition: none; }
}

/* ==================== СТЪПКИ ====================
 * Три сгъваеми стъпки, отворена е една. Разгънати наведнъж правят
 * 1820 px — два и половина екрана на телефон, а бутонът „Изчисли"
 * остава извън погледа.
 *
 * Височината се анимира с grid-template-rows 0fr → 1fr. Това е
 * единственият начин да се анимира „до колкото трябва", без да се мери
 * съдържанието с JavaScript и без max-height, което подскача.
 */

.steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }

.step {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .25s;
}
.step.open { border-color: rgba(200,113,55,.45); }

.step-head {
  width: 100%; background: none; border: none; padding: 13px 14px;
  display: flex; align-items: center; gap: 10px; text-align: left;
  color: var(--text); font-size: 15px; font-weight: 700;
  border-radius: var(--radius);
}
.step-no {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg3); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800;
  transition: background .25s, color .25s;
}
.step.open .step-no { background: var(--copper); color: #fff; }
.step-title { flex: none; text-transform: uppercase; letter-spacing: .4px; font-size: 13px; color: var(--muted); }
.step.open .step-title { color: var(--text); }
.step-sum {
  flex: 1; min-width: 0; text-align: right;
  font-size: 12.5px; font-weight: 600; color: var(--copper-lt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.step.open .step-sum { opacity: 0; }        /* отворената показва самите полета */
.step-chev {
  flex: none; color: var(--muted); font-size: 13px;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.step.open .step-chev { transform: rotate(180deg); }

/* Тялото: 0fr → 1fr дава плавно разгъване без мерене */
.step-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .34s cubic-bezier(.2,.8,.2,1);
}
.step.open .step-body { grid-template-rows: 1fr; }
.step-inner {
  overflow: hidden; min-height: 0;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .24s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.step.open .step-inner {
  opacity: 1; transform: none;
  transition-delay: .06s;                    /* първо се отваря, после се показва */
  padding: 0 14px 14px;
}

@media (prefers-reduced-motion: reduce) {
  .step-body, .step-inner, .step-chev, .step-no { transition-duration: .01ms; }
}

/* Рядко пипаните полета — свити по подразбиране */
.more-fields { margin-top: 4px; }
.more-fields > summary {
  cursor: pointer; list-style: none; user-select: none;
  font-size: 13px; font-weight: 600; color: var(--muted);
  padding: 10px 12px; background: var(--bg3);
  border: 1px solid var(--line); border-radius: 10px;
}
.more-fields > summary::-webkit-details-marker { display: none; }
.more-fields > summary::before { content: '▸ '; }
.more-fields[open] > summary::before { content: '▾ '; }
.more-fields > summary:hover { color: var(--text); }
.more-fields > .body { padding-top: 12px; }

/* ============ ТЕСНИ ЕКРАНИ (външният на Fold, 320 px) ============
 * Външният екран на сгъваем телефон е 320 px CSS ширина — по-тесен
 * от най-малкия обикновен телефон. Решетки с 4 и 5 колони там дават
 * клетки под 50 px: числата се пренасят, а етикетите стават на срички.
 *
 * Вътрешният екран (около 707 px) не иска нищо — `main` вече е с
 * max-width 720 px и го запълва почти точно. */

@media (max-width: 360px) {
  /* 4 колони × 67 px → две по 130 px */
  .imp-summary { grid-template-columns: repeat(2, 1fr); }

  /* 5 квадратчета по 49 px са под границата за пипане с пръст */
  .shot-grid { grid-template-columns: repeat(4, 1fr); gap: 5px; }

  /* Трите точки на водения поток не се събират с етикетите си */
  .gprog { padding-right: 0; }
  .gprog-dot { min-width: 46px; }
  .gprog-dot em { font-size: 9.5px; }

  /* Един бутон на ред е по-добре от два срязани */
  .btn-row > * { min-width: 100%; }

  main { padding: 10px; }
  .card { padding: 12px; }
}

/* Пръстен за отброяване около бутона за снимане */
.cam-shutter-wrap { position: relative; width: 66px; height: 66px; flex: none; }
.cam-shutter-wrap .cam-shutter { position: absolute; inset: 6px; width: auto; height: auto; }
.cam-ring { position: absolute; inset: 0; width: 66px; height: 66px; transform: rotate(-90deg); }
.cam-ring circle { fill: none; stroke-width: 5; }
.cam-ring-bg { stroke: rgba(255,255,255,.14); }
.cam-ring-fg {
  stroke: #35d6c8; stroke-linecap: round;
  transition: stroke-dashoffset .16s linear;
  filter: drop-shadow(0 0 5px rgba(53,214,200,.7));
}

/* Познавам / Не познавам — първият въпрос на втора стъпка */
.know-switch {
  display: flex; gap: 6px; background: var(--bg3); padding: 5px;
  border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px;
}
.know-switch button {
  flex: 1; background: transparent; color: var(--muted);
  padding: 11px 8px; font-size: 14px; border-radius: 8px; font-weight: 700;
}
.know-switch button.active {
  background: var(--copper); color: #fff;
  box-shadow: 0 2px 8px rgba(200,113,55,.3);
}

/* Сценариите са същината на екрана — затова имат рамка, а не се
   сливат с останалите карти. */
.card.scenarios {
  border: 2px solid var(--copper);
  box-shadow: 0 0 0 4px rgba(200,113,55,.08);
}
.card.scenarios h2 { color: var(--copper-lt); }

/* Оценка на сделката */
.card.deal { border: 1px solid var(--line); }
.deal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.deal-band { font-size: 16px; font-weight: 800; }
.deal-num {
  font-size: 30px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.deal-num span { font-size: 13px; font-weight: 600; color: var(--muted); }
.deal-num.hot  { color: #ff7a3d; }
.deal-num.good { color: #7ee08e; }
.deal-num.talk { color: #f0c451; }
.deal-num.no   { color: #ff8a87; }
.deal-bar { height: 8px; background: var(--bg3); border-radius: 4px; overflow: hidden; margin-top: 12px; }
.deal-bar i { display: block; height: 100%; border-radius: 4px; transition: width .3s ease; }
.deal-bar i.hot  { background: linear-gradient(90deg, #d2531f, #ff7a3d); }
.deal-bar i.good { background: var(--green); }
.deal-bar i.talk { background: var(--amber); }
.deal-bar i.no   { background: var(--red); }
ul.why { margin: 4px 0 10px; padding-left: 20px; }
ul.why li { margin-bottom: 4px; }