@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}body{width:100vw;min-height:100vh;overflow:hidden;background:linear-gradient(135deg,#24424e,#0a242c,#2c5364);display:flex;justify-content:center;align-items:center}.box{width:100%;height:100%;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center}.box h1{color:#fff;font-size:36px;font-weight:700;letter-spacing:2px;margin-bottom:20px}.content{width:100%;max-width:1000px;height:calc(85% - 70px);background:#869799;border-radius:25px;padding:20px;box-shadow:0 30px 60px #00000059;display:flex;flex-direction:column}.input{display:flex;gap:12px;margin-bottom:20px}.input input{flex:1;padding:15px 18px;border-radius:14px;border:2px solid #3b82f6;font-size:16px}.input input:focus{outline:none;border-color:#1d4ed8}.input button{padding:15px 28px;border-radius:14px;border:none;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:transform .2s}.input button:hover{transform:scale(1.05)}.data{flex:1;display:flex;justify-content:center;align-items:center;overflow-y:auto}.data p{font-size:20px;font-weight:600}.data p:has(*){color:#504848}.data>div{width:100%;height:100%;background:linear-gradient(135deg,#f8fafc,#e2e8f0);border-radius:20px;padding:22px;display:flex;gap:30px;align-items:center}.img img{width:190px;height:190px;border-radius:50%;border:8px solid #2563eb;object-fit:cover;box-shadow:0 15px 35px #2563eb66}.data .content{background:none;box-shadow:none;padding:0;height:auto;display:flex;flex-direction:column;gap:18px}.name{display:flex;flex-direction:column;gap:6px}.name #name{font-size:30px;font-weight:700;color:#0f172a}.name #login{font-size:16px;color:#1b5ce7;font-weight:600}.name #bio{font-size:15px;color:#475569;max-width:500px}.follow{display:flex;gap:120px;justify-content:center;align-items:center;background:#434444c2;color:#fff;padding:16px 15px;border-radius:10px;font-weight:700;min-height:75px;text-align:center;box-shadow:0 10px 30px #22c55e66}.bottom{display:grid;grid-template-columns:repeat(2,3fr);gap:18px;margin-top:10px}.bottom span{display:flex;align-items:center;gap:8px;font-size:14px;color:#4b5563;background:#f9fafb;padding:6px 10px;border-radius:6px;word-break:break-word}.bottom span svg{font-size:16px;color:#2563eb}.bottom span:hover{background:#eef2ff}@media(max-width:1024px){.content{max-width:90%}.follow{gap:80px}}@media(max-width:768px){body{overflow-y:auto}.box h1{font-size:28px;text-align:center}.content{height:auto}.input{flex-direction:column}.input button{width:100%}.data>div{flex-direction:column;text-align:center}.img img{width:170px;height:170px}.follow{gap:40px}.bottom{grid-template-columns:1fr}}@media(max-width:480px){body{overflow-y:scroll}.box{padding:15px}.box h1{font-size:24px}.content{padding:18px;border-radius:18px}.img img{width:150px;height:150px;border-width:6px}.name #name{font-size:22px}.follow{flex-direction:column;gap:10px}}