@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#182720;background:#f8faf8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}button,input{font:inherit}button{cursor:pointer}[hidden]{display:none!important}a{color:inherit;text-decoration:none}.site-header{height:74px;background:#fff;border-bottom:1px solid #e8eee9}.header-inner{height:100%;max-width:1160px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;font:800 18px 'Manrope',sans-serif;letter-spacing:-.04em}.brand b{color:#31805b}.brand-icon{width:35px;height:35px;border-radius:10px;background:#e5f3e9;color:#26734b;display:grid;place-items:center}.brand-icon svg{width:22px;height:22px}.header-link{font-size:14px;color:#5f7165;font-weight:600}.header-link:hover{color:#1f7047}.container{max-width:1160px;padding:0 28px;margin:auto}.intro{text-align:center;padding:64px 0 35px}.eyebrow{display:block;color:#3a865b;font:700 11px 'Manrope',sans-serif;letter-spacing:.13em}.intro h1{font:800 clamp(32px,4.2vw,48px)/1.15 'Manrope',sans-serif;letter-spacing:-.045em;margin:16px 0 13px}.intro p{max-width:600px;margin:auto;color:#637369;font-size:16px;line-height:1.65}.upload-card{max-width:860px;margin:0 auto;background:#fff;border:1px solid #e2e9e2;border-radius:18px;padding:30px;box-shadow:0 14px 50px rgba(21,58,37,.055)}.card-heading{display:flex;align-items:start;justify-content:space-between;gap:20px;margin-bottom:24px}.card-heading h2{font:800 20px 'Manrope',sans-serif;letter-spacing:-.025em;margin:0 0 6px}.card-heading p{color:#718075;font-size:14px;margin:0}.format{color:#819086;font-size:12px;background:#f3f6f3;border:1px solid #e8ede7;border-radius:7px;padding:7px 10px;white-space:nowrap}.dropzone{min-height:268px;border:1.5px dashed #bbd3c1;background:#f8fbf8;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px;cursor:pointer;transition:border .2s,background .2s}.dropzone:hover,.dropzone:focus-within,.dropzone.over{border-color:#438b62;background:#f2f8f3}.dropzone input{position:absolute;width:1px;height:1px;opacity:0}.upload-symbol{width:55px;height:55px;border:1px solid #d7e9dc;border-radius:14px;background:#fff;color:#39865c;display:grid;place-items:center;margin-bottom:16px;box-shadow:0 4px 12px #1a613015}.upload-symbol svg{width:24px;height:24px}.dropzone strong{font:700 16px 'Manrope',sans-serif}.dropzone>span:not(.upload-symbol){margin-top:6px;color:#698075;font-size:14px}.dropzone u{color:#26794c;text-underline-offset:3px;font-weight:700}.dropzone small{color:#98a59b;font-size:12px;margin-top:22px}.selected{display:flex;align-items:center;gap:13px;border:1px solid #e4ece5;background:#fbfdfb;border-radius:9px;padding:10px;margin-top:14px}.selected img{width:48px;height:48px;object-fit:cover;border-radius:6px}.selected-info{min-width:0;flex:1;display:grid;gap:3px}.selected-info strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selected-info span{font-size:12px;color:#7a897e}.text-button{border:0;background:none;color:#27764c;font-size:13px;font-weight:700;padding:7px}.action-row{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:22px}.status{font-size:12px;color:#8a998c;line-height:1.5;margin:0}.status.error{color:#b74440}.primary{border:0;border-radius:9px;background:#216b46;color:#fff;padding:13px 18px;min-height:45px;font-weight:700;font-size:14px;white-space:nowrap;display:flex;gap:20px;align-items:center}.primary:hover:not(:disabled){background:#175737}.primary:disabled{background:#b5c8b9;cursor:default}.primary span{font-size:18px;line-height:1}.supported{max-width:860px;margin:24px auto 74px;text-align:center}.supported>span{font:700 10px 'Manrope',sans-serif;letter-spacing:.12em;color:#8b9b8e}.supported p{font-size:13px;color:#708075;margin:9px 0 0}.supported i{font-style:normal;color:#b2c2b4;margin:0 9px}.results{padding:0 0 70px;scroll-margin-top:24px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:21px}.section-heading h2{font:800 27px 'Manrope',sans-serif;letter-spacing:-.03em;margin:8px 0 0}.secondary{border:1px solid #d7e2d9;border-radius:8px;background:#fff;color:#346449;font-weight:700;font-size:13px;padding:10px 14px}.secondary:hover{background:#f3f8f3}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:17px}.metrics>div{background:#fff;border:1px solid #e2e9e2;border-radius:12px;padding:19px 20px;min-height:108px;display:flex;flex-direction:column;justify-content:space-between;gap:8px}.metrics span{color:#7b8b7e;font-size:12px}.metrics strong{font:800 21px 'Manrope',sans-serif;letter-spacing:-.025em}.result-grid{display:grid;grid-template-columns:.84fr 1.16fr;gap:17px}.panel{background:#fff;border:1px solid #e2e9e2;border-radius:13px;padding:23px}.panel h3{font:800 18px 'Manrope',sans-serif;margin:0 0 6px;letter-spacing:-.02em}.panel-lead{color:#78877c;font-size:13px;margin:0 0 24px}.score{margin:20px 0}.score-label{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#526557;margin-bottom:9px}.score-label b{font-weight:700;color:#2e6d48}.bar{height:8px;border-radius:10px;background:#edf2ec;overflow:hidden}.bar span{display:block;height:100%;border-radius:10px;background:#62a975}.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}.tabs button{border:1px solid transparent;background:#f4f7f3;color:#718373;border-radius:7px;padding:8px 10px;font-size:12px;font-weight:600}.tabs button.active{background:#e1f1e5;color:#246a43;border-color:#cbe6d2}.tabs button:hover{color:#246a43}.image-stage{min-height:280px;border-radius:9px;background:#f5f7f4;display:grid;place-items:center;padding:12px}.image-stage canvas{display:block;max-width:100%;height:auto;max-height:560px;border-radius:5px}.caption{text-align:center;color:#89998b;font-size:12px;margin:12px 0 0}.about{border-top:1px solid #e1e9e2;padding:35px 0 54px;display:flex;justify-content:space-between;gap:60px}.about div{max-width:600px}.about h2{font:800 18px 'Manrope',sans-serif;letter-spacing:-.02em;margin:0 0 10px}.about p{color:#718075;font-size:13px;line-height:1.65;margin:0}.scope-note{max-width:320px}footer{background:#fff;border-top:1px solid #e8eee9}.footer-inner{max-width:1160px;margin:auto;padding:25px 28px;display:flex;justify-content:space-between;gap:20px;color:#94a096;font-size:12px}
@media(max-width:800px){.intro{padding-top:48px}.result-grid{grid-template-columns:1fr}.about{gap:30px}.scope-note{max-width:250px}}@media(max-width:560px){.site-header{height:64px}.header-inner,.container,.footer-inner{padding-left:18px;padding-right:18px}.intro{padding:43px 0 29px}.intro h1{font-size:34px}.intro p{font-size:14px}.upload-card{padding:20px;border-radius:13px}.card-heading{margin-bottom:18px}.format{font-size:11px}.dropzone{min-height:230px;padding:18px}.dropzone strong{font-size:14px}.dropzone>span:not(.upload-symbol){font-size:13px}.action-row{display:block}.primary{width:100%;justify-content:center;margin-top:14px}.supported{margin-bottom:50px;line-height:1.7}.supported i{margin:0 4px}.section-heading{display:block}.secondary{margin-top:16px}.metrics{grid-template-columns:1fr 1fr;gap:9px}.metrics>div:first-child{grid-column:1/-1}.metrics>div{min-height:95px;padding:15px}.metrics strong{font-size:17px}.panel{padding:18px}.tabs button{font-size:11px}.about{display:block}.scope-note{max-width:none;margin-top:15px!important}}
/* Editorial leaf photograph; keep the upload form visually dominant. */
.intro{max-width:860px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 286px;gap:34px;align-items:center;text-align:left;padding:48px 0 31px}.intro h1{font-size:clamp(31px,3.4vw,41px);line-height:1.18;margin:14px 0 11px}.intro p{margin:0;max-width:470px;font-size:15px}.intro-photo{display:block;width:100%;height:206px;object-fit:cover;object-position:51% 48%;border-radius:13px;box-shadow:0 10px 28px rgba(26,62,36,.10)}
@media(max-width:700px){.intro{grid-template-columns:1fr;gap:20px;padding:35px 0 24px}.intro h1{font-size:34px}.intro-photo{height:176px;object-position:center 48%}}
.about div{max-width:720px}
.status-wrap{display:flex;align-items:center;gap:10px;min-width:0}.loading-spinner{width:17px;height:17px;flex:none;border:2px solid #cfe5d5;border-top-color:#216b46;border-radius:50%;animation:spin .8s linear infinite}.loading-bar{height:3px;margin-top:15px;background:#e9f1eb;border-radius:3px;overflow:hidden}.loading-bar span{display:block;width:35%;height:100%;background:#4c9b69;border-radius:3px;animation:loading-sweep 1.5s ease-in-out infinite}.section-heading h2{margin-top:0}@keyframes spin{to{transform:rotate(360deg)}}@keyframes loading-sweep{0%{transform:translateX(-110%)}100%{transform:translateX(400%)}}@media(prefers-reduced-motion:reduce){.loading-spinner,.loading-bar span{animation-duration:3s}}
.disease-detail{border-top:1px solid #e5ece5;margin-top:29px;padding-top:26px}.disease-detail h4{font:800 17px 'Manrope',sans-serif;letter-spacing:-.02em;margin:0 0 12px}.disease-detail p{color:#526557;font-size:15px;line-height:1.7;margin:0 0 16px}.disease-detail a{color:#27764c;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px}.disease-detail a:hover{color:#175737}
.disease-sources{display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:#78877c;font-size:13px}.disease-sources .source-divider{color:#a5b2a7}
.camera-option{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:17px;color:#91a094;font-size:13px}.camera-button{display:inline-flex;align-items:center;gap:8px;border:1px solid #d4e4d8;background:#fff;color:#26734b;border-radius:9px;padding:10px 15px;font-size:14px;font-weight:700}.camera-button svg{width:19px;height:19px}.camera-button:hover:not(:disabled){background:#f2f8f3}.camera-button:disabled,.camera-capture:disabled{opacity:.55;cursor:default}.camera-panel{margin-top:18px;border:1px solid #e1e9e2;border-radius:12px;background:#f6f9f6;padding:12px}.camera-panel video{display:block;width:100%;max-height:440px;object-fit:contain;background:#15251a;border-radius:8px}.camera-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:12px}.camera-actions button{border-radius:8px;padding:10px 14px;font-size:14px;font-weight:700}.camera-cancel{border:1px solid #d4e4d8;background:#fff;color:#32684b}.camera-capture{border:1px solid #216b46;background:#216b46;color:#fff}.camera-capture:hover:not(:disabled){background:#175737}.quality-note,.result-note{border:1px solid #e7dfbc;background:#fffaf0;color:#665a2d;border-radius:9px;padding:11px 14px;font-size:14px;line-height:1.55}.quality-note{margin:14px 0 0}.result-note{margin:0 0 16px}@media(max-width:560px){.camera-actions button{flex:1}}
.camera-help{margin-top:17px;padding:16px;border:1px solid #dce9df;border-radius:11px;background:#f7faf7;color:#365b42}.camera-help p{margin:0 0 12px;font-size:14px;line-height:1.55}.camera-help-actions{display:flex;flex-wrap:wrap;gap:9px}.camera-help-actions a,.camera-help-actions button{display:inline-flex;align-items:center;justify-content:center;padding:9px 13px;border-radius:8px;border:1px solid #c9ddce;background:#fff;color:#216b46;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer}.camera-help-actions a:hover,.camera-help-actions button:hover:not(:disabled){background:#edf6ee}.camera-help-actions button:disabled{opacity:.55;cursor:default}
.camera-flash{border:1px solid #d4e4d8;background:#fff;color:#32684b;margin-right:auto}.camera-flash[aria-pressed="true"]{background:#e8f4e9;border-color:#8ac49b;color:#175737}.camera-flash:disabled{opacity:.55;cursor:default}@media(max-width:560px){.camera-flash{margin-right:0}.camera-actions{flex-wrap:wrap}.camera-actions button{flex:1 1 30%}}