:root{
  --paper:#EBEDF0; --ink:#181C21; --screen:#FFFFFF;
  --wire:#E6E9ED; --wire2:#F2F4F6; --line:#CDD2D8;
  /* текстовые тона: ink → основной, ink2 → вторичный (читаемый), muted → мета/декор */
  --ink2:#525A63; --ink3:#6E7680; --muted:#8A929B;
  --accent:#E8501F; --accent-ink:#7A2E12; --accent-soft:#FCE6DC; --accent-line:#F4BBA2;
  --ml:#6B4DF0; --ml-soft:#ECE7FF; --ml-line:#D3C7FF;
  --safety:#CC3E62; --safety-soft:#FBE2E9; --safety-line:#F2BECD;
  --trust:#178A64; --trust-soft:#DBF3EA; --trust-line:#AEE2CF;
  --warn:#C77E14; --warn-soft:#FBEED4; --warn-line:#EFD299;
  --sans:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:560px;
  /* шкала отступов */
  --s1:6px; --s2:10px; --s3:14px; --s4:20px; --s5:28px;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;
  line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;}

.app{min-height:100vh;display:flex;flex-direction:column;}
.appbar{display:flex;align-items:baseline;gap:10px;padding:15px 22px;
  background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;}
.brand{font-weight:800;font-size:17px;letter-spacing:-.01em;}
.brand-sub{font-size:13px;color:var(--ink3);}

