.banknote-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.banknote-photos figure{margin:0;min-width:0}.banknote-photos img{display:block;width:100%;max-height:360px;object-fit:contain;border:1px solid #d7dde5;background:#f4f6f8;border-radius:8px}.banknote-photos figcaption{font-size:13px;margin:8px 0;color:#536a83}.banknote-placeholder{min-height:120px;display:grid;place-items:center;border:1px dashed #9baabc;border-radius:8px;color:#536a83}.banknote-filter-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.banknote-row{padding:16px 0;border-top:1px solid #d7dde5}.banknote-row:first-child{border:0}.banknote-row p{font-size:14px;color:#536a83}.banknote-confirm{display:flex;gap:10px;align-items:flex-start;margin:20px 0;font-size:15px}.banknote-confirm input{width:22px;height:22px;flex-shrink:0;margin:0}#confirm-banknote .primary,#recognize-banknote{margin-top:16px}button:disabled{cursor:wait;opacity:.6}@media(max-width:460px){.banknote-photos{grid-template-columns:1fr}.banknote-filter-dates{gap:6px}.banknote-filter-dates input{min-width:0}}

.banknote-home h2{margin-bottom:14px}.banknote-home button+button{margin-top:10px}.banknote-home{margin:0}.banknote-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0;margin:14px 0 18px;list-style:none}.banknote-steps li{display:flex;align-items:center;gap:6px;color:#697586;font-size:11px;line-height:1.25}.banknote-steps li span{display:grid;place-items:center;flex-shrink:0;width:25px;height:25px;border-radius:50%;background:#e8edf3;color:#697586;font-weight:800}.banknote-steps [aria-current=step]{color:#1647ff;font-weight:750}.banknote-steps [aria-current=step] span{color:#fff;background:#1647ff}.banknote-steps .complete span{background:#e7f0fc;color:#1647ff}.banknote-viewfinder{display:grid;place-items:center;aspect-ratio:157/69;border:2px dashed #9baabc;border-radius:10px;margin:24px 0;background:#f8fafc;color:#697586;font-size:13px}.banknote-step-preview{width:100%;max-height:340px;object-fit:contain;margin:16px 0;border-radius:8px}.banknote-capture button+button,.banknote-result>button+button{margin-top:12px}.banknote-value{font-size:46px;line-height:1.1;font-weight:800;letter-spacing:-1px;color:#162234;margin-top:22px}.banknote-serial-result{display:block;font-size:24px;letter-spacing:1px;margin:18px 0}.banknote-result input[readonly]{border-color:transparent;background:#f4f6f8;font-size:22px;font-weight:750;letter-spacing:1px}.banknote-result .banknote-photos{margin-top:22px}#banknote-retry-actions button+button{margin-top:12px}#banknote-camera-progress .banknote-steps{margin:12px 0}#camera-title{line-height:1.25}

.banknote-report-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.banknote-status{font-weight:700;color:#1647ff!important}
#camera.banknote-camera{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;overflow:hidden}
body:has(#camera.banknote-camera[open]){overflow:hidden}
#camera.banknote-camera .camera-shell{
  width:100%;height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr) auto auto auto;gap:10px;
  padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom));background:#f4f6f8;
}
#camera.banknote-camera header{grid-column:1;grid-row:1;margin:0;font-size:16px;min-width:0}
#camera.banknote-camera header .icon{flex-shrink:0}
#camera.banknote-camera #banknote-camera-progress{grid-column:1;grid-row:2;color:#697586;font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:8px}
#banknote-landscape{font-size:12px;padding:7px 10px}
#camera.banknote-camera .camera-view,#camera.banknote-camera .photo-review{grid-column:1;grid-row:3;min-height:0;position:relative;height:min(100%,calc((100dvw - 24px)*3/4));align-self:center}
#camera.banknote-camera .camera-view[hidden],#camera.banknote-camera .photo-review[hidden],#camera.banknote-camera #preview[hidden],#camera.banknote-camera #reference-overlay-controls[hidden]{display:none}
#camera.banknote-camera #preview{object-fit:cover;transform:none}
#camera.banknote-camera .photo-review img{object-fit:contain;transform:none}
#camera.banknote-camera #camera-hint{grid-column:1;grid-row:4;font-size:13px;line-height:1.4}
#camera.banknote-camera #take-photo,#camera.banknote-camera #photo-actions{grid-column:1;grid-row:5;min-width:0}
#camera.banknote-camera #take-photo{min-height:52px}
#camera.banknote-camera #photo-actions{grid-template-columns:1fr 1fr}
#camera.banknote-camera #photo-actions button{min-height:52px;font-size:14px;padding:10px}
#camera.banknote-camera #banknote-native-camera{grid-column:1;grid-row:6;min-height:44px;font-size:13px}
#banknote-frame{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;overflow:hidden}
.banknote-outline{position:relative;width:86%;aspect-ratio:157/69;border:1px solid #ffffff99;box-shadow:0 0 0 100vmax #0006}
.banknote-outline i{position:absolute;width:24px;height:24px;border:3px solid #79a6ff}
.banknote-outline i:nth-child(1){top:-2px;left:-2px;border-right:0;border-bottom:0}
.banknote-outline i:nth-child(2){top:-2px;right:-2px;border-left:0;border-bottom:0}
.banknote-outline i:nth-child(3){bottom:-2px;left:-2px;border-right:0;border-top:0}
.banknote-outline i:nth-child(4){bottom:-2px;right:-2px;border-left:0;border-top:0}
.banknote-outline span{position:absolute;bottom:calc(100% + 12px);left:0;right:0;text-align:center;color:#fff;font-size:12px;text-shadow:0 1px 3px #000}
#camera.banknote-camera:not(.banknote-crop-editor)[data-camera-state=connecting] #banknote-frame::after{content:'Подключаем камеру…';position:absolute;color:#fff;font-size:14px;text-align:center;padding:12px}
#camera.banknote-camera:not(.banknote-crop-editor)[data-camera-state=error] #banknote-frame::after{content:'Камера недоступна';position:absolute;color:#fff;font-size:14px;text-align:center;padding:12px}
#banknote-source-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#camera.banknote-crop-editor .camera-shell{grid-template-rows:auto auto minmax(0,1fr) auto auto auto auto}
#camera.banknote-crop-editor .banknote-outline{position:absolute;pointer-events:auto;touch-action:none;cursor:move;max-width:none}
#camera.banknote-crop-editor .banknote-outline span{display:none}
#camera.banknote-crop-editor #banknote-crop-controls{grid-column:1;grid-row:4;display:flex;gap:10px;align-items:center}
#banknote-crop-controls label{display:flex;gap:10px;align-items:center;flex:1;font-size:12px}
#banknote-crop-controls input{min-width:0;flex:1;min-height:36px}
#banknote-rotate-source{min-height:40px;font-size:22px}
#camera.banknote-crop-editor #camera-hint{grid-row:5}
#camera.banknote-crop-editor #take-photo,#camera.banknote-crop-editor #photo-actions{grid-row:6}
#camera.banknote-crop-editor #banknote-native-camera{grid-row:7}
#camera.banknote-crop-editor:has(#photo-review:not([hidden])) #banknote-crop-controls{display:none}
@media(orientation:landscape) and (max-height:600px){
  #camera.banknote-camera .camera-shell{grid-template-columns:minmax(0,1fr) 168px;grid-template-rows:auto auto minmax(0,1fr) auto;gap:8px}
  #camera.banknote-camera header,#camera.banknote-camera #banknote-camera-progress{grid-column:1/-1}
  #camera.banknote-camera #take-photo,#camera.banknote-camera #photo-actions{grid-column:2;grid-row:3;align-self:center}
  #camera.banknote-camera #photo-actions{grid-template-columns:1fr}
  #camera.banknote-camera #camera-hint{grid-column:1;grid-row:4;font-size:12px}
  #camera.banknote-camera #banknote-native-camera{grid-column:2;grid-row:4}
  .banknote-outline{width:min(86%,calc((100dvh - 230px)*157/69))}
  #camera.banknote-crop-editor .camera-shell{grid-template-rows:auto auto minmax(0,1fr) auto auto}
  #camera.banknote-crop-editor #take-photo,#camera.banknote-crop-editor #photo-actions{grid-row:3;grid-column:2}
  #camera.banknote-crop-editor #camera-hint{grid-row:5;grid-column:1}
  #camera.banknote-crop-editor #banknote-native-camera{grid-row:5;grid-column:2}
}