/* Первый экран инструмента по концепту reports/2026-09-29/novyy-uroven/koncept/ (шаг 6 плана).
   Свой файл, а не Tailwind: собранный style.css содержит только уже встречавшиеся классы,
   а пересборка тронула бы весь сайт. Акцент — фирменный зелёный, без градиентов. */
.udf-perv{padding:22px 18px 18px}
/* align-items:start: на посадочных (без H1 в инструменте) центровка по высокой картинке «до/после»
   оставляла над текстом пустоту около 90 px (#7035, Д7). */
.udf-perv-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:start}
.udf-perv-grid>*{min-width:0}
.udf-perv-grid.bez-dok{grid-template-columns:1fr}
.udf-h1{font-size:42px;line-height:1.08;letter-spacing:-.02em;font-weight:900;color:#0f172a;margin:0}
.udf-lead{margin:10px 0 0;font-size:17px;line-height:1.45;color:#57534e;max-width:34em}
.udf-fakty{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.udf-fakt{font-size:13px;font-weight:700;color:#57534e;background:#fff;border:1px solid #e7e5e4;border-radius:999px;padding:6px 12px;white-space:nowrap}
.udf-fakt b{color:#15803d}
.udf-rezhimy{display:flex;background:#f5f5f4;border-radius:12px;padding:4px;gap:4px;margin-top:18px}
.udf-rezhimy a{flex:1;text-align:center;padding:9px 6px;border-radius:9px;font-size:14px;font-weight:800;color:#57534e;text-decoration:none;transition:background .2s,color .2s}
.udf-rezhimy a:hover{color:#0f172a}
.udf-rezhimy a[aria-current="page"]{background:#fff;color:#0f172a;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.udf-drop{margin-top:12px;border:2px dashed #d6d3d1;border-radius:16px;padding:24px 16px;text-align:center;transition:border-color .2s,background .2s}
.udf-drop:hover,.udf-drop.aktiv{border-color:#16a34a;background:#f0fdf4}
.udf-knopki{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.udf-knopka{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:12px;font-weight:900;font-size:16px;transition:background .15s,transform .1s,border-color .15s;cursor:pointer}
.udf-knopka:active{transform:scale(.98)}
.udf-knopka:focus-visible{outline:3px solid #86efac;outline-offset:2px}
.udf-knopka.glav{background:#16a34a;color:#fff;box-shadow:0 6px 16px rgba(22,163,74,.25)}
.udf-knopka.glav:hover{background:#15803d}
.udf-knopka.vtor{background:#fff;border:1px solid #e7e5e4;color:#0f172a}
.udf-knopka.vtor:hover{border-color:#a8a29e}
.udf-kamera{display:none}
.udf-podskazka{margin:12px 0 0;font-size:13.5px;color:#a8a29e}
.udf-podskazka kbd{font:700 12px ui-monospace,Menlo,monospace;border:1px solid #e7e5e4;border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:#57534e;background:#fafaf9}
.udf-proba{display:flex;align-items:center;gap:10px;margin-top:14px;justify-content:center;font-size:13.5px;color:#57534e}
.udf-proba button{padding:0;border:0;background:none;border-radius:10px;cursor:pointer;transition:transform .15s}
.udf-proba button:hover{transform:translateY(-2px)}
.udf-proba button:focus-visible{outline:3px solid #86efac;outline-offset:2px}
.udf-proba img{width:44px;height:44px;border-radius:10px;object-fit:cover;display:block;box-shadow:0 0 0 2px #fff,0 0 0 3px #e7e5e4}
.udf-dokaz{margin:0;background:#fafaf9;border-radius:18px;padding:12px;border:1px solid #f0efed}
.udf-ba{position:relative;border-radius:14px;overflow:hidden;height:500px;background:#fff}
.udf-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.udf-ba .posle{background:conic-gradient(#f1f0ee 0 25%,#fff 0 50%,#f1f0ee 0 75%,#fff 0) 0 0/18px 18px}
.udf-ba .do{clip-path:inset(0 50% 0 0)}
.udf-ba .ruchka{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.3)}
.udf-ba .metka{position:absolute;top:10px;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:800;background:rgba(28,25,23,.72);color:#fff}
.udf-ba .metka.l{left:10px}.udf-ba .metka.r{right:10px}
.udf-dokaz figcaption{font-size:12.5px;color:#57534e;margin-top:8px;line-height:1.4}
@media (max-width:767px){
  .udf-perv{padding:16px 12px 14px}
  .udf-perv-grid{grid-template-columns:1fr;gap:16px}
  .udf-h1{font-size:30px}
  .udf-lead{font-size:15.5px}
  /* Плашки переносятся, а не уезжают за край: «Без регис…» и невидимая «До 12 Мп» (#7035, Д6). */
  .udf-fakty{gap:6px}
  .udf-fakt{font-size:12.5px;padding:5px 10px}
  .udf-rezhimy{margin-top:14px}
  .udf-rezhimy a{font-size:12.5px;padding:8px 4px}
  .udf-drop{padding:16px 10px}
  .udf-kamera{display:inline-flex}
  .udf-knopka{flex:1;padding:13px 14px;font-size:15px}
  .udf-podskazka .pk{display:none}
  .udf-ba{height:300px}
}