* { box-sizing: border-box; }
        body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: #17211b; background: #f3f6f1; }
        .shell { width: min(920px, calc(100% - 28px)); margin: 0 auto; padding: 34px 0 60px; }
        .hero { text-align: center; margin-bottom: 24px; }
        .bug-icon { width: 68px; height: 68px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 22px; background: #173f2c; color: white; font-size: 36px; box-shadow: 0 12px 30px rgba(23,63,44,.18); }
        h1 { margin: 0; font-size: clamp(30px, 6vw, 48px); letter-spacing: -1.4px; }
        .tagline { margin: 9px auto 0; max-width: 660px; color: #657069; font-size: 17px; line-height: 1.5; }
        .card { background: white; border: 1px solid #dfe6df; border-radius: 22px; box-shadow: 0 12px 38px rgba(36,55,42,.08); padding: 24px; margin-bottom: 18px; }
        .upload-zone { border: 2px dashed #a9b9ae; border-radius: 18px; padding: 30px 18px; text-align: center; cursor: pointer; transition: .18s ease; background: #fbfcfb; }
        .upload-zone:hover, .upload-zone.drag { border-color: #28734d; background: #f2faf5; }
        .upload-title { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
        .muted { color: #718078; font-size: 14px; line-height: 1.45; }
        #photoInput { display: none; }
        #previewWrap { display: none; margin-top: 18px; text-align: center; }
        #preview { display: block; width: auto; max-width: 100%; max-height: 420px; margin: 0 auto; border-radius: 16px; object-fit: contain; background: #eef1ee; }
        .change-photo { margin-top: 10px; border: 0; background: transparent; color: #28734d; font-weight: 700; cursor: pointer; }
        .location-title { font-weight: 800; margin: 22px 0 5px; }
        .location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
        label { display: block; color: #59655e; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
        input[type=text] { width: 100%; border: 1px solid #cfd8d1; border-radius: 12px; padding: 13px 14px; font-size: 16px; outline: none; }
        input[type=text]:focus { border-color: #28734d; box-shadow: 0 0 0 3px rgba(40,115,77,.11); }
        .analyze { width: 100%; margin-top: 20px; border: 0; border-radius: 14px; padding: 15px 18px; background: #173f2c; color: white; font-size: 17px; font-weight: 800; cursor: pointer; }
        .analyze:disabled { opacity: .55; cursor: default; }
        #loading { display: none; text-align: center; padding: 34px 10px; }
        .spinner { width: 68px; height: 68px; margin: 0 auto 16px; border: 7px solid #dce5df; border-top-color: #28734d; border-radius: 50%; animation: spin .85s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .loading-title { font-size: 21px; font-weight: 800; }
        .error { display: none; padding: 14px 16px; margin-top: 16px; background: #fff2f1; color: #8d2821; border: 1px solid #f1c8c4; border-radius: 12px; line-height: 1.45; }
        #results { display: none; }
        .result-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
        .result-name { font-size: clamp(28px, 5vw, 38px); font-weight: 900; letter-spacing: -.7px; }
        .scientific { color: #657069; font-style: italic; margin-top: 3px; }
        .badge { white-space: nowrap; padding: 7px 10px; border-radius: 999px; background: #e8f4ec; color: #21603f; font-size: 12px; font-weight: 800; }
        .summary { margin: 14px 0 0; font-size: 16px; line-height: 1.6; }
        .risk { margin-top: 16px; padding: 14px 16px; border-radius: 13px; background: #fff8e7; border: 1px solid #efddb0; line-height: 1.5; }
        .section { border-top: 1px solid #e7ece8; padding-top: 20px; margin-top: 20px; }
        .section h2 { font-size: 20px; margin: 0 0 10px; }
        ul { margin: 8px 0 0; padding-left: 22px; }
        li { margin: 8px 0; line-height: 1.5; }
        .treatment { padding: 15px; margin-top: 10px; border: 1px solid #dfe6df; border-radius: 13px; background: #fafcfa; }
        .treatment strong { display: block; margin-bottom: 5px; }
        .treatment div { margin-top: 5px; line-height: 1.45; }
        .another { width: 100%; border: 2px solid #173f2c; background: white; color: #173f2c; border-radius: 14px; padding: 14px 18px; font-size: 16px; font-weight: 800; cursor: pointer; margin-top: 18px; }
        .disclaimer { color: #77827b; font-size: 12px; line-height: 1.5; text-align: center; margin: 18px auto 0; max-width: 720px; }
        @media (max-width: 620px) { .shell { padding-top: 22px; } .card { padding: 18px; border-radius: 18px; } .location-grid { grid-template-columns: 1fr; } .result-header { display: block; } .badge { display: inline-block; margin-top: 10px; } }