.referral-tree-container{background:#fff;border-radius:1.5rem;box-shadow:0 4px 20px rgba(10,18,103,.08);padding:3rem;min-height:500px;overflow-x:auto;overflow-y:hidden;position:relative}@media(max-width:1199px){.referral-tree-container{padding:2.5rem}}@media(max-width:767px){.referral-tree-container{padding:2rem 1.5rem;border-radius:1rem}}.info-btn{width:15px;height:15px;margin-top:6px}.referral-user-modal .modal-content{border-radius:1.5rem;border:none;box-shadow:0 10px 40px rgba(10,18,103,.2);overflow:hidden}.referral-user-modal__header{background:linear-gradient(135deg,#0a1267,#1e40af);color:#fff;padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center}.referral-user-modal__header h2{margin:0;font-size:1.8rem}.referral-user-modal__close{background:none;border:none;color:#fff;cursor:pointer;padding:4px}.referral-user-modal__close svg{width:24px;height:24px}.referral-user-modal__close:hover{opacity:.8}.referral-user-info{text-align:center;padding:2rem 1rem 1rem}.referral-user-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#0a1267,#1e40af);color:#fff;font-size:2.5rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;box-shadow:0 6px 20px rgba(10,18,103,.3)}.referral-user-name{font-size:1.6rem;font-weight:600;margin:.5rem 0;color:#0a1267}.referral-user-email{color:#666;margin-bottom:2rem}.referral-user-details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:1rem;gap:1rem;padding:0 2rem 2rem}.referral-user-details-grid .detail-item{background:#f8f9ff;padding:1rem;border-radius:1rem;display:flex;flex-direction:column;border:1px solid #e0e0ff}.referral-user-details-grid .detail-item.full-width{grid-column:1/-1}.referral-user-details-grid .detail-item .label{font-size:.9rem;color:#666;margin-bottom:.4rem}.referral-user-details-grid .detail-item .value{font-weight:600;color:#0a1267;word-break:break-all}.referral-user-details-grid .detail-item .status-active{color:#28a745}.referral-user-details-grid .detail-item .status-inactive{color:#dc3545}.referral-user-details-grid .detail-item .status-unknown{color:#6c757d}@media(max-width:576px){.referral-user-details-grid{grid-template-columns:1fr;padding:0 1rem 1.5rem}}.referral-tree-wrapper{display:flex;justify-content:center;padding:4rem 0;min-width:100%}.referral-node{display:flex;flex-direction:column;align-items:center;position:relative}.referral-node:before{content:"";position:absolute;top:-40px;left:50%;width:2px;height:40px;background:linear-gradient(180deg,transparent,#0a1267 30%);transform:translateX(-50%);opacity:.6}.referral-node:first-child:before{display:none}.node-circle{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#0a1267,#1e40af);color:#fff;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;box-shadow:0 6px 15px rgba(10,18,103,.3);transition:all .3s ease;border:4px solid #fff}.node-circle:hover{transform:scale(1.12) translateY(-4px);box-shadow:0 12px 25px rgba(10,18,103,.4)}@media(max-width:991px){.node-circle{width:70px;height:70px;font-size:1.8rem}}@media(max-width:767px){.node-circle{width:60px;height:60px;font-size:1.5rem}}.node-label{margin-top:12px;font-weight:600;color:#0a1267;font-size:1.1rem;text-align:center;max-width:140px;word-wrap:break-word;line-height:1.4}@media(max-width:991px){.node-label{font-size:1rem;max-width:120px}}@media(max-width:767px){.node-label{font-size:.95rem;max-width:100px}}.children-container{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:60px;margin-top:60px;padding-top:40px;flex-wrap:nowrap}.children-container:before{content:"";position:absolute;top:0;left:50%;width:calc(100% - 120px);height:2px;background:#0a1267;opacity:.5;transform:translateX(-50%)}@media(max-width:1199px){.children-container{gap:40px}}@media(max-width:767px){.children-container{gap:20px;flex-wrap:wrap}.children-container:before{width:calc(100% - 40px)}}.referral-node p{margin-top:8px;font-size:.9rem;color:#888;font-style:italic}.referral-tree-container p.text-500{color:#6c757d;font-size:1.1rem;margin-top:2rem}@media(max-width:1400px){.children-container{gap:40px}}@media(max-width:991px){.children-container{gap:30px;margin-top:50px}}.referral-node .children-container{animation:fadeIn .6s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}