:root{--navy:#061735;--navy2:#0b2855;--cyan:#19c8f4;--teal:#08bea9;--ink:#10213d;--muted:#68758a;--line:#dbe4ef;--bg:#f4f8fc;--white:#fff;--shadow:0 22px 60px rgba(13,39,77,.12)}
*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}body{margin:0;min-height:100vh;background:radial-gradient(circle at 15% 0%,rgba(25,200,244,.12),transparent 30%),var(--bg)}button,input,textarea{font:inherit}button{cursor:pointer}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,72px);background:rgba(255,255,255,.9);border-bottom:1px solid rgba(219,228,239,.8);backdrop-filter:blur(16px);position:sticky;top:0;z-index:20}.brand img{display:block;width:226px;height:58px;object-fit:contain;object-position:left center}.top-actions{display:flex;gap:12px;align-items:center}.icon-btn,.avatar{width:42px;height:42px;border:1px solid var(--line);background:#fff;border-radius:50%;display:grid;place-items:center;color:var(--navy)}.icon-btn svg{width:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.avatar{background:var(--navy);color:#fff;font-weight:800;border:0}main{width:min(1120px,calc(100% - 40px));margin:0 auto;padding:50px 0}.intro{max-width:740px;margin-bottom:28px}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;font-weight:800;color:#087f86}.intro h1{font-size:clamp(2rem,5vw,3.8rem);line-height:1.02;letter-spacing:-.045em;margin:10px 0 14px;color:var(--navy)}.intro p{font-size:1.08rem;line-height:1.65;color:var(--muted);margin:0}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}.scan-card,.results,.tips,.feedback{background:#fff;border:1px solid rgba(219,228,239,.9);border-radius:24px;box-shadow:var(--shadow)}.scan-card{min-height:480px;overflow:hidden}.drop-zone{min-height:480px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:42px;border:2px dashed transparent;transition:.2s}.drop-zone.drag{background:#edfbff;border-color:var(--cyan)}.scan-frame{width:104px;height:104px;border-radius:28px;background:linear-gradient(145deg,var(--navy),var(--navy2));display:grid;place-items:center;margin-bottom:24px;box-shadow:0 14px 30px rgba(6,23,53,.22)}.scan-frame svg{width:64px;fill:none;stroke:var(--cyan);stroke-width:4;stroke-linecap:round}.scan-frame .bars{stroke:var(--teal);stroke-width:2.5}.drop-zone h2{font-size:1.6rem;margin:0 0 8px;color:var(--navy)}.drop-zone>p{margin:0;color:var(--muted)}.button-row{display:flex;gap:12px;margin:26px 0 16px}.primary,.secondary{border-radius:12px;min-height:48px;padding:0 20px;border:1px solid transparent;font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:9px}.primary{background:linear-gradient(110deg,var(--navy),#0b4b79);color:#fff;box-shadow:0 10px 22px rgba(6,23,53,.16)}.primary:hover{transform:translateY(-1px)}.primary svg{width:21px;fill:none;stroke:currentColor;stroke-width:1.8}.secondary{background:#fff;border-color:var(--line);color:var(--navy)}.demo-link,.text-btn{background:none;border:0;color:#087f86;font-weight:800;padding:8px}.privacy{font-size:.79rem!important;margin-top:22px!important;display:flex;align-items:center;gap:6px}.privacy svg{width:15px;fill:none;stroke:currentColor;stroke-width:1.8}.tips{padding:28px}.tips h3{margin:0 0 20px;color:var(--navy)}.tips ul{list-style:none;padding:0;margin:0;display:grid;gap:18px}.tips li{display:flex;gap:12px;align-items:center;color:#435169;line-height:1.4}.tips li span{flex:0 0 30px;width:30px;height:30px;border-radius:10px;background:#e9faff;color:#087f86;display:grid;place-items:center;font-weight:800}.supports{border-top:1px solid var(--line);margin-top:26px;padding-top:22px}.supports strong{display:block;font-size:.86rem;margin-bottom:12px}.supports div{display:flex;flex-wrap:wrap;gap:7px}.supports span{font-size:.75rem;background:#f1f5f9;padding:6px 9px;border-radius:999px;color:#526078}.preview-pane{padding:28px}.preview-head{display:flex;justify-content:space-between;margin-bottom:15px;font-weight:750}.preview-head button{border:0;background:none;color:#087f86;font-weight:750}.image-wrap{height:330px;border-radius:18px;background:#e9eff6;overflow:hidden;position:relative;display:grid;place-items:center}.image-wrap img{width:100%;height:100%;object-fit:contain}.scan-line{position:absolute;left:5%;right:5%;height:3px;background:var(--cyan);box-shadow:0 0 14px var(--cyan);animation:scan 2s ease-in-out infinite}.scan-line.stopped{display:none}@keyframes scan{0%,100%{top:8%}50%{top:90%}}.status{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;color:var(--muted);font-weight:700}.spinner{width:17px;height:17px;border:2px solid var(--line);border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.full{width:100%;margin-top:14px}.results{margin-top:24px;padding:30px}.result-heading{display:flex;justify-content:space-between;gap:20px;align-items:start}.result-heading h2{font-size:1.8rem;color:var(--navy);margin:10px 0 4px}.result-heading p{margin:0;color:var(--muted)}.success-pill{font-size:.78rem;font-weight:800;color:#087f69;background:#e8faf5;padding:6px 10px;border-radius:999px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-top:26px}.field-grid label{display:grid;gap:7px}.field-grid label span{font-size:.84rem;font-weight:800;color:#35435b}.field-grid input,textarea{width:100%;border:1px solid var(--line);background:#fbfdff;border-radius:11px;padding:13px 14px;color:var(--ink);outline:none}.field-grid input:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(25,200,244,.12)}.wide{grid-column:1/-1}.duplicate{display:flex;gap:10px;align-items:center;background:#fff7df;border:1px solid #f4d989;padding:13px 15px;border-radius:11px;margin-top:20px;color:#6a4d00}.duplicate span{font-size:.88rem}details{margin-top:20px;border-top:1px solid var(--line);padding-top:18px}summary{cursor:pointer;font-weight:800;color:#536177;margin-bottom:12px}textarea{resize:vertical;line-height:1.5}.small{min-height:40px;margin-top:10px}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}.feedback{margin-top:24px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:none}.feedback div:first-child{display:flex;flex-direction:column;gap:3px}.feedback span{color:var(--muted);font-size:.9rem}.rating{display:flex;gap:7px}.rating button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 12px;color:#526078}.rating button.selected{border-color:var(--teal);background:#e8faf5;color:#087f69}dialog{width:min(620px,calc(100% - 30px));border:0;border-radius:22px;padding:26px;box-shadow:0 24px 80px rgba(6,23,53,.3)}dialog::backdrop{background:rgba(6,23,53,.55);backdrop-filter:blur(3px)}.dialog-head{display:flex;justify-content:space-between;align-items:start}.dialog-head h2{margin:5px 0;color:var(--navy)}.dialog-head button{font-size:2rem;border:0;background:none}.history-list{display:grid;gap:10px;margin-top:18px;max-height:55vh;overflow:auto}.history-item{border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;justify-content:space-between;gap:12px}.history-item strong,.history-item span{display:block}.history-item span{font-size:.84rem;color:var(--muted);margin-top:3px}.history-item button{border:0;background:#f0f5fa;color:var(--navy);border-radius:9px;padding:7px 10px;font-weight:750}.empty{text-align:center;color:var(--muted);padding:35px}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--navy);color:white;padding:12px 18px;border-radius:11px;opacity:0;pointer-events:none;transition:.25s;z-index:40}.toast.show{opacity:1;transform:translate(-50%,0)}footer{width:min(1120px,calc(100% - 40px));margin:0 auto;padding:12px 0 34px;color:#6c7890;font-size:.82rem;display:flex;justify-content:space-between}.hidden{display:none!important}
@media(max-width:800px){.topbar{height:68px;padding:0 18px}.brand img{width:188px;height:48px}main{width:min(100% - 24px,680px);padding:30px 0}.intro h1{font-size:2.45rem}.workspace{grid-template-columns:1fr}.tips{display:none}.drop-zone{min-height:430px;padding:24px 18px}.scan-card{min-height:430px}.button-row{flex-direction:column;width:100%}.button-row button{width:100%}.field-grid{grid-template-columns:1fr}.wide{grid-column:auto}.results{padding:22px 17px}.feedback{align-items:flex-start;flex-direction:column}.rating{width:100%;display:grid;grid-template-columns:repeat(4,1fr)}.rating button{padding:9px 3px}.form-actions{flex-direction:column-reverse}.form-actions button{width:100%}.image-wrap{height:280px}footer{flex-direction:column;gap:7px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}