:root{--scan-line:#ffffff17;--scan-lime:#d3ff4e;--scan-violet:#a17cff;--scan-cyan:#52e1d2}
*{box-sizing:border-box}
html{min-width:320px;min-height:100%;background:#0b0c12;scroll-behavior:smooth}
body{min-height:100vh;margin:0;background:radial-gradient(ellipse at 4% 7%,#38205a55 0,transparent 29%),radial-gradient(ellipse at 99% 17%,#074c4a35 0,transparent 27%),radial-gradient(ellipse at 73% 100%,#54321f33 0,transparent 35%),linear-gradient(140deg,#0b0c12,#10111a 54%,#0b0c12);color:#f4f0ff;font-family:Inter,'Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,textarea{font:inherit;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,.upload-zone:focus-visible{outline:3px solid var(--scan-lime);outline-offset:3px}
.topbar{width:min(1080px,calc(100% - 48px));height:68px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--scan-line)}
.brand{display:flex;align-items:center;gap:9px;color:#f8f4ff;text-decoration:none;font-size:16px;font-weight:800;letter-spacing:-.45px}
.brand-mark{width:48px;height:36px;display:block;flex:none;object-fit:contain}
.brand-period{color:var(--scan-lime)}
.privacy-pill{display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid #d3ff4e35;border-radius:99px;background:#d3ff4e12;color:#d8ff78;font-size:8px;font-weight:800;letter-spacing:.8px}
.privacy-pill span{width:6px;height:6px;border-radius:50%;background:var(--scan-lime);box-shadow:0 0 0 4px #d3ff4e17,0 0 12px #d3ff4e90}
.page-shell{width:min(1000px,calc(100% - 48px));margin:auto;padding:39px 0 24px}
.intro{margin:0 auto 23px;text-align:center}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--scan-lime);font-size:8px;font-weight:850;letter-spacing:1.45px}
.sparkle{color:#ff55b8}
.intro h1{margin:10px 0 7px;color:#f5f1ff;font-size:clamp(34px,5vw,46px);font-weight:850;line-height:1.08;letter-spacing:-2px}
.intro h1 span{background:linear-gradient(95deg,var(--scan-lime),var(--scan-cyan) 52%,#ff55b8);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro p{margin:0 auto;color:#aaa4b8;font-size:11px;line-height:1.7}
.scanner-card{width:min(610px,100%);margin:0 auto;padding:20px;border:1px solid var(--scan-line);border-radius:17px;background:linear-gradient(145deg,#191a25f2,#14151df5);box-shadow:0 20px 58px #0005,0 1px 0 #ffffff08 inset;backdrop-filter:blur(16px)}
.scanner-heading,.result-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 1px 15px}
.section-kicker{color:var(--scan-lime);font-size:8px;font-weight:800;letter-spacing:1.3px}
.scanner-heading h2,.result-heading h3{margin:4px 0 0;color:#f1edfa;font-size:17px;letter-spacing:-.4px}
.local-badge{display:flex;align-items:center;gap:7px;color:#aaa3b7;font-size:8px;font-weight:800;letter-spacing:.6px}
.local-badge i{width:6px;height:6px;border-radius:50%;background:var(--scan-cyan);box-shadow:0 0 10px #52e1d2a0}
.upload-zone{position:relative;min-height:260px;display:grid;place-items:center;overflow:hidden;border:1px dashed #a17cff66;border-radius:13px;background:radial-gradient(ellipse at 50% 0,#a17cff12,transparent 65%),#101119;cursor:pointer;transition:border-color .18s,background .18s,transform .18s}
.upload-zone:hover,.upload-zone.is-dragging{transform:translateY(-1px);border-color:var(--scan-lime);background:radial-gradient(ellipse at 50% 0,#d3ff4e12,transparent 65%),#101119}
.upload-content{display:flex;align-items:center;flex-direction:column;padding:22px;text-align:center;transition:opacity .2s}
.upload-icon{width:58px;height:58px;display:grid;place-items:center;margin-bottom:14px;border:1px solid #a17cff45;border-radius:17px;background:linear-gradient(145deg,#a17cff24,#52e1d212);color:#d3c2ff;box-shadow:0 0 30px #a17cff12}
.upload-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.upload-content strong{color:#f1edfa;font-size:14px;font-weight:750}
.upload-subtitle{margin-top:6px;color:#aaa3b8;font-size:10px}
.file-types{margin-top:17px;padding:6px 9px;border:1px solid #ffffff14;border-radius:99px;color:#888397;font-size:8px;font-weight:750;letter-spacing:.8px}
.upload-zone img{display:none;max-width:min(100%,330px);max-height:245px;object-fit:contain;border-radius:9px;box-shadow:0 12px 32px #0007}
.scan-overlay{position:absolute;inset:0;display:none;pointer-events:none}
.scan-overlay:before,.scan-overlay:after{position:absolute;left:50%;width:min(68%,280px);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#d3ff4e,transparent);box-shadow:0 0 14px #d3ff4e;content:''}
.scan-overlay:before{top:22%}.scan-overlay:after{bottom:22%}
.upload-zone.has-image{min-height:290px;padding:20px;background:radial-gradient(ellipse at 50% 50%,#a17cff10,transparent 70%),#101119}
.upload-zone.has-image .upload-content{display:none}.upload-zone.has-image img{display:block}
.scan-status{min-height:17px;margin:11px 2px 0;color:#a29caf;font-size:9px;line-height:1.6}
.scan-status[data-kind=error]{color:#ff829a}.scan-status[data-kind=success]{color:#c5ff69}
.result-panel{margin-top:18px;padding:16px;border:1px solid #ffffff14;border-radius:12px;background:#101119;animation:reveal .28s ease both}
.result-panel[hidden]{display:none!important}
.result-heading{margin-bottom:12px}
.result-heading h3{font-size:14px}
.result-mark{width:30px;height:30px;display:grid;place-items:center;border:1px solid #d3ff4e35;border-radius:9px;background:#d3ff4e12;color:var(--scan-lime);font-size:15px}
.result-panel textarea{width:100%;min-height:90px;resize:vertical;padding:12px;border:1px solid #ffffff18;border-radius:9px;background:#0b0c12;color:#f1edfa;font-size:12px;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap}
.result-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.result-actions button{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 12px;border:1px solid #ffffff20;border-radius:9px;background:#ffffff08;color:#d5cde5;font-size:10px;font-weight:750;cursor:pointer;transition:all .18s}
.result-actions button:hover:not(:disabled){transform:translateY(-1px);border-color:#a17cff88;background:#a17cff1b;color:#fff}
.result-actions .copy{border-color:transparent;background:linear-gradient(105deg,#b95cff,#7453f0);color:#fff;box-shadow:0 6px 18px #874cff35}
.result-actions .copy:disabled{opacity:.42;cursor:not-allowed}
.result-actions svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.privacy-note{display:flex;align-items:flex-start;gap:9px;margin-top:17px;padding:11px 12px;border:1px solid #d3ff4e20;border-radius:9px;background:linear-gradient(100deg,#d3ff4e0c,#52e1d20a)}
.privacy-note>span{color:var(--scan-lime);font-size:13px}
.privacy-note p{margin:0;color:#aaa3b8;font-size:9px;line-height:1.6}
.privacy-note strong{color:#e6e0f1}
.page-footer{display:flex;justify-content:space-between;gap:12px;width:min(610px,100%);margin:19px auto 0;color:#898396;font-size:8px;letter-spacing:.35px}
.page-footer b{color:#ff55b8}
@keyframes reveal{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:520px){.topbar,.page-shell{width:calc(100% - 30px)}.topbar{height:61px}.page-shell{padding-top:30px}.intro{margin-bottom:19px}.intro h1{font-size:34px;letter-spacing:-1.5px}.scanner-card{padding:15px;border-radius:15px}.upload-zone{min-height:230px}.upload-zone.has-image{min-height:245px;padding:14px}.upload-zone img{max-width:100%;max-height:215px}.result-panel{padding:13px}.page-footer{font-size:7px}}
@media(max-width:360px){.scanner-card{padding:12px}.local-badge{font-size:7px;letter-spacing:.2px}.upload-zone{min-height:210px}.upload-content strong{font-size:13px}.page-footer{flex-direction:column;align-items:center;gap:6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition:none!important}}