:root{--primary: #D62B2F;--primary-dark: #b52225;--light-grey: #D9D9D9;--mid-grey: #BFBFBF;--dark: #111111;--white: #ffffff;--bg-soft: #f8f9fa}body{margin:0;font-family:Segoe UI,sans-serif;background:linear-gradient(135deg,#fff,#f4f6f8);color:var(--dark)}.container{min-height:100vh;display:flex;flex-direction:column}.header{background:var(--white);border-bottom:3px solid var(--primary);padding:15px 40px}.brand-wrapper{display:flex;align-items:center}.brand-logo{height:55px;margin-right:15px}.brand-text h1{margin:0;font-size:22px;color:var(--primary)}.brand-text span{font-size:13px;color:var(--dark)}.hero{text-align:center;padding:80px 20px;color:var(--primary);border-radius:0 0 50px 50px}.headline{font-size:32px;margin-bottom:15px}.subtext{font-size:16px;margin-bottom:25px;opacity:.9}.primary-btn{background:var(--primary);color:#fff;border:none;padding:12px 28px;border-radius:6px;font-weight:600;cursor:pointer;transition:.3s ease}.primary-btn:hover{background:var(--primary-dark);transform:translateY(-2px)}.steps-section{padding:60px 20px;background:var(--bg-soft);text-align:center}.section-title{font-size:24px;margin-bottom:40px;color:var(--primary)}.steps-container{display:flex;justify-content:center;gap:25px;flex-wrap:wrap}.step-card{background:#fff;border-left:6px solid var(--primary);padding:25px;border-radius:10px;width:260px;box-shadow:0 10px 25px #0000000d;transition:.3s ease}.step-card:hover{transform:translateY(-5px)}.step-number{font-size:22px;font-weight:700;color:var(--primary);margin-bottom:10px}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:999}.modal{background:#fff;padding:35px;border-radius:14px;width:420px;max-width:90%;box-shadow:0 25px 50px #0003;border-top:5px solid var(--primary);position:relative;animation:fadeIn .4s ease}.modal-close{position:absolute;right:15px;top:10px;border:none;background:none;font-size:22px;cursor:pointer}.modal input,.modal select{width:100%;padding:10px;margin-bottom:15px;border-radius:6px;border:1px solid var(--mid-grey);outline:none}.modal input:focus,.modal select:focus{border-color:var(--primary)}.image-preview img{width:25%;border-radius:8px;margin-bottom:15px}.loading-screen{text-align:center;padding:30px 10px}.scanner-animation{width:70px;height:70px;border:6px solid var(--primary);border-top:6px solid transparent;border-radius:50%;margin:0 auto 20px;animation:spin 1s linear infinite}.result-modal{text-align:center}.health-meter{background:var(--light-grey);height:14px;border-radius:10px;overflow:hidden;margin:20px 0}.meter-fill{background:var(--primary);height:100%;transition:width .6s ease}.health-score{font-size:16px;margin-bottom:15px}.preview-line{margin:6px 0}.modal-steps{display:flex;justify-content:space-between;margin-bottom:25px;position:relative}.modal-step{text-align:center;flex:1}.modal-step span{width:35px;height:35px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--light-grey);color:#000;font-weight:700;margin-bottom:5px}.modal-step.active span{background:var(--primary);color:#fff}.modal-step p{font-size:12px;margin:0}.footer{margin-top:auto;text-align:center;padding:20px;background:var(--primary);color:#fff;font-size:13px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.steps-container{flex-direction:column;align-items:center}.hero{padding:60px 15px}.headline{font-size:24px}.modal{width:95%}}.upload-options{display:flex;gap:15px;margin-top:.5rem;margin-bottom:1rem}.upload-card{flex:1;background:#fff;border-radius:12px;padding:0;text-align:center;cursor:pointer;transition:all .3s ease;border:1px solid #eee;box-shadow:0 4px 10px #00000014}.upload-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px #00000026}.upload-icon{font-size:30px;margin-bottom:10px}.camera-card{border-top:4px solid #0a7cff}.gallery-card{border-top:4px solid #666}
