/* ============================================================
   ЛАБОРАТОРИЯ · ЭТАП 2 — стили экрана «СВЕРКА ОТПЕЧАТКОВ».
   Все селекторы с префиксом .lmxFp / #lmxFp / .lmxFpRep —
   на чужую вёрстку не влияют. Откат: удалить <link> из index.php.

   Классы .lmxRep__* (общая рамка отчёта) объявлены в lab_dna.css —
   этот файл подключать ПОСЛЕ него.
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   МИНИ-ИГРА
   ══════════════════════════════════════════════════════════════ */
#lmxFp{
  position:fixed; inset:0; z-index:100080;
  display:flex; align-items:center; justify-content:center;
  padding:18px; box-sizing:border-box;
  background:rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  font-family:var(--sans, system-ui, sans-serif);
  color:#f0e8d2;
}
.lmxFp__box{
  width:100%; max-width:1060px; max-height:94vh;
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid rgba(242,196,0,.38); border-radius:16px;
  background-image:
    var(--noir-grain, none),
    linear-gradient(180deg,#15130f 0%,#0c0b0a 100%);
  box-shadow:0 26px 70px rgba(0,0,0,.75);
}

/* ---------- шапка ---------- */
.lmxFp__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:15px 18px; border-bottom:1px solid rgba(242,196,0,.2);
  background:rgba(242,196,0,.05);
}
.lmxFp__kicker{ font-size:9.5px; font-weight:800; letter-spacing:.16em; color:rgba(242,196,0,.65); }
.lmxFp__title{
  margin-top:4px; font-family:var(--noir-display, inherit);
  font-size:24px; font-weight:700; letter-spacing:.08em; color:#f5f1e6; line-height:1;
}
.lmxFp__sub{ margin-top:6px; font-size:12px; color:rgba(240,232,210,.5); }
.lmxFp__close{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(240,232,210,.16); background:rgba(255,255,255,.06);
  color:rgba(240,232,210,.65); font-size:15px;
}

