@keyframes spin{to{transform:rotate(360deg)}}body{font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;margin:0;padding:0;background-color:#f5f5f5;color:#333}.container{max-width:1400px;margin:0 auto;padding:30px}h1{color:#1e88e5;text-align:center;margin-bottom:40px;font-size:2.2rem}.content-wrapper{display:flex;gap:40px}.form-container{background-color:#fff;padding:30px;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,.1);width:45%;transition:all .3s ease;border:1px solid #e0e0e0}.form-container:hover{box-shadow:0 10px 20px rgba(0,0,0,.15);transform:translateY(-3px);border-color:#1e88e5}.form-group{margin-bottom:20px;position:relative}.color-input-group{display:flex;justify-content:space-between;align-items:center}label{display:block;margin-bottom:8px;font-weight:600;color:#555;font-size:15px}.color-input-group label{margin-bottom:0}input[type=date],input[type=text],input[type=url]{width:100%;padding:12px 15px;border:1px solid #ddd;border-radius:8px;font-size:15px;transition:all .3s ease;box-sizing:border-box}input[type=date]:focus,input[type=text]:focus,input[type=url]:focus{outline:0;border-color:#1e88e5;box-shadow:0 0 0 3px rgba(30,136,229,.2)}input[type=text]::placeholder,input[type=url]::placeholder{color:#aaa;font-size:14px}input[type=date]{appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3e%3c/rect%3e%3cline x1='16' y1='2' x2='16' y2='6'%3e%3c/line%3e%3cline x1='8' y1='2' x2='8' y2='6'%3e%3c/line%3e%3cline x1='3' y1='10' x2='21' y2='10'%3e%3c/line%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:35px}input[type=color]{width:25px;height:25px;padding:0;cursor:pointer;border:1px solid #ddd;border-radius:1px;background-color:transparent}.button-group{display:flex;gap:15px;margin-top:25px}button{background-color:#1e88e5;color:#fff;border:0;padding:12px 18px;border-radius:8px;cursor:pointer;font-size:16px;transition:all .3s ease;flex:1}button:hover{background-color:#1565c0;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.2)}.preview-container{width:55%;display:flex;flex-direction:column}.preview-title{text-align:center;color:#1e88e5;margin-bottom:20px;font-size:1.5rem}.preview-cards{display:flex;gap:25px;perspective:1000px;justify-content:center}.id-card{width:320px;height:480px;background-color:#fff;color:#000;border-radius:15px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.15);display:flex;flex-direction:column;transition:all .5s ease;position:relative}.id-card:hover{transform:translateY(-10px) rotateY(5deg);box-shadow:0 15px 30px rgba(0,0,0,.25)}.id-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(255,255,255,.1)0,rgba(255,255,255,0) 100%);opacity:0;transition:opacity .3s ease}.id-card:hover::before{opacity:1}.id-card-header{text-align:center;padding:20px;background-color:rgba(0,0,0,.1);transition:all .3s ease}.id-card:hover .id-card-header{background-color:rgba(0,0,0,.2)}.id-card-header h2{margin:0;font-size:20px;letter-spacing:1px}.id-card-header p{margin:8px 0 0;font-size:14px;letter-spacing:.5px}.id-card-body{display:flex;padding:25px;flex-grow:1;flex-direction:column;align-items:center}.details-center{text-align:center;margin-top:25px;width:100%}.name-display{font-size:16pt;font-weight:700;margin-bottom:5px;color:#333}.id-display{font-size:10pt;margin-bottom:20px;color:#555}.position-display{font-size:11pt;margin-bottom:5px;color:#333;font-weight:700}.department-display{font-size:14pt;font-weight:700;color:#222;margin-bottom:0}.photo-frame{background-color:#fff;margin-bottom:0 auto 5px;border:4px solid #fff;box-shadow:0 5px 15px rgba(0,0,0,.2);transition:all .3s ease}.id-card:hover .photo-frame{transform:scale(1.05);box-shadow:0 8px 20px rgba(0,0,0,.3)}.photo-container,.photo-frame{width:150px;height:150px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center}.photo-container img{width:100%;height:100%;object-fit:cover;border-radius:50%}.details{width:100%}.details p{margin:12px 0;font-size:15px;transition:all .3s ease}.id-card:hover .details p{transform:translateX(5px)}.id-card-footer{text-align:center;background-color:rgba(0,0,0,.1);font-size:13px;transition:all .3s ease;padding:0;margin-top:auto;font-weight:700}.id-card:hover .id-card-footer{background-color:rgba(0,0,0,.2)}.back-side{background-color:#f8f8f8;color:#333}.back-side .id-card-footer,.back-side .id-card-header{background-color:#e0e0e0;color:#333}.qr-container{display:flex;flex-direction:column;align-items:center;margin:20px 0}.qr-placeholder{width:180px!important;height:180px!important;padding:1px!important;background:#fff!important;box-shadow:0 1px 3px rgba(0,0,0,.1)!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;box-sizing:border-box!important}.qr-placeholder canvas{width:178px!important;height:178px!important;image-rendering:crisp-edges!important;display:block!important;margin:0 auto!important}.qr-text{margin-top:8px!important;font-size:12px!important;color:#666!important;text-align:center!important;max-width:80%}.qr-placeholder img{width:160px;height:160px;object-fit:contain}.back-details{text-align:center;margin-top:5px;margin-bottom:5px}.back-details p{margin:10px 0;font-size:14px}.back-details p:first-child{font-weight:700;margin-bottom:5px;margin-top:20px}.new-download-buttons{display:flex;justify-content:center;gap:30px;margin:30px auto;width:100%;max-width:655px}.new-download-buttons button{width:240px;padding:10px 15px;background-color:#1e88e5;color:#fff;border:0;border-radius:6px;cursor:pointer;font-size:14px;transition:all .2s ease;text-align:center}.new-download-buttons button:last-child{background-color:#4caf50}.new-download-buttons button:hover{opacity:.9;transform:translateY(-2px)}.preview-cards{margin-bottom:0}@media (max-width:768px){.new-download-buttons{flex-direction:column;align-items:center}.new-download-buttons button{width:100%;max-width:300px}}@media (max-width:1200px){.content-wrapper{flex-direction:column}.form-container,.preview-container{width:100%}.preview-cards{flex-wrap:wrap}}@media (max-width:768px){.container{padding:20px}.preview-cards{gap:20px}.id-card{width:100%;max-width:320px}}.upload-container{width:100%;max-width:645px;margin:10px auto 0;padding:15px;background-color:#fff;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,.1);transition:all .3s ease}.upload-container:hover{box-shadow:0 10px 20px rgba(0,0,0,.15);transform:translateY(-3px)}.upload-buttons{display:flex;gap:20px;justify-content:center}.upload-button{flex:1;max-width:300px}.upload-label{display:flex;flex-direction:column;align-items:center;justify-content:center;height:50px;background-color:#f8f9fa;border-radius:10px;border:2px dashed #ced4da;cursor:pointer;transition:all .3s ease;padding:15px;text-align:center}.upload-label:hover{background-color:#e9ecef;border-color:#1e88e5;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.1)}.upload-icon{font-size:32px;margin-bottom:10px;transition:all .3s ease}.upload-label:hover .upload-icon{transform:scale(1.1);color:#1e88e5}@media (max-width:768px){.upload-buttons{flex-direction:column}.upload-button{max-width:100%}}.upload-loading::after{content:"";position:absolute;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#1e88e5;animation:spin 1s ease-in-out infinite}.qr-placeholder:has(img)::before{content:none!important}.photo-container:has(img[src*="data:image"]){background:0 0}.app-footer{padding:10px;text-align:center;font-size:.8em;color:#666;margin-top:20px;border-top:1px solid #eee}.copyright-text{margin:0;line-height:1.5}