#title-container{display:flex;align-items:center;justify-content:center;margin-bottom:20px}#title-icon{width:75px;height:75px;margin-right:10px;border-radius:10px}h1{font-size:2.5em;color:#333;margin:0}#drop-area{display:none;margin:20px auto;width:80%;max-width:500px;height:200px;padding:20px;border:2px dashed #ccc;border-radius:10px;text-align:center;color:#555;background-color:#f9f9f9;transition:border-color .3s,background-color .3s;display:flex;flex-direction:column;justify-content:center;align-items:center}#drop-area.dragover{border-color:#007bff;background-color:#e6f0ff;color:#333}.icon{width:50px;height:50px;margin-bottom:10px;stroke:#555}#drop-area.dragover .icon{stroke:#007bff}#steps-container{display:flex;justify-content:space-around;margin-bottom:20px;padding:10px}.step{text-align:center;width:20%;padding:10px;border:2px solid #ccc;border-radius:8px;background-color:#f9f9f9;transition:background-color .3s,border-color .3s}.step.active{border-color:#007bff;background-color:#e6f0ff}.step h2{margin:0;font-size:1.2em}.step p{margin:5px 0 0;font-size:.9em}#step4-warning{margin:20px auto;text-align:center;font-size:1em;color:#d32f2f;font-weight:700}#generate-qrcode-btn{display:block;margin:50px auto;padding:15px 30px;font-size:1.5em;color:#fff;background-color:#007bff;border:none;border-radius:8px;cursor:pointer;box-shadow:0 4px 6px #0000001a;transition:background-color .3s,transform .2s}#generate-qrcode-btn:hover{background-color:#0056b3;transform:scale(1.05)}#generate-qrcode-btn:active{background-color:#004080;transform:scale(.95)}#qrcode-container{display:flex;justify-content:center;align-items:center;margin-top:20px;height:300px}#qrcode{display:block;margin:0 auto}#qrcode-description{margin-top:10px;font-size:1em;color:#333;text-align:center}#image-section{display:none;margin:20px auto;width:90%;max-width:800px;padding:20px;border:1px solid #ccc;border-radius:10px;background-color:#f9f9f9;box-shadow:0 4px 6px #0000001a}#image-container img{width:150px;height:150px;object-fit:contain;border-radius:8px;box-shadow:0 4px 6px #0000001a;border:1px solid #ddd;transition:transform .2s}#image-container img{width:150px;height:auto;border-radius:8px;box-shadow:0 4px 6px #0000001a;border:1px solid #ddd;transition:transform .2s}#image-container img:hover{transform:scale(1.05);border-color:#007bff}#end-session-btn{position:fixed;bottom:20px;right:20px;display:flex;align-items:center;justify-content:center;padding:15px 30px;font-size:1.2em;color:#fff;background-color:#e53935;border:none;border-radius:8px;cursor:pointer;box-shadow:0 4px 6px #0000001a;transition:background-color .3s,transform .2s}#end-session-btn:hover{background-color:#c62828;transform:scale(1.05)}#end-session-btn:active{background-color:#b71c1c;transform:scale(.95)}#end-session-btn svg{width:20px;height:20px;margin-right:10px;fill:#fff}#progress{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:20px;background-color:#000c;color:#fff;border-radius:8px;text-align:center;z-index:1000}#progress progress{width:100%;margin-top:10px}