/* ---------- шаги ---------- */
.lmxFp__phases{
  display:flex; gap:8px; padding:11px 18px; flex-wrap:wrap;
  border-bottom:1px solid rgba(240,232,210,.08);
}
.lmxFp__phases span{
  padding:5px 11px; border-radius:6px;
  border:1px solid rgba(240,232,210,.14); background:rgba(0,0,0,.3);
  font-family:var(--noir-display, inherit);
  font-weight:700; font-size:10px; letter-spacing:.1em; color:rgba(240,232,210,.4);
}
.lmxFp__phases span.is-done{ border-color:rgba(120,220,150,.35); color:#7deba0; }
.lmxFp__phases span.is-on{
  border-color:rgba(242,196,0,.65); color:var(--yellow,#f2c400); background:rgba(242,196,0,.1);
}

/* ---------- тело ---------- */
.lmxFp__body{
  flex:1 1 auto; min-height:0; display:flex; gap:0;
}
.lmxFp__stage{
  flex:1 1 auto; min-width:0; overflow-y:auto;
  padding:16px 18px 18px;
}
.lmxFp__logBox{
  flex:0 0 216px; overflow-y:auto;
  border-left:1px solid rgba(240,232,210,.08); background:rgba(0,0,0,.25);
  padding:14px;
}
.lmxFp__logHead{
  font-family:var(--noir-display, inherit); font-weight:700;
  font-size:9.5px; letter-spacing:.14em; color:var(--yellow,#f2c400); margin-bottom:10px;
}
.lmxFp__logRow{ padding:7px 0; border-bottom:1px solid rgba(240,232,210,.06); }
.lmxFp__logRow b{ display:block; font-size:11.5px; font-weight:600; color:#f5f1e6; }
.lmxFp__logRow i{ display:block; margin-top:2px; font-size:10.5px; font-style:normal; color:rgba(240,232,210,.4); }

.lmxFp__hint{
  font-size:12px; line-height:1.55; color:rgba(240,232,210,.55);
  margin-bottom:14px;
}

/* ---------- рабочая зона (проявка / совмещение) ---------- */
.lmxFp__dustWrap{
  display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap;
}
.lmxFp__pane{
  position:relative; flex:0 0 auto;
  border:1px solid rgba(240,232,210,.16); border-radius:12px; overflow:hidden;
  background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.045), rgba(0,0,0,.4) 70%), #0b0a09;
  color:rgba(240,232,210,.72);
}
.lmxFp__pane--work{ height:min(42vh,320px); aspect-ratio:20/27; min-height:230px; }
.lmxFp__pane--card{ width:100%; aspect-ratio:20/27; }
.lmxFp__svg{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}

/* порошок */
.lmxFp__dust{
  position:absolute; inset:0; display:grid; gap:0;
  touch-action:none; cursor:crosshair;
}
.lmxFp__dust i{
  display:block;
  background:linear-gradient(160deg, rgba(16,15,13,.97), rgba(9,9,8,.99));
  transition:opacity .18s ease;
}
.lmxFp__dust i.is-off{ opacity:0; pointer-events:none; }

/* призрак образца для совмещения */
.lmxFp__ghost{
  position:absolute; inset:0; color:rgba(242,196,0,.8);
  opacity:.6; mix-blend-mode:screen; pointer-events:none;
  transform-origin:50% 50%;
}
.lmxFp__ghost.is-locked{ color:rgba(125,235,160,.9); opacity:.72; }
.lmxFp__cross{
  position:absolute; left:50%; top:50%; width:26px; height:26px;
  transform:translate(-50%,-50%); pointer-events:none;
  border-left:1px solid rgba(242,196,0,.35); border-top:1px solid rgba(242,196,0,.35);
  opacity:.6;
}
.lmxFp__pane--work{ touch-action:none; }

/* боковая колонка рабочей зоны */
.lmxFp__side{ flex:1 1 210px; min-width:190px; }
.lmxFp__sideHead{
  font-size:9px; font-weight:800; letter-spacing:.14em;
  color:rgba(240,232,210,.4); margin-bottom:4px;
}
.lmxFp__sideVal{
  font-size:12.5px; color:#f5f1e6; margin-bottom:11px; line-height:1.4;
}
.lmxFp__gauge{
  height:8px; border-radius:5px; overflow:hidden;
  background:rgba(0,0,0,.45); border:1px solid rgba(240,232,210,.12);
}
.lmxFp__gauge i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,#8a6f00,#f2c400);
  transition:width .15s ease;
}
.lmxFp__gaugeVal{
  margin-top:5px; font-family:var(--noir-display, inherit);
  font-size:15px; font-weight:700; color:var(--yellow,#f2c400); letter-spacing:.06em;
}
.lmxFp__range{
  width:100%; margin:2px 0 4px; accent-color:var(--yellow,#f2c400);
}

/* ---------- кнопки ---------- */
.lmxFp__acts{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.lmxFp__btn{
  padding:10px 16px; border-radius:9px; cursor:pointer;
  border:1px solid rgba(240,232,210,.2); background:rgba(255,255,255,.05);
  font-family:var(--noir-display, inherit); font-weight:700;
  font-size:11px; letter-spacing:.1em; color:#f0e8d2;
}
.lmxFp__btn:disabled{ opacity:.4; cursor:default; }
.lmxFp__btn--gold{
  background:linear-gradient(180deg,#f2c400,#c99f00); color:#100f0d; border-color:#f2c400;
}
.lmxFp__btn--mini{ margin-top:10px; padding:7px 12px; font-size:10px; }

/* ---------- сравнение минуций ---------- */
.lmxFp__cmp{
  position:relative;
  display:grid; grid-template-columns:47% 47%; justify-content:space-between;
  gap:0;
}
.lmxFp__cmpPane{
  position:relative; aspect-ratio:20/27;
  border:1px solid rgba(240,232,210,.14); border-radius:10px; overflow:hidden;
  background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.05), rgba(0,0,0,.45) 70%), #0b0a09;
  color:rgba(240,232,210,.7);
}
.lmxFp__cmpTag{
  position:absolute; left:8px; top:7px; z-index:4;
  font-size:8.5px; font-weight:800; letter-spacing:.12em;
  color:rgba(242,196,0,.65);
}
.lmxFp__links{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:3; pointer-events:none;
}
.lmxFp__links line{
  stroke:rgba(242,196,0,.55); stroke-width:1; stroke-dasharray:3 3;
}
.lmxFp__dot{
  position:absolute; z-index:5;
  width:19px; height:19px; margin:-9.5px 0 0 -9.5px;
  border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(240,232,210,.35); background:rgba(0,0,0,.55);
  transition:background .15s ease, border-color .15s ease, opacity .2s ease;
}
.lmxFp__dot span{
  font-size:8.5px; font-weight:800; color:rgba(240,232,210,.55); pointer-events:none;
}
.lmxFp__dot:hover{ border-color:rgba(242,196,0,.7); }
.lmxFp__dot.is-ok{
  border-color:rgba(242,196,0,.9); background:rgba(242,196,0,.9);
  box-shadow:0 0 9px rgba(242,196,0,.5);
}
.lmxFp__dot.is-ok span{ color:#100f0d; }
.lmxFp__dot.is-bad{
  border-color:rgba(220,90,90,.8); background:rgba(220,90,90,.22);
}
.lmxFp__dot.is-bad span{ color:#ffb0b0; }
.lmxFp__dot.is-b{ opacity:0; pointer-events:none; }
.lmxFp__dot.is-b.is-shown{ opacity:1; }
.lmxFp__dot.is-static{ cursor:default; pointer-events:none; }

.lmxFp__counters{
  display:flex; gap:16px; flex-wrap:wrap; margin-top:12px;
  font-size:10px; font-weight:800; letter-spacing:.1em; color:rgba(240,232,210,.42);
}
.lmxFp__counters b{ color:#f5f1e6; }
.lmxFp__counters .is-ok b{ color:#f2c400; }
.lmxFp__counters .is-bad b{ color:#ffb0b0; }

/* ---------- итог мини-игры ---------- */
.lmxFp__done{ text-align:center; padding:18px 6px 6px; }
.lmxFp__doneIco{ font-size:34px; }
.lmxFp__donePct{
  margin-top:8px; font-family:var(--noir-display, inherit);
  font-size:52px; font-weight:700; line-height:1; color:var(--yellow,#f2c400);
}
.lmxFp__doneLbl{
  margin-top:8px; font-family:var(--noir-display, inherit);
  font-size:12px; font-weight:700; letter-spacing:.14em; color:#f5f1e6;
}
.lmxFp__doneText{
  margin:12px auto 0; max-width:440px;
  font-size:12.5px; line-height:1.6; color:rgba(240,232,210,.55);
}

/* ---------- холостой вход ---------- */
.lmxFp__idle{ text-align:center; padding:22px 6px 6px; }
.lmxFp__idleIco{ font-size:34px; }
.lmxFp__idleTitle{
  margin-top:10px; font-family:var(--noir-display, inherit);
  font-size:17px; font-weight:700; letter-spacing:.1em; color:#f5f1e6;
}
.lmxFp__idleText{
  margin:12px auto 0; max-width:470px;
  font-size:12.5px; line-height:1.65; color:rgba(240,232,210,.5);
}
.lmxFp__idleText b{ color:#f5f1e6; }

/* ══════════════════════════════════════════════════════════════
   ОТЧЁТ ОБ ЭКСПЕРТИЗЕ
   (рамка .lmxRep__* — из lab_dna.css, здесь только своё)
   ══════════════════════════════════════════════════════════════ */
#lmxFpRep{
  position:fixed; inset:0; z-index:100085;
  overflow-y:auto; padding:20px; box-sizing:border-box;
  background:rgba(0,0,0,.92);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-family:var(--sans, system-ui, sans-serif); color:#f0e8d2;
}
.lmxFpRep__span2{ grid-column:span 2; }

.lmxFpRep__card{
  display:flex; gap:12px; align-items:stretch; margin-bottom:12px;
}
.lmxFpRep__card .lmxFp__pane--card{ flex:1 1 auto; }

.lmxFpRep__quality{
  flex:0 0 46px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:7px;
}
.lmxFpRep__qLbl{
  font-size:7.5px; font-weight:800; letter-spacing:.1em;
  color:rgba(240,232,210,.35); writing-mode:vertical-rl; transform:rotate(180deg);
}
.lmxFpRep__qBar{ display:flex; flex-direction:column-reverse; gap:2px; }
.lmxFpRep__qBar i{
  display:block; width:14px; height:5px; border-radius:1px;
  background:rgba(240,232,210,.12);
}
.lmxFpRep__qBar i.is-on{ background:var(--yellow,#f2c400); box-shadow:0 0 5px rgba(242,196,0,.4); }
.lmxFpRep__qVal{
  font-family:var(--noir-display, inherit); font-size:12px;
  font-weight:700; color:var(--yellow,#f2c400);
}

.lmxFpRep__sep{
  height:1px; margin:12px 0 10px; background:rgba(240,232,210,.1);
}
.lmxFpRep__legend{
  display:flex; flex-direction:column; gap:5px; margin-top:11px;
  font-size:10.5px; color:rgba(240,232,210,.45);
}
.lmxFpRep__legend i{
  display:inline-block; width:9px; height:9px; margin-right:7px;
  border-radius:50%; vertical-align:middle;
}
.lmxFpRep__legend i.is-ok{ background:var(--yellow,#f2c400); }
.lmxFpRep__legend i.is-bad{ background:rgba(220,90,90,.6); }

.lmxFpRep__match{
  display:flex; align-items:center; gap:10px;
  padding:8px 9px; margin-bottom:6px; border-radius:8px;
  border:1px solid rgba(240,232,210,.1); background:rgba(0,0,0,.28);
}
.lmxFpRep__match b{
  flex:0 0 44px; text-align:center; padding:3px 0; border-radius:5px;
  font-family:var(--noir-display, inherit); font-size:11.5px; font-weight:700;
  background:rgba(240,232,210,.08); color:rgba(240,232,210,.6);
}
.lmxFpRep__match span{ flex:1 1 auto; font-size:12px; color:#f5f1e6; }
.lmxFpRep__match i{ font-style:normal; font-size:10px; color:rgba(240,232,210,.35); }
.lmxFpRep__match.is-top{ border-color:rgba(242,196,0,.4); background:rgba(242,196,0,.07); }
.lmxFpRep__match.is-top b{ background:rgba(242,196,0,.9); color:#100f0d; }
.lmxFpRep__matchNote{
  margin-top:9px; font-size:10.5px; color:rgba(240,232,210,.32); line-height:1.5;
}

/* ══════════════════════════════════════════════════════════════
   АДАПТИВ
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .lmxFpRep__span2{ grid-column:1 / -1; }
}
@media (max-width:900px){
  .lmxFp__logBox{ display:none; }
}
@media (max-width:760px){
  #lmxFp{ padding:0; }
  .lmxFp__box{ max-width:none; max-height:100vh; height:100vh; border-radius:0; border:none; }
  .lmxFp__title{ font-size:20px; }
  .lmxFp__dustWrap{ flex-direction:column; align-items:stretch; }
  .lmxFp__pane--work{ height:auto; width:min(72vw,260px); margin:0 auto; }
  .lmxFp__side{ min-width:0; }
  .lmxFp__acts .lmxFp__btn{ flex:1 1 150px; text-align:center; }

  #lmxFpRep{ padding:0; }
  .lmxFpRep__span2{ grid-column:auto; }
  .lmxFpRep__card{ flex-direction:row; }
}