body{background:#06060a}
.faculty-card{cursor:pointer;transition:all 0.5s cubic-bezier(0.16,1,0.3,1);position:relative;overflow:hidden}
.faculty-card::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:2px;background:linear-gradient(90deg,transparent,#f59e0b,#8b5cf6,transparent);transition:left 0.8s cubic-bezier(0.16,1,0.3,1)}
.faculty-card:hover::after{left:100%}
.faculty-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(0,0,0,0.3),0 0 0 1px rgba(245,158,11,0.15);border-color:rgba(245,158,11,0.2)!important}
.faculty-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:9999;display:none;align-items:center;justify-content:center;padding:1rem}
.faculty-modal-overlay.active{display:flex}
.faculty-modal{background:linear-gradient(145deg,rgba(255,255,255,0.07)0%,rgba(255,255,255,0.02)100%);border:1px solid rgba(255,255,255,0.1);border-radius:24px;padding:2rem;max-width:640px;width:100%;max-height:85vh;overflow-y:auto;position:relative;animation:modalIn 0.35s cubic-bezier(0.16,1,0.3,1);box-shadow:0 25px 60px rgba(0,0,0,0.5),0 0 0 1px rgba(245,158,11,0.1)}
.faculty-modal::-webkit-scrollbar{width:4px}
.faculty-modal::-webkit-scrollbar-track{background:transparent}
.faculty-modal::-webkit-scrollbar-thumb{background:rgba(245,158,11,0.3);border-radius:4px}
@keyframes modalIn{from{opacity:0;transform:scale(0.92) translateY(30px)}to{opacity:1;transform:scale(1) translateY(0)}}
.faculty-modal-close{position:absolute;top:1rem;right:1rem;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);color:#fff;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;z-index:2}
.faculty-modal-close:hover{background:rgba(245,158,11,0.2);border-color:rgba(245,158,11,0.3);transform:rotate(90deg);color:#f59e0b}
.modal-header{text-align:center;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,0.08)}
.modal-avatar{width:110px;height:110px;border-radius:50%;border:3px solid rgba(245,158,11,0.4);margin:0 auto 1rem;overflow:hidden;box-shadow:0 0 30px rgba(245,158,11,0.15)}
.modal-avatar img{width:100%;height:100%;object-fit:cover}
.modal-avatar .placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#f59e0b;font-size:2rem;font-weight:700}
.modal-name{font-size:1.1rem;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;gap:0.5rem}
.modal-name .badge{font-size:0.65rem;font-weight:600;padding:0.2rem 0.6rem;border-radius:20px;background:rgba(245,158,11,0.15);color:#f59e0b;border:1px solid rgba(245,158,11,0.2);text-transform:uppercase;letter-spacing:0.5px}
.modal-designation{color:#f59e0b;font-size:0.95rem;margin-top:0.25rem;font-weight:500}
.modal-body{display:grid;gap:0.75rem}
.modal-section-title{font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,0.3);margin:0.5rem 0 0.25rem;padding-left:0.25rem}
.modal-info-row{display:flex;gap:0.75rem;padding:0.85rem 1rem;background:rgba(255,255,255,0.03);border-radius:12px;border:1px solid rgba(255,255,255,0.06);transition:all 0.3s ease}
.modal-info-row:hover{background:rgba(255,255,255,0.06);border-color:rgba(245,158,11,0.15)}
.modal-info-row i{color:#f59e0b;width:18px;margin-top:3px;flex-shrink:0;font-size:0.9rem}
.modal-info-row .label{color:rgba(255,255,255,0.35);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.5px;font-weight:500}
.modal-info-row .value{color:#e4e4e7;font-size:0.9rem;margin-top:2px;font-weight:400}