.stage{flex:1;display:flex;flex-direction:column;}
.screen{flex:1;display:flex;flex-direction:column;align-items:center;
  padding:22px 16px 30px;animation:fade .25s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.screen[hidden]{display:none!important;}

.card{width:100%;max-width:var(--maxw);background:#fff;border:1px solid var(--line);
  border-radius:18px;display:flex;flex-direction:column;flex:1;}
.pad{padding:22px;}

.stp{font-size:11px;color:var(--ink3);letter-spacing:.09em;
  text-transform:uppercase;font-weight:700;margin:0 0 var(--s3);}
.hintnote{font-size:13px;color:var(--ink2);line-height:1.5;margin:var(--s4) 2px 0;}

.btn{margin-top:var(--s4);background:var(--accent);color:#fff;text-align:center;font-weight:700;
  font-size:15px;padding:15px;border-radius:13px;cursor:pointer;user-select:none;border:none;width:100%;}
.btn:hover{filter:brightness(1.05);}
.btn:active{transform:scale(.99);}
.btn.ghost{background:var(--wire2);color:#39414A;border:1px solid var(--line);margin-top:var(--s2);}
.btn.ghost:hover{background:var(--wire);filter:none;}

/* экран 1 — список */
.search{background:var(--wire2);border:1px solid var(--line);border-radius:11px;padding:13px 14px;
  color:var(--ink3);font-size:14px;margin-bottom:var(--s3);}
.exlist{display:flex;flex-direction:column;gap:var(--s2);}
.ex{display:flex;align-items:center;justify-content:space-between;background:var(--wire2);
  border:1px solid var(--line);border-radius:12px;padding:16px;font-size:15px;font-weight:650;
  color:#39414A;cursor:pointer;transition:.15s;}
.ex.recent{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-ink);}
.ex.recent:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(232,80,31,.12);}
.ex .chev{color:var(--ink3);font-size:18px;}
.ex.dim{background:var(--wire2);color:var(--ink3);cursor:default;font-weight:600;}
.soon{font-size:11.5px;font-weight:600;color:var(--ink2);background:#fff;
  border:1px solid var(--line);border-radius:20px;padding:3px 11px;}

/* экран 2 — камера */
.camtop{display:flex;align-items:center;justify-content:space-between;padding:0 2px var(--s3);}
.camtop .nav{width:32px;height:32px;border-radius:50%;background:var(--wire2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink2);font-size:18px;cursor:pointer;}
.camtop .nav-spacer{width:32px;}
.camtop .exn{font-size:16px;font-weight:700;}
.vf{flex:1;background:#22262B;border-radius:18px;position:relative;margin-bottom:var(--s4);overflow:hidden;
  display:flex;align-items:center;justify-content:center;min-height:300px;}
.vf video{width:100%;height:100%;object-fit:cover;}
.vf .corner{position:absolute;width:30px;height:30px;border:2px solid rgba(255,255,255,.6);z-index:2;}
.vf .c1{top:16px;left:16px;border-right:none;border-bottom:none;border-radius:7px 0 0 0;}
.vf .c2{top:16px;right:16px;border-left:none;border-bottom:none;border-radius:0 7px 0 0;}
.vf .c3{bottom:16px;left:16px;border-right:none;border-top:none;border-radius:0 0 0 7px;}
.vf .c4{bottom:16px;right:16px;border-left:none;border-top:none;border-radius:0 0 7px 0;}
.vf .hint{color:#D2D8DF;font-size:13px;text-align:center;max-width:250px;line-height:1.5;padding:0 16px;z-index:2;}
.camctrl{display:flex;align-items:center;justify-content:center;gap:38px;padding:var(--s1) 8px 0;}
.gal{width:48px;height:48px;border-radius:12px;background:var(--wire2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink2);cursor:pointer;}
.gal:hover{background:var(--wire);}
.gal svg,.flip svg{display:block;}
.recbtn{width:70px;height:70px;border-radius:50%;border:4px solid var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;}
.recbtn .inner{width:52px;height:52px;border-radius:50%;background:var(--accent);transition:.2s;}
.recbtn.rec .inner{border-radius:9px;width:30px;height:30px;}
.flip{width:48px;height:48px;border-radius:50%;background:var(--wire2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink2);cursor:pointer;}
.flip:hover{background:var(--wire);}

/* экран 3 — ожидание */
.waiting-card{align-items:center;}
.waitcompact{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s3);padding:26px 0 10px;}
.spinner{width:60px;height:60px;border-radius:50%;border:5px solid var(--wire);
  border-top-color:var(--ml);animation:spin .85s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.waitcompact h4{margin:0;font-size:19px;font-weight:700;}
.steps{display:flex;flex-direction:column;gap:var(--s3);width:100%;max-width:290px;margin-top:var(--s1);text-align:left;}
.sline{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--ink2);}
.sdot{width:18px;height:18px;border-radius:50%;flex:none;border:2px solid var(--line);}
.sline.done{color:var(--ink);}
.sline.done .sdot{background:var(--trust);border-color:var(--trust);}
.sline.now{color:var(--ink);font-weight:600;}
.sline.now .sdot{border-color:var(--ml);background:var(--ml-soft);animation:pulse 1s ease-in-out infinite;}
@keyframes pulse{50%{opacity:.5;}}
.sline.wait{color:var(--muted);}
.eta{font-size:12.5px;color:var(--ink3);font-weight:500;}
.expwrap{margin-top:auto;width:100%;max-width:380px;align-self:center;padding-top:var(--s4);}
.expintro{font-size:13px;color:var(--ink2);line-height:1.45;margin:0 0 var(--s2);text-align:center;}
.expcard{display:flex;gap:14px;align-items:center;background:var(--ml-soft);border:1px solid var(--ml-line);
  border-radius:14px;padding:15px;}
.expphoto{width:60px;height:60px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,#C9BCFF,#9B86F5);position:relative;overflow:hidden;}
.expphoto::after{content:"";position:absolute;width:24px;height:24px;border-radius:50%;background:#fff9;top:14px;left:18px;}
.expphoto::before{content:"";position:absolute;width:42px;height:27px;border-radius:22px 22px 0 0;background:#fff9;bottom:0;left:9px;}
.expinfo{flex:1;min-width:0;}
.expname{font-size:15px;font-weight:750;margin-bottom:5px;}
.exprow{font-size:12px;color:var(--ink2);line-height:1.6;}
.expnote{font-size:11.5px;color:var(--ink3);text-align:center;margin:var(--s3) 0 0;font-style:italic;line-height:1.45;}

/* экран 4 — разбор */
.rhead{display:flex;align-items:center;gap:18px;margin-bottom:var(--s4);}
.ring{position:relative;width:84px;height:84px;flex:none;}
.ring svg{width:84px;height:84px;transform:rotate(-90deg);}
.ring-track{fill:none;stroke:var(--wire);stroke-width:7;}
.ring-prog{fill:none;stroke-width:7;stroke-linecap:round;stroke-dasharray:226.2;
  stroke-dashoffset:226.2;transition:stroke-dashoffset .65s cubic-bezier(.4,0,.2,1),stroke .3s;}
.ring.good .ring-prog{stroke:var(--trust);}
.ring.warn .ring-prog{stroke:var(--warn);}
.ring.bad .ring-prog{stroke:var(--accent);}
.ring-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.score{font-size:27px;font-weight:850;line-height:1;letter-spacing:-.02em;}
.rhead-text{min-width:0;}
.rhead-title{font-size:19px;font-weight:750;line-height:1.2;}
.slab{font-size:11.5px;letter-spacing:.04em;color:var(--ink3);text-transform:uppercase;
  font-weight:600;margin-top:6px;display:inline-block;}
.media-row{display:flex;flex-direction:column;gap:var(--s4);}
.media-col{display:flex;flex-direction:column;min-width:0;}
.media-cap{font-size:12.5px;font-weight:650;color:var(--ink3);margin-bottom:8px;}
.vid{background:#000;border-radius:13px;min-height:170px;position:relative;
  display:flex;align-items:center;justify-content:center;overflow:hidden;}
.vid video{max-width:100%;max-height:360px;width:auto;display:block;background:#000;}
/* кастомный плеер: одна шкала с заливкой проигрывания + метка ошибки */
.player{display:flex;align-items:center;gap:11px;margin:var(--s3) 0 0;}
.pp{width:36px;height:36px;border-radius:50%;border:none;background:var(--accent);color:#fff;
  cursor:pointer;flex:none;font-size:13px;display:flex;align-items:center;justify-content:center;line-height:1;}
.pp:hover{filter:brightness(1.06);}
.pbar{position:relative;flex:1;height:8px;border-radius:4px;background:var(--wire);cursor:pointer;}
.pfill{position:absolute;left:0;top:0;height:8px;border-radius:4px;background:var(--accent);width:0;pointer-events:none;}
.pmark{position:absolute;top:-12px;transform:translateX(-50%);font-size:14px;line-height:1;
  color:var(--accent);cursor:pointer;z-index:2;}
.pmark::after{content:"";position:absolute;left:50%;top:15px;width:2px;height:8px;
  background:var(--ink);border-radius:1px;transform:translateX(-50%);}
.ptime{font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums;flex:none;white-space:nowrap;}
.vtlhint{font-size:11.5px;color:var(--ink3);line-height:1.45;margin:var(--s2) 2px 0;}
.cue{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4);}
.onecard{border-radius:12px;padding:15px;border:1px solid;}
.onecard.error{background:var(--accent-soft);border-color:var(--accent-line);}
.onecard.doubtful{background:var(--warn-soft);border-color:var(--warn-line);}
.oc-title{font-size:15px;font-weight:750;color:#2A1B12;line-height:1.3;margin-bottom:8px;
  display:flex;align-items:center;gap:7px;}
.oc-text{font-size:13.5px;color:#3A2A20;line-height:1.5;}
.oc-points{margin:9px 0 0;padding-left:20px;font-size:13.5px;color:#3A2A20;line-height:1.6;}
.oc-points li{margin-bottom:5px;}
/* вторичные ошибки — компактные раскрывающиеся строки */
.errrow{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#fff;}
.errrow.error{border-color:var(--accent-line);}
.errrow.doubtful{border-color:var(--warn-line);}
.errrow-head{display:flex;align-items:center;gap:9px;padding:13px 14px;cursor:pointer;}
.errrow.error .errrow-head{background:var(--accent-soft);}
.errrow.doubtful .errrow-head{background:var(--warn-soft);}
.errrow-title{flex:1;font-size:14px;font-weight:700;color:#2A1B12;}
.errrow-chev{color:var(--ink3);font-size:13px;transition:transform .2s;}
.errrow.open .errrow-chev{transform:rotate(180deg);}
.errrow-body{padding:11px 14px 14px;}
.errrow.error .errrow-body{background:var(--accent-soft);}
.errrow.doubtful .errrow-body{background:var(--warn-soft);}
.cleanmsg{display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;padding:20px 0 8px;}
.cleanmsg .ci{width:54px;height:54px;border-radius:50%;background:var(--trust-soft);
  display:flex;align-items:center;justify-content:center;font-size:27px;}
.cleanmsg p{margin:0;font-size:14px;color:var(--ink2);max-width:280px;line-height:1.5;}
.checknote{font-size:12px;color:var(--ink3);line-height:1.5;margin:var(--s3) 2px 0;}

/* экран 5 — отказ */
.refused-card{align-items:center;}
.errwrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 0;}
.errico{width:70px;height:70px;border-radius:50%;background:var(--safety-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;}
.errico::after{content:"!";font-size:36px;font-weight:800;color:var(--safety);}
.errwrap h4{margin:0 0 var(--s3);font-size:21px;font-weight:750;}
.errwrap p{margin:0;font-size:14.5px;color:var(--ink2);line-height:1.55;max-width:350px;}
.refreason{margin-top:var(--s3)!important;font-size:12.5px!important;color:var(--ink3)!important;}

.hidden{display:none!important;}

/* ====================== ДЕСКТОП ====================== */
@media (min-width:760px){
  .stage{padding:40px 24px 52px;align-items:center;justify-content:flex-start;}
  .screen{padding:0;width:100%;max-width:960px;flex:none;}
  .card{flex:none;margin:0 auto;border-radius:22px;box-shadow:0 12px 34px rgba(20,25,30,.09);}
  .pad{padding:32px 36px;}
  .result-card{max-width:880px;}
  /* видео рядом (ваше | эталон), ошибки — под ними на всю ширину */
  .media-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;}
  .vid video{max-height:420px;}
  .screen[data-screen="select"] .card,
  .screen[data-screen="waiting"] .card,
  .screen[data-screen="refused"] .card{max-width:480px;}
  .screen[data-screen="capture"] .card{max-width:560px;}
  .vf{min-height:360px;}
  .errwrap{padding:54px 0;}
}
@media (min-width:1200px){ .result-card{max-width:920px;} }

/* ====================== МОБИЛЬНЫЙ ВЕБ ====================== */
@media (max-width:759px){
  .stage{padding:0;}
  .screen{padding:14px 12px 22px;}
  .card{min-height:calc(100vh - 130px);border-radius:16px;}
  .appbar{padding:13px 16px;}
}
@media (max-width:380px){
  .pad{padding:18px;}
  .camctrl{gap:26px;}
}