/* text from any photo: an invoice photographed on a table, Live Text style selection */
.hero-note .free{display:inline-block;background:var(--mark);color:var(--ink);font-weight:600;border-radius:999px;padding:2px 10px;margin-right:8px;font-size:13px}

.ocr-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:32px;align-items:start}
.ocr-stage{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.ocr-photo{position:relative;container-type:inline-size;padding:7% 10% 8%;overflow:hidden;
  background:
    radial-gradient(90% 70% at 18% 0%,rgba(255,255,255,.55),transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .32 0 0 0 0 .36 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(150deg,#D7DBE2,#BFC5CF 60%,#AEB5C1)}
/* the photo dims a little when text is lifted, like Live Text */
.ocr-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 100% at 50% 40%,transparent 50%,rgba(10,15,28,.28));transition:background .4s}
.ocr-stage.live .ocr-photo::after{background:radial-gradient(120% 100% at 50% 40%,rgba(10,15,28,.18) 50%,rgba(10,15,28,.5))}

.ocr-sheet{position:relative;z-index:1;font-family:"Helvetica Neue",Arial,sans-serif;font-size:max(8.5px,2.35cqw);line-height:1.45;color:#22262F;
  padding:7% 8% 8%;border-radius:2px;transform:rotate(-2.2deg);transform-origin:50% 40%;
  background:
    linear-gradient(180deg,transparent 33.2%,rgba(0,0,0,.07) 33.4%,rgba(255,255,255,.7) 33.7%,transparent 34.6%),
    linear-gradient(115deg,rgba(255,255,255,.0) 40%,rgba(255,255,255,.35) 55%,rgba(0,0,0,.04) 80%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .4 0 0 0 0 .42 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)'/%3E%3C/svg%3E"),
    linear-gradient(170deg,#FBFAF7,#F1EFEA);
  box-shadow:0 1px 1px rgba(0,0,0,.08),12px 22px 30px -12px rgba(30,35,50,.45),2px 3px 6px rgba(30,35,50,.12);
  -webkit-user-select:none;user-select:none;cursor:default;transition:filter .4s}
.ocr-stage.live .ocr-sheet{-webkit-user-select:text;user-select:text;cursor:text;filter:brightness(1.04) contrast(1.05)}
.ocr-sheet ::selection{background:rgba(0,87,255,.3)}
.ocr-sheet::selection{background:rgba(0,87,255,.3)}
.ocr-org{display:flex;flex-direction:column;border-bottom:1px solid #9CA1AB;padding-bottom:.8em;margin-bottom:.9em}
.ocr-org b{font-size:1.35em;letter-spacing:-.01em}
.ocr-sheet table{width:100%;border-collapse:collapse}
.ocr-req td{border:1px solid #A9AEB8;padding:.25em .5em}
.ocr-sheet .dh{font-size:1.3em;font-weight:700;text-align:center;margin:1.2em 0 .7em}
.ocr-payer{margin-bottom:.7em}
.ocr-items th,.ocr-items td{border:1px solid #A9AEB8;padding:.25em .5em;text-align:left}
.ocr-items th{background:rgba(0,0,0,.035);font-weight:600}
.ocr-items td:nth-child(2),.ocr-items th:nth-child(2){text-align:center;width:12%}
.ocr-items td:nth-child(3),.ocr-items th:nth-child(3){text-align:right;width:24%;white-space:nowrap}
.ocr-items .sum td{font-weight:700}
.ocr-note{margin-top:.8em;color:#3A3F4A}
.ocr-sign{display:flex;align-items:baseline;gap:1.4em;margin-top:1.4em}
.ocr-sign .hand{font-family:Caveat,cursive;font-size:2em;color:var(--sigink);transform:rotate(-4deg)}

/* found values: plain print until text is lifted, then underlined like data detectors */
.ocr-sheet u{text-decoration:none;border-radius:2px;transition:background .3s,box-shadow .3s}
.ocr-stage.live .ocr-sheet u{cursor:pointer;box-shadow:inset 0 -.12em 0 rgba(0,87,255,.75)}
.ocr-stage.live .ocr-sheet u:hover{background:rgba(0,87,255,.12)}
.ocr-sheet u.flash{background:rgba(0,87,255,.22)}

/* sweep when recognition runs */
.ocr-sheet::after{content:"";position:absolute;left:0;right:0;top:0;height:18%;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(0,87,255,.16) 70%,rgba(0,87,255,.5) 98%,transparent)}
.ocr-stage.reading .ocr-sheet::after{animation:ocrSweep 1s cubic-bezier(.5,0,.5,1)}
@keyframes ocrSweep{0%{opacity:1;top:-18%}90%{opacity:1}100%{opacity:0;top:100%}}

.ocr-live{position:absolute;z-index:3;right:16px;top:16px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--ink);
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:0 4px 14px rgba(10,15,28,.22);transition:background .2s,color .2s,transform .2s}
.ocr-live svg{width:24px;height:24px}
.ocr-live:hover{transform:scale(1.05)}
.ocr-live[aria-pressed="true"]{background:var(--blue);color:#fff}
.ocr-live.pulse{animation:ocrPulse 1.4s ease-out 2}
@keyframes ocrPulse{0%{box-shadow:0 0 0 0 rgba(0,87,255,.55)}100%{box-shadow:0 0 0 18px rgba(0,87,255,0)}}

.ocr-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 12px 20px;border-top:1px solid var(--line);font-size:14px;color:var(--mute);min-height:64px}
.ocr-bar #ocrSel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ocr-bar #ocrSel b{color:var(--ink);font-weight:500}
.ocr-bar>div{display:flex;gap:8px;flex:none}
.ocr-btn{height:38px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:500;background:var(--soft);transition:background .15s,opacity .15s}
.ocr-btn:hover:not([disabled]){background:#E6E9EF}
.ocr-btn.ocr-copy{background:var(--blue);color:#fff}
.ocr-btn.ocr-copy:hover:not([disabled]){background:var(--blue-d)}
.ocr-btn.ok{background:var(--ok)!important;color:#fff}
.ocr-btn[disabled]{opacity:.4;cursor:not-allowed}

.ocr-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px 22px 10px}
.ocr-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.ocr-card-head b{font-weight:600;font-size:17px}
.ocr-card h5{font-size:13px;font-weight:500;color:var(--mute);margin:14px 0 2px}
.ocr-card .pp-item{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.ocr-card .pp-item.in{opacity:1;transform:none}
.ocr-clip{margin-top:16px;border-radius:var(--r-md);border:1.5px dashed #C9CFDA;padding:14px 16px;font-size:15px;color:var(--mute);transition:border-color .2s,background .2s}
.ocr-clip small{display:block;font-size:12.5px;margin-bottom:4px}
.ocr-clip.has{border-style:solid;border-color:var(--blue);background:#fff;color:var(--ink)}
.ocr-clip #ocrClipText{display:block;white-space:pre-line;max-height:7.5em;overflow:hidden;word-break:break-word}

@media (max-width:900px){
  .ocr-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .ocr-stage{margin:0 -16px;border-radius:0}
  .ocr-photo{padding:9% 5% 10%}
  .ocr-bar{padding:10px 12px 10px 16px}
  .ocr-btn{padding:0 12px}
}
@media (max-width:420px){ .ocr-bar #ocrSel{display:none} .ocr-bar{justify-content:flex-end} }