:root{--bg:#f7f7fb;--card:#fff;--text:#0f172a;--muted:#6b7280;--accent:#6366f1}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:Inter,system-ui,sans-serif}.app{max-width:900px;margin:36px auto;padding:18px}h1{text-align:center;font-size:1.6rem}.controls{gap:18px;margin-bottom:18px;display:flex}.search{border:1px solid #e6e9ef;border-radius:8px;flex:1;padding:10px}.employee-form{background:var(--card);border-radius:8px;flex-wrap:wrap;align-items:center;gap:8px;padding:10px;display:flex;box-shadow:0 1px 2px #0f172a1a}.employee-form input{border:1px solid #e6e9ef;border-radius:6px;min-width:140px;padding:8px}button{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:6px;padding:8px 10px}button[type=button]{background:#ef4444}.employee-table{border-collapse:collapse;background:var(--card);border-radius:8px;width:100%;overflow:hidden;box-shadow:0 1px 2px #0f172a0a}th,td{text-align:left;border-bottom:1px solid #f1f5f9;padding:10px 12px}th{color:var(--muted);background:#fafbff;font-weight:600}.empty{text-align:center;color:var(--muted);padding:20px}app.css *{box-sizing:border-box;margin:0;padding:0;font-family:Poppins,sans-serif}body{color:#333;background:linear-gradient(135deg,#f3f4f6,#e5e7eb);min-height:100vh}.app{background:#fff;border-radius:16px;max-width:1000px;margin:40px auto;padding:25px 40px;box-shadow:0 8px 25px #0000001a}.app h1{text-align:center;color:#2c3e50;margin-bottom:20px;font-size:2rem}.controls{flex-wrap:wrap;justify-content:space-between;gap:15px;margin-bottom:20px;display:flex}.search{border:1px solid #ccc;border-radius:6px;outline:none;flex:1;height:34px;padding:6px 10px;font-size:.9rem;transition:all .3s}.search:focus{border-color:#4f46e5;box-shadow:0 0 0 2px #4f46e533}.employee-form{flex-wrap:wrap;flex:2;gap:10px;display:flex}.employee-form input{border:1px solid #ccc;border-radius:8px;outline:none;flex:calc(33.33% - 10px);padding:10px;transition:all .3s}.employee-form input:focus{border-color:#6366f1}.form-actions{justify-content:flex-end;gap:10px;width:100%;margin-top:5px;display:flex}.form-actions button{color:#fff;cursor:pointer;background:#4f46e5;border:none;border-radius:8px;padding:8px 16px;transition:all .3s}.form-actions button:hover{background:#3730a3}.form-actions .cancel{background:#9ca3af}.empty{text-align:center;color:#888;padding:30px 0;font-size:1.1rem}.employee-table{border-collapse:collapse;width:100%;margin-top:10px}.employee-table th,.employee-table td{text-align:left;border-bottom:1px solid #e5e7eb;padding:10px 12px}.employee-table th{background:#f9fafb;font-weight:600}.employee-table tr:hover{background:#f3f4f6}.actions{justify-content:center;align-items:center;gap:8px;display:flex}.actions button{cursor:pointer;color:#fff;border:none;border-radius:6px;margin-right:8px;padding:5px 10px;transition:all .3s}.actions button:first-child{background:#2563eb}.actions button:first-child:hover{background:#1e40af}.actions button:nth-child(2){background:#16a34a}.actions button:nth-child(2):hover{background:#15803d}.actions button:nth-child(3){background:#dc2626}.actions button:nth-child(3):hover{background:#991b1b}.modal-overlay{z-index:1000;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{text-align:center;background:#fff;border-radius:10px;width:300px;padding:25px 30px;box-shadow:0 4px 20px #0003}.modal input{border:1px solid #ccc;border-radius:5px;width:100%;margin:10px 0 15px;padding:8px 10px}.modal-buttons{justify-content:space-between;display:flex}.modal-buttons button{cursor:pointer;color:#fff;background:#007bff;border:none;border-radius:6px;padding:6px 12px;transition:all .3s}.modal-buttons button:hover{background:#0056b3}.modal-buttons button:last-child{background:#888}.modal-box{text-align:center;background:#fff;border-radius:12px;min-width:300px;max-width:400px;padding:25px 30px;animation:.3s fadeIn;box-shadow:0 8px 25px #0003}.modal-box h3{margin-bottom:10px;font-size:1.3rem}.modal-box p{color:#555;margin-bottom:20px}.modal-actions{justify-content:center;gap:15px;display:flex}.modal-actions button{cursor:pointer;border:none;border-radius:8px;padding:8px 18px;font-weight:500;transition:all .3s}.modal-actions .confirm{color:#fff;background:#2563eb}.modal-actions .confirm:hover{background:#1d4ed8}.modal-actions .cancel{color:#fff;background:#9ca3af}.modal-actions .cancel:hover{background:#6b7280}.id-card{perspective:1000px;width:350px;height:520px;transform-style:preserve-3d;border-radius:16px;transition:transform .8s;position:relative}.id-card.flipped{transform:rotateY(180deg)}.card-front,.card-back{backface-visibility:hidden;background:#fff;border-radius:16px;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;height:100%;display:flex;position:absolute;overflow:hidden;box-shadow:0 10px 25px #00000026}.header{text-align:center;background:#fff;width:100%;padding-top:10px;position:relative}.header .logo{width:70px;margin-bottom:4px}.header h1{color:#1446a0;letter-spacing:.5px;margin:0;font-size:1.2rem}.tagline{color:#c0392b;margin-top:-2px;font-size:.8rem;font-style:italic}.photo-section{justify-content:center;align-items:center;margin:15px 0;display:flex}.profile-photo{object-fit:cover;border:2px solid #007bff;border-radius:10px;width:150px;height:180px;box-shadow:0 3px 8px #00000026}.info-section{width:85%;margin-top:10px}.info-section p{color:#1f2937;align-items:center;margin:6px 0;font-size:.95rem;line-height:1.4}.bottom-band{background:linear-gradient(90deg,#1446a0,#0077b6);border-bottom-right-radius:16px;border-bottom-left-radius:16px;width:100%;height:60px;position:absolute;bottom:0;left:0}.card-back{flex-direction:column;justify-content:space-between;align-items:center;padding:25px 20px;display:flex;position:relative;transform:rotateY(180deg)}.card-back-header{text-align:center;width:100%;position:absolute;top:20px;left:0}.card-back-header h1{color:#1446a0;margin-bottom:2px;font-size:1.2rem}.card-back-header .tagline{color:#c0392b;font-size:.85rem;font-style:italic}.contact-section{text-align:left;color:#1f2937;width:90%;margin-top:150px;font-size:.95rem;line-height:1.6}.contact-section p{margin:8px 0}.bottom-band.back{background:linear-gradient(90deg,#1446a0,#0077b6);border-bottom-right-radius:16px;border-bottom-left-radius:16px;width:100%;height:70px;position:absolute;bottom:0;left:0}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}