:root{ --red:#d62828; --red-dark:#b71c1c; --green:#2e7d32; --blue:#1976d2; --bg:#edf1f5; --card:#ffffff; --text:#1f2937; --muted:#6b7280; } *{ margin:0; padding:0; box-sizing:border-box; } body{ font-family:'Inter',sans-serif; background:#2e7d32; color:var(--text); } 

.app{ min-height:100vh; display:flex; justify-content:center; align-items:center; padding:20px;} 



.card{ width:100%; max-width:430px; background:#fff; border-radius:28px; padding:30px 24px; box-shadow:0 20px 60px rgba(0,0,0,.12); } 

.logo{ width:90px; height:90px; margin:0 auto 25px; border-radius:50%; background:none; display:flex; align-items:center; justify-content:center; font-size:42px; color:#fff; } 

.hero-title{ text-align:center; font-size:2.5rem; font-weight:800; margin-bottom:25px; }


h1{ text-align:center; font-size:2rem; font-weight:800; margin-bottom:25px; } h2{ text-align:center; font-size:28px; margin-bottom:10px; } .screen{ animation:fade .25s ease; } .hidden{ display:none; } 

.tagline{ text-align:center; color:#000000; line-height:1.6; margin-bottom:30px; } .preview{ border:2px solid #ececec; border-radius:20px; overflow:hidden; margin-bottom:30px; } 


.preview-header{ background:var(--red); color:#fff; font-weight:800; font-size:28px; letter-spacing:2px; text-align:center; padding:14px; } 

.preview-photo{

    width:100%;
    aspect-ratio:1/1;

    display:block;

    object-fit:cover;
    object-position:center;

    background:#eee;

}
.preview-name{ padding-top:18px; text-align:center; font-size:28px; font-weight:800; } 

.preview-text{ padding:10px 20px 22px; text-align:center; line-height:1.6; color:#000000; } .uploadText{ text-align:center; color:#000000; line-height:1.6; margin-bottom:25px; } .uploadBox{ display:block; border:3px dashed var(--red); border-radius:22px; padding:55px 20px; text-align:center; cursor:pointer; transition:.25s; } .uploadBox:hover{ background:#fff7f7; } .uploadIcon{ font-size:60px; margin-bottom:15px; } .uploadTitle{ font-size:24px; font-weight:700; margin-bottom:8px; } .uploadSmall{ color:#888; } #cropContainer{ margin:25px 0; border-radius:20px; overflow:hidden; background:#000; } #cropImage{ display:block; max-width:100%; } .cropper-container{ max-width:100%!important; } button{ width:100%; padding:18px; border:none; border-radius:16px; font-size:17px; font-weight:700; cursor:pointer; transition:.2s; } button:hover{ transform:translateY(-2px); } 

#startButton, #continueButton{ background:var(--red); color:#fff; } #startButton:hover, #continueButton:hover{ background:var(--red-dark); } #continueButton:disabled{ opacity:.35; cursor:not-allowed; } .secondary{ margin-top:15px; background:#edf1f5; color:#555; } .secondary:hover{ background:#dfe4ea; } @keyframes fade{ from{ opacity:0; transform:translateY(15px); } to{ opacity:1; transform:none; } } @media(min-width:768px){ .card{ margin:40px 0; } } input, select, textarea{ width:100%; margin-bottom:15px; padding:16px; font-size:16px; font-family:inherit; border:2px solid #ddd; border-radius:14px; outline:none; transition:.2s; } input:focus, select:focus, textarea:focus{ border-color:#d62828; } textarea{ resize:none; height:120px; } /* =========================== FINAL FLYER PREVIEW =========================== */ .flyer{ display:block; width:90%; margin:2% auto 0; cursor:pointer; transition:.2s; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.12); } .flyer-headline{ color:var(--red); text-align:center; font-weight:800; line-height:1; margin:24px 0; white-space:nowrap; overflow:clip; width:100%; padding:0 18px; box-sizing:border-box; } .flyer-photo{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; } .flyer-body{ padding:24px; } .flyer-name{ text-align:center; font-size:34px; font-weight:800; margin-bottom:15px; } .flyer-description{ width:86%; margin:0 auto 20px; text-align:center; line-height:1.6; } .flyer-last{ margin-bottom:25px; } .flyer-contact{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:20px; margin-bottom:20px; } .flyer-bottom{ display:flex; align-items:center; gap:20px; } .flyer-qr{ width:95px; height:95px; border:2px dashed #aaa; display:flex; align-items:center; justify-content:center; font-size:12px; color:#777; } 

.flyer-save{ font-size:14px; font-weight:500; } /* =================================== PRINT FLYER (Hidden) =================================== */ #printFlyer{ position:absolute; left:-99999px; top:0; width:816px; height:1056px; background:#fff; padding:42px 58px; font-family:Inter,sans-serif; color:#111; box-sizing:border-box; overflow:hidden; } .print-headline{ text-align:center; font-size:64px; font-weight:800; color:#d62828; margin-bottom:30px; line-height:1; white-space:nowrap; overflow:hidden; width:100%; } 

.print-photo{
    width:365px;
    height:365px;

    margin:0;
    margin-left:50px;

    overflow:hidden;

    border:4px solid #ddd;
}


.print-photo img{ width:100%; height:100%; object-fit:cover; display:block; }



.print-name{ margin-top:28px; text-align:center; font-size:44px; font-weight:800; } .print-description{ margin:18px auto; max-width:560px; text-align:center; line-height:1.6; font-size:24px; } .print-lastseen{ margin-top:10px; text-align:center; font-size:24px; } .print-phone{ margin-top:28px; text-align:center; font-size:28px; font-weight:700; } .print-email{ margin-top:10px; text-align:center; font-size:24px; } .print-bottom{ position:absolute; left:58px; right:58px; bottom:65px; } .print-qr-column{ width:500px; flex-shrink:0; } .print-qr-column img{ width:100%; display:block; } .print-qr img{ width:100%; display:block; } .print-qrtext{ padding-left:24px; font-size:22px; line-height:1.5; } 

.print-footer{

    margin-top:30px;

    text-align:center;

}

.print-footer img{

    width:240px;    /* adjust to taste */
    height:auto;
    opacity:.9;

}



.site-footer{

    margin-top:20px;

    text-align:center;

}

.report-link{

    display:block;

    color:#fff;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    margin-bottom:2px;

}

.report-link:hover{

    text-decoration:none;

}

.footer-links{

    margin-bottom:8px;

    font-size:13px;

}

.footer-links a{

    color:rgba(255,255,255,.85);

    text-decoration:none;

}

.footer-links a:hover{

    text-decoration:underline;

}

.copyright{

    color:rgba(255,255,255,.65);

    font-size:12px;
    padding-bottom: 5px;

}

.report-link2{

    display:block;

    margin-top:22px;

    text-align:center;

    color:#2e7d32;

    font-weight:700;

    text-decoration:none;

}

.report-link2:hover{

    text-decoration:underline;

}

.copyright2{

    margin-top:18px;

    text-align:center;

    color:#999;

    font-size:13px;

}